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

refactor: ajustando tamanho das imagens

Browse Source
This commit is contained in:
Caroline Moran 2022-10-13 08:27:09 -04:00
parent dbc4285130
commit 779504263c
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/Coin.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

10
src/landingPage.html
View File

@ -10,13 +10,13 @@
<body>
<!-- Cabecalho -->
<header>
<figure class="logo-container">
<a href="/" class="logo-container">
<img
src="./assets/svgs/Logo-M3Academy.svg"
alt="Logo M3 Academy"
class="logo"
/>
</figure>
</a>
</header>
<!-- Corpo do site -->
<main>
@ -147,7 +147,11 @@
</figcaption>
</figure>
<figure class="card">
<img src="./assets/Phone.png" alt="figura pagar" class="card-image" />
<img
src="./assets/Phone.png"
alt="figura pagar"
class="card-image card-image-phone"
/>
<figcaption class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,

15
src/style/landingPage.css
View File

@ -50,7 +50,7 @@
gap: 65px;
}
.texto-container {
max-width: 50%;
max-width: 40%;
}
.texto-container h1 {
font-weight: 500;
@ -72,7 +72,7 @@
margin-top: 28px;
}
.image-descricao {
width: 20%;
width: 17%;
}
/* Primeiro container de cards */
.cards-container {
@ -86,7 +86,7 @@
justify-content: center;
}
.card {
width: 20%;
width: 18%;
height: auto;
min-height: 287px;
background: #ffffff;
@ -141,10 +141,15 @@
.cards2-container .card {
width: 25%;
min-height: 332px;
gap: 15px;
padding: 35px 32px 65px;
}
.cards2-container .card .card-image {
width: 25%;
}
.cards2-container .card .card-image.card-image-phone {
width: 20%;
}
/* Artigo de finalizacão */
.image-descricao-final-mobile {
display: none;
@ -152,7 +157,7 @@
}
.image-descricao-final-desktop {
display: block;
width: 70%;
width: 71%;
}
.image-descricao-final {
width: 100%;
@ -166,7 +171,7 @@
padding-bottom: 116px;
}
.texto-final-container {
width: 33%;
width: 29%;
display: flex;
flex-direction: column;
align-items: center;