A lo largo de las clases de este curso hemos estado viendo algunas cosas interesantes pero uno de los temas mas valiosos fue el de Flex, que es una manera de hacer diseños responsive y una manera de que nuestras paginas no se vean mal aun cuando estas están en un dispositivo móvil.
Mi primera pagina responsive
Mi primera pagina responsive decidí hacerla del sistema solar porque es un tema interesante. Aquí puedes ver el resultado en PC y a continuación en teléfono móvil.
Espero que te haya gustado y si quieres ver como se ve la pagina de manera completa o quisieras ver como lo hice, aquí te dejo los códigos para que lo veas y te inspires.
HTML
<!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>Web page with flex</title>
<link rel="stylesheet" href="./webpage.css">
</head>
<body>
<header>
Solar system
<figure class="header-figure">
<img src="https://i.pinimg.com/originals/f3/7b/52/f37b5273252024d60d9bb5c73bccd627.png" alt="A planet" class="header__img">
</figure>
</header>
<main>
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#"> Home </a>
</li>
<li class="main-nav__item">
<a href="#"> Blog </a>
</li>
<li class="main-nav__item">
<a href="#"> Lab </a>
</li>
<li class="main-nav__item">
<a href="#"> Join us </a>
</li>
</ul>
</nav>
<aside class="main-aside">
<article class="main-aside__article">
<p>SUN</p>
<figure class="main-aside__figure">
<img src="http://assets.stickpng.com/images/580b585b2edbce24c47b270f.png" alt="The sun" class="main-aside__img">
</figure>
</article>
<article class="main-aside__article">
<p>MERCURY</p>
<figure class="main-aside__figure">
<img src="http://assets.stickpng.com/images/580b585b2edbce24c47b2709.png" alt="Mercury" class="main-aside__img">
</figure>
</article>
<article class="main-aside__article">
<p>VENUS</p>
<figure class="main-aside__figure">
<img src="https://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1920,f_auto/AW_Venus_nli6oy.jpg" alt="Venus" class="main-aside__img">
</figure>
</article>
<article class="main-aside__article">
<p>MARS</p>
<figure class="main-aside__figure">
<img src="https://www.freepnglogos.com/uploads/mars-png/mars-interactive-solar-system-13.png" alt="Mars" class="main-aside__img">
</figure>
</article>
</aside>
<section class="main-section">
<article class="main-section__article">
<h1 class="main-section__h1">
EARTH
</h1>
<p class="main-section__p">
Earth is the third planet from the Sun and the only astronomical object known to harbor life.
About 29% of Earth's surface is land consisting of continents and islands. The remaining 71%
is covered with water, mostly by oceans but also by lakes, rivers, and other fresh water, which
together constitute the hydrosphere. Much of Earth's polar regions are covered in ice.
Earth is the third planet from the Sun and the only astronomical object known to harbor life.
About 29% of Earth's surface is land consisting of continents and islands. The remaining 71%
is covered with water, mostly by oceans but also by lakes, rivers, and other fresh water, which
together constitute the hydrosphere. Much of Earth's polar regions are covered in ice.
</p>
<p class="main-section__p">
According to radiometric dating estimation and other evidence, Earth formed over 4.5 billion years
ago. Within the first billion years of Earth's history, life appeared in the oceans and began to
affect Earth's atmosphere and surface, leading to the proliferation of anaerobic and, later,
aerobic organisms.
</p>
<figure class="main-section__figure">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Earth_Western_Hemisphere_transparent_background.png/1200px-Earth_Western_Hemisphere_transparent_background.png" alt="The planet earth" class="main-section__img">
</figure>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 6.25%;
}
header{
width: 100%;
height: 10vh;
background-color: navy;
font-size: 30rem;
color: white;
padding: 10rem 15rem;
display: flex;
}
.header-figure{
min-width: 30rem;
min-height: 30rem;
max-width: 35rem;
max-height: 35rem;
margin: 4rem 0 4rem 10rem;
}
.header__img{
width: 100%;
height: 100%;
}
.main-nav{
background-color: black;
font-size: 18rem;
width: 100%;
min-height: 5vh;
border-top: 1rem solid white;
}
.main-nav__list{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.main-nav__item a{
color: white;
text-decoration: none;
list-style: none;
}
.main-nav__item{
flex-basis: 150rem;
text-align: center;
margin: 5rem 0;
}
.main-nav__item:hover{
background-color: navy;
}
.main-aside{
min-height: 80vh;
width: 20%;
flex-grow: 1;
display: flex;
flex-wrap: wrap;
padding: 15rem;
}
main{
display: flex;
flex-wrap: wrap;
}
.main-section{
width: 80%;
flex-grow: 1;
min-width: 323rem;
min-height: 80vh;
background-color: black;
padding: 15rem;
}
footer{
width: 100%;
height: 10vh;
background-color: navy;
}
.main-aside__article{
height: 20%;
min-width: 100%;
background-color: black;
color: white;
font-size: 25rem;
border-radius: 15rem;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.main-aside__img{
width: 100%;
height: 100%;
}
.main-aside__figure{
width: 50rem;
height: 50rem;
}
.main-section__article{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.main-section__h1{
font-size: 30rem;
width: 100%;
text-align: center;
color: white;
padding: 5rem;
}
.main-section__p{
color: white;
font-size: 20rem;
width: 100%;
padding: 10rem;
display: inline-block;
}
.main-section__figure{
display: inline-block;
width: 100%;
height: fit-content;
text-align: center;
}
.main-section__img{
width: 220rem;
height: 220rem;
}
Curso Definitivo de HTML y CSS
0 Comentarios
para escribir tu comentario
