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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viewport views</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
Irving Juárez
<nav class="header-nav">
<ul class="header-nav__unordered-list">
<li class="header-nav__item">
<a href="#">Home</a>
</li>
<li class="header-nav__item">
<a href="#">Blog</a>
</li>
<li class="header-nav__item">
<a href="#">Portfolio</a>
</li>
<li class="header-nav__item">
<a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
<main class="main">
<section class="main-section">
<h1 class="main-section__h1">Greek Gods</h1>
<article class="main-section__article">
<img src="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">
<p class="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>
<nav class="footer-nav">
<ul class="footer-nav__unordered-list">
<li class="footer-nav__item">
<a href="#">Facebook</a>
</li>
<li class="footer-nav__item">
<a href="#">instagram</a>
</li>
<li class="footer-nav__item">
<a href="#">Youtube</a>
</li>
<li class="footer-nav__item">
<a href="#">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__item a{
text-decoration: none;
color: white;
}
.header-nav__item a:hover{
color: gray;
}
.header-nav__item{
display: inline-block;
font-size: 25rem;
padding: 0 7rem;
}
.header-nav{
text-align: right;
margin-top: -34rem;
}
footer{
background-color: black;
padding: 15rem;
}
.footer-nav{
text-align: center;
}
.footer-nav__item a{
text-decoration: none;
color: white;
}
.footer-nav__item{
display: inline-block;
font-size: 23rem;
padding: 0 10rem;
}
.main{
min-height: 100vh;
width: 50vw;
min-width: 500rem;
margin: 13rem auto;
box-shadow: 2rem 2rem 10rem #888888;
padding: 1%;
}
.main-section{
width: auto;
padding: 7rem 0;
}
.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
Curso Definitivo de HTML y CSS
0 Comentarios
para escribir tu comentario
