HenriqueSantosSantana/challenge-landing-page-henrique-santos-santana
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: created blog section and responsive

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-10-09 17:09:30 -03:00
parent c9a9e417a7
commit af5c315a17
2 changed files with 100 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
assets/css/main.css
View File

@ -226,6 +226,60 @@
}
}
/*------*\
= BLOG =
\*------*/
.blog {
width: 100%;
}
.blog-images-image {
width: 100%;
margin-bottom: 50px;
}
.blog-article {
padding: 0 24px;
}
.blog-title {
font-weight: 500;
font-size: 24px;
}
@media screen and (min-width: 1025px) {
.blog {
padding-bottom: 116px;
}
.blog-title {
font-size: 32px;
}
.blog-images-image {
margin: 0;
}
.blog .flex-box[data-type="reversed"] {
flex-direction: column;
}
.blog-article {
width: 28%;
margin: 0 auto;
margin-bottom: 50px;
}
.blog-description {
line-height: 24px;
}
.blog-images {
width: 71%;
height: auto;
margin: 0 auto;
}
}
/*CUBE CSS styles*/
@ -246,6 +300,10 @@
gap: var(--hs-flex-space);
}
.flex-box[data-type="reversed"] {
flex-direction: column-reverse;
}
/*-------*\
= UTILS =
\*-------*/

45
index.html
View File

@ -122,7 +122,11 @@
</figcaption>
</figure>
<figure class="card flow box-shadow">
<img class="card-image" src="./assets/images/handle-coin.svg" alt="Mão estendida com uma moeda" />
<img
class="card-image"
src="./assets/images/handle-coin.svg"
alt="Mão estendida com uma moeda"
/>
<figcaption class="card-description text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
@ -130,7 +134,11 @@
</figcaption>
</figure>
<figure class="card flow box-shadow">
<img class="card-image" src="./assets/images/laptop.svg" alt="Um laptop aberto em umas de suas páginas do seu ecommerce" />
<img
class="card-image"
src="./assets/images/laptop.svg"
alt="Um laptop aberto em umas de suas páginas do seu ecommerce"
/>
<figcaption class="card-description text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
@ -138,7 +146,11 @@
</figcaption>
</figure>
<figure class="card flow box-shadow">
<img class="card-image" src="./assets/images/phone-notificated.svg" alt="Um celular que contém suas notificações" />
<img
class="card-image"
src="./assets/images/phone-notificated.svg"
alt="Um celular que contém suas notificações"
/>
<figcaption class="card-description text-center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
@ -150,6 +162,33 @@
<!--=============== Blog ===============-->
<section class="blog">
<div class="blog-container flex-box" data-type="reversed">
<article class="blog-article flow">
<h2 class="blog-title text-center">Lorem ipsum dolor sit amet</h2>
<p class="blog-description text-center">
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>
</article>
<figure class="blog-images">
<img
class="blog-images-image image-desktop"
src="./assets/images/blog-desktop.jpg"
alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
/>
<img
class="blog-images-image image-mobile"
src="./assets/images/blog-mobile.jpg"
alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
/>
</figure>
</div>
</section>
<!--=============== Footer ===============-->
</body>
</html>