Hugging Face's logo

Spaces:
Abmacode12
/
espace-codage
Configuration error

App Files Community
Abmacode12 commited on
Commit
dab6192
·
verified ·
1 Parent(s): 8d11841

voilà je voudrais la voir comme ça mais je voudrais juste que vous retirez manus et mettez espace codage voilà tout ce que je veux je souhaite merci beaucoup je te laisse t'en charger pour voir bien la capture d'écran et fournis moi la même s'il vous plaît merci

Browse files
Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +127 -19
  3. script.js +11 -0
  4. style.css +1 -28
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Espace Codage
3
- emoji: 🐢
4
  colorFrom: yellow
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: Espace Codage 🚀
 
3
  colorFrom: yellow
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,127 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Espace Codage</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-100 font-sans">
13
+ <div class="min-h-screen flex flex-col">
14
+ <!-- Header -->
15
+ <header class="bg-white shadow-sm">
16
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
17
+ <div class="flex items-center space-x-2">
18
+ <i data-feather="code" class="text-blue-600"></i>
19
+ <h1 class="text-xl font-bold text-gray-800">Espace Codage</h1>
20
+ </div>
21
+ <nav class="hidden md:flex space-x-6">
22
+ <a href="#" class="text-blue-600 font-medium">Accueil</a>
23
+ <a href="#" class="text-gray-600 hover:text-blue-600">Cours</a>
24
+ <a href="#" class="text-gray-600 hover:text-blue-600">Projets</a>
25
+ <a href="#" class="text-gray-600 hover:text-blue-600">Communauté</a>
26
+ </nav>
27
+ <button class="md:hidden">
28
+ <i data-feather="menu"></i>
29
+ </button>
30
+ </div>
31
+ </header>
32
+
33
+ <!-- Main Content -->
34
+ <main class="flex-grow container mx-auto px-4 py-8">
35
+ <div class="max-w-4xl mx-auto">
36
+ <section class="mb-12 text-center">
37
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Apprenez à coder avec Espace Codage</h2>
38
+ <p class="text-lg text-gray-600 mb-8">Découvrez nos cours interactifs et rejoignez notre communauté de développeurs passionnés.</p>
39
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-300">
40
+ Commencer maintenant
41
+ </button>
42
+ </section>
43
+
44
+ <section class="grid md:grid-cols-3 gap-8 mb-12">
45
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
46
+ <div class="text-blue-600 mb-4">
47
+ <i data-feather="book" class="w-8 h-8"></i>
48
+ </div>
49
+ <h3 class="text-xl font-semibold mb-2">Cours Complets</h3>
50
+ <p class="text-gray-600">Apprenez à votre rythme avec nos cours structurés et progressifs.</p>
51
+ </div>
52
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
53
+ <div class="text-blue-600 mb-4">
54
+ <i data-feather="code" class="w-8 h-8"></i>
55
+ </div>
56
+ <h3 class="text-xl font-semibold mb-2">Pratique Immédiate</h3>
57
+ <p class="text-gray-600">Mettez en pratique vos connaissances avec des exercices interactifs.</p>
58
+ </div>
59
+ <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
60
+ <div class="text-blue-600 mb-4">
61
+ <i data-feather="users" class="w-8 h-8"></i>
62
+ </div>
63
+ <h3 class="text-xl font-semibold mb-2">Communauté Active</h3>
64
+ <p class="text-gray-600">Échangez avec d'autres apprenants et développeurs expérimentés.</p>
65
+ </div>
66
+ </section>
67
+
68
+ <section class="bg-white p-8 rounded-xl shadow-sm mb-12">
69
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">Nos Technologies</h2>
70
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
71
+ <div class="flex flex-col items-center p-4">
72
+ <img src="https://enzostvs-cached-generation.hf.space/generate/html5-logo?format=square" alt="HTML" class="w-16 h-16 mb-2">
73
+ <span class="text-gray-700">HTML</span>
74
+ </div>
75
+ <div class="flex flex-col items-center p-4">
76
+ <img src="https://enzostvs-cached-generation.hf.space/generate/css3-logo?format=square" alt="CSS" class="w-16 h-16 mb-2">
77
+ <span class="text-gray-700">CSS</span>
78
+ </div>
79
+ <div class="flex flex-col items-center p-4">
80
+ <img src="https://enzostvs-cached-generation.hf.space/generate/javascript-logo?format=square" alt="JavaScript" class="w-16 h-16 mb-2">
81
+ <span class="text-gray-700">JavaScript</span>
82
+ </div>
83
+ <div class="flex flex-col items-center p-4">
84
+ <img src="https://enzostvs-cached-generation.hf.space/generate/python-logo?format=square" alt="Python" class="w-16 h-16 mb-2">
85
+ <span class="text-gray-700">Python</span>
86
+ </div>
87
+ </div>
88
+ </section>
89
+ </div>
90
+ </main>
91
+
92
+ <!-- Footer -->
93
+ <footer class="bg-gray-800 text-white py-8">
94
+ <div class="container mx-auto px-4">
95
+ <div class="flex flex-col md:flex-row justify-between items-center">
96
+ <div class="mb-4 md:mb-0">
97
+ <div class="flex items-center space-x-2">
98
+ <i data-feather="code" class="text-blue-400"></i>
99
+ <span class="font-bold">Espace Codage</span>
100
+ </div>
101
+ <p class="text-gray-400 mt-2">Apprenez, codez, partagez.</p>
102
+ </div>
103
+ <div class="flex space-x-4">
104
+ <a href="#" class="text-gray-400 hover:text-white">
105
+ <i data-feather="twitter"></i>
106
+ </a>
107
+ <a href="#" class="text-gray-400 hover:text-white">
108
+ <i data-feather="github"></i>
109
+ </a>
110
+ <a href="#" class="text-gray-400 hover:text-white">
111
+ <i data-feather="linkedin"></i>
112
+ </a>
113
+ </div>
114
+ </div>
115
+ <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
116
+ <p>© 2023 Espace Codage. Tous droits réservés.</p>
117
+ </div>
118
+ </div>
119
+ </footer>
120
+ </div>
121
+
122
+ <script>
123
+ feather.replace();
124
+ </script>
125
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
126
+ </body>
127
+ </html>
script.js ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Mobile menu toggle functionality can be added here
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ const menuButton = document.querySelector('button[aria-label="Menu"]');
4
+ const nav = document.querySelector('nav');
5
+
6
+ if (menuButton && nav) {
7
+ menuButton.addEventListener('click', function() {
8
+ nav.classList.toggle('hidden');
9
+ });
10
+ }
11
+ });
style.css CHANGED
@@ -1,28 +1 @@
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
+ /* Custom styles can be added here if needed */