-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathservico.html
160 lines (158 loc) · 5.08 KB
/
servico.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
<html>
<head>
<title>Servicos</title>
<link href="transp.css" rel="stylesheet" type="text/css" />
<!--Para fazer a ligação com java-->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<!--Fonte do material icons-->
</head>
<div id="topo">
<!--Div que fica no topo da página-->
<header>
<div id="grupo">
<!--Div que fica no topo da página-->
<h1><a href="index.html">Transvid</a></h1>
<!--Link para a página inicial-->
<h2>Transportando com Tecnologia</h2>
<!--Texto que fica no topo da página-->
</div>
<div id="header-contato">
<!--Div que fica no topo da página-->
<ul>
<!--ul é uma lista-->
<li>
<!--li é um item da lista-->
<span class="material-symbols-outlined">mail</span>
<!--span é um texto-->
<a href="#">transvid@gmail.com</a>
<!--a é um link-->
</li>
<li>
<span class="material-symbols-outlined">call</span>
<!--span é um texto-->
+55 053 99911-2008
</li>
</ul>
</div>
</header>
</div>
<nav class="servicos">
<ul>
<li>
<a href="index.html" title="Página Inicial">Home</a>
</li>
<li>
<a href="empresa.html" title="Nossa Empresa">Empresa</a>
</li>
<li class="link_servicos">
<a href="servicos.html" title="Serviços">Serviços</a>
</li>
<li>
<a href="localizacao.html" title="Localização">Localização</a>
</li>
</ul>
</nav>
<main id="mainServ">
<section class="servicoMain">
<div id="painelServicos">
<span class="material-symbols-outlined">local_shipping</span>
<h4>Transporte de Cargas</h4>
<br />
<p>
A logística das cargas consiste em agrupar todos os pedidos em um
mesmo transporte com base na localização.
</p>
<footer>
<a href="#" class="botao saiba_mais_cargas"> Saiba mais > </a>
</footer>
</div>
<div id="painelServicos">
<span class="material-symbols-outlined">pin_drop</span>
<h4>Rastreio de Encomendas</h4>
<p>
Acompanhe o status das suas encomendas de um jeito simples e rápido.
</p>
<footer>
<a href="#" class="botao saiba_mais_encomendas"> Saiba mais > </a>
</footer>
</div>
<div id="painelServicos">
<span class="material-symbols-outlined">add_road</span>
<h4>Cotações</h4>
<p>
Faça a cotação das suas encomendas para conferir nossas tarifas e
prazos de entrega.
</p>
<footer>
<a href="#" class="botao saiba_mais_cotacoes"> Saiba mais > </a>
</footer>
</div>
<img class="caminhao" src="caminhao.jpg" />
<style>
img {
width: 200%;
text-align: center;
}
</style>
</section>
</main>
<div id="containnerRodape">
<footer id="rodape">
<nav id="rodape_nav">
<h2 class="rodape_title">Navegaçao</h2>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="empresa.html">Empresa</a></li>
<li><a href="servico.html">Serviços</a></li>
<li><a href="localizacao.html">Localização</a></li>
<li><a href="cadastro.html">Cadastro</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<div id="rodape_comentarios">
<h2 class="rodape_title">@Comentários</h2>
<ul>
<li>
<span>Os melhores em economia, rapidez e segurança.</span
><a href="#">Mais..</a>
</li>
<li>
<span>Entregue em tempo e com segurança.</span><a href="#">Mais..</a>
</li>
<li>
<span>Obrigada pela atenção e carinho com minha mudança.</span
><a href="#">Mais..</a>
</li>
<li>
<span
>Amei o atendimento e o zelo com que chegou ao destino.</span
><a href="#">Mais..</a>
</li>
</ul>
</div>
<div id="caixa_formulario">
<form action="" method="post">
<h2 class="rodape_title">Contato</h2>
<label>Nome:</label>
<input type="test" name="nome" />
<!--existem vários como telefone, password, date e etc... name(utilizamos na parte de programação)-->
<label>E-mail:</label>
<input type="email" name="email" />
<label>Comentário:</label>
<textarea name="comentario" maxlength="140"></textarea>
<!--maxlength (coloca o número de caracteres)-->
<div id="botoes">
<input type="submit" value="Enviar" />
<!--Submit (Para colocar os botões-->
<input type="reset" value="Limpar" />
<!--Reset (Limpar)-->
</div>
</form>
</div>
</footer>
</div>
<!--Fim do rodape-->
</html>