-
-
Save brickbones/16818b460aede0639e0120f6b013b69e to your computer and use it in GitHub Desktop.
| <div class="section"> | |
| <h1>Welcome To Paradise</h1> | |
| <div class="video-container"> | |
| <div class="color-overlay"></div> | |
| <video autoplay loop muted> | |
| <source src="video.mp4" type="video/mp4"> | |
| </video> | |
| </div> | |
| </div> | |
| <div style="height:400px;width:100%"> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quod soluta natus. Magni tempora animi illo ea accusamus ex deserunt odio facere deleniti molestiae qui eaque in illum praesentium sunt iste accusantium nobis repellat aspernatur alias, architecto consectetur voluptate dolore! Saepe, enim rem nam dolorem tempore blanditiis perspiciatis repellat architecto.</p> | |
| </div> | |
| <style> | |
| .section { | |
| position: relative; | |
| width: 100%; | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| } | |
| .section h1 { | |
| text-align: center; | |
| font-size: 6rem; | |
| font-family: "Cookie"; | |
| padding: 20px; | |
| margin: 15px; | |
| z-index: 1; | |
| opacity: 0.7; | |
| } | |
| .video-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| } | |
| .color-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| background-color: lightblue; | |
| width: 100%; | |
| height: 100vh; | |
| opacity: 0.5; | |
| } | |
| </style> |
thank for the code
Awesome, thanks for this.
Thank You!
That was code was awesome
Thank you for that!
THANK YOU SO MUCH BRO
Hi, thanks so much this has saved me days of messing around, rookie questions what do i add to change the font colour and how can I bring the top of the video down say 100px to allow me to add a nav bar? (or float a nav bar over the top...
Thanks
You can just add your navbar above his HTML
Thank you so much
Can you please leave a link to download the video of the sea. I really loved
Thank you so much! Any advice dear magician to make it responsive?
thankyou very much
thanks you :3
Thank You
Hey where are the fonts????????????????????????????????????????????????
thanks
thank you
thank you
thank you
My background will not play. I was trying to change the background to a different one but it is not displaying the video what am I doing wrong
Thanks a lot man
Try using a video with less size that well it will run perfectly on the background
and also try positioning the backgrounds
thanks a lot, i used it for my school project!
Thanks for the wonderful code