diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-10-17 23:41:12 +0200 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-10-21 23:18:31 +0200 |
| commit | d2c0f070807fab9247479825a530e829ec1657d1 (patch) | |
| tree | 14ca28d2072c10ef5cbd28de131764e16a6808ae | |
| download | quatuorbellefeuille.com-d2c0f070807fab9247479825a530e829ec1657d1.tar.xz | |
POC artist page
| -rw-r--r-- | artistes.css | 61 | ||||
| -rw-r--r-- | artistes.html | 59 |
2 files changed, 120 insertions, 0 deletions
diff --git a/artistes.css b/artistes.css new file mode 100644 index 0000000..c69b323 --- /dev/null +++ b/artistes.css @@ -0,0 +1,61 @@ +body { + background: #eee; + display: flex; + padding-left: 10%; + padding-right: 10%; +} + +body div { + padding: 2em; +} + +#photos { + width: 30%; + background: #fd4; +} + +#photos-inner { + position: fixed; + height: 100% +} + +#photos-inner img { + height: 33%; + border-color: #ddd; + border-width: 10px; + border-style: solid; + border-radius: 20%; +} + +#vlad { + position: absolute; + left: 2em; + top: 5%; + z-index: 1; +} + +#garet { + position: absolute; + left: 10em; + top: 10%; + z-index: 2; +} + +#ivan { + position: absolute; + left: 2em; + top: 30%; + z-index: 3; +} + +#sofia { + position: absolute; + left: 10em; + top: 35%; + z-index: 4; +} + +#bio { + width: 45%; + background: #fee; +} diff --git a/artistes.html b/artistes.html new file mode 100644 index 0000000..434774d --- /dev/null +++ b/artistes.html @@ -0,0 +1,59 @@ +<head> + <link rel="stylesheet" href="artistes.css"> +</head> +<body> + <div id="photos"> + <div id="photos-inner"> + <img id="vlad" src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"> + <img id="garet" src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"> + <img id="ivan" src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"> + <img id="sofia" src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"> + </div> + </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> +</body> |