diff options
| -rw-r--r-- | artistes.css | 15 | ||||
| -rw-r--r-- | artistes.html | 1 | ||||
| -rw-r--r-- | commun.css | 14 | ||||
| -rw-r--r-- | événements.css | 17 | ||||
| -rw-r--r-- | événements.html | 29 |
5 files changed, 61 insertions, 15 deletions
diff --git a/artistes.css b/artistes.css index ec5a977..2d3aa19 100644 --- 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 index 0a72d1f..062db55 100644 --- 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 new file mode 100644 index 0000000..1a6b751 --- /dev/null +++ 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 new file mode 100644 index 0000000..e76a531 --- /dev/null +++ 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 new file mode 100644 index 0000000..97fba31 --- /dev/null +++ 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> |