caroline_moran/challenge-landing-page
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

doc: incluindo comentários

Browse Source
This commit is contained in:
Caroline Moran 2022-10-06 16:06:41 -04:00
parent 7ff1c4030a
commit 2eab7476d5
2 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/landingPage.html
View File

@ -8,6 +8,7 @@
<title>Desafio 1-M3 Academy</title>
</head>
<body>
<!-- Cabecalho -->
<header>
<figure class="logo-container">
<img
@ -17,7 +18,9 @@
/>
</figure>
</header>
<!-- Corpo do site -->
<main>
<!-- Banner principal -->
<div class="banner-principal-container">
<figure class="banner-principal-desktop">
<img
@ -29,6 +32,7 @@
<img src="./assets/BannerPrincipalMobile.png" alt="Um Notebook" />
</figure>
</div>
<!-- Título principal do site e descricão principal -->
<section class="descricao-container">
<div class="texto-container">
<h2>Lorem ipsum</h2>
@ -48,6 +52,7 @@
/>
</figure>
</section>
<!-- Primeiro container de cards -->
<div class="cards-container">
<figure class="card">
<img
@ -75,6 +80,7 @@
</figcaption>
</figure>
</div>
<!-- Container de mini banners -->
<div class="mini-banners-container">
<div class="mini-banners-wrapper">
<div class="mini-banners">
@ -103,6 +109,7 @@
</div>
<div class="fundo-branco"></div>
</div>
<!-- Segundo Container de cards -->
<div class="cards2-container">
<figure class="card">
<img
@ -149,7 +156,8 @@
</figcaption>
</figure>
</div>
<section class="descricao-final-container">
<!-- Artigo de finalizacão -->
<article class="descricao-final-container">
<div class="texto-final-container">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
@ -175,8 +183,9 @@
class="image-descricao-final"
/>
</figure>
</section>
</article>
</main>
<!-- Rodapé do site -->
<footer class="footer-landingpage">
<figure class="redes-sociais">
<img src="./assets/Instagram.png" alt="Icone Instagram" />

42
src/style/landingPage.css
View File

@ -7,7 +7,7 @@
text-align: center;
margin: 0;
}
/* Cabecalho */
.logo-container {
width: 100%;
background-color: #000;
@ -20,6 +20,8 @@
.logo {
width: 5%;
}
/* Banner principal */
.image-descricao-container,
.banner-principal-mobile img,
.banner-principal-desktop img,
@ -34,6 +36,8 @@
.banner-principal-mobile {
display: none;
}
/* Título principal do site e descricão principal */
.descricao-container,
.texto-container {
display: flex;
@ -70,6 +74,7 @@
.image-descricao {
width: 20%;
}
/* Primeiro container de cards */
.cards-container {
width: 100%;
padding: 93px 0 80px;
@ -101,6 +106,7 @@
font-size: 16px;
line-height: 24px;
}
/* Container de mini banners */
.fundo-branco {
width: 100%;
height: 62px;
@ -124,6 +130,7 @@
.mini-banner-image {
width: 100%;
}
/* Segundo Container de cards */
.cards2-container {
padding: 129px 72px 108px;
display: flex;
@ -138,6 +145,7 @@
.cards2-container .card .card-image {
width: 25%;
}
/* Artigo de finalizacão */
.image-descricao-final-mobile {
display: none;
width: 100%;
@ -168,13 +176,14 @@
.texto-final-container h2 {
font-weight: 600;
font-size: 32px;
line-height: 20px;
line-height: 29px;
}
.texto-final-container p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
/* Rodapé do site */
.redes-sociais,
.footer-landingpage {
display: flex;
@ -202,6 +211,7 @@
}
@media (min-width: 2500px) {
/* Título principal do site e descricão principal */
.texto-container h1 {
font-size: 96px;
line-height: 116px;
@ -214,6 +224,7 @@
font-size: 32px;
line-height: 48px;
}
/* Primeiro container de cards */
.card-text {
font-size: 32px;
line-height: 48px;
@ -221,32 +232,38 @@
.card {
min-height: 574px;
}
/* Segundo container de cards */
.cards2-container .card {
min-height: 664px;
}
/* Artigo de finalizacão */
.texto-final-container h2 {
font-size: 64px;
line-height: 40px;
line-height: 58px;
}
.texto-final-container p {
font-size: 32px;
line-height: 48px;
}
/* Rodapé do site */
.footer-landingpage-text {
font-size: 20px;
line-height: 24px;
}
}
@media (max-width: 1024px) {
/* Cabecalho */
.logo {
width: 20%;
}
/* Banner principal */
.banner-principal-desktop {
display: none;
}
.banner-principal-mobile {
display: block;
}
/* Título principal do site e descricão principal */
.descricao-container {
padding: 73px 29px 91px;
}
@ -273,6 +290,7 @@
.image-descricao {
width: 100%;
}
/* Primeiro container de cards */
.cards-container {
flex-direction: column;
padding: 0 32px 80px;
@ -281,6 +299,7 @@
.card {
width: 100%;
}
/* Container de mini banners */
.mini-banners-wrapper {
padding: 0 23px;
}
@ -307,6 +326,7 @@
.fundo-branco {
height: 32px;
}
/* Segundo Container de cards */
.cards2-container {
flex-direction: column;
padding: 80px 23px 98px;
@ -322,6 +342,7 @@
font-size: 14px;
line-height: 24px;
}
/* Artigo de finalizacão */
.image-descricao-final-mobile {
display: block;
}
@ -338,18 +359,31 @@
}
.texto-final-container h2 {
font-size: 24px;
line-height: 20px;
line-height: 29px;
}
.texto-final-container p {
font-size: 16px;
line-height: 24px;
}
/* Rodapé do site */
.footer-landingpage-text {
max-width: 261px;
}
}
@media (max-width: 820px) {
/* Rodapé do site */
.redes-sociais {
width: 18%;
}
}
@media (max-width: 320px) {
.texto-final-container,
.card,
.cards2-container,
.mini-banners-wrapper,
.cards-container,
.descricao-container {
padding-left: 20px;
padding-right: 20px;
}
}