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

Site fini :D

Browse Source
This commit is contained in:
Simon CATANESE 2023-01-07 01:49:49 +01:00
parent 989d2b5aae
commit c2b92abacf
7 changed files with 174 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
UnMeme.php
View File

@ -22,11 +22,62 @@
</a>
</div>
<main>
bonjour
Ici on se concentre sur un seul meme.
à afficher en grand dans un div, en dessous il faut le titre du meme, une courte description du créateur, le nom du créateur.
à droite une suite de commentaires, le nombre de likes et de commentaires, et un bouton partager.
<div class="center"></div>
<section class="panel">
<article class="memeArticle">
<div class="memeContainer">
<?php
$src = $_GET['meme'];
echo("<img src='img/meme/$src.jpg' alt=''>");
?>
</div>
<div class="infoContainer">
<blockquote class="memeInfo">
<p>Titre : Funny Sodaramel Toughts</p>
<p>Auteur : Dino Crous</p>
</blockquote>
</div>
</article>
<article class="statsArticle">
<div class="infoStats">
<p>436 votes positifs</p>
<p>25 votes négatifs</p>
<p>8 commentaires</p>
</div>
<div class="commentaire">
<p class="pseudo">Denis Monnerat</p>
<p class="com-text">Denis is approving your meme</p>
</div>
<div class="commentaire">
<p class="pseudo">David Laforge</p>
<p class="com-text">J'ai beaucoup rigolé</p>
</div>
<div class="commentaire">
<p class="pseudo">MrSim</p>
<p class="com-text">Hey mais c'est moi !</p>
</div>
<div class="commentaire">
<p class="pseudo">Bruno Ministre des Finances</p>
<p class="com-text">Très bonne réflexion, j'apprécie cette même</p>
</div>
<div class="commentaire">
<p class="pseudo">Bob-X_93</p>
<p class="com-text">PTDR</p>
</div>
<div class="commentaire">
<p class="pseudo">Obi-Wan Kenobi</p>
<p class="com-text">Hello there !</p>
</div>
<div class="commentaire">
<p class="pseudo">VENEOX</p>
<p class="com-text">Mais qu'est ce que je fous là moi ?</p>
</div>
<div class="commentaire">
<p class="pseudo">Pierre V</p>
<p class="com-text">C'est nul</p>
</div>
</article>
</section>
</main>
<div class=pubD>

100
css/UnMeme.css
View File

@ -0,0 +1,100 @@
main{
display: grid;
grid-template-columns: 25%, 50%, 25%;
grid-template-rows: 5vh, 80%, 5vh;
}
.panel{
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
display: flex;
width:55vw;
height: auto;
background: rgba(150, 0, 0, 0.212);
padding:15px;
border-style:solid;
border-width:10px;
border-color: white;
border-radius:50px;
}
.memeArticle{
float:left;
background-color: white;
width:70%;
height: 100%;
background: rgba(255, 255, 255, 0.53);
border-top-left-radius:40px;
border-bottom-left-radius:40px;
}
.memeContainer{
width: 90%;
height: auto;
background: rgba(150, 0, 0, 0);
border-radius:30px;
margin:auto;
margin-top: 5%;
padding: 15px;
}
.statsArticle{
float:left;
background: rgba(150, 0, 0, 0.212);
width:30%;
border-top-right-radius:40px;
border-bottom-right-radius:40px;
overflow: scroll;
}
.memeContainer img{
width:100%;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.memeInfo {
background: rgba(255, 255, 255, 0.363);
border-radius: 3px;
border-left: 5px solid rgb(142, 119, 253);
margin: 20px ;
margin-top:10px;
padding: 5px;
}
.infoStats{
border-left: 5px solid rgb(142, 119, 253);
display:inline;
padding-top: 1%;
float:left;
}
.infoStats p{
line-height: 30%;
font-size: 80%;
}
.commentaire{
border-left:5px solid rgb(105, 88, 189);
background: rgba(255, 255, 255, 0.363);
float:left;
width:100%;
}
.commentaire:nth-child(2n){
border-left:5px solid rgb(82, 69, 147);
background: rgba(25, 0, 255, 0.185);
}
.pseudo{
font-weight: bold;
font-size:60%;
line-height: 50%;
}
.com-text{
font-size: 60%;
font-weight: 200;
}

1
css/index.css
View File

@ -25,6 +25,7 @@
.meme{
width: 100%;
left: 0;
border-radius:10px;
}

4
css/style.css
View File

@ -53,7 +53,7 @@ main{
}
.pubG img{
margin-top: 50%;
top: 50%;
width:100%;
border-color: black;
border-width: 1px;
@ -68,7 +68,7 @@ main{
margin:1%;
}
.pubD img{
margin-top: 50%;
top: 50%;
width:100%;
border-color: black;
border-width: 1px;

0
img/meme/SodaSupHaribo.png → img/meme/SodaSupHaribo.jpg Executable file → Normal file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 113 KiB

0
img/meme/sodabaguette.png → img/meme/sodabaguette.jpg Executable file → Normal file
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 488 KiB

After

Width:  |  Height:  |  Size: 488 KiB

30
index.php
View File

@ -26,71 +26,71 @@
<div class="row">
<div class="column">
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=bouton">
<img src="img/meme/bouton.jpg" class=meme>
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=DecouvreSodaraMeme">
<img src="img/meme/DecouvreSodaraMeme.jpg" class=meme>
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=insulit">
<img src="img/meme/insulit.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=matrix">
<img src="img/meme/matrix.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
</div>
<div class="column">
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=sodarameme">
<img src="img/meme/sodarameme.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=sodaramemev3">
<img src="img/meme/sodaramemev3.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<img src="img/meme/SodaSupHaribo.png" class=meme height="500vw" width="500vw">
<a href="UnMeme.php?meme=SodaSupHaribo">
<img src="img/meme/SodaSupHaribo.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=toiletramel">
<img src="img/meme/toiletramel.jpg" class=meme alt="" height="500vw" width="500vw">
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=megamindSoda">
<img src="img/meme/megamindSoda.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
</div>
<div class="column">
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=uno">
<img src="img/meme/uno.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<img src="img/meme/sodabaguette.png" class=meme height="500vw" width="500vw">
<a href="UnMeme.php?meme=sodabaguette">
<img src="img/meme/sodabaguette.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=mort">
<img src="img/meme/mort.jpg" class=meme height="500vw" width="500vw">
</a>
</div>
<div class="memeContainer">
<a href="UnMeme.php">
<a href="UnMeme.php?meme=shitting">
<img src="img/meme/shitting.jpg" class=meme height="500vw" width="500vw">
</a>
</div>