diff options
| -rw-r--r-- | artistes.css | 3 | ||||
| -rw-r--r-- | artistes.html | 122 | ||||
| -rw-r--r-- | commun.css | 36 |
3 files changed, 99 insertions, 62 deletions
diff --git a/artistes.css b/artistes.css index 81006ac..9b5c036 100644 --- a/artistes.css +++ b/artistes.css @@ -4,6 +4,9 @@ body { .main { display: flex; +} + +.main-social { overflow: auto; flex-grow: 1; } diff --git a/artistes.html b/artistes.html index 77a3da5..044742f 100644 --- a/artistes.html +++ b/artistes.html @@ -3,7 +3,7 @@ <link rel="stylesheet" href="artistes.css"> </head> <body> - <header> + <header class="banner"> <div class="brand"> <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png" @@ -13,70 +13,80 @@ <nav> <ol> - <li>accueil</li> - <li>artistes</li> - <li>calendrier</li> - <li>contact</li> + <li>le quatuor</li> + <li>actualités</li> + <li>programmes</li> + <li>médias</li> </ol> </nav> </header> - <div class="main"> - <div id="photos"> - <img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"> - <img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"> - <img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"> - <img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"> - </div> - - <div id="bio"> - <h1>Un premier titre</h1> - <p> - Senectus et netus et malesuada fames ac turpis. Ut sem nulla - pharetra diam sit amet nisl suscipit adipiscing. Et netus et - malesuada fames ac. Turpis massa sed elementum tempus egestas - sed sed. Et netus et malesuada fames ac. Enim sit amet venenatis - urna cursus. Fermentum et sollicitudin ac orci - phasellus. Sollicitudin nibh sit amet commodo nulla facilisi - nullam vehicula. Pellentesque adipiscing commodo elit at - imperdiet. Eget nunc scelerisque viverra mauris in. Eu sem - integer vitae justo eget magna fermentum iaculis. Feugiat nisl - pretium fusce id velit. Facilisis gravida neque convallis a cras - semper. Scelerisque eu ultrices vitae auctor eu augue ut - lectus. Aliquam purus sit amet luctus venenatis. - </p> - <p> - Felis imperdiet proin fermentum leo vel orci porta. Imperdiet - massa tincidunt nunc pulvinar. Porta lorem mollis aliquam ut - porttitor leo. Morbi tincidunt augue interdum velit euismod in - pellentesque massa. In ornare quam viverra orci sagittis - eu. Elementum integer enim neque volutpat ac. Adipiscing - bibendum est ultricies integer quis. Quisque non tellus orci ac - auctor augue. Dictum fusce ut placerat orci nulla pellentesque - dignissim enim. Vitae congue eu consequat ac felis donec et - odio. Aliquam malesuada bibendum arcu vitae elementum curabitur - vitae nunc sed. + <div class="main-social"> + <header class="social"> + <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg"> + <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg"> + <p class="contact"> + Contact </p> + </header> + + <div class="main"> + <div id="photos"> + <img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"> + <img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"> + <img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"> + <img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"> + </div> + + <div id="bio"> + <h1>Un premier titre</h1> + <p> + Senectus et netus et malesuada fames ac turpis. Ut sem nulla + pharetra diam sit amet nisl suscipit adipiscing. Et netus et + malesuada fames ac. Turpis massa sed elementum tempus egestas + sed sed. Et netus et malesuada fames ac. Enim sit amet venenatis + urna cursus. Fermentum et sollicitudin ac orci + phasellus. Sollicitudin nibh sit amet commodo nulla facilisi + nullam vehicula. Pellentesque adipiscing commodo elit at + imperdiet. Eget nunc scelerisque viverra mauris in. Eu sem + integer vitae justo eget magna fermentum iaculis. Feugiat nisl + pretium fusce id velit. Facilisis gravida neque convallis a cras + semper. Scelerisque eu ultrices vitae auctor eu augue ut + lectus. Aliquam purus sit amet luctus venenatis. + </p> + <p> + Felis imperdiet proin fermentum leo vel orci porta. Imperdiet + massa tincidunt nunc pulvinar. Porta lorem mollis aliquam ut + porttitor leo. Morbi tincidunt augue interdum velit euismod in + pellentesque massa. In ornare quam viverra orci sagittis + eu. Elementum integer enim neque volutpat ac. Adipiscing + bibendum est ultricies integer quis. Quisque non tellus orci ac + auctor augue. Dictum fusce ut placerat orci nulla pellentesque + dignissim enim. Vitae congue eu consequat ac felis donec et + odio. Aliquam malesuada bibendum arcu vitae elementum curabitur + vitae nunc sed. + </p> + + <h1>Un second titre</h1> + <p> + Vitae congue eu consequat ac. Nullam ac tortor vitae + purus. Laoreet id donec ultrices tincidunt arcu non sodales + neque sodales. Ut faucibus pulvinar elementum integer enim neque + volutpat ac tincidunt. Proin sed libero enim sed faucibus turpis + in eu. Facilisis magna etiam tempor orci eu lobortis + elementum. Lobortis elementum nibh tellus molestie nunc. Vitae + tortor condimentum lacinia quis vel eros donec. Ut etiam sit + amet nisl purus in mollis nunc sed. Leo in vitae turpis + massa. Nam at lectus urna duis convallis convallis tellus id + interdum. Morbi non arcu risus quis varius quam. Ac turpis + egestas maecenas pharetra convallis posuere morbi leo. Magna + etiam tempor orci eu. + </p> + </div> - <h1>Un second titre</h1> - <p> - Vitae congue eu consequat ac. Nullam ac tortor vitae - purus. Laoreet id donec ultrices tincidunt arcu non sodales - neque sodales. Ut faucibus pulvinar elementum integer enim neque - volutpat ac tincidunt. Proin sed libero enim sed faucibus turpis - in eu. Facilisis magna etiam tempor orci eu lobortis - elementum. Lobortis elementum nibh tellus molestie nunc. Vitae - tortor condimentum lacinia quis vel eros donec. Ut etiam sit - amet nisl purus in mollis nunc sed. Leo in vitae turpis - massa. Nam at lectus urna duis convallis convallis tellus id - interdum. Morbi non arcu risus quis varius quam. Ac turpis - egestas maecenas pharetra convallis posuere morbi leo. Magna - etiam tempor orci eu. - </p> </div> </div> - <footer> <p>Mentions légales - Plan du site</p> </footer> @@ -1,24 +1,24 @@ -header { +header.banner { display: flex; align-items: center; } -header .brand { +header.banner .brand { display: flex; align-items: center; max-width: 40%; } -header .brand img { +header.banner .brand img { transition: filter 1s; } -header .brand h1 { +header.banner .brand h1 { transition: color 1s; } -header .brand:hover img { +header.banner .brand:hover img { filter: brightness(100%) sepia(100%); } -header .brand:hover h1 { +header.banner .brand:hover h1 { color: #d82; } @@ -47,6 +47,30 @@ nav ol li { flex: 1; } +header.social { + float: right; + display: flex; + flex-direction: column; + align-items: center; +} + +.social img { + width: 2em; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.contact { + /* Ideally should be just: */ + /* writing-mode: sideways-lr; */ + /* but of course We Can't Have Nice Things. */ + writing-mode: vertical-rl; + transform: rotate(180deg); + margin: 0; + margin-inline-start: 0.5em; +} + + body { display: flex; flex-direction: column; |