-
Notifications
You must be signed in to change notification settings - Fork 0
/
explore-nfts.html
119 lines (115 loc) · 3.47 KB
/
explore-nfts.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
<!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>Castle v.01 - Explore</title>
<link rel="stylesheet" href="styles.css" />
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
</head>
<body>
<header class="container">
<a href="index.html">
<img
src="images/crown.png"
alt="logo"
/>
</a>
<div class="btn">
<button>Sign Up</button>
</div>
</header>
<!-- Page Title -->
<section class="explore">
<div class="crown-background">
<img
src="images/crowns.png"
alt="background-img"
/>
</div>
<div class="explore-contents">
<div class="explore-top">
<div class="explore-title title">
<h5>Explore</h5>
</div>
<div class="explore-title-text text">
<p>150 <span class="highlight-yellow">Crowns</span></p>
<span>|</span>
<p>101 <span class="highlight-yellow">Owners</span></p>
<span>|</span>
<p>900 <span class="highlight-yellow">Floor</span></p>
</div>
<div class="explore-navs text">
<a
href="explore-nfts.html"
class="explore-nav explore-nav--active"
>NFTs</a
>
<a
href="explore-activity.html"
class="explore-nav"
>Activity</a
>
</div>
</div>
</div>
</section>
<section class="explore-nft--container ">
<div class="explore-content">
<div id="search-container">
<div class="search-bar">
<button id="search">Search</button>
<input
type="search"
id="search-input"
placeholder="Search By Name or ID..."
/>
</div>
<div id="buttons-filter" class="filters">
<button class="filter-value active" onclick="filterProduct('all')">
All
</button>
<button class="filter-value" onclick="filterProduct('Kings')">
Kings
</button>
<button class="filter-value" onclick="filterProduct('Queens')">
Queens
</button>
<button class="filter-value" onclick="filterProduct('Jacks')">
Jacks
</button>
</div>
</div>
<div id="nft-container" class="container"></div>
</section>
<footer class="container">
<h4>Castle</h4>
<div class="socials">
<a href="#"><ion-icon name="logo-twitter"></ion-icon> @CastleNFTs</a>
<a href="#"><ion-icon name="logo-instagram"></ion-icon> @CastleNFTs</a>
<a href="#"><ion-icon name="logo-discord"></ion-icon> @CastleNFTs</a>
</div>
<div class="copyright">
<p>© 2022</p>
<div class="policy">
<a href="#">Privacy Policy</a>
<a href="#">Terms</a>
</div>
</div>
</footer>
<template class="questions-container"> </template>
<script src="main.js"></script>
</body>
</html>