Hola, en este tutorial les mostraré como hacer este banner de un blog:
Me gusto mucho su diseño y quise probarme al recrearlo tal y como se ve, la verdad fue un gran reto para mí, hice mi primer intento y sentí que estaba adivinando en lugar de razonarlo, por lo que deseche ese primer intento y lo quise hacer nuevamente, siento que a diferencia de mi primer intento, este quedo mucho más limpio y puedo entenderlo mejor 😄 obviamente sé que hay cosas que mejorar, como la cuestión de la responsiva que no la incluí, pero los conceptos básicos que hemos visto hasta el momento los he aplicado ^^.
Espero que les guste tanto como a mí, y los aliento a que prueben sus conocimientos, todos nos encontramos en este proceso de aprendizaje y se vale cometer errores, pero es mejor intentarlo, fallar y aprender, a no intentarlo y no aprender.
Empecemos!!
- Agregamos la estructura de acuerdo a la imagen, esto al menos a mi me ayudo a visualizar como quedaría
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>News</li>
</ul>
<figure class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Cardcaptor_Sakura_Japanese_logo.svg/1200px-Cardcaptor_Sakura_Japanese_logo.svg.png" alt="logo" width="250"></figure>
<ul>
<li>Shop</li>
<li>Courses</li>
<li>Contact</li>
</ul>
</nav>
<section id="banner">
<div class="header"></div>
<div class="row pt-16 pb-8">
<div class="col-6 img-principal">
<figure>
<img src="https://animesher.com/orig/1/142/1421/14210/animesher.com_pastel-tomoyo-sakura-card-captor-1421094.gif" alt="Tomoyo" width="450">
<figcaption class="text-center">Pienso que debemos vivir cada día sin arrepentirnos de nada</figcaption>
</figure>
</div>
<div class="col-6 content">
<h1>Hola, soy Tomoyo Daidouji</h1>
<p>La piel de Tomoyo es de un tono blanco porcelana, tiene el cabello de color violeta grisáceo y sus ojos son de color púrpura. </p>
<p>El flequillo de su cabello es amplio, abarcando la totalidad de su frente y cubriendo sus cejas de modo parcial las cuales suelen ser cortas. </p>
</div>
</div>
</section>
<section class="list">
<div class="text-center">
<h1>Relaciones</h1>
</div>
<div class="row pb-8">
<div class="col-6"><span>🌸</span><p> Tomoyo es la mejor amiga de <strong>Sakura Kinomoto</strong>. Cuando ella descubre que Sakura tiene poderes mágicos y que se convirtió en una Card Captor, ayuda a su amiga.</p></div>
<div class="col-6"><span>🌸</span> <p>Tiene un grupo de <strong>guardaespaldas</strong> (todas mujeres) que la cuida, pero a pesar de su condición económica es una chica muy agradable, linda y tierna.</p></div>
<div class="col-6"><span>🌸</span><p>Ella es una gran amiga de <strong>Syaoran Li y de Eriol Hiragizawa</strong>, aunque no se nota por su comportamiento si existe una gran amistad entre ella y los dos jóvenes protagonistas. </p></div>
<div class="col-6"><span>🌸</span><p>En el manga, Tomoyo parece tener un tipo de atracción por <strong>Touya</strong>, pero hay varias fuentes que parecen indicar que el sonrojamiento es debido a que Touya tiene "las orejas" parecidas a las de Sakura. </p></div>
</div>
</section>
- Agregamos los estilos que necesitaremos para que quede lo más parecido a la idea principal (en lo personal, primero fui agregando los estilos conforme los iba necesitando, una vez que los agregue, agrupe algunos estilos en las clases que coincidían):
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1.2rem;
}
nav, .row, .col-6, .img-principal figure{
display: flex;
}
nav{
justify-content: space-evenly;
background: white;
z-index: 3;
}
nav ul{
display: inherit;
align-items: center;
padding: 50px 0px;
}
nav ul li{
margin: 0px 30px;
color:#6140ed;
list-style: none;
height: fit-content;
text-transform: uppercase;
}
nav ul li:nth-child(2n){
padding: 0px 30px;
border-right: 1px solid #ff9ac2;
border-left: 1px solid #ff9ac2;
}
h1{
font-family: "Lucida Handwriting", sans-serif;
font-size: 2.5rem;
line-height: 1.2;
}
.logo{
padding: 25px;
}
#banner, .row, .col-6{
position: relative;
}
.header{
position: absolute;
z-index: 1;
width: 100%;
height: 280px;
background-image: url(https://static.vecteezy.com/system/resources/previews/005/375/884/original/cherry-blossom-branch-with-fallen-petals-pink-background-vector.jpg);
background-repeat: no-repeat;
}
.row{
width: 100%;
flex-wrap: wrap;
z-index: 2;
top: 0;
}
.pt-16{
padding-top: 160px;
}
.pt-8{
padding-top: 80px;
}
.pb-8{
padding-bottom: 80px;
}
.col-6{
width: 50%;
}
.img-principal{
justify-content: center;
align-items: center;
}
.img-principal figure{
flex-direction: column;
width: min-content;
box-shadow: 1px 1px 5px rgb(133, 133, 133);
}
.img-principal figure figcaption{
background: #ff9ac2;
color:white;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 1.5rem;
padding: 10px;
margin: 0;
}
.content, .list{
line-height: 1.5;
}
.content{
flex-direction: column;
justify-content: end;
padding: 0px 60px;
}
.content h1{
padding-top: 20px;
color: rgb(243, 0, 150);
}
.content p:nth-child(2),.content h1{
padding-bottom: 15px;
}
.list{
background: #dda0bd;
}
.list .row .col-6{
align-items: center;
padding: 20px 100px ;
}
.list h1{
color: whitesmoke;
padding: 40px 0px;
}
.text-center{
text-align: center;
}
.list span{
background: white;
border-radius: 50px;
margin-right: 10px;
font-size: 2rem;
padding: 30px;
}
</style>
- Listo, con estos dos podremos tener un resultado como este:
Espero que les haya gustado, si tienen algún aporte o retroalimentación, me encantaría escucharlos ^^ ❤️
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
