Site fini :D

UnMeme.php

@@ -22,11 +22,62 @@
             </a>
         </div>
         <main>
-
+            <div class="center"></div>
-            bonjour
+            <section class="panel">
-            Ici on se concentre sur un seul meme.
+                <article class="memeArticle">
-            à 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. 
+                    <div class="memeContainer">
-            à droite une suite de commentaires, le nombre de likes et de commentaires, et un bouton partager.
+                        <?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>

css/UnMeme.css

@@ -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;
+}

css/index.css

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

css/style.css

@@ -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;

index.php

@@ -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">
+                            <a href="UnMeme.php?meme=SodaSupHaribo">
-                                <img src="img/meme/SodaSupHaribo.png" class=meme height="500vw" width="500vw">
+                                <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">
+                            <a href="UnMeme.php?meme=sodabaguette">
-                                <img src="img/meme/sodabaguette.png" class=meme height="500vw" width="500vw">
+                                <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>