Hugging Face's logo

Spaces:
visualvanguard
/
ai-editor
Running

App Files Community
visualvanguard commited on
Commit
ca1bc1d
·
verified ·
1 Parent(s): f97305b

fix this website

Browse files
Files changed (2) hide show
  1. index.html +20 -37
  2. style.css +91 -17
index.html CHANGED
@@ -1,41 +1,24 @@
 
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <meta charset="utf-8">
7
- <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
31
- </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=visualvanguard/ai-editor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
  </html>
 
1
+
2
  <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <title>My App</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <meta charset="utf-8">
8
+ <link rel="stylesheet" href="style.css">
9
+ </head>
10
+ <body>
11
+ <div class="container">
12
+ <h1>
13
+ <span>I'm ready to work,</span><br />
14
+ Ask me anything.
15
+ </h1>
16
+ <img src="http://static.photos/technology/640x360/42" alt="Technology Arrow" class="arrow" />
17
+ </div>
18
+ <div class="footer-badge">
19
+ Made with <img src="http://static.photos/white/200x200/1" alt="Logo" class="logo-img">
20
+ <a href="https://enzostvs-deepsite.hf.space" target="_blank">DeepSite</a> -
21
+ 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=visualvanguard/ai-editor" target="_blank">Remix</a>
22
+ </div>
23
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  </html>
style.css CHANGED
@@ -1,28 +1,102 @@
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
  body {
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ min-height: 100dvh;
13
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ overflow-x: hidden;
16
+ padding: 2rem;
17
+ }
18
+
19
+ .container {
20
+ text-align: center;
21
+ max-width: 800px;
22
  }
23
 
24
  h1 {
25
+ font-size: clamp(32px, 8vw, 64px);
26
+ margin-bottom: 2rem;
27
+ color: #ffffff;
28
+ line-height: 1.2;
29
+ }
30
+
31
+ h1 span {
32
+ color: rgba(255, 255, 255, 0.7);
33
+ font-size: clamp(24px, 5vw, 40px);
34
+ display: block;
35
+ }
36
+
37
+ .arrow {
38
+ width: 120px;
39
+ height: auto;
40
+ border-radius: 12px;
41
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
42
+ animation: bounce 2s infinite;
43
+ }
44
+
45
+ @keyframes bounce {
46
+ 0%, 20%, 50%, 80%, 100% {
47
+ transform: translateY(0);
48
+ }
49
+ 40% {
50
+ transform: translateY(-20px);
51
+ }
52
+ 60% {
53
+ transform: translateY(-10px);
54
+ }
55
+ }
56
+
57
+ .footer-badge {
58
+ position: fixed;
59
+ left: 8px;
60
+ bottom: 8px;
61
+ z-index: 10;
62
+ background: rgba(0, 0, 0, 0.8);
63
+ padding: 8px 12px;
64
+ border-radius: 8px;
65
+ font-size: 12px;
66
+ color: #fff;
67
+ text-align: center;
68
+ backdrop-filter: blur(10px);
69
+ }
70
+
71
+ .footer-badge a {
72
+ color: #fff;
73
+ text-decoration: underline;
74
  }
75
 
76
+ .footer-badge a:hover {
77
+ color: #667eea;
 
 
 
78
  }
79
 
80
+ .logo-img {
81
+ width: 16px;
82
+ height: 16px;
83
+ vertical-align: middle;
84
+ display: inline-block;
85
+ margin-right: 4px;
86
+ border-radius: 50%;
87
  }
88
 
89
+ @media (max-width: 600px) {
90
+ body {
91
+ padding: 1rem;
92
+ }
93
+
94
+ .arrow {
95
+ width: 80px;
96
+ }
97
+
98
+ .footer-badge {
99
+ font-size: 10px;
100
+ padding: 6px 10px;
101
+ }
102
  }