En el curso el profe nos pide que creemos un layout y pues bueno, este fue mi diseño
Y quiero compartirlo con ustedes por si este layout les dio algunas ideas a ustedes que quisieran implementar.
Nota: Este diseño no es responsive design, ya que si lo quieres ver en tamaño de teléfono móvil, se va a amontonar todo. Tal ves haga algunos diseños responsive a lo largo del curso.
HTML
<!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>Ad ASTRA</title><linkrel="stylesheet"href="./style.css"></head><body><header>
Ad ASTRA
<figureclass="header__figure"><imgsrc="https://www.flaticon.com/svg/vstatic/svg/3594/3594083.svg?token=exp=1614448926~hmac=49d948c1d79015b5b24f4d77b45f424e"alt="logo Ad ASTRA"class="header__img"></figure><navclass="header-nav"><ulclass="header-nav__unordered-list"><liclass="header-nav__item"><ahref="">Home</a></li><liclass="header-nav__item"><ahref="">History</a></li><liclass="header-nav__item"><ahref="">Products</a></li><liclass="header-nav__item"><ahref="">Join us</a></li></ul></nav></header><main><asideclass="main-aside"><divclass="main-aside__div"><h1class="main-aside__h1">
Rockets
</h1><pclass="main-aside__p">
Rocket science is a primary branch of aerospace engineering.
It's not rocket science is a phrase meaning something that is
not difficult to understand. 🚀
</p></div><divclass="main-aside__div"><h1class="main-aside__h1">
Launches
</h1><pclass="main-aside__p">
As part of human exploration of the Moon, numerous space missions
have been undertaken to study Earth's natural satellite. 🛰️
</p></div><divclass="main-aside__div"><h1class="main-aside__h1">
Missions
</h1><pclass="main-aside__p">
Between 1968 and 1972, crewed missions to the Moon were conducted by
the United States as part of the Apollo program 🌑
</p></div><divclass="main-aside__div"><h1class="main-aside__h1">
Blog
</h1><pclass="main-aside__p">
According to a recent survey, blogs have ranked as the third most trustworthy
source of information, following only friends and family. ✒️
</p></div></aside><sectionclass="main-section"><h1class="main-section__h1">
What we do?
</h1><pclass="main-section__p">
Ad ASTRA Technologies Corp. is an Mexican aerospace manufacturer and space
transportation services company headquartered in Guadalajara, Mexico. It was founded
in 2020 with the goal of reducing space transportation costs to enable the
colonization of Mars and the space in general.
</p><h1class="main-section__h1">
How we do it?
</h1><pclass="main-section__p">
Our first goal and top priority project is the called Stanford torus, whic was proposed by the
NASA as a design for a space habitat capable of housing 10,000 to 140,000 permanent residents.
<imgsrc="https://space.nss.org/wp-content/uploads/abalakin-space-settlement-large.jpg"alt="Standfor Torus"class="main-section__img"></p></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>CSS
html{
font-size: 6.25%;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
header{
background-color: #110071;
color: white;
font-size: 30rem;
padding: 15rem;
}
.header-nav__itema{
color: white;
text-decoration: none;
}
.header-nav__item{
font-size: 20rem;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
padding: 05rem;
}
.header-nav__unordered-list{
text-align: right;
margin-top: -34rem;
background-color: none;
}
.header__figure{
width: 21rem;
height: 21rem;
display: inline-block;
}
.header__img{
width: 28rem;
height: 28rem;
position: relative;
}
main{
min-height: 100vh;
width: 100%;
}
footer{
background-color: white;
min-height: 10vh;
width: 100%;
border-top: 1rem solid #110071;
}
.footer-nav{
width: 100%;
font-size: 20rem;
padding: 15rem;
margin: 15rem0;
}
.footer-nav__itema{
color: #110071;
text-decoration: none;
}
.footer-nav__item{
display: inline-block;
padding: 015rem;
font-weight: bold;
}
.footer-nav__unordered-list{
text-align: center;
}
.main-aside, .main-section{
min-height: 100vh;
display: inline-block;
margin: 15rem0;
}
.main-aside{
width: 30%;
border-right: 1rem solid #110071;
padding: 15rem;
}
.main-section{
width: 70%;
border-left: 1rem solid #110071;
position: absolute;
}
.main-aside__div{
width: 100%;
height: 156rem;
border-bottom: 1rem solid #110071;
}
.main-aside__h1{
font-size: 22rem;
text-align: center;
width: 100%;
height: auto;
padding-top: 10rem;
font-family: sans-serif;
color: #110071;
}
.main-aside__p{
padding: 5rem;
font-size: 20rem;
}
.main-section__h1{
font-size: 25rem;
text-align: center;
width: 100%;
height: auto;
padding: 15rem0;
}
.main-section__p{
width: 100%;
padding: 7rem10rem;
font-size: 20rem;
}
.main-section__img{
width: 500rem;
height: 300rem;
margin: 0 auto;
display: block;
}
