Skip to content

Instantly share code, notes, and snippets.

/PPXyGG.markdown

Created November 13, 2015 20:26
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/b72e528499e4db6a3d02 to your computer and use it in GitHub Desktop.
Save anonymous/b72e528499e4db6a3d02 to your computer and use it in GitHub Desktop.
Download ZIP
PPXyGG
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="marijuana, dispenary, dispensaries, shopping carts, ganja, secure, responsive, websites, dispensary websites, marijuana websites, woocommerce, indica, affordable, data bases, chat room, secure log in, uploadable, search button, account linking, paypal, automatic security upgrades, affordable, effective, secure, weedmediadesign, pot, grass" />
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon"> -->
<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>
<p class="wmd"> weed media design </p>
<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>
<div class="phoneHeader"> <p class="headerPhone"><span class="appleLinks">310.399.5700</span> </p> </div><!--<p class="wmd"> weed media design </p></div>-->
</header>
<div class="indexPageContent">
<div class="indexPageLeft">
<object id="indexLeft" type="text/html" data-dw-widget="Edge" data="animations/indexLeft/left.html"></object>
</div>
<!-- <div class="leftLeft"></div>-->
<div class="indexPageCenter">
<p class="pBF">LOOKING FOR A HANDSOME, INEXPENSIVE,
PERSONALIZED ONLINE STORE THAT SELLS YOUR PRODUCT
AND PROMOTES YOUR DISPENSARY ONLINE?</p>
</div> <!--END DIV PAGE1VIDEOCENTER -->
<!--<div class="rightRight"></div> -->
<div class="indexPageRight">
<object id="indexRight" type="text/html" data-dw-widget="Edge" data="animations/indexRight/right.html"></object>
</div>
</div> <!--END PAGE CONTENT-->
<div class="indexPageContent two">
<div class="indexPage2Left"></div>
<div class="indexPage2Center">
<object id="centerLogo" type="text/html" data-dw-widget="Edge" data="animations/centerLogo/logo.html"></object> </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" style="text-align: center">
STATE OF THE ART RESPONSIVE WEBSITES &
SHOPPING CARTS FOR THE MARIJUANA INDUSTRY </p>
<h2 class="h2BF">affordable &nbsp; &nbsp;effective &nbsp;&nbsp; secure</h2>
</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/indexBottom/indexBottom.html">
</object>
</div> <!--END INDEXPAGE2 DIV-->
<div class="indexPage5Right"></div>
</div><!--END PAGE CONTENT SECONDARY-->
<!-- Page Footer -->
<footer>
<div class="footerL">
<p class="footerP">weedmediadesign.com</p></div>
<div class="footerC"> </div>
<div class="footerR">
<p class="footerPr"><span class="appleLinks">310.399.5700</span></p>
</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: rgba(238,43,46,1.00);
text-shadow: 1px 1px 2px rgba(0,0,0,1);
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;*/
}
.headerPhone {
display: none;
}
.phoneHeader {
display: block;
position: absolute;
text-align: center;
/*top: 24px;
right: 20px; */
}
.wmd {
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
color: rgba(151,166,58,1);
color: rgba(200,218,59,1);
/*float: right;*/
font-size:1.2em;
margin-left: 60px;
margin-top: -43px;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
footer {
position: relative;
clear: both; /*SENDS FOOTER DOWN TO BOTTOM OF PAGE*/
padding: 1em 0;
z-index: 9998;
bottom: 0;
width: 100%;
height: 50px;
text-align: center;
background-color: rgba(255,255,255,.70);
}
/*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: rgba(151,166,58,1);
float: left;
font-size: .7em;
margin-left: 15px;
margin-top: -5px;
text-align: left;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0,0,0,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.0em;
font-size: 1em;
/*margin-left: 15px;*/
margin-top: -8px;
margin-right: 25px;
text-transform: uppercase;
float: right; /*JUSTIFIES PHOTO TO RIGHT SIDE*/
color: rgba(238,43,46,1.00);
text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
/*END OF FOOTER**********************/
.indexPageContent {
margin: 80px 10px 0px 10px;
position:relative;
}
.indexPageLeft {
float: left;
width: 5%;
/*background-color: orange;*/
/*height: 200px;*/
text-align: center;
padding-bottom: 0px;
height: 20px;
}
#indexLeft{
display:none;
}
#indexRight{
display:none;
}
.indexPageCenter {
float: left;
width: 90%;
/*background-color: blue;*/
/*height: 200px;*/
text-align: center;
padding-bottom: 0px;
}
.pBF {
font-size: 1em;
font-weight: 100;
font-family: 'NeuzeitSLTStdBookHeavy', sans-serif;
letter-spacing: .05em;
background-color: rgba(255,253,253, 0);
color: white;
/*background-color: red;*/
padding: 15px;
padding-top: 0;
padding-bottom: 0;
}
.indexPageRight {
float: left;
width: 5%;
/*background-color: orange;*/
text-align: center;
padding-bottom: 0px;
height:20px;
}
/*ANIMATION IS CENTER*/
.indexPageContent.two {
margin: 0px 10px 100px 10px;
clear: both;
position:relative;
/*border: red solid 1px;*/
}
.indexPage2Left {
display: block;
float: left;
width: 5%;
/*background-color: red;*/
background-color: rgba(255,0,4, .0);
height: 20px; /*CONTROLS DISTANCE BETWEEN VIDEO AND WELCOME*/
}
/*WEED MEDIA DESIGN LOGO*/
.indexPage2Center { /*BJOIN FILMS IS A FILM PRODUCTIONS COMPANY...*/
display: block;
float: left;
width: 90%;
background-color: rgba(255,253,253, .0);
height: 250px;
margin-bottom: 20px;
padding-top: 0px;
}
#centerLogo{
display: block;
width: 100%;
height: 100%;
}
.indexPage2Right {
display: block;
float: left;
width: 5%;
background-color: rgba(255,191,0,.0);
/*background-color: orange;*/
height: 20px;
}
/*PARRALLAX IS CENTER*/
.pageContent.three {
margin: 0px 10px 0px 10px;
clear: both;
}
.indexPage3Left {
display: block;
float: left;
width: 1%;
/*background-color: red;*/
background-color: rgba(255,0,4, 0);
height: 0px;
}
.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: 0px;
}
/*PAGE CONTENT 3RD TEXT IS CENTER*/
.pageContent.four {
margin: 0px 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, .0);
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 250px 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;
}
.h2BF {
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
font-size: 1.75em;
color: rgba(151,166,58,1);
text-transform: uppercase;
text-shadow: 2px 2px 2px rgba(0,0,0,1);
text-align: center;
line-height: 110%;
}
/* ==========================================================================
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 - iPHONE 6 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 376px will switch to desktop layout */
@media only screen and (min-width: 375px) {
.wmd {
font-size:1.4em;
margin-left: 65px;
margin-top: -43px;
}
/*WEEDMEDIADESIGN.COM LEFT SIDE OF FOOTER*/
.footerP {
font-size: .9em;
}
/*PHONE NUMBER RIGHT SIDE OF FOOTER*/
.footerPr {
font-size: 1.1em;
}
}
/* ==========================================================================
START - THOMAS DROTAR - iPHONE 6 PLUS 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 414px will switch to desktop layout */
@media only screen and (min-width: 414px) {
.wmd {
font-size:1.5em;
margin-left: 85px;
margin-top: -43px;
}
/*WEEDMEDIADESIGN.COM LEFT SIDE OF FOOTER*/
.footerP {
font-size: 1em;
}
/*PHONE NUMBER RIGHT SIDE OF FOOTER*/
.footerPr {
font-size: 1.2em;
color: blue;
}
}
/* ==========================================================================
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) {
.indexPageCenter {
padding-bottom: 30px;
}
/*WELCOME CENTER*/
.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(0,0,0,1.00);
}
header {
position: absolute;
height: 50px;
background-color: rgba(255,255,255,.70);
margin: 20px;
border-right: 40px black solid;
border-bottom: 2px solid black;
box-shadow:inset 0 -15px 5px -16px #111;
}
header nav {
position: static;
width: auto;
left: 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;
border-right: 2px solid rgba(98,161,69, 1.0);
}
header nav li:first-child {
margin: 0;
}
header nav a {
text-transform: uppercase;
letter-spacing: 0.1em;
text-shadow: 1px 1px 2px #000;
background: none;
font-size: 1.0em;
font-family: 'NeuzeitSLTStdBook';
color: black;
/*CONTROLS WIDTH OF BUTTONS */
padding-left: 7px;
padding-right: 7px;
}
header nav a:hover {
color: rgba(238,43,46,1.00);
text-shadow: 1px 1px 2px rgba(238,43,46, 1);
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: 'NeuzeitSLTStdBookHeavy';
letter-spacing: 0.25em;
/*color: rgba(200,218,59,1.00);*/
color: rgba(238,43,46,1.00);
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;
}
.phoneHeader {
display: block;
position: absolute;
float: right;
top: -24px;
right: 20px;
}
.headerPhone {
display: none;
}
.wmd {
display: none;
}
/*FIRST PAGE INDEX animation left*/
.indexPageContent {
margin: 80px 200px 20px 200px;
}
.indexPageLeft {/*ANIMATION LEFT */
height: 568px;
width: 15%;
display: block;
/*background-color: black;*/
background-color: rgba(0,255,0,0.0);
position: fixed;
left: 20px;
top: 100px;
}
#indexLeft{
display: block;
width: 100%;
height: 100%;
}
.indexPageCenter {
float: left;
width: 100%;
/*background-color: yellow;*/
background-color: rgba(255,241,0,0.0);
margin-bottom:20px;
margin-top: 30px;
height: 100px;
/*margin-left: 200px;*/
}
.pBF {
font-size: 1.2em;
padding: 10px;
color: white;
}
.indexPageRight { /*ANIMATION RIGHT*/
height: 768px;
background-color: rgba(255,0,0,0);
width: 15%;
/*background-color: green;
background-color: rgba(9,252,0,0.00);*/
display: block;
right: 20px;
top: 100px;
position: absolute;
}
#indexRight{
display: block;
width: 100%;
height: 100%;
}
/*LOGO IS CENTER */
.indexPageContent.two {
margin: 0px 200px 0px 200px;
clear: none;
}
.indexPage2Left {
width: 13%;
width: 1%;
/*background-color: red;*/
height: 200px;
clear: left;
}
/*LOGO ANIMATION*/
.indexPage2Center {
width: 98%;
/*margin-bottom: 100px;*/
height: 400px;
background-color: rgba(255,6,6,0.0);
}
/*#centerLogo{
display: block;
width: 100%;
height: 100%;
} */
.indexPage2Right {
width: 1%;
/*background-color: orange;*/
height: 200px;
}
/*PARALLAX IS CENTER */
.indexPageContent.three {
margin: 0px 100px 0px 200px;
}
.indexPage3Left {
display: inline-block;
float: left;
width: 1%;
/*background-color: red;*/
background-color: rgba(0,0,0,.5);
height: 20px;
}
.indexPage3Center {
width: 64%;
/*height: 500px;*/ /*CONTROLS DISTANCE TO PAGE CONTENT.THIRD*/
height: 20px;
text-align: center;
}
.indexPage3Right {
display: block;
float: left;
width: 1%;
/*background-color: orange;*/
background-color: rgba(255,143,0,.5);
height: 20px;
}
/*BOTTOM TEXT*********************/
.pageContent.four {
/*margin: 0px 10px 620px 10px;*/
/*margin: 100px 80px 0px 200px;*/
margin: 0px 200px 20px 200px;
padding-bottom:0px;
}
.indexPage4Left {
width: 1%;
/*background-color: orange;*/
height: 200px;
}
.indexPage4Center { /*STATE OF THE ART COPY*/
display: inline-block;
float: left;
width: 98%;
padding: 2%;
}
.h2BF {
font-size: 2em;
}
.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: 200px; /*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;
margin-bottom: 100px;
}
.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: 50px;
border-top: 1px solid white;
box-shadow:inset 0 -15px 5px -16px #111;
}
.footerL {
margin-top: 0px;
margin-left: 25px;
}
.footerP {
margin: 10px;
margin-top: -10px;
font-size: 1.5em;
}
/*.footerC {
display: block;
width: 25%;
float:left;
border: 1px solid rgba(255,0,219,0.00);
height: 1em;
}*/
.footerR {
margin-top: -10px;
margin-right: 25px;
}
.footerPr {
margin: 10px;
margin-top: -5px;
font-size: 2em;
float: right; /*JUSTIFIES PHOTO TO RIGHT SIDE*/
}
}
@media only screen and (min-width: 1024px) {
body{
border: 21px solid rgba(98,161,69,1.00);
}
header {
border-right: 40px rgba(98,161,69,1.00) solid;
}
.headerPhone {
display: block;
font-size: 1.8em;
outline: none;
text-transform: uppercase;
font-family: 'NeuzeitSLTStdBookHeavy';
letter-spacing: 0.25em;
color: rgba(238,43,46,1.00);
text-shadow: 1px 1px 2px rgba(0,0,0,1);
}
/*ANIMATION RIGHT*/
/*.indexPageRight {
width: 15%;
display: block;
right: 20px;
}*/
}
/* ==========================================================================
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) {
body{
border: 21px solid rgba(151,166,58,1.00);
}
header {
border-right: 40px rgba(151,166,58,1.00) solid;
border-bottom: 2px solid rgba(151,166,58,1.00);
}
/*WELCOME TEXT IS CENTER*/
.indexPageContent {
margin: 180px 265px 0px 300px;
margin: 0px 2px 0px 3px;
}
.indexPageLeft {/*ANIMATION LEFT */
height: 568px;
width: 15%;
/*background-color: black;*/
background-color: rgba(0,255,0,0.0);
position: fixed;
left: -20px;
top: 120px;
}
.indexPageCenter {
position: absolute;
float: left;
width: 66%;
/*background-color: yellow;*/
/*background-color: rgba(255,241,0,0.00);*/
/*margin-bottom: 20px;*/
/*margin-left: 200px;*/
left: 17%;
top: 120px;
}
.pBF {
font-size: 1.7em;
padding: 20px;
color: white;
}
.indexPageRight { /*ANIMATION RIGHT*/
/*width: 15%;*/
/*background-color: blue;*/
/*background-color: rgba(9,252,0,1.00);*/
right: 20px;
position: absolute;
}
#indexRight{
display: block;
width: 100%;
height: 100%;
}
/*LOGO STARTS HERE*/
.indexPageContent.two {
/*margin: 280px 265px 0px 300px;*/
margin: 380px 2px 0px 3px;
}
.indexPage2Left {
width: 16%;
}
.h2BF {
font-size: 2.2em;
}
.indexPage2Center {
width: 68%;
padding: 10px;
margin-bottom: 0px;
float: left;
}
.indexPage2Right {
width: 15%;
}
/*PARALLAX IS CENTER */
.indexPageContent.three {
/*margin: 180px 100px 0px 200px;*/
margin: 280px 2px 0px 3px;
}
.indexPage3Left {
display: inline-block;
float: left;
width: 16%;
/*background-color: red;*/
background-color: rgba(0,0,0,.00);
height: 200px;
}
.indexPage3Center {
width: 68%;
height: 500px; /*CONTROLS DISTANCE TO PAGE CONTENT.THIRD*/
text-align: center;
}
.indexPage3Right {
display: block;
float: left;
width: 15%;
/*background-color: orange;*/
background-color: rgba(255,143,0,.0);
height: 200px;
}
/*ABOUT BJOIN FILMS TEXT*********************/
.pageContent.four {
margin: 280px 2px 0px 3px;
padding-bottom:150px;
}
.indexPage4Left {
width: 16%;
/*background-color: red;*/
background-color: rgba(255,0,4,0.0);
height: 200px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION AND FOOTER*/
}
.indexPage4Center {
width: 68%;
padding: 10px;
}
.indexPage4Right {
width: 15%;
/*background-color: orange;*/
background-color: rgba(255,178,0,0.0);
height: 200px;
}
/*ANIMATION IS CENTER*/
.pageContent.five {
margin: 80px 2px 0px 3px;
}
.indexPage5Left {
width: 16%;
/*background-color: red;*/
background-color: rgba(255,0,4,0.0);
height: 300px; /*CONTROLS THE DISTANCE BETWEEN ANIMATION AND FOOTER*/
}
.indexPage5Center {
display: inline-block;
float: left;
width: 68%;
/*background-color: blue;
background-color: rgba(0,0,0,0.00);*/
height: 350px;
text-align:center;
}
.indexPage5Right {
display: inline-block;
float: left;
width: 15%;
/*background-color: orange;*/
background-color: rgba(255,178,0,0.0);
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