Code :
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name=”viewport” content=”width=device-width, initial-scale=1″> | |
| <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css“> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: Arial; | |
| font-size: 17px; | |
| } | |
| #myVideo { | |
| position: fixed; | |
| right: 0; | |
| bottom: 0; | |
| min-width: 100%; | |
| min-height: 100%; | |
| } | |
| .content { | |
| position: fixed; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.5); | |
| color: #f1f1f1; | |
| width: 100%; | |
| padding: 20px; | |
| } | |
| #myBtn { | |
| width: 200px; | |
| font-size: 18px; | |
| padding: 10px; | |
| border: none; | |
| background: #000; | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| #myBtn:hover { | |
| background: #ddd; | |
| color: black; | |
| } | |
| .button { | |
| position: relative; | |
| background-color: #4CAF50; | |
| border: none; | |
| font-size: 28px; | |
| color: #FFFFFF; | |
| padding: 20px; | |
| width: 200px; | |
| text-align: center; | |
| -webkit-transition-duration: 0.4s; /* Safari */ | |
| transition-duration: 0.4s; | |
| text-decoration: none; | |
| overflow: hidden; | |
| cursor: pointer; | |
| } | |
| .button:after { | |
| content: “”; | |
| background: #90EE90; | |
| display: block; | |
| position: absolute; | |
| padding-top: 300%; | |
| padding-left: 350%; | |
| margin-left: -20px!important; | |
| margin-top: -120%; | |
| opacity: 0; | |
| transition: all 0.8s | |
| } | |
| .button:active:after { | |
| padding: 0; | |
| margin: 0; | |
| opacity: 1; | |
| transition: 0s | |
| } | |
| .fa { | |
| padding: 20px; | |
| font-size: 30px; | |
| width: 50px; | |
| text-align: center; | |
| text-decoration: none; | |
| margin: 5px 2px; | |
| } | |
| .fa:hover { | |
| opacity: 0.7; | |
| } | |
| .fa-facebook { | |
| background: #3B5998; | |
| color: white; | |
| } | |
| .fa-twitter { | |
| background: #55ACEE; | |
| color: white; | |
| } | |
| .fa-google { | |
| background: #dd4b39; | |
| color: white; | |
| } | |
| .fa-linkedin { | |
| background: #007bb5; | |
| color: white; | |
| } | |
| .fa-youtube { | |
| background: #bb0000; | |
| color: white; | |
| } | |
| .fa-instagram { | |
| background: #125688; | |
| color: white; | |
| } | |
| .fa-pinterest { | |
| background: #cb2027; | |
| color: white; | |
| } | |
| .fa-snapchat-ghost { | |
| background: #fffc00; | |
| color: white; | |
| text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; | |
| } | |
| .fa-skype { | |
| background: #00aff0; | |
| color: white; | |
| } | |
| .fa-android { | |
| background: #a4c639; | |
| color: white; | |
| } | |
| .fa-dribbble { | |
| background: #ea4c89; | |
| color: white; | |
| } | |
| .fa-vimeo { | |
| background: #45bbff; | |
| color: white; | |
| } | |
| .fa-tumblr { | |
| background: #2c4762; | |
| color: white; | |
| } | |
| .fa-vine { | |
| background: #00b489; | |
| color: white; | |
| } | |
| .fa-foursquare { | |
| background: #45bbff; | |
| color: white; | |
| } | |
| .fa-stumbleupon { | |
| background: #eb4924; | |
| color: white; | |
| } | |
| .fa-flickr { | |
| background: #f40083; | |
| color: white; | |
| } | |
| .fa-yahoo { | |
| background: #430297; | |
| color: white; | |
| } | |
| .fa-soundcloud { | |
| background: #ff5500; | |
| color: white; | |
| } | |
| .fa-reddit { | |
| background: #ff5700; | |
| color: white; | |
| } | |
| .fa-rss { | |
| background: #ff6600; | |
| color: white; | |
| } | |
| .card { | |
| box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); | |
| transition: 0.3s; | |
| width: 40%; | |
| } | |
| .card:hover { | |
| box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); | |
| } | |
| .container { | |
| padding: 2px 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var video = document.getElementById(“myVideo”); | |
| var btn = document.getElementById(“myBtn”); | |
| function myFunction() { | |
| if (video.paused) { | |
| video.play(); | |
| btn.innerHTML = “Pause”; | |
| } else { | |
| video.pause(); | |
| btn.innerHTML = “Play”; | |
| } | |
| } | |
| </script> | |
| <video autoplay muted loop id=”myVideo”> | |
| <source src=”video.mp4” type=”video/mp4″> | |
| Your browser does not support HTML5 video. | |
| </video> | |
| <div class=”content”> | |
| <h1>#GalleryofSoorya</h1> | |
| <p>Welcome to Explore my Gallery </p> | |
| <button class=”button”>Enter</button> | |
| <button id=”myBtn” onclick=”myFunction()”>Pause</button> | |
| <h2>Connect through Social Media</h2> | |
| <!– Add font awesome icons –> | |
| <a href=”www.facebook.com/galleryofsoorya” class=”fa fa-facebook”></a> | |
| <a href=”www.twitter.com/galleryofsoorya” class=”fa fa-twitter”></a> | |
| <a href=”https://www.linkedin.com/company/30230287/” class=”fa fa-linkedin”></a> | |
| <a href=”https://www.youtube.com/channel/UC6yC-XagpN0RAeWasurFJuA?sub_confirmation=1” class=”fa fa-youtube”></a> | |
| <a href=”https://www.instagram.com/galleryofsoorya/” class=”fa fa-instagram”></a> | |
| <a href=”https://in.pinterest.com/galleryofsoorya/” class=”fa fa-pinterest”></a> | |
| <a href=”#” class=”fa fa-snapchat-ghost”></a> | |
| <a href=”#” class=”fa fa-skype”></a> | |
| <a href=”#” class=”fa fa-android”></a> | |
| <a href=”#” class=”fa fa-dribbble”></a> | |
| <a href=”https://vimeo.com/user107105918” class=”fa fa-vimeo”></a> | |
| <a href=”#” class=”fa fa-tumblr”></a> | |
| <a href=”#” class=”fa fa-vine”></a> | |
| <a href=”#” class=”fa fa-foursquare”></a> | |
| <a href=”#” class=”fa fa-stumbleupon”></a> | |
| <a href=”#” class=”fa fa-flickr”></a> | |
| <a href=”#” class=”fa fa-yahoo”></a> | |
| <a href=”#” class=”fa fa-reddit”></a> | |
| <a href=”#” class=”fa fa-rss”></a> | |
| </div> | |
| </body> | |
| </html> | |
Welcome to My Gallery - Soorya. 