[BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

Results 1 to 7 of 7
  1. #1
    Full-Stack Web Developer Emetophobic is offline
    MemberRank
    Jan 2012 Join Date
    Nice, FranceLocation
    238Posts

    [BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

    Once again,
    I'm here to release an old index I made for CokeDEV. We don't use it anymore and since my work have been released anywhere in the french community, I give it away to finally stop kiddies making fame with it.

    Screenshot (Sorry I pasted an image link that was only accessible to me):
    https://www.dropbox.com/s/6xdg9on1nu...2018.11.29.png

    I must admit that this design is very similar to my previously released one (Colorful 2) but since it was for an hotel and not to take care of my portfolio.
    Something particular with this index is that I used the video tag from HTML5 to actually make it a background. If you want to change the video file search for

    Code:
    <video id="media_landing_background" src="./web-gallery/v4/media/cokedev_media_landing.mp4" autoplay muted loop>
    and change the src path like you would do for any image tag. But be careful, there's no video buffering which means the client will have to buffer the entire file clientside in order to get the background. So please compress the most your video file.

    Sorry for the language btw (It's French)
    But the left part is depending on your hotel specific features so it doesn't need precise translation.

    Here's a quick translation for the login part:
    Code:
    <div class="col-md-6" style="padding: 80px;">
    					<div class="panel panel-default" style="margin-top: -45px;">
    						<div class="panel-heading">
    							<h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Sign in</h3>
    						</div>
    						<div class="panel-body">
    							Already registered on {hotel_name}? Sign in!
    							<form action="tologinscript.php" method="post">
    								<input id="username" type="text" placeholder="Username">
    								<input id="password" type="password" placeholder="Password">
    								<input type="submit" class="btn btn-primary" value="Sign in" style="width: 160px;">
    							</form><br>
    							<p style="color: #FFF; background-color: #ffbe00; padding: 7px; border-radius: 3px;"><i class="fa fa-exclamation-triangle"></i>&nbsp;&nbsp;&nbsp;Notice that you're not in an official hotel, please use different passwords from
    							your real Habbo account.</p>
    						</div>
    						<div class="panel-heading">
    							<h3 class="panel-title"><i class="fa fa-plus"></i> Register</h3>
    						</div>
    						<div class="panel-body">
    							If you don't have any account on {hotel_name}, join us! It takes 2 minutes.
    							<a href="#" class="btn btn-lg btn-success btn-register">Join the party!</a><a href="#" class="btn btn-lg btn-primary btn-register"><i class="fa fa-facebook"></i> Facebook login</a><a href="#" class="btn btn-lg btn-danger btn-register"><i class="fa fa-google-plus"></i>Sign in with Google+</a>
    						</div>
    					</div>
    				</div>
    Download (Lifetime link from Dropbox):
    https://www.dropbox.com/s/sttmpghx49...EV%20Index.rar

    Cheers,
    Jérémy 'Emetophobic' Castellano
    Last edited by Emetophobic; 02-03-14 at 01:26 PM.


  2. #2
    Typescript XOXO LeChris is offline
    MemberRank
    Sep 2011 Join Date
    749Posts

    Re: [BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

    Thanks. I will be using on CryRP

  3. #3
    Check http://arcturus.pw The General is offline
    DeveloperRank
    Aug 2011 Join Date
    7,608Posts

    Re: [BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

    Image is broken for me.

  4. #4
    Full-Stack Web Developer Emetophobic is offline
    MemberRank
    Jan 2012 Join Date
    Nice, FranceLocation
    238Posts

    Re: [BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

    Quote Originally Posted by nyae View Post
    Image is broken for me.
    What do you mean by that?

  5. #5
    ayyy lmao Lagan is offline
    MemberRank
    Jan 2011 Join Date
    294Posts

    Re: [BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

    Quote Originally Posted by Emetophobic View Post
    What do you mean by that?
    He means the image that you posted on the board is down.

  6. #6
    Full-Stack Web Developer Emetophobic is offline
    MemberRank
    Jan 2012 Join Date
    Nice, FranceLocation
    238Posts

    Re: [BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

    Quote Originally Posted by Lagan View Post
    He means the image that you posted on the board is down.
    Fixed

  7. #7
    Google my name... Komakech is offline
    MemberRank
    Nov 2011 Join Date
    EnglandLocation
    528Posts

    Re: [BOOTSTRAP 3/HTML5/VIDEO BACKGROUND] Project CokeDEV Index

    I guess it's a nice concept, just the fact that you have to compress the file so much to make it load quickly that your quality loss is almost too much.. I mean you can get ahi-res background image (not tiled) and compressed it to around 800kb which is still relatively large and on slow connections can take a while to load, unless your video is 5 seconds long you couldn't really match that file size. Considering it's covering the entire background means you'd need to have a video of 1920x1080 resolution for it to look nice...

    As a person who has to encode videos from raw footage into mp4 files and compress them, I don't think this concept is a good one, only because of the huge filesize you'd end up having. Perhaps consider having a content box on the index that has a static image on-top, when you put your cursor over it hides the image and starts the video, that way it'll be able to buffer before being used, it'd also mean you don't need it to be such a high resolution saving a lot of users their bandwidth.



Advertisement