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 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.
<!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>Web page with flex</title><linkrel="stylesheet"href="./webpage.css"></head><body><header>
Solar system
<figureclass="header-figure"><imgsrc="https://i.pinimg.com/originals/f3/7b/52/f37b5273252024d60d9bb5c73bccd627.png"alt="A planet"class="header__img"></figure></header><main><navclass="main-nav"><ulclass="main-nav__list"><liclass="main-nav__item"><ahref="#"> Home </a></li><liclass="main-nav__item"><ahref="#"> Blog </a></li><liclass="main-nav__item"><ahref="#"> Lab </a></li><liclass="main-nav__item"><ahref="#"> Join us </a></li></ul></nav><asideclass="main-aside"><articleclass="main-aside__article"><p>SUN</p><figureclass="main-aside__figure"><imgsrc="http://assets.stickpng.com/images/580b585b2edbce24c47b270f.png"alt="The sun"class="main-aside__img"></figure></article><articleclass="main-aside__article"><p>MERCURY</p><figureclass="main-aside__figure"><imgsrc="http://assets.stickpng.com/images/580b585b2edbce24c47b2709.png"alt="Mercury"class="main-aside__img"></figure></article><articleclass="main-aside__article"><p>VENUS</p><figureclass="main-aside__figure"><imgsrc="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><articleclass="main-aside__article"><p>MARS</p><figureclass="main-aside__figure"><imgsrc="https://www.freepnglogos.com/uploads/mars-png/mars-interactive-solar-system-13.png"alt="Mars"class="main-aside__img"></figure></article></aside><sectionclass="main-section"><articleclass="main-section__article"><h1class="main-section__h1">
EARTH
</h1><pclass="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><pclass="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><figureclass="main-section__figure"><imgsrc="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>*{
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: 10rem15rem;
display: flex;
}
.header-figure{
min-width: 30rem;
min-height: 30rem;
max-width: 35rem;
max-height: 35rem;
margin: 4rem04rem10rem;
}
.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__itema{
color: white;
text-decoration: none;
list-style: none;
}
.main-nav__item{
flex-basis: 150rem;
text-align: center;
margin: 5rem0;
}
.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;
}
