Jump to content

Problem adapting apple menu for training CSS

impts

By impts
in CSS

 Share

Recommended Posts

impts Newbie

impts

Posted
Posted

How do I solve the alignment problem if I want to increase, for example, the size of the logo to 36px (20px is normal alignment, but if it increases, it is misaligned, the same goes for the magnifying glass and the bag). The same goes for when I reduce the screen in responsive mode.

Image of problem 1 attached.

The second question, is when I click on the hamburger and the responsive menu goes down in black, how do I replace the black logo for a white logo and the same goes for the bag? (I left the logo with a white background for you to understand).

Image of problem 2 attached.

 

________________

 

HTML

  

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Apple (Brasil)</title>
  <link rel="stylesheet" href="css/style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

<body>
  <header class="header">
    <div class="header-container">
      <!-- NAV LIST MOBILE-->
      <ul class="nav-mobile">
        <li class="nav-item" style="padding-left: 10px;">
          <a href="#" class="nav-hamburguer">
            <div class="hamburguer"></div>
          </a>
        </li>
        <li class="nav-item" style="z-index: 999;">
          <a href="#" class="nav-logo">
            <img src="https://svgshare.com/i/ddE.svg" class="logo" style="width: 20px;" />
            </a>
        </li>
        <li class="nav-item" style="padding-right: 10px;">
          <a href="#" class="nav-bag">
            <img src="https://svgshare.com/i/de7.svg" style="width: 20px";/>
            </a>
        </li>
      </ul>

      <ul class="nav-list-mobile">
        <li class="nav-item-mobile">
          <input type="text" class="search" placeholder="Search apple.com" />
          </li>
        <li class="nav-item-mobile">
          <a href="#" class="nav-link-mobile">Mac</a>
        </li>
        <li class="nav-item-mobile">
          <a href="#" class="nav-link-mobile">iPad</a>
        </li>
        <li class="nav-item-mobile">
          <a href="#" class="nav-link-mobile">iPhone</a>
        </li>
        <li class="nav-item-mobile">
          <a href="#" class="nav-link-mobile">Watch</a>
        </li>
        <li class="nav-item-mobile">
          <a href="#" class="nav-link-mobile">TV</a>
        </li>
        <li class="nav-item-mobile">
          <a href="#" class="nav-link-mobile">Music</a>
        </li>
        <li class="nav-item-mobile">
          <a href="#" class="nav-link-mobile">Suporte</a>
        </li>
      </ul>
      <!-- NAV LIST DESKTOP-->
      <ul class="nav-list-desktop">
        <li class="nav-item">
          <a href="#" class="nav-logo">
            <img src="https://svgshare.com/i/ddE.svg" style="width: 36px;" />
            </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Mac</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">iPad</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">iPhone</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Watch</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">TV</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Music</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Suporte</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-search">
            <img src="https://svgshare.com/i/ddY.svg" style="width: 20px;" />
            </a>
        </li>
        <li class="nav-item" style="padding-right: 10px;">
          <a href="#" class="nav-bag">
            <img src="https://svgshare.com/i/de7.svg" style="width: 20px;" />
            </a>
        </li>
      </ul>
    </div>
  </header>

  <section class="iphonese">
    <div class="container-iphonese">
      <div class="container-title-iphonese">
        <h1>iPhone SE</h1>
        <h3>
          É muito iPhone por menos.
        </h3>
        <p>
          <a href="" class="link">Saiba mais</a>
          <a href="" class="link">Comprar</a>
        </p>
      </div>

      <div class="container-img-iphonese">
        <a href="https://ibb.co/ZfKcCk7"><img src="https://i.ibb.co/6ybD5fL/iphonese.png" alt="iphonese" /></a>
        </div>
    </div>
  </section>

  

  <script src="js/script.js"></script>
</body>

</html>

 

CSS

  

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #fafafa;
}

a {
  display: block;
  text-decoration: none;
}

