-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathslide2.html
More file actions
201 lines (191 loc) · 9.79 KB
/
Copy pathslide2.html
File metadata and controls
201 lines (191 loc) · 9.79 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table of Contents</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Poppins', sans-serif;
}
.slide {
width: 1280px;
min-height: 836px; /* Restored to original height */
position: relative;
background: linear-gradient(135deg, #1a1c3b 0%, #2a3074 100%);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.crypto-grid {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
z-index: 0;
}
.title {
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.toc-item {
transition: all 0.2s ease;
}
.toc-item:hover {
transform: translateX(10px);
background-color: rgba(255, 255, 255, 0.05);
}
.toc-icon {
transition: all 0.3s ease;
}
.toc-item:hover .toc-icon {
transform: scale(1.2);
}
.memecoin {
position: absolute;
opacity: 0.05;
z-index: 0;
}
.glow-effect {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
filter: blur(80px);
z-index: 0;
}
.bottom-text {
position: absolute;
bottom: 30px; /* Positioned lower toward the bottom of the slide */
left: 0;
right: 0;
text-align: center;
z-index: 10;
background-color: rgba(26, 28, 59, 0.7);
padding: 8px 16px;
margin: 0 auto;
width: fit-content;
border-radius: 20px;
border: 1px solid rgba(234, 179, 8, 0.3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="slide p-12 relative">
<!-- Background elements -->
<div class="crypto-grid"></div>
<div class="glow-effect bg-yellow-500 opacity-10" style="top: -100px; right: -100px;"></div>
<div class="glow-effect bg-blue-500 opacity-10" style="bottom: -100px; left: -100px;"></div>
<!-- Decorative elements -->
<div class="memecoin" style="top: 150px; right: 100px; font-size: 180px;">
<i class="fas fa-dog"></i>
</div>
<div class="memecoin" style="bottom: 120px; left: 80px; font-size: 160px;">
<i class="fas fa-rocket"></i>
</div>
<!-- Main content -->
<div class="z-10 flex flex-col h-full">
<!-- Title -->
<div class="mb-8">
<h1 class="title text-5xl font-bold text-white mb-4">Table of Contents</h1>
<div class="w-32 h-1 bg-gradient-to-r from-yellow-400 to-yellow-300"></div>
</div>
<!-- Table of Contents -->
<div class="flex justify-center">
<div class="w-4/5">
<div class="space-y-4">
<!-- Item 1 -->
<div class="toc-item flex items-center p-3 rounded-lg">
<div class="toc-icon h-12 w-12 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg mr-5">
<i class="fas fa-file-alt text-xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-blue-300">1. Proposal Overview</h3>
<p class="text-white text-opacity-60 text-sm">Introduction to HighCrypto's services</p>
</div>
</div>
<!-- Item 2 -->
<div class="toc-item flex items-center p-3 rounded-lg">
<div class="toc-icon h-12 w-12 rounded-full bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg mr-5">
<i class="fas fa-chart-line text-xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-green-300">2. Importance of the Korean Market</h3>
<p class="text-white text-opacity-60 text-sm">Why Korea is crucial for memecoin projects</p>
</div>
</div>
<!-- Item 3 -->
<div class="toc-item flex items-center p-3 rounded-lg">
<div class="toc-icon h-12 w-12 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center shadow-lg mr-5">
<i class="fas fa-exchange-alt text-xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-purple-300">3. Korean Exchange Listing Requirements</h3>
<p class="text-white text-opacity-60 text-sm">What you need to get listed on Korean exchanges</p>
</div>
</div>
<!-- Item 4 -->
<div class="toc-item flex items-center p-3 rounded-lg">
<div class="toc-icon h-12 w-12 rounded-full bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center shadow-lg mr-5">
<i class="fas fa-bullhorn text-xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-red-300">4. Detailed Marketing Services</h3>
<p class="text-white text-opacity-60 text-sm">Our comprehensive service offerings</p>
</div>
</div>
<!-- Item 5 -->
<div class="toc-item flex items-center p-3 rounded-lg">
<div class="toc-icon h-12 w-12 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center shadow-lg mr-5">
<i class="fas fa-box-open text-xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-yellow-300">5. Service Package Proposals</h3>
<p class="text-white text-opacity-60 text-sm">Tailored packages to meet your goals</p>
</div>
</div>
<!-- Item 6 -->
<div class="toc-item flex items-center p-3 rounded-lg">
<div class="toc-icon h-12 w-12 rounded-full bg-gradient-to-br from-pink-400 to-pink-600 flex items-center justify-center shadow-lg mr-5">
<i class="fas fa-trophy text-xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-pink-300">6. Expected Benefits and Conclusion</h3>
<p class="text-white text-opacity-60 text-sm">What you'll gain from our partnership</p>
</div>
</div>
<!-- Item 7 -->
<div class="toc-item flex items-center p-3 rounded-lg">
<div class="toc-icon h-12 w-12 rounded-full bg-gradient-to-br from-indigo-400 to-indigo-600 flex items-center justify-center shadow-lg mr-5">
<i class="fas fa-address-card text-xl text-white"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-indigo-300">7. Contact Information</h3>
<p class="text-white text-opacity-60 text-sm">How to reach us for consultation</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom decoration - Repositioned lower between item 7 and bottom with enhanced styling -->
<div class="bottom-text">
<div class="flex items-center justify-center text-yellow-300 font-semibold">
<i class="fas fa-paw mr-2 text-xl"></i>
<span>Let's navigate your memecoin success story!</span>
</div>
</div>
</div>
</body>
</html>