diff --git a/index.html b/index.html index ecab5e3..ee6086c 100644 --- a/index.html +++ b/index.html @@ -92,54 +92,47 @@ - -
-
  • - - -
    • -
  • - -
    • -
    -
    quote @@ -206,7 +199,46 @@

    lofi-beats

    +
    + +
    -
    - -
    + diff --git a/style.css b/style.css index f192e1b..30b5024 100644 --- a/style.css +++ b/style.css @@ -22,271 +22,217 @@ body { } nav { - height: 15vh; - background-color: #152932; + width: 100%; + background: #222; + background-image: linear-gradient(to right, #001b45, #005188, #008a9c, #00c174, #a8eb12); } .sticky { position: sticky; top: 0; + display: flex; + justify-content: space-between; + align-items: center; height: 100px; width: 100%; z-index: 1; } -.menu a { - color: white; - font-size: 20px; - font-weight: 500; - cursor: pointer; -} - -.menu a:hover { - color: #00c2cb; - font-size: 22px; - text-decoration: none; -} - -.has-submenu { - z-index: 100; -} - -.menu, -.submenu { - list-style-type: none; -} +/* mobile nav */ +@media (max-width: 960px) { + #bar { + display: block; + width: 25px; + height: 3px; + margin: 5px auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background: black; + } + #hamburger { + cursor: pointer; + margin-right: 10px; + } -.menu { - padding-top: 5px; - padding-bottom: 5px; -} -.menu .logo { - margin-right: 80px; -} -.logo img{ - height: 80px; - width: 80px; - border-radius: 50px; - border: 2px solid #00c2cb; - box-shadow: #00c2cb 0px 5px 15px; - margin-top: 5px; -} -.item { - padding: 10px; -} -.button1 { - height: 20px; - margin-left: 30px; - margin-right: -12px; -} + #hamburger.active { + right: 0; + } -.button1 a { - color: black; - padding: 9px 5px; - border-radius: 8px; -} -.button1 a:hover { - color: white; - font-size: 20px; -} + #hamburger { + display: block; + } -.links { - display: flex; - justify-content: space-between; -} + #hamburger.active :nth-child(2) { + opacity: 0; + } -.searched { - left: 20px; -} + #hamburger.active :nth-child(1) { + transform: translateY(8px) rotate(45deg); + } -.menu input { - border-radius: 8px; - border: 1px black solid; -} + #hamburger.active :nth-child(3) { + transform: translateY(-8px) rotate(-45deg); + } + .menu { + position: fixed; + left: -100%; + top: 100px; + gap: 0; + flex-direction: column; + background-color: #222; + width: 100%; + text-align: center; + transition: 0.3s; + z-index: 1; + } -/* Mobile menu */ -.menu { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; -} + .item { + margin: 16px auto; + width: 100%; + } + .item a { + color: white; + font-size: 20px; + letter-spacing: 4px; + font-weight: bolder; + font-family: 'crimson text'; + } + ul { + padding: 0; + } -.menu li a { - display: block; - padding: 15px 5px; + .menu.active { + left: 0; + } + select { + border: none; + align-self: center; + color: white; + background: #222; + padding: 0 5px; + } + #select-container1:hover, #select-container2:hover { + color: rgb(201, 196, 196); + } + #select-container1 { + max-width: 110px; + font-size: 20px; + font-weight: bold; + } + #select-container2{ + max-width: 80px; + font-size: 15px; + font-weight: bold; + } + select option { + font-size: 15px; + } + .button { + background: none; + } + .button a { + border: none; + padding: 10px 5px; + background: blue; + } + } -.toggle { - order: 1; - font-size: 20px; +select { + border: none; + align-self: center; + color: white; + background: none; + padding: 0 5px; } - -.item.button { - order: 2; +select option { + background: rgba(0, 0, 0, 0.658); + color: white; } - -.item { - order: 3; - width: 100%; - text-align: center; - display: none; +#select-container1:hover, #select-container2:hover { + color: rgba(0, 0, 0, 0.671); } - -.active .item { - display: block; +#select-container1 { + max-width: 110px; + font-size: 20px; + font-weight: bold; } - -.button.secondary { - /* divider between buttons and menu links */ - border-bottom: 1px #444 solid; +#select-container2{ + max-width: 80px; + font-size: 20px; + font-weight: bold; } -/* Submenu up from mobile screens */ -.submenu { - display: none; +/* General nav style */ +.menu a { + color: white; + font-size: 20px; + font-weight: bold; + cursor: pointer; } -.submenu-active .submenu { - display: block; +.menu a:hover { + color: rgba(0, 0, 0, 0.671); + text-decoration: none; } -.has-submenu i { - font-size: 12px; +.menu { + display: flex; + justify-content: space-between; + align-items: center; } -.has-submenu>a::after { - font-family: "Font Awesome 5 Free"; - font-size: 12px; - line-height: 16px; - font-weight: 900; - content: "\f078"; - color: white; +.menu li { + list-style: none; } -.submenu-active { - border-radius: 3px; +.item { + margin-right: 13px; } - -/* Tablet menu */ -@media all and (min-width: 700px) { - .menu { - justify-content: space-evenly; - } - - .logo { - flex: 1; - } - .item.button { - width: auto; - order: 1; - display: block; - } - - .toggle { - flex: 1; - text-align: right; - order: 2; - } - - /* Button up from tablet screen */ - .menu li.button a { - padding: 7px 10px; - margin: 5px 0; - } - - .button a { - background: #0080ff; - border: 1px royalblue solid; - } - - .button.secondary { - border: 0; - } - - .button.secondary a { - background: transparent; - border: 1px #0080ff solid; - } - - .button a:hover { - text-decoration: none; - } +.btn-primary { + border: none; } /* Desktop menu */ -@media screen and (max-width:1160px){ - .menu input{ +@media (min-width: 960px) { + #hamburger { display: none; } -} - -@media all and (min-width: 960px) { - .menu { - align-items: flex-start; - flex-wrap: nowrap; - background: none; - } - - .logo { - order: 0; - } - - .item { - order: 1; - position: relative; - display: block; - width: auto; - } .button { - order: 2; - } - - .submenu-active .submenu { - display: block; - position: absolute; - left: 0; - top: 68px; - width: auto; + background: blue; + min-width: 80px; + text-align: center; } - - .subitem a { - color: white; - background-color: #152932; + .button { + background: blue; + min-width: 80px; text-align: center; - margin-bottom: 0; - font-size: 20px; } +} - .toggle { - display: none; - } - .submenu-active { - border-radius: 0; - } -} .carousel { text-align: center; margin: auto; + width: 100%; +} +.carousel img { + width: 100%; } @media screen and (max-width: 768px) { .carousel { width: 100%; - height: 30vh; - } .active { - width: 100%; margin: 0px; } @@ -309,13 +255,11 @@ nav { .active { display: block; - background-color: white; + background-color: none; animation: fade 1.4s; object-fit: contain; - width: 75%; aspect-ratio: 16/9; text-align: center; - margin: auto; } .cards-container { @@ -326,12 +270,11 @@ nav { flex-wrap: wrap; } -/*card styles*/ .card { width: 250px; height: 350px; - /* color: white; */ + color: white; border-radius: 0.5rem; background-color: white; overflow: hidden;