forked from M3-Academy/challenge-landing-page
Feature: Add footer desktop
This commit is contained in:
parent
08c5240ce5
commit
e1ffede000
@ -1,195 +1,207 @@
|
|||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', sans-serif;
|
font-family: "Inter", sans-serif;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.page-header {
|
||||||
background: #000000;
|
background: #000000;
|
||||||
padding: 28px 0;
|
padding: 28px 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-banner {
|
.top-banner {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
line-height: 58px;
|
line-height: 58px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard-subtitle {
|
.infocard-subtitle {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard-description {
|
.infocard-description {
|
||||||
margin-top: 0 8%;
|
margin-top: 0 8%;
|
||||||
padding-top: 28px;
|
padding-top: 28px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc-icon {
|
.pc-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 73px;
|
margin-top: 73px;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc-icon-image {
|
.pc-icon-image {
|
||||||
width: 315px;
|
width: 315px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-wrapper {
|
.cards-wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, max-content);
|
grid-template-columns: repeat(3, max-content);
|
||||||
gap: 21px;
|
gap: 21px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 179px;
|
padding-top: 179px;
|
||||||
padding-bottom: 74px;
|
padding-bottom: 74px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 26px 28px;
|
padding: 0 26px 28px;
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-image {
|
.card-image {
|
||||||
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;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-top: 27px;
|
margin-top: 27px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.imageblock-wrapper {
|
.imageblock-wrapper {
|
||||||
border: #00c8ff 1px solid;
|
border: #00c8ff 1px solid;
|
||||||
background-color: #E0E0E0;
|
background-color: #e0e0e0;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, max-content);
|
grid-template-columns: repeat(3, max-content);
|
||||||
gap: 39px;
|
gap: 39px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imageblock-image {
|
.imageblock-image {
|
||||||
border: #00c8ff 1px solid;
|
border: #00c8ff 1px solid;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: -62px;
|
bottom: -62px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-wrapper2 {
|
.cards-wrapper2 {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, max-content);
|
grid-template-columns: repeat(4, max-content);
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 179px;
|
padding-top: 179px;
|
||||||
padding-bottom: 74px;
|
padding-bottom: 74px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card2 {
|
.card2 {
|
||||||
max-width: 350px;
|
max-width: 350px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 26px 28px;
|
padding: 0 26px 28px;
|
||||||
background: #FFFFFF;
|
background: #ffffff;
|
||||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-image2 {
|
.card-image2 {
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.card-description2 {
|
.card-description2 {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
margin-top: 27px;
|
margin-top: 27px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article {
|
.article {
|
||||||
border: #00c8ff 1px solid;
|
border: #00c8ff 1px solid;
|
||||||
margin-top: 108px;
|
margin-top: 108px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-title {
|
.article-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.article-description {
|
.article-description {
|
||||||
|
justify-content: center;
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
text-align: center;
|
font-weight: 400;
|
||||||
font-weight: 400;
|
font-size: 16px;
|
||||||
font-size: 16px;
|
line-height: 24px;
|
||||||
line-height: 24px;
|
max-width: 550px;
|
||||||
max-width: 550px;
|
margin-bottom: 50px;
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-banner {
|
.bottom-banner {
|
||||||
display: block;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-banner-image-desktop,
|
.bottom-banner-image-desktop,
|
||||||
.bottom-banner-image-mobile {
|
.bottom-banner-image-mobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-footer {
|
||||||
|
margin-top: 106px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: #000000;
|
||||||
|
padding: 38px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-footer-icon {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-text {
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -204,146 +216,77 @@ margin-bottom: 15px;
|
|||||||
|
|
||||||
|
|
||||||
@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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard {
|
.infocard {
|
||||||
margin: 73px 6%;
|
margin: 73px 6%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard-subtitle{
|
.infocard-subtitle {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infocard-title {
|
.infocard-title {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
line-height: 34px;
|
line-height: 34px;
|
||||||
}
|
}
|
||||||
.infocard-description {
|
.infocard-description {
|
||||||
padding-top: 19px;
|
padding-top: 19px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc-icon {
|
.pc-icon {
|
||||||
margin-top: 65px 0 91px;
|
margin-top: 65px 0 91px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pc-icon-image {
|
.pc-icon-image {
|
||||||
width: 58%;
|
width: 58%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-wrapper {
|
.cards-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 91px;
|
padding-top: 91px;
|
||||||
padding-bottom: 80px;
|
padding-bottom: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 35px 26px 28px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
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 {
|
.card {
|
||||||
|
padding: 35px 26px 28px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||||
|
}
|
||||||
|
|
||||||
background-color: #E0E0E0;
|
.card-description {
|
||||||
display: flex;
|
font-weight: 400;
|
||||||
flex-direction: column;
|
font-size: 16px;
|
||||||
align-items: center;
|
line-height: 24px;
|
||||||
}
|
margin-top: 27px;
|
||||||
|
}
|
||||||
.imageblock-image {
|
|
||||||
align-items: center;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
|
|
||||||
}
|
.imageblock-wrapper {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.image2 .image1 {
|
.imageblock-image {
|
||||||
|
align-items: center;
|
||||||
grid-row: span 2;
|
display: grid;
|
||||||
width: 43%;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.image2 .image1 {
|
||||||
|
grid-row: span 2;
|
||||||
|
width: 43%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@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;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 91px;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 35px 26px 28px;
|
|
||||||
background: #FFFFFF;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -356,14 +299,76 @@ margin-bottom: 15px;
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 1024px) and (max-width: 2500px){
|
|
||||||
|
|
||||||
.top-banner-image-mobile,
|
@media screen and (min-width: 415px) and (max-width: 1200px) {
|
||||||
.bottom-banner-mobile {
|
.top-banner-image-mobile,
|
||||||
display: none;
|
.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;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 91px;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 35px 26px 28px;
|
||||||
|
background: #ffffff;
|
||||||
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 1024px) and (max-width: 2500px) {
|
||||||
|
.top-banner-image-mobile,
|
||||||
|
.bottom-banner-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
3
_assets/images/facebook-icon.svg
Normal file
3
_assets/images/facebook-icon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.9993 0.0049936L14.887 0C11.3905 0 9.13087 2.31828 9.13087 5.90643V8.62969H6.00163C5.73123 8.62969 5.51226 8.84891 5.51226 9.11932V13.065C5.51226 13.3354 5.73148 13.5544 6.00163 13.5544H9.13087V23.5106C9.13087 23.781 9.34984 24 9.62025 24H13.703C13.9734 24 14.1924 23.7808 14.1924 23.5106V13.5544H17.8512C18.1216 13.5544 18.3406 13.3354 18.3406 13.065L18.3421 9.11932C18.3421 8.98948 18.2904 8.86514 18.1988 8.77326C18.1071 8.68138 17.9823 8.62969 17.8525 8.62969H14.1924V6.32115C14.1924 5.21157 14.4568 4.64829 15.9022 4.64829L17.9988 4.64755C18.2689 4.64755 18.4879 4.42833 18.4879 4.15817V0.494367C18.4879 0.224462 18.2692 0.00549296 17.9993 0.0049936Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 787 B |
5
_assets/images/instagram-icon.svg
Normal file
5
_assets/images/instagram-icon.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.3766 0H6.62295C2.97106 0 0 3.095 0 6.89906V18.1008C0 21.905 2.97106 24.9999 6.62295 24.9999H17.3766C21.0288 24.9999 23.9999 21.9049 23.9999 18.1008V6.89906C24 3.095 21.0288 0 17.3766 0ZM21.8706 18.1008C21.8706 20.6819 19.8547 22.7817 17.3768 22.7817H6.62295C4.1452 22.7819 2.12938 20.6819 2.12938 18.1008V6.89906C2.12938 4.31806 4.1452 2.21811 6.62295 2.21811H17.3766C19.8545 2.21811 21.8705 4.31806 21.8705 6.89906V18.1008H21.8706Z" fill="white"/>
|
||||||
|
<path d="M11.9999 6.05847C8.58992 6.05847 5.81576 8.94822 5.81576 12.5003C5.81576 16.0522 8.58992 18.9418 11.9999 18.9418C15.4099 18.9418 18.1841 16.0522 18.1841 12.5003C18.1841 8.94822 15.4099 6.05847 11.9999 6.05847ZM11.9999 16.7236C9.7642 16.7236 7.94514 14.829 7.94514 12.5002C7.94514 10.1711 9.76406 8.27643 11.9999 8.27643C14.2358 8.27643 16.0547 10.1711 16.0547 12.5002C16.0547 14.829 14.2356 16.7236 11.9999 16.7236Z" fill="white"/>
|
||||||
|
<path d="M18.4435 4.17761C18.0333 4.17761 17.6303 4.35062 17.3405 4.65377C17.0494 4.95543 16.882 5.37539 16.882 5.80422C16.882 6.23173 17.0495 6.65154 17.3405 6.95468C17.6301 7.25635 18.0333 7.43084 18.4435 7.43084C18.8552 7.43084 19.2569 7.25635 19.548 6.95468C19.839 6.65154 20.0051 6.23158 20.0051 5.80422C20.0051 5.37539 19.839 4.95543 19.548 4.65377C19.2584 4.35062 18.8552 4.17761 18.4435 4.17761Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
3
_assets/images/youtube-icon.svg
Normal file
3
_assets/images/youtube-icon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22.98 5.34C22.329 4.182 21.6225 3.969 20.184 3.888C18.747 3.7905 15.1335 3.75 12.003 3.75C8.8665 3.75 5.2515 3.7905 3.816 3.8865C2.3805 3.969 1.6725 4.1805 1.0155 5.34C0.345 6.4965 0 8.4885 0 11.9955C0 11.9985 0 12 0 12C0 12.003 0 12.0045 0 12.0045V12.0075C0 15.4995 0.345 17.5065 1.0155 18.651C1.6725 19.809 2.379 20.019 3.8145 20.1165C5.2515 20.2005 8.8665 20.25 12.003 20.25C15.1335 20.25 18.747 20.2005 20.1855 20.118C21.624 20.0205 22.3305 19.8105 22.9815 18.6525C23.658 17.508 24 15.501 24 12.009C24 12.009 24 12.0045 24 12.0015C24 12.0015 24 11.9985 24 11.997C24 8.4885 23.658 6.4965 22.98 5.34ZM9 16.5V7.5L16.5 12L9 16.5Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 759 B |
346
index.html
346
index.html
@ -1,132 +1,240 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="pt-BR">
|
<html lang="pt-BR">
|
||||||
<head>
|
<head>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
<title> Desafio M3 Academy - Affonso Kopmann </title>
|
<title>Desafio M3 Academy - Affonso Kopmann</title>
|
||||||
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
<link rel="stylesheet" href="./_assets/css/main.css" />
|
<link rel="stylesheet" href="./_assets/css/main.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<!-- Header | Image and Background -->
|
<!-- Header | Image and Background -->
|
||||||
<header class="page-header">
|
<header class="page-header">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img src="./_assets/images/logo_m3.svg" alt="Logo M3">
|
<img src="./_assets/images/logo_m3.svg" alt="Logo M3" />
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main | Content -->
|
||||||
|
<main>
|
||||||
|
<!-- Main Banner | Desktop and Mobile -->
|
||||||
|
<figure class="top-banner">
|
||||||
|
<img
|
||||||
|
class="top-banner-image-desktop"
|
||||||
|
src="./_assets/images/main-banner-desktop.jpg"
|
||||||
|
alt="Top Banner"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="top-banner-image-mobile"
|
||||||
|
src="./_assets/images/main-banner-mobile.jpg"
|
||||||
|
alt="Top Banner"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<!-- Bloco Infocard | Desktop and Mobile -->
|
||||||
|
<section class="block-main">
|
||||||
|
<div class="infocard">
|
||||||
|
<h2 class="infocard-subtitle">Lorem ipsum</h2>
|
||||||
|
<h1 class="infocard-title">dolor sit amet</h1>
|
||||||
|
<p class="infocard-description">
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<figure class="pc-icon">
|
||||||
|
<img
|
||||||
|
class="pc-icon-image"
|
||||||
|
src="./_assets/images/pc-icon.svg"
|
||||||
|
alt="Icone pcs"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Cards | Desktop and Mobile -->
|
||||||
|
<div class="cards-wrapper">
|
||||||
|
<figure class="card">
|
||||||
|
<img
|
||||||
|
class="card-image"
|
||||||
|
src="./_assets/images/card-image1.svg"
|
||||||
|
alt="Card Image 1"
|
||||||
|
/>
|
||||||
|
<figcaption class="card-description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="card">
|
||||||
|
<img
|
||||||
|
class="card-image"
|
||||||
|
src="./_assets/images/card-image2.svg"
|
||||||
|
alt="Card Image 2"
|
||||||
|
/>
|
||||||
|
<figcaption class="card-description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="card">
|
||||||
|
<img
|
||||||
|
class="card-image"
|
||||||
|
src="./_assets/images/card-image3.svg"
|
||||||
|
alt="Card Image 3"
|
||||||
|
/>
|
||||||
|
<figcaption class="card-description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Imageblock | Desktop and Mobile -->
|
||||||
|
<div class="imageblock-wrapper">
|
||||||
|
<figure class="imageblock-image image1">
|
||||||
|
<img src="./_assets/images/image1.png" alt="Imagem 1" />
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="imageblock-image image2">
|
||||||
|
<img src="./_assets/images/image2.png" alt="Imagem 2" />
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="imageblock-image image3">
|
||||||
|
<img src="./_assets/images/image3.png" alt="Imagem 3" />
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Cards2 | Desktop and Mobile -->
|
||||||
|
<div class="cards-wrapper2">
|
||||||
|
<figure class="card2">
|
||||||
|
<img
|
||||||
|
class="card-image2"
|
||||||
|
src="./_assets/images/card2-image1.svg"
|
||||||
|
alt="Card Image 1"
|
||||||
|
/>
|
||||||
|
<figcaption class="card-description2">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
|
interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="card2">
|
||||||
|
<img
|
||||||
|
class="card-image2"
|
||||||
|
src="./_assets/images/card2-image2.svg"
|
||||||
|
alt="Card Image 2"
|
||||||
|
/>
|
||||||
|
<figcaption class="card-description2">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
|
interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="card2">
|
||||||
|
<img
|
||||||
|
class="card-image2"
|
||||||
|
src="./_assets/images/card2-image3.svg"
|
||||||
|
alt="Card Image 3"
|
||||||
|
/>
|
||||||
|
<figcaption class="card-description2">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
|
interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="card2">
|
||||||
|
<img
|
||||||
|
class="card-image2"
|
||||||
|
src="./_assets/images/card2-image3.svg"
|
||||||
|
alt="Card Image 4"
|
||||||
|
/>
|
||||||
|
<figcaption class="card-description2">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
|
||||||
|
consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
|
interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<article class="article">
|
||||||
|
<h1 class="article-title">Lorem ipsum dolor sit amet</h1>
|
||||||
|
<p class="article-description">
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- Bottom Banner | Desktop and Mobile -->
|
||||||
|
<figure class="bottom-banner">
|
||||||
|
<img
|
||||||
|
class="bottom-banner-desktop"
|
||||||
|
src="./_assets/images/bottom-banner-desktop.png"
|
||||||
|
alt="Bottom Banner Desktop"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="bottom-banner-mobile"
|
||||||
|
src="./_assets/images/bottom-banner-mobile.png"
|
||||||
|
alt="Bottom Banner Mobile"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<footer class="page-footer">
|
||||||
|
<ul class="page-footer-icon">
|
||||||
|
<li class="footer-icon">
|
||||||
|
<a href="https://www.instagram.com/m3.ecommerce/" target="_blank">
|
||||||
|
<img
|
||||||
|
src="./_assets/images/instagram-icon.svg"
|
||||||
|
alt="Instagram Icon"
|
||||||
|
/>
|
||||||
</a>
|
</a>
|
||||||
</header>
|
</li>
|
||||||
|
<li class="footer-icon">
|
||||||
<!-- Main | Content -->
|
<a href="https://www.facebook.com/digitalm3" target="_blank">
|
||||||
<main>
|
<img
|
||||||
<!-- Main Banner | Desktop and Mobile -->
|
src="./_assets/images/facebook-icon.svg"
|
||||||
<figure class="top-banner">
|
alt="Facebook Icon"
|
||||||
<img class="top-banner-image-desktop" src="./_assets/images/main-banner-desktop.jpg" alt="Top Banner">
|
/>
|
||||||
<img class="top-banner-image-mobile" src="./_assets/images/main-banner-mobile.jpg" alt="Top Banner">
|
</a>
|
||||||
</figure>
|
</li>
|
||||||
|
|
||||||
<!-- Bloco Infocard | Desktop and Mobile -->
|
<li class="footer-icon">
|
||||||
<section class="block-main">
|
<a
|
||||||
<div class="infocard">
|
href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA"
|
||||||
<h2 class="infocard-subtitle">Lorem ipsum</h2>
|
target="_blank"
|
||||||
<h1 class="infocard-title">dolor sit amet</h1>
|
>
|
||||||
<p class="infocard-description">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>
|
<img src="./_assets/images/youtube-icon.svg" alt="Youtube Icon" />
|
||||||
</div>
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<figure class="pc-icon">
|
<p class="footer-text">
|
||||||
<img class="pc-icon-image" src="./_assets/images/pc-icon.svg" alt="Icone pcs">
|
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||||
</figure>
|
</p>
|
||||||
</section>
|
</footer>
|
||||||
|
</main>
|
||||||
<!-- Cards | Desktop and Mobile -->
|
</body>
|
||||||
<div class="cards-wrapper">
|
</html>
|
||||||
<figure class="card">
|
|
||||||
<img class="card-image" src="./_assets/images/card-image1.svg" alt="Card Image 1">
|
|
||||||
<figcaption class="card-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="card">
|
|
||||||
<img class="card-image" src="./_assets/images/card-image2.svg" alt="Card Image 2">
|
|
||||||
<figcaption class="card-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="card">
|
|
||||||
<img class="card-image" src="./_assets/images/card-image3.svg" alt="Card Image 3">
|
|
||||||
<figcaption class="card-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Imageblock | Desktop and Mobile -->
|
|
||||||
<div class="imageblock-wrapper">
|
|
||||||
<figure class="imageblock-image image1">
|
|
||||||
<img src="./_assets/images/image1.png" alt="Imagem 1">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="imageblock-image image2">
|
|
||||||
<img src="./_assets/images/image2.png" alt="Imagem 2">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="imageblock-image image3">
|
|
||||||
<img src="./_assets/images/image3.png" alt="Imagem 3">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Cards2 | Desktop and Mobile -->
|
|
||||||
<div class="cards-wrapper2">
|
|
||||||
<figure class="card2">
|
|
||||||
<img class="card-image2" src="./_assets/images/card2-image1.svg" alt="Card Image 1">
|
|
||||||
<figcaption class="card-description2">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="card2">
|
|
||||||
<img class="card-image2" src="./_assets/images/card2-image2.svg" alt="Card Image 2">
|
|
||||||
<figcaption class="card-description2">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="card2">
|
|
||||||
<img class="card-image2" src="./_assets/images/card2-image3.svg" alt="Card Image 3">
|
|
||||||
<figcaption class="card-description2">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<figure class="card2">
|
|
||||||
<img class="card-image2" src="./_assets/images/card2-image3.svg" alt="Card Image 4">
|
|
||||||
<figcaption class="card-description2">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<article class="article">
|
|
||||||
<h1 class="article-title">Lorem ipsum dolor sit amet</h1>
|
|
||||||
<p class="article-description">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>
|
|
||||||
|
|
||||||
<!-- Bottom Banner | Desktop and Mobile -->
|
|
||||||
<figure class="bottom-banner">
|
|
||||||
<img class="bottom-banner-desktop" src="./_assets/images/bottom-banner-desktop.png" alt="Bottom Banner Desktop">
|
|
||||||
<img class="bottom-banner-mobile" src="./_assets/images/bottom-banner-mobile.png" alt="Bottom Banner Mobile">
|
|
||||||
</figure>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user