dossantoad/InsulineSodarameme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

YAY

Browse Source
This commit is contained in:
Simon CATANESE 2023-01-06 12:21:53 +01:00
parent 8245ded646
commit 42ce5c2593
3 changed files with 89 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
css/index.css
View File

@ -16,28 +16,53 @@
overflow: scroll; overflow: scroll;
} }
.Product{ /*.memeContainer {
float:left; border-color: black;
margin : 5%; border-width: 1px;
width: 80%; border-style: solid;
} width:25%;
.Product p, .Product h3{
margin-top: -5px;
}
.memeContainer {
position: absolute;
width:25wh;
padding-bottom: 25%; padding-bottom: 25%;
float: left; float: left;
margin : 5%; margin : 5%;
height: 0; height: 0;
} }
.meme{ .meme{
width: inherit; width: 100%;
height: inherit;
position: absolute;
left: 0; left: 0;
}*/
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create deux equal columns that sits next to each other */
.column {
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 100%;
max-width: 100%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
} }

3
css/style.css
View File

@ -42,8 +42,9 @@ main{
.pubG img{ .pubG img{
margin-top: 50%; margin-top: 50%;
width:100%; width:100%;
border:1px;
border-color: black; border-color: black;
border-width: 1px;
border-style: solid;
} }
.pubD{ .pubD{
grid-column-start : 3; grid-column-start : 3;

85
index.php
View File

@ -23,47 +23,52 @@
</div> </div>
<main> <main>
<div class="page"> <div class="page">
<section class=Liste> <section class="Liste">
<div class="memeContainer"> <div class="row">
<img src="img/meme/bouton.jpg" class=meme> <div class="column">
<div class="memeContainer">
<img src="img/meme/bouton.jpg" class=meme>
</div>
<div class="memeContainer">
<img src="img/meme/DecouvreSodaraMeme.jpg" class=meme>
</div>
<div class="memeContainer">
<img src="img/meme/insulit.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/matrix.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/megamindSoda.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/mort.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/shitting.jpg" class=meme height="500vw" width="500vw">
</div>
</div>
<div class="column">
<div class="memeContainer">
<img src="img/meme/sodarameme.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/sodaramemev3.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/SodaSupHaribo.png" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/toiletramel.jpg" class=meme alt="" height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/uno.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/sodabaguette.png" class=meme height="500vw" width="500vw">
</div>
</div>
</div> </div>
<div class="memeContainer">
<img src="img/meme/DecouvreSodaraMeme.jpg" class=meme>
</div>
<div class="memeContainer">
<img src="img/meme/insulit.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/matrix.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/megamindSoda.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/mort.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/shitting.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/sodarameme.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/sodaramemev3.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/SodaSupHaribo.png" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/toiletramel.jpg" class=meme alt="" height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/uno.jpg" class=meme height="500vw" width="500vw">
</div>
<div class="memeContainer">
<img src="img/meme/sodabaguette.png" class=meme height="500vw" width="500vw">
</div>
</section> </section>
</div> </div>
</main> </main>