anacarolinaduartecavalcante/challenge-landing-page-Ana-Carolina-Duarte-Cavalcante
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adicionando banner final

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-10-09 16:54:17 -03:00
parent aafa556d88
commit e5a983d261
4 changed files with 115 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imgs/background-bottom.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 362 KiB

BIN
assets/imgs/banner-final.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

13
index.html
View File

@ -118,6 +118,19 @@
</div>
</div>
</div>
<section class="banner-final">
<figure>
<div class="banner-final-text">
<h3>Lorem ipsum dolor sit amet</h3>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</figcaption>
</div>
<img src="./assets/imgs/banner-final.png" alt="">
</figure>
</section>
</main>
</body>
</html>

108
styles/main.css
View File

@ -166,6 +166,50 @@
color: #000000;
}
/* seção final com título, texto e imagem */
.banner-final {
width: 100%;
padding: 36px 7% 116px 7%;
}
.banner-final figure {
max-width: 1360px;
height: 484px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
margin: auto;
}
.banner-final figure img {
width: 100%;
height: 276px;
object-fit: cover;
object-position: 25% 55%;
}
.banner-final figure .banner-final-text h3 {
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-align: center;
color: #000000;
}
.banner-final .banner-final-text figcaption {
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #000000;
margin-bottom: 50px;
max-width: 550px;
width: 100%;
text-align: center;
}
@media screen and (max-width: 1025px) {
.background-main figure img {
height: 100%;
@ -289,25 +333,77 @@
gap: 16px;
}
.first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img {
margin-bottom: 15px;
}
.banner-final {
width: 100%;
padding: 0;
}
.banner-final figure {
max-width: 414px;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
position: relative;
margin: auto;
}
.banner-final figure img {
width: 100%;
height: auto;
margin-bottom: 50px;
}
.banner-final-text {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.banner-final figure .banner-final-text h3 {
font-weight: 600;
font-size: 24px;
line-height: 29px;
margin-bottom: 9px;
}
.banner-final .banner-final-text figcaption {
margin-bottom: 87px;
max-width: 350px;
width: 100%;
}
}
@media screen and (max-width: 281px){
.cards-macbook {
height: auto;
@media screen and (max-width: 281px) {
.cards-macbook {
height: auto;
}
.cards-macbook-container {
height: auto;
top: 32px;
}
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure {
height: auto;
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure {
height: auto;
}
.bottom-cards {
max-height: 1640px;
}
.banner-final .banner-final-text figcaption {
margin-bottom: 87px;
padding: 0 32px 0 32px;
}
}
@media screen and (min-width: 2500px) {