-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (149 loc) · 6.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hDC Host</title>
<!-- Icones -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Estilos -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="navbar-container">
<nav>
<a href="#">
<img src="img/hdchostlogo.png" alt="hDC Host" class="logo">
</a>
<ul class="navbar-items">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Preços</a>
</li>
<li>
<a href="#">Contato</a>
</li>
<li>
<a href="#" class="default-btn">Entrar</a>
</li>
</ul>
</nav>
</div>
<main>
<div class="main-banner">
<h1>hDC Host</h1>
<p>Os melhores serviços para projetos de todos os tamanhos!</p>
</div>
<section class="services-container">
<ul>
<li>
<i class="fas fa-shield-alt"></i>
<h3>Segurança</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, iste non, laudantium ab
ea veritatis distinctio eos quam voluptatem, deserunt vero commodi hic provident minus
maiores totam quaerat itaque eum?</p>
</li>
<li>
<i class="fas fa-rocket"></i>
<h3>Performance</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, iste non, laudantium ab
ea veritatis distinctio eos quam voluptatem, deserunt vero commodi hic provident minus
maiores totam quaerat itaque eum?</p>
</li>
<li>
<i class="fas fa-comments"></i>
<h3>Suporte 24/7</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, iste non, laudantium ab
ea veritatis distinctio eos quam voluptatem, deserunt vero commodi hic provident minus
maiores totam quaerat itaque eum?</p>
</li>
</ul>
</section>
<section class="pricing-container">
<h2>Planos e preços</h2>
<p>Selecione o plano que atende as suas necessidades</p>
<div class="plans-container">
<div class="plan">
<ul>
<li class="price">R$15/mês</li>
<li class="plan-name">Básico</li>
<li>2GB de espaço</li>
<li>1 Subdomínio</li>
<li>25 contas de e-mail</li>
<li>C-panel</li>
<li>Suporte 24/7</li>
<li class="plan-btn">Saber mais</li>
</ul>
</div>
<div class="plan">
<ul>
<li class="price">R$30/mês</li>
<li class="plan-name">Dedicado</li>
<li>5GB de espaço</li>
<li>10 Subdomínios</li>
<li>50 contas de e-mail</li>
<li>C-panel</li>
<li>Suporte 24/7</li>
<li class="plan-btn">Saber mais</li>
</ul>
</div>
<div class="plan">
<ul>
<li class="price recommended">R$50/mês</li>
<li class="plan-name">Dedicado Plus</li>
<li>10GB de espaço</li>
<li>10 Subdomínio</li>
<li>100 contas de e-mail</li>
<li>C-panel</li>
<li>Suporte 24/7</li>
<li class="plan-btn recommended">Saber mais</li>
</ul>
</div>
<div class="plan">
<ul>
<li class="price">R$100/mês</li>
<li class="plan-name">Cloud</li>
<li>20GB de espaço</li>
<li>20 Subdomínios</li>
<li>200 contas de e-mail</li>
<li>C-panel</li>
<li>Suporte 24/7</li>
<li class="plan-btn">Saber mais</li>
</ul>
</div>
</div>
</section>
<section class="searchdomain-container">
<h2>Qual domínio você quer para o seu site?</h2>
<p>Verifique se o domínio está disponível</p>
<form>
<input type="text"
name="domain"
id="domain"
placeholder="Digite o domínio desejado"
>
<input type="submit" value="Procurar domínio">
</form>
</section>
<section class="contact-container">
<h2>Mande uma mensagem</h2>
<p>Envie a sua mensagem, em até 4 horas um especialista entrará em contato</p>
<form>
<input type="text" name="name" id="name" placeholder="Seu nome">
<input type="text" name="email" id="email" placeholder="seu e-mail">
<textarea name="message" id="messge" placeholder="Descreva o que você precisa ou o seu projeto... "></textarea>
<input type="submit" value="Enviar">
</form>
</section>
</main>
<footer>
<p>hDC Host @ 2024</p>
</footer>
</div>
</body>
</html>