-
Notifications
You must be signed in to change notification settings - Fork 1
/
hardware-mobile.html
218 lines (202 loc) · 8.64 KB
/
hardware-mobile.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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html>
<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" />
<link
rel="shortcut icon"
href="./src/imagens/favicon.ico"
type="image/x-icon"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./src/css/reset.css" />
<link rel="stylesheet" href="./src/css/estilos.css" />
<link rel="stylesheet" href="./src/css/responsivo.css" />
<meta charset="utf-8" />
<title>| História | Atari 2600 |</title>
</head>
<body>
<div id="secao-01" class="secao">
<header class="cabecalho">
<a href="/">
<img class="logo" src="./src/imagens/logo-atari.png" alt="logo atari" />
</a>
<nav>
<ul class="menu">
<li>
<a href="./index.html">VOLTAR</a>
</li>
</ul>
</nav>
</header>
<span class="icone-scroll">
<span class="scroll-next scroll"></span>
</span>
<main class="container">
<div class="informacoes">
<img
class="imagem-titulo"
src="./src/imagens/titulo.png"
alt="imagem do título do filme"
/>
<p class="descricao-historia" align="justify" id="descricao1">
A Atari foi fundada em 1972 por Nolan Bushnell e Ted Dabney e foi uma das primeiras empresas a popularizar e difundir jogos em todo o mundo. A marca alcançou sucesso com o lançamento de Pong para fliperamas e alcançou sua revolução em 1977, quando lançou o VCS (Video Computer System), conhecido como Atari 2600, projetado por Jay Miner. Este console chegou ao Brasil em 1983 e se tornou um sucesso de vendas entre 1984 e 1986, e seus jogos ainda são lembrados por muitos que viveram sua juventude naquela época.
</p>
</div>
<img class="atari" src="./src/imagens/criadores.png" alt="O fiel" />
</div>
<div id="secao-02" class="secao">
<header class="cabecalho">
<a href="/">
<img class="logo" src="./src/imagens/logo-atari.png" alt="logo atari" />
</a>
<nav>
<ul class="menu">
<li>
<a href="./index.html">VOLTAR</a>
</li>
</ul>
</nav>
</header>
<span class="icone-scroll">
<span class="scroll-next scroll"></span>
</span>
<main class="container">
<div class="informacoes">
<img
class="imagem-titulo"
src="./src/imagens/titulo.png"
alt="imagem do título do filme"
/>
<p class="descricao-historia" align="justify" id="descricao2">
Em 1973, a Atari adquiriu a Cyan Engineering, uma empresa especializada em desenvolvimento de jogos e começou a trabalhar em um sistema de video game avançado, chamado "Stella". A diferença entre ele e as máquinas anteriores é que ele usava uma CPU completa, o MOS Technology 6502, em vez de lógica de programação fixa para rodar um grande número de jogos. Ele também incluía chips de RAM e E/S, MOS Technology 6532, um chip de display e som próprio, chamado TIA, para melhorar a experiência de jogo
</p>
</div>
<img class="atari" src="./src/imagens/composicao6502.png" alt="O fiel" />
</div>
</div>
<div id="secao-03" class="secao">
<header class="cabecalho">
<a href="/">
<img class="logo" src="./src/imagens/logo-atari.png" alt="logo atari" />
</a>
<nav>
<ul class="menu">
<li>
<a href="./index.html">VOLTAR</a>
</li>
</ul>
</nav>
</header>
<span class="icone-scroll">
<span class="scroll-next scroll"></span>
</span>
<main class="container">
<div class="informacoes">
<img
class="imagem-titulo"
src="./src/imagens/titulo.png"
alt="imagem do título do filme"
/>
<p class="descricao-historia" align=justify id="descricao3">
A equipe de desenvolvimento estava trabalhando arduamente para lançar seu produto antes de concorrentes. Eles contrataram Jay Miner, um especialista em chips, que conseguiu condensar vários circuitos em um único chip, tornando o TIA único. Após testes, o sistema estava pronto para ser vendido e foi lançado em 1977, custando cerca de 100 milhões de dólares. O preço inicial foi de 199 dólares, incluindo 9 jogos, e foi um sucesso comercial.
</p>
</div>
<img class="atari" src="./src/imagens/imagem2600.png" alt="O fiel" />
</div>
<div id="secao-04" class="secao">
<header class="cabecalho">
<a href="/">
<img class="logo" src="./src/imagens/logo-atari.png" alt="logo atari" />
</a>
<nav>
<ul class="menu">
<li>
<a href="./index.html">VOLTAR</a>
</li>
</ul>
</nav>
</header>
<span class="icone-scroll">
<span class="scroll-next scroll"></span>
</span>
<main class="container">
<div class="informacoes">
<img
class="imagem-titulo"
src="./src/imagens/titulo.png"
alt="imagem do título do filme"
/>
<p class="descricao-historia" align=justify id="descricao4">
A Atari lançou o 2600 em 1979, tornando-se um sucesso com milhões de unidades vendidas e o jogo Space Invaders aumentando ainda mais a popularidade, levando à venda de mais de 8 milhões de unidades em 1982. O 2600 se tornou um ícone da indústria de jogos.
</p>
</div>
<img class="atari" src="./src/imagens/ataricaixa.png" alt="O fiel" />
</div>
<div id="secao-05" class="secao">
<header class="cabecalho">
<a href="/">
<img class="logo" src="./src/imagens/logo-atari.png" alt="logo atari" />
</a>
<nav>
<ul class="menu">
<li>
<a href="./index.html">VOLTAR</a>
</li>
</ul>
</nav>
</header>
<span class="icone-scroll">
<span class="scroll-top scroll"></span>
<span class="scroll-top scroll"></span>
</span>
<main class="container">
<div class="informacoes">
<img
class="imagem-titulo"
src="./src/imagens/titulo.png"
alt="imagem do título do filme"
/>
<p class="descricao-historia" align=justify id="descricao5">
A Atari foi uma empresa de jogos de sucesso com o lançamento do Atari 2600, mas enfrentou problemas com projetos ruins e insatisfação dos funcionários. Desenvolvedores de jogos saíram da empresa para fundar suas próprias e a Activision superou a Atari em popularidade. A popularidade dos jogos decaiu no final dos anos 80 com o surgimento de computadores melhores. Apesar dos obstáculos, o Atari 2600 foi importante para o avanço tecnológico e marcou a memória de muitos jovens na época.
</p>
</div>
<img class="atari" src="./src/imagens/alllinhas.png" alt="O fiel" />
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var _AlturaDocumento = $(window).height(); //pega altura da janela
function AlturaSecao() {
$('.secao').height(_AlturaDocumento); //atribui o valor da variável a todas as divs com a classe secao
}
function ScrollSecao() {
console.log('entrou');
var body = $('html, body');
if ($(this).parent('.secao').is('#secao-01')) {
//verifica se está na primeira seção e rola para a segunda
body.animate({ scrollTop: _AlturaDocumento }, '500');
} else if ($(this).parent('.secao').is('#secao-02')) {
//verifica se está na segunda seção e rola para a terceira
body.animate({ scrollTop: _AlturaDocumento * 2 }, '500');
} else if ($(this).parent('.secao').is('#secao-03')) {
//verifica se está na terceira seção e rola para a quarta
body.animate({ scrollTop: _AlturaDocumento * 3 }, '500');
} else if ($(this).parent('.secao').is('#secao-04')){
//verifica se está na terceira seção e rola para a quinta
body.animate({ scrollTop: _AlturaDocumento * 4 }, '500');
}else {
//rola para o início da página
body.animate({ scrollTop: 0}, '500');
}
}
$('.icone-scroll').click(ScrollSecao); //chama a função na ação de click no ícone
$(AlturaSecao); //chama a função só depois que o documento estiver completamente carregado
</script>
</html>