I want to mimic Spotify's landing page here: https://www.spotify.com/uk/video-splash/?utm_source=spotify&utm_medium=web&utm_campaign=start
I'm fairly new to coding but have created some landing pages before but never one with HTML and video as a background.
I want the same layout as Spotify with NO scrolling capability OR sound. Then I want to be able to click on the button and have a form that someone can fill out and submit. Not quite sure how to go about this.
TLDR:
HTML 5 WITH CSS FIX | No Jquery Needed or java
I went ahead and designed some mark up for you so at-least you have something to start with. You can copy this code and play around with it. There are some key points in your CSS for this to work please keep this in mind and you will do just fine:
/* YOUR CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
border: 0;
z-index: 1; /* <-- this plays a key roll for it to work */
width: 100% !important /* <-- this plays a key roll for it to work */
height: 100%;
margin:0;
padding:0;
}
/* Your can customize any div how ever you want this is just an example */
#login {
position: absolute;
z-index:2; /* <-- this plays a key roll for it to work */
left:45%;
top:60%;
width:250px;
height:100px;
background-color: rgba(255,255,255,1.0);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* Standard syntax (must be last) */
border-radius:7px;
}
#login a{
color:#fff;
text-decoration:none;
font-size:30px;
}
#login p{
padding-top:35px;
padding-left:18px;
}
/* Your can customize any div how ever you want this is just an example */
#footer {
position:fixed;
bottom:0;
width:100%;
height:50px;
background-color: rgba(0,0,0,0.8);
z-index:3; /* <-- this plays a key roll for it to work */
}
#footer p{
text-align:center;
color:#fff;
padding-top:10px;
}<html>
<body>
<!--Place your video right after the body tag-->
<!--Notice the id="wrapper" is placed in the <video id="wrapper"></video>-->
<video id="wrapper" autoplay loop ?wmode=transparent>
<source src="http://sectorvi.com/yourmovie.mp4" type="video/mp4">
</video>
<div id="login"><p><a href="#">JOIN FOR FREE</a></p></div>
<div id="footer"><p>Remember this will only work if you have fixed or absolute postions with enables you to use z-index. ~ Jonathan Bellavaro</p></div>
</body>
</html>You can view in full here: http://sectorvi.com/stackoverflow-funitect.html
Hope this gives you a good start.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments