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

fix: fix all responsive mobile

Browse Source
This commit is contained in:
Marcello Rodrigues Martins 2022-10-13 13:36:15 -03:00
parent 27d47b6df9
commit ee13461699
3 changed files with 497 additions and 445 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/glass-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

6
index.html
View File

@ -6,6 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap" rel="stylesheet">
<title>M3academy</title>
</head>
@ -91,6 +94,9 @@
</p>
</div>
</section>
<section class="section-glass-mobile">
<img src="./assets/images/glass-mobile.png" alt="glasses on laptop">
</section>
<section class="text-2-section">
<div class="text-2">
<h2>Lorem ipsum dolor sit amet</h2>

68
styles/styles.css
View File

@ -14,7 +14,6 @@ header {
body {
font-family: 'Inter', sans-serif;
color: #000000;
}
.banner-1-desktop {
@ -124,11 +123,7 @@ body {
.midle-card-section img {
flex-direction: row;
max-width: 50vmin;
}
.midle-card-section > img {
max-width: 50vmin;
max-width: 28.5vw;
}
.section-cards-second {
@ -142,7 +137,7 @@ body {
.image-card-second {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
max-width: 432px;
max-height: 332px;
min-height: 332px;
display: flex;
flex-direction: column;
justify-content: center;
@ -150,6 +145,10 @@ body {
margin-top: 162px;
}
.image-card-second p {
max-width: 90%;
}
.image-card-image-second {
display: block;
margin-top: 36px;
@ -187,7 +186,7 @@ body {
}
.text-2-section {
margin-top: 118px;
margin-top: 108px;
display: flex;
justify-content: center;
align-items: center;
@ -236,6 +235,15 @@ body {
color: #BDBDBD;
}
.section-glass-mobile {
display: none;
}
.section-glass-mobile img {
width: 100%;
margin-top: 98px;
}
@media screen and (max-width: 1024px) {
.banner-1-desktop {
display: none;
@ -277,18 +285,20 @@ body {
}
.midle-card-div {
padding: 0 20px;
width: 100%;
flex-direction: row-reverse;
gap: 14px;
justify-content: center;
}
.midle-card-div img {
max-width: 54.2%;
width: calc(50% - 7px);
max-width: unset;
}
.midle-card-section > img {
max-width: 100%;
width: 100%;
max-width: unset;
}
.section-cards-second {
@ -302,6 +312,14 @@ body {
padding: 10px;
}
.image-card-image-second {
margin-top: 0;
}
.image-card-second p {
width: 302px;
}
.image-card-second {
max-width: 84.54%;
padding-top: 35px;
@ -314,4 +332,32 @@ body {
padding-top: 35px;
padding-bottom: 27px;
}
.footer-image-section {
display: none;
}
.footer-paragraph {
max-width: 62.8%;
text-align: center;
}
.section-glass-mobile {
display: unset;
}
.text-2 {
display: flex;
flex-direction: column;
width: 84.54%;
}
.text-2 h2 {
font-size: 24px;
}
.text-2-section {
margin-top: 50px;
}
}