Created
March 22, 2022 21:33
-
-
Save westboy31/20a42a7cf65befc70a3c7528757e7f13 to your computer and use it in GitHub Desktop.
Join us
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en" dir="ltr"> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <div class="grid-container"> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="principale radisu"> | |
| <button type="button" name="button"> JOIN </button> | |
| </div> | |
| <div class="title radisu"> | |
| <h1 style = "color:white">JOIN THE TEAM</h1> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave1 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave1 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave1 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave1 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave1 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave1 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave1 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave1 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| <div class="wave2 radisu"> | |
| <img src="https://picsum.photos/id/1025/200/200"> | |
| </img> | |
| </div> | |
| </div> | |
| </body> | |
| <script type="text/javascript" src="app.js"> | |
| </script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.log("js activate"); | |
| const principale = document.querySelectorAll('.principale') | |
| const wave1 = document.querySelectorAll('.wave1'); | |
| const wave2 = document.querySelectorAll('.wave2'); | |
| const titre = document.querySelectorAll('.title h1'); | |
| function hover(){ | |
| wave1.forEach((i) => { | |
| i.style.opacity="100%"; | |
| }); | |
| wave2.forEach((i) => { | |
| i.style.opacity="100%"; | |
| }); | |
| titre[0].innerHTML = 'THEY TOOK THIS DECISION TOO'; | |
| } | |
| function out(){ | |
| wave1.forEach((i) => { | |
| i.style.opacity="0%"; | |
| }); | |
| wave2.forEach((i) => { | |
| i.style.opacity="0%"; | |
| }); | |
| titre[0].innerHTML = 'JOIN THE TEAM'; | |
| } | |
| principale[0].addEventListener('mouseover', hover); | |
| principale[0].addEventListener('mouseout', out ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| text-align: center; | |
| background-color: #f1f1f1 ; | |
| } | |
| .grid-container { | |
| width: 100% ; | |
| height: 95VH ; | |
| display: grid; | |
| grid-template-columns:repeat(5 , 1fr ); | |
| grid-template-rows:repeat(5 , 1fr); | |
| gap: 20px 20px; | |
| max-width: 800px; | |
| margin: auto; | |
| min-height:600px ; | |
| } | |
| .principale { | |
| grid-column: 3; | |
| grid-row: 3; | |
| background-color: white ; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .title { | |
| grid-column: 2 / span 3; | |
| background-color: #e33edb; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .radisu{ | |
| box-shadow: 0px 0px 3px 0px; | |
| } | |
| .wave2{ | |
| background-color: white; | |
| opacity: 0; | |
| transition: 1s ease 0.5s ; | |
| background-image: url(https://i.picsum.photos/id/1/150/150.jpg); | |
| } | |
| .wave1{ | |
| background-color: white; | |
| opacity: 0; | |
| transition: 1s ; | |
| background-image: url(https://i.picsum.photos/id/1027/150/150.jpg) | |
| } | |
| button{ | |
| background-color: #e33edb ; | |
| color: white ; | |
| font-weight: 600; | |
| box-shadow: none ; | |
| border: none ; | |
| height: 40%; | |
| width: 70%; | |
| font-size: 25px; | |
| border-radius: 5px; | |
| } | |
| img{ | |
| width : 100%; | |
| height : 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Codepen link : Join us