web3district commited on
Commit
1ba7b31
·
verified ·
1 Parent(s): 3a9cf47

make more purple in the base going to pink more in the edges on top - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +119 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Loudbids
3
- emoji: 🌖
4
- colorFrom: indigo
5
- colorTo: purple
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: loudbids
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
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,119 @@
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>Gradient Scaffold</title>
7
+
8
+ <!-- Montserrat for perfectly circular “O”s -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"/>
10
+
11
+ <style>
12
+ :root {
13
+ --pink-light: #ffe5e5;
14
+ --pink-strong: #ffb3b3;
15
+ --header-h: 80px;
16
+ --moon-color: #b399ff;
17
+ }
18
+
19
+ /* make all fonts half-size */
20
+ html {
21
+ font-size: 50%;
22
+ }
23
+
24
+ /* reset */
25
+ *, *::before, *::after {
26
+ margin: 0; padding: 0; box-sizing: border-box;
27
+ }
28
+ html, body { height: 100%; }
29
+
30
+ body {
31
+ font-family: 'Montserrat', sans-serif;
32
+ /* horizontal gradient = 90deg tilt */
33
+ background: linear-gradient(
34
+ 90deg,
35
+ var(--pink-light) 0%,
36
+ var(--pink-strong) 100%
37
+ );
38
+ padding-top: var(--header-h);
39
+ }
40
+
41
+ header {
42
+ position: fixed;
43
+ top: 0; left: 0; right: 0;
44
+ height: var(--header-h);
45
+ /* header also horizontal */
46
+ background: linear-gradient(
47
+ 90deg,
48
+ var(--pink-light) 0%,
49
+ var(--pink-strong) 100%
50
+ );
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: flex-end; /* menu on the right */
54
+ padding: 0 1rem;
55
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
56
+ z-index: 10;
57
+ }
58
+ header nav ul {
59
+ list-style: none;
60
+ display: flex;
61
+ gap: 2rem;
62
+ }
63
+ header nav a {
64
+ text-decoration: none;
65
+ color: #222;
66
+ font-weight: 700;
67
+ font-size: 1.2rem;
68
+ text-transform: uppercase;
69
+ letter-spacing: 1px;
70
+ }
71
+
72
+ main {
73
+ padding: 2rem;
74
+ position: relative;
75
+ height: 100%;
76
+ /* drop your title, spheres, phone mockup, etc. here */
77
+ }
78
+
79
+ .moon {
80
+ position: absolute;
81
+ right: 5%;
82
+ top: 20%;
83
+ width: 250px;
84
+ height: 250px;
85
+ background: radial-gradient(
86
+ circle at 30% 30%,
87
+ var(--moon-color) 0%,
88
+ var(--pink-strong) 70%,
89
+ transparent 100%
90
+ );
91
+ border-radius: 45% 55% 60% 40% / 60% 40% 60% 40%;
92
+ filter: blur(1px);
93
+ opacity: 0.9;
94
+ box-shadow:
95
+ 0 0 30px rgba(179, 153, 255, 0.5),
96
+ 0 0 60px rgba(179, 153, 255, 0.3);
97
+ }
98
+ </style>
99
+ </head>
100
+ <body>
101
+
102
+ <header>
103
+ <nav>
104
+ <ul>
105
+ <li><a href="#">Buy &amp; Sell Traffic</a></li>
106
+ <li><a href="#">Useful Info</a></li>
107
+ <li><a href="#">Contact Us</a></li>
108
+ <li><a href="#">Login</a></li>
109
+ </ul>
110
+ </nav>
111
+ </header>
112
+
113
+ <main>
114
+ <!-- your content goes here -->
115
+ <div class="moon"></div>
116
+ </main>
117
+
118
+ <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=web3district/loudbids" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
119
+ </html>