Procházet zdrojové kódy

Proposition de mise en page avec aside

Sangfroid před 1 měsícem
rodič
revize
c18765617c
2 změnil soubory, kde provedl 102 přidání a 3 odebrání
  1. 49 0
      assets/styles/app.css
  2. 53 3
      templates/base.html.twig

+ 49 - 0
assets/styles/app.css

@@ -114,6 +114,55 @@ main {
   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
 }
 
+.container {
+  display: flex;
+  justify-content: center; /* Centre le contenu horizontalement */
+  max-width: 1200px;       /* Largeur maximale du container */
+  margin: 0 auto;          /* Centre le container dans la page */
+  padding: 20px;
+  flex-direction: row-reverse;
+}
+
+
+
+
+/* Style de base pour l'aside */
+aside {
+  margin-left: 20px;
+  width: 250px;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 15px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+/* En-tête de chaque section */
+aside h2 {
+  font-size: 1.2em;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+/* Style des listes de liens */
+aside ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+aside li {
+  margin-bottom: 8px;
+}
+
+aside a {
+  text-decoration: none;
+  color: #0073e6;
+}
+
+aside a:hover {
+  text-decoration: underline;
+}
+
+
 .contenu {
   font-size: 1.2em;
   position: relative;

+ 53 - 3
templates/base.html.twig

@@ -14,8 +14,58 @@
     </head>
     <body>
         {{ include('_menu.html.twig')}}
-        <main>    
-            {% block body %}{% endblock %}
-        </main>
+        <div class="container">
+            <aside>
+            <!-- Section Connexion -->
+            <section class="connexion">
+                <h2>Connexion</h2>
+                <ul>
+                <li><a href="#">Se connecter</a></li>
+                <li><a href="#">S'inscrire</a></li>
+                <li><a href="#">Mot de passe oublié</a></li>
+                </ul>
+            </section>
+            
+            <!-- Articles Populaires -->
+            <section class="articles-populaires">
+                <h2>Articles Populaires</h2>
+                <ul>
+                <li><a href="#">Comment démarrer un blog en 2024</a></li>
+                <li><a href="#">Les meilleures astuces SEO</a></li>
+                <li><a href="#">10 plugins indispensables pour WordPress</a></li>
+                <li><a href="#">Comment gagner des abonnés sur les réseaux sociaux</a></li>
+                </ul>
+            </section>
+            
+            <!-- Catégories -->
+            <section class="categories">
+                <h2>Catégories</h2>
+                <ul>
+                <li><a href="#">Développement Web</a></li>
+                <li><a href="#">Marketing Digital</a></li>
+                <li><a href="#">Réseaux Sociaux</a></li>
+                <li><a href="#">SEO</a></li>
+                <li><a href="#">Entrepreneuriat</a></li>
+                </ul>
+            </section>
+            
+            <!-- Archives -->
+            <section class="archives">
+                <h2>Archives</h2>
+                <ul>
+                <li><a href="#">Octobre 2024</a></li>
+                <li><a href="#">Septembre 2024</a></li>
+                <li><a href="#">Août 2024</a></li>
+                <li><a href="#">Juillet 2024</a></li>
+                </ul>
+            </section>
+            </aside>
+                 
+            <main>
+                {% block body %}side>
+                Test dans tes fesses
+            <{% endblock %}
+            </main>
+        </div>
     </body>
 </html>