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.
