Skip to content

Commit 13ca8ea

Browse files
ericflorianoericfloriano
committed
first project
0 parents  commit 13ca8ea

File tree

129 files changed

+6425
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+6425
-0
lines changed

‎1-HTML+CSS/contato.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Bikcraft - Contato 11 97429-2147</title>
6+
<link rel="stylesheet" href="css/normalize.css">
7+
<link rel="stylesheet" href="css/reset.css">
8+
<link rel="stylesheet" href="css/grid.css">
9+
<link rel="stylesheet" href="css/style.css">
10+
<link rel="stylesheet" href="css/contato.css">
11+
</head>
12+
<body>
13+
14+
<header class="header">
15+
<div class="container">
16+
<a href="index.html" class="grid-4">
17+
<img src="img/bikcraft.png" alt="Bikcraft">
18+
</a>
19+
<nav class="grid-12 header_menu">
20+
<ul>
21+
<li><a href="sobre.html">Sobre</a></li>
22+
<li><a href="produtos.html">Produtos</a></li>
23+
<li><a href="portfolio.html">Portfólio</a></li>
24+
<li><a href="contato.html" class="menu_ativo">Contato</a></li>
25+
</ul>
26+
</nav>
27+
</div>
28+
</header>
29+
<!-- Final do Nav -->
30+
31+
<section class="introducao-interna interna_contato">
32+
<div class="container">
33+
<h1>Contato</h1>
34+
<p>tire suas dúvidas com a gente</p>
35+
</div>
36+
</section>
37+
<!-- Final da Introdução Interna -->
38+
39+
<section class="contato container">
40+
<form id="form_orcamento" class="contato_form grid-8">
41+
<label for="nome">Nome</label>
42+
<input type="text" id="nome" placeholder="Nome Completo">
43+
<label for="nome">E-mail</label>
44+
<input type="text" id="email" placeholder="Digite seu E-mail">
45+
<label for="nome">Telefone</label>
46+
<input type="text" id="Telefone" placeholder="Digite seu n°">
47+
<label for="espec">Especificações</label>
48+
<textarea id="espec" placeholder="Tire sua Dúvida"></textarea>
49+
<button type="submit" class="btn btn-preto">Enviar</button>
50+
</form>
51+
52+
<div class="contato_dados grid-8">
53+
<h3>Dados</h3>
54+
<span>+ 55 11 97429 2147</span>
55+
<span>orcamento@bikcraft.com</span>
56+
<span>Alameda Rio Negro</span>
57+
<span>Barueri - SP - Brasil</span>
58+
<h3>Redes Sociais</h3>
59+
<ul>
60+
<li><a href="https://www.facebook.com/ericfloriano" target="_blank"><img src="img/redes-sociais/facebook.png" alt="Facebook"></a></li>
61+
<li><a href="https://www.instagram.com/ericfloriano/" target="_blank"><img src="img/redes-sociais/instagram.png" alt="Instagram"></a></li>
62+
<li><a href="https://twitter.com/eric_floriano" target="_blank"><img src="img/redes-sociais/twitter.png" alt="Twitter"></a></li>
63+
</ul>
64+
</div>
65+
</section>
66+
<!-- Final do Form -->
67+
68+
<section class="container contato_mapa">
69+
<a href="http://google.com" target="_blank" class="grid-16"><img src=img/endereco-bikcraft.jpg alt="Endereço da Bikcraft"></a>
70+
</section>
71+
72+
<section class="quebra">
73+
<blockquote class="quote-externo container">
74+
<p>“o verdadeiro segredo da felicidade está em ter um genuíno interesse por todos os detalhes da vida cotidiana.”</p>
75+
<cite>WILLLIAM MORRIS</cite>
76+
</blockquote>
77+
</section>
78+
<!-- Final da quebra -->
79+
80+
<footer>
81+
<div class="footer">
82+
<div class="container">
83+
<div class="grid-8 footer_historia">
84+
<h3> Nossa História</h3>
85+
<p>Quando iniciamos a Bikcraft queriamos apenas um produto que adoraríamos utilizar. Eramos apaixonados por pedalar e também por fazer as coisas com as nossas próprias mãos. Assim surgiu um sonho na garagem da nossa casa.</p>
86+
</div>
87+
88+
<div class="grid-4 footer_contato">
89+
<h3>Contato</h3>
90+
<ul>
91+
<li>+ 55 11 97429 2147</li>
92+
<li>ericfloriano@bikcraft.com</li>
93+
<li>Barueri - SP</li>
94+
</ul>
95+
</div>
96+
97+
<div class="grid-4 footer_redes">
98+
<h3>Redes Sociais</h3>
99+
<ul>
100+
<li><a href="https://www.facebook.com/ericfloriano" target="_blank"><img src="img/redes-sociais/facebook.png" alt="Facebook"></a></li>
101+
<li><a href="https://www.instagram.com/ericfloriano/" target="_blank"><img src="img/redes-sociais/instagram.png" alt="Instagram"></a></li>
102+
<li><a href="https://twitter.com/eric_floriano" target="_blank"><img src="img/redes-sociais/twitter.png" alt="Twitter"></a></li>
103+
</ul>
104+
</div>
105+
</div>
106+
</div>
107+
108+
<div class="copy">
109+
<div class="container">
110+
<p class="grid-16">Bikcraft 2019 - Alguns Direitos Reservados.</p>
111+
</div>
112+
</div>
113+
</footer>
114+
</body>
115+
</html>

