-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
209 lines (199 loc) · 11.1 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!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">
<link rel="stylesheet" href="./styles.css">
<script src="./script.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/db11008d79.js" crossorigin="anonymous"></script>
<link rel="icon" href="./images/title.png" type="image/icon type">
<title>Crypto Website</title>
</head>
<body>
<!-- NAVBAR -->
<header>
<div class="nav-container">
<nav>
<div class="logo-wrap slide-left">
<a href="#" class="logo">CRYPTO</a>
</div>
<ul class="nav-ul slide-right">
<li class="nav-li"><a href="#about" class="nav-a">about</a></li>
<li class="nav-li"><a href="#pricing" class="nav-a">pricing</a></li>
<li class="nav-li"><a href="#reviews" class="nav-a">reviews</a></li>
<li class="nav-li"><a href="#contact" class="nav-a">contact</a></li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</div>
</header>
<!-- HERO -->
<section class="hero">
<img src="./images/circle.png" class="circle">
<img src="./images/ellipse.png" class="ellipse">
<div class="container">
<div class="split">
<div class="hero-left hidden">
<h1 class="h1">Discover and collect NFTs</h1>
<p class="body">The most secure marketplace for buying and selling unique crypto assets.</p>
<div class="btn-wrap">
<a href="#" class="btn subheading">buy NFTs</a>
<a href="#" class="ghost subheading">sell NFTs</a>
</div>
</div>
<div class="hero-right hidden">
<img src="./images/hero comp.png">
</div>
</div>
</div>
</section>
<!-- COMPANY -->
<section class="company hidden-blur">
<div class="container">
<h2 class="subheading">featured on</h2>
</div>
<div class="marque" id="marque-animation">
<div class="marque-content">
<li></li>
<li><img src="./images/tech.svg"></li>
<li></li>
<li><img src="./images/forbes.svg"></li>
<li></li>
<li><img src="./images/pgt.svg"></li>
<li></li>
<li><img src="./images/fast.svg"></li>
</div>
</div>
<div class="marque-fixed" id="marque-fixed">
<div class="marque-list">
<img src="./images/tech.svg">
<img src="./images/forbes.svg">
<img src="./images/pgt.svg">
<img src="./images/fast.svg">
</div>
</div>
</section>
<!-- BUY -->
<section class="buy slide-left" id="about">
<div class="container">
<div class="split">
<div class="buy-left">
<img src="./images/layout.svg">
</div>
<div class="buy-right normalizer">
<h2 class="subheading">analytics</h2>
<h1 class="h1">Built-in analytics to track your NFTs</h1>
<p class="body">Use our build in analytics dashboard to pull valuable insights and monitor the value of your Crypto portfolio over time.</p>
<a href="#" class="btn subheading">view our pricing</a>
</div>
</div>
</div>
</section>
<!-- BUY 2 -->
<section class="buy-two slide-right">
<div class="container">
<div class="split">
<div class="two-left normalizer">
<h2 class="subheading">24/7 access</h2>
<h1 class="h1">sell your NFTs from anywhere at any time</h1>
<p class="body">With our easy-to-use platform, you can buy or sell assets from anywhere in the world, at any time</p>
<a href="#" class="btn subheading">get started</a>
</div>
<div class="two-right">
<img src="./images/phone.svg">
</div>
</div>
</div>
</section>
<!-- EVENT -->
<section class="event slide-left" id="pricing">
<div class="container">
<div class="event-wrap normalizer">
<h2 class="subheading">are you ready?</h2>
<h1 class="h1">be a part of <br>the</br> next big thing</h1>
<a href="#" class="btn subheading">get started</a>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="reviews" id="reviews">
<div class="container normalizer">
<h2 class="review-title subheading hidden-blur">testimonials</h2>
<h1 class="h1 hidden-blur">read what other have to say</h1>
<div class="grid-parent">
<div class="grid-item normalizer">
<img src="./images/hp.png" class="grid-img">
<h2 class="subheading">harry james potter</h2>
<p class="body">If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.</p>
</div>
<div class="grid-item normalizer">
<img src="./images/hg.png" class="grid-img">
<h2 class="subheading">hermione jean granger</h2>
<p class="body">Because that's what Hermione does. When in doubt, go to the library.
</p>
</div>
<div class="grid-item normalizer">
<img src="./images/rw.png" class="grid-img">
<h2 class="subheading">ronald bilius weasley</h2>
<p class="body">I think we've outgrown full-time education ... Time to test our talents in the real world, d'you reckon?
</p>
</div>
</div>
</div>
</section>
<div class="scroll-up">
<i class="fa-solid fa-up"></i>
</div>
<!-- FOOTER -->
<section class="footer" id="contact">
<div class="container">
<a href="#" class="logo">CRYPTO</a>
<div class="row">
<div class="footer-col">
<h4>Crypto</h4>
<ul>
<li class="footer-li"><a href="" class="footer-a">Home</a></li>
<li class="footer-li"><a href="" class="footer-a">About</a></li>
<li class="footer-li"><a href="" class="footer-a">Buy NFTs</a></li>
<li class="footer-li"><a href="" class="footer-a">Sell NFTs</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Market</h4>
<ul>
<li class="footer-li"><a href="" class="footer-a">Browse</a></li>
<li class="footer-li"><a href="" class="footer-a">Buy NFTs</a></li>
<li class="footer-li"><a href="" class="footer-a">Sell NFTs</a></li>
</ul>
</div>
<div class="footer-col icons">
<h4>Contact</h4>
<ul>
<li class="footer-li"><a href="" class="footer-a"><i class="fa-brands fa-square-twitter fa-2x"></i></a></li>
<li class="footer-li"><a href="" class="footer-a"><i class="fa-brands fa-square-instagram fa-2x"></i></a></li>
<li class="footer-li"><a href="" class="footer-a"><i class="fa-brands fa-square-youtube fa-2x"></i></a></li>
<li class="footer-li"><a href="" class="footer-a"><i class="fa-brands fa-square-github fa-2x"></i></a></li>
</ul>
</div>
<div class="newsletter">
<h4>join our newsletter</h4>
<div class="news-wrap">
<input type="text" placeholder="email address" class="footer-input">
<a href="#" class="footer-btn btn">submit</a>
</div>
</div>
</div>
</div>
</section>
<section class="footer-svg">
<svg id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 280" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(154, 213, 214, 1)" offset="0%"></stop><stop stop-color="rgba(127, 127, 214, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,224L21.8,224C43.6,224,87,224,131,196C174.5,168,218,112,262,102.7C305.5,93,349,131,393,130.7C436.4,131,480,93,524,98C567.3,103,611,149,655,177.3C698.2,205,742,215,785,205.3C829.1,196,873,168,916,163.3C960,159,1004,177,1047,196C1090.9,215,1135,233,1178,228.7C1221.8,224,1265,196,1309,196C1352.7,196,1396,224,1440,224C1483.6,224,1527,196,1571,158.7C1614.5,121,1658,75,1702,84C1745.5,93,1789,159,1833,168C1876.4,177,1920,131,1964,93.3C2007.3,56,2051,28,2095,32.7C2138.2,37,2182,75,2225,88.7C2269.1,103,2313,93,2356,84C2400,75,2444,65,2487,79.3C2530.9,93,2575,131,2618,140C2661.8,149,2705,131,2749,107.3C2792.7,84,2836,56,2880,51.3C2923.6,47,2967,65,3011,93.3C3054.5,121,3098,159,3120,177.3L3141.8,196L3141.8,280L3120,280C3098.2,280,3055,280,3011,280C2967.3,280,2924,280,2880,280C2836.4,280,2793,280,2749,280C2705.5,280,2662,280,2618,280C2574.5,280,2531,280,2487,280C2443.6,280,2400,280,2356,280C2312.7,280,2269,280,2225,280C2181.8,280,2138,280,2095,280C2050.9,280,2007,280,1964,280C1920,280,1876,280,1833,280C1789.1,280,1745,280,1702,280C1658.2,280,1615,280,1571,280C1527.3,280,1484,280,1440,280C1396.4,280,1353,280,1309,280C1265.5,280,1222,280,1178,280C1134.5,280,1091,280,1047,280C1003.6,280,960,280,916,280C872.7,280,829,280,785,280C741.8,280,698,280,655,280C610.9,280,567,280,524,280C480,280,436,280,393,280C349.1,280,305,280,262,280C218.2,280,175,280,131,280C87.3,280,44,280,22,280L0,280Z"></path></svg>
</section>
</body>
</html>