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

Finalizando os cards.

Browse Source
This commit is contained in:
JOÃO VITOR LIBERATO DE OLIVEIRA 2022-10-09 00:49:00 -03:00
parent f2217283dd
commit 81b11644f2
9 changed files with 148 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1 +0,0 @@
node_modules

29
assets/sass/global.css → assets/css/global.css
View File

@ -5,20 +5,22 @@
box-sizing: border-box;
}
body header {
header {
width: 100%;
height: 100px;
max-height: 101px;
height: 101px;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
}
body header .logo img {
width: 227px;
header .logo {
width: 100%;
max-width: 227px;
height: 43px;
}
body footer {
footer {
width: 100%;
height: 128px;
background-color: #000000;
@ -29,12 +31,14 @@ body footer {
justify-content: center;
text-align: center;
}
body footer .Icons-RedesSocias img {
footer .Icons-RedesSocias img {
width: 24px;
height: 25px;
margin: 0 8px;
}
body footer p {
footer p {
margin-top: 17px;
width: 300px;
font-weight: 400;
@ -42,4 +46,11 @@ body footer p {
line-height: 12px;
color: #BDBDBD;
text-transform: uppercase;
}/*# sourceMappingURL=global.css.map */
}
@media(min-width: 2000px){
header .logo {
width: 500px;
height: 100%;
}
}

87
assets/css/index.css Normal file
View File

@ -0,0 +1,87 @@
.banner {
width: 100%;
}
.banner .banner__mobile{
width: 100%;
}
.banner .banner__desktop {
display: none;
}
.sobre {
width: 100%;
margin-top: 84px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.sobre article {
padding-left: 5px;
}
.sobre article div h1{
margin: 0;
font-weight: 500;
font-size: 28px;
}
.sobre article p {
max-width: 330px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #000000;
}
.sobre .imagemRedesComputador {
width: 222.73px;
height: 204.57px;
margin: 65px auto 90.62px;
}
.sobre .saibaMais {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.sobre .saibaMais .infos {
background-color: #FFFFFF;
width: 100%;
max-width: 350.33px;
height: 287.95px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
margin: 8px 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.sobre .saibaMais .infos p {
max-width: 271px;
}
@media(min-width: 600px){
.banner .banner__mobile{
display: none;
}
.banner .banner__desktop {
display: block;
width: 100%;
}
}

1
assets/sass/global.css.map
View File

@ -1 +0,0 @@
{"version":3,"sources":["global.scss","global.css"],"names":[],"mappings":"AAAA;EACE,gCAAA;EACA,SAAA;EACA,UAAA;EACA,sBAAA;ACCF;;ADGE;EACE,WAAA;EACA,aAAA;EACA,iBAAA;EACA,yBAAA;EAEA,aAAA;EACA,uBAAA;EACA,mBAAA;ACDJ;ADGI;EACE,YAAA;EACA,YAAA;ACDN;ADKE;EACE,WAAA;EACA,aAAA;EACA,yBAAA;EACA,iBAAA;EAEA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;ACJJ;ADOM;EACE,WAAA;EACA,YAAA;EACA,aAAA;ACLR;ADSI;EACE,gBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,cAAA;EACA,yBAAA;ACPN","file":"global.css"}

55
assets/sass/global.scss
View File

@ -1,55 +0,0 @@
* {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
header {
width: 100%;
height: 100px;
max-height: 101px;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
.logo img {
width: 227px;
height: 43px;
}
}
footer {
width: 100%;
height: 128px;
background-color: #000000;
padding: 38px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
.Icons-RedesSocias {
img {
width: 24px;
height: 25px;
margin: 0 8px;
}
}
p {
margin-top: 17px;
width: 300px;
font-weight: 400;
font-size: 11px;
line-height: 12px;
color: #BDBDBD;
text-transform: uppercase;
}
}
}

11
assets/sass/index.css
View File

@ -1,11 +0,0 @@
main .fundo-inicio {
width: 100%;
height: 598px;
background-image: url("../images/fundoNoteMobi.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
main .fundo-inicio p {
display: none;
}/*# sourceMappingURL=index.css.map */

1
assets/sass/index.css.map
View File

@ -1 +0,0 @@
{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AACE;EACE,WAAA;EACA,aAAA;EACA,oDAAA;EACA,sBAAA;EACA,4BAAA;EACA,2BAAA;ACAJ;ADEI;EACE,aAAA;ACAN","file":"index.css"}

15
assets/sass/index.scss
View File

@ -1,15 +0,0 @@
main{
.fundo-inicio {
width: 100%;
height: 598px;
background-image: url('../images/fundoNoteMobi.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
p {
display: none;
}
}
}

48
index.html
View File

@ -10,20 +10,54 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/sass/global.css">
<link rel="stylesheet" href="./assets/sass/index.css">
<link rel="stylesheet" href="./assets/css/global.css">
<link rel="stylesheet" href="./assets/css/index.css">
</head>
<body>
<header>
<div class="logo">
<img src="./assets/images/Logo-M3Academy.svg" alt="Logo M3 - learning page.">
</div>
<img class="logo" src="./assets/images/Logo-M3Academy.svg" alt="Logo M3 - learning page.">
</header>
<main>
<article class="fundo-inicio">
<p>Fundo com notebook com códigos abertos</p>
<article class="banner">
<img src="./assets/images/fundoNote.svg" alt="Banner Desktop" class="banner__desktop" />
<img src="./assets/images/fundoNoteMobi.svg" alt="Banner Mobile" class="banner__mobile" />
</article>
<section class="sobre">
<article>
<div>
<span>LOREM IPSUM</span>
<h1>
dolor sit amet
</h1>
</div>
<p>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>
</article>
<img class="imagemRedesComputador" src="./assets/icons/threenetworkedcomputers.svg" alt="Imagens de computadores se conectando">
<article class="saibaMais">
<article class="infos infos__primerioContainer">
<img src="./assets/icons/shop.svg" alt="Icone do Shop.">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</article>
<article class="infos">
<img src="./assets/icons/shopping-bag.svg" alt="Icone da socala.">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</article>
<article class="infos">
<img src="./assets/icons/coin.svg" alt="Icone do Coin.">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</article>
</section>
<article>
</article>
</main>
<!-- <footer>