adding popup
This commit is contained in:
parent
0238e85d80
commit
9407a4931d
2 changed files with 126 additions and 63 deletions
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
/*===============================================*/
|
||||
|
|
Reference in a new issue