diff options
| -rw-r--r-- | css/style.css | 121 | ||||
| -rw-r--r-- | index.html | 19 |
2 files changed, 135 insertions, 5 deletions
diff --git a/css/style.css b/css/style.css index 250f565..66cdce5 100644 --- a/css/style.css +++ b/css/style.css @@ -1,18 +1,32 @@ +/* Global Styling */ + body { display: flex; + color: #333; + + font-family: classico-urw, sans-serif; + font-weight: 400; + font-style: normal; } #nav { display: flex; flex-direction: column; - background-color: aquamarine; width: 12rem; padding: 1rem; + text-align: center; } #content { - background-color: lightgreen; - width: 100% + width: 100%; +} + +/* Reusable Elements */ + +h3 { + font-size: large; + font-weight: 700; + color: #000; } #logo { @@ -24,8 +38,107 @@ hr { /* horizontal rule css style */ border: 2px solid #333; border-bottom: none; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +/* Cool Button */ + +/* CSS Button - https://getcssscan.com/css-buttons-examples UIForms #74 */ +.button { + background-color: #fbeee0; + border: 2px solid #422800; + border-radius: 30px; + box-shadow: #422800 4px 4px 0 0; + color: #000; + cursor: pointer; + display: inline-block; + font-weight: 700; + font-size: 1rem; + line-height: 2.5rem; + text-align: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + min-width: 120px; + padding: 0 25px; + transition: all 0.05s ease-in-out; +} + +.button:hover { + background-color: #fff; +} + +.button:active { + box-shadow: #422800 2px 2px 0 0; + transform: translate(2px, 2px); +} + + +/* Link Styling - https://codepen.io/team/css-tricks/pen/xxPORam */ +.link { + text-decoration: none; + position: relative; + color: #18272F; + font-weight: 700; +} + +.link::before { + content: ''; + background-color: #ffdfb9c0; + position: absolute; + left: 0; + bottom: -0.125rem; + width: 100%; + height: 2px; + z-index: -1; + transition: all .3s ease-in-out; +} + +.link:hover::before { + bottom: 0; + height: 100%; } + +@media (min-width: 768px) { + .button { + min-width: 120px; + padding: 0 25px; + } +} + +/* Individual Elements */ + +#business-hours { + display: flex; + flex-direction: column; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +#business-hours > * { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + + + +#nav-links { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#nav-links > * { + margin-top: 1rem; + margin-bottom: 0.25rem; +} + +/* Media Queries */ + @media screen and (max-width: 1000px) { body { flex-direction: column; @@ -34,4 +147,4 @@ hr { #nav { width: 100%; } -}
\ No newline at end of file +} @@ -6,6 +6,7 @@ <meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="./css/reset.css" /> + <link rel="stylesheet" href="https://use.typekit.net/hta7xia.css" /> <link rel="stylesheet" type="text/css" href="./css/style.css" /> <link rel="icon" href="./images/favicon.png" /> <meta name="theme-color" content="" /> @@ -13,7 +14,23 @@ <meta property="og:description" content="" /> </head> <body> - <div id="nav"><div><img src="./images/favicon.png" id="logo"/></div><hr/><div>text</div></div> + <div id="nav"> + <div><img src="./images/favicon.png" id="logo" /></div> + <hr /> + <div id="business-hours"> + <h3>Business Hours</h3> + <p>T/Th 1-2:20pm</p> + <p>CIT Room XXX</p> + <a href="https://discord.gg/XXXXXX">Zoom Link</a> + </div> + <hr /> + <div id="nav-links"> + <a class="button" href="#xxx">Weekly Specials</a> + <a class="link" href="#xxx">Course Schedule</a> + <a class="link" href="#xxx">Course Info</a> + <a class="link" href="#xxx">Kitchen Staff</a> + </div> + </div> <div id="content"><p>Hello, world!</p></div> </body> </html> |