Bugfix/Medidas #11

Merged
Rhayllon_Daudt merged 2 commits from Bugfix/Medidas into develop 2022-10-13 15:58:13 +00:00
2 changed files with 41 additions and 19 deletions

View File

@ -13,7 +13,17 @@ body{
background: #000000; background: #000000;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 28px 0; padding: 29px 0;
}
.header-link{
display: flex;
width: 12%;
justify-content: center;
}
.header-img{
width: 100%;
} }
.top-banner{ .top-banner{
@ -73,18 +83,19 @@ body{
align-items: center; align-items: center;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 36px 26px 26px;
gap: 27px;
} }
.top-card-image{ .top-card-image{
display: block; display: block;
padding: 36px 124px 0; width: 34%;
} }
.top-card-description{ .top-card-description{
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
padding: 26px;
} }
.mid-banners{ .mid-banners{
@ -111,7 +122,7 @@ body{
grid-template-columns: repeat(4, 23%); grid-template-columns: repeat(4, 23%);
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
padding: 0 0 108px; margin: 0 0 108px;
} }
.bottom-card{ .bottom-card{
@ -120,18 +131,20 @@ body{
align-items: center; align-items: center;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
gap: 15px;
padding: 36px 32px 65px;
} }
.bottom-card-image{ .bottom-card-image{
display: block; display: block;
padding: 36px 164px 0; width: 24%;
height: 100%;
} }
.bottom-card-description{ .bottom-card-description{
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
padding: 16px 32px 66px;
} }
.bottom-section{ .bottom-section{
@ -176,8 +189,11 @@ body{
background: #000000; background: #000000;
} }
.page-footer-conent{ .page-footer-content{
display: flex;
flex-direction: column;
width: 21%; width: 21%;
align-items: center;
} }
.footer-icons{ .footer-icons{
@ -185,10 +201,13 @@ body{
list-style: none; list-style: none;
margin-bottom: 16px; margin-bottom: 16px;
justify-content: center; justify-content: center;
gap: 16px;
width: 100%;
} }
.footer-icon{ .footer-link{
margin: 0 8px; display: flex;
width: 6%;
} }
.footer-text{ .footer-text{

View File

@ -18,9 +18,10 @@
<body> <body>
<header class="header-page"> <header class="header-page">
<a href="/"> <a class="header-link" href="/">
<img src="./assets/images/Logo-M3Academy.svg" alt="" /> <img class="header-img" src="./assets/images/Logo-M3Academy.svg" alt="M3 Academy" />
</a> </a>
</div>
</header> </header>
<main> <main>
@ -113,6 +114,7 @@
</p> </p>
</div> </div>
<div class="bottom-card"> <div class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="Imagem 4" /> <img class="bottom-card-image" src="./assets/images/bottom-card-04.png" alt="Imagem 4" />
@ -120,6 +122,7 @@
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. 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> </p>
</div> </div>
</section> </section>
<section class="bottom-section"> <section class="bottom-section">
@ -140,22 +143,22 @@
</section> </section>
<footer class="page-footer"> <footer class="page-footer">
<div class="page-footer-conent"> <div class="page-footer-content">
<ul class="footer-icons"> <ul class="footer-icons">
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-instagram.png" alt="Icone do Instgram"> <img src="./assets/images/icon-instagram.png" alt="Icone do Instgram">
</a> </a>
</li> </li>
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-facebook.png" alt="Icone do Facebook"> <img src="./assets/images/icon-facebook.png" alt="Icone do Facebook">
</a> </a>
</li> </li>
<li class="footer-icon"> <li>
<a href="#" target="_blank"> <a class="footer-link" href="#" target="_blank">
<img src="./assets/images/icon-youtube.png" alt="Icone do Youtube"> <img src="./assets/images/icon-youtube.png" alt="Icone do Youtube">
</a> </a>
</li> </li>