BruxZir - Homepage - Video concept

Developer
Juan Gallardo
Size
3,039 Kb
Views
42,504
  1. BruxZir - Homepage - Video concept Previews
  2. BruxZir - Homepage - Video concept HTML Codes
  3. BruxZir - Homepage - Video concept CSS Codes
  4. BruxZir - Homepage - Video concept JS Codes

How do I make an bruxzir - homepage - video concept?

Expandable video concept. What is a bruxzir - homepage - video concept? How do you make a bruxzir - homepage - video concept? This script and codes were developed by Juan Gallardo on 18 August 2022, Thursday.

BruxZir - Homepage - Video concept Previews
IQ Test

BruxZir - Homepage - Video concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>BruxZir - Homepage - Video concept</title> <link rel='stylesheet prefetch' href='http://bones-bruxzir.jgallardo.me/assets/css/base.css'>
<link rel='stylesheet prefetch' href='http://bones-bruxzir.jgallardo.me/assets/css/layout.css'>
<link rel='stylesheet prefetch' href='http://bones-bruxzir.jgallardo.me/assets/css/skeleton.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='http://bones-bruxzir.jgallardo.me/assets/css/app.css'>
<link rel='stylesheet prefetch' href='http://bones-bruxzir.jgallardo.me/assets/css/test.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="homepage-video"> <div class="hv-container"> <div class="hv-player"> <h3>BruxZir Hammer Test</h3> <p>Watch how it holds up to a hammer</p> <a href='#' onclick='overlay()'> <span class="hv-play"> <i class="fa fa-play"></i> </span> </a> </div> </div>
</div>
<div id="overlay"> <div class="featured-video"> <a href='#' onclick='overlay()'> <i class="fa fa-times-circle-o"></i> </a> <iframe src="//player.vimeo.com/video/88944978" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div>
</div> <div class="container"><footer class="block"><div class="container"><div class="footer-link-section row"><div class="two columns row"><h6>Pages</h6><ul><li><a href="#">Home</a></li><li><a href="#">Features</a></li><li><a href="#">Science</a></li><li><a href="#">Cases</a></li><li><a href="#">Testimonials</a></li><li><a href="#">Videos</a></li></ul></div><div class="four columns row"><h6>Laboratories</h6><ul><li><a href="#">Become An Authorized Lab</a></li><li><a href="#">Find An Authorized Lab</a></li><li><a href="/lab/">Lab homepage</a></li><li><a href="#">Lab Resources</a></li></ul></div><div class="four columns row"><h6>Downloads</h6><ul><li><a href="#">Dental Advisor Clinical Study</a></li><li><a href="#">Clinicians Report Clinical Study</a></li><li><a href="#">Clinical &amp; Scientific Documentation</a></li></ul></div><div class="three columns row"><h6>Contact</h6><ul><li><a href="#">Contact Page</a></li><li><a href="#" >Blog</a></li><li><a href="#" >Twitter</a></li></ul></div><div class="three columns row"><h6>Languages</h6><ul><li><a href="/">English</a></li><li><a href="#">Deutsch</a></li><li><a href="#">Nederlands</a></li><li><a href="#">&#54620;&#44397;&#50612;</a></li></ul></div></div></div><div class="container footer-copyright"><div class="thirteen columns"><p>BruxZir is made from translucent Prismatik Clinical Zirconia<sup>&trade;</sup><br />Prismatik Clinical Zirconia is a trademark of Glidewell Laboratories.<br />BruxZir is a registered trademark of <a href="#">Glidewell Laboratories</a> Copyright <sup>&copy;</sup> 2013</p></div><div class="three columns sitemap-link"><a href="#"><i class="fa fa-sitemap mr6"></i>sitemap</a></div></div></footer> <script src="js/index.js"></script>
</body>
</html>

BruxZir - Homepage - Video concept - Script Codes CSS Codes

.homepage-video { background-color: black; background-size: cover; background-repeat: no-repeat;
}
.homepage-video { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/lab-interior.jpg'); background-position: center -60px;
}
.hv-container { background-color: rgba(30,30,4, 0.6); min-height: 240px; position: relative;
}
.hv-player { width: 320px; max-width: 100%; margin: 0 auto; position: absolute; top: 30px; left:0; right: 0; padding-top: 20px; text-align:center;
}
.hv-player, .hv-player h3, .hv-play { color: #f4f3f3;
}
.hv-play { border: 3px solid #fff; cursor:pointer; padding: 4px 18px; border-radius: 13px; font-size: 30px
}
/* reset for IE*/
body { height:100%; margin:0; padding:0; }
/* code */
#overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; z-index: 1000;
}
#overlay { background-color: #222;}
/* must have these resets */
html, body{ height: 100%; padding: 0; margin: 0;}
/* code begins*/
.featured-video { height: 100%; width: 100%; }
.featured-video iframe { height: 100%; width: 100%; margin-right: auto; margin-left: auto; vertical-align: middle;
}
#overlay i { color: #999; font-size: 48px; margin: 10px;
}
html, body{ height: 100%; padding: 0; margin: 0;}

BruxZir - Homepage - Video concept - Script Codes JS Codes

function overlay() {	el = document.getElementById("overlay");	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
BruxZir - Homepage - Video concept - Script Codes
BruxZir - Homepage - Video concept - Script Codes
Home Page Home
Developer Juan Gallardo
Username JGallardo
Uploaded August 18, 2022
Rating 3
Size 3,039 Kb
Views 42,504
Do you need developer help for BruxZir - Homepage - Video concept?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Juan Gallardo (JGallardo) Script Codes
Name
Blog Concept 3
Travel Location Select
Bruxzir - Sprite Practice
Saturn Grid System - Prototype1
Simple Modal
Plane Blog - Masonry Demo
Blog Concept 4
Template - iPad Air - Horizontal
Fixed Header when scrolling
Foundation - Sample Header
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!