‎1-HTML+CSS/css/contato.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
.interna_contato {
2+
background: url("../img/bg-contato.jpg") no-repeat center;
3+
background-size: cover;
4+
}
5+
6+
/* Orçamento */
7+
8+
.contato {
9+
padding: 40px 0;
10+
}
11+
12+
.contato_form {
13+
padding-right: 60px;
14+
}
15+
16+
.contato_form label {
17+
display: block;
18+
font-family: Georgia, "Times New Roman", serif;
19+
font-size: 18px;
20+
line-height: 25px;
21+
margin-bottom: 4px;
22+
}
23+
24+
.contato_form input {
25+
display: block;
26+
width: 100%;
27+
border: 4px solid #fec63e;
28+
background: none;
29+
padding: 7px 10px;
30+
margin-bottom: 10px;
31+
outline: none;
32+
font-size: 14px;
33+
font-family: Georgia, "Times New Roman", serif;
34+
}
35+
36+
.contato_form textarea {
37+
display: block;
38+
width: 100%;
39+
height: 120px;
40+
border: 4px solid #fec63e;
41+
background: none;
42+
padding: 7px 10px;
43+
margin-bottom: 20px;
44+
outline: none;
45+
font-size: 14px;
46+
font-family: Georgia, "Times New Roman", serif;
47+
}
48+
49+
.contato_form button {
50+
padding: 7px 40px;
51+
background: none;
52+
}
53+
54+
.contato_dados {
55+
color: #000;
56+
}
57+
58+
.contato_dados h3 {
59+
font-size: 18px;
60+
line-height: 25px;
61+
font-weight: bold;
62+
text-transform: uppercase;
63+
color: #fec63e;
64+
}
65+
66+
.contato_dados span {
67+
display: block;
68+
font-size: 18px;
69+
line-height: 30px;
70+
font-family: Georgia, "Times New Roman", serif;
71+
}
72+
73+
.contato_dados span:nth-of-type(even) {
74+
margin-bottom: 30px;
75+
}
76+
77+
/*
78+
even considera as linhas PARES
79+
odd considera as linhas IMPARES
80+
*/
81+
82+
.contato_dados ul {
83+
margin-top: 10px;
84+
}
85+
86+
.contato_dados ul li {
87+
display: inline-block;
88+
margin-right: 10px;
89+
}
90+
91+
.contato_dados ul li a {
92+
border: 3px solid #fec63e;
93+
display: block;
94+
padding: 10px;
95+
}
96+
97+
.contato_dados ul li a:hover {
98+
border-color: #000;
99+
}
100+
101+
.contato_mapa {
102+
margin-bottom: 40px;
103+
}

‎1-HTML+CSS/css/grid.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
*, *:before, *:after {
2+
-webkit-box-sizing: border-box;
3+
-moz-box-sizing: border-box;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
width: 960px;
9+
margin: 0 auto;
10+
padding: 0px;
11+
position: relative;
12+
}
13+
14+
.container:after, .container:before {
15+
content: " ";
16+
display: table;
17+
}
18+
19+
.container:after {
20+
clear: both;
21+
}
22+
23+
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-3 {
24+
float: left;
25+
margin-left: 10px;
26+
margin-right: 10px;
27+
}
28+
29+
.grid-1 {width: 40px;}
30+
.grid-2 {width: 100px;}
31+
.grid-3 {width: 160px;}
32+
.grid-4 {width: 220px;}
33+
.grid-5 {width: 280px;}
34+
.grid-6 {width: 340px;}
35+
.grid-7 {width: 400px;}
36+
.grid-8 {width: 460px;}
37+
.grid-9 {width: 520px;}
38+
.grid-10 {width: 580px;}
39+
.grid-11 {width: 640px;}
40+
.grid-12 {width: 700px;}
41+
.grid-13 {width: 760px;}
42+
.grid-14 {width: 820px;}
43+
.grid-15 {width: 880px;}
44+
.grid-16 {width: 940px;}
45+
.grid-1-3 {width: 300px;}

0 commit comments

Comments
 (0)