new version

lucashimpens · Jun 10, 2024 · f3bfe2e · f3bfe2e
1 parent 92fadb0
commit f3bfe2e
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 8 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,69 @@
 <!DOCTYPE html>
-<!-- something important is missing in the html tag.... what is it? -->
-<html lang="en"> 
+<html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hello World</title>
+    <title>CollectiFlex</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Hello World</h1>
-    <script src="app.js"></script>
+    <header>
+        <div class="logo">Logo</div>
+        <nav>
+            <a href="#">Collections</a>
+            <a href="#">Mes Collections</a>
+            <a href="#">Mon Compte</a>
+            <a href="#">Se Connecter</a>
+            <div class="lang">
+                <a href="#">FR</a> | <a href="#">EN</a>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <section class="search">
+            <input type="text" placeholder="Recherche une collection...">
+        </section>
+
+        <h1>Bienvenue sur CollectiFlex</h1>
+
+        <section class="categories">
+            <button>Musique</button>
+            <button>Automobile</button>
+            <button>Autres</button>
+        </section>
+
+        <section class="collections">
+            <div class="collection">
+                <h2>Collection #1</h2>
+                <p>Voitures</p>
+                <p>Par Michel</p>
+            </div>
+            <div class="collection">
+                <h2>Collection #2</h2>
+                <p>Musiques</p>
+                <p>Par Jean-Paul</p>
+            </div>
+            <div class="collection">
+                <h2>Collection #3</h2>
+                <p>Timbres</p>
+                <p>Par Franck</p>
+            </div>
+        </section>
+
+        <section class="review">
+            <h2>Laisser un avis</h2>
+            <textarea placeholder="Rédigez un avis..."></textarea>
+            <div class="stars">
+                <span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span>
+            </div>
+            <button>Envoyer</button>
+        </section>
+    </main>
+
+    <footer>
+        <a href="#">Mentions Légales</a>
+        <a href="#">Plan du site</a>
+    </footer>
 </body>
-</html>
+</html>
diff --git a/src/style.css b/src/style.css
@@ -1,10 +1,110 @@
 body {
     font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f8f8f8;
+    padding: 10px 20px;
+}
+
+header .logo {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+nav a {
+    margin: 0 10px;
+    text-decoration: none;
+    color: #333;
+}
+
+nav .lang a {
+    margin: 0 5px;
+}
+
+.search {
     text-align: center;
-    padding-top: 50px;
+    margin: 20px 0;
+}
+
+.search input {
+    width: 80%;
+    padding: 10px;
+    font-size: 16px;
+}
+
+main {
+    padding: 0 20px;
 }
 
 h1 {
+    text-align: center;
+    margin: 20px 0;
+}
+
+.categories {
+    text-align: center;
+    margin: 20px 0;
+}
+
+.categories button {
+    margin: 0 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.collections {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 0;
+}
+
+.collection {
+    border: 1px solid #ddd;
+    padding: 10px;
+    width: 30%;
+    text-align: center;
+}
+
+.review {
+    text-align: center;
+    margin: 20px 0;
+}
+
+.review textarea {
+    width: 80%;
+    height: 100px;
+    margin-bottom: 10px;
+    padding: 10px;
+    font-size: 16px;
+}
+
+.review .stars span {
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.review button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+footer {
+    text-align: center;
+    padding: 20px;
+    background-color: #f8f8f8;
+}
+
+footer a {
+    margin: 0 10px;
+    text-decoration: none;
     color: #333;
 }