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

feat(css): estilizacao incompleta

Browse Source 
estilização da fonte, header, poster, info-1
This commit is contained in:
Caio Thurler 2022-10-12 11:57:43 -03:00
parent a1dec2cf22
commit 68e95ed2eb
2 changed files with 72 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -16,9 +16,9 @@
<img class="main-poster" src="images/mainposter.jpg" alt="Banner Laptop">
<section>
<div class="info-1">
<h2 class="infocard-1-subtitulo">Lorem ipsum</h2>
<h1 class="infocard-1-titulo">dolor sit amet</h1>
<p class="infocard-1-texto">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>
<h2 class="info-1-subtitulo">Lorem ipsum</h2>
<h1 class="info-1-titulo">dolor sit amet</h1>
<p class="info-1-texto">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 class="computadores" src="./images/3computadores.png" alt="Três computadores em conexão">
</div>

69
styles.css
View File

@ -0,0 +1,69 @@
/* CÓDIGO DE IMPORTAÇÃO DA FONTE / FONT IMPORT CODE */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@font-face {
font-family: 'Inter';
src: 'https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap' ;
}
* {
font-family: 'Bebas Neue', cursive;
font-family: 'Inter', sans-serif;
}
/* CÓDIGO DE IMPORTAÇÃO DA FONTE / FONT IMPORT CODE */
* {
margin: 0;
border: 0;
align-items: center;
justify-content: center;
}
header {
display: flex;
width: 100%;
background-color: black ;
}
.main-poster {
width: 100%;
margin-bottom: 73px;
}
.info-1 {
display: flex;
flex-direction: column;
}
.info-1-subtitulo {
text-transform: uppercase;
font-weight: 400;
font-size: 32px;
width: 220px;
height: 39px;
}
.info-1-titulo {
text-transform: uppercase;
font-weight: 500;
font-size: 48px;
width: 403px;
height: 58px;
margin-bottom: 28px;
}
.info-1-texto {
font-weight: 400;
font-size: 16px;
line-height: 24px;
width: 766px;
height: 56px;
margin-bottom: 73px;
}
.computadores {
width: 315.5;
height: 315;
}