mirror of
https://github.com/Alvin-Zilverstand/pokedex.git
synced 2026-03-06 21:29:57 +01:00
Add SVG assets for various icons and update settings for live server
This commit is contained in:
79
v2/index.html
Normal file
79
v2/index.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="./pokemon.js" defer></script>
|
||||
<script src="./search.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main class="main">
|
||||
<header class="header home">
|
||||
<div class="container">
|
||||
<div class="logo-wrapper">
|
||||
<img src="./assets/pokeball.svg" alt="pokeball" />
|
||||
<h1>Pokedex</h1>
|
||||
</div>
|
||||
<div class="search-wrapper">
|
||||
<div class="search-wrap">
|
||||
<img
|
||||
src="./assets/search.svg"
|
||||
alt="search icon"
|
||||
class="search-icon"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="search-input body3-fonts"
|
||||
placeholder="Search"
|
||||
id="search-input"
|
||||
/>
|
||||
<img
|
||||
src="./assets/cross.svg"
|
||||
alt="cross icon"
|
||||
class="search-close-icon"
|
||||
id="search-close-icon"
|
||||
/>
|
||||
</div>
|
||||
<div class="sort-wrapper">
|
||||
<div class="sort-wrap">
|
||||
<img
|
||||
src="./assets/sorting.svg"
|
||||
alt="sorting"
|
||||
class="sort-icon"
|
||||
id="sort-icon"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-wrapper">
|
||||
<p class="body2-fonts">Sort by:</p>
|
||||
<div class="filter-wrap">
|
||||
<div>
|
||||
<input
|
||||
type="radio"
|
||||
id="number"
|
||||
name="filters"
|
||||
value="number"
|
||||
checked
|
||||
/>
|
||||
<label for="number" class="body3-fonts">Number</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="name" name="filters" value="name" />
|
||||
<label for="name" class="body3-fonts">Name</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="pokemon-list">
|
||||
<div class="container">
|
||||
<div class="list-wrapper"></div>
|
||||
</div>
|
||||
<div id="not-found-message">Pokemon not found</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user