diff options
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | src/components/Schedule.tsx | 90 | ||||
| -rw-r--r-- | src/components/active.css | 4 | ||||
| -rw-r--r-- | src/main.css | 3 | ||||
| -rw-r--r-- | src/main.tsx | 1 |
5 files changed, 95 insertions, 6 deletions
@@ -4,10 +4,11 @@ <meta charset="UTF-8" /> <link rel="icon" href="/avatar.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Wedding</title> + <title>Madison and Michael's Wedding</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.tsx"></script> + <noscript>You need to enable JavaScript to run this app.</noscript> </body> </html> diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx index 64e4d1a..ef72769 100644 --- a/src/components/Schedule.tsx +++ b/src/components/Schedule.tsx @@ -1,8 +1,92 @@ +import { Container, Paper } from '@mui/material'; +import PlaceIcon from '@mui/icons-material/Place'; + function Schedule() { return ( - <> - <p>Location and attire</p> - </> + <Container + maxWidth="md" + style={{ + height: '80vh', + marginTop: 80, + display: 'flex', + justifyContent: 'center', + }} + > + <Paper + elevation={3} + style={{ + height: '50%', + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + }} + > + <div + style={{ + height: '100%', + width: '80%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }} + > + <div + style={{ + height: '100%', + width: '100%', + display: 'flex', + alignItems: 'center', + }} + > + <div style={{ width: '35%' }}> + <h2>2:00 PM</h2> + </div> + <div style={{ width: '65%' }}> + <h2>Ceremony</h2> + <h3> + Divine Shepherd + <br /> + <a + href="https://maps.app.goo.gl/dGWvmjPiVjNGBVkZ9" + style={{ color: 'inherit', textDecoration: 'none' }} + > + 15005 Q St, Omaha, NE 68137 + <PlaceIcon /> + </a> + </h3> + </div> + </div> + <hr style={{ width: '100%' }} /> + <div + style={{ + height: '100%', + width: '100%', + display: 'flex', + alignItems: 'center', + }} + > + <div style={{ width: '35%' }}> + <h2>4:00 PM</h2> + </div> + <div style={{ width: '65%' }}> + <h2>Reception</h2> + <h3> + A Venue on the Ridge + <br /> + <a + href="https://maps.app.goo.gl/35RRqxzQdq6E4eSMA" + style={{ color: 'inherit', textDecoration: 'none' }} + > + 20033 Elkhorn Ridge Dr, Elkhorn, NE 68022 + <PlaceIcon /> + </a> + </h3> + </div> + </div> + </div> + </Paper> + </Container> ); } diff --git a/src/components/active.css b/src/components/active.css index b3841d1..e8b5f60 100644 --- a/src/components/active.css +++ b/src/components/active.css @@ -1,7 +1,7 @@ .active { - background-color: #1976d2; + background-color: #1976d2 } .inactive { - background-color: #c4c4c4; + background-color: #c4c4c4 } diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..13ce153 --- /dev/null +++ b/src/main.css @@ -0,0 +1,3 @@ +#body { + margin: 0 +} diff --git a/src/main.tsx b/src/main.tsx index 8aba432..8ada188 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -12,6 +12,7 @@ import Rsvp from './components/Rsvp'; import RsvpForm from './components/RsvpForm'; import Admin from './components/Admin'; import Home from './components/Home'; +import './main.css'; const router = createBrowserRouter([ { |