forked from M3-Academy/practice-time-landing-page
feat/fix(home): alteirei alguns tamanhos e resolvi problemas de resposividade
This commit is contained in:
parent
6f0cc22353
commit
9e4a468b05
BIN
assets/images/Fotter-image.png
Normal file
BIN
assets/images/Fotter-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 444 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 140 KiB |
@ -11,8 +11,7 @@ body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 28px 0;
|
||||
background-color: #000
|
||||
;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.main-banner ,
|
||||
@ -27,8 +26,8 @@ body{
|
||||
padding: 80px 0 96px;
|
||||
}
|
||||
.top-infocard-text{
|
||||
margin-right: 124px;
|
||||
max-width: 766px;
|
||||
margin-right: 6%;
|
||||
max-width: 40%;
|
||||
}
|
||||
.top-inforcard-subtitle{
|
||||
text-transform: uppercase;
|
||||
@ -37,7 +36,7 @@ body{
|
||||
|
||||
}
|
||||
.top-infocard-title{
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1%;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
@ -48,10 +47,10 @@ body{
|
||||
}
|
||||
.top-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
padding: 74px 0;
|
||||
padding: 5% 15%;
|
||||
background: #F0F0F0;
|
||||
}
|
||||
.top-card{
|
||||
@ -64,33 +63,112 @@ body{
|
||||
}
|
||||
.top-card-image{
|
||||
display: block;
|
||||
margin-bottom: 26px;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
.top-card-description{
|
||||
max-width: 300px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.bottom-cards{
|
||||
margin-top: 7%;
|
||||
background:linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
|
||||
}
|
||||
.bottom-card-wrapper{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
padding: 0 23% ;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
top: -60px;
|
||||
}
|
||||
.bottom-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 36px 32px 66px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
.bottom-card-image{
|
||||
display: block;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.bottom-card-description{
|
||||
max-width: 368;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width:2500px) {
|
||||
.header-logo{
|
||||
height: 84px;
|
||||
}
|
||||
.page-header{
|
||||
padding: 56px 0
|
||||
}
|
||||
.top-infocard-text{
|
||||
margin-right: 248px;
|
||||
max-width: 52%;
|
||||
}
|
||||
.top-infocard-title{
|
||||
font-size: 96px;
|
||||
}
|
||||
.top-infocard-image{
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
}
|
||||
.top-infocard-description{
|
||||
font-size: 32px;
|
||||
}
|
||||
.top-inforcard-subtitle{
|
||||
font-size: 64px;
|
||||
}
|
||||
.top-card{
|
||||
padding: 52px 52px 72px;
|
||||
box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.top-card-description{
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.top-card-description{
|
||||
max-width: 500px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px){
|
||||
.main-banner-desktop,
|
||||
.middler-banner-desktop {
|
||||
display: none;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.top-infocard-description,
|
||||
.top-card-description{
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (min-width: 415px) {
|
||||
.main-banner-mobile,
|
||||
.middler-banner-mobile{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.top-cards{
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 26px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 993px) and (max-width: 1280px) {
|
||||
.top-infocard-text{
|
||||
margin-right: 70px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 769px) and (max-width: 993px) {
|
||||
.top-cards{
|
||||
grid-template-columns: repeat(2, 1fr)
|
||||
}
|
||||
.bottom-card-wrapper{
|
||||
padding: 0 10%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.top-infocard{
|
||||
@ -117,77 +195,28 @@ body{
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 993px) and (max-width: 1280px) {
|
||||
.top-infocard-text{
|
||||
max-width: 520px;
|
||||
margin-right: 70px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 769px) and (max-width: 1200px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
.top-cards{
|
||||
grid-template-columns: repeat(2, max-content)
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 26px;
|
||||
}
|
||||
.bottom-card-wrapper{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
padding: 0 26px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1920px){
|
||||
.main-banner-desktop,
|
||||
.middler-banner-desktop {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.top-infocard-description,
|
||||
.top-card-description{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:2220px) {
|
||||
.top-inforcard-subtitle{
|
||||
font-size: 64px;
|
||||
}
|
||||
.top-infocard-title{
|
||||
font-size: 96px;
|
||||
}
|
||||
.top-infocard-description{
|
||||
font-size: 32px;
|
||||
}
|
||||
.top-infocard-image{
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width:2900px) {
|
||||
.header-logo{
|
||||
height: 84px;
|
||||
}
|
||||
.page-header{
|
||||
padding: 56px 0
|
||||
.bottom-cards{
|
||||
margin-top: 114px;
|
||||
}
|
||||
.top-infocard-text{
|
||||
margin-right: 248px;
|
||||
max-width: 1000px;
|
||||
max-width: none;
|
||||
}
|
||||
.top-infocard-image{
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
.bottom-card-description{
|
||||
font-size: 14px;
|
||||
}
|
||||
.top-card{
|
||||
padding: 52px 52px 72px;
|
||||
box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.top-card-description{
|
||||
max-width: 800px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.top-card-image{
|
||||
width: 160px;
|
||||
}
|
||||
.top-card-description{
|
||||
max-width: 500px;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
.bottom-card-wrapper {
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
41
index.html
41
index.html
@ -27,7 +27,6 @@
|
||||
<main>
|
||||
<section>
|
||||
<img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png" alt="Main-banner-desktop"/>
|
||||
<img class="main-banner main-banner-mobile" src="./assets/images/Main-banner-mobile.png" alt="Main-banner-mobile"/>
|
||||
</section>
|
||||
|
||||
<section class="top-infocard">
|
||||
@ -61,7 +60,45 @@
|
||||
</section>
|
||||
<section>
|
||||
<img class="middler-banner middler-banner-desktop" src="./assets/images/middle-banner-desktop.png" alt="middler-banner-desktop"/>
|
||||
<img class="middler-banner middler-banner-mobile" src="./assets/images/middle-banner-mobile.png" alt="middler-banner-mobile"/>
|
||||
</section>
|
||||
|
||||
<section class="bottom-cards">
|
||||
<div class="bottom-card-wrapper">
|
||||
<div class="bottom-card">
|
||||
<img class="bottom-card-image" src="./assets/images/bottom-card-1.svg" alt="Primeiro card do fundo"/>
|
||||
|
||||
<p class="bottom-card-description">
|
||||
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 class="bottom-card">
|
||||
<img class="bottom-card-image" src="./assets/images/bottom-card-2.svg" alt="Segundo card do fundo"/>
|
||||
|
||||
<p class="bottom-card-description">
|
||||
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 class="bottom-card">
|
||||
<img class="bottom-card-image" src="./assets/images/bottom-card-3.svg" alt="terceiro card do fundo"/>
|
||||
|
||||
<p class="bottom-card-description">
|
||||
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 class="bottom-card">
|
||||
<img class="bottom-card-image" src="./assets/images/bottom-card-4.svg" alt="Quarto card do fundo"/>
|
||||
|
||||
<p class="bottom-card-description">
|
||||
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>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user