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

test avec les poissons

Browse Source
This commit is contained in:
hugogogo
2021-02-21 16:52:32 +01:00
parent d5df4a5a85
commit 3cfee6d1ae
2 changed files with 103 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
pages/litterall.html
View File

@@ -178,43 +178,63 @@
<div class="galery frame" id="tous_numeros"> <div class="galery frame" id="tous_numeros">
<div class="card"> <div class="card">
<img src="./docs/revues/litt22.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt22.jpg" alt="revue litterall">
</div>
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
</div>
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p> <p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
</div>
<p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p> <p>fefijl fe sdj dazdjljlf sf fvd;ijsg; feikeqzd f;femsokmkqzd dkqlklmokqz</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
</div>
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p> <p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
</div>
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt17.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt17.jpg" alt="revue litterall">
</div>
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p> <p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/lion.jpg" alt="lion"> <div class="image">
<img src="./docs/revues/lion.jpg" alt="lion">
</div>
<p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p> <p>fk gr sd erzg qre qgrse qf shttr qsr hg ef fr hrq</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt21.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt21.jpg" alt="revue litterall">
</div>
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt20.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt20.jpg" alt="revue litterall">
</div>
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
<div class="card"> <div class="card">
<img src="./docs/revues/litt19.jpg" alt="revue litterall"> <div class="image">
<img src="./docs/revues/litt19.jpg" alt="revue litterall">
</div>
<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p> <p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
</div> </div>
</div> </div>
@@ -263,6 +283,57 @@
</div> </div>
</div> </div>
<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>
</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>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
<p>Lorem ipsum dolor sit amet, consectetur</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>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</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>
</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>
</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>
</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>
</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>
</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>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
</article> </article>
</main> </main>
</body> </body>

36
styles/images.css
View File

@@ -70,9 +70,6 @@
.gallery .card { .gallery .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap;
/*
*/
flex: 1; flex: 1;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@@ -86,7 +83,7 @@
} }
.gallery .card img { .gallery .card img {
/*height of imgs hence of lines*/ /*height of imgs hence of lines*/
max-height: var(--gallery-img-height); height: var(--gallery-img-height);
/*appearence of border of imgs*/ /*appearence of border of imgs*/
border-style: solid; border-style: solid;
border-width: var(--gallery-img-border-width); border-width: var(--gallery-img-border-width);
@@ -114,6 +111,7 @@
border-color: var(--gallery-frame-color); border-color: var(--gallery-frame-color);
} }
.gallery.frame .card > * { .gallery.frame .card > * {
/*the auto is what avoid img to stretch towards edges*/
margin: var(--gallery-gap-unit) auto; margin: var(--gallery-gap-unit) auto;
} }
@@ -126,23 +124,33 @@
.galery .card { .galery .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 20px; /*
margin-left: 0px;
/* flex: 1; =
flex: 1 0 0;
or
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
flex-basis: 0; flex-basis: 0;
*/ */
flex: 0 1 0; flex: 1 1 0;
border: 1px solid black; padding: 0px;
margin: 20px 20px 20px 0px;
}
.galery .card .image {
display: flex;
width: 100%;
background-color: hsl(0, 0%, 95%);
} }
.galery .card img { .galery .card img {
margin: 0px;
height: 200px; height: 200px;
border: 1px solid lightgrey; }
.galery .card p {
margin-left: 0px;
} }
.galery .card > * { .galery .card > * {
margin: 10px auto; margin: 5px auto;
flex: 1 1 auto;
} }
.galery::after {
content: "";
flex: 100;
}