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

Adiciona bottomm-banner e footer desktop e mobile

Browse Source
This commit is contained in:
SamuelCondack 2022-10-12 20:22:28 -03:00
parent 6eaeda5e08
commit 5e60f3e267
2 changed files with 123 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@ -59,6 +59,14 @@
<div class="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
</div>
</section>
<section class="bottom-banner2">
<div class="bottom-banner-desktop">
<img src="assets/images/Rectangle 15.png" alt="computer image" class="bottom-banner-img">
</div>
<div class="bottom-banner-mobile">
<img src="assets/mobile-images/bottom-card-image.png" alt="" class="bottom-banner-img">
</div>
</section>
<section class="second-content">
<div class="second-content-text">
<h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>
@ -67,6 +75,33 @@
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
</section>
<section class="bottom-banner">
<div class="bottom-banner-desktop">
<img src="assets/images/Rectangle 15.png" alt="computer image" class="bottom-banner-img">
</div>
<div class="bottom-banner-mobile">
<img src="assets/mobile-images/bottom-card-image.png" alt="" class="bottom-banner-img">
</div>
</section>
<section class="second-content2">
<div class="second-content-text">
<h2 class="second-content-h2">Lorem ipsum dolor sit amet</h2>
<p class="second-content-p">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.</p>
</div>
</section>
<footer>
<section class="end-footer">
<div class="footer-images">
<div><img src="assets/images/instagram-logo.svg" alt="instagram logo" class="footer-img"></div>
<div><img src="assets/images/facebook-logo.svg" alt="facebook logo"></div class="footer-img">
<div><img src="assets/images/youtube 2.svg" alt="youtube logo"></div class="footer-img">
</div>
<p class="footer-p">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</section>
</footer>
</main>
</body>
</html>

93
styles/style.css
View File

@ -126,11 +126,11 @@
.image-row-mobile2 {
margin: auto;
max-width: 368px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 24px;
max-width: 368px;
}
.row-image-mobile {
@ -170,6 +170,15 @@
width: auto;
}
.bottom-banner2 {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: auto;
padding-top: 50px;
}
.second-content {
padding-top: 108px;
display: flex;
@ -190,10 +199,60 @@
text-align: center;
}
.second-content-p {
.first-content-p {
text-align: center;
}
.bottom-banner {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: auto;
padding-top: 50px;
}
.second-content2 {
padding-top: 108px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.bottom-banner-desktop {
display: block;
width: 100%;
}
.bottom-banner-mobile {
width: 100%;
}
.bottom-banner-img {
width: 100%;
}
.end-footer {
background-color: #000000;
margin-top: 116px;
}
.footer-images {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 16px;
padding: 38px 0px 16px 0px;
}
.footer-p {
color: #BDBDBD;
text-align: center;
padding-bottom: 38px;
}
@media screen and (max-width: 1024px) {
.first-content-text {
max-width: 367px;
@ -240,9 +299,21 @@
max-width: 302px;
}
}
.bottom-banner-desktop {
display: none;
}
@media screen and (max-width: 1270px) {
.second-content {
padding: 50px 32px;
}
.bottom-banner {
display: none;
}
.second-content2 {
display: none;
}
}
@media screen and (max-width: 1024px) {
@ -263,11 +334,23 @@
.image-row-mobile2 {
display: none;
}
.bottom-banner-mobile {
display: none;
}
.bottom-banner2 {
display: none;
}
.second-content2 {
display: none;
}
}
@media screen and (max-width: 369px) {
.image-row-mobile1 {
width: 50%;
width: 100%;
}
.image-row-mobile2 {