data-lovers/index.html at master · dudaduarte/data-lovers · GitHub

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
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Data Lovers</title>
  <link rel="stylesheet" href="../data-lovers/src/style.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Coiny|Exo|Luckiest+Guy" rel="stylesheet">
  <link rel="icon" type="image/png" sizes="32x32" href="../data-lovers/images/icons/favicon.ico">
</head>

<body>
  <header class='header-style'>
    <div class='rounded-header'>
      <img src="../data-lovers/images/pokemon-logo.png" class='pokemon-title'>
    </div>
  </header>
  <div class="root">
    <section class='details'>
      <section class='large-info-container'>
        <div class="info-picked-pokemon"></div>
        <div class="evolutions-pokemons">
          <div class="evolution-card">
            <div class='single-pokemon-evolution'></div>
          </div>
        </div>
      </section>
      <div class="img-picked-pokemon"></div>
    </section>
    <section class="pokemons">
      <div class='dropdown-container'>
        <select class='order'>
          <option class="order-option" value="" selected disabled>Sort Pokémons by:</option>
          <option class="order-option" value="crescent">Number - Crescent</option>
          <option class="order-option" value="decrescent">Number - Decrescent</option>
          <option class="order-option" value="a-to-z">A to Z</option>
          <option class="order-option" value="z-to-a">Z to A</option>
        </select>
      </div>
      <section class="container-pokemons-panel">
        <div id="pokemon-div" class='pokemons-panel'></div>
      </section>
      <div class='div-select-type'>
        <div class='div-buttons'>
          <button class='type-pokemon normal' value="Normal">Normal</button>
          <button class='type-pokemon fighting' value='Fighting'>Fighting</button>
          <button class='type-pokemon flying' value='Flying'>Flying</button>
          <button class='type-pokemon poison' value='Poison'>Poison</button>
          <button class='type-pokemon ground' value='Ground'>Ground</button>
          <button class='type-pokemon bug' value='Bug'>Bug</button>
          <button class='type-pokemon ghost' value='Ghost'>Ghost</button>
          <button class='type-pokemon fire' value='Fire'>Fire</button>
          <button class='type-pokemon water' value='Water'>Water</button>
          <button class='type-pokemon ice' value='Ice'>Ice</button>
          <button class='type-pokemon grass' value='Grass'>Grass</button>
          <button class='type-pokemon electric' value='Electric'>Electric</button>
          <button class='type-pokemon psychic' value='Psychic'>Psychic</button>
          <button class='type-pokemon dragon' value='Dragon'>Dragon</button>
          <button class='type-pokemon rock' value='Rock'>Rock</button>
          <button class='type-pokemon all' value='All'>All</button>
        </div>
      </div>
      <div class='div-filter-name'>
        <div class='icon-search'><i class="fas fa-search"></i></div><input id="input-name-pokemon"
          class='input-name-style' type="text" placeholder="Search for a pokémon by name">
      </div>

    </section>
  </div>
  </div>
  <script src="../data-lovers/src/data/pokemon/pokemon.js"></script>
  <script src="../data-lovers/src/data/pokemon/description.js"></script>
  <script src="../data-lovers/src/data/pokemon/images.js"></script>
  <script src="../data-lovers/src/main.js"></script>
</body>
</html>