adding popup

Assets/Pages/Produits/nao.html

@@ -22,6 +22,14 @@
         <input type="text" placeholder="Rechercher sur tout le site...">
     </nav>
 
+    <div id="dark_popup">
+        
+        <div id="popup">
+            <h1>L'article Nao a bien été ajouté à votre panier !</h1>
+            <a href="../Autres/checkout.html"><h2>Voir mon panier</h2></a>
+            <a href="../../../index.html"><h2>Continuer mes achats</h2></a>
+        </div>
+
         <div class="title">
             <h1>Résumé</h1>
         </div>
@@ -30,12 +38,13 @@
             <div id="Produit">
                 <img src="../../Images/Produits/nao.png" alt>
                 <h1>ROBOT NAO</h1>
-            <button onclick="window.location.href='../Autres/checkout.html'">Ajouter au panier</button>
+                <button onclick="window.location.href='#dark_popup'">Ajouter au panier</button>
                 <h2>5 000€</h2>
                 <h3>Nao est un robot humanoide qui vous assiste dans vos tâches quotidiennes</h3>
             </div>
         </div>
 
+
         <div class="title">
             <h1>Caractéristiques techniques</h1>
         </div>
@@ -88,6 +97,7 @@
                 <input type="submit" value="Envoyer">
             </form>
         </div>
+    </div>
 
     <footer>
         <div id="acces">

Assets/css/css.css

@@ -22,6 +22,7 @@ img {
 .content {
     background-color: #ddd;
     padding: 2vw;
+    opacity: 1;
     animation: 1s slider;
 }
 
@@ -245,12 +246,14 @@ div#slider figure {
     padding: 6vw;
     margin: 0;
     color: white;
+ 
     text-align: center;
 }
 
 .title{
     background-color: rgba(255, 255, 255, 0.4);
     animation: 1s right;
+    opacity: 1;
 }
 /*================================================*/
 
@@ -705,4 +708,54 @@ input[type=submit]:hover{
 
 
 
+
+#dark_popup:target #popup{
+    display:block;
+    animation: 1s popup;
+    animation-fill-mode: forwards;
+    transition-duration: 0.5s;
+}
+
+#dark_popup:target .title, #dark_popup:target .content{
+    opacity: 0.2;
+}
+
+
+#popup{
+    display:none;
+    position: fixed;
+    background-color : #ddd;
+    top: 50%;
+    padding: 1vw;
+    border-radius: 1vw;
+    left: 15%;
+    width: 70%;
+    opacity: 1;
+    z-index: 1;
+}
+
+
+@keyframes popup{
+    0%{margin-top:-100%}
+    100%{margin-top:0%}
+}
+
+#popup h1{
+    color: black;
+    font-size: 2.5vw;
+}
+
+#popup h2{
+    color: rgb(61, 61, 61);
+    padding-top: 1vw;
+    font-size: 2vw;
+    cursor: pointer;
+    text-align: center;
+    border-top: 0.1vw solid rgb(59, 59, 59);
+}
+
+#popup h2:hover{
+    font-size: 2.5vw;
+    transition-duration: 0.5s;
+}
 /*===============================================*/