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

feat: responsividade adicionada

Browse Source
This commit is contained in:
Ramon Dias Ferreira 2022-10-13 18:05:27 -03:00
parent 9b9dd21141
commit ef0e810107
4 changed files with 76 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/banner 2-mob.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
assets/images/banner-mob.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

71
assets/styles/landing-page.css
View File

@ -14,6 +14,14 @@ header {
height: 101px; height: 101px;
} }
.logo{
width: 12%;
}
.logo img{
width: 100%;
}
.banner-top{ .banner-top{
width: 100%; width: 100%;
} }
@ -192,3 +200,66 @@ footer{
footer p{ footer p{
color: #ffffff; color: #ffffff;
} }
@media (max-width: 1024px) {
.logo{
width: 55%;
}
.banner-top{
visibility: hidden;
width: 0px;
}
.banner-top-mob{
width: 100%;
}
.network{
width: 58%;
}
.card-section, .card-section-small{
flex-direction: column;
align-items: center;
}
.card, .card-small{
width: 85%;
height: 332px;
}
.card-img, .img-card-small{
width: 29%;
}
.card p, .card-small p{
width: 82%;
}
.computers-area{
display: grid;
grid-template-columns: repeat(2,1fr);
}
#item1{
grid-area: 1/2/1/2;
}
#item2{
grid-area: 1/1/1/1;
}
#item3{
grid-area: 2/1/2/3;
}
.information-code{
display: grid;
}
}
@media (min-width: 1025px) {
.banner-top-mob{
visibility: hidden;
width: 0px;
position: absolute;
}
}

9
landing-page.html
View File

@ -9,12 +9,13 @@
</head> </head>
<body> <body>
<header> <header>
<a href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa"> <a class="logo" href="https://lp.digitalm3.com.br/m3-academy-universidade-corporativa">
<img src="./assets/images/logo.png" alt="logo da empresa"> <img src="./assets/images/logo.png" alt="logo da empresa">
</a> </a>
</header> </header>
<main> <main>
<figure> <figure>
<img class="banner-top-mob" src="./assets/images/banner-mob.png" alt="notebook com codigos na tela"/>
<img class="banner-top" src="./assets/images/banner.png" alt="notebook com codigos na tela"/> <img class="banner-top" src="./assets/images/banner.png" alt="notebook com codigos na tela"/>
</figure> </figure>
<section class="information-network"> <section class="information-network">
@ -53,13 +54,13 @@
</div> </div>
</section> </section>
<section class="computers-area"> <section class="computers-area">
<figure class="computers-img"> <figure class="computers-img" id="item1">
<img src="./assets/images/computer 1.png" alt="notebook parcialmente fechado"/> <img src="./assets/images/computer 1.png" alt="notebook parcialmente fechado"/>
</figure> </figure>
<figure class="computers-img"> <figure class="computers-img" id="item2">
<img src="./assets/images/computer 2.png" alt="notebook visto de cima"/> <img src="./assets/images/computer 2.png" alt="notebook visto de cima"/>
</figure> </figure>
<figure class="computers-img"> <figure class="computers-img" id="item3">
<img src="./assets/images/computer 3.png" alt="notebook de lado"/> <img src="./assets/images/computer 3.png" alt="notebook de lado"/>
</figure> </figure>
</section> </section>