ViniciusGabrieldoAmaral/practice-time-landing-page
0
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(main): Feito parte central da langi page (desktop e mobile)

Browse Source
This commit is contained in:
Vinicius Gabriel do Amaral Pereira 2022-10-10 13:38:11 -03:00
parent 9407419e59
commit f0b57b23f3
3 changed files with 138 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/images/imgTresComputadores.png → assets/images/img-tres-computadores.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

99
assets/styles/style.css
View File

@ -4,9 +4,9 @@
padding: 0;
}
html, body{
box-sizing: border-box;
font-family: 'Inter', sans-serif;
color: black;
}
.header{
background: black;
@ -19,14 +19,107 @@ html, body{
}
.main-banner{
width: 100%;
display: block;
}
@media screen and (max-width: 414px) {
/*---------------------------------------------------------------------------------------*/
.top-infocard{
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
margin-bottom: 95px;
}
.top-infocard-text{
max-width: 766px;
margin-right: 124px;
}
.top-infocard-subtitle{
font-weight: 400;
font-size: 32px;
text-transform: uppercase;
}
.top-infocard-title{
font-weight: 500;
font-size: 48px;
text-transform: uppercase;
}
.top-infocard-description{
font-weight: 400;
font-size: 16px;
margin-top: 24px;
}
/*-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
.main-banner-desktop{
display: none;
}
.top-infocard{
flex-direction: column;
margin-top: 54px;
margin-left: 31px;
margin-right: 26px;
}
.top-infocard-text{
margin: 0 0 68px;
}
.top-infocard-subtitle{
font-weight: 400;
font-size: 20px;
}
.top-infocard-title{
font-weight: 500;
font-size: 28px;
}
.top-infocard-description{
font-weight: 400;
font-size: 16px;
margin-top: 19px;
}
.top-infocard-img{
margin: 0 86px 0 86px;
max-width: 240px;
}
}
@media screen and (min-width: 415px) {
@media screen and (min-width: 1025px) {
.main-banner-mobile{
display: none;
}
}
@media screen and (min-width: 1026px) and (max-width: 1220px){
.top-infocard-text{
max-width: 550px;
margin-right: 70px;
}
}
@media screen and (min-width: 2500px) {
.top-infocard-subtitle{
font-weight: 400;
font-size: 60px;
}
.top-infocard-title{
font-weight: 500;
font-size: 96px;
}
.top-infocard-description{
font-weight: 400;
font-size: 32px;
}
.top-infocard-text{
max-width: 45%;
margin-right: 70px;
}
}

44
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -7,6 +8,7 @@
<title>Landing Page</title>
<link rel="stylesheet" href="./assets/styles/style.css">
</head>
<body>
<header class="header">
@ -17,14 +19,48 @@
<main>
<section>
<img class="main-banner main-banner-desktop" src="./assets/images/img-notebook-desktop.png" alt="imagem notebook principal">
<img class="main-banner main-banner-mobile" src="./assets/images/img-notebook-mobile.png" alt="imagem notebook principal">
<img class="main-banner main-banner-desktop" src="./assets/images/img-notebook-desktop.png"
alt="imagem notebook principal">
<img style="border: none;" class="main-banner main-banner-mobile"
src="./assets/images/img-notebook-mobile.png" alt="imagem notebook principal">
</section>
<section class="top-infocard">
<div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2>
<h1 class="top-infocard-title">dolor sit amet</h1>
<p class="top-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>
<img class="top-infocard-img" src="./assets/images/img-tres-computadores.png" alt="Icone três computadores">
</section>
</main>
<div>
<section>
<img src="./assets/images/Icons/loja.png" alt="Imagem pequena de uma loja">
<p></p>
</section>
<section>
<img src="./assets/images/Icons/sacola.png" alt="Imagem pequena de uma sacolinha">
</section>
</main>
<section>
<img src="./assets/images/Icons/mao.png" alt="Imagem pequena de uma mão com uma cedula">
</section>
</div>
</body>
</html>