Adiciona mais infocards em sequência
This commit is contained in:
parent
eeacfdde72
commit
2853ca8119
BIN
assets/img/Group.png
Normal file
BIN
assets/img/Group.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/img/laptop 1.png
Normal file
BIN
assets/img/laptop 1.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/img/money (1) 2.png
Normal file
BIN
assets/img/money (1) 2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.3 KiB |
131
index.html
131
index.html
@ -43,53 +43,92 @@
|
||||
<img class="info_image" src="./assets/img/fxemoji_threenetworkedcomputers.svg" alt="">
|
||||
</picture>
|
||||
</section>
|
||||
|
||||
<article class="container">
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img class="img_card" src="./assets/img/img_container_1.png" alt="card_decoration 1">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img src="./assets/img/img_container_2.png" alt="card decoration 2">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img src="./assets/img/img_container_3.png" alt="card decoration 3">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="second_container">
|
||||
|
||||
<picture>
|
||||
<img class="preview_img" src="./assets/img/preview_1.png" alt="preview 1">
|
||||
</picture>
|
||||
<picture>
|
||||
<img class="preview_img" src="./assets/img/preview_2.png" alt="preview 2">
|
||||
</picture>
|
||||
|
||||
<picture>
|
||||
<img class="preview_img preview_solo" src="./assets/img/preview_3.png" alt="preview 3">
|
||||
</picture>
|
||||
|
||||
</article>
|
||||
|
||||
</main>
|
||||
<article class="container">
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img class="img_card" src="./assets/img/img_container_1.png" alt="card_decoration 1">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img src="./assets/img/img_container_2.png" alt="card decoration 2">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img src="./assets/img/img_container_3.png" alt="card decoration 3">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="second_container">
|
||||
|
||||
<picture>
|
||||
<img class="preview_img" src="./assets/img/preview_1.png" alt="preview 1">
|
||||
</picture>
|
||||
<picture>
|
||||
<img class="preview_img" src="./assets/img/preview_2.png" alt="preview 2">
|
||||
</picture>
|
||||
|
||||
<picture>
|
||||
<img class="preview_img preview_solo" src="./assets/img/preview_3.png" alt="preview 3">
|
||||
</picture>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<article class="container">
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img class="img_card" src="./assets/img/money (1) 2.png" alt="card_decoration 1">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img class="img_card" src="./assets/img/img_container_3.png" alt="card_decoration 1">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img src="./assets/img/laptop 1.png" alt="card decoration 2">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
<div class="card">
|
||||
<picture>
|
||||
<img src="./assets/img/Group.png" alt="card decoration 3">
|
||||
<p class="card_paragraph">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||
interdum.
|
||||
</p>
|
||||
</picture>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</body>
|
||||
|
||||
|
44
style.css
44
style.css
@ -86,11 +86,12 @@ body {
|
||||
|
||||
.second_container {
|
||||
padding: 3rem;
|
||||
max-height: 420px;
|
||||
height: 420px;
|
||||
background-color: #E0E0E0;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.preview_img {
|
||||
@ -98,6 +99,7 @@ body {
|
||||
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
|
||||
@media screen and (max-width: 413px) {
|
||||
.primary_banner {
|
||||
@ -118,6 +120,7 @@ body {
|
||||
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
@media screen and (min-width:414px) {
|
||||
.banner_mobile {
|
||||
display: none;
|
||||
@ -132,6 +135,7 @@ body {
|
||||
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
@media screen and (max-width:1120px) {
|
||||
.container {
|
||||
display: flex;
|
||||
@ -145,4 +149,42 @@ body {
|
||||
width: 350px;
|
||||
margin: 0 32px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/*----------------------------------------------------------------------------*/
|
||||
@media screen and (min-width:2199px) {
|
||||
.second_container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 680px;
|
||||
}
|
||||
|
||||
.preview_img {
|
||||
width: 100%;
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
.info_subtitle {
|
||||
margin-top: 76px;
|
||||
font-weight: 400;
|
||||
font-size: 56px;
|
||||
line-height: 39px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.info_title {
|
||||
font-weight: 500;
|
||||
font-size: 64px;
|
||||
line-height: 58px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.info_description {
|
||||
font-weight: 400;
|
||||
font-size: 44px;
|
||||
line-height: 56px;
|
||||
margin-top: 76px;
|
||||
margin-bottom: 76px;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user