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: ajuste na imagem central

Browse Source
This commit is contained in:
PATRICK DE SOUZA SILVA 2022-10-12 17:44:45 -03:00
parent b827a02494
commit 3c4549dd71
2 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
html/index.html
View File

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

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

@ -5,6 +5,13 @@
font-family: 'Inter', sans-serif;
color: #000000;
}
.container {
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding: 0 72px;
}
/*///////////// HEADER /////////////////// */
.page-header {
background: #000000;
@ -19,23 +26,13 @@
/*///////////// 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 ///////////////////*/
.top-infocard {
display: flex;
align-items: center;
padding: 75px 30px 179px;
flex-direction: column;
@ -44,7 +41,6 @@
.top-infocard-text {
max-width: 766px;
}
.top-infocard-subtitle {
@ -62,7 +58,6 @@
margin-bottom: 24px;
text-transform: uppercase;
}
.top-infocard-description {
@ -73,22 +68,38 @@
}
/*///////////////////AREA DO TOP CARDS COM 3 IMAGENS ///////////////*/
.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 ///////////////*/
.top-cards {
background: #ffffff;
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
padding-bottom: 80px;
}
.top-card {
@ -100,6 +111,8 @@
background: #ffffff;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.top-card-image {
@ -114,8 +127,6 @@
font-size: 16px;
}
/*/////////// Bottom Area com imagens e background//////////////*/
.bottom-cards {