Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Proyecto: PlatziCommerce con Vue.js

14/37
Recursos

Aportes 12

Preguntas 1

Ordenar por:

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

Adjunto el codigo de los estilos para que copien y peguen nomas 😉

body {
        font-family: sans-serif;
        font-size: 18px;
      }
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      header {
        display: flex;
        height: 40px;
        justify-content: space-between;
        align-items: center;
        background: rgb(104, 104, 209);
        color: #fefefe;
      }
      header h3 {
        margin-left: 8px;
      }
      header .cart {
        background: rgb(82, 82, 194);
        padding: 8px;
        color: white;
        border: none;
        height: 100%;
        cursor: pointer;
        outline: none;
      }
      header .cart-content {
        position: absolute;
        right: 0;
        top: 40px;
        background: white;
        padding: 16px;
        color: black;
        border-bottom: 1px solid black;
        border-left: 1px solid black;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
      }
      header .cart-content .cart-content__product {
        display: flex;
        align-items: center;
        padding: 8px;
        border-radius: 8px;
        background: rgb(129, 129, 129, 0.2);
        margin-bottom: 4px;
      }
      header .cart-content .cart-content__product.bg-gray {
        background: rgb(129, 129, 129, 0.4);
      }
      header .cart-content .cart-content__product img {
        width: 50px;
      }
      main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
      }

      main .product {
        display: grid;
        grid-template-columns: 0.2fr 0.8fr;
      }

      main .product .product__thumbnails {
        width: 90px;
      }
      main .product .product__thumbnails .thumb {
        width: 100%;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 8px;
      }
      main .product .product__thumbnails .thumb.active {
        border-bottom: 1px solid rgb(82, 82, 194);
      }

      main .description h4 {
        display: inline-block;
        font-size: 24px;
      }
      main .description .description__status {
        font-size: 16px;
        font-weight: lighter;
        color: rgb(129, 129, 129);
      }
      main .description .description__price {
        font-weight: bold;
        color: rgb(104, 104, 209);
      }
      main .description .description__content {
        margin-top: 8px;
      }
      main .description .discount {
        margin: 8px 0 8px 0;
      }
      main .description .discount span {
        font-size: 14px;
        margin-right: 8px;
      }
      main .description .discount input {
        padding: 8px;
        border: 1px solid #616161;
        border-radius: 4px;
      }
      main .description button {
        padding: 8px;
        font-size: 18px;
        background: rgb(104, 104, 209);
        color: #fefefe;
        border: none;
        border-radius: 8px;
      }
      main .description button:disabled {
        background: rgb(159, 159, 228);
      }
      .badge {
        font-size: 14px;
        font-weight: normal;
        padding: 8px;
        border-radius: 8px;
        color: white;
        margin-right: 4px;
        vertical-align: text-top;
      }
      .badge.new {
        background-color: rgb(103, 172, 13);
      }
      .badge.offer {
        background-color: rgb(197, 107, 33);
      }```

¡Ahora sí vamos con Vue! 😄
.
Soy un VueLover así que esto me emociona xD Al igual que con el Mini Vue iré dejando en mi repositorio de GitHub los códigos de cada clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/7424dba6ade1ecf4a77d5cfd7c808dd03077c1d7

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Platzi Commerce</title>
  </head>
  <body>
    <div id="app">
      <header>
        <h3>Platzi Commerce</h3>
        <button class="cart">Carro (0)</button>
        <div class="cart-content">
          <div class="cart-content__product">
            <img src="" alt="" />
            <span>Producto - $ 100.00</span>
          </div>
        </div>
      </header>
      <main>
        <section class="product">
          <div class="product__thumbnails">
            <div class="thumb"></div>
          </div>
          <div class="product__image">
            <img src="" alt="" />
          </div>
        </section>
        <section class="description">
          <h4>Producto</h4>
          <span class="badge new">Nuevo</span>
          <span class="badge offer">Oferta</span>
          <p class="description__status"></p>
          <p class="desction__price">$ 100.00</p>
          <p class="description__content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
            dicta quis repellendus facilis unde! In enim tempora culpa dolorum
            recusandae ipsa rem. Reiciendis et ipsum officia eius corporis sequi
            libero.
          </p>
          <div class="discount">
            <span>Código de descuento:</span>
            <input type="text" placeholder="Ingresa tu código" />
          </div>
        </section>
      </main>
    </div>

    <script src="https://unpkg.com/[email protected]"></script>
    <script>
      const { createApp } = Vue;
      const app = createApp();
      app.mount("#app");
    </script>
  </body>
</html>

Por si perdieron el script aqui se los dejo

<script src="https://unpkg.com/[email protected]"></script>

La notación de clases realizada se le conoce como BEM (Block, Element, Modifier) el cual realiza especificaciones a un elemento para su mejor manipulación con CSS. Comparto un link con mas información.

Una estructura tan simple que describe la entrada de un sistema completo.
Me emociona Vue como herramienta pero la respeto como Framework. Y es que como dice el principio KISS (Keep It Simple Stupid):

const { createApp } = Vue;
const app = createApp();
app.mount('#app');

bueno empecemos con vue mi primera vez con un framework front

const { createApp } = Vue;

const app = createApp();
app.mount("#app")


👌

Voy con toda a aprender Vue3!! La versión 2 me encantó y por eso me decidí a usar este framework