IUT_Informatique/KyFlo
Archived
1
0
Fork 0
Code Activity

adding animations :3

Browse source
This commit is contained in:
KEZEL BENOIT p1907091 2019-12-16 13:34:50 +01:00
parent cd102bf8d1
commit 885a4424bd
2 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Assets/Pages/Autres/checkout.html
View file

@ -13,9 +13,9 @@
<body> <body>
<nav> <nav>
<a id="kyflo" class="active" href="../../../index.html">KyFlo</a> <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
<a class="raccourci" href="#nous">A propos</a> <a class="raccourci" href="../../../index.html#nous">A propos</a>
<a class="raccourci" id="borL" href="#contact">Contact</a> <a class="raccourci" id="borL" href="../../../index.html#contact">Contact</a>
<a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a> <a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt><h3>Panier</h3></a>
<a id="go" href="Assets/Pages/Autres/search_result.html">GO</a> <a id="go" href="Assets/Pages/Autres/search_result.html">GO</a>
<input type="text" placeholder="Rechercher sur tout le site..."> <input type="text" placeholder="Rechercher sur tout le site...">
</nav> </nav>

19
Assets/css/css.css
View file

@ -5,13 +5,15 @@ html{
} }
body { body {
background: linear-gradient(to left, rgb(10, 1, 92), rgb(0, 82, 50));
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
z-index: 2; z-index: 2;
background: linear-gradient(to left, rgb(10, 1, 92), rgb(0, 82, 50));
} }
img { img {
width: 30%; width: 30%;
float: left; float: left;
@ -20,6 +22,12 @@ img {
.content { .content {
background-color: #ddd; background-color: #ddd;
padding: 2vw; padding: 2vw;
animation: 1s slider;
}
@keyframes content{
0%{height: 0%}
100%{height: 100%}
} }
h1 { h1 {
@ -178,6 +186,12 @@ div#slider {
width: 100%; width: 100%;
max-width: 1920px; max-width: 1920px;
margin: auto; margin: auto;
animation: 1s slider;
}
@keyframes slider{
0%{margin-top: 150%}
100%{margin-top: 0%}
} }
div#slider figure { div#slider figure {
@ -235,7 +249,8 @@ div#slider figure {
} }
.title{ .title{
background-color: rgba(255, 255, 255, 0.4) background-color: rgba(255, 255, 255, 0.4);
animation: 1s right;
} }
/*================================================*/ /*================================================*/