Thiago.bronisio/challenge-landing-page-thiago-bronisio
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): adicionei @media para inicio dos break points

Browse Source
This commit is contained in:
Thiago Bronisio 2022-10-08 23:27:04 -03:00
parent f2bb409f29
commit 4c8cb44d53
2 changed files with 60 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -15,8 +15,8 @@
<header class="container-header">
<a href="/">
<figure class="logo-m3">
<a class="logo-m3" href="/">
<figure>
<img src="./assets/img/svg/Logo-M3Academy 1.svg" alt="Logo M3" />
</figure>
</a>
@ -27,7 +27,7 @@
<div>
<figure>
<img class="img-dev" src="./assets/img/banner1.png" alt="banner" />
<img class="banner" src="./assets/img/banner1.png" alt="banner" />
</figure>
</div>
@ -45,7 +45,7 @@
<div>
<figure>
<img class="img-dev" src="./assets/img/img-3monitores.png" alt="" />
<img src="./assets/img/img-3monitores.png" alt="" />
</figure>
</div>
@ -86,15 +86,15 @@
<section>
<figure>
<img class="img-dev" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
<img class="img-laptop" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
</figure>
<figure>
<img class="img-dev" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
<img class="img-laptop" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
</figure>
<figure>
<img class="img-dev" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
<img class="img-laptop" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
</figure>
@ -139,7 +139,7 @@
<div>
<figure>
<img class="img-dev" src="./assets/img/img-smarthphone.png" alt="Imagem de celular" />
<img src="./assets/img/img-smarthphone.png" alt="Imagem de celular" />
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. Lorem ipsum dolor sit amet,
@ -162,9 +162,9 @@
</p>
</div>
<article>
<figure>
<img class="img-dev" src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
<article >
<figure >
<img class="img-embacada" src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
</figure>
</article>

71
style.css
View File

@ -6,41 +6,68 @@
/* Header */
.container-header {
@media screen and (max-width: 2500px) {
.container-header{
background-color: #000000;
}
.logo-m3 {
display: flex;
padding: 29px 0px;
justify-content: center;
}
.banner {
display: flex;
width: 100%;
}
.logo-m3 {
padding: 29px 0px;
.img-embacada {
display: flex;
width: 100%;
}
}
@media screen and (max-width: 1024px) {
.container-header{
background-color: #000000;
}
.logo-m3 {
display: flex;
padding: 29px 0px;
justify-content: center;
}
.img-dev {
max-width: 100%;
.banner {
display: flex;
}
.img-dev {
max-width: 100%;
display: flex;
}
@media screen and (max-width: 1024px) {
.container-header {
background-color: #000000;
width: 100%;
}
.img-dev {
max-width: 100%;
.img-embacada {
display: flex;
width: 100%;
}
.img-laptop {
display: flex;
width: 100%;
}
}
@media screen and (min-width: 2501px) {
.container-header{
background-color: #000000;
}
.logo-m3 {
display: flex;
padding: 29px 0px;
justify-content: center;
}
.banner {
display: flex;
width: 100%;
}
.img-embacada {
display: flex;
width: 100%;
}
}