JoseGregorioMataRodriguez/desafio-landing-page-josegmatar
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature-landingpage #1

Merged
JoseGregorioMataRodriguez merged 10 commits from feature-landingpage into main 2022-10-14 02:26:00 +00:00
Conversation 0 Commits 10 Files Changed 21 +71 -73
2 changed files with 71 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 57cffb730a - Show all commits

104
assets/styles/main.css
View File

@ -70,7 +70,7 @@ body {
padding-bottom: 65px; padding-bottom: 65px;
} }
.cards{ .cards {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
} }
@ -155,60 +155,41 @@ body {
width: 100%; width: 100%;
} }
.page-footer { .bottom-infocard {
display: flex;
justify-content: center;
background: #000000;
height: 128px;
}
.footer-logo {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
gap: 0;
margin-top: 20px;
}
.footerlogo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
padding-top: 108px;
} }
.footer-text { .bottom-infocard-text {
text-align: center;
max-width: 766px ;
font-weight: 400; font-weight: 400;
font-size: 10px; ;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
margin-top: 79px;
} }
.bottom-infocard-title {
font-weight: 600;
font-size: 32px;
line-height: 38.73px;
text-align: center ;
}
.bottom-infocard-desc {
/* text-align: center;
display: grid; font-size: 16px;
grid-template-columns: (auto auto auto); line-height: 24px;
grid-template-rows: auto; font-weight: 400;
gap: 19px; padding-top: 1px;
}
.bottom-infocard-image {
padding-top: 50px;
align-self: center;
width: 100%; width: 100%;
grid-template-areas: "foto1 foto2 foto3";
width: 88%;
*/
/*.banners {
display: grid;
grid-template-areas: "foto1 foto2 foto3";
width: 90%;
gap: 39px;
} }
.banner {
width: 33%;
}*/
/*-----------Breakpoints-----------*/ /*-----------Breakpoints-----------*/
@ -274,34 +255,37 @@ body {
.bottom-cards { .bottom-cards {
grid-template-columns: repeat(2, max-content); grid-template-columns: repeat(2, max-content);
} }
.middle-banners {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
grid-template-columns: auto;
align-content: stretch;
row-gap: 39px;
}
.banner3 {
grid-column: span 2;
}
} }
@media screen and (max-width: 1199px) { @media screen and (max-width: 1199px) {
.middle-banners { .middle-banners {
grid-template-columns: repeat(2, 1fr); width: 100%;
grid-template-rows: repeat(2, auto); grid-template-columns: repeat(2, max-content);
grid-template-rows: (2, max-content);
grid-template-columns: auto; grid-template-columns: auto;
align-content: stretch;
row-gap: 39px; row-gap: 39px;
padding: 0 23px;
direction: rtl;
} }
.banner {
width: 100%;
padding: 32px 0;
}
.banner3 { .banner3 {
grid-column: span 2; grid-column: span 2;
} }
.bottom-infocard-image-desktop {
display: none;
}
}
@media screen and (min-width: 1200px) {
.bottom-infocard-image-mobile {
display: none;
}
} }

40
landingpage.html
View File

@ -64,18 +64,16 @@
</section> </section>
<!--<div class="middle-banners">--> <div class="middle-banners stretch">
<div class="middle-banners stretch"> <div class="banners banner1">
<div class="banners banner1"> <img class="foto" src="./assets/images/mid-banner01.png" alt="Banner Middle 1" />
<img class="foto" src="./assets/images/mid-banner01.png" alt="Banner Middle 1" /> </div>
</div> <div class="banners banner2">
<div class="banners banner2"> <img class="foto" src="./assets/images/mid-banner02.png" alt="Banner Middle 2" />
<img class="foto" src="./assets/images/mid-banner02.png" alt="Banner Middle 2" /> </div>
</div> <div class="banners banner3">
<div class="banners banner3"> <img class="foto" src="./assets/images/mid-banner03.png" alt="Banner Middle 3" />
<img class="foto" src="./assets/images/mid-banner03.png" alt="Banner Middle 3" /> </div>
</div>
<!-- </div> -->
</div> </div>
@ -102,7 +100,23 @@
</section> </section>
<section class="bottom-infocard">
<div class="bottom-infocard-text">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-desc">
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>
<img class="bottom-infocard-image-desktop bottom-infocard-image" src="./assets/images/bottom-banner-desktop.png" alt="Banner Bottom Desktop" />
<img class="bottom-infocard-image-mobile bottom-infocard-image" src="./assets/images/bottom-banner-mobile.png" alt="Banner Bottom Mobile" />
</section>