-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (149 loc) · 7.23 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>JavaScript</title>
</head>
<body>
<header>
<nav>
<img class="logo" src="images/logo-code-removebg-preview.png" alt="">
<ul>
<li><a href="variaveis.html">Variáveis</a></li>
<li><a href="funçoes.html">Funções</a></li>
<li><a href="condiçoes.html">Condições</a></li>
</ul>
</nav>
</header>
<main>
<aside class="sidebar">
<div class="cola">
<h3>Colinha</h3>
<div>
<h4>Condições</h4>
<ul>
<li class="if">if <i class="fas fa-regular fa-circle-info">
<p>Função de verificação de eventos ou de númeração (false e true).</p><!--Textos de exemplo-->
</i>
</li>
<li>else <i class="fas fa-regular fa-circle-info">
<p>Olá mundo2!</p><!--Textos de exemplo-->
</i>
</li>
<li>for <i class="fas fa-regular fa-circle-info">
<p>Olá mundo3!</p><!--Textos de exemplo-->
</i>
</li>
<li>while <i class="fas fa-regular fa-circle-info">
<p>Olá mundo4!</p><!--Textos de exemplo-->
</i>
</li>
<li>do <i class="fas fa-regular fa-circle-info">
<p>Olá mundo5!</p><!--Textos de exemplo-->
</i>
</li>
<li>if else <i class="fas fa-regular fa-circle-info">
<p>Olá mundo6!</p><!--Textos de exemplo-->
</i>
</li>
<li>do/while <i class="fas fa-regular fa-circle-info">
<p>Olá mundo7!</p><!--Textos de exemplo-->
</i>
</li>
<li>for/in <i class="fas fa-regular fa-circle-info">
<p>Olá mundo8!</p><!--Textos de exemplo-->
</i>
</li>
<li>for/of <i class="fas fa-regular fa-circle-info">
<p>Olá mundo9!</p><!--Textos de exemplo-->
</i>
</li>
</ul>
</div>
<div>
<h4>Sinais</h4>
<ul>
<li>< Menor que <i class="fas fa-regular fa-circle-info"></i></li>
<li>> Maior que <i class="fas fa-regular fa-circle-info"></i></li>
<li><= Menor ou igual que <i class="fas fa-regular fa-circle-info"></i></li>
<li>>= Maior ou igual que <i class="fas fa-regular fa-circle-info"></i></li>
<li>!= Diferente que <i class="fas fa-regular fa-circle-info"></i></li>
<li>!== Diferente que (Valor+Tipo) <i class="fas fa-regular fa-circle-info"></i></li>
<li>== Igual (Valor) <i class="fas fa-regular fa-circle-info"></i></li>
<li>=== Idêntico (Valor+Tipo) <i class="fas fa-regular fa-circle-info"></i></li>
</ul>
</div>
<div>
<h4>Funções</h4>
<ul>
<li>console.log <i class="fas fa-regular fa-circle-info"></i></li>
<li>alert <i class="fas fa-regular fa-circle-info"></i></li>
<li>.click <i class="fas fa-regular fa-circle-info"></i></li>
<li>.scroll <i class="fas fa-regular fa-circle-info"></i></li>
<li>.scrollTop <i class="fas fa-regular fa-circle-info"></i></li>
<li>.scrollLeft <i class="fas fa-regular fa-circle-info"></i></li>
<li>.find <i class="fas fa-regular fa-circle-info"></i></li>
<li>.slideToggle <i class="fas fa-regular fa-circle-info"></i></li>
</ul>
</div>
</div>
</aside>
<Section class="campos-treino">
<div class="campos">
<h1>Práticas com javaScript</h1>
<div class="campoForm">
<div class="inputBox">
<input type="text" required>
<span>Nome</span>
</div><!--inputBox-->
<div class="inputBox inputBox2">
<input type="text" required>
<span>Sobrenome</span>
</div><!--inputBox-->
<div class="btn"><button class="button-style" value="enviar">Enviar</button></div>
</div>
<div class="campo1 testes">
<h4>Formulários</h4>
<form action="">
<!-- <div class="name">
<label for="">Usuário</label>
<input type="text" placeholder="Digite seu nome aqui">
</div>
<div class="age">
<label for="">Senha</label>
<input type="password" placeholder="Digite sua senha aqui">
</div> -->
<div class="btn"><button value="enviar">Enviar</button></div>
</div>
<div class="campo2 testes">
<h4>Imagens</h4>
<img class="emogi1" src="images/307939d6388aa145b2fb0142a8b1e91b.png" alt="">
<img class="emogi2" src="images/307939d6388aa145b2fb0142a8b1e91b.png" alt="">
<img class="emogi3" src="images/307939d6388aa145b2fb0142a8b1e91b.png" alt="">
</div>
<div class="campo3 testes">
<h4>Textos</h4>
<p>Aqui você faz testes de animação com textos, use o título e este parágrafo e brinque a vontade.</p>
</div>
<div class="campo4 testes">
<h4>Background</h4>
<div class="bg-box">
<div class="bg1 bg-color"></div>
<div class="bg2 bg-color"></div>
<div class="bg3 bg-color"></div>
</div>
</div>
</form>
</div>
</Section>
</main>
<script src="https://kit.fontawesome.com/152779f1f0.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script src="js/script.js"></script>
</body>
</html>