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;
}
.Product{
float:left;
margin : 5%;
width: 80%;
}
.Product p, .Product h3{
margin-top: -5px;
}
.memeContainer {
position: absolute;
width:25wh;
/*.memeContainer {
border-color: black;
border-width: 1px;
border-style: solid;
width:25%;
padding-bottom: 25%;
float: left;
margin : 5%;
height: 0;
}
.meme{
width: inherit;
height: inherit;
position: absolute;
width: 100%;
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{
margin-top: 50%;
width:100%;
border:1px;
border-color: black;
border-width: 1px;
border-style: solid;
}
.pubD{
grid-column-start : 3;

85
index.php
View File

@ -23,47 +23,52 @@
</div>
<main>
<div class="page">
<section class=Liste>
<div class="memeContainer">
<img src="img/meme/bouton.jpg" class=meme>
<section class="Liste">
<div class="row">
<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 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>
</div>
</main>