MARCELO Posted January 31, 2018 Share Posted January 31, 2018 (edited) I NEED THE SECTIONS OF A WEBPAGE TO BE WITH DIFFERENT COLORS. THE CODE BELOW (FROM W3 SCHOOLS) HAS ONLY ONE WHITE SECTION AND I WANT TO ADD MORE SECTIONS IN DIFFERENT COLORS. DOES ANYONE COULD TRY IT? THANKS! <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <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; } </style> </head> <body> <video autoplay muted loop id="myVideo"> <source src="rain.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <div class="content"> <h1>Heading</h1> <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro.</p> <button id="myBtn" onclick="myFunction()">Pause</button> </div> <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> </body> </html> Edited January 31, 2018 by MARCELO Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now