Código HTML

<div class="desktop-menu">
      <ul>
        <li><a href="/" class="title">My order</a></li>
        <li><a href="/" class="title">My account</a></li>
        <li><a href="/" class="title">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;
}
.desktop-menu {
  width: 100px;
  height: auto;
  border: 1px solid var(--very-light-pink);
  border-radius: 6px;
  padding: 20px 20px 0 20px;
}
.desktop-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.desktop-menu ul li {
  text-align: end;
}
.desktop-menu ul li:nth-child(1),
.desktop-menu ul li:nth-child(2) {
  font-weight: bold;
}
.desktop-menu ul li:last-child {
  padding-top: 20px;
  border-top: 1px solid var(--very-light-pink);
}
.desktop-menu ul li:last-child a {
  color: var(--hospital-green);
  font-style: var(--sm);
}
.desktop-menu ul li a {
  display: inline-block;
  color: var(--black);
  text-decoration: none;
  margin-bottom: 20px;
}

Archivos de la Clase

https://github.com/FROSTYLAN/Notes-JavascriptSchool/commit/a596ad0de113888a14fe1b02ae56af8b9b897703


Lecturas Recomendadas

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


Página de inicio: CSS

Menú mobile