diff options
| -rw-r--r-- | dates.html | 16 | ||||
| -rw-r--r-- | style.css | 40 |
2 files changed, 50 insertions, 6 deletions
@@ -6,6 +6,22 @@ <link rel="stylesheet" type="text/css" href="./style.css" /> </head> <body> + <div class="content"> + <div class="date"> + <p class="date-desc">Rencontres musicales</p> + <div> + <hr> + <p>--------<br>€€</p> + </div> + </div> + <div class="date"> + <p class="date-desc">Concert privé<br>St Martin Je Sais Plus Quoi</p> + <div> + <hr> + <p>28-08-23<br>Entrée privée</p> + </div> + </div> + </div> </body> <a href="index.html" class="return">Retour</a> </html> @@ -14,9 +14,10 @@ body.index{ } .content{ - /*margin-left: 10%; - margin-right: 10%;*/ + padding: 5px; margin: auto; + margin-left: 15%; + margin-right: 15%; border: 3px dotted #777777; border-radius: 8px; color: #ffffff; @@ -65,8 +66,8 @@ div.zikos:nth-child(even) .desc{ .zikos{ display: flex; flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-start; + flex-wrap: wrap; + justify-content: space-evenly; margin-bottom: 10px; padding: 10px; border: 3px inset #888888; @@ -76,14 +77,41 @@ div.zikos:nth-child(even) .desc{ } .zikos img{ - max-height: 40vh; - border-radius: 3px; + height: 40vh; + border-radius: 40vh; } .desc{ max-width: 60vh; } +.date{ + display: flex; + flex-direction: row; + justify-content: space-between; + padding-left: 10px; + padding-right: 10px; + margin-bottom: 10px; + margin-left: 10%; + margin-right: 10%; + border: 3px inset #888888; + background-color: #00000099; + color: white; +} + +.date hr{ + transform: rotate(90deg); + width: 2em; + height: 0; + border: 1px solid white; +} + +.date div{ + display: flex; + flex-direction: row; + align-items: center; +} + .return{ margin: auto; border-width: 3px; |