Hola amigos, si están en este blog es porque quieren saber como hice esta pagina web:
Y bueno, antes de enseñarles el código fuente, es necesario que sepan que esta pagina no es del todo responsive, ya que al momento de hacer este pequeño proyecto, aun no llego a esa parte del curso. Talvez publique otro post donde muestre un proyecto distinto que sea mas responsive.
Pd: Si no sabes que es responsive, es que el diseño se ajuste dependiendo al tamaño de la pantalla.
Entonces, este es el HTML
Pd2: Utilizo la metodología BEM para nombrar a mis clases.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Viewport views</title><linkrel="stylesheet"href="./style.css"></head><body><header>
Irving Juárez
<navclass="header-nav"><ulclass="header-nav__unordered-list"><liclass="header-nav__item"><ahref="#">Home</a></li><liclass="header-nav__item"><ahref="#">Blog</a></li><liclass="header-nav__item"><ahref="#">Portfolio</a></li><liclass="header-nav__item"><ahref="#">Contact</a></li></ul></nav></header><mainclass="main"><sectionclass="main-section"><h1class="main-section__h1">Greek Gods</h1><articleclass="main-section__article"><imgsrc="https://images.vexels.com/media/users/3/190690/isolated/preview/e98db73d96c883cde40fc552f599ac77-zeus-dios-griego-personaje-by-vexels.png"alt="Zeus Greek's god"class="main-section__img"><pclass="main-section__p">
Zeus[a] is the sky and thunder god in ancient Greek religion, who rules as king of the gods of Mount Olympus.
</p></article></section></main><footer><navclass="footer-nav"><ulclass="footer-nav__unordered-list"><liclass="footer-nav__item"><ahref="#">Facebook</a></li><liclass="footer-nav__item"><ahref="#">instagram</a></li><liclass="footer-nav__item"><ahref="#">Youtube</a></li><liclass="footer-nav__item"><ahref="#">Reddit</a></li></ul></nav></footer></body></html>
Y este es el CSS.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 6.25%;
}
header{
background-color: black;
color: white;
font-size: 30rem;
padding: 17rem;
}
.header-nav__itema{
text-decoration: none;
color: white;
}
.header-nav__itema:hover{
color: gray;
}
.header-nav__item{
display: inline-block;
font-size: 25rem;
padding: 07rem;
}
.header-nav{
text-align: right;
margin-top: -34rem;
}
footer{
background-color: black;
padding: 15rem;
}
.footer-nav{
text-align: center;
}
.footer-nav__itema{
text-decoration: none;
color: white;
}
.footer-nav__item{
display: inline-block;
font-size: 23rem;
padding: 010rem;
}
.main{
min-height: 100vh;
width: 50vw;
min-width: 500rem;
margin: 13rem auto;
box-shadow: 2rem2rem10rem#888888;
padding: 1%;
}
.main-section{
width: auto;
padding: 7rem0;
}
.main-section__h1{
text-align: center;
font-size: 25rem;
width: 150rem;
border: 3rem solid blue;
border-radius: 8rem;
background-color: white;
margin: 0 auto;
}
.main-section__article{
width: 90%;
height: auto;
background-color: #7C7C7C;
position: relative;
bottom: 15rem;
z-index: -1;
margin: auto;
border-radius: 10rem;
padding: 15rem;
text-align: center;
}
.main-section__img{
width: 300rem;
height: 350rem;
opacity: 2;
}
.main-section__p{
font-size: 25rem;
color: white;
}
Agregale otros dioses griegos