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

colocando as imagens e centralizando no mobile

Browse Source
This commit is contained in:
matheusjardimgarcia 2022-10-12 20:56:05 -03:00
parent 0bf7e92340
commit fa1e0104f7
2 changed files with 60 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/css/style.css
View File

@ -31,6 +31,14 @@
.image-pc{
width: 50%;
}
.infoboxes-sub-wrapper{
width: 100%;
flex-direction: column;
}
.div-infobox{
width: 96%;
height: 70%;
}
}
@media screen and (min-width: 415px) {
.mobile-hidden{
@ -40,7 +48,15 @@
margin: 5% 0;
}
.image-pc{
width: 45%;
width: 15%;
}
.infoboxes-sub-wrapper{
width: 70%;
flex-direction: row;
}
.div-infobox{
width: 40%;
height: 60%;
}
}
.div-title{
@ -87,3 +103,22 @@
align-items: center;
justify-content: center;
}
.infoboxes-wrapper{
display: flex;
width: 100%;
height: 28em;
justify-content: space-around;
gap: 2%;
}
.infoboxes-sub-wrapper{
display: flex;
justify-content: center;
align-items: center;
gap: 2%;
}
.div-infobox{
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}

37
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">
@ -7,41 +8,51 @@
<title>M3 ACADEMY</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header class="page-header">
<a href="/">
<img class ="header-logo" src="./assets/images/Logo-M3Academy 1.svg" alt="Logo M3">
</a>
<img class="header-logo" src="./assets/images/Logo-M3Academy 1.svg" alt="Logo M3">
</a>
</header>
<main>
<section>
<img class="main-banner desktop-hidden" src="./assets/images/imagem-top.png" alt="Banner Principal Desktop">
<img class="main-banner mobile-hidden" src="./assets/images/imagem-top-mobile.png" alt="Banner Principal Mobile">
<img class="main-banner mobile-hidden" src="./assets/images/imagem-top-mobile.png"
alt="Banner Principal Mobile">
</section>
<section>
<div class="div-title">
<h1 class="title-one">Lorem ipsum</h1>
<h2 class="title-two">dolor sit amet</h2>
<h3 class ="title-three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
<h3 class="title-three">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. </h3>
<div class ="div-image-pc">
<img class ="image-pc" src="./assets/images/image-pc.png" alt="Imagem de informacao de conteudo">
</div>
<div class="div-image-pc">
<img class="image-pc" src="./assets/images/image-pc.png" alt="Imagem de informacao de conteudo">
</div>
</div>
</section>
<section>
<div>
<div class="div-infobox">teste1</div>
<div class="div-infobox">teste2</div>
<div class="div-infobox">teste3</div>
<div class="infoboxes-wrapper">
<div class="infoboxes-sub-wrapper">
<div class="div-infobox">
<img src="./assets/images/loja-online.png" alt="Logo da loja online">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</div>
<div class="div-infobox">teste2</div>
<div class="div-infobox">teste3</div>
</div>
</div>
</section>
</main>
</body>
</html>