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

adicionado segundo infor-texto e banner final

Browse Source
This commit is contained in:
Ueber James Santos 2022-10-10 01:39:09 -03:00
parent f823f74d4c
commit 3aaeb5645e
3 changed files with 99 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
index.html
View File

@ -110,44 +110,77 @@
</div>
</div>
<!-- second-card -->
<section class="descricao-container">
<div class="second-cards">
<figure class="second-card">
<img class="second-card-img" src="/src/img/second-card1.png" alt="" />
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="second-card">
<img class="second-card-img" src="/src/img/second-card2.png" alt="" />
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="second-card">
<img class="second-card-img" src="/src/img/second-card3.png" alt="" />
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<!-- second-card -->
<section class="descricao-container">
<div class="second-cards">
<figure class="second-card">
<img class="second-card-img" src="/src/img/second-card4.png" alt="" />
<img
class="second-card-img"
src="/src/img/second-card1.png"
alt=""
/>
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="second-card">
<img
class="second-card-img"
src="/src/img/second-card2.png"
alt=""
/>
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="second-card">
<img
class="second-card-img"
src="/src/img/second-card3.png"
alt=""
/>
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="second-card">
<img
class="second-card-img"
src="/src/img/second-card4.png"
alt=""
/>
<figcaption class="top-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</div>
</section>
<div class="second-texto-inforcard">
<h1>Lorem ipsum dolor sit amet</h1>
<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. Donec finibus turpis vitae lectus interdum rutrum vitae
sed augue.
</p>
</div>
<div>
<figure>
<img
src="/src/img/second-banner-final.png"
alt=""
/>
</div>
</section>
</main>
</body>
</html>

BIN
src/img/second-banner-final.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 KiB

66
src/style/style.css
View File

@ -9,6 +9,8 @@
body {
font-family: "Inter", sans-serif;
color: #000000;
display: inline-block;
overflow-x: hidden;
}
/* header-logo */
.page-header {
@ -33,7 +35,8 @@ body {
/* inforcar principal */
.descricao-container,
.texto-inforcard {
.texto-inforcard,
.second-texto-inforcard {
display: flex;
flex-direction: column;
align-content: center;
@ -46,33 +49,34 @@ body {
}
.texto-inforcard {
width: 50%;
width: 42%;
}
.texto-inforcard h2 {
font-size: 32px;
font-weight: 400;
}
.texto-inforcard h1 {
.texto-inforcard h1
{
font-size: 48px;
font-weight: 500;
}
.top-card-text,
.texto-inforcard p {
font-size: 16px;
font-weight: 400;
padding: 25px 0;
}
.top-cards
{
.top-cards {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 21px;
background: #f0f0f0;
}
.top-card
{
.top-card {
display: flex;
flex-direction: column;
align-items: center;
@ -94,15 +98,12 @@ body {
/* Container Middle banner */
.mini-banner {
margin-bottom: 130px;
background: #e0e0e0;
width: 100%;
}
.middle-img,
.middle-mini-img {
display: block;
@ -124,17 +125,15 @@ body {
}
/* second-card */
.second-cards{
.second-cards {
display: grid;
grid-template-columns: repeat(4, max-content);
gap: 16px;
background: #f0f0f0;
}
.second-card{
display: flex;
.second-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 65px 65px 60px;
@ -142,6 +141,24 @@ display: flex;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.second-texto-inforcard {
width: 32%;
margin: 60px 0;
}
.second-texto-inforcard h1{
font-size: 32px;
font-weight: 500;
}
.second-texto-inforcard p{
font-size: 16px;
font-weight: 400;
}
@media screen and (max-width: 1024px) {
.descktop-banner,
.middle-img {
@ -153,9 +170,10 @@ display: flex;
}
.top-cards,
.texto-inforcard {
.texto-inforcard,
.second-cards {
grid-template-columns: 1fr;
margin: 0 32px;
margin: 0 26;
}
.texto-inforcard h2 {
@ -166,18 +184,12 @@ display: flex;
font-size: 28px;
}
.texto-inforcard
{
.texto-inforcard {
width: 70%;
}
.top-card-text,
.texto-inforcard p{
.texto-inforcard p {
font-size: 18px;
}
.middle-card {
@ -192,10 +204,6 @@ display: flex;
display: flex;
align-items: center;
}
}
@media screen and (min-width: 1025px) {