diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-11-03 21:54:16 +0100 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-11-03 21:54:16 +0100 |
| commit | d55d735f430067642fd559b29cbcdf871c01e710 (patch) | |
| tree | 2f60fa1e5dafaa9256c17b3f8102152703b99c94 | |
| parent | 8e6d5c3f2e7f289e12f8f7735abe2f4f92b4e372 (diff) | |
| download | quatuorbellefeuille.com-d55d735f430067642fd559b29cbcdf871c01e710.tar.xz | |
Fix photo div width, body min-height
Also add footer
| -rw-r--r-- | artistes.css | 86 | ||||
| -rw-r--r-- | artistes.html | 28 | ||||
| -rw-r--r-- | commun.css | 12 |
3 files changed, 71 insertions, 55 deletions
diff --git a/artistes.css b/artistes.css index 6883f8a..782ff99 100644 --- a/artistes.css +++ b/artistes.css @@ -1,5 +1,13 @@ +body { + height: 100%; + display: flex; + flex-direction: column; +} + .main { + flex-grow: 1; display: flex; + background: #ccc; } .main div { @@ -8,51 +16,55 @@ #photos { width: 30%; + flex-shrink: 0; background: #fd4; } -#photos-inner { - position: fixed; - height: 100% +#bio { + background: #bbb; } -#photos-inner img { - position: absolute; - height: 33%; - border-color: #ddd; - border-width: 10px; - border-style: solid; - border-radius: 20%; - filter: grayscale(1); - transition: 1s; -} +/* #photos-inner { */ +/* position: fixed; */ +/* } */ -#photos-inner img:hover { - filter: none; -} +/* #photos-inner img { */ +/* position: absolute; */ +/* height: 33%; */ +/* border-color: #ddd; */ +/* border-width: 10px; */ +/* border-style: solid; */ +/* border-radius: 20%; */ +/* filter: grayscale(1); */ +/* transition: 1s; */ +/* } */ -/* TODO: fix photos div height when zoomed out */ -#vlad { - left: 2em; - top: 5%; -} +/* #photos-inner img:hover { */ +/* filter: none; */ +/* } */ -#garet { - left: 10em; - top: 10%; -} +/* /\* TODO: fix photos div height when zoomed out *\/ */ +/* img:nth-of-type(1) { */ +/* left: 1%; */ +/* top: 5%; */ +/* } */ -#ivan { - left: 2em; - top: 30%; -} +/* img:nth-of-type(2) { */ +/* right: 1%; */ +/* top: 10%; */ +/* } */ -#sofia { - left: 10em; - top: 35%; -} +/* img:nth-of-type(3) { */ +/* left: 1%; */ +/* top: 30%; */ +/* } */ -#bio { - width: 45%; - background: #fee; -} +/* img:nth-of-type(4) { */ +/* right: 1%; */ +/* top: 35%; */ +/* } */ + +/* #bio { */ +/* width: 45%; */ +/* background: #fee; */ +/* } */ diff --git a/artistes.html b/artistes.html index 062db55..24128ab 100644 --- a/artistes.html +++ b/artistes.html @@ -3,22 +3,22 @@ <link rel="stylesheet" href="artistes.css"> </head> <body> - <nav> - <ol> - <li>accueil</li> - <li>artistes</li> - <li>calendrier</li> - <li>contact</li> - </ol> - </nav> + <nav> + <ol> + <li>accueil</li> + <li>artistes</li> + <li>calendrier</li> + <li>contact</li> + </ol> + </nav> <div class="main"> <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"> + <!-- <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> @@ -69,4 +69,8 @@ </div> </div> + + <footer> + <p>Mentions légales - Plan du site</p> + </footer> </body> @@ -1,14 +1,14 @@ -body { - background: #eee; - padding-left: 10%; - padding-right: 10%; -} - nav ol { display: flex; + padding-left: 0; + text-align: center; list-style-type: none; } nav ol li { flex: 1; } + +footer { + margin: auto; +} |