quatuorbellefeuille.com

Content, build scripts and admin scripts for the Bellefeuille Quartet website.
git clone https://git.kevinlegouguec.net/quatuorbellefeuille.com
Log | Files | Refs
commit faecfa554e8ac349706b97e5a438052832157c51
parent 71c87cac822918c823f4e1ee06ad252ceef6bc28
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Wed, 21 Oct 2020 22:19:07 +0200

add event grid

Diffstat:

Martistes.css | 15---------------


Martistes.html | 1+


Acommun.css | 14++++++++++++++


Aévénements.css | 17+++++++++++++++++


Aévénements.html | 29+++++++++++++++++++++++++++++


5 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/artistes.css b/artistes.css
@@ -1,18 +1,3 @@
-body {
-    background: #eee;
-    padding-left: 10%;
-    padding-right: 10%;
-}
-
-nav ol {
-    display: flex;
-    list-style-type: none;
-}
-
-nav ol li {
-    flex: 1;
-}
-
 .main {
     display: flex;
 }
diff --git a/artistes.html b/artistes.html
@@ -1,4 +1,5 @@
 <head>
+  <link rel="stylesheet" href="commun.css">
   <link rel="stylesheet" href="artistes.css">
 </head>
 <body>
diff --git a/commun.css b/commun.css
@@ -0,0 +1,14 @@
+body {
+    background: #eee;
+    padding-left: 10%;
+    padding-right: 10%;
+}
+
+nav ol {
+    display: flex;
+    list-style-type: none;
+}
+
+nav ol li {
+    flex: 1;
+}
diff --git a/événements.css b/événements.css
@@ -0,0 +1,17 @@
+.events {
+    display: grid;
+    width: 60%;
+    grid-auto-rows: 14vw;
+    grid-template-columns: repeat(auto-fit, 14vw);
+    grid-gap: 1em;
+    margin-left: auto;
+    margin-right: 0;
+    background-color: #ccc;
+}
+
+.event {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+}
diff --git a/événements.html b/événements.html
@@ -0,0 +1,29 @@
+<head>
+  <link rel="stylesheet" href="commun.css">
+  <link rel="stylesheet" href="événements.css">
+</head>
+<body>
+  <nav>
+    <ol>
+      <li>accueil</li>
+      <li>artistes</li>
+      <li>calendrier</li>
+      <li>contact</li>
+    </ol>
+  </nav>
+
+  <div class="main">
+    <div class="events">
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+      <div class="event"><p>Quelque part<br>À un moment</p></div>
+    </div>
+  </div>
+</body>