5

Resumen del Curso Práctico de Frontend Developer

Cristhian
CrisCM
11776

###Contenido del Curso

- Introducción
- Layout y componentes
- Maquetación responsiva: pantallas de autenticación
- Maquetación responsiva: vistas principales

###Introducción

###Buenas prácticas de CSS: reflexión y advertencias


###Layout y componentes

Yard Sale
iOS, 1x

Figma Desktop

Figma Mobile

###Sistema de diseño, assets y variables de CSS

Shopify Design

Google Fonts Quicksand

Githup Enlace del Curso

Enlace para descargar la carpeta de iconos y logos

Código para nuestras variables:

:root{
    --white: #FFFFFF;    --black: #000000;    --dark: #232830;    --very-light-pink: #C7C7C7;    --text-input-field: #F7F7F7;    --hospital-green: #ACD9B2;
}

body{
    font-family: 'Quicksand', sans-serif;
}```###Maquetación responsiva: pantallas de autenticación	### Crear nueva contraseña: HTML

En este curso decidimos NO crear archivos con extensión `.css` para guardar nuestros estilos, sino guardarlos en los mismos archivos `.html` (dentro de la etiqueta `<style>`).

Si lo prefieres, puedes hacer esta división con tus propios archivos `.css`. De hecho, es la forma más recomendada de trabajar profesionalmente con HTML y CSS.

Pero con nuestra profesora Estefanny Aguilar lo haremos sin esta separación para facilitar la migración a componentes en el [Curso Práctico de React.js](https://platzi.com/react) (que muy pronto tomarás si continúas con la [Escuela de JavaScript](https://platzi.com/escuela-javascript/)).

¡Mucha suerte durante tu maquetación!

**Archivos de la clase**

[clase1.html](https://static.platzi.com/media/public/uploads/clase1_fd5d33b2-2a7e-44a7-8d81-df7c889e8076.html)

**Codigo**
<title>Document</title><style></style></head><body><divclass="login"><divclass="form-container"><imgsrc=""alt="logo"class="logo"><h1class="title">Create a new password</h1><pclass="subtitle">Enter a new passwrd for yue account</p><formaction="/"class="form"><labelfor="password"class="label">Password</label><inputtype="password"id="password"placeholder="**********"class="input input-password"><labelfor="new-password"class="label">Password</label><inputtype="password"id="new-password"placeholder="**********"class="input input-password"><inputtype="submit"value="confirm"class="primary-button login-botton"></form></div></div></body></html>
###Crear nueva contraseña: CSS

** Archivos de la clase**

clase2.html

Codigo

Untitled_1.png
<style>:root {
      --white: #FFFFFF;
      --black: #000000;
      --dark: #232830;
      --very-ligth-pink: #C7C7C7;
      --text-input-field: #F7F7F7;
      --hospital-green: #ACD9B2;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }

    body {
      margin: 0;
      font-family: 'Quicksand', sans-serif;
    }

    .login {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }

    .form-container {
      display: grid;
      grid-template: auto 1fr auto;
      width: 300px;
    }

    .logo {
      width: 150px;
      margin-bottom: 48px;
      justify-self: center;
      display: none;
    }

    .title {
      font-size: var(--lg);
      margin-bottom: 12px;
      text-align: center;
    }

    .subtitle {
      color: var(--very-ligth-pink);
      font-size: var(--md);
      font-weight: 300;
      margin-top: 0;
      margin-bottom: 32px;
      text-align: center;
    }

    .form {
      display: flex;
      flex-direction: column;
    }

    .label {
      font-size: var(--sm);
      font-weight: bold;
      margin-bottom: 4px;
    }

    .input {
      background-color: var(--text-input-field);
      border: none;
      border-radius: 8px;
      height: 30px;
      font-size: var(--md);
      padding: 6px;
      margin-bottom: 12px;
    }

    .primary-button {
      background-color: var(--hospital-green);
      border-radius: 8px;
      border: none;
      color: var(--white);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }

    .login-botton {
      margin-top: 14px;
      margin-bottom: 30px;
    }

    @media (max-width: 640px) {
      .logo {
        display: block;
      }
    }
  </style>```

	### Email enviado

