-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (129 loc) · 8.69 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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 property="og:title" content="Marvel API">
<meta property="og:site_name" content="Marvel API">
<meta property="og:description" content="Marvel API - André">
<!-- <meta property="og:image" content="">-->
<!-- <meta property="og:image:type" content="image/jpeg">-->
<!-- <meta property="og:image:width" content="300">-->
<!-- <meta property="og:image:height" content="300">-->
<meta property="og:type" content="website">
<meta name="description" content="Marvel API - André">
<meta name="keywords" content="Marvel API">
<meta name="theme-color" content="#ECECEC">
<meta name="language" content="pt-br">
<title>Marvel API</title>
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/framework.css">
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<header class="primary-header container flex space-btwn center-y-row">
<a title="Ir para o site da Objective" href="https://www.objective.com.br/" rel="nofollow noreferrer">
<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="180" height="37.823" viewBox="0 0 180 37.823">
<g transform="translate(-4 -5.8)">
<path fill="#1d252c"
d="M105.111,35.5a9.138,9.138,0,0,1-5.864-2.061l-.7-.581L97.709,34.8l-4.209.029V5.8h5.747V16.627l1.045-.639a9.187,9.187,0,0,1,4.819-1.335,10.321,10.321,0,0,1,7.4,2.9,10.558,10.558,0,0,1,2.874,7.489C115.387,31.228,111.178,35.5,105.111,35.5Zm-.958-15.849a5.276,5.276,0,0,0-5.341,5.428,5.342,5.342,0,1,0,10.682,0A5.276,5.276,0,0,0,104.153,19.646Z"
transform="translate(-63.52)"/>
<path fill="#1d252c" d="M482.924,56.139,475,35.5h5.864l4.7,13.295L490.152,35.5h5.689l-7.808,20.639Z"
transform="translate(-334.28 -21.079)"/>
<path fill="#e56919" d="M388,17.366V5.9h5.747v5.718h5.747v5.747Z"
transform="translate(-272.534 -0.071)"/>
<path fill="#1d252c"
d="M394.805,70.262c-4.209,0-6.705-2.525-6.705-6.734V55.4h5.718v6.909a2.956,2.956,0,0,0,3.164,3.106h1.887l.058,4.877h-4.122Z"
transform="translate(-272.605 -35.202)"/>
<rect fill="#e56919" width="5.747" height="5.747" transform="translate(130.967 5.829)"/>
<rect fill="#1d252c" width="5.835" height="20.61" transform="translate(130.909 14.421)"/>
<path fill="#1d252c"
d="M565.643,49.511a4.92,4.92,0,0,1-3.919,1.974,4.863,4.863,0,0,1-4.877-4.848H572.2l.029-.29c.029-.348.058-.668.058-.987v-.087c-.029-5.835-4.5-10.073-10.624-10.073S551.1,39.554,551.1,45.534c0,6.009,4.441,10.363,10.566,10.363a10.258,10.258,0,0,0,9.753-6.009l.145-.406h-5.922ZM561.7,39.554a4.721,4.721,0,0,1,4.7,4.209h-9.376A4.672,4.672,0,0,1,561.7,39.554Z"
transform="translate(-388.29 -20.866)"/>
<path fill="#1d252c"
d="M230.443,49.511a4.92,4.92,0,0,1-3.919,1.974,4.863,4.863,0,0,1-4.877-4.848H237l.029-.29c.029-.348.058-.668.058-.987v-.087c-.029-5.835-4.5-10.073-10.624-10.073S215.9,39.554,215.9,45.534c0,6.009,4.441,10.363,10.566,10.363a10.258,10.258,0,0,0,9.753-6.009l.145-.406h-5.922ZM226.5,39.554a4.721,4.721,0,0,1,4.7,4.209h-9.376A4.672,4.672,0,0,1,226.5,39.554Z"
transform="translate(-150.391 -20.866)"/>
<g transform="translate(51.721 5.829)">
<rect fill="#e56919" width="5.747" height="5.747" transform="translate(4.296 0)"/>
<path fill="#1d252c"
d="M172.7,35.4V56.648h0a3.041,3.041,0,0,1-3.019,3.048H168.4v4.935h2.99a7.061,7.061,0,0,0,7.054-7.054h0V35.4Z"
transform="translate(-168.4 -26.837)"/>
</g>
<g transform="translate(4 14.363)">
<path fill="#e56919"
d="M10.154,48.246a6,6,0,0,1-.61-2.642,5.209,5.209,0,0,1,5.312-5.457,5.487,5.487,0,0,1,2.7.7l3.716-3.716A11.572,11.572,0,0,0,14.856,35.3C8.557,35.3,4,39.654,4,45.6a10.045,10.045,0,0,0,2.293,6.531Z"
transform="translate(-4 -35.3)"/>
<path fill="#1d252c"
d="M30.347,52.132a5.781,5.781,0,0,1,.61,2.7,5.458,5.458,0,0,1-1.509,3.919,5.255,5.255,0,0,1-3.8,1.538h0a5.424,5.424,0,0,1-2.758-.726L19.2,63.278a11.685,11.685,0,0,0,6.444,1.858c6.3,0,10.856-4.325,10.856-10.276a9.99,9.99,0,0,0-2.322-6.56Z"
transform="translate(-14.788 -44.526)"/>
</g>
<path fill="#1d252c"
d="M321.606,47.253h-5.689c-.029.116-.087.232-.116.348h0a4.886,4.886,0,0,1-4.615,3.077c-2.932,0-5.08-2.293-5.08-5.457a5.077,5.077,0,0,1,5.08-5.4,5.151,5.151,0,0,1,3.222,1.1,4.328,4.328,0,0,1,.639.639,4.542,4.542,0,0,1,.668.987,1.685,1.685,0,0,1,.145.406h5.689a9.235,9.235,0,0,0-.581-2,.028.028,0,0,0-.029-.029c-.145-.319-.232-.523-.232-.523h0c-1.655-3.483-5.109-5.6-9.492-5.6-6.415,0-10.914,4.3-10.914,10.421,0,6.1,4.586,10.508,10.885,10.508h.145a10.209,10.209,0,0,0,9.869-6.851,12.225,12.225,0,0,0,.348-1.219V47.63C321.577,47.485,321.577,47.369,321.606,47.253Z"
transform="translate(-210.291 -20.582)"/>
</g>
</svg>
</a>
<div class="user-content flex center-y-row">
<p class="name"><span class="font-bold">André J. Bez Birolo</span> Teste de Front-end</p>
<a class="button-cb font-bold" href="/">CB</a>
</div>
</header>
<main>
<div class="container">
<h1 class="title font-bold">Busca de personagens</h1>
<div class="search-container flex column">
<label for="search" class="flex column">
Nome do personagem
</label>
<div class="input-container">
<input name="search" id="search" type="text" placeholder="Pesquise">
<svg class="search-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.8897 12.42C10.6275 13.5577 8.9565 14.25 7.125 14.25C3.19275 14.25 0 11.0573 0 7.125C0 3.19275 3.19275 0 7.125 0C11.0573 0 14.25 3.19275 14.25 7.125C14.25 8.9565 13.5577 10.6275 12.42 11.8897L18 17.4697L17.4697 18L11.8897 12.42V12.42ZM7.125 0.75C10.6432 0.75 13.5 3.60675 13.5 7.125C13.5 10.6432 10.6432 13.5 7.125 13.5C3.60675 13.5 0.75 10.6432 0.75 7.125C0.75 3.60675 3.60675 0.75 7.125 0.75V0.75Z"
fill="#8E8E8E"/>
</svg>
</div>
</div>
<div class="characters-container">
<div class="secondary-header flex">
<p class="item">Personagem</p>
<p class="item hide-from-phone">Séries</p>
<p class="item hide-from-phone">Eventos</p>
</div>
<ul class="list-container">
</ul>
<div class="loading center-full">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="margin: auto; display: block; shape-rendering: auto;" width="200px"
height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="32" stroke-width="8" stroke="#555555"
stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s"
keyTimes="0;1"
values="0 50 50;360 50 50"></animateTransform>
</circle>
</svg>
</div>
</div>
</div>
</main>
<footer>
<div class="pagination-container container flex center-full">
</div>
</footer>
</body>
<script src="scripts/debounce.js"></script>
<script src="scripts/actions/loading.js"></script>
<script src="scripts/actions/heroDetails.js"></script>
<script src="scripts/api/variables.js"></script>
<script src="scripts/api/get.js"></script>
<script src="scripts/actions/searchInput.js"></script>
<script src="scripts/actions/showList.js"></script>
<script src="scripts/actions/resetList.js"></script>
<script src="scripts/generators/createCards.js"></script>
<script src="scripts/generators/createPagination.js"></script>
<script src="scripts/generators/createPopup.js"></script>
<script src="scripts/actions/activePagination.js"></script>
<script src="scripts/index.js"></script>
</html>