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!!
<nav><ul><li>Home</li><li>About</li><li>News</li></ul><figureclass="logo"><imgsrc="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><sectionid="banner"><divclass="header"></div><divclass="row pt-16 pb-8"><divclass="col-6 img-principal"><figure><imgsrc="https://animesher.com/orig/1/142/1421/14210/animesher.com_pastel-tomoyo-sakura-card-captor-1421094.gif"alt="Tomoyo"width="450"><figcaptionclass="text-center">Pienso que debemos vivir cada día sin arrepentirnos de nada</figcaption></figure></div><divclass="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><sectionclass="list"><divclass="text-center"><h1>Relaciones</h1></div><divclass="row pb-8"><divclass="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><divclass="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><divclass="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><divclass="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><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-principalfigure{
display: flex;
}
nav{
justify-content: space-evenly;
background: white;
z-index: 3;
}
navul{
display: inherit;
align-items: center;
padding: 50px0px;
}
navulli{
margin: 0px30px;
color:#6140ed;
list-style: none;
height: fit-content;
text-transform: uppercase;
}
navulli:nth-child(2n){
padding: 0px30px;
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-principalfigure{
flex-direction: column;
width: min-content;
box-shadow: 1px1px5pxrgb(133, 133, 133);
}
.img-principalfigurefigcaption{
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: 0px60px;
}
.contenth1{
padding-top: 20px;
color: rgb(243, 0, 150);
}
.contentp:nth-child(2),.contenth1{
padding-bottom: 15px;
}
.list{
background: #dda0bd;
}
.list.row.col-6{
align-items: center;
padding: 20px100px ;
}
.listh1{
color: whitesmoke;
padding: 40px0px;
}
.text-center{
text-align: center;
}
.listspan{
background: white;
border-radius: 50px;
margin-right: 10px;
font-size: 2rem;
padding: 30px;
}
</style>
Espero que les haya gustado, si tienen algún aporte o retroalimentación, me encantaría escucharlos ^^ ❤️