**Archivos de la clase**

[clase2.html](https://static.platzi.com/media/public/uploads/clase2_c20ebe7b-4050-48e9-93a1-c24f0e34a55a.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-42bf8ffa-c492-48b1-9846-7d3d4a1e670c.jpg)

_++CSS++_

.login {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}

.form-container {
  display: grid;
  grid-template: auto 1fr auto;
  width: 300px;
  justify-items: center;
}

.logo {
  width: 150px;
  margin-bottom: 48px;
  justify-self: center;
  display: none;
}

.title {
  font-size: var(--lg);
  margin-bottom: 12px;
  text-align: center;
}

.subtitle {
  color: var(--very-ligth-pink);
  font-size: var(--md);
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 32px;
  text-align: center;
}

.email-image {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background-color: var(--text-input-field);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.email-image img {
  width: 80px;
}

.resend {
  font-size: var(--sm);
}

.resend span {
  color: var(--very-ligth-pink);
}

.resend a {
  color: var(--hospital-green);
  text-decoration: none;
}

.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

.login-botton {
  margin-top: 14px;
  margin-bottom: 30px;
}

@media (max-width: 640px) {
  .logo {
    display: block;
  }
}```

HTML

<body><divclass="login"><divclass="form-container"><imgsrc="./logos/logo_yard_sale.svg"alt="logo"class="logo"><h1class="title">Emeil has been sent!</h1><pclass="subtitle">Please check your inbox for instructions on how to reset the password</p><divclass="email-image"><imgsrc="./icons/email.svg"alt="email"></div><buttonclass="primary-button login-botton">
        Login
      </button><pclass="resend"><span>Didn´recesive the email?</span><ahref="/">Resend</a></p></div></div></body>```

	###Login

**Archivos de la clase**

[clase3.html](https://static.platzi.com/media/public/uploads/clase3_d394e732-908e-46eb-a315-d0b69c32a70b.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-3cd371b3-9d3c-4cd1-b6c1-135d5a2becb2.jpg)


++_CSS_++


.login {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}

.form-container {
  display: grid;
  grid-template: auto 1fr auto;
  width: 300px;
}

.logo {
  width: 150px;
  margin-bottom: 48px;
  justify-self: center;
  display: none;
}

.form {
  display: flex;
  flex-direction: column;
}

.form a {
  color: var(--hospital-green);
  font-size: var(--sm);
  text-align: center;
  text-decoration: none;
  margin-bottom: 52px;
}

.label {
  font-size: var(--sm);
  font-weight: bold;
  margin-bottom: 4px;
}

.input {
  background-color: var(--text-input-field);
  border: none;
  border-radius: 8px;
  height: 30px;
  font-size: var(--md);
  padding: 6px;
  margin-bottom: 12px;
}

.input-email {
  margin-bottom: 22px;
}

.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

.secondary-button {
  background-color: var(--white);
  border-radius: 8px;
  border: 1px solid var(--hospital-green);
  color: var(--hospital-green);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

.login-botton {
  margin-top: 14px;
  margin-bottom: 30px;
}

@media (max-width: 640px) {
  .logo {
    display: block;
  }

  .secondary-button {
    width: 300px;
    position: absolute;
    bottom: 0;
    margin-bottom: 24px;
  }
}```

HTML

<body>
  <div class="login">
    <div class="form-container">
      <img src="./logos/logo_yard_sale.svg" alt="logo"class="logo">

      <form action="/"class="form">
        <label for="email"class="label">Emeil address</label>
        <input type="text" id="email" placeholder="[email protected]"class="input input-email">

        <label for="password"class="label">Password</label>
        <input type="password" id="password" placeholder="**********"class="input input-password">

        <input type="submit" value="Login"class="primary-button login-botton">
        <a href="/">Forgot my password</a>
      </form>

      <button class="secondary-button signup-button">Sign up</button>
    </div>
  </div>
</body>```

	### Crear y editar mi cuenta

** Archivos de la clase**

[clase4.html](https://static.platzi.com/media/public/uploads/clase4_a21ce01b-f548-4200-b75b-e91e7dd890fe.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-7403e7da-9ac5-4abe-a817-a551f5e3e29c.jpg)

_++CSS++_


.login {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}

.form-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 300px;
}

.logo {
  width: 150px;
  margin-bottom: 48px;
  justify-self: center;
  display: none;
}

.title {
  font-size: var(--lg);
  margin-bottom: 36px;
  text-align: start;
}

.form {
  display: flex;
  flex-direction: column;
}

.form div {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: var(--sm);
  font-weight: bold;
  margin-bottom: 4px;
}

.input {
  background-color: var(--text-input-field);
  border: none;
  border-radius: 8px;
  height: 30px;
  font-size: var(--md);
  padding: 6px;
  margin-bottom: 12px;
}

.input-name,
.input-email,
.input-password {
  margin-bottom: 22px;
}

.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

.login-botton {
  margin-top: 14px;
  margin-bottom: 30px;
}

@media (max-width: 640px) {

  .form-container {
    height: 100%;
  }

  .form {
    height: 100%;
    justify-content: space-between;
  }
}```

HTML

<body>
  <div class="login">
    <div class="form-container">
      <h1 class="title">My account</h1>

      <form action="/"class="form">
        <div>
          <label for="name"class="label">Name</label>
          <input type="text" id="name" placeholder="Usuario Example"class="input input-name">

          <label for="email"class="label">Email</label>
          <input type="text" id="email" placeholder="[email protected]"class="input input-email">

          <label for="password"class="label">Password</label>
          <input type="password" id="password" placeholder="**********"class="input input-password">
        </div>

        <input type="submit" value="Create"class="primary-button login-botton">
      </form>
    </div>
  </div>
</body>```

	###Mi cuenta

**Archivos de la clase**

[clase5.html](https://static.platzi.com/media/public/uploads/clase5_3e844215-0c65-4452-9344-32a9d62661e6.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-5167bb69-9d15-4971-a563-7e6635bf77ef.jpg)

_++CSS++_


.login {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}

.form-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 300px;
}

.logo {
  width: 150px;
  margin-bottom: 48px;
  justify-self: center;
  display: none;
}

.title {
  font-size: var(--lg);
  margin-bottom: 36px;
  text-align: start;
}

.form {
  display: flex;
  flex-direction: column;
}

.form div {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: var(--sm);
  font-weight: bold;
  margin-bottom: 4px;
}

.values {
  color: var(--very-ligth-pink);
  font-size: var(--md);
  margin: 8px 0 32px 0;
}

.secondary-button {
  background-color: var(--white);
  border-radius: 8px;
  border: 1px solid var(--hospital-green);
  color: var(--hospital-green);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

.login-botton {
  margin-top: 14px;
  margin-bottom: 30px;
}

@media (max-width: 640px) {

  .form-container {
    height: 100%;
  }

  .form {
    height: 100%;
    justify-content: space-between;
  }
}```

HTML

<body><div class="login"><div class="form-container"><h1 class="title">My account</h1><form action="/" class="form"><div><label for="name" class="label">Name</label><p class="value">Camila Yokoo</p><label for="email" class="label">Email</label><p class="value">camilayokoo@gmail.com</p><label for="password" class="label">Password</label><p class="value">**********</p></div><input type="submit" value="Edit" class="secondary-button login-botton"></form></div></div></body>```

###Maquetación responsiva: vistas principales###Página de inicio: HTML**Archivos de la clase**

[clase6.html](https://static.platzi.com/media/public/uploads/clase6_d6590f17-864a-42ed-88d9-25197996b404.html)

**Codigo**

![Untitled (1).png](https://static.platzi.com/media/user_upload/Untitled%20%281%29-c259aac2-1265-40a5-bee7-d5d37263ef48.jpg)

**HTML**

<section class=“main-container”>
<div class=“cards-container”>

  <div class="product-card">
    <img
      src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
      alt="">
    <div class="product-info">
      <div>
        <p>$120.00</p>
        <p>Bike</p>
      </div>
      <figure>
        <img src="./icons/bt_add_to_cart.svg" alt="">
      </figure>
    </div>
  </div>

</section>```

###Página de inicio: CSS

Archivos de la clase

clase6.html

Codigo

Untitled.png

CSS

.cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, 240px);
      gap: 26px;
      place-content: center;
    }

    .product-card {
      width: 240px;
    }

    .product-cardimg {
      width: 240px;
      height: 240px;
      border-radius: 20px;
      object-fit: cover;
    }

    .product-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 12px;
    }

    .product-infofigure {
      margin: 0;
    }

    .product-infofigureimg {
      width: 35px;
      height: 35px;
    }

    .product-infodivp:nth-child(1) {
      font-weight: bold;
      font-size: var(--md);
      margin-top: 0;
      margin-bottom: 4px;
    }

    .product-infodivp:nth-child(2) {
      font-size: var(--sm);
      margin-top: 0;
      margin-bottom: 0;
      color: var(--very-ligth-pink);
    }

    @media (max-width: 640px) {
      .cards-container {
        grid-template-columns: repeat(auto-fill, 140px);
      }

      .product-card {
        width: 140px;
      }

      .product-cardimg {
        width: 140px;
        height: 140px;
      }
    }```

	###Menú desktop

**Archivosdelaclase**

[clase7.html](https://static.platzi.com/media/public/uploads/clase7_85d16102-1f74-4ff9-a564-6ec0aea3c1ec.html)

**Codigo**
![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-31f48a7a-b2d3-4c6f-8e07-0dddf23213d5.jpg)

_++CSS++_


.desktop-menu {
  width: 100px;
  height: auto;
  border: 1px solid var(--very-ligth-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-ligth-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;
}```

HTML

<body><div class="desktop-menu"><ul><li><a href="/" class="title">My orders</a></li><li><a href="/">My account</a></li><li><a href="/">Sign out</a></li></ul></div></body>```

	###Menú mobile**Archivos de la clase**

[clase8.html](https://static.platzi.com/media/public/uploads/clase8_c46c344c-476e-46a7-a709-ac7a2b487c79.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-13aff99b-3fb4-4c18-bb0a-6a37ac3b0bf2.jpg)

_++CSS++_

.mobile-menu {
padding: 24px;
}

.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:nth-child(1) {
  border-bottom: 1px solid var(--very-ligth-pink);
}

.mobile-menu ul:nth-child(3) {
  position: absolute;
  bottom: 0;
}

.mobile-menu ul li {
  margin-bottom: 24px;
}

.email {
  font-size: var(--sm);
  font-weight: 300 !important;
}

.sign-out {
  font-size: var(--sm);
  color: var(--hospital-green) !important;
}```

HTML

<body><divclass="mobile-menu"><ul><li><ahref="/">CATEGORIES</a></li><li><ahref="/">All</a></li><li><ahref="/">Clothes</a></li><li><ahref="/">Electronics</a></li><li><ahref="/">Furnitures</a></li><li><ahref="/">Toys</a></li><li><ahref="/">Others</a></li></ul><ul><li><ahref="/">My orders</a></li><li><ahref="/">My account</a></li></ul><ul><li><ahref="/"class="email">[email protected]</a></li><li><ahref="/"class="sign-out">Sign out</a></li></ul></div></body>```

	###Mi orden: HTML

**Archivos de la clase**

[clase9.html](https://static.platzi.com/media/public/uploads/clase9_649cc00f-46c0-4938-b465-d0570ed04062.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-98d5b84d-3a4e-41fc-9cf0-c5e5e7bc00ef.jpg)

_++HTML++_


<div class=“my-order”>
<div class=“my-order-container”>

  <h1 class="title">My order</h1>

  <div class="my-order-content">
    <div class="order">
      <p>
        <span>03.25.22</span>
        <span>6 articules</span>
      </p>
      <p>$ 560.00</p>
    </div>

    <div class="shopping-cart">
      <figure>
        <img
          src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          alt="Bike">
      </figure>
      <p>Bike shelf</p>
      <p>$ 120,00</p>
    </div>
		</div>```

###Mi orden: CSS

Archivos de la clase

clase9.html

Codigo

Untitled.png

CSS

.my-order {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }

    .title {
      font-size: var(--lg);
      margin-bottom: 40px;
    }

    .my-order-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
    }

    .my-order-content {
      display: flex;
      flex-direction: column;
    }

    .order {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      margin-bottom: 24px;
      align-items: center;
      background-color: var(--text-input-field);
      border-radius: 8px;
      padding: 015px;
    }

    .orderp:nth-child(1) {
      display: flex;
      flex-direction: column;
    }

    .orderpspan:nth-child(1) {
      font-size: var(--md);
      font-weight: bold;
    }

    .orderpspan:nth-child(2) {
      font-size: var(--sm);
      color: var(--very-ligth-pink);
    }

    .orderp:nth-child(2) {
      text-align: end;
      font-weight: bold;
    }

    .shopping-cart {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 16px;
      margin-bottom: 24px;
      align-items: center;
    }

    .shopping-cartfigure {
      margin: 0;
    }

    .shopping-cartfigureimg {
      width: 70px;
      height: 70px;
      border-radius: 20px;
      object-fit: cover;
    }

    .shopping-cartp:nth-child(2) {
      color: var(--very-ligth-pink);
    }

    .shopping-cartp:nth-child(3) {
      font-size: var(--md);
      font-weight: bold;
    }```

	###Mis órdenes

**Archivosdelaclase**

[clase10.html](https://static.platzi.com/media/public/uploads/clase10_99aff553-521a-422f-b0df-e8b4bbcf076f.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-01124f8f-af77-43c2-acb9-972e4021e6ca.jpg)

_++CSS++_


.my-order {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}

.title {
  font-size: var(--lg);
  margin-bottom: 40px;
}

.my-order-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 300px;
}

.my-order-content {
  display: flex;
  flex-direction: column;
}

.order {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  margin-bottom: 12px;
  align-items: center;
}

.order p:nth-child(1) {
  display: flex;
  flex-direction: column;
}

.order p span:nth-child(1) {
  font-size: var(--md);
  font-weight: bold;
}

.order p span:nth-child(2) {
  font-size: var(--sm);
  color: var(--very-ligth-pink);
}

.order p:nth-child(2) {
  text-align: end;
  font-weight: bold;
}```

HTML

<divclass="my-order"><divclass="my-order-container"><h1class="title">My orders</h1><divclass="my-order-content"><divclass="order"><p><span>03.25.22</span><span>6 articules</span></p><p>$ 560.00</p><imgsrc="./icons/flechita.svg"alt="arrow"></div><divclass="order"><p><span>03.25.22</span><span>6 articules</span></p><p>$ 560.00</p><imgsrc="./icons/flechita.svg"alt="arrow"></div><divclass="order"><p><span>03.25.22</span><span>6 articules</span></p><p>$ 560.00</p><imgsrc="./icons/flechita.svg"alt="arrow"></div><divclass="order"><p><span>03.25.22</span><span>6 articules</span></p><p>$ 560.00</p><imgsrc="./icons/flechita.svg"alt="arrow"></div><divclass="order"><p><span>03.25.22</span><span>6 articules</span></p><p>$ 560.00</p><imgsrc="./icons/flechita.svg"alt="arrow"></div></div></div></div>```

	###Navbar: HTML

**Archivos de la clase**

[clase11.html](https://static.platzi.com/media/public/uploads/clase11_6fce3246-6d40-483e-981d-837577f7eca0.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-6a8946aa-1d8b-497b-80ec-171652612e28.jpg)

_++HTML++_

<body>
<nav>
<img src="./icons/icon_menu.svg" alt=“menu” class=“menu”>

<div class="navbar-left">
  <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

  <ul>
    <li>
      <a href="/">All</a>
    </li>
    <li>
      <a href="/">Clothes</a>
    </li>
    <li>
      <a href="/">Electronics</a>
    </li>
    <li>
      <a href="/">Furniture</a>
    </li>
    <li>
      <a href="/">Toys</a>
    </li>
    <li>
      <a href="/">Others</a>
    </li>
  </ul>
</div>

<div class="navbar-right">
  <ul>
    <li class="navbar-email">[email protected]</li>
    <li class="navbar-shopping-cart">
      <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
      <div>2</div>
    </li>
  </ul>
</div>

</nav>
</body>```

###Navbar: CSS

Archivos de la clase

clase11.html

Codigo

Untitled.png
Untitled.png

CSS

nav {
      display: flex;
      justify-content: space-between;
      padding: 024px;
      border-bottom: 1px solid var(--very-ligth-pink);
    }

    .menu {
      display: none;
    }

    .logo {
      width: 100px;
    }

    .navbar-leftul,
    .navbar-rightul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      height: 60px;
    }

    .navbar-left {
      display: flex;
    }

    .navbar-leftul {
      margin-left: 12px;
    }

    .navbar-leftullia,
    .navbar-rightullia {
      text-decoration: none;
      color: var(--very-ligth-pink);
      border: 1px solid var(--white);
      padding: 8px;
      border-radius: 8px;
    }

    .navbar-leftullia:hover,
    .navbar-rightullia:hover {
      color: var(--hospital-green);
      border: 1px solid var(--hospital-green);
    }

    .navbar-email {
      color: var(--black);
      font-family: var(--sm);
      margin-right: 12px;
    }

    .navbar-shopping-cart {
      position: relative;
    }

    .navbar-shopping-cartdiv {
      width: 16px;
      height: 16px;
      background-color: var(--hospital-green);
      border-radius: 50%;
      font-size: var(--sm);
      font-weight: bold;
      position: absolute;
      top: -6px;
      right: -3px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @media (max-width: 640px) {
      .menu {
        display: block;
      }

      .navbar-leftul {
        display: none;
      }

      .navbar-email {
        display: none;
      }
    }```

	###Detalledeproducto

**Archivosdelaclase**

[clase12.html](https://static.platzi.com/media/public/uploads/clase12_07013642-a5c9-4d93-a93c-fce27e2acf14.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-ddfa905f-f0b2-4544-8cc8-99fc53c2f42b.jpg)

_++CSS++_


.product-detail {
  width: 360px;
  padding-bottom: 24px;
  position: absolute;
  right: 0;
}

.product-detail-close {
  background: var(--white);
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 12px;
  border-radius: 50%;
}

.product-detail-close:hover {
  cursor: pointer;
}

.product-detail>img:nth-child(2) {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 0 0 20px 20px;
}

.product-info {
  margin: 24px 24px 0 24px;
}

.product-info p:nth-child(1) {
  font-weight: bold;
  font-size: var(--md);
  margin-top: 0;
  margin-bottom: 4px;
}

.product-info p:nth-child(2) {
  color: var(--very-ligth-pink);
  font-size: var(--lg);
  margin-top: 0;
  margin-bottom: 36px;
}

.product-info p:nth-child(3) {
  color: var(--very-ligth-pink);
  font-size: var(--sm);
  margin-top: 0;
  margin-bottom: 36px;
}

.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

.add-to-cart-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .product-detail {
    width: 100%;
  }
}```

HTML

<body><asideclass="product-detail"><divclass="product-detail-close"><imgsrc="./icons/icon_close.png"alt="close"></div><imgsrc="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"alt="bike"><divclass="product-info"><p>$35,00</p><p>Bike Shoterk</p><p>With its functional and practical interior, this refrigerator also fulfils a decorative functional,
        adding personality and a retro-vintage aesthetic to yout kitchen or workplace.
      </p><buttonclass="primary-button add-to-cart-button"><imgsrc="./icons/bt_add_to_cart.svg"alt="add to cart">
        Add to cart
      </button></div></aside></body>```

	###Carrito de compras: HTML

**Archivos de la clase**

[clase13.html](https://static.platzi.com/media/public/uploads/clase13_1e402601-d206-45a3-a5ca-5e8c9a1bc3fd.html)

**Codigo**

![Untitled.png](https://static.platzi.com/media/user_upload/Untitled-6231ef8a-5b9d-409c-8d50-a9951b6ef826.jpg)

_++CSS++_

.product-detail {
  width: 360px;
  padding: 24px;
  box-sizing: border-box;
  position: absolute;
  right: 0;
}

.title-container {
  display: flex;
}

.title-container img {
  transform: rotate(180deg);
  margin-right: 14px;
}

.title {
  font-size: var(--lg);
  font-weight: bold;
}

.order {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
  background-color: var(--text-input-field);
  border-radius: 8px;
  padding: 0 15px;
}

.order p:nth-child(1) {
  display: flex;
  flex-direction: column;
}

.order p span:nth-child(1) {
  font-size: var(--md);
  font-weight: bold;
}

.order p:nth-child(2) {
  text-align: end;
  font-weight: bold;
}

.shopping-cart {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
}

.shopping-cart figure {
  margin: 0;
}

.shopping-cart figure img {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  object-fit: cover;
}

.shopping-cart p:nth-child(2) {
  color: var(--very-ligth-pink);
}

.shopping-cart p:nth-child(3) {
  font-size: var(--md);
  font-weight: bold;
}

.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

@media (max-width: 640px) {
  .product-detail {
    width: 100%;
  }

  /* .title-container {
    display: none;
  } */
}```

HTML

<asideclass="product-detail"><divclass="title-container"><imgsrc="./icons/flechita.svg"alt="arrow"><pclass="title">My order</p></div><divclass="my-order-content"><divclass="shopping-cart"><figure><imgsrc="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"alt="Bike"></figure><p>Bike shelf</p><p>$ 120,00</p><imgsrc="./icons/icon_close.png"alt="close"></div><divclass="shopping-cart"><figure><imgsrc="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"alt="Bike"></figure><p>Bike shelf</p><p>$ 120,00</p><imgsrc="./icons/icon_close.png"alt="close"></div><divclass="shopping-cart"><figure><imgsrc="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"alt="Bike"></figure><p>Bike shelf</p><p>$ 120,00</p><imgsrc="./icons/icon_close.png"alt="close"></div><divclass="shopping-cart"><figure><imgsrc="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"alt="Bike"></figure><p>Bike shelf</p><p>$ 120,00</p><imgsrc="./icons/icon_close.png"alt="close"></div><divclass="shopping-cart"><figure><imgsrc="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"alt="Bike"></figure><p>Bike shelf</p><p>$ 120,00</p><imgsrc="./icons/icon_close.png"alt="close"></div><divclass="shopping-cart"><figure><imgsrc="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"alt="Bike"></figure><p>Bike shelf</p><p>$ 120,00</p><imgsrc="./icons/icon_close.png"alt="close"></div><divclass="order"><p><span>Total</span></p><p>$ 560.00</p></div><buttonclass="primary-button">
        Checkout
      </button></div></aside>```

###FINAL
Escribe tu comentario
+ 2