Skip to content

Commit dfad1f7

Browse files
brunorodrisbrunorodris
committed
Como criar uma Página de Captura de Leads com HTML e CSS
1 parent 0fa0b45 commit dfad1f7

File tree

3 files changed

+175
-0
lines changed

3 files changed

+175
-0
lines changed

‎12 - página de captura de leads/images/img.png‎

269 KB
Loading

‎12 - página de captura de leads/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Torne-se um desenvolvedor web</title>
9+
</head>
10+
<body>
11+
12+
<section>
13+
<div class="container">
14+
<div class="flex">
15+
16+
<div class="txt-leads">
17+
<h1>
18+
TORNE-SE UM <br>
19+
<span>DESENVOLVEDOR WEB</span>
20+
</h1>
21+
22+
<img src="images/img.png" alt="">
23+
24+
<p>Baixe o e-book gratuito e comece sua jornada. <br>
25+
<span>Tire seus projetos do papel</span>
26+
</p>
27+
</div><!--txt-leads-->
28+
29+
<div class="form-leads">
30+
31+
<form action="">
32+
<h2>INSIRA SEUS DADOS <br>
33+
<span>E RECEBA O E-BOOK NO SEU E-MAIL</span>
34+
</h2>
35+
36+
<div class="input-box">
37+
<label for="nome">Seu nome completo*:</label>
38+
<input type="text" name="" id="nome" required>
39+
</div><!--input-box-->
40+
41+
<div class="input-box">
42+
<label for="nome">Seu Telefone:</label>
43+
<input type="text" name="" id="nome">
44+
</div><!--input-box-->
45+
46+
<div class="input-box">
47+
<label for="nome">Seu e-mail*:</label>
48+
<input type="text" name="" id="nome" required>
49+
</div><!--input-box-->
50+
51+
<div class="btn-enviar">
52+
<input type="submit" value="ENVIAR">
53+
</div><!--btn-enviar-->
54+
</form>
55+
56+
</div><!--form-leads-->
57+
58+
</div><!--flex-->
59+
</div><!--container-->
60+
</section>
61+
62+
</body>
63+
</html>

‎12 - página de captura de leads/style.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Outfit",sans-serif;
7+
}
8+
9+
html{
10+
height: 100vh;
11+
}
12+
13+
body{
14+
height: 100vh;
15+
background-image: linear-gradient(to left, #02DBE4, #000131);
16+
}
17+
18+
.container{
19+
max-width: 1280px;
20+
margin: auto;
21+
}
22+
23+
.flex{
24+
display: flex;
25+
align-items: center;
26+
justify-content: space-around;
27+
height: 100vh;
28+
}
29+
30+
.txt-leads{
31+
text-align: center;
32+
}
33+
34+
.txt-leads h1{
35+
color: #fff;
36+
font-size: 1.2em;
37+
font-weight: 500;
38+
text-align: left;
39+
}
40+
41+
.txt-leads h1 span{
42+
font-size: 2em;
43+
font-weight: 700;
44+
}
45+
46+
.txt-leads img{
47+
width: 320px;
48+
margin: 60px 0;
49+
}
50+
51+
.txt-leads p{
52+
color: #fff;
53+
font-size: 1.3em;
54+
}
55+
56+
.txt-leads p span{
57+
font-size: 1.6em;
58+
font-weight: 600;
59+
}
60+
61+
form{
62+
width: 100%;
63+
background-color: #00000055;
64+
border-radius: 20px;
65+
padding: 40px;
66+
}
67+
68+
form h2{
69+
text-align: center;
70+
font-size: 2em;
71+
color: #fff;
72+
line-height: 20px;
73+
margin-bottom: 60px;
74+
}
75+
76+
form h2 span{
77+
font-size: 0.5em;
78+
}
79+
80+
.input-box{
81+
margin-bottom: 20px;
82+
}
83+
84+
.input-box label{
85+
display: block;
86+
color: #fff;
87+
}
88+
89+
.input-box input{
90+
width: 100%;
91+
padding: 10px;
92+
outline: none;
93+
border-radius: 10px;
94+
border: none;
95+
}
96+
97+
.btn-enviar{
98+
text-align: center;
99+
margin-top: 40px;
100+
}
101+
102+
.btn-enviar input{
103+
width: 140px;
104+
height: 50px;
105+
border: 0;
106+
background-color: #01DAFE;
107+
color: #fff;
108+
font-size: 20px;
109+
font-weight: 700;
110+
border-radius: 10px;
111+
cursor: pointer;
112+
}

0 commit comments

Comments
 (0)