Hugging Face's logo

Spaces:
Hoof2
/
social-links
Running

App Files Community
Hoof2 commited on
Commit
d9de757
·
verified ·
1 Parent(s): c2bcc77

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +208 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Social Links
3
- emoji: 🔥
4
- colorFrom: blue
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: social-links
3
+ emoji: 🐳
4
+ colorFrom: purple
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,208 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Connect With Me | Social Links</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #1a1a2e, #16213e);
15
+ min-height: 100vh;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .social-card {
20
+ transition: all 0.3s ease;
21
+ transform-style: preserve-3d;
22
+ position: relative;
23
+ }
24
+
25
+ .social-card:hover {
26
+ transform: translateY(-5px) scale(1.02);
27
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
28
+ }
29
+
30
+ .social-card::before {
31
+ content: '';
32
+ position: absolute;
33
+ top: 0;
34
+ left: 0;
35
+ right: 0;
36
+ bottom: 0;
37
+ background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1));
38
+ opacity: 0;
39
+ transition: opacity 0.3s ease;
40
+ border-radius: 0.75rem;
41
+ }
42
+
43
+ .social-card:hover::before {
44
+ opacity: 1;
45
+ }
46
+
47
+ .avatar {
48
+ border: 3px solid rgba(255,255,255,0.2);
49
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
50
+ transition: all 0.3s ease;
51
+ }
52
+
53
+ .avatar:hover {
54
+ transform: scale(1.05);
55
+ box-shadow: 0 8px 25px rgba(0,0,0,0.4);
56
+ }
57
+
58
+ .pulse {
59
+ animation: pulse 2s infinite;
60
+ }
61
+
62
+ @keyframes pulse {
63
+ 0% {
64
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
65
+ }
66
+ 70% {
67
+ box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
68
+ }
69
+ 100% {
70
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
71
+ }
72
+ }
73
+
74
+ .floating {
75
+ animation: floating 6s ease-in-out infinite;
76
+ }
77
+
78
+ @keyframes floating {
79
+ 0% { transform: translateY(0px); }
80
+ 50% { transform: translateY(-10px); }
81
+ 100% { transform: translateY(0px); }
82
+ }
83
+ </style>
84
+ </head>
85
+ <body class="text-gray-100 flex items-center justify-center p-4">
86
+ <div class="max-w-md w-full mx-auto">
87
+ <div class="text-center mb-8">
88
+ <div class="avatar w-24 h-24 rounded-full overflow-hidden mx-auto mb-4 border-4 border-indigo-500 floating">
89
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover">
90
+ </div>
91
+ <h1 class="text-3xl font-bold mb-1">Sarah Johnson</h1>
92
+ <p class="text-indigo-300 mb-4">Digital Creator & Web Developer</p>
93
+ <p class="text-gray-400 max-w-md mx-auto">Connecting the dots between creativity and technology. Let's build something amazing together!</p>
94
+ </div>
95
+
96
+ <div class="space-y-4 mb-8">
97
+ <div class="social-card bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-4 flex items-center cursor-pointer">
98
+ <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
99
+ <i class="fab fa-twitter text-white text-xl"></i>
100
+ </div>
101
+ <div>
102
+ <h3 class="font-semibold">Twitter</h3>
103
+ <p class="text-xs text-indigo-100">Follow for daily tech insights</p>
104
+ </div>
105
+ <div class="ml-auto">
106
+ <i class="fas fa-arrow-right text-white"></i>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="social-card bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-4 flex items-center cursor-pointer">
111
+ <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
112
+ <i class="fab fa-linkedin-in text-white text-xl"></i>
113
+ </div>
114
+ <div>
115
+ <h3 class="font-semibold">LinkedIn</h3>
116
+ <p class="text-xs text-blue-100">Professional network</p>
117
+ </div>
118
+ <div class="ml-auto">
119
+ <i class="fas fa-arrow-right text-white"></i>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="social-card bg-gradient-to-r from-pink-500 to-rose-500 rounded-xl p-4 flex items-center cursor-pointer">
124
+ <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
125
+ <i class="fab fa-instagram text-white text-xl"></i>
126
+ </div>
127
+ <div>
128
+ <h3 class="font-semibold">Instagram</h3>
129
+ <p class="text-xs text-pink-100">Behind-the-scenes content</p>
130
+ </div>
131
+ <div class="ml-auto">
132
+ <i class="fas fa-arrow-right text-white"></i>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="social-card bg-gradient-to-r from-green-500 to-emerald-500 rounded-xl p-4 flex items-center cursor-pointer">
137
+ <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
138
+ <i class="fab fa-github text-white text-xl"></i>
139
+ </div>
140
+ <div>
141
+ <h3 class="font-semibold">GitHub</h3>
142
+ <p class="text-xs text-green-100">Open-source projects</p>
143
+ </div>
144
+ <div class="ml-auto">
145
+ <i class="fas fa-arrow-right text-white"></i>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="social-card bg-gradient-to-r from-yellow-500 to-amber-500 rounded-xl p-4 flex items-center cursor-pointer">
150
+ <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
151
+ <i class="fas fa-envelope text-white text-xl"></i>
152
+ </div>
153
+ <div>
154
+ <h3 class="font-semibold">Email</h3>
155
+ <p class="text-xs text-yellow-100">Let's collaborate</p>
156
+ </div>
157
+ <div class="ml-auto">
158
+ <i class="fas fa-arrow-right text-white"></i>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="text-center">
164
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-full transition-all duration-300 transform hover:scale-105 pulse">
165
+ Join My Newsletter
166
+ </button>
167
+ </div>
168
+
169
+ <div class="flex justify-center space-x-4 mt-8">
170
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-indigo-600 flex items-center justify-center transition-colors duration-300">
171
+ <i class="fab fa-discord"></i>
172
+ </a>
173
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-red-500 flex items-center justify-center transition-colors duration-300">
174
+ <i class="fab fa-youtube"></i>
175
+ </a>
176
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-blue-400 flex items-center justify-center transition-colors duration-300">
177
+ <i class="fab fa-telegram"></i>
178
+ </a>
179
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 hover:bg-purple-500 flex items-center justify-center transition-colors duration-300">
180
+ <i class="fab fa-twitch"></i>
181
+ </a>
182
+ </div>
183
+ </div>
184
+
185
+ <script>
186
+ // Add click functionality to social cards
187
+ document.querySelectorAll('.social-card').forEach(card => {
188
+ card.addEventListener('click', function() {
189
+ // In a real implementation, this would redirect to the respective social media
190
+ const platform = this.querySelector('h3').textContent;
191
+ alert(`Redirecting to ${platform}... (This is a demo)`);
192
+ });
193
+ });
194
+
195
+ // Newsletter button animation
196
+ const newsletterBtn = document.querySelector('.pulse');
197
+ newsletterBtn.addEventListener('mouseenter', () => {
198
+ newsletterBtn.classList.remove('pulse');
199
+ });
200
+
201
+ newsletterBtn.addEventListener('mouseleave', () => {
202
+ setTimeout(() => {
203
+ newsletterBtn.classList.add('pulse');
204
+ }, 100);
205
+ });
206
+ </script>
207
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hoof2/social-links" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
208
+ </html>