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

feat/challenge-landing-page #1

Merged
PatrickSouzaSilva merged 12 commits from feat/challenge-landing-page into main 2022-10-14 00:44:10 +00:00
Conversation 1 Commits 12 Files Changed 19 +48 -34
2 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3c4549dd71 - Show all commits

33
html/index.html
View File

@ -33,6 +33,7 @@
</header> </header>
<main> <main>
<section> <section>
<figure> <figure>
<img class="main-banner main-banner-desktop" src="/assents/assents-img/banner-01.png" alt="Banner Principal"> <img class="main-banner main-banner-desktop" src="/assents/assents-img/banner-01.png" alt="Banner Principal">
@ -43,6 +44,7 @@
alt="Banner Principal"> alt="Banner Principal">
</figure> </figure>
</section> </section>
<section class="top-infocard"> <section class="top-infocard">
@ -101,29 +103,30 @@
<section class="infocard-img-section"> <section class="infocard-img-section">
<div class="container">
<div class="infocard-center">
<div class="infocards-center">
<figure>
<img class="middle-banner" src="/assents/assents-img/banner-center-desk01.png"
alt="imagem de notbook aberto">
</figure>
<figure>
<img class="middle-banner" src="/assents/assents-img/banner-center-desk02.png"
alt="imagem de notbook aberto">
</figure>
</div>
<div class="infocard-center">
<div class="infocards-center">
<figure> <figure>
<img class="middle-banner" src="/assents/assents-img/banner-center-desk01.png"
alt="imagem de notbook aberto"> <img class="middle-banner" src="/assents/assents-img/banner-center-desk03.png"
</figure>
<figure>
<img class="middle-banner" src="/assents/assents-img/banner-center-desk02.png"
alt="imagem de notbook aberto"> alt="imagem de notbook aberto">
</figure> </figure>
</div> </div>
<figure>
<img class="middle-banner" src="/assents/assents-img/banner-center-desk03.png" alt="imagem de notbook aberto">
</figure>
</div> </div>
</section> </section>
<section class="bottom-cards"> <section class="bottom-cards">

45
html/main.styles/style.css
View File

@ -5,6 +5,13 @@
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
color: #000000; color: #000000;
} }
.container {
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 0 72px;
}
/*///////////// HEADER /////////////////// */ /*///////////// HEADER /////////////////// */
.page-header { .page-header {
background: #000000; background: #000000;
@ -19,23 +26,13 @@
/*///////////// SECTION 01 e 02 com banner /////////////////// */ /*///////////// SECTION 01 e 02 com banner /////////////////// */
.main-banner,
.middle-banner {
display: block;
width: 100%;
}
.main-banner-mobile,
.middle-banner-mobile {
display: none;
}
/*///////////// SECTION 02 INFO CARD TOP ///////////////////*/ /*///////////// SECTION 02 INFO CARD TOP ///////////////////*/
.top-infocard { .top-infocard {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 75px 30px 179px; padding: 75px 30px 179px;
flex-direction: column; flex-direction: column;
@ -44,7 +41,6 @@
.top-infocard-text { .top-infocard-text {
max-width: 766px; max-width: 766px;
} }
.top-infocard-subtitle { .top-infocard-subtitle {
@ -62,7 +58,6 @@
margin-bottom: 24px; margin-bottom: 24px;
text-transform: uppercase; text-transform: uppercase;
} }
.top-infocard-description { .top-infocard-description {
@ -73,11 +68,27 @@
} }
/*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/ /*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/
.infocard-img-section { .infocard-img-section {
background: #E0E0E0; background: #e0e0e0;
padding-top: 62px;
} }
.infocards-center{
display: flex;
gap: 40px;
}
.infocard-center {
display: flex;
gap: 40px;
}
.middle-banner{
margin-bottom: -62px;
}
/*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/ /*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/
.top-cards { .top-cards {
@ -88,7 +99,7 @@
gap: 20px; gap: 20px;
justify-content: center; justify-content: center;
padding-bottom: 80px;
} }
.top-card { .top-card {
@ -100,6 +111,8 @@
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);
} }
.top-card-image { .top-card-image {
@ -114,8 +127,6 @@
font-size: 16px; font-size: 16px;
} }
/*/////////// Bottom Area com imagens e background//////////////*/ /*/////////// Bottom Area com imagens e background//////////////*/
.bottom-cards { .bottom-cards {