Finalizando os cards.
This commit is contained in:
parent
f2217283dd
commit
81b11644f2
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +0,0 @@
|
|||||||
node_modules
|
|
||||||
@ -5,20 +5,22 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body header {
|
header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100px;
|
height: 101px;
|
||||||
max-height: 101px;
|
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
body header .logo img {
|
|
||||||
width: 227px;
|
header .logo {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 227px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
}
|
}
|
||||||
body footer {
|
|
||||||
|
footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 128px;
|
height: 128px;
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
@ -29,12 +31,14 @@ body footer {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
body footer .Icons-RedesSocias img {
|
|
||||||
|
footer .Icons-RedesSocias img {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
}
|
}
|
||||||
body footer p {
|
|
||||||
|
footer p {
|
||||||
margin-top: 17px;
|
margin-top: 17px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -42,4 +46,11 @@ body footer p {
|
|||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
color: #BDBDBD;
|
color: #BDBDBD;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}/*# sourceMappingURL=global.css.map */
|
}
|
||||||
|
|
||||||
|
@media(min-width: 2000px){
|
||||||
|
header .logo {
|
||||||
|
width: 500px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
87
assets/css/index.css
Normal file
87
assets/css/index.css
Normal 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 +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"}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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 +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"}
|
|
||||||
@ -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
48
index.html
@ -10,20 +10,54 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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 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/css/global.css">
|
||||||
<link rel="stylesheet" href="./assets/sass/index.css">
|
<link rel="stylesheet" href="./assets/css/index.css">
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="logo">
|
<img class="logo" src="./assets/images/Logo-M3Academy.svg" alt="Logo M3 - learning page.">
|
||||||
<img src="./assets/images/Logo-M3Academy.svg" alt="Logo M3 - learning page.">
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<article class="fundo-inicio">
|
<article class="banner">
|
||||||
<p>Fundo com notebook com códigos abertos</p>
|
<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>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
<!-- <footer>
|
<!-- <footer>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user