Skip to content

Instantly share code, notes, and snippets.

@shaina7837

shaina7837/gist:b30c28b1aad37db4598f

Created January 14, 2016 14:17
Show Gist options
  • Save shaina7837/b30c28b1aad37db4598f to your computer and use it in GitHub Desktop.
Save shaina7837/b30c28b1aad37db4598f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Replay </title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@font-face {
font-family: 'themify';
src:url('themify-icons/fonts/themify.eot?-fvbane');
src:url('themify-icons/fonts/themify.eot?#iefix-fvbane') format('embedded-opentype'),
url('themify-icons/fonts/themify.woff?-fvbane') format('woff'),
url('themify-icons/fonts/themify.ttf?-fvbane') format('truetype'),
url('themify-icons/fonts/themify.svg?-fvbane#themify') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="ti-"], [class*=" ti-"] {
font-family: 'themify';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ti-facebook:before {
content: "\e741";
}
.ti-twitter-alt:before {
content: "\e74b";
}
.ti-instagram:before {
content: "\e73d";
}
.ti-menu:before {
content: "\e68e";
}
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html,body, button {
text-align:center;
font-size:16px;
color:#fafafa;
font-family: "Lato", sans-serif;
padding:0;
margin:0;
}
h1 {
font-size: 7rem;
font-weight: 300;
}
.content-container {
max-width: 70rem;
margin: auto;
padding-top: 3rem;
padding-bottom: 10rem;
}
.special-text, button {
font-size: 1.25rem;
font-weight:400;
}
.large-text {
font-size: 1.5rem;
}
.dashed-text::before, .dashed-text::after {
content: "—";
}
#replay button {
background:transparent;
cursor:pointer;
color:#fafafa;
padding:0.6rem 2rem;
border:2px solid #fff;
margin-top:4rem;
line-height:1;
transition:all 1s ease;
}
#replay button:hover {
color:#17181c;
background:#fafafa;
}
.focal-text {
color: #e6cf5c;
}
.accent-text {
color: #b8e75c;
}
.inner-container {
max-width: 80%;
margin-left: auto;
margin-right: auto;
margin: auto;
padding-top: 7rem;
box-sizing: border-box;
}
.site-header {
width:80%;
margin:auto;
}
.replay-content {
position:relative;
z-index:10;
}
.replay-content .inner-container {padding-top:4rem; }
.zoom-txt {
animation: zoomtxt 1s ease;
}
@keyframes zoomtxt {
from { transform: scale(0.5);}
to { transform:scale(1); }
}
.site-nav {
display:inline-block;
float:left;
cursor:pointer;
}
.site-nav i {
border:1px solid transparent;
padding:0.5rem 0.5rem;
border-radius:50%;
transition:border 0.5s ease;
}
.site-nav:hover {
border:1px solid #fff;
}
.social-icons {
display:inline-block;
float:right;
cursor:pointer;
}
.social-icons i {
margin-right:1rem;
border:1px solid transparent;
padding:0.5rem;
border-radius:50%;
transition:border 0.5s ease;
}
.social-icons i:hover {
border:1px solid #fafafa;
}
.start-line {
margin:0 5rem;
}
.polythene {
position:relative;
z-index:50;
background: rgba(0, 0, 0, 0.7);
width: 100%;
min-height: 100%;
}
.menu, .top-cont,.preloader {display:none; }
@media screen and (max-width: 500px) {
.start-line {
margin: 0 -1rem;
}
.replay-content {
padding-top:0rem;
}
.replay-content .inner-container {
padding-top: 2rem;
}
#replay {font-size: 14px;}
#replay .special-text {font-size: 1rem;}
#replay .large-text { font-size: 1.25rem;}
#replay h1 { font-size: 4rem;}
}
</style>
</head>
<body>
<div class="preloader">
<ul class="bokeh">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="top-cont">
<a class="scroll-it" href="#replay"><button class="back-top"><i class="icon ti-arrow-up"></i></button>
<p>Back To Top</p></a>
</div>
<div class="site-container">
<nav class = "menu">
<div class="menu-cancel"><i class="icon ti-close "></i></div>
<ul>
<a class="scroll-it" href="#our-story"><li>OUR STORY</li></a>
<a class="scroll-it" href="#what-we-do"><li>WHAT WE DO</li></a>
<a class="scroll-it" href="#our-services"><li>OUR SERVICES</li></a>
<a class="scroll-it" href="#our-work"><li>OUR WORK</li></a>
<a class="scroll-it" href="#contact-us"><li>CONTACT US</li></a>
</ul>
</nav>
<section id="replay" class="full-container large-panel">
<video id="bdvid" poster="images/home-compressed.jpg" preload="metadata" autoplay="true" loop="loop" muted="muted" volume="0"> </video>
<div class="polythene">
<div class="content-container replay-content">
<header class="site-header">
<nav class="site-nav trigger"><i class="icon ti-menu"></i> </nav>
<div class="social-icons">
<i class="icon ti-facebook"></i>
<i class="icon ti-twitter-alt"></i>
<i class="icon ti-instagram"></i>
</div>
</header>
<div class="inner-container ">
<aside class="start-line special-text">Taking care of every detail we start by developing a vision for your event and then we stay with you every step of the way. Hello, we are ... </aside>
<h1 class="zoom-txt capital-text"><span class="focal-text ">RE</span><span class="accent-text">PLAY</span> </h1>
<div class="dashed-text large-text">More than just music</div>
<a class="scroll-it" href="#our-story"><button class="box">Our Story</button></a>
</div>
</div>
</div>
</section>
<div id="page2" class="empty">
<div class="preloader">
<ul class="bokeh">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="page2" class="empty"></div>
<div id="page3" class="empty"></div>
<div id="page4" class="empty"></div>
<div id="page5" class="empty"></div>
<div id="page6" class="empty"></div>
<div id="page7" class="empty"></div>
<div id="page8" class="empty"></div>
<footer class="full-container">
</footer>
<div id="overlay"></div>
</div><!--site-container-->
<script type="text/javascript">
function addCSS(addr) {
var head = document.head
, link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = addr;
head.appendChild(link)
}
function downloadStuffAtOnload(callback) {
/****** Add stylesheets *********/
addCSS("themify-icons/themify-icons.css");
addCSS("https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css");
addCSS("stylesheets/led-font/stylesheet.css");
addCSS("stylesheets/main.css")
var jquery = document.createElement("script");
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";
document.body.appendChild(jquery)
var replayJs = document.createElement("script");
replayJs.src = "js/replay.js";
document.body.appendChild(replayJs);
console.log("added");
var videosrc = document.createElement("source");
videosrc.src = "sunrise.mp4";
videosrc.type = "video/mp4";
document.getElementById('bdvid').appendChild(videosrc);
if(callback){ callback(replayJs);}
}
if (window.addEventListener)
window.addEventListener("load", downloadStuffAtOnload(function(replayJs){
}), false);
else if (window.attachEvent)
window.attachEvent("onload", downloadStuffAtOnload(function(replayJs){
document.body.appendChild(replayJs);
console.log(replayJs);
}));
else window.onload = function(){
downloadStuffAtOnload(function(replayJs){
document.body.appendChild(replayJs);
console.log(replayJs);
});
}
document.getElementByClassName('trigger').onclick = function()
</script>
<style>
#replay {
overflow: hidden;
}
video {
position:absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(images/home-compressed.jpg) no-repeat;
background-size: cover;
}
@media screen and (max-width: 768px)
{
video{ display:none; }
#replay { background:url("images/home-compressed.jpg");
background-size:cover;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment