diff --git a/aden-mobile.jpg b/aden-mobile.jpg index 14894c3..2b3b3a9 100644 Binary files a/aden-mobile.jpg and b/aden-mobile.jpg differ diff --git a/dropdown.css b/dropdown.css new file mode 100644 index 0000000..c6d7d33 --- /dev/null +++ b/dropdown.css @@ -0,0 +1,40 @@ +/** DROP DOWN MENU CSS */ +.dropdown { + width: 300px; +} + +.dropdown-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border: 1px solid var(--gold); + cursor: pointer; +} + +.dropdown-arrow { + transition: transform 0.3s ease; +} + +.dropdown-arrow.open { + transform: rotate(180deg); +} + +.dropdown-content { + overflow: hidden; + max-height: 0; + + transition: max-height 0.3s ease; + + border-left: 1px solid var(--gold); + border-right: 1px solid var(--gold); + border-bottom: 1px solid var(--gold); +} + +.dropdown-content.open { + max-height: 300px; +} + +.dropdown-body { + padding: 10px; +} diff --git a/dropdown-box.js b/dropdown.js similarity index 100% rename from dropdown-box.js rename to dropdown.js diff --git a/hamburger.css b/hamburger.css new file mode 100644 index 0000000..4f8e5fb --- /dev/null +++ b/hamburger.css @@ -0,0 +1,39 @@ +#hamburger { + display: none; + flex-direction: column; + cursor: pointer; + background: none; + border: none; + padding: 5px; +} + +#hamburger span { + width: 25px; + height: 3px; + background-color: var(--gold); + margin: 3px 0; + transition: 0.3s; + position: relative; +} + +/* MOBILE RULES */ +@media screen and (max-width: 850px) { + /** hamburger animation */ + #hamburger { + display: flex; + } + + #hamburger.active span:nth-child(1) { + transform: rotate(-45deg) translateY(10px) translateX(-3px); + width: 24px; + height: 4px; + } + #hamburger.active span:nth-child(2) { + opacity: 0; + } + #hamburger.active span:nth-child(3) { + transform: rotate(45deg) translateY(-10px) translateX(-3px); + width: 24px; + height: 4px; + } +} diff --git a/index.html b/index.html index db3fc13..65ac3d0 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,8 @@ /> Maine Luxury Detailing + + - +
- + diff --git a/style.css b/style.css index 3c7a9b2..8fd109a 100644 --- a/style.css +++ b/style.css @@ -2,11 +2,13 @@ margin: 0; padding: 0; box-sizing: border-box; + + letter-spacing: 0.01rem; } /** COLOR VARIABLES */ :root { - --black: #000; + --black: #111111; --gold: #ffd700; --dark-gold: #d1b410; --light-gold: rgba(255, 215, 0, 0.5); @@ -23,7 +25,7 @@ header { .banner { display: flex; justify-content: space-between; - max-width: 60%; + max-width: 90%; align-items: center; height: 4.5rem; @@ -39,24 +41,6 @@ header { text-decoration: none; } -#hamburger { - display: none; - flex-direction: column; - cursor: pointer; - background: none; - border: none; - padding: 5px; -} - -#hamburger span { - width: 25px; - height: 3px; - background-color: var(--gold); - margin: 3px 0; - transition: 0.3s; - position: relative; -} - .navLink { color: var(--gold); text-decoration: none; @@ -117,7 +101,7 @@ h2 { h3 { font-size: 1.5rem; - color: #000; + color: var(--black); } p { @@ -132,9 +116,9 @@ footer { margin: 5rem auto; padding: 2rem 0; - max-width: 60%; + max-width: 90%; - background-color: #000; + background-color: var(--black); color: var(--gold); text-align: center; @@ -155,7 +139,7 @@ footer { top: -50px; left: 6px; background: #fff; - color: #000; + color: var(--black); padding: 8px; text-decoration: none; font-weight: bold; @@ -174,23 +158,24 @@ footer { background-color: var(--black); color: var(--gold); - border: none; + border: 1px solid var(--dark-gold); border-radius: 5rem; - box-shadow: 0px 0px 50px var(--gold); - padding: 2rem 0; margin: 0; font-size: 2rem; font-weight: bold; text-decoration: none; + transition: 0.5s ease; } #book-button:hover { cursor: pointer; + background-color: var(--dark-gold); + box-shadow: 0px 0px 30px var(--gold); } #book-button:active { - background-color: var(--dark-gold); + background-color: var(--gold); } /** DESKTOP RULES */ @@ -221,10 +206,6 @@ footer { padding: 0 1rem; } - #hamburger { - display: flex; - } - nav { display: flex; flex-direction: column; @@ -239,7 +220,7 @@ footer { font-size: 1rem; text-align: center; - background-color: #000; + background-color: var(--black); transition: top 0.5s ease; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); z-index: -1; @@ -249,21 +230,6 @@ footer { top: 1.5rem; } - /** hamburger animation */ - #hamburger.active span:nth-child(1) { - transform: rotate(-45deg) translateY(10px) translateX(-3px); - width: 24px; - height: 4px; - } - #hamburger.active span:nth-child(2) { - opacity: 0; - } - #hamburger.active span:nth-child(3) { - transform: rotate(45deg) translateY(-10px) translateX(-3px); - width: 24px; - height: 4px; - } - /** footer */ footer { font-size: 0.9rem; @@ -279,44 +245,3 @@ footer { width: 85%; } } - -/** DROP DOWN MENUS */ -.dropdown { - width: 300px; -} - -.dropdown-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px; - border: 1px solid var(--gold); - cursor: pointer; -} - -.dropdown-arrow { - transition: transform 0.3s ease; -} - -.dropdown-arrow.open { - transform: rotate(180deg); -} - -.dropdown-content { - overflow: hidden; - max-height: 0; - - transition: max-height 0.3s ease; - - border-left: 1px solid var(--gold); - border-right: 1px solid var(--gold); - border-bottom: 1px solid var(--gold); -} - -.dropdown-content.open { - max-height: 300px; -} - -.dropdown-body { - padding: 10px; -}