-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
208 lines (205 loc) · 9.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<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" />
<meta name="author" content="Wesley Victor Pereira Silva" />
<meta name="description" content="Descrição do seu site aqui." />
<meta name="keywords" content="palavras-chave, separadas por vírgulas, aqui" />
<title>Ser Digital</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="content-wrapper-center" id="home">
<header class="header">
<a href="index.html"><img src="imagens/SER-DIGITAL.svg" alt="Logotipo Ser digital" /></a>
<nav>
<input type="checkbox" class="menu-btn hide" id="menu-btn" />
<label for="menu-btn" class="menu-icon">
<span class="nav-icon"></span>
</label>
<ul class="header-menu">
<li><a href="index.html#home">home</a></li>
<li><a href="index.html#sobre">sobre</a></li>
<li><a href="index.html#testemunhos">testemunhos</a></li>
<li><a href="index.html#contato">contato</a></li>
</ul>
</nav>
</header>
<!-- Hero Banner -->
<section class="hero row">
<div class="content sm-12 lg-7">
<header>
<h1 class="hero_title">
Produtos, marcas & experiências Digitais
</h1>
<p>Somos um time 100% digital construindo produtos 100% digitais</p>
</header>
<a href="#" class="btn">entre em contato</a>
</div>
<div class="imagem sm-12 lg-5">
<img src="imagens/online-business-marketing.png" alt="" class="hero_image" />
</div>
</section>
<!-- Brands -->
<section class="brands">
<h2>Algumas empresas que confiam em nossos serviços</h2>
<ul>
<li><img src="imagens/spotify.svg" alt="spotify" /></li>
<li><img src="imagens/slack.svg" alt="slack" /></li>
<li><img src="imagens/dropbox.svg" alt="dropbox" /></li>
<li><img src="imagens/zoom.svg" alt="zoom" /></li>
</ul>
</section>
<!-- Branding section -->
<section class="branding row" id="sobre">
<article class="sm-12 md-7-12 lg-8-12">
<h2>Branding & Design system</h2>
<p>
Normalmente usado em indústrias gráficas e produtoras para
pré-visualização de designs, layouts e mockups
</p>
<a href="#"><span class="hide" aria-hidden="false">Saiba mais</span>
<img src="imagens/Arrow.svg" alt="" aria-hidden="true" /></a>
</article>
<div class="imagem sm-12 md-1-6 lg-1-5">
<img src="imagens/business-deal.png" alt="" />
</div>
</section>
<!-- Results section -->
<section class="results row">
<article class="sm-12 md-6 lg-5">
<h2>Análise de resultados</h2>
<p>
Todo projeto de comunicação precisa de um objetivo bem definido.
Ajudamos no acompanhamento dos resultados obtidos.
</p>
<a href="#"><span class="hide" aria-hidden="false">Saiba mais</span>
<img src="imagens/Arrow.svg" alt="" aria-hidden="true" /></a>
</article>
<div class="imagem sm-12 md-6 lg-8-12">
<img src="imagens/businessman-checking-financial-report.png" alt="" />
</div>
</section>
<!-- Testemunhos -->
<section class="testemunhos" id="testemunhos">
<h2 class="testemunhos_title">O que nossos clientes nos dizem</h2>
<div class="testemunhos_wrapper row">
<article class="testemunho sm-12 lg-4">
<div class="testemunho_card">
<img src="imagens/western-man-4975942-4159828-1-2x.png" alt="" class="testemunho_thumb" />
<div class="testemunho_content">
<h3 class="testemunho_nome">Andrew Rathore</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
ullamcorper scelerisque mi, in malesuada felis malesuada vel.
</p>
</div>
</div>
</article>
<article class="testemunho sm-12 lg-4">
<div class="testemunho_card">
<img src="imagens/western-man-4975942-4159828-2-2x.png" alt="" class="testemunho_thumb" />
<div class="testemunho_content">
<h3 class="testemunho_nome">Vera Duncan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
ullamcorper scelerisque mi, in malesuada felis malesuada vel,
consectetur adipiscing elit. Nunc ullamcorper scelerisque mi,
in malesuada felis malesuada vel
</p>
</div>
</div>
</article>
<article class="testemunho sm-12 lg-4">
<div class="testemunho_card">
<img src="imagens/western-man-4975942-4159828-3-2x.png" alt="" class="testemunho_thumb" />
<div class="testemunho_content">
<h3 class="testemunho_nome">Andrew Rathore</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
ullamcorper scelerisque mi.
</p>
</div>
</div>
</article>
</div>
</section>
<article class="contato row" id="contato">
<div class="contato_content sm-12 lg-8-12">
<h2 class="contato_title">Faça parte de algo grande</h2>
<p>
Nós trabalhamos com empresas de qualquer tamanho e estamos
preparados para atender a sua necessidade.
</p>
<a href="#" class="btn">Entre em contato</a>
</div>
<div class="contato_image sm-12 lg-1-7">
<img src="imagens/customer-support.png" alt="" />
</div>
</article>
</div>
<!-- Footer -->
<footer class="footer">
<div class="content-wrapper-center row">
<section class="sm-12 md-9 lg-6">
<header>
<a href="index.html" class="logo">Ser Digital</a>
<p>produtos, marcas & experiências Digitais</p>
</header>
<ul class="icons">
<li>
<a href="#">
<i aria-hidden="true" class="fa-brands fa-square-instagram"></i>
<span class="label hide">Instagram</span></a>
</li>
<li>
<a href="#"><i aria-hidden="true" class="fa-brands fa-square-twitter"></i><span
class="label hide">Twitter</span></a>
</li>
<li>
<a href="#"><i aria-hidden="true" class="fa-brands fa-linkedin"></i><span
class="label hide">LinkedIn</span></a>
</li>
<li>
<a href="#"><i aria-hidden="true" class="fa-brands fa-youtube"></i><span
class="label hide">Youtube</span></a>
</li>
</ul>
</section>
<section class="sm-12 md-3 lg-3">
<header>
<h3>Company</h3>
</header>
<ul>
<li><a href="index.html#sobre">Sobre nós</a></li>
<li><a href="#">carreira</a></li>
<li><a href="#">parceiros</a></li>
<li><a href="index.html#contato">contato</a></li>
</ul>
</section>
<section class="sm-12 lg-3">
<header>
<h3>Contato</h3>
</header>
<ul>
<li>[email protected]</li>
<li>(11) 1234-5678</li>
</ul>
</section>
<section class="copyright sm-12">
© Matheus - @matheusdias20 <wbr /> Todos os direitos reservados
<wbr /> https://www.figma.com/@matheusdias20
<wbr /> https://github.com/matheusdias20 <wbr />
</section>
</div>
</footer>
</body>
</html>