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 first-card e seus aspectos desktop e mobile

Browse Source
This commit is contained in:
SamuelCondack 2022-10-11 17:48:25 -03:00
parent 84f19a4f7f
commit d2423e5b8a
2 changed files with 47 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -13,8 +13,8 @@
</header>
<main>
<picture>
<source media="(max-width: 414px)" srcset="assets/mobile-images/top-card-image.png">
<source media="(min-width: 415px)" srcset="assets/images/desktop-banner.png">
<source media="(max-width: 500px)" srcset="assets/mobile-images/top-card-image.png">
<source media="(min-width: 501px)" srcset="assets/images/desktop-banner.png">
<img src="assets/images/desktop-banner.png" alt="laptop image banner" class="main-banner">
</picture>
<section class="first-content">
@ -29,6 +29,13 @@
<img src="assets/images/computers.svg" alt="computers image" class="block">
</picture>
</section>
<section>
<div class="first-card">
<div class="first-card-cards"><img src="assets/images/shop 1.svg" alt="shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
<div class="first-card-cards"><img src="assets/images/shopping-bag (1) 1.png" alt="bag shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
<div class="first-card-cards"><img src="assets/images/coin 1.png" alt="coin image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
</div>
</section>
</main>
</body>
</html>

40
styles/style.css
View File

@ -61,10 +61,38 @@
max-width: 315px;
display: block;
margin: auto;
padding: 73px 0px;
padding: 73px 0px 179px 0px;
}
@media screen and (max-width: 414px) {
.first-card {
width: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 21px;
padding-bottom: 79px;
}
.first-card-p {
width: 299px;
padding: 27px;
padding-top: 27px;
text-align: center;
}
.first-card-image {
display: block;
margin: auto;
width: 103px;
padding: 35px 12px 0px 12px;
}
.first-card-cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
@media screen and (max-width: 1024px) {
.first-content-text {
max-width: 367px;
padding: 0px 29px;
@ -84,4 +112,12 @@
text-align: center;
}
.block {
padding-bottom: 90px;
}
.first-card {
display: flex;
flex-direction: column;
}
}