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

Adiciona cards do topo

Browse Source
This commit is contained in:
carloswinter 2022-10-08 23:16:52 -03:00
parent 03145a3f0c
commit 98828ee4ec
5 changed files with 70 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/img/topcard1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 965 B

BIN
assets/images/img/topcard2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
assets/images/img/topcard3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

46
assets/styles/main.css
View File

@ -60,9 +60,29 @@ body{
}
.topinfo-img{
margin-top:70px;
}
.topcards{
margin: 0 25%;
}
.topcards-wrapper{
margin-top: 178px;
margin-bottom: 80px;
display: flex;
justify-content: center;
gap:21px;
}
.topcard{
padding: 46px 26px 27px;
text-align: center;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.topcard-text{
min-width: 300px;
margin-top: 38px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
@media screen and (max-width: 1439px){
.topinfo-texts{
@ -92,6 +112,20 @@ body{
.topinfo-img{
width: 75%;
}
.topcards{
margin: 0 10%;
}
.topcards-wrapper{
margin-top: 90px;
margin-bottom: 80px;
flex-direction:column;
gap:24px;
}
.topcard-text{
min-width: 0;
}
}
@media screen and (min-width: 2500px){
.topinfo-subtitle{
@ -117,7 +151,13 @@ body{
text-align: center;
}
.topinfo-img{
width: 20%;
width: 13%;
}
.topcard-text{
font-weight: 400;
font-size: 32px;
line-height: 48px;
}
}

30
index.html
View File

@ -24,14 +24,38 @@
</section>
<section class="topinfo">
<div class="topinfo-texts">
<h2 class="topinfo-subtitle">Lorem ipsum</h2>
<h1 class="topinfo-title">dolor sit amet</h1>
<p class="topinfo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
<article>
<h2 class="topinfo-subtitle">Lorem ipsum</h2>
<h1 class="topinfo-title">dolor sit amet</h1>
<p class="topinfo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
</article>
</div>
<figure class="figuretopinfo">
<img src="./assets/images/img/topinfopcs.png" class="topinfo-img" alt="Imagem do topo">
</figure>
</section>
<section class="topcards">
<div class="topcards-wrapper">
<div class="topcard">
<figure>
<img src="./assets/images/img/topcard1.png" alt="Primeira imagem dos cards">
<figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</div>
<div class="topcard">
<figure>
<img src="./assets/images/img/topcard2.png" alt="Segunda imagem dos cards">
<figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</div>
<div class="topcard">
<figure>
<img src="./assets/images/img/topcard3.png" alt="Terceira imagem dos cards">
<figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</div>
</div>
</section>
</body>
</html>