Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 11, 2015 00:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/878f0b35c5af744379cb to your computer and use it in GitHub Desktop.
Save anonymous/878f0b35c5af744379cb to your computer and use it in GitHub Desktop.
Download ZIP
rOQpxY
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>WeedMediaDesign - WELCOME</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta description="director, henry bjoin, food director, beverage director, beer director, food and beverage, commercial director, Libby's, Nestles, El Polo Loco, panda express, sizzler, village inn, shakey's pizza, Little Caesers pizza, quiznos, coco's, round table pizza, bombay saphire, taco bell, dole, bakers square, hillshire brand, grey goose vodka, del monte foods, labatts, pizza hut" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="stylesheet" href="css/main.css">
<!--<script>document.cookie='resolution='+Math.max(screen.width, screen.height)+'; path=/';</script> LOW RESOLUTION INSTEAD USE THE HIGHER RESOLUTION BELOW-->
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!-- The header -->
<input type="checkbox" id="menu" class="mobileMenuButton"><label for="menu" class="mobileMenuButton"></label><label for="menu" class="mobileMenuCloseButton"></label>
<header>
<h1 class="ir"></h1>
<nav>
<ul>
<li class="active"> <a href="#">welcome</a></li>
<!-- <li><a href="about.html">about</a></li>-->
<li><a href="about.html">about us</a></li>
<li><a href="what.html">what can we do for you</a></li>
<li><a href="contact.html">contact</a></li>
<li class="callD"><a href="tel://+18188461650">call bjoin films</a></li><br> <li class="skypeD"><a href="skype:bjoin.films?call">skype bjoin films</a></li><br>
<li class="emailD"><a href="mailto:info@bjoinfilms.com?subject=Sending from a mobile device">email bjoin films</a></li><br>
</ul>
</nav>
</header>
<div class="Left">
<object id="bjoinFilms" type="text/html" data-dw-widget="Edge" data="animations/bjoinfilms/bjoin.html"></object> </div>
<div class="Right">
<object id="bjoinList" type="text/html" data-dw-widget="Edge" data="animations/bjoinList/bjoinList2.html">
</object> </div>
<div class="indexPageContent">
<div class="indexPageLeft"> </div>
<div class="indexPageCenter"> </div> <!--END DIV PAGE1VIDEOCENTER -->
<div class="indexPageRight"> </div>
</div> <!--END INDEX PAGE CONTENT-->
<div class="indexPageContent two">
<div class="indexPage2Left"></div>
<div class="indexPage2Center">
<h2 class="h2BF">bjoin films</h2>
<p class="pBF">is a Los Angeles-based tabletop production company that has been servicing advertising agencies and brands for over 25 years.
For all the depth and complexity of what we do, our focus is remarkably simple: uncovering beauty in the products we work with, and making it clear to those who see our work. </p>
</div>
<div class="indexPage2Right"></div>
</div> <!--END PAGE CONTENT TWO-->
<div class="pageContent three">
<div class="indexPage3Left"></div>
<div class="indexPage3Center">
<div class="parrallax">
<!--<h2 class="title">parrallax scrolling goes here</h2>-->
<img src="img/parrallex.jpg" class="parrallax" alt="photo"/>
</div> <!--END PARRALLEX DIV-->
</div> <!--END INDEXPAGE3Center DIV-->
<div class="indexPage3Right"></div>
</div><!--END PAGE CONTENT SECONDARY-->
<div class="pageContent four">
<div class="indexPage4Left"></div>
<div class="indexPage4Center">
<h2 class="h2BF">about</h2>
<p class="pBF">
Bjoin Films is a team of versatile, highly trained and appropriately playful scientists and artists. Henry Bjoin can play all the different positions, but he’s acquired such good teammates that he doesn’t have to. Besides, he’s usually busy. Right behind the stage and the prep kitchen you may find him in his machine shop, where he’s developing new camera rigs or hand fabricating props to his liking. Or perhaps he’s in the edit suite, tweaking the secondary color on tomato stems. Whatever he’s doing, one thing is for sure: if there is something that we don’t know how to do, he’s pushing our capabilities rather than calling for help. It’s this attitude that’s put us in the position of efficiency and control that keeps our clients coming back year after year and decade after decade.
Because as we work on quietly to get better and better, our clients know that we are already the best-kept secret in the industry.</p>
</div>
<div class="indexPage4Right"></div>
</div> <!--END PAGE CONTENT THIRD-->
<div class="pageContent five">
<div class="indexPage5Left"></div>
<div class="indexPage5Center">
<object id="indexAnimation" type="text/html" data-dw-widget="Edge" data="animations/bjoinIndex/indexAnimation.html">
</object>
</div> <!--END INDEXPAGE2 DIV-->
<div class="indexPage5Right"></div>
</div><!--END PAGE CONTENT SECONDARY-->
<!-- Page Footer -->
<footer>
<div class="footerL">
<p class="footerP">bjoin films</p></div>
<div class="footerC"> </div>
<div class="footerR">
<p class="footerPr"><span class="appleLinks">818.846.1650</span>
</div>
</footer>
<!-- Downloads the jquery source online -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- If it could not download the source, it takes a local version -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<!-- This contains the diverse Plugins -->
<!-- Here you can add your own javascript -->
<!--<script src="js/main.js"></script>-->
<!--<script type="text/javascript" src="//cdn.sublimevideo.net/js/yfkr63jt.js"></script>-->
<!-- Here you can add your own javascript -->
<script src='js/jquery.backstretch.fixed.min.js'></script>
<script src="js/index.js"></script>
<script src="js/parallax.js"></script>
</body>
</html>
Raw
style.css
/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
/* This is the minified normalize.css so we can save a request. There is no need to change anything here.
It simply sets some default options.
*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}button,html,input,select,textarea{font-family:sans-serif}body{margin:0}a:active,a:focus,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ol,nav ul{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure,form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
/* ==========================================================================
* Add Fonts here. These are just opensource sample fonts.
* ========================================================================== */
@font-face {
font-family: 'NeuzeitSLTStdBook';
src: url('../fonts/nuezeit/neuzeitsltstd-book-webfont.eot');
src: url('../fonts/nuezeit/neuzeitsltstd-book-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/nuezeit/neuzeitsltstd-book-webfont.woff') format('woff'),
url('../fonts/nuezeit/neuzeitsltstd-book-webfont.ttf') format('truetype'),
url('../fonts/nuezeit/neuzeitsltstd-book-webfont.svg#NeuzeitSLTStdBook') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'NeuzeitSLTStdBookHeavy';
src: url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.eot');
src: url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.woff') format('woff'),
url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.ttf') format('truetype'),
url('../fonts/nuezeitH/neuzeitsltstd-bookheavy-webfont.svg#NeuzeitSLTStdBookHeavy') format('svg');
font-weight: normal;
font-style: normal;
}
/*CONTROLS THE COLOR OF THE FONTS ON MOBILE DEVICES - MAKE SURE TO GIVE THEM SPAN TAGS FIRST*/
.appleLinks a {color:#000;
text-decoration: none;
font-family: 'NeuzeitSLTStdBookHeavy';
}
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*********THIS IS VERY IMPORTANT --- CORRECTS PADDING ON ALL DIVISIONS- drotar css3 page 447**/
*{
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
START - THOMAS DROTAR - ANY SCREEN LAYOUT
These rules here apply to ANY screen!
========================================================================== */
body {
background-color: #111;
overflow-x: hidden;
padding-top: 1px;
margin-top: -1px;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
font-family: 'NeuzeitSLTStdBook', sans-serif;
}
h1, h2, h3, h4, h5, h6, * {
font-weight: normal;
}
/*CONTROLS H2 SUBJECT TITLES*/
.title {
font-size: 1.5em;
font-weight: 100;
text-transform: uppercase;
font-family: 'NeuzeitSLTStdBook', sans-serif;
letter-spacing: .05em;
text-shadow: 1px 1px 1px rgba(0,0,0,1.00);
color: #000;
text-align: center;
letter-spacing: 1px;
margin-top: -0px; /*CONTROLS THE DISTANCE BETWEEN THE H2 & BACKGROUND PLATE*/
border-bottom: 1px solid white;
}
p {
font-size: 1em;
color: #000;
font-weight: 300;
/*text-transform: uppercase;*/
/*font-family: 'NeuzeitSLTStdBookHeavy', sans-serif;*/
font-family: 'NeuzeitSLTStdBook', sans-serif;
letter-spacing: .05em;
text-shadow: 1px 1px 1px #666;
}
.list {
font-size: 1.1em;
color: #000;
font-weight: 300;
/*text-transform: uppercase;*/
/*font-family: 'NeuzeitSLTStdBookHeavy', sans-serif;*/
font-family: 'NeuzeitSLTStdBook', sans-serif;
letter-spacing: 0em;
text-shadow: 1px 1px 1px #666;
padding-top: 0px;
list-style-position: outside;
list-style-type: square;
}
/*++++++++++++++++++Carl Native Player Override HERE*/
.jw-title {
display: none !important;
}
/****************/
/*input.mobileMenuButton ~ * {
-webkit-transition: margin-left 300ms;
transition: margin-left 300ms;
transition: left 300ms;
}*/
/*input.mobileMenuButton ~ * h1,
input.mobileMenuButton ~ * p {
-webkit-transition: left 300ms;
transition: left 300ms;
}*/
/*input.mobileMenuButton:checked ~ * {
margin-left: 200px;
}*/
/*input.mobileMenuButton:checked ~ header h1,
input.mobileMenuButton:checked ~ footer p {
left: 200px !important;
}
*/
/*******************/
input[type=checkbox].mobileMenuButton {
position: absolute;
top: -9999px;
left: -9999px;
}
input.mobileMenuButton ~ *,
input.mobileMenuButton ~ header h1,
input.mobileMenuButton ~ footer p {
-webkit-transition: left 300ms;
transition: left 300ms;
left: 0;
}
input.mobileMenuButton:checked ~ *,
input.mobileMenuButton:checked ~ header h1,
input.mobileMenuButton:checked ~ footer p {
left: 200px !important;
}
input.mobileMenuButton ~ .pageContent {
position: relative;
}
input.mobileMenuButton:checked ~ label.mobileMenuCloseButton {
left: 0 !important;
}
label.mobileMenuButton {
display: block;
position: fixed;
color: white;
font-size: 50px;
line-height: 0;
background: #000;
height: 60px;
width: 60px;
cursor: pointer;
z-index: 10000;
}
label.mobileMenuButton:after {
position: absolute;
top: 25px;
left: 16px;
content: "\2261";
}
label.mobileMenuCloseButton {
display: block;
position: fixed;
color: white;
font-size: 20px;
line-height: 0;
background: #000;
height: 58px;
width: 60px;
cursor: pointer;
z-index: 10000;
left: -200px;
}
label.mobileMenuCloseButton:after {
position: absolute;
top: 33px;
left: 23px;
content: "X";
}
/*header {
position: absolute;
top: 0;
height: 60px;
width: 100%;
z-index: 9999;
}*/
header {
position: fixed;
top: 0;
height: 60px;
width: 100%;
z-index: 9999;
font-family: "NeuzeitSLTStdBookHeavy", sans-serif;
}
/* the background of the header */
header:after {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255,255,255,.7); /*CONTROLS COLOR OF MOBILE HEADER*/
opacity: 0.5;
content: "";
z-index: -1;
}
header nav {
position: absolute;
width: 200px;
left: -200px;
}
header nav ul {
margin: 0;
width: 200px;
padding: 0
}
/*LINE SEPARATING MOBILE MENUS*/
header nav li {
display: inline-block;
width: 100%;
border-bottom: solid 1px #ccc;
}
header nav a {
display: block;
padding: 8px 30px;
text-decoration: none;
color: white;
background-color: #000;
}
header nav a:hover,
header nav .active a {
background: #333;
}
header h1 {
margin: 15px auto;
width: 144px;
height: 29px;
/*background: url( '../img/logo.png') no-repeat 0 0;*/
}
footer {
position: relative;
clear: both; /*SENDS FOOTER DOWN TO BOTTOM OF PAGE*/
padding: 1em 0;
z-index: 9998;
bottom: 0;
width: 100%;
height: 30px;
text-align: center;
background-color: rgba(255,255,255,.40)
}
/*BJOIN FILMS LEFT SIDE OF FOOTER*/
.footerL {
width: 40%;
/*border: solid green 1px;*/
float: left;
}
.footerP {
margin: 0;
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
color: black;
float: left;
font-size: 1em;
margin-left: 15px;
margin-top: -8px;
text-align: left;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(255,255,255,1);
}
.footerC {
display:none;
}
.footerR {
width: 35%;
/*border: solid yellow 1px;*/
float: right;
text-align: right;
}
/*PHONE NUMBER RIGHT SIDE OF FOOTER*/
.footerPr {
margin: 0;
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
font-size: 1.2em;
color: black;
font-size: 1em;
/*margin-left: 15px;*/
margin-top: -8px;
margin-right: 25px;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(255,255,255,1);
float: right; /*JUSTIFIES PHOTO TO RIGHT SIDE*/
}
/*END OF FOOTER**********************/
.indexPageContent {
margin: 80px 10px 20px 10px;
}
.indexPageLeft {
display: none;
}
#bjoinFilms{
display:none;
}
#bjoinList{
display:none;
}
.indexPageCenter {
float: left;
width: 100%;
background-color: blue;
height: 200px;
text-align: center;
padding-bottom: 0px;
}
.indexPageRight {
float: left;
width: 100%;
/*background-color: blue;*/
/*height: 200px;*/
text-align: center;
padding-bottom: 0px;
}
/*WELCOME TEXT IS CENTER*/
.indexPageContent.two {
margin: 0px 10px 100px 10px;
clear: both;
/*border: red solid 1px;*/
}
.indexPage2Left {
display: block;
float: left;
width: 1%;
/*background-color: red;*/
background-color: rgba(255,0,4, 0);
height: 20px; /*CONTROLS DISTANCE BETWEEN VIDEO AND WELCOME*/
}
.pBF {
font-size: 1em;
font-weight: 100;
font-family: 'NeuzeitSLTStdBook', sans-serif;
letter-spacing: .05em;
background-color: rgba(255,253,253, 0);
color: #000;
/*background-color: red;*/
padding: 15px;
padding-top: 0;
}
/*WELCOME CENTER*/
.indexPage2Center { /*BJOIN FILMS IS A FILM PRODUCTIONS COMPANY...*/
display: block;
float: left;
width: 93%;
background-color: rgba(255,253,253, .2);
padding: 10px;
margin-bottom: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.indexPage2Right {
display: block;
float: left;
width: 1%;
background-color: rgba(255,191,0,0);
/*background-color: orange;*/
height: 2px;
}
.h2BFReel {
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
font-size: 1.6em;
background-color: rgba(0,0,0,.4);
color: white;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
text-align: center;
padding-top: 7px;
padding-bottom: 7px;
letter-spacing:.2em;
margin-bottom: 40px;
/*border-radius: 30px; */
}
/*RECENT REEL*/
/*.reelPage7Center {
display: block;
float: left;
width: 100%;
background-color: rgba(0,0,0, .0);
padding: 0px;
margin-bottom: 20px;
margin-top: -25px;
height:50px;
}*/
/*PARRALLAX IS CENTER*/
.pageContent.three {
margin: 50px 10px 20px 10px;
clear: both;
}
.indexPage3Left {
display: block;
float: left;
width: 1%;
/*background-color: red;*/
background-color: rgba(255,0,4, 0);
height: 20px;
}
.indexPage3Center {
display: block;
float: left;
width: 97%;
background-color: blue;
background-color: rgba(0,206,255, 0);
/*height: 400px; */
}
.indexPage3Right {
display: block;
float: left;
width: 1%;
background-color: rgba(255,191,0, 0);
/*background-color: orange;*/
height: 20px;
}
/*PAGE CONTENT 3RD TEXT IS CENTER*/
.pageContent.four {
margin: 10px 10px 100px 10px;
clear: both;
}
.indexPage4Left {
display: block;
float: left;
width: 1%;
/*background-color: blue;*/
background-color: rgba(0,211,254,0.0);
height: 20px;
}
.indexPage4Center {
display: block;
float: left;
width: 93%;
background-color: rgba(255,253,253, .2);
padding: 10px;
margin-bottom: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.indexPage4Right {
display: block;
float: left;
width: 1%;
/*background-color: red;*/
background-color: rgba(255,0,4, 0);
height: 20px;
}
/*ANIMATION BJOIN FILMS IS CENTER*/
.pageContent.five {
margin: 0px 10px 20px 10px;
clear: both;
}
.indexPage5Left {
display: block;
float: left;
width: 1%;
/*background-color: red;*/
background-color: rgba(255,0,4, 0);
height: 100px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION & FOOTER*/
}
.indexPage5Center {
display: block;
float: left;
width: 97%;
/*background-color: blue;*/
background-color: rgba(0,211,254, 0);
height: 200px;
}
#indexAnimation{
display: block;
width: 100%;
height: 100%;
}
.indexPage5Right {
display: block;
float: left;
width: 1%;
background-color: rgba(255,191,0, 0);
/*background-color: orange;*/
height: 100px;
}
.h2BFS {
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
font-size: 1.75em;
background-color: rgba(255,255,255,0.23);
color: black;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(255,255,255,1);
text-align: center;
line-height: 110%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
padding-top:7px;
padding-bottom:7px;
}
/*FOTORAMA PLAYER {*/
.fotorama{
width: 99%;
float: left;
background-color: rgba(255,255,255,.0);
padding: 0;
padding-right: 1%;
margin-bottom: 20px;
}
.fotoHeader {
margin: 8px 0 4px 0;
padding-right: 30px;
font-size: 1.25em;
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
text-align:right;
color: rgba(255,255,255,1);
text-transform: uppercase;
line-height: 1;
text-shadow: 1px 1px 2px #000;
}
.fotoInfo {
margin: 10px 30px 4px 0;
font-size: .9em;
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
text-align:right;
color: rgba(255,255,255,1);
text-transform: uppercase;
line-height: 1;
text-shadow: 1px 1px 2px #000;
margin-top: -20px;
}
p.fotoDescription {
color: white;
margin: 0px 0px 0px 5px;
font-size: .75em;
text-transform: uppercase;
}
/******************STUDIO PAGE INFO END*****************/
/* ==========================================================================
END - THOMAS DROTAR - ANY SCREEN LAYOUT
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
START - THOMAS DROTAR - LARGE MOBILE AND TABLET SCREEN LAYOUT
This ONLY applies to screens that have a width of 450 pixels or more.
If you want to invalidate rules from the any screen layout, you HAVE
to overwrite them here.
========================================================================== */
/* Screens bigger than 768px will switch to desktop layout */
@media only screen and (min-width: 450px) {
.leftLeft {
float: left;
height: 50px;
width: 10%;
display: inline-block;
float: left;
/*background-color: black;*/
background-color: rgba(255,0,0,0);
}
.rightRight {
float: left;
height: 50px;
width: 10%;
display: inline-block;
float: left;
/*background-color: black;*/
background-color: rgba(255,0,255,0.0);
}
.indexPageCenter {
float: left;
width: 79%;
/*background-color: yellow;
background-color: rgba(255,241,0,0.00);*/
padding-bottom: 30px;
}
/*WELCOME CENTER*/
.indexPage9Center { /*PUSHES PARALLAX DOWN BELOW WELCOME*/
margin-bottom: 50px;
}
.indexPage2Center {/*PUSHES BJOIN FILMS DOWN BELOW PARALLAX*/
margin-bottom: 50px;
}
.indexPage3Center {/*PUSHES ANIMATION DOWN BELOW BJOIN FILMS*/
margin-bottom: 50px;
}
/*ANIMATION BJOIN FILMS IS CENTER*/
.indexPage4Center {
/*height: 350px;*/
}
.footerL {
width: 40%;
}
.footerP {
font-size: 1.5em;
}
.footerC {
display:none;
}
.footerR {
/*border: solid yellow 1px;*/
}
/*PHONE NUMBER RIGHT SIDE OF FOOTER*/
.footerPr {
font-size: 1.5em;
}
}
/* ==========================================================================
START - THOMAS DROTAR - LARGE SCREEN LAYOUT
This ONLY applies to screens that have a width of 769 pixels or more.
If you want to invalidate rules from the any screen layout, you HAVE
to overwrite them here.
========================================================================== */
/* Screens bigger than 768px will switch to desktop layout */
@media only screen and (min-width: 769px) {
input.mobileMenuButton ~ * {
-webkit-transition: none;
transition: none;
}
input.mobileMenuButton ~ * h1,
input.mobileMenuButton ~ * p {
-webkit-transition: none;
transition: none;
}
input.mobileMenuButton,
label.mobileMenuButton {
display: none;
}
/*MOBILE PHONE BUTTON FOR CALLING*/
.callD {
display:none;
}
.skypeD {
display:none;
}
.emailD {
display:none;
}
body{
border: 21px solid rgba(255,0,215,1.00);
}
header {
position: fixed;
height: 50px;
background-color: rgba(255,255,255,.70);
}
header nav {
position: static;
width: auto;
left: auto;
}
header nav ul {
text-align: center;
width: auto;
}
header nav li {
margin-left: 16px;
width: auto;
}
header nav li:first-child {
margin: 0;
}
header nav a {
border-radius: 6px;
}
/*THIS CONTROLS DROTAR NAVIGATION BUTTONS TOP*/
header nav {
position: absolute;
margin-top: -55px;
margin-left: 0px;
width: auto;
left: auto;
}
header nav ul {
text-align: center;
width: auto;
left: -120px; /*CONTROLS BUTTONS FROM THE LEFT SIDE*/
}
header nav li {
margin-left: 0;
width: auto;
border-bottom: 0;
}
header nav li:first-child {
margin: 0;
}
header nav a {
text-transform: uppercase;
letter-spacing: 0.1em;
/*text-shadow: 1px 1px 2px #ccc;*/
background: none;
font-size: 1.2em;
font-family: 'NeuzeitSLTStdBook';
color: black;
}
header nav a:hover {
color: white;
background-color: rgba(57,255,0,.00);
}
/*ACTIVE LINK*/
header nav .active a {
display: inline-block;
font-size: 1.2em;
outline: none;
text-transform: uppercase;
font-family: 'NeuzeitSLTStdBook';
letter-spacing: 0.25em;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,1);
background-color: rgba(255,0,4, .0);
}
header nav .active a:hover {
font-size: 1.2em;
}
/*FIRST PAGE INDEX bjoin films animation left*/
.Left {
height: 568px;
display: block;
/*background-color: black;*/
background-color: rgba(0,255,0,0.0);
position: fixed;
left: 0px;
top: 70px;
}
#bjoinFilms{
display: block;
width: 100%;
height: 100%;
}
.Right {
height: 768px;
background-color: rgba(0,0,255,.40);
display: block;
position: fixed;
right: 0;
margin-top: 70px;
width: 200px;
}
#bjoinList{
display: block;
width: 100%;
height: 100%;
}
.indexPageContent {
margin: 80px 200px 20px 200px;
}
.indexPageLeft {/*ANIMATION LEFT */
height: 100px;
width: 15%;
/*background-color: black;*/
background-color: rgba(0,0,0,0.5);
}
#bjoinFilms{
display: block;
width: 100%;
height: 100%;
}
/*SQUISHES IN VIDEO ON EITHER SIDE*/
/*.leftLeft {
width: 1%;
background-color: rgba(50,176,212,1.00);
}*/
.indexPageCenter {
float: left;
width: 100%;
background-color: yellow;
/*background-color: rgba(255,241,0,0.00);*/
margin-bottom: 100px;
/*margin-left: 200px;*/
}
.indexPageRight { /*ANIMATION RIGHT*/
width: 5%;
background-color: blue;
height: 100px;
}
#bjoinList{
display: block;
width: 100%;
height: 100%;
}
/* .rightRight {
width: 1%;
background-color: rgba(255,235,4,1.00);
}*/
/*****TURN THIS OFF TO PLACE THE FOOTER AT THE BOTTOM OF THE IPAD AFTER ALL INFO ********/
/*footer {
position: fixed;
bottom: 0;
}*/
/*WELCOME IS CENTER */
.indexPageContent.two {
margin: 150px 200px 0px 200px;
clear: none;
}
.indexPage2Left {
width: 13%;
width: 1%;
/*background-color: red;*/
height: 200px;
clear: left;
}
.h2BF {
font-size: 2.5em;
letter-spacing:.2em;
}
.pBF {
font-size: 1.2em;
margin: 10px;
}
.indexPage2Center { /*BJOIN FILMS IS A FILM PRODUCTIONS COMPANY...*/
width: 98%;
padding: 2%;
margin-bottom: 100px;
}
.indexPage2Right {
width: 1%;
/*background-color: orange;*/
height: 200px;
}
/*PARALLAX IS CENTER */
.indexPageContent.three {
margin: 180px 100px 0px 200px;
}
.indexPage3Left {
display: inline-block;
float: left;
width: 18%;
/*background-color: red;*/
background-color: rgba(0,0,0,.00);
height: 200px;
}
.indexPage3Center {
width: 64%;
height: 500px; /*CONTROLS DISTANCE TO PAGE CONTENT.THIRD*/
text-align: center;
}
.indexPage3Right {
display: block;
float: left;
width: 1%;
/*background-color: orange;*/
background-color: rgba(255,143,0,.0);
height: 200px;
}
/*ABOUT TEXT*********************/
.pageContent.four {
/*margin: 0px 10px 620px 10px;*/
margin: 100px 80px 0px 200px;
margin: 80px 200px 20px 200px;
padding-bottom:150px;
}
.indexPage4Left {
width: 1%;
background-color: orange;
height: 200px;
}
.indexPage4Center { /*ABOUT BJOIN FILMS COPY*/
display: inline-block;
float: left;
width: 98%;
padding: 2%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.indexPage4Right {
width: 1%;
/*background-color: pink;*/
background-color: rgba(254,156,250,.00);
height: 200px;
}
/*ANIMATION IS CENTER*/
.pageContent.five {
margin: 100px 10px 0px 10px;
}
.indexPage5Left {
display: inline-block;
float: left;
width: 18%;
/*background-color: red;*/
/*background-color: rgba(255,0,4,0.5);*/
height: 300px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION AND FOOTER*/
}
.indexPage5Center {
display: inline-block;
float: left;
width: 61%;
/*background-color: blue;
background-color: rgba(0,0,0,0.00);*/
height: 350px;
text-align:center;
}
.indexPage5Right {
display: inline-block;
float: left;
width: 20%;
/*background-color: orange;*/
/*background-color: rgba(255,178,0,0.50);*/
height: 200px;
}
/*FOOTER STARTS HERE*/
footer {
padding: 1em 0;
height: 40px;
/*position: fixed;
bottom: 0;
left: 0;
right: 0px;*/
}
.footerL {
/*margin-top: -20px;*/
margin-left: 25px;
}
.footerP {
margin: 10px;
margin-top: 0px;
font-size: 2em;
}
/*.footerC {
display: block;
width: 25%;
float:left;
border: 1px solid rgba(255,0,219,0.00);
height: 1em;
}*/
.footerR {
margin-right: 25px;
}
.footerPr {
margin: 10px;
margin-top: 0px;
font-size: 2em;
float: right; /*JUSTIFIES PHOTO TO RIGHT SIDE*/
}
}
@media only screen and (min-width: 1024px) {
}
/* ==========================================================================
START - THOMAS DROTAR - LARGEST SCREEN LAYOUT
This ONLY applies to screens that have a width of 769 pixels or more.
If you want to invalidate rules from the any screen layout, you HAVE
to overwrite them here.
========================================================================== */
/* Screens bigger than 1280px will switch to largest desktop layout */
@media only screen and (min-width: 1280px) {
/*WELCOME TEXT IS CENTER*/
.Left{
background-color: rgba(209,209,209,.60);
}
.Right{
/*background-color: green;*/
background-color: rgba(20,238,48,.50);
}
.indexPageContent {
margin: 180px 165px 0px 300px;
}
.indexPageLeft {/*ANIMATION LEFT */
/*background-color: black;*/
background-color: rgba(0,0,0,0.5);
width: 10%;
}
#bjoinFilms{
display: block;
width: 100%;
height: 100%;
}
/*SQUISHES IN VIDEO ON EITHER SIDE*/
/*.leftLeft {
width: 1%;
background-color: rgba(50,176,212,1.00);
}*/
.indexPageCenter {
float: left;
width: 90%;
background-color: yellow;
/*background-color: rgba(255,241,0,0.00);*/
margin-bottom: 100px;
/*margin-left: 200px;*/
}
.indexPageRight { /*ANIMATION RIGHT*/
height: 100px;
background-color: rgba(255,0,0,.50);
width: 10%;
}
#bjoinList{
display: block;
width: 100%;
height: 100%;
}
.indexPageContent.two {
margin: 180px 265px 0px 300px;
}
.h2BF {
font-size: 2.2em;
}
.sv_playlist ul.thumbs {
width:95.5%; /*CONTROLS WIDTH OF BUTTON HOLDER*/
}
/*WELCOME CENTER*/
.indexPage2Center {
width: 90%;
padding: 10px;
margin-bottom: 50px;
}
.indexPage2Right {
display: none;
}
/*ABOUT BJOIN FILMS TEXT*********************/
.pageContent.four {
/*margin: 0px 10px 620px 10px;*/
margin: 180px 180px 0px 300px;
padding-bottom:150px;
}
.indexPage4Left {
display: inline-block;
float: left;
width: 1%;
/*background-color: red;*/
background-color: rgba(255,0,4,0.6);
height: 450px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION AND FOOTER*/
}
.indexPage4Center {
display: inline-block;
float: left;
width: 87%;
padding: 10px;
/*background-color: blue;
background-color: rgba(0,0,0,0.00);*/
text-align:center;
}
.indexPage4Right {
display: inline-block;
float: left;
width: 1%;
/*background-color: orange;*/
background-color: rgba(255,178,0,0.50);
height: 200px;
}
/*ANIMATION IS CENTER*/
.pageContent.five {
margin: 100px 10px 0px 10px;
}
.indexPage5Left {
display: inline-block;
float: left;
width: 18%;
/*background-color: red;*/
background-color: rgba(255,0,4,0.5);
height: 300px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION AND FOOTER*/
}
.indexPage5Center {
display: inline-block;
float: left;
width: 71%;
/*background-color: blue;
background-color: rgba(0,0,0,0.00);*/
height: 350px;
text-align:center;
}
.indexPage5Right {
display: inline-block;
float: left;
width: 10%;
/*background-color: orange;*/
background-color: rgba(255,178,0,0.50);
height: 200px;
}
}
/* ==========================================================================
END - THOMAS DROTAR - LARGE SCREEN
========================================================================== */
/* ==========================================================================
START - RETINA IMAGE REPLACE
========================================================================== */
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
header h1 {
background: url( '../img/logo@2x.png') no-repeat 0 0;
background-size: 144px 29px;
}
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/** PARALLAX **/
img.parrallax {
min-height: 120%;
min-width: 100%;
max-width: none;
height: 160%;
display: block;
position: relative;
}
.parrallax {
position: relative;
height: 477px;
overflow: hidden;
}
@media only screen and (max-width: 769px) {
.parrallax {
height: 377px;
/*height: 200px;*/
}
}
@media only screen and (max-width: 450px) {
.parrallax {
height: 277px;
}
}
.ie-redirect {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: #000;
border-bottom: 1px solid #eee;
z-index: 999999;
}
.ie-redirect a {
display: block;
height: 100%;
width: 100%;
line-height: 40px;
color: #fff;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment