Hugging Face's logo

Spaces:
Infeksion
/
anycoder-9de2c36c
Running

App Files Community
Infeksion commited on
Commit
11bef44
·
verified ·
1 Parent(s): d100060

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +146 -19
index.html CHANGED
@@ -1,19 +1,146 @@
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>Responsive Web Page</title>
7
+ <style>
8
+ /* CSS Variables for consistent theming */
9
+ :root {
10
+ --primary-color: #3498db;
11
+ --secondary-color: #2c3e50;
12
+ --background-color: #f4f4f4;
13
+ --card-bg: #ffffff;
14
+ --text-color: #333333;
15
+ --spacing-unit: 16px;
16
+ --border-radius: 8px;
17
+ --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
+ }
19
+
20
+ body {
21
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22
+ line-height: 1.6;
23
+ color: var(--text-color);
24
+ background-color: var(--background-color);
25
+ margin: 0;
26
+ padding: 0;
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ .container {
34
+ width: 100%;
35
+ max-width: 800px;
36
+ padding: var(--spacing-unit);
37
+ }
38
+
39
+ header {
40
+ text-align: center;
41
+ margin-bottom: var(--spacing-unit);
42
+ }
43
+
44
+ h1 {
45
+ color: var(--secondary-color);
46
+ margin-bottom: 0.5em;
47
+ }
48
+
49
+ .card {
50
+ background-color: var(--card-bg);
51
+ border-radius: var(--border-radius);
52
+ box-shadow: var(--box-shadow);
53
+ padding: var(--spacing-unit);
54
+ margin-bottom: var(--spacing-unit);
55
+ }
56
+
57
+ .card-header {
58
+ font-weight: bold;
59
+ font-size: 1.2em;
60
+ margin-bottom: var(--spacing-unit);
61
+ border-bottom: 2px solid var(--primary-color);
62
+ padding-bottom: 0.5em;
63
+ }
64
+
65
+ p {
66
+ margin-bottom: var(--spacing-unit);
67
+ }
68
+
69
+ .code-block {
70
+ background-color: #2d2d2d;
71
+ color: #f8f8f2;
72
+ padding: var(--spacing-unit);
73
+ border-radius: var(--border-radius);
74
+ overflow-x: auto;
75
+ font-family: 'Courier New', Courier, monospace;
76
+ font-size: 0.9em;
77
+ }
78
+
79
+ .footer {
80
+ text-align: center;
81
+ margin-top: var(--spacing-unit);
82
+ font-size: 0.8em;
83
+ color: #777;
84
+ }
85
+
86
+ .footer a {
87
+ color: var(--primary-color);
88
+ text-decoration: none;
89
+ }
90
+
91
+ /* Responsive adjustments */
92
+ @media (max-width: 600px) {
93
+ .container {
94
+ padding: var(--spacing-unit) * 0.5;
95
+ }
96
+
97
+ .card {
98
+ padding: var(--spacing-unit) * 0.5;
99
+ }
100
+ }
101
+ </style>
102
+ </head>
103
+ <body>
104
+ <div class="container">
105
+ <header>
106
+ <h1>Responsive Web Page</h1>
107
+ <p>This is a responsive web page demonstrating modern CSS.</p>
108
+ </header>
109
+
110
+ <main>
111
+ <section class="card">
112
+ <div class="card-header">Concept</div>
113
+ <p>This page uses CSS variables, Flexbox for layout, and Media Queries for responsiveness. It adapts to different screen sizes, from mobile phones to desktop computers.</p>
114
+ </section>
115
+
116
+ <section class="card">
117
+ <div class="card-header">Example Code</div>
118
+ <p>The following CSS demonstrates how to define variables and use Flexbox:</p>
119
+ <div class="code-block">
120
+ <pre>:root {
121
+ --primary-color: #3498db;
122
+ --spacing-unit: 16px;
123
+ }
124
+
125
+ .container {
126
+ display: flex;
127
+ flex-direction: column;
128
+ gap: var(--spacing-unit);
129
+ }
130
+
131
+ @media (max-width: 600px) {
132
+ .container {
133
+ padding: 8px;
134
+ }
135
+ }</pre>
136
+ </div>
137
+ </section>
138
+ </main>
139
+
140
+ <footer class="footer">
141
+ <p>Built with anycoder</p>
142
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
143
+ </footer>
144
+ </div>
145
+ </body>
146
+ </html>