forked from M3-Academy/challenge-landing-page
develop #7
@ -1,3 +1,4 @@
|
|||||||
|
/* Reset */
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -21,14 +22,16 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top-banner-image-desktop,
|
.top-banner-image-desktop,
|
||||||
.top-banner-image-mobile {
|
.top-banner-image-mobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.infocard {
|
.infocard {
|
||||||
margin: 73px 25%;
|
margin: 73px 25%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard-title {
|
.infocard-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -61,22 +64,20 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pc-icon-image {
|
.pc-icon-image {
|
||||||
width: 315px;
|
width: 100%;
|
||||||
|
max-width: 315px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-wrapper {
|
.cards-wrapper {
|
||||||
display: grid;
|
gap: 16px;
|
||||||
grid-template-columns: repeat(3, max-content);
|
|
||||||
gap: 21px;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 179px;
|
|
||||||
padding-bottom: 74px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
margin: 129px 72px 74px 72px;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 26px 28px;
|
padding: 0 26px 28px;
|
||||||
@ -88,6 +89,7 @@ body {
|
|||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-description {
|
.card-description {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -96,45 +98,50 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.fig-container {
|
.fig-container {
|
||||||
background-color: #E0E0E0;
|
display: flex;
|
||||||
|
background-color: #E0E0E0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fig-wrapper {
|
.figure-wrapper {
|
||||||
height: 530px;
|
margin-left: 72px;
|
||||||
display: flex;
|
margin-right: 72px;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 39px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fig-image {
|
.fig-image {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 566px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-img {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
width: 29%;
|
.flex {
|
||||||
|
/* background-color: #E0E0E0; */
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
max-width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex > div {
|
||||||
|
flex: 1 1 566px;
|
||||||
|
margin: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* bloco 4 cards */
|
||||||
|
.cards-wrapper2 {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.cards-wrapper2 {
|
|
||||||
|
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 179px 72px 74px 72px;
|
margin: 129px 72px 74px 72px;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card2 {
|
.card2 {
|
||||||
|
max-width: 350px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 26px 28px;
|
padding: 0 26px 28px;
|
||||||
@ -154,8 +161,10 @@ gap: 39px;
|
|||||||
margin-top: 27px;
|
margin-top: 27px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* bloco Article */
|
||||||
.article {
|
.article {
|
||||||
margin-top: 108px;
|
margin-top: 108px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-title {
|
.article-title {
|
||||||
@ -171,26 +180,28 @@ gap: 39px;
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin: 0 auto 50px auto;
|
margin: 0 auto 50px auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* bloco bottom banner */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.bottom-banner {
|
.bottom-banner {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-banner-image-desktop,
|
.bottom-banner-desktop {
|
||||||
.bottom-banner-image-mobile {
|
max-width: 1360px;
|
||||||
|
width: 71%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-banner-mobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* bloco footer */
|
||||||
.page-footer {
|
.page-footer {
|
||||||
margin-top: 116px;
|
margin-top: 116px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -206,7 +217,6 @@ gap: 39px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer-text {
|
.footer-text {
|
||||||
color: #ffffff;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 17px 0 38px;
|
margin: 17px 0 38px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
@ -221,164 +231,308 @@ gap: 39px;
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 414px) {
|
@media screen and (max-width: 414px) {
|
||||||
.top-banner-image-desktop,
|
.top-banner-image-desktop,
|
||||||
.bottom-banner-desktop {
|
.bottom-banner-desktop {
|
||||||
display: none;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-reverse {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infocard-subtitle {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infocard-title {
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infocard-description {
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infocard {
|
||||||
|
margin: 73px 27px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-wrapper {
|
||||||
|
display: block;
|
||||||
|
margin: 90px 32px 80px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 350px;
|
||||||
|
margin-top: 16px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-icon-image {
|
||||||
|
max-width: 239px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-wrapper2 {
|
||||||
|
display: block;
|
||||||
|
margin: 80px 0 98px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2 {
|
||||||
|
width: 350px;
|
||||||
|
margin: 7% 0 0 6%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-description {
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 0 auto;
|
||||||
|
margin: 0 32px 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-footer {
|
||||||
|
margin-top: 87px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-text {
|
||||||
|
max-width: 261px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* imagens pequenas e invertidas grid */
|
||||||
|
.img-small1 {
|
||||||
|
grid-area: foto1;
|
||||||
|
}
|
||||||
|
.img-small2 {
|
||||||
|
grid-area: foto2;
|
||||||
|
}
|
||||||
|
.img-big3 {
|
||||||
|
grid-area: foto3;
|
||||||
|
width: 368px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid2 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto ;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
direction: rtl;
|
||||||
|
grid-template-areas:
|
||||||
|
"foto2 foto1"
|
||||||
|
"foto3 foto3"
|
||||||
|
;}
|
||||||
|
|
||||||
|
.img-small1 {
|
||||||
|
grid-area: foto1;
|
||||||
|
}
|
||||||
|
.img-small2 {
|
||||||
|
grid-area: foto2;
|
||||||
|
}
|
||||||
|
.img-big3 {
|
||||||
|
grid-area: foto3;
|
||||||
|
width: 368px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
background-color: #E0E0E0;
|
||||||
|
height: 574px;
|
||||||
|
margin-bottom: 112px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Tablet e Mobile - 415px to 1024px */
|
||||||
|
@media only screen and (min-device-width: 415px) and (max-device-width: 1024px){
|
||||||
|
.top-banner-image-mobile,
|
||||||
|
.bottom-banner-mobile {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard {
|
|
||||||
margin: 73px 6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infocard-subtitle {
|
.infocard-subtitle {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard-title {
|
.infocard-title {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
line-height: 34px;
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard-description {
|
.infocard-description {
|
||||||
padding-top: 19px;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc-icon {
|
.infocard {
|
||||||
margin-top: 65px 0 91px;
|
margin: 73px 27px 0;
|
||||||
}
|
|
||||||
|
|
||||||
.pc-icon-image {
|
|
||||||
width: 58%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-wrapper {
|
.cards-wrapper {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
margin: 90px 32px 80px 32px;
|
||||||
align-items: center;
|
|
||||||
padding-top: 91px;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
padding: 35px 26px 28px;
|
width: 350px;
|
||||||
background: #ffffff;
|
margin-top: 16px;
|
||||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-description {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
margin-top: 27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.imageblock-wrapper {
|
|
||||||
background-color: #e0e0e0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imageblock-image {
|
.pc-icon-image {
|
||||||
|
max-width: 239px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.cards-wrapper2 {
|
||||||
|
display: grid;
|
||||||
|
margin: 80px 0 98px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card2 {
|
||||||
|
width: 350px;
|
||||||
|
margin: 7% 0 0 6%;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-description {
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 0 auto;
|
||||||
|
margin: 0 32px 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-footer {
|
||||||
|
margin-top: 87px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-text {
|
||||||
|
max-width: 261px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* imagens pequenas e invertidas grid */
|
||||||
|
.img-small1 {
|
||||||
|
grid-area: foto1;
|
||||||
|
}
|
||||||
|
.img-small2 {
|
||||||
|
grid-area: foto2;
|
||||||
|
}
|
||||||
|
.img-big3 {
|
||||||
|
grid-area: foto3;
|
||||||
|
width: 368px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid2 {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: auto auto ;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
direction: rtl;
|
||||||
|
grid-template-areas:
|
||||||
|
"foto2 foto1"
|
||||||
|
"foto3 foto3"
|
||||||
|
;}
|
||||||
|
|
||||||
|
.img-small1 {
|
||||||
|
grid-area: foto1;
|
||||||
|
}
|
||||||
|
.img-small2 {
|
||||||
|
grid-area: foto2;
|
||||||
|
}
|
||||||
|
.img-big3 {
|
||||||
|
grid-area: foto3;
|
||||||
|
width: 368px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image2 .image1 {
|
.flex-img {
|
||||||
grid-row: span 2;
|
max-width: 100%;
|
||||||
width: 43%;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.flex {
|
||||||
|
/* background-color: #E0E0E0; */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 415px) and (max-width: 1200px) {
|
|
||||||
.top-banner-image-mobile,
|
|
||||||
.bottom-banner-mobile {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infocard {
|
|
||||||
margin: 73px 6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infocard-subtitle {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infocard-title {
|
|
||||||
font-size: 28px;
|
|
||||||
line-height: 34px;
|
|
||||||
}
|
|
||||||
.infocard-description {
|
|
||||||
padding-top: 19px;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.pc-icon {
|
|
||||||
margin-top: 65px 0 91px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pc-icon-image {
|
|
||||||
width: 58%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cards-wrapper {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-wrap: nowrap;
|
||||||
align-items: center;
|
max-width: 80%;
|
||||||
padding-top: 91px;
|
margin: 0 auto;
|
||||||
padding-bottom: 80px;
|
}
|
||||||
|
|
||||||
|
.flex > div {
|
||||||
|
flex: 1 1 566px;
|
||||||
|
margin: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.article-description {
|
||||||
padding: 35px 26px 28px;
|
max-width: 550px;
|
||||||
background: #ffffff;
|
text-align: center;
|
||||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-description {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-top: 27px;
|
margin: 0 auto 50px auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Desktop - 1025px to 2500px */
|
||||||
|
@media only screen and (min-device-width: 1025px) and (max-device-width: 2500px) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 1024px) and (max-width: 2500px) {
|
|
||||||
.top-banner-image-mobile,
|
.top-banner-image-mobile,
|
||||||
.bottom-banner-mobile {
|
.bottom-banner-mobile {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cards-wrapper2 {
|
||||||
|
margin: 179px 72px 74px 72px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Desktop 4k - 2501px above */
|
||||||
|
@media only screen and (min-device-width: 2501px) {
|
||||||
|
|
||||||
|
.top-banner-image-mobile,
|
||||||
|
.bottom-banner-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infocard-description {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-wrapper2 {
|
||||||
|
margin: 179px 370px 74px 370px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fig-wrapper {
|
||||||
|
padding-top: 62px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-description {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 36px;
|
||||||
|
max-width: 850px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
30
index.html
30
index.html
@ -44,6 +44,7 @@
|
|||||||
|
|
||||||
<!-- Bloco Infocard | Desktop and Mobile -->
|
<!-- Bloco Infocard | Desktop and Mobile -->
|
||||||
<section class="block-main">
|
<section class="block-main">
|
||||||
|
|
||||||
<div class="infocard">
|
<div class="infocard">
|
||||||
<h2 class="infocard-subtitle">Lorem ipsum</h2>
|
<h2 class="infocard-subtitle">Lorem ipsum</h2>
|
||||||
<h1 class="infocard-title">dolor sit amet</h1>
|
<h1 class="infocard-title">dolor sit amet</h1>
|
||||||
@ -104,19 +105,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="fig-container">
|
|
||||||
<figure class="fig-wrapper">
|
|
||||||
<img class="fig-image" src="./_assets/images/image1.png" alt="Imagem 1">
|
|
||||||
<img class="fig-image" src="./_assets/images/image2.png" alt="Imagem 2">
|
|
||||||
<img class="fig-image" src="./_assets/images/image3.png" alt="Imagem 3">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
|
<section class="flex grid2">
|
||||||
|
<div>
|
||||||
|
<img class="flex-img img-small1" src="./_assets/images/image1.png" alt="Imagem 1">
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="flex-img img-small2" src="./_assets/images/image2.png" alt="Imagem 2">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img class="flex-img img-big3" src="./_assets/images/image3.png" alt="Imagem 3">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Cards2 | Desktop and Mobile -->
|
<!-- Cards2 | Desktop and Mobile -->
|
||||||
<div class="cards-wrapper2">
|
<div class="cards-wrapper2">
|
||||||
<figure class="card2">
|
<figure class="card2">
|
||||||
@ -164,7 +169,7 @@
|
|||||||
<figure class="card2">
|
<figure class="card2">
|
||||||
<img
|
<img
|
||||||
class="card-image2"
|
class="card-image2"
|
||||||
src="./_assets/images/card2-image3.svg"
|
src="./_assets/images/card2-image4.svg"
|
||||||
alt="Card Image 4"
|
alt="Card Image 4"
|
||||||
/>
|
/>
|
||||||
<figcaption class="card-description2">
|
<figcaption class="card-description2">
|
||||||
@ -176,6 +181,9 @@
|
|||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section class="column-reverse">
|
||||||
<article class="article">
|
<article class="article">
|
||||||
<h1 class="article-title">Lorem ipsum dolor sit amet</h1>
|
<h1 class="article-title">Lorem ipsum dolor sit amet</h1>
|
||||||
<p class="article-description">
|
<p class="article-description">
|
||||||
@ -201,6 +209,10 @@
|
|||||||
/>
|
/>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Footer | Desktop and Mobile -->
|
<!-- Footer | Desktop and Mobile -->
|
||||||
<footer class="page-footer">
|
<footer class="page-footer">
|
||||||
<ul class="page-footer-icon">
|
<ul class="page-footer-icon">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user