-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
219 lines (175 loc) · 7.06 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
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@700&family=Poppins:wght@200;300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animations.css"/>
<link rel="shortcut icon" href="img/logo-Sirius-white.png" type="image/x-icon">
<title>Sirius | We are Sirius</title>
</head>
<body>
<nav>
<div class="nav-content">
<a href="#slogan" class="logo-image">
<img src="img/logo-Sirius.png" alt="" height="50px">
</a>
<ul class="sections">
<li><a href="#service"> Serviços </a></li>
<li><a href="#projects"> Projetos </a></li>
<li><a href="#partner-companies"> Empresas Parceiras </a></li>
<li><a href="#team"> Equipe </a></li>
<li><a href="#contacts"> Entrar em contato </a></li>
</ul>
</div>
</nav>
<section id="apresentation">
<img class="logo" src="img/logo-Sirius-w-name.png" alt="">
</section>
<header id="slogan">
<h2>
We are Sirius
</h2>
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20962 10601"
>
<path
class="wave-1"
fill="var(--most)"
d="M27489 8635c504 1667 831 3818-27 5680s-2901 3434-6193 3904-7834-161-12155-589c-4321-427-8421-649-10976-1537-2555-889-3565-2443-4071-4061-505-1619-505-3302 938-4835 1442-1533 4327-2916 6274-3122s2958 764 3877 1522 1746 1304 2738 1382 2148-312 2976-730 1327-864 2136-1014c810-151 1929-6 2757 206s1363 490 1978 775c614 284 1308 574 1947 535s1223-407 1935-875c712-469 1552-1037 2240-1266 688-228 1223-117 1832 530 608 646 1290 1828 1794 3495z"
/>
<path
class="wave-2"
fill="var(--medium)"
d="M25681 10400c-171 822-305 1990-646 3115-341 1124-889 2206-1856 2808-968 602-2355 724-4668 1064s-5550 898-8520 987-5672-290-9037-859c-3366-568-7394-1326-9403-2118-2008-791-1996-1616-1892-3305 103-1689 298-4242 1412-5731 1113-1488 3146-1912 4953-1627 1808 284 3390 1276 4522 1878s1814 814 2423 552 1145-998 2333-1388c1187-389 3025-432 4266 275 1240 707 1884 2164 2861 2407 976 244 2285-726 3493-1308 1209-581 2316-775 3731-567 1415 207 3137 815 4290 1221 1153 407 1737 612 1926 953 189 342-18 820-188 1643z"
/>
<path
class="wave-3"
fill="var(--light)"
d="M30706 11822c-291 731-653 1801-1548 2972-895 1170-2321 2441-4988 3026-2667 586-6574 485-10469 541s-7778 268-10906-256-5501-1784-6906-3382c-1404-1598-1840-3533-1957-4910-118-1377 82-2195 1029-2854 946-659 2637-1158 4033-1002s2495 968 3440 1630 1737 1175 2905 1086c1169-89 2714-780 3810-1332 1095-552 1740-965 2665-820s2130 848 3110 1360c980 513 1734 837 2458 672s1416-819 2179-1050 1597-40 3058 269c1461 310 3550 739 5069 1177 1519 437 2469 883 2998 1112 529 228 639 240 584 440-55 201-274 591-564 1321z"
/>
</svg>
</header>
<section id="service">
<h1>Serviços</h1>
<div class="services-container">
<div class="content">
<img src="img/site-responsive.png" width="180" alt="">
<h2>Sites Responsivos</h2>
<h4>
Nosso objetivo é entregar um site elegante, agradável,
de fácil navegação, responsivo
e com as informações que o seu cliente precisa encontrar.
</h4>
</div>
<div class="content">
<img src="img/system.png" width="180" alt="">
<h2>Sistemas</h2>
<h4>
Equipe especializada para desenvolver o seu sistema, na medida da necessidade do seu negócio.
</h4>
</div>
<div class="content">
<img src="img/mobile.png" width="180" alt="">
<h2>Aplicativos mobile</h2>
<h4>
Equipe especializada para desenvolver o seu aplicativo mobile, na medida da necessidade do seu negócio. Seja ele Android ou IOS
</h4>
</div>
</div>
</section>
<section id="projects">
<h1>Projetos</h1>
<div class="projects-container">
<div class="content">
<div class="img">
<img src="img/projects/maets.png" alt="">
</div>
<h2>Maets</h2>
<h4>
Projeto de uma loja de games web, chamada Maets onde vende jogos eletrônicos, tanto para consoles quanto para sistemas operacionais como Linux, Windowns e MacOS
</h4>
</div>
<div class="content">
<div class="img">
<img src="img/projects/Logo.png">
</div>
<h2>Etec Help</h2>
<h4>
Plataforma de mentoria online que junta um estudante e um helper. Onde ajuda o estudante a entender os conteúdos que ele tem mais dificuldade.
</h4>
</div>
</div>
</section>
<section id="partner-companies">
<h1>Empresas Parceiras</h1>
<div class="partner-companies-container">
<div class="img-company">
<img src="img/partner-companies/iris.png" width="180px"alt="">
</div>
<div class="img-company">
<img src="img/partner-companies/terena.png" width="180px"alt="">
</div>
<div class="img-company">
<img src="img/partner-companies/avant.png" width="200px"alt="">
</div>
</div>
</section>
<section id="team">
<h1>Equipe</h1>
<div class="team-container">
<div class="img">
<img src="img/team/ruty.png" alt="">
<h2>Rutieny Pires</h2>
</div>
<div class="img">
<img src="img/team/joaquim.png" alt="">
<h2>Joaquim Vinicius</h2>
</div>
<div class="img">
<img src="img/team/julio.png" alt="">
<h2>Julio Conceição</h2>
</div>
<div class="img">
<img src="img/team/vitor.png" alt="">
<h2>Vitor Carmo</h2>
</div>
<div class="img">
<img src="img/team/bia.png" alt="">
<h2>Beatriz Vitória</h2>
</div>
</div>
</section>
<section id="contacts">
<form action="">
<h1>
Entrar em contato
</h1>
<label for="name">
Nome
</label>
<input required="required" name="name" type="text" placeholder="Digite seu nome"/>
<label for="email">
Email
</label>
<input required="required" type="email" name="email" placeholder="Digite seu email"/>
<label for="text">
Mensagem
</label>
<textarea
id="message"
name="text"
placeholder="Digite a sua mensagem"
required="required"
aria-invalid="false"
></textarea>
<div class="to-right">
<button type="submit" >Enviar mensagem</button>
</div>
</form>
</section>
</body>
</html>