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

Adicionar middle-cards

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2022-10-10 16:10:57 -03:00
parent e15f105f38
commit 66581668d2
2 changed files with 69 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -35,20 +35,23 @@
<img class="main-image-mobile"src="./assests/main-image-mobile.png" alt="Imagem da main Mobile">
</figure>
<div class="middle-cards">
<figure>
<img src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
<figure class="middle-card">
<img class="middle-card-image" src="./assests/middle-card-01.png" alt="Imagem do primeiro card do meio">
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</figure>
<figure class="middle-card">
<img class="middle-card-image" src="./assests/middle-card-02.png" alt="Imagem do segundo card do meio">
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</figure>
<figure class="middle-card">
<img class="middle-card-image" src="./assests/middle-card-03.png" alt="Imagem do terceiro card do meio">
<p class="middle-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</figure>
</div>
</section>
<div>
</div>
</main>
</body>
</html>

62
main.css
View File

@ -27,6 +27,10 @@ body {
display: block;
}
.main-image-desktop {
margin-bottom: 180px;
}
.middle-information {
display: flex;
flex-direction: column;
@ -60,19 +64,61 @@ body {
margin-bottom: 28px;
}
@media screen and (max-width: 414px) {
.main-banner-desktop, .main-image-desktop {
display: none;
}
.middle-cards {
display: flex;
justify-content: center;
gap: 22px;
}
@media screen and (min-width:415px ) {
.middle-card {
display: flex;
flex-direction: column;
align-items: center;
max-width: 18%;
background-color:#FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 36px 26px 28px;
}
.middle-card-image {
display: block;
margin-bottom: 26px;
}
.middle-card-description {
font-size: 16px;
line-height: 24px;
text-align: center;
}
@media screen and (min-width: 1025px) {
.main-banner-mobile, .main-image-mobile {
display: none;
}
}
@media screen and (max-width:1024px) {
}
/* @media screen and (max-width:1024px) {
.main-banner-desktop, .main-image-desktop {
display: none;
}
.middle-text {
width: 100%;
@ -95,4 +141,4 @@ body {
}
}
*/