From 98ca88d20e0e24a3f06aad75c3a1de87d0b73a31 Mon Sep 17 00:00:00 2001 From: Gary Date: Thu, 9 Nov 2023 19:12:20 -0800 Subject: [PATCH] wireframe of the website --- css/styles.css | 97 ++++++++-- index.html | 510 +++++++++++++++++++++++++++++++++++-------------- 2 files changed, 446 insertions(+), 161 deletions(-) diff --git a/css/styles.css b/css/styles.css index 14090b6..b5a91e1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3,10 +3,9 @@ } body { - background: #121212; + background: whitesmoke; margin: 0; padding: 0; - min-height: 100vh; } header { padding: 0; @@ -26,35 +25,36 @@ main { display: flex; align-items: center; color: var(--text-color); - padding: 20px; - margin: 10px; + padding: 100px 5px 100px 5px; text-align: center; min-height: 50vh; - justify-content: space-evenly; - border-bottom: 1px solid rgb(0, 0, 0); + justify-content: center; + border-bottom: 3px solid rgb(151, 151, 151); } .flex-row { flex: 100%; flex-direction: row; display: flex; color: var(--text-color); - padding: 20px; margin: 10px; text-align: center; border-radius: 5px; flex-wrap: wrap; - justify-content: center; + justify-content: space-evenly; } .flex-container { - padding: 5rem; + margin: 10px; + padding: 5px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-evenly; align-items: center; + flex: 1 1 0; } footer { color: var(--text-color); + background-color: gray; text-align: center; padding: 1rem; flex: 1; @@ -64,10 +64,18 @@ footer { } h1, h2, -h3, -h4, -p { - color: white; +h3 { + color: #1c1c1c; + text-align: left; + margin: 5px; + padding: 5px; +} +p, +ul { + color: #1c1c1c; + text-align: left; + margin: 5px; + padding: 5px; } a { @@ -136,6 +144,59 @@ a { box-shadow: #00bcf3 0 0 0 3px, transparent 0 0 0 0; } +.button-3 { + margin: 2rem; + align-items: center; + appearance: none; + background-image: radial-gradient( + 100% 100% at 100% 0, + #444444 0, + #1d1d1d 100% + ); + border: 0; + border-radius: 100px; + box-shadow: rgba(48, 46, 53, 0.4) 0 2px 4px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(70, 71, 78, 0.5) 0 -3px 0 inset; + box-sizing: border-box; + color: #fff; + cursor: pointer; + display: inline-flex; + font-family: "JetBrains Mono", monospace; + height: 48px; + justify-content: center; + line-height: 1; + list-style: none; + overflow: hidden; + padding-left: 16px; + padding-right: 16px; + position: relative; + text-align: left; + text-decoration: none; + transition: box-shadow 0.15s, transform 0.15s, color 0.2s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + white-space: nowrap; + will-change: box-shadow, transform; + font-size: 18px; +} + +.button-3:focus { + box-shadow: #000000 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, + rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #242424 0 -3px 0 inset; +} + +.button-3:hover { + box-shadow: #00baf35b 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px 3px, + #000000 0 -3px 0 inset; + transform: translateY(-2px); + color: #00bcf3; +} + +.button-3:active { + box-shadow: #242424 0 3px 7px inset; + transform: translateY(-2px); +} /* Menu */ .menu { margin: 0 auto; @@ -144,16 +205,18 @@ a { align-content: center; flex-direction: row; flex-wrap: wrap; + z-index: 100; } nav { - margin: 50px 0; - background-color: #2c2c2c; + margin: 30px 0 0 0; + background-color: black; display: flex; align-content: space-around; justify-content: center; flex: 1; flex-wrap: wrap; + z-index: 100; } nav ul { @@ -169,7 +232,7 @@ nav ul { nav ul li { display: flex; - background-color: #2c2c2c; + background-color: black; } nav a { @@ -195,7 +258,7 @@ nav a { nav ul ul { display: none; position: absolute; - top: 130px; /* Adjust the height of the main nav */ + top: 120px; /* Adjust the height of the main nav */ } /* Display Dropdowns on Hover */ diff --git a/index.html b/index.html index 779a341..fb47eb4 100644 --- a/index.html +++ b/index.html @@ -24,11 +24,11 @@
-