Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Menú desktop

13/22
Recursos

Aportes 34

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Los elementos inline NO se les puede aplicar margin

Aquí les dejo un detalle que encontré interesante al momento de escribir el código.

.desktop-menu ul li:not(:last-child) {
            font-weight: bold;
}

Para ahorrar tiempo en VSCode:

El resultado:

Yo suelo usar una maqueta para todo mi CSS que es esta:

:root {
  --backgroundColor: #ffffff;
  --letterColor: #000;
  --linksColor: #000;
}

* {
  margin: 0%;
  padding: 0%;
  color: var(--letterColor);
}

body {
  background-color: var(--backgroundColor);
}

ul,
li {
  text-decoration: none;
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--linksColor);
}

Este archivo lo suelo llamar “basic.css” y lo importo como los import de css así

@import "./basic.css"

Así elimino todos esos estilos que tiene por defecto el navegador, y agrego algunos míos, además de tener mis variables; tal vez le sirva a alguien

No se si alguien se dio cuenta, pero en realidad no llega a usar la variable --black 😅

Tuve un error al darle a .desktop-menu un padding de 20px, y me parti la cabeza buscando el problema y al final era:

* {
    box-sizing: border-box;
}

Ya que siempre suelo utilizarlo al iniciar los estilos 😅

En Sass
![](

Maquetado de la clase
|
HTML

.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-size: 12px;
}

.desktop-menu ul li a {
    color: var(--black);
    margin-bottom: 20px;
    display: inline-block;
    text-decoration: none;
}

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

Comparto mis resultados:

  • Como crear la estructura inicial con emmet

.desktop-menu>ul>(li>a.title)*3

  • Borra el 3 y lo vuelve a escribir

Para el bold de los items era más fácil ponerlo así, si en adelante piden poner más items en el menú se tendría que agregar los .desk-menu ul li:nth-child(1), .desk-menu ul li:nth-child(2) ,.desk-menu ul li:nth-child(3), .desk-menu ul li:nth-child(4); y así sucesivamente

.desk-menu ul li{
  text-align: end;
  font-weight: bold;
}

.desk-menu ul li:last-child{
  padding: 20px 0px 0px;
  border-top: 1px solid var(--very-light-pink);
  font-weight: normal;      
}

Hola, noto que el menú cuenta con un pqueño sombreado y quise saber como se lograba esto y se logra mediante box-shadow, me parece un buen aporte y quiero compartirlo.

.desktop-menu{
            width: 130px;
            height: auto;
            border: 1px solid var(--very-light-pink);
            border-radius: 6px;
            box-shadow: 1px 1px 5px var(--very-light-pink);
            padding: 20px;
}

Estos son mis apuntes de esta clase:
Debes tener en cuenta que la estructura será de:
Div - .desktop-menu
div
ul
li
li
div
ul
li

en .desktop-menu // para quitar los puntos, margin y padding por defecto, lo puedes hacer con:
list-style:none;
padding:0;
margin:0;

Y en la ul li
text-align: end;//para alinearlo a la derecha.

*utiliza nth-child() para seleccionar los dos primeros li.
*last-child para seleccionar la ultima variable que es “sign out”.
!!!Recuerda que el orden de las clases es importante para la asignación de colores.

Les dejo un atajo para escribir esta estructura en Visual Studio Code:

div.desktop-menu>ul>li*3

(Presiono enter y me devuelve)

<div class=“desktop-menu”>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Aquí le estoy diciendo que quiero un <DIV> con una clase llamada DESKTOP-MENU, que adentro tenga una etiqueta <UL> y que adentro de ella tenga tres <LI>.

Espero que le sirva a alguien!

Saludos

Un detalle, pero al tercer *** <li></li> *** no le puse margin-top porque si vemos bien no es un margen, sino una pequeña línea. Yo utilicé este código para crearla:

    hr{
        margin: 0;
        border-width: 0 0 1px 0;
        border-style: solid;
        color: var(--text-input-field);
        margin: 0 10px 0 10px;
    }

<li>
            <hr>
            <a href="/">Sing out</a>
        </li>

ul → lista
li → elementos de la lista

Mi estructura básica para todas estas clases por ahora. En esta le coloco un Favicon, importo la tipografía, cambio la pagina a lenguaje Español, y declaro las clases que vamos a usar.

<<!DOCTYPE html>
<html lang="es">
<head><meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&family=Roboto+Mono:[email protected];500;700&family=Roboto+Slab:[email protected];700&family=Roboto:[email protected];500;700;900&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="./logos/favicon_yard_sale.svg" type="img">
    <title>Menu</title>
    <style>
         :root{
        --white: #FFFFFF;
        --black: #000000;
        --dark: #232830;
        --very-light-pink: #C7C7C7;
        --text-input-field: #F7F7F7;
        --hospital-green: #ACD9B2;
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
        }
      body{
        font-family: 'Quicksand', sans-serif;
        }
      body {
        margin: 0;
        }
    </style>> 

En la parte de variables tiene back en lugar de black!

display: inline-block; /* se indica que sea de tipo inline pero que tenga algunas propiedades de block, como margin top y bottom. */

