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

Faltando finalizar container das imagens e criar um breackpoint para resoluções de 2500px em diante.

Browse Source
This commit is contained in:
JOÃO VITOR LIBERATO DE OLIVEIRA 2022-10-09 21:29:33 -03:00
parent 81b11644f2
commit aace72c48d
3 changed files with 266 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
assets/css/index.css
View File

@ -12,7 +12,7 @@
.sobre {
width: 100%;
margin-top: 84px;
margin: 84px 0 80px;
display: flex;
flex-direction: column;
@ -39,13 +39,13 @@
color: #000000;
}
.sobre .imagemRedesComputador {
.sobre .sobre__imagemRedesComputador {
width: 222.73px;
height: 204.57px;
margin: 65px auto 90.62px;
}
.sobre .saibaMais {
.sobre .sobre__saibaMais {
width: 100%;
display: flex;
@ -55,7 +55,7 @@
text-align: center;
}
.sobre .saibaMais .infos {
.sobre .sobre__saibaMais .sobre__saibaMais--infos {
background-color: #FFFFFF;
width: 100%;
max-width: 350.33px;
@ -70,10 +70,112 @@
text-align: center;
}
.sobre .saibaMais .infos p {
.sobre .sobre__saibaMais .infos p {
max-width: 271px;
}
/* .images__notebook {
width: 100%;
background-color: #E0E0E0;
}
.images__notebook .images__notebook--container article {
display: flex;
align-items: center;
justify-content: center;
}
.images__notebook .images__notebook--container article img {} */
.informacoes__card {
width: 100%;
height: 100%;
background-color: #E5E5E5;
padding-bottom: 99px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.informacoes__card .informacoes__card--dados {
width: 100%;
max-width: 365px;
height: 332px;
background-color: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
margin-bottom: 16px;
padding: 65px 33px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.informacoes__card .informacoes__card--dados:nth-child(1){
margin-top: 80px;
}
.informacoes__card .informacoes__card--dados p {
max-width: 302px;
padding-top: 31.32px;
font-size: 14px;
line-height: 24px;
font-weight: 400;
font-size: 14px;
line-height: 24px;
}
.mais__informacoes {
width: 100%;
background-color: #E5E5E5;
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
text-align: center;
color: #000000;
}
.mais__informacoes .mais__informacoes--texts h2 {
font-weight: 600;
font-size: 24px;
line-height: 29px;
text-align: center;
padding: 50px 50px 8px 49px;
}
.mais__informacoes .mais__informacoes--texts p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
padding: 1px 32px 87px;
}
.mais__informacoes img {
width: 100%;
}
.mais__informacoes img:nth-child(2) {
display: none;
}
@media(min-width: 600px){
.banner .banner__mobile{
display: none;
@ -83,5 +185,89 @@
display: block;
width: 100%;
}
.informacoes__card {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
flex-wrap: wrap;
padding: 80px 0 90px;
}
.informacoes__card .informacoes__card--dados {
box-sizing: border-box;
}
.informacoes__card .informacoes__card--dados:nth-child(1){
margin-top: 0;
}
.mais__informacoes {
display: flex;
flex-direction: column;
}
.mais__informacoes .mais__informacoes--texts p {
width: 550px;
}
.mais__informacoes img:nth-child(3) {
display: none;
}
.mais__informacoes img:nth-child(2) {
display: block;
padding: 0 20px;
}
}
@media(min-width: 1024px){
.sobre .sobre__saibaMais {
display: flex;
flex-direction: row;
}
.images__notebook .images__notebook--container article {
display: flex;
justify-content: center;
align-items: center;
}
.images__notebook .images__notebook--container article img{
width: 100%;
max-width: 32.21%;
padding: 0 10px;
}
/*Fazer o imagem notebook*/
.informacoes__card {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 191px 72px 108px;
}
.informacoes__card .informacoes__card--dados {
padding: 44.11px 33px 65px;
margin: 10px 10px;
}
.informacoes__card .informacoes__card--dados p {
width: 367px;
}
.mais__informacoes img:nth-child(2) {
display: block;
padding: 0 280px 116px;
}
}

9
assets/images/oculos.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

82
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -8,13 +9,15 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./assets/css/global.css">
<link rel="stylesheet" href="./assets/css/index.css">
</head>
<body>
<header>
<img class="logo" src="./assets/images/Logo-M3Academy.svg" alt="Logo M3 - learning page.">
@ -32,35 +35,81 @@
dolor sit amet
</h1>
</div>
<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>
<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>
</article>
<img class="imagemRedesComputador" src="./assets/icons/threenetworkedcomputers.svg" alt="Imagens de computadores se conectando">
<article class="saibaMais">
<article class="infos infos__primerioContainer">
<img class="sobre__imagemRedesComputador" src="./assets/icons/threenetworkedcomputers.svg"
alt="Imagens de computadores se conectando" />
<article class="sobre__saibaMais">
<article class="sobre__saibaMais--infos">
<img src="./assets/icons/shop.svg" alt="Icone do Shop.">
<p>
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.
</p>
</article>
<article class="infos">
<article class="sobre__saibaMais--infos">
<img src="./assets/icons/shopping-bag.svg" alt="Icone da socala.">
<p>
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.
</p>
</article>
<article class="infos">
<article class="sobre__saibaMais--infos">
<img src="./assets/icons/coin.svg" alt="Icone do Coin.">
<p>
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.
</p>
</article>
</section>
<article>
<!-- <article class="images__notebook">
<article class="images__notebook--container">
<article>
<img src="./assets/images/noteImage1.svg" alt="Imagens do notebook" id="img1"/>
<img src="./assets/images/noteImage2.svg" alt="Imagens do notebook" id="img2"/>
<img src="./assets/images/noteImage3.svg" alt="Imagens do notebook" id="img3"/>
</article>
</article>
</article> -->
<article class="informacoes__card">
<article class="informacoes__card--dados">
<img src="./assets/icons/money.svg" alt="Icone da cedula." />
<p>
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.
</p>
</article>
<article class="informacoes__card--dados">
<img src="./assets/icons/laptop.svg" alt="Icone do laptop." />
<p>
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.
</p>
</article>
<article class="informacoes__card--dados">
<img src="./assets/icons/coin.svg" alt="Icone da moeda." />
<p>
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.
</p>
</article>
<article class="informacoes__card--dados">
<img src="./assets/icons/GroupInfo.svg" alt="Icone de um celular recebendo uma aviso." />
<p>
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.
</p>
</article>
</article>
<article class="mais__informacoes">
<article class="mais__informacoes--texts">
<h2>Lorem ipsum dolor sit amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</article>
<img src="./assets/images/ultimoFundo.svg" alt="Banner de fundo embassado.">
<img src="./assets/images/oculos.svg" alt="Imagem do óculos para telas mobiles.">
</article>
</main>
<!-- <footer>
<footer>
<article class="Icons-RedesSocias">
<img src="./assets/icons/Instagram.svg" alt="Icone do instagram">
<img src="./assets/icons/facebook.svg" alt="Icone do facebook">
@ -69,6 +118,7 @@
<p>
Copyright &copy; 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer> -->
</footer>
</body>
</html>