.header {
  width: 100%;
  height: 35px;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: white;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.header-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 5px 0px;
}

.nav-list-desktop {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.nav-link {
  color: #000;
  display: block;
  padding: 5px 10px;
  font-size: 11px;
  opacity: 1;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.nav-link:hover {
  opacity: 0.5;
}

.nav-mobile {
  display: none;
}

.nav-list-mobile {
  display: none;
}

@media (max-width: 768px) {
  .nav-list-desktop {
    display: none;
  }
  .nav-mobile {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .hamburguer {
    width: 25px;
    height: 25px;
    position: relative;
    z-index: 900;
  }

  .hamburguer:after {
    content: "";
    position: absolute;
    top: 38%;
    left: 23%;
    width: 55%;
    height: 4%;
    background-color: #000;
    -webkit-transition: 1s ease;
    transition: 1s ease;
  }
  .hamburguer:before {
    content: "";
    position: absolute;
    top: 63%;
    left: 23%;
    width: 55%;
    height: 4%;
    background-color: #000;
    -webkit-transition: 1s ease;
    transition: 1s ease;
  }
  .hamburguer.hamburguer-active {
    width: 25px;
    height: 25px;
    position: relative;
  }
  .hamburguer.hamburguer-active:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 23%;
    width: 55%;
    height: 4%;
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
    background-color: #fff;
  }

  .hamburguer.hamburguer-active:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 23%;
    -webkit-transform: rotate(-405deg);
            transform: rotate(-405deg);
    width: 55%;
    height: 4%;
    background-color: #fff;
  }
.logo {
background-color: white;
}

  .nav-list-mobile {
    width: 100%;
    height: 0;
    position: fixed;
    top: -1100%;
    z-index: 0;
    opacity: 0.5;
    background-color: #000;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0;
    padding: 40px 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: 0.85s cubic-bezier(0.25, 0.7, 0.6, 1);
    transition: 0.85s cubic-bezier(0.25, 0.7, 0.6, 1);
  }
  .nav-list-mobile.active {
    top: 0;
    height: 100vh;
    opacity: 1;
  }
  .nav-item-mobile {
    width: 100%;
    margin: 5px 0px;
  }
  .nav-link-mobile {
    display: block;
    color: #d6d6d6;
    width: 100%;
    padding-top: 10px;
    border-top: 1px solid #333;
    font-size: 11px;
    opacity: 1;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  .nav-link-mobile:hover {
    opacity: 0.7;
  }
  .search {
    width: 100%;
    height: 25px;
    border-radius: 5px;
    border: 0;
    padding: 0px 10px;
    background-color: #1f1f1f;
    outline: none;
    color: #888;
  }
}

/* IPHONE SE */
.iphonese {
  width: 100%;
  height: 70vh;
  padding-top: 50px;
  margin: 5px 0px;
  background-color: #131313;
}

@media screen and (max-width: 780px) {
  .iphonese {
    height: 55vh;
  }
}

.container-iphonese {
  max-width: 820px;
  height: 100%;
  margin: 20px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.container-title-iphonese h1 {
  color: #fafafa;
  font-size: 48px;
  text-align: center;
  letter-spacing: -2px;
}

.container-title-iphonese h3 {
  color: #fafafa;
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  letter-spacing: -1px;
}

.container-title-iphonese p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 10px 0px;
}

.link {
  display: block;
  margin: 0px 20px;
  color: #1f97ff;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  opacity: 1;
  position: relative;
}

.link:after {
  content: ">";
  position: absolute;
  top: 0;
  right: -13px;
}

.link:hover {
  opacity: 0.9;
  text-decoration: underline;
}

.container-img-iphonese img {
  width: 100%;
}

 

JAVASCRIPT

  

$(document).ready(function () {
  $(".hamburguer").click(function () {
    $(this).toggleClass("hamburguer-active");
    $(".nav-list-mobile").toggleClass("active");
  });
});

 

problem 1.png

problem 2.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...