forked from M3-Academy/challenge-landing-page
Merge pull request 'feat(main): adicionei responsividade deskot na primeira section do main' (#6) from feature/main-sections into main
Reviewed-on: #6
This commit is contained in:
commit
401c23eabd
37
index.html
37
index.html
@ -25,32 +25,29 @@
|
||||
|
||||
<main>
|
||||
|
||||
<div>
|
||||
<figure>
|
||||
<img class="banner" src="./assets/img/banner1.png" alt="banner" />
|
||||
</figure>
|
||||
</div>
|
||||
<figure>
|
||||
<img class="banner" src="./assets/img/banner1.png" alt="banner" />
|
||||
</figure>
|
||||
|
||||
<section>
|
||||
|
||||
<div>
|
||||
<h1>Lorem IPSUM</h1>
|
||||
<div class="info-dolor">
|
||||
<p class="info-title">Lorem IPSUM</p>
|
||||
<h1>Dolor Sit Amet</h1>
|
||||
<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 class="info-content">
|
||||
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>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<figure>
|
||||
<figure class="info-monitor">
|
||||
<img src="./assets/img/img-3monitores.png" alt="" />
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div class="info-card">
|
||||
|
||||
<div class="info-shop">
|
||||
<figure>
|
||||
<img src="./assets/img/img-shop.png" alt="Imagem de shopping" />
|
||||
<figcaption>
|
||||
@ -60,7 +57,7 @@
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="info-bag">
|
||||
<figure>
|
||||
<img src="./assets/img/img-bag.png" alt="Imagem de mochila" />
|
||||
<figcaption>
|
||||
@ -70,7 +67,7 @@
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="info-coin">
|
||||
<figure>
|
||||
<img src="./assets/img/img-coin.png" alt="Imagem de dinheiro" />
|
||||
<figcaption>
|
||||
@ -162,8 +159,8 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article >
|
||||
<figure >
|
||||
<article>
|
||||
<figure>
|
||||
<img class="img-embacada" src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
|
||||
</figure>
|
||||
</article>
|
||||
|
||||
110
style.css
110
style.css
@ -4,58 +4,149 @@
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
|
||||
|
||||
@media screen and (max-width: 2500px) {
|
||||
|
||||
.container-header{
|
||||
/* Header */
|
||||
.container-header {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.logo-m3 {
|
||||
display: flex;
|
||||
padding: 29px 0px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Banner */
|
||||
.banner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
.img-embacada {
|
||||
|
||||
/*Fisrt section */
|
||||
|
||||
.info-dolor {
|
||||
max-width: 40.26%;
|
||||
margin: 0 auto;
|
||||
}.info-title {
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
font-weight: 400px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}.info-dolor h1 {
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}.info-content {
|
||||
margin: 28px 0px 84px 0px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
/* Imagem três monitores */
|
||||
|
||||
.info-monitor{
|
||||
display: flex;
|
||||
max-width: 16,35%;
|
||||
justify-content: center;
|
||||
margin-bottom: 179px;
|
||||
}
|
||||
|
||||
/* Card da primeira section */
|
||||
|
||||
.info-card {
|
||||
max-width:56,90%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.info-shop{
|
||||
max-width: 350px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}.info-shop img{
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-shop figcaption {
|
||||
line-height: 24px;
|
||||
max-width: 299px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
.info-bag{
|
||||
max-width: 350px;
|
||||
text-align: center;
|
||||
margin: 0px 21px;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}.info-bag img {
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-bag figcaption {
|
||||
line-height: 24px;
|
||||
max-width: 299px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
.info-coin{
|
||||
max-width: 350px;
|
||||
text-align: center;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}.info-coin img {
|
||||
margin-bottom: 27px;
|
||||
margin-top: 35px;
|
||||
}.info-coin figcaption {
|
||||
line-height: 24px;
|
||||
max-width: 299px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
.img-embacada {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.container-header{
|
||||
|
||||
/* HEADER */
|
||||
.container-header {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.logo-m3 {
|
||||
display: flex;
|
||||
padding: 29px 0px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* BANNER */
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-embacada {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-laptop {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2501px) {
|
||||
.container-header{
|
||||
.container-header {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.logo-m3 {
|
||||
display: flex;
|
||||
padding: 29px 0px;
|
||||
@ -66,8 +157,9 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-embacada {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user