-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
143 lines (133 loc) · 6.13 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Robótica Prática</title>
<link rel="stylesheet" href="./css/style.css">
<meta name="description" content="Um site dedicado ao ensino da robótica como você nunca viu.">
<link rel="icon" href="./img/favicon.png">
</head>
<body id="index">
<!-- Cabeçalho -->
<header>
<div class="FlexMenu">
<div id="logo">
<img src="./img/logo.png" alt="logo robótica prática">
</div>
<!-- Menu -->
<nav>
<input type="checkbox" id="check">
<label for="check">⚌</label>
<ul>
<li><a href="index.html"><span id="s1">★</span> Home</a></li>
<li><a href="sobre.html"><span id="s2">★</span> Sobre</a></li>
<li><a href="projetos.html"><span id="s3">★</span> Projetos</a></li>
<li><a href="apoio.html"><span id="s4">★</span> Apoio</a></li>
</ul>
</nav>
</div>
</header>
<!-- Destaque -->
<div id="destaque">
<video autoplay muted loop src="img/sonar.mp4"></video>
<div class="Banner">
<div class="Container">
<p id="slogan">Você faz. Você vê. Você aprende.</p>
<p id="textoDestaque">Um site dedicado ao ensino da robótica como você nunca viu.</p>
</div>
</div>
</div>
<!-- Introdução -->
<main id="intro">
<div class="Container FlexSection">
<div id="destaqueIntro">
<img src="./img/roboticaarduino.jpg" alt="robótica arduino">
</div>
<div id="textoIntro">
<h1>Aprender na prática</h1>
<p>Aprenda robótica de forma prática e divertida desenvolvendo projetos simples e de baixo custo.</p>
<div class="TopicosIntro FlexSection">
<img src="img/deftp.png" alt="robô">
<p>Robótica com Arduino</p>
</div>
<div class="TopicosIntro FlexSection">
<img src="img/robot.png" alt="robot">
<p>Robótica com sucata</p>
</div>
<div class="TopicosIntro FlexSection">
<img src="img/microcontrolador.png" alt="chip">
<p>Arduino</p>
</div>
</div>
</div>
</main>
<!-- YouTube -->
<section id="youtube">
<div class="Container FlexSection">
<div id="textoYoutube">
<h2>Inscreva-se no canal</h2>
<p>Acompanhe no <span class="Destacado">YouTube</span> os projetos que estão em produção.
<span class="Destacado">Inscreva-se</span> para não perder as novidades.
</p>
<a href="https://www.youtube.com/c/RoboticapraticaBr?sub_confirmation=1" target="_blank"
class="Button">Inscrever-se</a>
</div>
<div id="imagemYoutube">
<img src="./img/canalyoutube.png" alt="canal youtube">
</div>
</div>
</section>
<!-- Projetos -->
<section id="projetos">
<div class="Container">
<h2>Que tipo de <span id="destacado2">projeto</span> você quer fazer hoje?</h2>
<!-- Cards -->
<div class="FlexCard">
<div class="Card">
<img src="./img/robotica-pratica.png" alt="robótica com arduino">
<h3>Robótica com arduino</h3>
<p>Projetos de robótica com uso do arduino, tendo como principais objetivos o uso de componentes
comuns e o menor custo possível.</p>
<a href="robotica-livre.html" class="Button">Saiba +</a>
</div>
<div class="Card">
<img src="./img/robotica-sucata.png" alt="robótica com sucata">
<h3>Robótica com sucata</h3>
<p>Projetos de robótica (seguidor de linha, desvia-obstáculos, braço robótico, veículo mecatrônico
etc.) usando sucata de lixo eletrônico.</p>
<a href="robotica-simples.html" class="Button">Saiba +</a>
</div>
<div class="Card">
<img src="./img/arduino.png" alt="arduino">
<h3>Arduino, Eletrônica e Programação</h3>
<p>Projetos e tutoriais de eletrônica e programação com uso da plataforma arduino.</p>
<a href="projetos.html" class="Button">Saiba +</a>
</div>
</div>
</div>
</section>
<!-- Rodapé -->
<footer>
<div class="Container Flex">
<div id="social">
<a href="https://www.youtube.com/c/RoboticapraticaBr" target="_blank"><img src="./img/youtube.png"
alt="youtube"></a>
<a href="https://www.linkedin.com/in/professorjosedeassis" target="_blank"><img src="./img/linkedin.png"
alt="linkedin"></a>
<a href="https://www.facebook.com/professorjosedeassis" target="_blank"><img src="./img/facebook.png"
alt="facebook"></a>
<a href="https://www.instagram.com/prof.joseassis/" target="_blank"><img src="./img/instagram.png"
alt="instagram"></a>
<a href="https://twitter.com/joseassis" target="_blank"><img src="./img/twitter.png" alt="twitter"></a>
</div>
<div id="copyright">
<p>©<span id="copyrightYear"></span> - Robótica Prática</p>
</div>
</div>
</footer>
<!-- Topo do site -->
<a href="#logo" id="topo"><img src="./img/topo.png" alt="seta topo"></a>
<script src="./js/script.js"></script>
</body>
</html>