Hugging Face's logo

Spaces:
Mike0021
/
hello
Running

App Files Community
hellowbeast commited on
Commit
dff5471
·
1 Parent(s): fcf2c73

Static Space that says hello

Browse files
Files changed (3) hide show
  1. README.md +5 -2
  2. index.html +16 -11
  3. style.css +47 -15
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
  title: Hello
3
- emoji: 🦀
4
  colorFrom: blue
5
  colorTo: indigo
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: Hello
3
+ emoji: 👋
4
  colorFrom: blue
5
  colorTo: indigo
6
  sdk: static
7
  pinned: false
8
+ short_description: A minimal static Space that says hello
9
  ---
10
 
11
+ # Hello
12
+
13
+ A minimal static Space: `index.html` + `style.css`, no build step.
index.html CHANGED
@@ -1,19 +1,24 @@
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" />
6
+ <title>Hello</title>
7
+ <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%91%8B%3C/text%3E%3C/svg%3E" />
8
  <link rel="stylesheet" href="style.css" />
9
  </head>
10
  <body>
11
+ <main class="card">
12
+ <h1>Hello 👋</h1>
13
+ <p>This is a static Space — plain HTML, CSS and JavaScript served from the Hugging Face Hub.</p>
14
+ <button id="greet">Say hello back</button>
15
+ <p id="out" class="out"></p>
16
+ </main>
17
+ <script>
18
+ const out = document.getElementById("out");
19
+ document.getElementById("greet").addEventListener("click", () => {
20
+ out.textContent = "Hello to you too! 🎉";
21
+ });
22
+ </script>
23
  </body>
24
  </html>
style.css CHANGED
@@ -1,28 +1,60 @@
 
 
 
 
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
+ :root {
2
+ color-scheme: dark;
3
+ }
4
+
5
  body {
6
+ margin: 0;
7
+ min-height: 100vh;
8
+ display: grid;
9
+ place-items: center;
10
  padding: 2rem;
11
+ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
12
+ background: radial-gradient(1200px 600px at 50% -10%, #1e2a4a, #0b0f1a 60%);
13
+ color: #e8ecf5;
14
+ }
15
+
16
+ .card {
17
+ text-align: center;
18
+ max-width: 620px;
19
+ padding: 2.5rem 2rem;
20
+ border: 1px solid #ffffff1a;
21
+ border-radius: 20px;
22
+ background: #ffffff08;
23
  }
24
 
25
  h1 {
26
+ font-size: clamp(2.5rem, 9vw, 4.5rem);
27
+ margin: 0 0 1rem;
28
+ background: linear-gradient(90deg, #7dd3fc, #a78bfa, #f472b6);
29
+ -webkit-background-clip: text;
30
+ background-clip: text;
31
+ color: transparent;
32
  }
33
 
34
  p {
35
+ color: #b9c2d4;
36
+ font-size: 1rem;
37
+ line-height: 1.6;
38
+ margin: 0.5rem 0;
39
  }
40
 
41
+ button {
42
+ margin-top: 1.5rem;
43
+ padding: 0.6rem 1.2rem;
44
+ font-size: 1rem;
45
+ border-radius: 999px;
46
+ border: 1px solid #ffffff33;
47
+ background: #ffffff14;
48
+ color: inherit;
49
+ cursor: pointer;
50
+ }
51
+
52
+ button:hover {
53
+ background: #ffffff26;
54
  }
55
 
56
+ .out {
57
+ min-height: 1.6rem;
58
+ margin-top: 1rem;
59
+ color: #7dd3fc;
60
  }