feat: adiciona infocard inferior

This commit is contained in:
Rafael Sampaio de Oliveira 2022-10-11 18:56:44 -03:00
parent f0270544cc
commit 280280fe4e
4 changed files with 131 additions and 0 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.4 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.4 MiB

View File

@ -179,6 +179,34 @@ header {
line-height: 24px; line-height: 24px;
} }
.bottom-ifocard-desktop {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 116px;
width: 100%;
}
.bottom-ifocard-desktop img {
width: 100%;
}
.bottom-ifocard-desktop-container {
display: flex;
justify-content: center;
text-align: center;
width: 70%;
margin-bottom: 50px;
}
.bottom-ifocard-desktop-container div {
width: 40%;
}
.bottom-ifocard-mobile {
display: none;
}
@media (max-width: 414px) { @media (max-width: 414px) {
.banner-desktop { .banner-desktop {
display: none; display: none;
@ -220,6 +248,10 @@ header {
margin-top: 0; margin-top: 0;
} }
.gallery {
margin-bottom: 112px;
}
.gallery-container { .gallery-container {
gap: 24px 14px; gap: 24px 14px;
} }
@ -240,6 +272,42 @@ header {
.bottom-cards-container { .bottom-cards-container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
} }
.bottom-ifocard-desktop {
display: none;
}
.bottom-ifocard-mobile {
display: flex;
flex-direction: column;
margin-bottom: 87px;
}
.bottom-ifocard-mobile img {
width: 100%;
}
.bottom-ifocard-mobile-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 32px;
}
.bottom-ifocard-mobile-container h1 {
margin: 50px 0 9px;
}
}
@media (min-width: 1920px) {
.top-cards-container {
display: flex;
}
.bottom-cards-container {
display: flex;
}
} }
@media (min-width: 1623px) and (max-width: 1912px) { @media (min-width: 1623px) and (max-width: 1912px) {
@ -261,6 +329,12 @@ header {
} }
} }
@media (min-width: 600px) and (max-width: 1123px) {
.bottom-ifocard-desktop-container div {
width: 75%;
}
}
@media (min-width: 415px) and (max-width: 599px) { @media (min-width: 415px) and (max-width: 599px) {
.gallery-container { .gallery-container {
grid-template-columns: repeat(auto-fill, minmax(94%, 1fr)); grid-template-columns: repeat(auto-fill, minmax(94%, 1fr));
@ -273,6 +347,10 @@ header {
.bottom-cards-container { .bottom-cards-container {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
} }
.bottom-ifocard-desktop-container div {
width: 85%;
}
} }
@media (min-width: 350px) and (max-width: 380px) { @media (min-width: 350px) and (max-width: 380px) {

View File

@ -164,6 +164,41 @@
</div> </div>
</div> </div>
</div> </div>
<section class="bottom-ifocard-desktop">
<div class="bottom-ifocard-desktop-container">
<div>
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
vulputate sapien non libero faucibus interdum. In eget tincidunt
ipsum. <br />
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi
eget hendrerit. Curabitur venenatis felis vitae sagittis
venenatis. <br />
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</div>
</div>
<figure>
<img src="./assets/images/bottom-banner-desktop.svg" alt="" />
</figure>
</section>
<section class="bottom-ifocard-mobile">
<figure>
<img src="./assets/images/bottom-banner-mobile.svg" alt="" />
</figure>
<div class="bottom-ifocard-mobile-container">
<h1>Lorem ipsum dolor sit amet</h1>
<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>
</main> </main>
</body> </body>
</html> </html>