Add files via upload

math-pixel · Nov 16, 2021 · b48b3d7 · b48b3d7
1 parent 5f4755e
commit b48b3d7
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 7 deletions.
diff --git a/css.css b/css.css
@@ -44,6 +44,10 @@
   0%,100%{opacity: 0}
   40%,60%{opacity: 1}
 }
+@keyframes ring{
+	0%{transform: rotate(0deg);}
+	100%{transform: rotate(360deg);}
+}
 
 
 
@@ -367,15 +371,115 @@ a:hover {
 }
 
 .prog{
+
+	text-align: center;
 	display: flex;
 	justify-content: space-around;
 	text-align: center;
+	flex-wrap: wrap;
 	text-decoration: none;
 	color: white;
 }
 .prog a{
 	margin: 10px;
 }
+.container-button .btn{ 
+	position: relative;
+	width: 250px;
+	height: 50px;
+	margin: 20px;
+}
+.container-button .btn a{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	margin: 20;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: rgba(255, 255, 255 , 0.05);
+	box-shadow: 0px 15px 12px rgba(0,0,0,0.2);
+	border-top: 1px solid rgba(255,255,255,0.1);
+	border-bottom: 1px solid rgba(255,255,255,0.1);
+	border-radius: 30px;
+	color: white;
+	z-index: 1;
+	font-weight: 400;
+	letter-spacing: 1px;
+	text-decoration: none;
+	overflow: hidden;
+	transition: 0.5s;
+	backdrop-filter: blur(15px);
+
+}
+.container-button .btn:hover a{ 
+	letter-spacing: 3px;
+}
+.container-button .btn a::before{
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 50%;
+	height: 100%;
+	background: linear-gradient(to left, rgba(255,255,255,0.15),transparent);
+	transform: skewX(45deg) translateX(0);
+	transition: 0.5s;
+}
+.container-button .btn:hover a::before{
+	transform: skewX(45deg) translateX(200%);
+}
+.container-button .btn::before{
+	content: '';
+	position: absolute;
+	left: 54%;
+	transform: translateX(-50%);
+	bottom: -5px;
+	width: 30px;
+	height: 10px;
+	background: #97e836;
+	border-radius: 10px;
+	transition: 0.5s;
+
+}
+.container-button .btn:hover::before{
+	bottom:0;
+	height: 50%;
+	width: 90%;
+	border-radius: 30px;
+	transition-delay: 0.3s;
+	filter: blur(5px);
+}
+.container-button .btn::after{
+	content: '';
+	position: absolute;
+	left: 54%;
+	transform: translateX(-50%);
+	top: -5px;
+	width: 30px;
+	height: 10px;
+	background: #97e836;
+	border-radius: 10px;
+	transition: 0.5s;
+}
+.container-button .btn:hover::after{
+	top:0;
+	background:#8eda34;
+	height: 50%;
+	width: 80%;
+	border-radius: 30px;
+	transition-delay: 0.3s;
+	filter: blur(5px);
+}
+.container-button .btn::before,
+.container-button .btn::after{
+	background: #97e836;
+	box-shadow: 0 0 5px #97e836, 0 0 15px #97e836, 0 0 30px #97e836, 0 0 60px #97e836;
+}
+
+
+
+
 
 
 

diff --git a/index.html b/index.html
@@ -118,10 +118,7 @@ <h1>Languages Informatique</h1>
                 <div class="lvl_prog">
                     <h3 class="color_python">Python</h3>
                     <div class="progress_python">
-
-                        <div class="progress_python2">
-
-                        </div>
+                        <div class="progress_python2"></div>
                     </div>
                     <h3>html / css</h3>
                     <div class="progress_html">
@@ -136,10 +133,12 @@ <h3>c# / c++</h3>
                         </div>
                     </div>
                 </div>
+
+
                 <div class="prog">
-                	<img src="./image/icons8-arrow-96(3).png">
-                	<a href="program_page.html"><h3>Mes programmes</h3></a>
-                	<img src="./image/icons8-arrow-96(3).png">
+                	<div class="container-button">                	
+                		<div class="btn"><a href="program_page.html">Mes programmes</a></div>
+                	</div>
                 </div>
 
                 <div class="port_perso" id="projets_perso">

diff --git a/script.js b/script.js
@@ -1,6 +1,9 @@
 var slideIndex = 0;
 showSlides();
 
+
+alert("Pour une meilleure experience utilisé le navigateur Chrome !!!")
+
 function showSlides() {
   var i;
   var slides = document.getElementsByClassName("mySlides");