1

Código fuente del reto de Position

Hola amigos, si están en este blog es porque quieren saber como hice esta pagina web:

Captura.JPG

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

Escribe tu comentario
+ 2