Código HTML

<div class="mobile-menu">
  <ul>
    <li><a href="/">CATEGORIES</a></li>
    <li><a href="/">All</a></li>
    <li><a href="/">Clothes</a></li>
    <li><a href="/">Electronics</a></li>
    <li><a href="/">Furnitures</a></li>
    <li><a href="/">Toys</a></li>
    <li><a href="/">Others</a></li>
  </ul>

  <ul>
    <li><a href="/">My orders</a></li>
    <li><a href="/">My account</a></li>
  </ul>

  <ul>
    <li><a href="/" class="email">[email protected]</a></li>
    <li><a href="/" class="sign-out">Sign out</a></li>
  </ul>
</div>

Código CSS

:root {
  --white: #fff;
  --black: #000;
  --very-light-pink: #c7c7c7;
  --text-input-field: #f7f7f7;
  --hospital-green: #acd9b2;
  --sm: 14px;
  --md: 16px;
  --lg: 18px;
}
body {
  margin: 0;
  font-family: "Quicksand", sans-serif;
}
.mobile-menu {
  padding: 24px;
}
.mobile-menu ul:nth-child(1) {
  border-bottom: 1px solid var(--very-light-pink);
}
.mobile-menu a {
  text-decoration: none;
  color: var(--black);
  font-weight: bold;
}
.mobile-menu ul {
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}
.mobile-menu ul li {
  margin-bottom: 24px;
}
.email {
  font-size: var(--sm);
  font-weight: 300 !important;
}
.sign-out {
  color: var(--hospital-green) !important;
  font-size: var(--sm);
}
.mobile-menu ul:nth-child(3) {
  position: absolute;
  bottom: 0;
}

Archivos de la Clase

https://github.com/FROSTYLAN/Notes-JavascriptSchool/commit/02b2ee4aa24158e7b230484b0c75f085c050c1ef

Lecturas Recomendadas

curso-frontend-developer-practico/clase8.html at main · platzi/curso-frontend-developer-practico

Menú desktop

Mi orden: HTML