Faltando finalizar container das imagens e criar um breackpoint para resoluções de 2500px em diante.
This commit is contained in:
parent
81b11644f2
commit
aace72c48d
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
.sobre {
|
.sobre {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 84px;
|
margin: 84px 0 80px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -39,13 +39,13 @@
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sobre .imagemRedesComputador {
|
.sobre .sobre__imagemRedesComputador {
|
||||||
width: 222.73px;
|
width: 222.73px;
|
||||||
height: 204.57px;
|
height: 204.57px;
|
||||||
margin: 65px auto 90.62px;
|
margin: 65px auto 90.62px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sobre .saibaMais {
|
.sobre .sobre__saibaMais {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -55,7 +55,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sobre .saibaMais .infos {
|
.sobre .sobre__saibaMais .sobre__saibaMais--infos {
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 350.33px;
|
max-width: 350.33px;
|
||||||
@ -70,10 +70,112 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sobre .saibaMais .infos p {
|
.sobre .sobre__saibaMais .infos p {
|
||||||
max-width: 271px;
|
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){
|
@media(min-width: 600px){
|
||||||
.banner .banner__mobile{
|
.banner .banner__mobile{
|
||||||
display: none;
|
display: none;
|
||||||
@ -83,5 +185,89 @@
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
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
9
assets/images/oculos.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.4 MiB |
82
index.html
82
index.html
@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="pt-BR">
|
<html lang="pt-BR">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<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.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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/global.css">
|
||||||
<link rel="stylesheet" href="./assets/css/index.css">
|
<link rel="stylesheet" href="./assets/css/index.css">
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<img class="logo" src="./assets/images/Logo-M3Academy.svg" alt="Logo M3 - learning page.">
|
<img class="logo" src="./assets/images/Logo-M3Academy.svg" alt="Logo M3 - learning page.">
|
||||||
@ -32,35 +35,81 @@
|
|||||||
dolor sit amet
|
dolor sit amet
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</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>
|
</article>
|
||||||
<img class="imagemRedesComputador" src="./assets/icons/threenetworkedcomputers.svg" alt="Imagens de computadores se conectando">
|
<img class="sobre__imagemRedesComputador" src="./assets/icons/threenetworkedcomputers.svg"
|
||||||
|
alt="Imagens de computadores se conectando" />
|
||||||
<article class="saibaMais">
|
|
||||||
<article class="infos infos__primerioContainer">
|
<article class="sobre__saibaMais">
|
||||||
|
<article class="sobre__saibaMais--infos">
|
||||||
<img src="./assets/icons/shop.svg" alt="Icone do Shop.">
|
<img src="./assets/icons/shop.svg" alt="Icone do Shop.">
|
||||||
<p>
|
<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>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
<article class="infos">
|
<article class="sobre__saibaMais--infos">
|
||||||
<img src="./assets/icons/shopping-bag.svg" alt="Icone da socala.">
|
<img src="./assets/icons/shopping-bag.svg" alt="Icone da socala.">
|
||||||
<p>
|
<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>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
<article class="infos">
|
<article class="sobre__saibaMais--infos">
|
||||||
<img src="./assets/icons/coin.svg" alt="Icone do Coin.">
|
<img src="./assets/icons/coin.svg" alt="Icone do Coin.">
|
||||||
<p>
|
<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>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</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>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
<!-- <footer>
|
<footer>
|
||||||
<article class="Icons-RedesSocias">
|
<article class="Icons-RedesSocias">
|
||||||
<img src="./assets/icons/Instagram.svg" alt="Icone do instagram">
|
<img src="./assets/icons/Instagram.svg" alt="Icone do instagram">
|
||||||
<img src="./assets/icons/facebook.svg" alt="Icone do facebook">
|
<img src="./assets/icons/facebook.svg" alt="Icone do facebook">
|
||||||
@ -69,6 +118,7 @@
|
|||||||
<p>
|
<p>
|
||||||
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||||
</p>
|
</p>
|
||||||
</footer> -->
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user