Skip to content

Instantly share code, notes, and snippets.

/YyOWNB.markdown

Created November 4, 2015 20:09
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/4da6401ead3815c3bc4b to your computer and use it in GitHub Desktop.
Save anonymous/4da6401ead3815c3bc4b to your computer and use it in GitHub Desktop.
Download ZIP
YyOWNB
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>MONICA MANICINI - WELCOME</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta description="monica mancini, monica, mancini, singer, performer, gregg fields, henry mancini, i loved these days, ultimate mancini, cinema paradiso, the dreams of johnny mercer, monica mancini debut album" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<meta id=\"view\" name=\"viewport\" content=\"width=device-width, maximum-scale=1.0, minimum-scale=1.0, 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">
<!--<link rel="stylesheet" href="css/scalingBackground.css">-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!--<script>document.cookie='resolution='+Math.max(screen.width, screen.height)+'; path=/';</script>-->
<script>document.cookie='resolution='+Math.max(screen.width, screen.height)+'; path=/';</script>
<script>window.onorientationchange = function(){window.scrollTo(0)}</script>
<!--[if lt IE 9]> <script src="bower_components/html5shiv/dist/html5shiv.js"></script> <![endif]-->
</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>
<div class="phone"> <span class="appleLinks">MONICA MANCINI </span></div>
<nav>
<ul>
<li class="mobileMenu"> <a href="#"></a></li> <br>
<li class="active"> <a href="#">home</a></li> <br>
<li><a href="music.html">music</a></li><br>
<li><a href="upcoming.html">upcoming</a></li><br>
<!--<li><a href="archive.html">archive</a></li><br>-->
<li><a href="contact.html">contact</a></li><br>
</ul>
</nav>
<div class="right"> </div>
</header>
<div class="indexContent">
<div class="indexPageLeft">
<!--<object id="bjoinList" type="text/html" data-dw-widget="Edge" data="animations/bjoinList/bjoinList2.html"></object>-->
</div>
<div class="indexPageCenter">
<p class="thomasdrotardesign"></p>
</div> <!--END DIV PAGE1VIDEOCENTER -->
<div class="indexPageRight">
<!--<object id="bjoinFilms" type="text/html" data-dw-widget="Edge" data="animations/bjoinfilms/bjoin.html"></object>-->
</div>
</div> <!--END PAGE CONTENT-->
<div class="indexContent secondary">
<div class="indexPage2Left"></div>
<div class="indexPage2Center">
<!-- <object id="indexAnimation" type="text/html" data-dw-widget="Edge" data="animations/mmIndex/handmade.html">
</object>-->
</div> <!--END INDEXPAGE2CENTER-->
<div class="indexPage2Right">
<object id="indexAnimation" type="text/html" data-dw-widget="Edge" data="animations/mmIndex/handmade.html">
</object>
</div>
</div><!--END PAGE CONTENT SECONDARY-->
<div class="indexContent third">
<div class="indexPage3Left"></div>
<div class="indexPage3Center">
<h2 class="h2h">ABOUT MONICA</h2>
<p class="pp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto blanditiis consectetur corporis eligendi id in minus modi molestiae necessitatibus nemo nesciunt, placeat repellat totam velit? Facere quibusdam quidem veritatis<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto blanditiis consectetur corporis eligendi id in minus modi molestiae necessitatibus nemo nesciunt, placeat repellat totam velit? Facere quibusdam quidem veritatis?</p>
</div>
<div class="indexPage3Right"></div>
</div> <!--END PAGE CONTENT THIRD-->
<div class="indexContent four">
<div class="indexPage4Left"></div>
<div class="indexPage4Center">
<h2 class="h2h">albums</h2>
<div class="gallery"> <img src="img/albums/thesedays.jpg" alt="these days">
<p class="caption">these days</p>
</div>
<div class="gallery"> <img src="img/albums/um.jpg" alt="ultimate mancini">
<p class="caption">ultimate mancini</p>
</div>
<div class="gallery"> <img src="img/albums/cp.jpg" alt="cinema paradiso">
<p class="caption"> cinema paradiso</p>
</div>
<div class="gallery"> <img src="img/albums/jm.jpg" alt="dreams of johnny mercer">
<p class="caption">dreams of jm</p>
</div>
<div class="gallery"> <img src="img/albums/mm.jpg" alt="monica mancini">
<p class="caption">debut album </p>
</div>
<!--<div class="gallery"> <img src="images/swirl.jpg" alt="ap4">
<p class="caption">Swirl </p>
</div>-->
</div> <!--END INDEXPAGE4CENTER-->
<div class="indexPage4Right"></div>
</div> <!--END PAGE CONTENT THIRD-->
<div class="indexContent five">
<div class="indexPage5Left"></div>
<div class="indexPage5Center">
<h2 class="h2h">DROTAR5</h2>
<p class="pp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto blanditiis consectetur corporis eligendi id in minus modi molestiae necessitatibus nemo nesciunt, placeat repellat totam velit? Facere quibusdam quidem veritatis<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus architecto blanditiis consectetur corporis eligendi id in minus modi molestiae necessitatibus nemo nesciunt, placeat repellat totam velit? Facere quibusdam quidem veritatis?
</p> </div>
<div class="indexPage5Right"></div>
</div> <!--END PAGE CONTENT THIRD-->
<!-- Page Footer -->
<footer>
<div class="insideFooter">
<p><span class="footerLeft" >monica mancini</span></p>
<div class="footerLogo"> </div>
<p><span class="footerPhone" ><span class="appleLinks">310.399.5700</span></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 -->
<!--<script src="js/jquery.scalingFullBrowserArea.js"></script>-->
<!-- 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>
<script src='js/jquery.backstretch.fixed.min.js'></script>
<script src="js/index.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;
}
@font-face {
font-family: 'BeaufortRegular';
src: url('../fonts/beaufort/beaufort-webfont.eot');
src: url('../fonts/beaufort/beaufort-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/beaufort/beaufort-webfont.woff') format('woff'),
url('../fonts/beaufort/beaufort-webfont.ttf') format('truetype'),
url('../fonts/beaufort/beaufort-webfont.svg#BeaufortRegular') 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:#fff;
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;
/*position: relative;*/ /*1 OF 3 STICKY FOOTER */
min-height: 100%;
}
*{
-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;
/*border: 20px solid #000000;*/
/*margin: 0 0 50px;*/ /* bottom = footer height 2 OF 3 STICKY FOOTER*/
}
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;
}
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: #32B0D4;
font-size: 45px;
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: 60px;
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
}
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;*/
}
.phone {
/*position: absolute;*/
font-size: 1.5em;
font-weight: 100;
text-transform: uppercase;
font-family: 'BeaufortRegular', sans-serif;
letter-spacing: .15em;
text-shadow: 1px 1px 4px rgba(0,0,0,.00);
color: rgba(0,0,0,1);
margin-top: -45px;
/*right: 40px; */
text-align: center;
margin-left: 55px;
}
footer {
clear: both;
position: relative;
padding: 1em 0;
z-index: 9998;
bottom: 0;
width: 100%;
height: 1em;
color: white;
text-align: center;
/*position: absolute;
left: 0;
bottom: 0;
height: 50px;
width: 100%;*/
/*1 OF 3 STICKY FOOTER */
}
footer p {
margin: 0;
}
.footerLeft {
width: 35%;
color: white;
float: left;
font-size: .9em;
margin-left: 15px;
margin-top: -8px;
text-align: left;
text-transform: uppercase;
}
.footerLogo {
display:none;
}
.footerPhone {
float: right;
width: 35%;
color: white;
font-size: 1em;
margin-right: 15px;
margin-top: -8px;
text-align: right;
}
/* the background of the footer */
footer:after {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.5;
content: "";
z-index: -1;
}
.indexContent {
clear:both;
margin: 80px 10px 0px 10px;
display: block;
}
.indexPageLeft {
float: left;
display: block;
width: 2%;
background-color: rgba(255,0,0, 0);
height: 20px;
}
.indexPageCenter {
float: left;
width: 95%;
background-color: rgba(255,227,0,.0);
height: 20px;
}
.thomasdrotardesign {
text-align: center;
font-size: 1em;
font-weight: 100;
text-transform: uppercase;
font-family: 'BeaufortRegular', sans-serif;
font-family: 'NeuzeitSLTStdBook', sans-serif;
letter-spacing: .1em;
text-shadow: 1px 1px 4px rgba(0,0,0,.00);
color: rgba(255,255,255,1);
margin-top: 0px;
}
.indexPageRight {
float: right;
display: block;
width: 2%;
background-color: rgba(255,0,0, 0);
height: 20px;
}
/* START OF SECOND PAGE WITH BJOIN FILMS ANIMATION CENTERED FOR SMART PHONES */
.indexContent.secondary {
clear:both;
margin: 130px 10px 20px 10px;
display: block;
}
.indexPage2Left {
float: left;
display: block;
width: 1%;
background-color: rgba(255,0,255, .0);
height: 20px;
}
.indexPage2Center {
display: inline-block;
float:left;
width: 1%;
height: 20px;
margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
background-color: rgba(255,125,255,.7);
}
.indexPage2Right {
float: right;
display: block;
width: 98%;
background-color: rgba(255,255,0, .0);
height: 250px;
}
#indexAnimation {
width: 100%;
height: 100%;
}
.indexContent.third {
clear:both;
margin: 0px 10px 20px 10px;
display: block;
}
.indexPage3Left {
display: block;
float:left;
width: 1%;
background-color: rgba(14,254,0,.2);
height: 200px;
}
.indexPage3Center {
display: block;
float:left;
width: 97%;
/*height: 500px;*/
margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
background-color: rgba(255,255,255, .3);
}
.indexPage3Right {
display: block;
float:right;
width: 1%;
background-color: rgba(255,0,0,.3);
height: 200px;
margin-left: auto;
margin-right: auto;
}
.h2h {
color: orange;
text-align: center;
font-height:1;
text-transform: uppercase;
font-size: 2em;
font-family: 'NeuzeitSLTStdBookHeavy';
font-weight: 100;
text-shadow: 1px 1px 2px rgba(0,0,0,.50);
}
.pp{
font-height:1.25;
color: black;
/*text-transform: uppercase;*/
font-size: 1.25em;
font-family: 'NeuzeitSLTStdBook';
font-weight: 100;
text-shadow: 1px 1px 1px rgba(255,255,255,.00);
padding: .0em 30px .35em 30px;
}
.indexContent.four {
clear:both;
margin: 10px 10px 20px 10px;
display: block;
}
.indexPage4Left {
display: block;
float:left;
width: 1%;
background-color: rgba(14,254,0,.5);
height: 200px;
}
.indexPage4Center {
display: block;
float:left;
width: 97%;
/*height: 500px;*/
margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
background-color: rgba(255,255,255, .3);
}
.gallery {
width: 32%;
width: 49%;
display: inline-block;
padding:10px;
}
.gallery img {
display: block;
margin: 0 auto;
width: 100%;
}
.caption {
text-align: center;
font-size: .8em;
font-weight: 100;
text-transform: uppercase;
font-family: 'BeaufortRegular', sans-serif;
/*font-family: 'NeuzeitSLTStdBook', sans-serif;*/
letter-spacing: .0em;
text-shadow: 1px 1px 4px rgba(255,255,255,1.0);
color: rgba(0,0,0,1);
margin-top: 5px;
width:100%;
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
.indexPage4Right {
display: block;
float:right;
width: 1%;
background-color: rgba(255,0,0,.3);
height: 200px;
margin-left: auto;
margin-right: auto;
}
.indexContent.five {
clear:both;
margin: 10px 10px 20px 10px;
display: block;
}
.indexPage5Left {
display: block;
float:left;
width: 1%;
background-color: rgba(14,254,0,.2);
height: 200px;
}
.indexPage5Center {
display: block;
float:left;
width: 97%;
/*height: 500px;*/
margin-bottom: 30px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
margin-top: 0px; /*CONTROLS THE HEIGHT FROM THE NEXT BOX BELOW*/
background-color: rgba(255,255,255, .3);
}
.indexPage5Right {
display: block;
float:right;
width: 1%;
background-color: rgba(255,0,0,.3);
height: 200px;
margin-left: auto;
margin-right: auto;
}
/* ==========================================================================
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) {
/*ALBUM CAPTIONS*/
.caption {
font-size: 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) {
/*ALBUM CAPTIONS*/
.caption {
font-size: 1.3em;
color: orange;
}
}
/* ==========================================================================
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) {
.phone {
font-size: 2em;
margin-top: -50px;
right: 20px;
}
.thomasdrotardesign {
text-align: center;
font-size: 1.7em;
font-family: 'NeuzeitSLTStdBook', sans-serif;
letter-spacing: .1em;
text-shadow: 1px 1px 4px rgba(0,0,0,.00);
color: rgba(255,255,255,1);
margin-top: 0px;
}
.indexPageLeft {
width: 5%;
}
.indexPageCenter {
width: 90%;
}
.indexPageRight {
width: 5%;
}
.indexPage2Center {
height: 3px;
}
.indexPage2Right {
height: 300px;
}
.pageContent.third {
margin: 10px 10px 20px 10px;
}
.indexContent.four {
margin: 50px 10px 20px 10px;
}
.indexContent.five {
margin: 10px 10px 20px 10px;
}
.footerLeft {
width: 35%;
color: white;
float: left;
font-size: 1.2em;
margin-left: 15px;
margin-top: -8px;
text-align: left;
text-transform: uppercase;
}
.footerPhone {
float: right;
width: 35%;
color: white;
font-size: 1.2em;
margin-right: 15px;
margin-top: -8px;
text-align: right;
}
}
/* ==========================================================================
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) {
/*FRAME AROUND FULL SCREEN*/
body{
border: 21px solid #808080;
}
input.mobileMenuButton ~ * {
-webkit-transition: none;
transition: none;
}
input.mobileMenuButton ~ * h1,
input.mobileMenuButton ~ * p {
-webkit-transition: none;
transition: none;
}
input.mobileMenuButton,
label.mobileMenuButton {
display: none;
}
header {
margin-top: -2px;
height: 5px;
background-color: rgba(255,255,255,.30);
clear: both;
position: relative;
padding: 1em 0;
z-index: 9998;
bottom: 0;
width: 100%;
/*height: 1.1em;*/
color: white;
text-align: center;
}
.phone {
font-size: 1.7em;
margin-top: -75px;
margin-left: 0px;
}
header nav {
display: inline-block;
/*position: absolute;*/
position: fixed; /*KEEPS NAVIGATION GLUED SO IT DOES NOT SCROLL*/
margin-top: 8px;
width: 170px;
left: 21px;
top: 100px; /*CHANGED HERE TO MOVE NAV UP FOR IPAD LANDSCAPE FOR MORE ROOM*/
background-color: rgba(255,255,255,.30);
padding: 10px 0px 20px 10px; /*WHITE BOX UNDER SIDE BUTTONS*/ /*-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px; */
}
header nav ul {
text-align: left;
width: auto;
}
header nav li {
margin-left: 0;
width: auto;
border-bottom: 0;
background: rgba(255, 255, 255, 0.0);
/*-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;*/
margin-top: 1px; /*DISTANCE BETWEEN BUTTONS THEMSELVES*/
margin-bottom: 5px;
z-index: 111;
}
header nav li:first-child {
margin: 0;
}
header nav a {
text-transform: uppercase;
letter-spacing: 0.05em;
/*text-shadow: 1px 1px 2px #ccc;*/
background: none;
border-radius: 6px;
padding: 5px 0px;
/*padding-left: 0; */
font-size: 1.5em;
font-weight: 100;
text-transform: uppercase;
font-family: 'NeuzeitSLTStdBookHeavy', sans-serif;
letter-spacing: .0em;
/*text-shadow: 1px 1px 1px rgba(0,0,0,1.00);*/
color: black;
}
header nav a:hover {
background-color: rgba(255,255,255,.0);
color: blue;
/*text-shadow: 1px 1px 2px #000;*/
}
/*ACTIVE LINK*/
header nav .active a {
display: inline-block;
font-size: 1.6em;
outline: none;
text-transform: uppercase;
font-family: 'NeuzeitSLTStdBookHeavy';
letter-spacing: 0.em;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,1);
background-color: rgba(255,0,4, .0);
}
header nav .active a:hover {
color: white;
/*font-size: 2.2em;*/
/* letter-spacing: 0.25em;*/
}
.right { /*RIGHT SIDE BLOCK PUSH OVER*/
display: inline-block;
position: absolute;
margin-top: 8px;
width: 100px;
width: 10px;
right: 0px;
top: 80px; /*CHANGED HERE TO MOVE NAV UP FOR IPAD LANDSCAPE FOR MORE ROOM*/
background-color: rgba(255,0,255,.5);
padding: 10px 0px 20px 10px; /*WHITE BOX UNDER SIDE BUTTONS*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
/*THIS PLACES THE FOOTER AT THE BOTTOM OF THE PAGE AND YOU SCROLL UNDER IT*/
/*footer {
position: fixed;
bottom: 0;
}
*/
/*NEVER CHANGE THE LEFT AND RIGHT MARGINS FOR VIDEO/MUST BE CONSITENT THROUGHTOUT!!!!!!!!!!*/
/*.pageContent {
margin: 80px 10px 20px 10px;
}*/
.indexContent {
margin: 50px 110px 0px 180px;
margin: 0px 110px 0px 180px;
}
.indexPageLeft {
width: 3%;
background-color: rgba(255,5,9,.0);
height: 1px;
}
.indexPageCenter {
width: 95%;
background-color: rgba(255,239,0,.0);
height: 2px;
margin-bottom: 0px; /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
}
.indexPageRight {
width: 2%;
background-color: rgba(35,255,0,.0);
height: 1px;
}
/*ANIMATION*/
.indexContent.secondary {
margin: 0px 110px 20px 160px;
margin: 0px 10px 220px 180px;
}
.indexPage2Left {
height: 3px;
width: 25%;
background-color: green;
background-color: rgba(21,255,0,0.0);
}
.indexPage2Center {
height: 3px;
width: 25%;
background-color: orange;
background-color: rgba(255,143,0,0.0);
}
.indexPage2Right {
height: 250px;
background-color: blue;
background-color: rgba(50,176,212,0.0);
float: right;
width: 50%;
}
/*ABOUT MONICA*/
.indexContent.third {
margin: 450px 110px 0px 180px;
}
.indexPage3Left {
width: 20%;
width: 2%;
background-color: rgba(255,255,255,.2);
height: 250px;
}
.indexPage3Center {
width: 96%;
margin-bottom: 30px; /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
background-color: rgba(0,0,0,.2);
}
.indexPage3Right {
width: 2%;
height: 250px;
background-color: rgba(0,100,255,.6);
}
.indexContent.four {
margin: 50px 110px 0px 180px;
}
.indexPage4Left {
width: 20%;
background-color: rgba(255,0,255,.2);
height: 250px;
}
.indexPage4Center {
width: 60%;
margin-bottom: 30px; /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
background-color: rgba(0,0,0,.2);
}
.gallery {
width: 32%;
display: inline-block;
padding:10px 0px 10px 10px;
}
.gallery img {
display: block;
margin: 0 auto;
width: 100%;
}
.caption {
text-align: center;
font-size: .8em;
font-weight: 100;
text-transform: uppercase;
font-family: 'BeaufortRegular', sans-serif;
/*font-family: 'NeuzeitSLTStdBook', sans-serif;*/
letter-spacing: .0em;
text-shadow: 1px 1px 4px rgba(0,0,0,.00);
color: rgba(255,255,255,1);
margin-top: 5px;
width:100%;
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.fluidList {
list-style:none;
list-style-image:none;
margin:0;
padding:0;
}
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
.indexPage4Right {
width: 20%;
height: 250px;
background-color: rgba(255,0,255,.2);
}
.indexContent.five {
margin: 50px 110px 0px 180px;
}
.indexPage5Left {
width: 20%;
background-color: rgba(255,255,255,.2);
height: 250px;
}
.indexPage5Center {
float: left;
width: 59%;
margin-bottom: 100px; /***********CONTROLS THE DISTANCE TO THE PAGE BELOW******************/
background-color: rgba(0,0,0,.2);
}
.indexPage5Right {
width: 20%;
height: 250px;
background-color: rgba(255,0,255,.2);
}
}
/* ==========================================================================
END - THOMAS DROTAR - LARGE SCREEN
========================================================================== */
/* ==========================================================================
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: 20px solid #000000;
}
header nav {
display: inline-block;
/*position: absolute;*/
position: fixed; /*KEEPS NAVIGATION GLUED SO IT DOES NOT SCROLL*/
margin-top: 8px;
width: 200px;
left: 21px;
top: 100px; /*CHANGED HERE TO MOVE NAV UP FOR IPAD LANDSCAPE FOR MORE ROOM*/
background-color: rgba(255,255,255,.30);
padding: 10px 0px 20px 10px; /*WHITE BOX UNDER SIDE BUTTONS*/ /*-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px; */
}
header nav ul {
text-align: left;
width: auto;
}
header nav li {
margin-left: 0;
width: auto;
border-bottom: 0;
background: rgba(255, 255, 255, 0.0);
/*-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;*/
margin-top: 1px; /*DISTANCE BETWEEN BUTTONS THEMSELVES*/
margin-bottom: 5px;
z-index: 111;
}
header nav li:first-child {
margin: 0;
}
header nav a {
font-size: 1.9em;
}
header nav a:hover {
background-color: rgba(255,255,255,.0);
color: blue;
/*text-shadow: 1px 1px 2px #000;*/
}
/*ACTIVE LINK*/
header nav .active a {
font-size: 1.9em;
}
header nav .active a:hover {
color: white;
/*font-size: 2.2em;*/
/* letter-spacing: 0.25em;*/
}
.right {
width: 20px;
}
.footerLeft {
width: 35%;
color: white;
float: left;
font-size: 2em;
margin-left: 15px;
margin-top: -12px;
text-align: left;
text-transform: lowercase;
}
.footerLogo {
display:none;
}
.footerPhone {
float: right;
width: 35%;
color: white;
font-size: 2em;
margin-right: 15px;
margin-top: -12px;
text-align: right;
}
.indexContent {
margin: 50px 210px 0px 213px;
}
.indexContent.secondary {
margin: 0px 210px 20px 213px;
margin: 0px 0px 20px 213px;
}
.indexPage2Center {
height: 700px;
background-color: rgba(255,0,255,.0);
}
.indexPage2Right {
height: 700px;
background-color: rgba(255,0,255,.0);
}
.indexContent.third {
margin: 0px 210px 20px 213px;
}
.indexContent.four {
margin: 0px 210px 20px 213px;
}
.indexContent.five {
margin: 0px 210px 20px 213px;
}
}
/* ==========================================================================
END - THOMAS DROTAR - LARGEST SCREEN LAYOUT
========================================================================== */
/* ==========================================================================
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment