├── app.js
├── index.html
└── style.css
/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Roger-Melo/pokedex/3cb451df52a9234a85ed04e9a500fc5484d7b8f6/app.js
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | PokeDex
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #EFEFBB;
3 | background: linear-gradient(to right, rgb(197, 230, 236), rgb(239, 187, 230));
4 | color: white;
5 | margin: 0;
6 | font-family: rubik;
7 | }
8 |
9 | .container {
10 | padding: 40px;
11 | margin: 0 auto;
12 | }
13 |
14 | h1 {
15 | text-align: center;
16 | font-size: 54px;
17 | }
18 |
19 | .pokedex {
20 | display: grid;
21 | grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
22 | grid-gap: 20px;
23 | padding-inline-start: 0;
24 | }
25 |
26 | .card {
27 | list-style: none;
28 | padding: 40px;
29 | color: #222;
30 | text-align: center;
31 | border-radius: 20px;
32 | position: relative;
33 | }
34 |
35 | .card::after {
36 | content: "";
37 | display: block;
38 | width: 50%;
39 | height: 45%;
40 | border-radius: 100%;
41 | background-color: #fff;
42 | opacity: .7;
43 | position: absolute;
44 | top: 15%;
45 | left: 25%;
46 | }
47 |
48 | .steel {
49 | background-color: #f4f4f4;
50 | }
51 |
52 | .fire {
53 | background-color: #FDDFDF;
54 | }
55 |
56 | .grass {
57 | background-color: #DEFDE0;
58 | }
59 |
60 | .electric {
61 | background-color: #FCF7DE;
62 | }
63 |
64 | .water, .ice {
65 | background-color: #DEF3FD;
66 | }
67 |
68 | .ground {
69 | background-color: #f4e7da;
70 | }
71 |
72 | .rock {
73 | background-color: #d5d5d4;
74 | }
75 |
76 | .fairy {
77 | background-color: #fceaff;
78 | }
79 |
80 | .poison {
81 | background-color: #98d7a5;
82 | }
83 |
84 | .bug {
85 | background-color: #f8d5a3;
86 | }
87 |
88 | .dragon {
89 | background-color: #97b3e6;
90 | }
91 |
92 | .psychic {
93 | background-color: #eaeda1;
94 | }
95 |
96 | .flying {
97 | background-color: #F5F5F5;
98 | }
99 |
100 | .fighting {
101 | background-color: #E6E0D4;
102 | }
103 |
104 | .normal {
105 | background-color: #F5F5F5;
106 | }
107 |
108 | .card:hover {
109 | animation: bounce 0.5s linear;
110 | }
111 |
112 | .card-title {
113 | text-transform: capitalize;
114 | margin-bottom: 0px;
115 | font-size: 32px;
116 | font-weight: normal;
117 | position: relative;
118 | z-index: 2;
119 | }
120 |
121 | .card-subtitle {
122 | margin-top: 5px;
123 | color: #666;
124 | font-weight: lighter;
125 | position: relative;
126 | z-index: 2;
127 | }
128 |
129 | .card-image {
130 | height: 180px;
131 | position: relative;
132 | z-index: 2;
133 | }
134 |
135 | @keyframes bounce {
136 | 20% {
137 | transform: translateY(-6px);
138 | }
139 | 40% {
140 | transform: translateY(0px);
141 | }
142 |
143 | 80% {
144 | transform: translateY(-2px);
145 | }
146 | 100% {
147 | transform: translateY(0);
148 | }
149 | }
--------------------------------------------------------------------------------