A Pen by Captain Anonymous.

fDFoe.markdown

fDFoe

A Pen by Secret Sam on CodePen.

License.

index.html

<div id="bubble" > 
<div class="content">
<div class ="nav_image">
	<img src="../../navbar/backbar.gif" height="114"/><br />
			<nav>
         		

					
</nav>  
</div>
	<div class="fluid_container">
	
       	    
    <div style="clear:both; display:block; height:100px"></div>
    </div>
    </div>
<div id="bubble1"> 
  <img src="../../titles/the barn (Copy).jpg" alt="The Barn">
  <div id="glance">
  <div class="glance1">
 <table>
<thead><tr><th>Quick Info</th><th></th></tr></thead>
<tbody><tr><td>Sleeps</td><td>6</td></tr>
<tr class="alt"><td>Bedrooms</td><td>3</td></tr>
<tr><td>Bathrooms</td><td>3</td></tr>
<tr class="alt"><td>Price Range</td><td>£363-£786 for short break</td></tr>
</tbody>
</table>
</div>
</div>
  <div class="blurb">
  <br></>
  <p>The Barn dates from the 17th century and grade II listed.</p>
  <p>This is a beautifully restored 17th Century Devon Barn, which has been loveingly converted. It retains many original features including exposed beams, and open fireplaces, yet has all the modern conviences.</p>
 <p>The kitchen is the focal hub of this home, it comes with all the modern conviences you could want. They include: modern range cooker, granite work tops, flat screen TV, washing machine, tumble dryer, two refrigerators (one with freezer box), microwave and dining table that seats 8 people. All kitchen utensils that a great cook would require.</p>
 <p>Downstairs cloakroom.</p>
 <p>The comfortable beamed living room includes, 3 leather sofas, solid oak flooring, central heating, and open log fire. Wi-fi, flat screen TV, DVD player and bookcase full of books to curl up in front of the open fire are all supplied.</p>
 <p>The master bedroom with double bed and en-suite shower room has a delightful view over the garden. Plenty of wardrobe space (hangers supplied). All bed linen, bath and hand towels supplied.</p>
 <p>The second bedroom has twin beds again with an en-suite shower room and plenty of wardrobe and cupboard space, and again with a delightful view over the garden. All bed linen, bath and hand towels supplied. </p>
 <p>The third bedroom also has twin beds and plenty of wardrobe and cupboard space. The view is over the garden. All bed linen, bath and hand towels supplied. </p>
 <p>The modern family bathroom has bath facilities with shower above (all showers in this cottage are power showers). </p>
 <p>Beautiful large sheltered garden with BBQ and garden furniture for 6 people with lovely views. </p>
 <p>Private secluded courtyard parking for 2 cars for this cottage</p>
 <p>Our local housekeeper provides 24 hour emergency cover.</p>
 <p>On your arrival you will find your Welcome Pack including wine, tea, coffee, biscuits and milk.</p>
 <p>For the kitchen we supply dishwasher and laundry tablets, linen tea-towels and hand towel.</p>
 </div>
 <div id="datagrid">
 <div class="datagrid">
