diff options
| author | Isaac Kim <snakeisaac@gmail.com> | 2022-08-24 09:25:18 -0700 |
|---|---|---|
| committer | Isaac Kim <snakeisaac@gmail.com> | 2022-08-24 09:25:18 -0700 |
| commit | 924502e7ec55a64a23ababc4485652ab2aa67372 (patch) | |
| tree | 9b54259b87e897ff7122a4015036c300e1ac44d9 | |
| parent | 67ac5e3d1be0af7a3637c71f68931d725202501f (diff) | |
Add basic styling to main content
| -rw-r--r-- | css/style.css | 33 | ||||
| -rw-r--r-- | index.html | 15 |
2 files changed, 39 insertions, 9 deletions
diff --git a/css/style.css b/css/style.css index 3b668d1..dac691e 100644 --- a/css/style.css +++ b/css/style.css @@ -23,10 +23,26 @@ body { #content { width: 100%; + max-width: 1400px; + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; + background-color: #00000011; + display: flex; + flex-direction: column; } /* Reusable Elements */ +h1 { + font-size: 4rem; + font-weight: 700; + color: #000; + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + h3 { font-size: large; font-weight: 700; @@ -79,17 +95,16 @@ hr { transform: translate(2px, 2px); } - /* Link Styling - https://codepen.io/team/css-tricks/pen/xxPORam */ .link { text-decoration: none; position: relative; - color: #18272F; + color: #18272f; font-weight: 700; } .link::before { - content: ''; + content: ""; background-color: #00000044; position: absolute; left: 0; @@ -97,7 +112,7 @@ hr { width: 100%; height: 2px; z-index: -1; - transition: all .2s ease-out; + transition: all 0.2s ease-out; } .link:hover::before { @@ -108,7 +123,6 @@ hr { transform: scale(1.1); } - @media (min-width: 768px) { .button { min-width: 120px; @@ -130,8 +144,6 @@ hr { padding-bottom: 0.25rem; } - - #nav-links { display: flex; flex-direction: column; @@ -144,6 +156,13 @@ hr { margin-bottom: 0.25rem; } +#welcome { + height: 75vh; + display: flex; + flex-direction: column; + justify-content: center; +} + /* Media Queries */ @media screen and (max-width: 1000px) { @@ -15,7 +15,7 @@ </head> <body> <div id="nav"> - <div><img src="./images/favicon.png" id="logo" /></div> + <div><a href="#welcome"><img src="./images/favicon.png" id="logo" /></a></div> <hr /> <div id="business-hours"> <h3>Business Hours</h3> @@ -31,6 +31,17 @@ <a class="link" href="#xxx">Kitchen Staff</a> </div> </div> - <div id="content"><p>Hello, world!</p></div> + <div id="content"> + <div id="welcome"> + <div> + <p style="font-size: 2rem">Welcome to</p> + <h1>CSCI 1300</h1> + <p style="font-size: 2rem">User Interfaces and User Experience</p> + </div> + </div> + <div id="xxx" style="height: 100vh;"> + content here + </div> + </div> </body> </html> |