-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (100 loc) · 3.61 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
<!DOCTYPE html>
<html lang="en">
<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>Pokemon API</title>
<!-- My Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<!-- My Icon -->
<link rel="icon" href="./src/assets/img/icon.png" />
<!-- My Axios CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- My CSS -->
<link rel="stylesheet" href="./src/css/style.css" />
<link rel="stylesheet" href="./src/css/navigation.css" />
<link rel="stylesheet" href="./src/css/search.css" />
<link rel="stylesheet" href="./src/css/loading.css" />
<link rel="stylesheet" href="./src/css/not-found.css" />
<link rel="stylesheet" href="./src/css/pagination.css" />
<link rel="stylesheet" href="./src/css/header.css" />
<link rel="stylesheet" href="./src/css/main.css" />
<link rel="stylesheet" href="./src/css/content.css" />
<link rel="stylesheet" href="./src/css/content-details.css" />
<link rel="stylesheet" href="./src/css/aside.css" />
<link rel="stylesheet" href="./src/css/footer.css" />
</head>
<body>
<nav>
<div class="logo">
<a href="#">
<img src="./src/assets/img/logo.png" alt="Logo Pokemon" />
</a>
</div>
</nav>
<header>
<div class="header-text">
<h1>Pokemon</h1>
<p>Gotta learn 'em all!</p>
</div>
</header>
<main>
<div class="input-container">
<input type="text" id="search-input" placeholder="Cari Pokemon..." />
</div>
<div id="loading" class="loading-container">
<div class="loader"></div>
<div>Tunggu Sebentar...</div>
</div>
<div id="not-found" class="not-found-message">Item tidak ditemukan</div>
<div class="container" id="container">
<section>
<article class="result" id="result"></article>
</section>
<div id="pagination" class="pagination"></div>
</div>
<aside>
<section class="section-1">
<article>
<h1>Pokemon</h1>
<p>
Pokémon adalah salah satu waralaba media yang dimiliki oleh
perusahaan permainan video Nintendo dan diciptakan oleh Satoshi
Tajiri pada 1995. Pada mulanya, Pokémon adalah seri permainan
video yang identik dengan konsol Game Boy.
</p>
<figure>
<img src="./src/assets/img/pokemon.jpg" alt="Pokemon Img" />
<figcaption>Pokemon dan Trainer</figcaption>
</figure>
</article>
</section>
<section class="section-2">
<article>
<h1>Sejarah Pokemon</h1>
<p>
Dilansir dari BBC, Pokemon dibuat oleh pria asal Jepang bernama
Satoshi Tajiri dan temannya Ken Sugimori yang merupakan seorang
ilustrator. Pada tahun 1982, Satosi memulai majalah game bernama
Game Freak bersama teman-temannya.
</p>
<figure>
<img src="./src/assets/img/pokemon2.jpeg" alt="Pokemon Img" />
<figcaption>Boneka Pokemon</figcaption>
</figure>
</article>
</section>
</aside>
</main>
<footer>
<p>Created by © 2023 Rifki Ramadhan</p>
<span>Pokemon Collection </span>
</footer>
<!-- My JavaScript -->
<script src="./src/js/script.js"></script>
</body>
</html>