-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (143 loc) · 6.95 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biblioteca de Jogos</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />">
<script src="./assets/js/loader.js"></script>
</head>
<body>
<div class="loader">
<div class="spin"></div>
</div>
<main class="hiden">
<nav>
<div id="hamburguer">
<div class="linha" id="linha1"></div>
<div class="linha" id="linha2"></div>
<div class="linha" id="linha3"></div>
</div>
<ul>
<li><a href="#home">
<!-- <i class="fa-regular fa-house fa-rotate-180"></i> -->
<i class="fa-solid fa-house"></i>
Home</a></li>
<li><a href="#secao-apresentacao">
<i class="fa-regular fa-user"></i>
Apresentação</a></li>
<li><a href="#secao-projetos">
<i class="fa-solid fa-code-merge"></i>
Projetos</a></li>
<li><a href="#secao-orcamento">
<i class="fa-solid fa-money-check-dollar"></i>
Orçamentos
</a></li>
</ul>
</nav>
<header id ="home">
<h1> Biblioteca de Jogos</h1>
<h2>Desenvolvido por Arthur Guimarães</h2>
<a href="#secao-apresentacao" class="botao">Saiba Mais</a>
</header>
<section id= "secao-apresentacao">
<!-- deixa aqui ou no meio/fim com alguma coisa que eu possa acrecentar -->
<section>
<img id = "avatar" src="./assets/imagens/joysticdoprimeirogame.jpg" alt="foto do joystic do primeiro jogo do mundo">
<div>
<h2> Curiosidade</H2>
<p>Em 1958, William Higinbotham criou o primeiro jogo de videogame em um osciloscópio, uma máquina usada para testar circuitos eletrônicos. O jogo se chamava <strong>
“Tennis for Two”
</strong> e era uma versão simples do tênis de mesa</p>
<a href="#secao-projetos" class="botao">Veja mais aqui</a>
</div>
</section>
</section>
<section id="secao-projetos">
<ul>
<li>
<div class="card">
<div class="card-img-wrapper">
<img src="./assets/imagens/sea.jpg" alt="imagem do projeto " />
</div>
<div class="card-text">
<p>Sea of Thieves é um jogo de mundo aberto sem um objetivo claro, você basicamente deve acumular dinheiro para comprar coisas e subir de nível para se tornar um pirata lendário.</p>
<a href="#" class="botao">saiba mais</a>
</div>
</div>
</li>
<li>
<div class="card">
<div class="card-img-wrapper">
<img src="./assets/imagens/crash.jpg" alt="imagem do projeto " />
</div>
<div class="card-text">
<p>Crash tem como missão parar seus dois criadores em sua busca pela dominação do mundo, reverter toda a poluição que eles causaram, e salvar sua amiga Tawna, uma bandicoot fêmea igualmente criada pelos Doutores Cortex e Brio.</p>
<a href="#" class="botao"> saiba mais</a>
</div>
</li>
<li>
<div class="card">
<div class="card-img-wrapper">
<img src="./assets/imagens/it take.jpg" alt="imagem do projeto " />
</div>
<div class="card-text">
<p> Jogue no papel do briguento casal Cody e May, dois humanos transformados em bonecos por um feitiço mágico. Preso em um mundo fantástico, o casal terá que salvar o seu relacionamento fragmentado como manda o Dr. Hakim, o guru do amor.</p>
<a href="#" class="botao"> saiba mais</a>
</div>
</li>
</ul>
</section>
<!-- aula 3 -->
<section id = "secao-orcamento">
<form action = "#">
<!--para a resposta vai do form -->
<h3>Orçamentos</h3>
<label for="qtde">N. de Jogos</label>
<!-- Rotulo -->
<input type="number" id = "qtde" min = '1 ' value = '1'>
<!-- Input serve para o tipo entrada de dados -->
<label for="JS">Precisa de Capa?</label>
<input type="checkbox" id ="js">
<label for="layout">Capa Dura?</label>
<div class="input-group">
<!-- a div aqui seria para agrupar os componetes de sim e não. -->
<input type="radio" id="layout_sim"name="layout">
<label for="layout_sim">Sim, preciso</label>
<input type="radio" id ="layout_nao"name="layout">
<label for="layout_nao">Não</label>
</div>
<label for="prazo">Prazo</label>
<input type="range" id = "prazo" min = '1' max = '10'>
<!-- input do botao de nivel -->
<output>R$ 0,00</output>
</form>
</section>
<!-- <section id="secao-deteste">
<button> </button>
<div class="teste">
<div class = "titulo"> <h3> Generos </h3> </div>
<div class = "menuh">
<nav>
<a href="#"> Indie </a>
<a href="#"> RPG </a>
</div>
<ul>
<li>
<a href="">teste</a>
</li>
<li>
<a href="">Teste</a>
</li>
</ul>
</nav>
</div>
</section> fazendo testes-->
</body>
</main>
<script src="./assets/js/script.js"></script>
<script src="./assets/js/menu.js"></script>
</html>