pub

UnMeme.php

@@ -31,8 +31,7 @@
         </main>
         <div class=pubD>
             <a href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
-                <img src="img/sodaramel.png"  alt="" height="100px" width="100px" >   
+                <img src="img/pubD.png"  alt="">   
-                <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
             </a>
         </div>
         <?php include("footer.php");?>

css/style.css

@@ -13,11 +13,21 @@ html{
 body{
   display: grid;
   width:100%;
-  grid-template-columns: 10vw 80vw 10vw;
+  grid-template-columns: 10vw 78.5vw 10vw;
   grid-template-rows: auto auto auto;
   grid-auto-rows: minmax(auto, auto);
   background:linear-gradient(lightgray, #775cff);
 }
+@media only screen and (max-width: 850px) {
+  body {
+    grid-template-columns: 10vw 78vw 10vw;
+  }
+}
+@media only screen and (max-width: 550px) {
+  body {
+    grid-template-columns: 10vw 77vw 10vw;
+  }
+}
 
 
 main{
@@ -55,16 +65,14 @@ main{
   grid-row-start: 2;
   grid-row-end: 2;
   z-index:3;
-  background-color: green;
+  margin:1%;
 }
-
+.pubD img{
-
+  margin-top: 50%;
-
-@media only screen and (max-width: 600px) {
-  main {
   width:100%;
-    background: none;
+  border-color: black;
-  }
+  border-width: 1px;
+  border-style: solid;
 }
 
 footer {

css/upload.css

@@ -9,5 +9,38 @@
     border-style:solid;
     border-width:10px;
     border-color: white;
-    border-radius:100px;
+    border-radius:10px;
+}
+.title{
+    text-align: center;
+    font-size: 200%;
+}
+.dragndrop{
+    background: rgba(0, 0, 0, 0.212);
+    border-style:dotted;
+    border-width:7px;
+    border-radius:10px;
+    width:80%;
+    margin: auto;
+}
+.dragndrop:hover{
+    background: rgba(100, 100, 100, 0.212);
+}
+.dragndrop img{
+    margin-left: 46%;
+    margin-bottom: 20%;
+    width:8%;
+}
+.dragndrop:hover img{
+    margin-left: 45%;
+    margin-bottom: 17.34%;
+    width:10%;
+}
+.dragndrop-title{
+    text-align: center;
+    margin-top:10%;
+}
+.warning{
+    text-align: center;
+    color: white;
 }

index.php

@@ -100,8 +100,7 @@
         </main>
         <div class=pubD>
             <a href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
-                <img src="img/sodaramel.png"  alt="" height="100px" width="100px" >   
+                <img src="img/pubD.png"  alt="">   
-                <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
             </a>
         </div>
         <?php include("footer.php");?>

upload.php

@@ -24,16 +24,16 @@
         <main>
             <article class="generalPanel">
                 <p class="title">Publiez votre Meme !</p>
-                img drag&drop
+                <div class="dragndrop">
-                boutons
+                    <p class="dragndrop-title">Glissez ou déposez votre image ici</p>
-                infos
+                    <img src="img/upload.png" alt="">  
-                options
+                </div>
+                <p class="warning">Attention, votre image doit respecter nos <a href="#">conditions d'utilisation</a> !</p>
             </article>
         </main>
         <div class=pubD>
             <a href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
-                <img src="img/sodaramel.png"  alt="" height="100px" width="100px" >   
+                <img src="img/pubD.png"  alt="">   
-                <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
             </a>
         </div>
         <?php include("footer.php");?>