pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

plusieurs tentatives de gallery differentes

Browse Source
This commit is contained in:
hugogogo
2021-02-23 15:38:29 +01:00
parent 3cfee6d1ae
commit f0f4fd2e03
2 changed files with 468 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

442
pages/litterall.html
View File

@@ -12,14 +12,6 @@
main {
margin-left: 20px;
}
.card p {
display: none;
display: block;
}
img#dernier_numero {
width: 240px;
max-width: 98vw;
}
</style>
</head>
<body>
@@ -44,7 +36,11 @@
<img id="dernier_numero" src="./docs/revues/litt23.jpg" alt="revue litterall">
</div>
<div class="gallery framme" id="tous_numeros">
<br>
<p>_______________________________________________________________</p>
<br>
<div class="gallery frame" id="tous_numeros">
<div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
@@ -87,6 +83,9 @@
</div>
</div>
<br>
<p>_______________________________________________________________</p>
<br>
<div class="gallery frame" id="tous_numeros">
<div class="card">
@@ -131,6 +130,9 @@
</div>
</div>
<br>
<p>_______________________________________________________________</p>
<br>
<div class="gallery" id="tous_numeros">
<div class="card">
@@ -175,6 +177,9 @@
</div>
</div>
<br>
<p>_______________________________________________________________</p>
<br>
<div class="galery frame" id="tous_numeros">
<div class="card">
@@ -239,6 +244,9 @@
</div>
</div>
<br>
<p>_______________________________________________________________</p>
<br>
<div class="galery framme" id="tous_numeros">
<div class="card">
@@ -283,23 +291,32 @@
</div>
</div>
<p>_images horizontal stretch_____________________________________________</p>
<div class="galery">
<div class="card">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
<p>Lorem ipsum dolor sit amet, consectetur</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
@@ -307,32 +324,419 @@
</div>
<div class="card">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices massa eu efficitur luctus</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontal extra space_________________________________________</p>
<div class="galery space">
<div class="card">
<div class="image_background">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontaly cut________________________________________________</p>
<div class="galery cut">
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontaly cut with minimum width_____________________________</p>
<div class="galery cut minwidth">
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</article>
</main>

53
styles/images.css
View File

@@ -133,24 +133,61 @@
padding: 0px;
margin: 20px 20px 20px 0px;
}
.galery .card .image {
display: flex;
width: 100%;
background-color: hsl(0, 0%, 95%);
}
.galery .card img {
margin: 0px;
height: 200px;
}
.galery .card p {
margin-left: 0px;
}
.galery .card > * {
margin: 5px auto;
margin: 5px 0px;
}
.galery::after {
content: "";
flex: 100;
flex: 10;
}
/*space*/
.galery.space .card .image_background {
display: flex;
width: 100%;
background-color: hsl(0, 0%, 95%);
}
.galery.space .card .image_background img {
margin: auto;
}
/*cut*/
.galery.cut .card {
display: flex;
}
.galery.cut .card > * {
margin: 5px auto;
}
.galery.cut .card .image_background {
display: flex;
width: 100%;
overflow: hidden;
background-color: hsl(0, 0%, 95%);
}
.galery.cut .card .image {
margin: auto;
}
.galery.cut .card .image img {
margin: auto -30px;
}
/*minwidth*/
.galery.minwidth .card {
min-width: 150px;
}
/*image du haut*/
div.image_container {
border: 1px solid green;
margin: auto;
margin-left: 0px;
overflow: visible;
}
div.image_container img {
margin-left: -10px;
margin-right: -10px;
}