-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (88 loc) · 4.05 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
<!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">
<meta name="author" content="Wildemberg Renovato, @renovatt">
<meta name="description" content="Galeria de todas as cartas de Yu-Gi-Oh, Yu-Gi-Oh cards">
<meta name="keywords" content="Yu-Gi-Oh, Cards, Game">
<title>Yu-Gi-Oh | Info Cards</title>
<link rel="stylesheet" href="./src/style/style.css">
<link rel="shortcut icon" href="src/assets/icone/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="overlay">
<div class="load"></div>
</div>
<header class="header">
<img class="logo" src="src/assets/img/Yu-Gi-Oh-logo.png" alt="logo">
<section class="open-list-cards">
<span>Lista de Cartas</span><img src="src/assets/img/arrow.png" alt="arrow-icone">
</section>
<section class="easter-egg-content">
<span class="easter-egg"><img src="src/assets/img/easter-egg.png" alt="easter-egg-icone"></span>
</section>
<!--------------Listas normalmente ocultas------------------->
<section class="list-select-card">
<ul class="list-of-name"></ul>
</section>
<section class="list-select-input">
<ul class="list-of-input"></ul>
</section>
<section class="list-beast-name">
<ul class="beast-name"></ul>
</section>
<!----------------------------------------------------------->
</header>
<main class="container">
<figure class="all-preview">
<img id="card-preview" alt="back-card">
</figure>
<article class="main-content">
<section class="info-data">
<section class="alert">
<p>Digite um nome válido!</p>
<button class="btn-alert">Ok</button>
</section>
<img class="close-desc" src="src/assets/img/close.png" alt="close-button">
<div><span id="description-content" class="description-content"></span></div>
<div>Nome: <span id="card-name"></span></div>
<div>Tipo: <span id="type"></span></div>
<div>ID: <span id="id"></span></div>
<div>Nível: <span id="level"></dspaniv></div>
<div>Conjunto: <span id="card-set"></span></div>
<div>Espécie: <span id="race"></span></div>
<div>Posição: <span id="position"></span></div>
<div>Descrição: <img class="description" src="src/assets/img/desc-info.png" alt="description-icon"></div>
<div>Total de Cartas: <span id="total-cards"></span></div>
</section>
<section>
<input class="input" type="search" placeholder="Procure sua carta: Mago Negro" spellcheck="false">
<button class="btn-submit"
>Buscar</button>
</section>
<section class="buttons">
<button class="btn btnPrev">Voltar</button>
<button class="btn btnNext">Próximo</button>
</section>
</article>
<footer class="footer">
<div class="footer">
<p>© 2022 willcode</p>
<p>Powered by <a href="https://www.linkedin.com/in/renovatt/" target="_blank">renovatt</a></p>
</div>
</footer>
</main>
<section class="controls">
<span class="pause"><img src="src/assets/img/pause.png" alt="pause-icone"></span>
</section>
<script type="module" src="src/index.js"></script>
<script src="./src/vanila.js"></script>
<script>
VanillaTilt.init(document.querySelectorAll("#card-preview"), {
max: 25,
})
</script>
</body>
</html>