Browse Source

Premier prototype de page de choix a priori termine

Florian Ehr 3 years ago
parent
commit
2e20b02058
3 changed files with 31 additions and 12 deletions
  1. 26
    12
      CSS/etrange_decouverte.css
  2. 1
    0
      HTML/etrange_decouverte.html
  3. 4
    0
      JAVASCRIPT/etrange_decouverte.js

+ 26
- 12
CSS/etrange_decouverte.css View File

@@ -51,27 +51,41 @@ body {
51 51
             }
52 52
 
53 53
             .button {
54
+                outline: none;
55
+                border: 3px solid white;
56
+                border-radius: 50px;
57
+                height: 8vh;
58
+                min-width: 15vw;
59
+                padding: 0px 10px 0px 10px;
60
+                color: ;
54 61
                 font-family: 'Special Elite', cursive;
55
-                border-radius: 20px;
56
-                background-color: #B0C4DE;
57
-                height: 3.8vh;
62
+                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
63
+                cursor : pointer;
58 64
             }
59 65
 
60
-            .button:hover{
61
-                animation-name: zslide;
62
-                animation-duration: 3s;
66
+            .button:hover {
67
+                box-shadow: 0 0 50px  #B0C4DE;
63 68
             }
64 69
 
65
-            @keyframes zslide {
70
+            .button:active {
71
+                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
72
+            }
73
+
74
+            @keyframes oscille {
66 75
                 from {
67
-                    font-size: 2vw;
68
-                    opacity: 1;
76
+                    transform: rotate(0);
69 77
                 }
70 78
 
71
-                to {
72
-                    font-size: 6vw;
73
-                    opacity: 0;
79
+                25% {
80
+                    transform: rotate(8deg);
81
+                }
74 82
 
83
+                75% {
84
+                    transform: rotate(-8deg);
85
+                }
86
+
87
+                to {
88
+                    transform: rotate(0);
75 89
                 }
76 90
             }
77 91
 

+ 1
- 0
HTML/etrange_decouverte.html View File

@@ -7,6 +7,7 @@
7 7
     <link rel="stylesheet" href="../CSS/etrange_decouverte.css">
8 8
     <link rel="preconnect" href="https://fonts.gstatic.com">
9 9
     <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> 
10
+    <script defer type="text/javascript" src="../JAVASCRIPT/etrange_decouverte.js"></script>
10 11
 </head>
11 12
 <body>
12 13
     <header>

+ 4
- 0
JAVASCRIPT/etrange_decouverte.js View File

@@ -0,0 +1,4 @@
1
+let safeButton = document.getElementById("safeButton");
2
+
3
+
4
+console.log(safeButton);

Loading…
Cancel
Save