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

Merge branch 'feature/grids' of ssh://gitea.ecommercetools.com.br:22022/JessicaSilvaOliveiradosSantos/challenge-landing-page-jessica-oliveira

Browse Source
This commit is contained in:
Jéssica Silva Oliveira dos Santos 2022-10-13 01:42:33 -03:00
commit b932841a81
11 changed files with 236 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imagens/Rectangle 15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 KiB

BIN
assets/imagens/gird1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
assets/imagens/grid2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
assets/imagens/grid3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
assets/imagens/mine-foto-1-grupo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/imagens/mine-foto-2-grupo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
assets/imagens/mine-foto-3-grupo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/imagens/mine-foto-3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
assets/imagens/mine-foto-4-grupo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

169
index.html
View File

@ -13,48 +13,159 @@
</head>
<body>
<header class="pagina">
<div>
<figure>
<a href="/">
<img class="logo" src="assets/imagens/Logo-M3Academy.svg" alt="Logo-M3Academy">
</a>
</figure>
</div>
<a href="/">
<img class="logo" src="assets/imagens/Logo-M3Academy.svg" alt="Logo-M3Academy">
</a>
</header>
<main>
<div>
<picture>
<source class="banner-p" media="(max-width: 1024px )" srcset="assets/imagens/bannerp.png">
<img class="banner" src="assets/imagens/banner.png" alt="Banner principal">
</picture>
<picture>
</div>
<source media="(max-width: 1024px )" srcset="assets/imagens/bannerp.png">
<section>
<div class="BL">
<h2 class="first-sentence">Lorem ipsum</h2>
<h1 class="sentence">Dolor sit amet</h1>
<p class="one-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
<img class="banner" src="assets/imagens/banner.png" alt="Banner principal">
</picture>
<section class="sessao1">
<div class="BL">
<h2 class="sentence2">Lorem ipsum</h2>
<h1 class="sentence">Dolor sit amet</h1>
<p class="one-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
</div>
<div>
<figure>
<img class="computadores" src="assets/imagens/computers.png" alt="computadores">
</figure>
</div>
<div class="icones">
<div class="icone1">
<figure class="img1">
<img src="assets/imagens/mine-foto-1.png" alt="Primeiro ícone">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</figcaption>
</figure>
</div>
<div class="icone2">
<figure class="img2">
<img src="assets/imagens/mine-foto-2.png" alt="Segundo ícone">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="icone3">
<figure class="img3">
<img src="assets/imagens/mine-foto-2-grupo2.png" alt="Terceiro ícone">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</div>
</section>
<div class="grids">
<div class="grid">
<div>
<figure>
<img class="grid-img" src="assets/imagens/gird1.png" alt="Notebook 1">
</figure>
</div>
<div>
<figure>
<img class="grid-img" src="assets/imagens/grid2.png" alt="Notebook 2">
</figure>
</div>
<div>
<figure>
<img class="grid-img" src="assets/imagens/grid3.png" alt="Notebook 3">
</figure>
</div>
</div>
</div>
<div class="computadores">
<figure>
<img src="assets/imagens/computers.png" alt="computadores">
<div class="cards">
<figure class="card1">
<img src="assets/imagens/mine-foto-1-grupo2.png" alt="Card 1">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div>
<figure class="icone1">
<img src="assets/imagens/mine-foto-1.png" alt="Primeira miniatura">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="card2">
<img src="assets/imagens/mine-foto-2-grupo2.png" alt="card 2">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</section>
<div>
<figure class="card3">
<img src="assets/imagens/mine-foto-3-grupo2.png" alt="card 3">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div>
<figure class="card4">
<img src="assets/imagens/mine-foto-4-grupo2.png" alt="card 4">
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</main>
</body>

115
style.css
View File

@ -17,41 +17,118 @@
.logo {
display: block;
}
.banner-p {
width: 100%;
}
.banner {
width: 100%;
}
.BL {
padding: 4% 31%;
.sessao1 {
display: flex;
padding: 0 28px;
align-items: center;
text-align: center;
display: block;
justify-content: center;
flex-direction: column;
}
.first-sentence {
font-weight: 400;
font-size: 32px;
.BL {
padding: 73px 0;
}
.sentence {
.sentence{
font-weight: 500;
font-size: 48px;
line-height: 58px;
text-transform: uppercase;
}
.sentence2{
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
}
.one-p {
font-weight: 400;
font-size: 16px;
max-width: 766px;
margin-top: 28px;
}
.computadores
{
padding: 4% 0;
text-align: center;
.computadores {
max-width: 239px;
}
.icones {
display: flex;
margin-top: 179px;
gap: 21px;
}
.icone1 {
width: 19%;
}
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 350px;
padding: 35px 26px 27px 26px;
}
.img1 {
padding: 36px 25px 27px 26px;
}
.icone2 {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 350px;
padding: 35px 26px 27px 26px;
}
.img2 {
padding: 36px 25px 27px 26px;
}
.icone3 {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 350px;
padding: 35px 26px 27px 26px;
}
.img3 {
padding: 36px 25px 27px 26px;
}
.grids {
display: flex;
background: #E0E0E0;
justify-content: center;
margin-top: 80px;
padding: 0 72px;
}
.grid{
display: flex;
position: relative;
gap: 39px;
bottom: -62px;
}
.grid-img{
width: 100%;
max-height: 530px;
max-width: 566px;
}
.cards {
display: flex;
gap: 16px;
justify-content: center;
text-align: center;
padding: 303px;
}