<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>York wedding photographer | davidclick.com</title>
<link href="styles/boilerplate.css" rel="stylesheet" type="text/css">
<link href="styles/fluid-grid.css" rel="stylesheet" type="text/css">
<!-- MORE CODEPEN
<script src="styles/respond.min.js"></script>
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script>
-->
<!-- CODEPEN CODE
<script type="text/javascript">
function MM_DW_effectScale(obj,method,effect,dir,originY,originX,per,size,speed)
{
obj[method](effect, { direction: dir, origin: [originY, originX], percent: per, scale: size }, speed);
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
-->
</head>
<body onLoad="MM_preloadImages('images/york-marriott-wedding-500-500.jpg')">
<!--DONT GO OUTSIDE THIS DIV-->
<div class="gridContainer.clearfix">
<div id="imagewrap" class="fluid">
<div id="header" class="fluid ">
<h1>davidclick.com</h1>
<h2 class="strapline">York based wedding photography</h2>
</div>
<div id="contact" class="fluid ">
<p>56 Manor park road
<br> Rawcliffe
<br> York
<br> YO30 5UL</p>
<p>077520 28747 | [email protected]</p>
</div>
<div id="menu" class="fluid">
<!--Menu begins-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Packages</a></li>
<li><a href="#">Me</a></li>
<li class="sub"><a href="#">Venue examples</a>
<ul>
<li><a href="#">Pavilion</a></li>
<li><a href="#">Leeds Registry</a></li>
</ul>
</li>
<li><a href="#">Romantic adventures</a></li>
</ul>
</div>
<div id="content-inner-venue" class="fluid ">
<h2>Ciao!</h2>
<p>Welcome to my wedding photography service. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog. The quick brown fox jumps
over the lazy dog.The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
<h2>Fatto in Italia - Made in Italy</h2>
<p>Flown all the way from Alba, Italy your wedding album is hand build by Graphi Studio. But be warned once touched forever desired ;-)</p>
<h2>Romantic photography adventures</h2>
<p>Ready for a bike ride? let me take you on a romantic pedal power fuelled adventure across the City of York. We'll discover the love locks of Scarborogh bridge and my favourite sun set locations.</p>
</div>
<!-- Sitepoint grid help-->
<div class="picgrid">
<ul>
<li>
<a href="#"><img tabindex="0" src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" alt="" /></a>
</li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
</ul>
<ul>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
</ul>
<ul>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/york-marriott-wedding-500-500_zps1ylrmhng.jpg" width="150px" height="150px" alt="Deckchairs" /></li>
</ul>
</div>
<div id="footer">
<ul class="footer-thumbs">
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="image-1" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></li>
<li><img src="http://i216.photobucket.com/albums/cc53/zymurgy_bucket/footer-image-2_zps1nb0wtue.jpg" alt="" /></li>
</ul>
</div>
<div id="address">
<p>56 Manor Park Road | Rawcliffe | York | YO30 5UL |
<span class="right-align">Site last updated - 25th June 2015</span></p>
</div>
</div>
</div>
<!--DONT GO OUTSIDE THIS DIV-->
</body>
</html>@charset "UTF-8";
img,
object,
embed,
video {
max-width: 100%;
}
.ie6 img {
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;
}
/* Mobile Layout: 480px and below. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 88.0326%;
padding-left: 1.4836%;
padding-right: 1.4836%;
clear: none;
float: none;
}
#header {
width: 100%;
}
#content {
width: 100%;
margin-left: 0;
clear: both;
}
#picture-frame {
width: 100%;
margin-left: 0;
clear: both;
}
#start {
width: 100%;
margin-left: 0;
clear: both;
}
#strapline {
width: 100%;
margin-left: 0;
clear: both;
}
#banner-promo {}
#banner {
width: 100%;
}
#youtube {
width: 100%;
margin-left: 0;
clear: both;
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}
/* No bullets menu*/
#menu {
width: 98%;
color: #F8F8F8;
background-color: #CCCCCC;
padding: 1%;
}
/* Hiding the sub menu & popping */
li.sub {
position: relative;
}
li.sub ul {
display: none;
}
li.sub:hover > ul {
display: block;
}
/*Hiding sub menu & popping efforts ends */
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
width: 20%;
}
#menu li li {
float: none;
width: auto;
}
#menu a {
color: #FFFFFF;
}
#menu a:link {
text-decoration: none;
}
#menu a:hover {
border-bottom: 4px solid #FF8000;
color: #FF8000;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
width: 91.4836%;
padding-left: 0.7581%;
padding-right: 0.7581%;
clear: none;
float: none;
margin-left: auto;
}
#header {
width: 100%;
}
#content {
width: 100%;
clear: both;
margin-left: 0;
}
#picture-frame {
width: 100%;
clear: both;
margin-left: 0;
}
#start {
width: 100%;
clear: both;
margin-left: 0;
}
#strapline {
width: 100%;
clear: both;
margin-left: 0;
}
#banner-promo {}
#banner {
width: 100%;
}
#youtube {
width: 100%;
clear: both;
margin-left: 0;
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 89.0217%;
max-width: 1232px;
padding-left: 0.4891%;
padding-right: 0.4891%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#header {
width: 49%;
}
#content {
width: 49%;
clear: both;
margin-left: 0;
}
#content-inner-venue {
width: 40%;
clear: both;
margin-left: 0;
}
#picture-frame-inner-venue {
width: 100%;
clear: none;
margin-left: 1.0989%;
float: right;
}
#picture-frame {
width: 49%;
clear: none;
margin-left: 1.0989%;
float: right;
}
#picture-frame img {
display: inline-block;
margin: 1%;
}
#contact {
width: 49%;
clear: none;
margin-left: 1.0989%;
text-align: right;
}
#banner {
width: 49.4505%;
}
#youtube {
width: 49.4505%;
clear: none;
margin-left: 1.0989%;
}
.hide_desktop {
display: none;
}
#content {
padding: 0.1%;
}
}
body {
background-image: url("http://i216.photobucket.com/albums/cc53/zymurgy_bucket/fount-abbey-bk-ground-4_zpsuncwg9px.jpg");
background-repeat: no-repeat;
}
/*
body {
background: url(http://i216.photobucket.com/albums/cc53/zymurgy_bucket/bride-groom-abbey-1000_zpsyjfhjqgv.png), url(http://i216.photobucket.com/albums/cc53/zymurgy_bucket/wedding-dress-200-346-3_zpsnkxbo5un.jpg) no-repeat top left;
}
*/
.footer-thumbs {
display: table;
table-layout: fixed;
width: 100%;
background: tan none repeat scroll 0 0;
clear: both;
list-style: outside none none;
padding: 0;
margin: auto;
}
.footer-thumbs li {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.footer-thumbs img {
background: peru none repeat scroll 0 0;
border: 1px solid white;
display: block;
height: auto;
width: 100%;
box-sizing: border-box;
}
#address {
background-color: white;
}
#address .right-align {
background-color: #E1CD1B;
float: right;
font-style: italic;
}
#address p {
line-height: 1
}
/* Sitepoint Eric J & Ron Pat fix */
.picgrid {
position: relative;
z-index: 1;
display: table;
table-layout: fixed;
border-spacing: 16px 16px;
background-color: #bdf;
margin-left: auto;
max-width: 800px;
}
.picgrid ul {
display: table-row;
}
.picgrid ul li {
display: table-cell;
padding: 0%;
}
/* Ron Pats Fixes */
.picgrid ul li img {
position: relative;
z-index: -1;
display: block;
border: 0;
width: 100%;
height: auto;
}
.picgrid ul li a:focus img {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: auto;
left: 0;
margin: auto;
box-sizing: border-box;
border: 8px solid #bdf;
width: 100%;
height: auto;
max-width: 750px;
}
/* Font styling */
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.25em;
line-height: 1em;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
line-height: 1em;
}
h2 {
font-family: "Impact", Charcoal, sans-serif;
font-size: 1.50em;
line-height: 1.25em;
font-weight: lighter;
letter-spacing: 0.15em;
}
.strapline {
padding: 0px;
margin-top: -1.25em;
color: #FF8000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1.5em;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.