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

Section 01

Browse Source
This commit is contained in:
Maria Carolina Oliveira da Silva 2022-10-11 22:07:45 -03:00
parent b19c51e29b
commit 5a0244a305
2 changed files with 113 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css/style.css
View File

@ -1,6 +1,9 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
padding: 0;
margin: 0;
font-family: "Inter", sans-serif;
}
.header-logo {
background-color: black;
@ -27,11 +30,14 @@
}
.image-computer {
width: 17%;
margin-bottom: 3rem;
}
p {
font-size: 16px;
line-height: 24px;
font: weight 400px;
text-align: center;
justify-content: center;
}
.text {
margin-top: 28px;
@ -46,3 +52,18 @@ p{
font-weight: 500px;
line-height: 58px;
}
.square{
box-shadow: 0px 4px 20px #0000003b;
text-align: center;
padding: 1em;
flex: 1 1 250px;
background-color: white;
padding: 3em 0;
align-items: center;
}
.container-3{
display: flex;
gap: 1em;
flex-wrap: wrap;
padding: 1em;
}

57
index.html
View File

@ -1,33 +1,70 @@
<!DOCTYPE html>
<html lang="ptBR">
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<title>challenge-landing-page</title>
</head>
<body>
<!-----------Header---------->
<header>
<figure class="header-logo">
<img class="logo" src="./assets/img/Logo-M3Academy 1.png" alt="">
<img class="logo" src="./assets/img/Logo-M3Academy 1.png" alt="Logo-M3Academy" />
</figure>
<figure>
<img class="header-computer" src="./assets/img/Rectangle 9.jpg" alt="">
<img class="header-computer" src="./assets/img/Rectangle 9.jpg" alt="Capa-notebook" />
</figure>
</header>
<!------------Main---------->
<main>
<!---------Section-1------------->
<section class="info">
<div>
<h2 class="lorem">LOREM IPSUM</h2>
<h1 class="dolor">DOLOR SIT AMET</h1>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
<p>Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum.
</p>
<p>
Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit.
Nulla suscipit magna dui.
</p>
<figure class="computers">
<img class="image-computer" src="./assets/SVG/computers.svg" alt="">
<img class="image-computer" src="./assets/SVG/computers.svg" alt="rede-Computadores" />
</figure>
</div>
<!-------------Section-2----------->
<div class="container-3">
<div class="square">
<figure>
<img src="./assets/SVG/shopp.svg" alt="shopp" />
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. </p>
</div>
<div class="square">
<figure>
<img src="./assets/SVG/shopping-bag (1) 1.svg" alt="shopping-bag" />
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. </p>
</div>
<div class="square">
<figure>
<img src="./assets/SVG/money (1) 2.svg" alt="money" />
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum. </p>
</div>
</div>
</section>
<!--------------Section-3------------------>
</main>
</body>
</html>