anacarolinaduartecavalcante/practice-time-landing-page-Ana_Carolina_Duarte_Cavalcante
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

correção de responsividade

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-10-08 08:18:59 -03:00
parent 5a4e40b61a
commit 00a03246a2
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
css/layout/main.css
View File

@ -30,9 +30,11 @@
max-width: 1092px; max-width: 1092px;
width: 100%; width: 100%;
height: 435px; height: 435px;
display: flex; display: grid;
justify-content: space-around; grid-template-columns: repeat(3, 1fr);
justify-content: center;
align-items: center; align-items: center;
gap: 20px;
position: relative; position: relative;
margin: auto; margin: auto;
} }
@ -49,7 +51,6 @@
max-width: 350.33px; max-width: 350.33px;
height: 100%; height: 100%;
max-height: 287.95px; max-height: 287.95px;
/* padding: 26px; */
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);
display: flex; display: flex;
@ -57,12 +58,15 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin: 0px auto; margin: 0px auto;
padding: 27px;
} }
.first-card p, .second-card p, .three-card p { .first-card p, .second-card p, .three-card p {
width: 299px; max-width: 299px;
width: 100%;
height: 100%;
text-align: center; text-align: center;
margin: 27px 0; margin-top: 14px;
} }
.banner-desktop, .banner-mobile { .banner-desktop, .banner-mobile {
@ -107,7 +111,6 @@
width: 367px; width: 367px;
text-align: center; text-align: center;
margin-top: 14px; margin-top: 14px;
margin-bottom: 66px;
} }
.content-text-final { .content-text-final {
@ -185,9 +188,9 @@
.content-card-container { .content-card-container {
width: 100%; width: 100%;
height: 894px; height: 894px;
flex-direction: column; grid-template-columns: repeat(1, 1fr);
justify-content: space-around; justify-content: space-around;
margin: 0 30px;
} }
.banner-desktop { .banner-desktop {
@ -204,8 +207,9 @@
width: 100%; width: 100%;
max-width: 368px; max-width: 368px;
height: 100%; height: 100%;
max-height: 332px; min-height: 332px;
padding: 32px; padding: 32px;
} }
@ -218,18 +222,23 @@
width: 100%; width: 100%;
max-width: 367px; max-width: 367px;
height: 100%; height: 100%;
margin: 14px auto; margin-top: 14px;
} }
.grid-container { .grid-container {
width: 100%; width: 100%;
height: 1394px; height: 100%;
min-height: 1394px;
} }
.content-text-final { .content-text-final {
flex-direction: column; flex-direction: column;
} }
.text-final-container {
padding: 0 14px;
}
.content-text-final img { .content-text-final img {
width: 100%; width: 100%;
max-width: 414px; max-width: 414px;

2
index.html
View File

@ -81,7 +81,7 @@
</section> </section>
<section class="content-text-final"> <section class="content-text-final">
<img src="./assets/img/Rectangle 15.png"> <img src="./assets/img/Rectangle 15.png">
<div> <div class="text-final-container">
<h3>Lorem ipsum dolor sit amet</h3> <h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. <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. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.