<table>
<tbody>
<tr class="alt"><td><h7>The Barn</h7></td><td></td><td></td></tr>
<tr><td><b>Property Type:</b></td><td>farmhouse</td><td>semi-detached</td></tr>
<tr class="alt"><td><b>Meals:</b></td><td>self-catering</td><td></td></tr>
<tr><td><b>Location:</b></td><td>beach</td><td>village</td></tr>
<tr class="alt"><td><b>Style:</b></td><td>historic</td><td>luxury</td></tr>
<tr><td><b>General:</b></td><td>living room, fire place, firewood, heating, linins, washing machine,  clothes dryer,  wi-fi,</td><td> hair dryer, laudry soap, pantry items provided e.g toilet paper, iron &amp; board, bathroom towels, off street parking,</td></tr>
<tr class="alt"><td><b>Kitchen:</b></td><td>dishes &amp; utensils, range cooker, 2 refridgerators,</td><td>toatser, pantry items, dishwasher</td></tr>
<tr><td><b>Dining:</b></td><td>dining area</td><td>seating for 8 people</td></tr>
<tr class="alt"><td><b>Bathrooms:</b></td><td>3 bathrooms</td><td><b>bathroom 1 -</b> toilet, bath with shower<br></><b>bathroom 2 -</b> toilet, shower enclosure <br></><b>bathroom 3 -</b> toliet, shower enclosure<br></><b>note: please bring your own beach towels</b></td></tr>
<tr><td><b>Bedrooms:</b></td><td>3 bedrooms, sleeps 6</td><td><b>bedroom 1 -</b> 1 double bed <br></><b>bedroom 2 -</b> 2 twin beds <br></><b>bedroom 3 -</b> 2 twin beds</td></tr>
<tr class="alt"><td><b>Entertainment</b></td><td>flat screen tv</td><td>dvd player</td></tr>
<tr><td><b>Outside:</b></td><td>terrace with bbq and outside seating</td><td>garden, off street parking</td></tr>
<tr class="alt"><td><b>Suitability:</b></td><td>children welcome, pets not allowed, non smoking only</td><td> wheelchair inaccessible, not suitable for elderly or infirm</td></tr>
<tr><td><b>Attractions:</b></td><td>beach, churches</td><td>restaurants</td></tr>
<tr class="alt"><td><b>Leisure Activities:</b></td><td>horse riding, bird watching, scenic drives </td><td>walking, sight seeing</td></tr>
<tr><td><b>Sports &amp; Adventure Activities:</b></td><td>surfing, swimming, wind-surfing, fishing, tennis</td><td>cycling, golf, mountain biking, paragliding, hiking</td></tr>
<tr class="alt"><td><b>Local Ammenities:</b></td><td>groceries, surf hire, pubs</td><td>medical services, restraunts</td></tr>
</tbody>
</table>
</div>
</div>
<div class="blurb">
<h1>Bookings</h1>
<div class="calander"><iframe scrolling="no" width="519" height="245" frameBorder="0" style="overflow:hidden;border: none" src="http://www.homeaway.co.uk/haow/widgets/calendar.html?propertyId=1057838&unitId=1309813&monthCount=3&orientation=horizontal&site=homeaway_uk"></iframe><a href="http://www.homeaway.co.uk/p1057838" style="display:block;text-align:center;margin-top:-30px; font-size:12px;" rel="nofollow">The Barn, HomeAway.</a></div>
</div>
<div class="blurb">
<br></>
<p>Check The Farmhouse's full availability <a title="Contact Us" href="booking rates.htm" target="_blank">here</a>.</p>
</div>
<iframe width="1013" height="480" scrolling="yes" frameborder="no" src="https://www.google.com/fusiontables/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4%2C+col5%2C+col6%2C+col7+from+1MqhuRcIJB5EAy5b16MUOQqGU9HUn-qpCGUHqqEGY&containerId=googft-gviz-canvas"></iframe>
<div class="blurb2">
<p>To enquire or make a booking for The Farmhouse, you can either contact us directly through our <a title="Contact Us" href="../../contactus.htm" target="_blank">Contact Us</a> page.  Or you can book quickly and securely through the HomeAway app below.</p>
</div>
                             <a href="http://www.homeaway.co.uk/p1057838" rel="nofollow">
                                    <img src="http://www.homeaway.co.uk/haow/api/image/homeaway_uk/trips/1057838/tenure" alt="HomeAway Property" style="border:none; position: relative; top: 12px; left: 812px;"/>
                                </a>                          

 </div>
 </div> 

style.css

@charset "utf-8";
/* CSS Document */

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background: #4E5869;
	color: #000;
}
#bubble {  
     width: 1013px; 
     height: 700px;
     left: 6px; 
      margin: 0 auto;
     background-image: url('../images/sea board (Copy).jpg'); 
     background-repeat: no-repeat;	
    -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; 
  -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	position: relative;
	}
#bubble1 {
	position:relative;
	top: -50px;
	width: 1013px; 
	height: 2500px; 
	background: #FFFFFF; 
	position: relative; 
	border-radius: 10px; 
	box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	
}
#glance{
	position: relative;
	left: 15px;
}
	.glance1 table { border-collapse: collapse; text-align: left; } 
	.glance1 {font: normal 16px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 2px solid #00689C; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; width:250px; }
	.glance1 table td, .datagrid table th { padding: 3px 7px;}
	.glance1 table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6AABCC), color-stop(1, #216680) );background:-moz-linear-gradient( center top, #6AABCC 5%, #216680 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6AABCC', endColorstr='#216680');background-color:#6AABCC; color:#FFFFFF; font-size: 16px; font-weight: bold; border-left: 1px solid #0070A8; } 
	.glance1 table thead th:first-child { border: none; }
	.glance1 table tbody td { color: #00496B; border-left: 1px solid #E1EEF4;font-size: 16px;font-weight: normal; }
	.glance1 table tbody .alt td { background: #E1EEF4; color: #00496B; }
	.glance1 table tbody td:first-child { border-left: none; }
	.glance1 table tbody tr:last-child td { border-bottom: none; }	
#datagrid {
position: relative;
left: 50px;
}
.datagrid table { border-collapse: collapse; text-align: left; width: 900px;} 
.datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 3px solid #607CB3; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; width:900px;}
.datagrid table td, .datagrid table th { padding: 6px 10px; }
.datagrid table tbody td { color: #47778C; font-size: 12px;font-weight: normal; }
.datagrid table tbody .alt td { background: #E1EEF4; color: #30446B; }
.datagrid table tbody td:first-child { border-left: none; }
.datagrid table tbody tr:last-child td { border-bottom: none; }

.calander{
position:relative;
left:200px;
display:inline-block;
text-align: center;
}

blurb {
margin: 20px;
padding: 10px;
}
h7{
margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
font: bold 18px/200% Arial, Helvetica, sans-serif;
}	
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 15px;
	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #33CCFF;
	text-decoration: none;
	font-size: medium;
	font-weight: normal;
}
a:visited {
	color: #0033CC;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 80%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: transparent;
	margin: 50px auto 0px auto;; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {
	padding: 10px 0;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}