Diseño y maquetación del Header

Clase 8 de 35 • Curso de Desarrollo Web con Svelte y Sapper

Clase anteriorSiguiente clase

Sergio VO

student•

Pueden encontrar los iconos en esta pagina https://icon-icons.com :)

Juan Pablo Celiz

student•

¡Gracias!

Reynaldo Francisco Moreno Briceño

student•

Otra forma de aplicar estilos a los elementos h1 y span, es usando el :global()

:global(h1) {
}

:global(span) {
}

Asi evitamos escribir varias veces la misma clase.

Christian Latorre

student•

por lo que estoy entendiendo, svelte es como una estructura que al compilar se arma la pagina, la pregunta es si así funciona react o angular, o de que se tratan las otras dos, estoy empezando con este framework a ver de que es que se trata

Eric Gomez

student•

Header.svelte

<header class="Header">
  <div class="Header-container">
    <div class="Header-content">
      <div class="Header-logo">
        <h2>Eric Gomez
          <span>Frontend & Fundation Layer at Platzi</span>
        </h2>
      </div>
      <div class="Header-social">
        <ul>
          <li>
            <a href="/" target="_blank" rel="noreferrer">
              <img src="github-icon.png" alt="GitHub">
            </a>
          </li>
          <li>
            <a href="/" target="_blank" rel="noreferrer">
              <img src="facebook-icon.png" alt="Facebook">
            </a>
          </li>
          <li>
            <a href="/" target="_blank" rel="noreferrer">
              <img src="instagram-icon.png" alt="Instagram">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

<style>
  .Header {
    background-color: #fafbfc;
    color: #191a10;
    padding: 1em 0 0 0;
  }

  .Header-container {
    display: grid;
    grid-template-columns: minmax(auto, 1024px);
    justify-content: center;
    align-items: center;
  }

  .Header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .Header h1 {
    color: #191a22;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.8px;
    cursor: pointer;
  }

  .Header h1 span {
    display: block;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: normal;
    margin: 0.3em 0 0 0;
  }

  .Header ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .Header li {
    display: inline-block;
    margin: 0 0.5em 0 0;
  }

  .Header a {
    text-decoration: none;
    font-weight: 300;
    font-size: 14px;
  }

  .Header-social img{
    width: 20px;
  }

</style>

Giancarlo Zevallos Lecca

student•

SvelteKit https://github.com/giancarlo92/curso-sapper-sveltekit/tree/8b4a24db1ee0637b37ba6fc5fe3bdffcc8913a9d

Sapper https://github.com/giancarlo92/curso-sapper-sapper/tree/a4b2bb2606d60b064d4c8bbafce2fc88a0acd914

Ernesto Cruz Bravo

student•

Estilos del header

.Header{
        background-color: #fafbfc;
        color: #191a22;
        padding: 1em 0 0 0;
    }
    .Header-container{
        display: grid;
        grid-template-columns: minmax(auto,1024px);
        justify-content: center;
        align-items: center;
    }
    .Header-content{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .Header h1{
        color: #191a22;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0.8px;
        cursor: pointer;
    }
    .Header h1 span{
        display: block;
        font-size: 13px;
        font-weight: 300;
        letter-spacing: normal;
        margin: 0.3em 0 0 0;
    }
    .Header ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .Header li{
        display: inline-block;
        margin: 0 0.5em 0 0;
    }
    .Header a{
        text-decoration: none;
        font-weight: 300px;
        font-size: 14px;
    }
    .Header-social img{
     width: 20px;
    }```

Luis Alejandro Vera Hernandez

student•

En .Header-content, es justify-content:space-between;

Naldo Duran

student•

👌