Hugging Face's logo

Spaces:
bugalter
/
deepsite-project
Running

App Files Community
bugalter commited on
Commit
e7cab97
·
verified ·
1 Parent(s): ded0ef1

шо

Browse files
Files changed (1) hide show
  1. index.html +156 -18
index.html CHANGED
@@ -1,19 +1,157 @@
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
+
2
+
3
+
4
+ <!DOCTYPE html>
5
+ <html lang="en">
6
+ <head>
7
+ <meta charset="UTF-8">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <title>My Business Card</title>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
12
+ <style>
13
+ :root {
14
+ --primary: #3a86ff;
15
+ --secondary: #8338ec;
16
+ --dark: #212529;
17
+ --light: #f8f9fa;
18
+ }
19
+
20
+ * {
21
+ margin: 0;
22
+ padding: 0;
23
+ box-sizing: border-box;
24
+ font-family: 'Poppins', sans-serif;
25
+ }
26
+
27
+ body {
28
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
29
+ min-height: 100vh;
30
+ display: flex;
31
+ justify-content: center;
32
+ align-items: center;
33
+ padding: 20px;
34
+ }
35
+
36
+ .business-card {
37
+ background: rgba(255, 255, 255, 0.9);
38
+ border-radius: 16px;
39
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
40
+ overflow: hidden;
41
+ width: 100%;
42
+ max-width: 400px;
43
+ text-align: center;
44
+ transition: transform 0.3s ease;
45
+ }
46
+
47
+ .business-card:hover {
48
+ transform: translateY(-10px);
49
+ }
50
+
51
+ .card-header {
52
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
53
+ padding: 30px;
54
+ color: white;
55
+ }
56
+
57
+ .profile-img {
58
+ width: 120px;
59
+ height: 120px;
60
+ border-radius: 50%;
61
+ border: 4px solid white;
62
+ object-fit: cover;
63
+ margin-bottom: 15px;
64
+ }
65
+
66
+ .name {
67
+ font-size: 24px;
68
+ font-weight: 600;
69
+ margin-bottom: 5px;
70
+ }
71
+
72
+ .title {
73
+ font-size: 16px;
74
+ font-weight: 400;
75
+ opacity: 0.9;
76
+ }
77
+
78
+ .card-body {
79
+ padding: 30px;
80
+ }
81
+
82
+ .contact-info {
83
+ margin-bottom: 25px;
84
+ }
85
+
86
+ .contact-item {
87
+ display: flex;
88
+ align-items: center;
89
+ margin-bottom: 15px;
90
+ font-size: 15px;
91
+ color: var(--dark);
92
+ }
93
+
94
+ .contact-item i {
95
+ margin-right: 10px;
96
+ color: var(--primary);
97
+ font-size: 18px;
98
+ width: 20px;
99
+ }
100
+
101
+ .social-links {
102
+ display: flex;
103
+ justify-content: center;
104
+ gap: 15px;
105
+ }
106
+
107
+ .social-links a {
108
+ color: white;
109
+ background: var(--primary);
110
+ width: 40px;
111
+ height: 40px;
112
+ border-radius: 50%;
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ text-decoration: none;
117
+ transition: all 0.3s ease;
118
+ }
119
+
120
+ .social-links a:hover {
121
+ background: var(--secondary);
122
+ transform: scale(1.1);
123
+ }
124
+ </style>
125
+ </head>
126
+ <body>
127
+ <div class="business-card">
128
+ <div class="card-header">
129
+ <img src="http://static.photos/people/200x200/42" alt="Profile" class="profile-img">
130
+ <h1 class="name">John Doe</h1>
131
+ <p class="title">Web Developer & Designer</p>
132
+ </div>
133
+ <div class="card-body">
134
+ <div class="contact-info">
135
+ <div class="contact-item">
136
+ <i class="fas fa-envelope"></i>
137
+ john.doe@example.com
138
+ </div>
139
+ <div class="contact-item">
140
+ <i class="fas fa-phone"></i>
141
+ +1 (555) 123-4567
142
+ </div>
143
+ <div class="contact-item">
144
+ <i class="fas fa-map-marker-alt"></i>
145
+ New York, USA
146
+ </div>
147
+ </div>
148
+ <div class="social-links">
149
+ <a href="#"><i class="fab fa-github"></i></a>
150
+ <a href="#"><i class="fab fa-linkedin-in"></i></a>
151
+ <a href="#"><i class="fab fa-twitter"></i></a>
152
+ <a href="#"><i class="fab fa-instagram"></i></a>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </body>
157
  </html>