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

71
style.css
View File

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