Sitio Web para Libro estilo One Page

Este es un sitio web para libro estilo one page, el décimo sitio parte del reto personal #100sitioswebchallenge.

Puedes visualizar el sitio en: Book Website

DESAFÍOS

Este es un sitio web de una sola página vertical, dentro del header cree una clase que dividiría el color del background para crear el efecto final que se ve dentro de la portada.

Entre el HTML y el CSS. Dentro del HTML podrás observar que uso las etiquetas nav y la clase showcase dentro del header, pero también uso otra clase llamada “home-cover”. Esta clase home-cover es la encargada del color que menciono, como lo podrás observar en CSS en cuanto llama el estilo. Sin mencionar la altura con vh que logra que toda la portada se vea de manera completa en cuando abres el sitio web.

<header id="main-header">

    <div id="home-cover">

      <nav id="navbar">

        <div class="container">

          <h1><a href="index.html">Book Website</a></h1>

          <ul>

            <li><a href="#author">About Author</a></li>

            <li><a href="#book">Book Preview</a></li>

            <li><a class="btn-dark" href="#buy">Buy Now</a></li>

          </ul>

        </div>

     </nav>


      <div id="showcase">

        <div class="container">

          <div class="showcase-book">

            <img src="img/book-cover.png" alt="">

          </div>

          <div class="showcase-content">

            <h1>Book Website</h1>

            <p class="large">

              Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna.

            </p>

            <a href="#buy" class="btn-light">Buy Now</a>

          </div>

        </div>

      </div>

    </div>

  </header>

CSS

/* Header */

#main-header {

  background: #fff;

  color: #fff;

  height: 100vh;

}




#home-cover {

  background: #35afe1;

  height: 80vh;

}

PROCESO

Paleta de colores y estilos

Paleta de colores: F6AC37 4747A5 F6772A 35AFE1 de colours.cafe

Tipografía: Robot de Google Fonts

Mockup (Bosquejo)

Dependiendo del caso, empiezo la idea inspirándome en otros templates para de ahí ir formando mi versión. Iniciando implementando la idea en papel para posteriormente brincar a Figma y empezar a darme más estilo y colores de acuerdo a la tipografía que establecí desde un inicio.

HTML y CSS

Aunque la maquetación del sitio toma aproximadamente 50% del total del tiempo para crear el sitio desde cero, vale mucho la pena. Porque sólo tengo que brincar a HTML y CSS para pasar todo el sitio web a maquetación web.

Sitio web responsivo

El sitio una vez que está terminado dentro de la hoja de estilos mobile.css hago todos los cambios necesarios para que se pueda visualizar el sitio en plataformas móviles.

Publicación del sitio

Consulta el código del sitio en Github

Puedes visualizar el sitio en: Book Website

Información técnica

  • Figma
  • Visual Studio Code
  • HTML5 (Semántico)
  • CSS
  • Sitio responsivo
  • Github
  • Netlify

Recursos

Pexels

Deja tus comentarios y sugerencias para, sitio web para libro estilo one page.

NEWSLETTER

Suscríbete a Sencillamente Web

Reflexiones sobre desarrollo web

Contenido Relacionado