asi lo hice por mi cuenta antes de ver la clase

    <style>
      :root {
        --very-ligth-pink: #c7c7c7;
        --text-input-field: #f7f7f7;
        --hostipal-green: #acd9b2;
        --white: #ffffff;
        --black: #000000;
        --sm: 14px;
        --md: 16px;
        --lg: 18px;
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 62.5%;
      }
      body {
        font-size: 1.6rem;
        font-family: 'Quicksand', sans-serif;
      }
      .menu {
          width: 12rem;
          /* height: 12rem; */
          border-radius: 0.6rem;
          box-shadow: 0.2rem 0.2rem 1rem 1rem var(--text-input-field);
        }
      .menu__list {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          list-style-type: none;
      }
      .menu__login, .menu__sign-up {
        width: 85%;
      }
      .menu__login {
          height: 7.5rem;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-around;
      }
      .menu__list a {
          text-decoration: none;
          color: var(--black);
          font-weight: bold;
      }
      .menu__sign-up {
          border-top: 0.1rem solid var(--text-input-field);
          display: flex;
          justify-content: flex-end;
          margin-top: 2rem;
          margin-bottom: 2rem;
      }
      .menu__sign-up a {
        color: var(--hostipal-green);
      }
    </style>
  </head>
  <body>
    <div class="menu">
        <ul class="menu__list">
            <div class="menu__login">
                <li><a href="#">My orders</a></li>
                <li><a href="#">My account</a></li>
            </div>
            <div class="menu__sign-up">
                <li><a href="#">sign up</a></li>
            </div>
        </ul>
    </div>
  </body>

A simple vista lo que hicimos en esta clase no luce difícil, pero en la práctica… creo que es lo más complicado que he hecho

No se preocupe profesora, también yo olvidé copiar el CSS y no me autocompletaba 😃

Demoré cierto tiempo para saber por que la fuente no se veía tal cual al ejemplo. situación: no anexé el estilo del body en el css cuando anexaba los demas estilos preestablecidos 🤡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>

 :root {
      --white: #FFFFFF;
      --black: #000000;
      --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-size: var(--sm);


       }
       .desktop-menu ul li a {

color: var(--black);
text-decoration: none;
margin-bottom: 20px;
display: inline-block;



}
      
    </style>
</head>
<body>
    <div class="desktop-menu">
        <ul>
            <li>

                <a href="/" class="title">My Orders</a>
            </li>
            <li>

                <a href="/" class="title">My account</a>
            </li>
            <li>

                <a href="/" class="title">Sign out</a>
            </li>
        </ul>

    </div>
    
</body>
</html>

Mi código 😄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="This is store of whatever">
    <meta name="robots" content="index, follow">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css" type="text/css" >
    <link rel="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
    <title>Yard Sale</title>
    <style>
        a{
            text-decoration: none;
        }
        li{
            padding: 0;

            list-style: none;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        .logging-menu{
            width: 14rem;
            padding: 2rem 1.8rem 0 2rem;
            border: .1rem var(--very-light-pink) solid;
            border-radius: .8rem;

        }
        .logging-menu__option{
            margin-bottom: 2.4rem;
            text-align: end;
        }
        .logging-menu__option:last-child{
            padding-top: 3rem;
            border-top: .1rem solid var(--very-light-pink);
        }
        .logging-menu__link{
            width: 100%;
            font-size: var(--md);
            color: var(--black);
            font-weight: bold;
        }
        .logging-menu__link--signOut{
            color: var(--hospital-green);
            font-weight: 600;
        }
    </style>
</head>
<body>
    <nav class="logging-menu">
        <ul class="options-container">
            <li class="logging-menu__option">
                <a href="#" class="logging-menu__link">My orders</a>
            </li>
            <li class="logging-menu__option">
                <a href="#" class="logging-menu__link">My account</a>
            </li>
            <li class="logging-menu__option">
                <a href="#" class="logging-menu__link logging-menu__link--signOut">Sign out</a>
            </li>
        </ul>
    </nav>
</body>
</html>

En vez de tratar de ponerle un margin a el elemento <a>, tan solo tenemos que darle padding a los elementos <li> y así no tenemos que cambiarle el display a los links.

.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;
        margin: 0;
        padding: 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{
        font-size: var(--sm);
        color: var(--hospital-green);
    }

    .desktop-menu ul li a{
        color: var(--black);
        text-decoration: none;
        margin-bottom: 20px;
        display: inline-block;
    }
<code> 

No entiendo por qué no se hace una página con lo aprendido, ahora hay que saber react y javascript. Este curso debería estar al final de la carrera, no al principio.

En mi caso, el primer ítem My oreders se veía con un font-size mayor. Esto se presentó por usar una única hoja de estilos en todo el proyecto y por que tenía la clase title. Simplemente se la quité y el problema desapareció.

Menu completado 🚀
Espero pronto llegar a react y poderle dar la interactividad para entender de mejor manera todo este proyecto c:
🌐 Les comparto mi código en GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Resultado:

Cute 🤩