<!-- ..................................................................................................................
Still to do (and Op Cost Criteria)...
Done - finish menu (mostly)
Done - Leadbox - nah, just have separate page like unbounce/hubspot
Done - 3 columns / 4 columns - convert to inline block and responsive media query - Nah - it'll do for now.
Done - Blog page - responsive media
Done - Landing Page - responsive media query - inline block - ?on homepage
Done - colour bar
Done - footer bar - part of colour bar
side bar widget
Done - Smooth scroll
Optin bit
Quizes?
blog page into widgets - Put this all into a widget above and below so does blog page automatically
home page delete widgets and do as below
get all onto Robs Laboratory
.................................................................................................................. -->
<style>footer, .post-footer {display:none;height:0;overflow:hidden;}</style>
<div id="top"></div>
<!--.......................................................Menu.............................................................................-->
<div class="menu"><div class="colorBar"><div class="colorContent">
<div class="row clearfix">
<div class="col-1-2">
<h2>World Domination Blueprint</h2>
</div>
<!--http://howtocenterincss.com/-->
<div class="col-1-2">
<div class="mItem">
<a href="#optin">Link</a>
</div>
<div class="mItem">
<a href="#optin">Link</a>
</div>
<div class="mItem">
<a href="#optin">Link</a>
</div>
<div class="mItem">
<a href="#optin">Link</a>
</div>
<div class="mItem">
<a href="#optin">Link</a>
</div>
<div class="mItem">
<a href="#optin">Link</a>
</div>
<div class="mItem">
<a href="#optin">Link</a>
</div>
<div class="mItem">
<a href="#optin">Link</a>
</div>
</div>
</div></div></div></div>
<!--.......................................................Menu.............................................................................-->
<!--.......................................................Creating image at top ...........................................................-->
<div class="bigPicture"><div class="bigBackground"><div id="bigImg"><table class="bigBox"><div class="bigTxt">
<h2>Wanna Rule The World?</h2>
Then you should click here.<br />
<br />
You'll get the World Domination Blueprint, a step by step plan that gives you the easiest path to getting more money (up to $30 billion more per year - but who's counting?), having a richer family life (Woohoo! Fun Times!) and making work a squillion times easier while being doubly productive. All of this without any extra work, money or effort.<br />
<br />
<button href="#optin">Oh yes please! I'd love a World Domination Blueprint. Send it to me now!</button>
</div></table></div></div></div>
<!--.......................................................Creating image at top ...........................................................-->
<br />
<h2>What step would you like help with?</h2>
<br />
<!--Thirds Columns .......................................................................................................... -->
<div class="row clearfix">
<!-- GAP ........................................................................... -->
<div class="col-1-2"><div class="boxBorder">
<h2>Plotting</h2>
<img style="width:95%; height:auto; margin:auto;" src="https://robsmuckingabout.files.wordpress.com/2016/05/old-map-sea-monster-sailing-ship-africa-madagascar-colin-and-linda-mckie.jpg" /><br />
Difficulty figuring out what you want to do?<br />
<br />
<button><a href="#optin">I'd love the Chart Plotter, thanks</a></button>
<br />
</div></div>
<!-- GAP ........................................................................... -->
<div class="col-1-4"><div class="boxBorder">
<h2>Launch</h2>
<img style="width:95%; height:auto; margin:auto;" src="https://robsmuckingabout.files.wordpress.com/2016/05/atlantis2bspace2bshuttle2blast2blaunch2bby2bnasa2b20112bby2bcool2bwallpapers2b2528192529.jpg" /><br />
Need some help getting started?<br />
<br />
<button><a href="#optin">Can I have a Pants Kicking, please?</a></button>
<br />
</div></div>
<!-- GAP ........................................................................... -->
<div class="col-1-4"><div class="boxBorder">
<h2>Follow through</h2>
<img style="width:95%; height:auto; margin:auto;" src="https://robsmuckingabout.files.wordpress.com/2016/05/hqdefault.jpg" /><br />
Here's how to overcome the locals...<br />
<br />
<button><a href="#optin">Woohoo! Pass me the Dynamite!</a></button>
<br />
</div></div>
<!-- GAP ........................................................................... -->
</div>
<!--Thirds Columns .......................................................................................................... -->
<h2>Wanna Rule The World?</h2>
Then you should click here.<br />
<br />
You'll get the World Domination Blueprint, a step by step plan that gives you the easiest path to getting more money (up to $30 billion more per year - but who's counting?), having a richer family life (Woohoo! Fun Times!) and making work a squillion times easier while being doubly productive. All of this without any extra work, money or effort.<br />
<br />
<button><a href="#optin">Oh yes please! I'd love a World Domination Blueprint. Send it to me now!</a></button>
<div id="bottom"></div>
<!--....................................................... Colorbar .................................................-->
<div class="colorBar"><div class="colorContent">
<h2>blah blah blah</h2>
This is awesome weather...
Yup. Looking like a good day.
</div></div>
<!--....................................................... ColoFrbar .................................................-->
<div id="optin"></div>
<!--.......................................................Blog and Landing Page ..........................................................-->
Giveaway of the Week
<h2>The World Domination Blueprint - a really simple way to make your life heaps better...</h2>
<div class="row clearfix">
<!-- GAP ........................................................................... -->
<div class="col-3-4"><div class="boxNoborder">
<img style="width:50%; height:auto;float:right;" src="https://robsmuckingabout.files.wordpress.com/2016/05/atlantis2bspace2bshuttle2blast2blaunch2bby2bnasa2b20112bby2bcool2bwallpapers2b2528192529.jpg" />
This is a big deal, really. I'm going to put a lot of words in here to sort out the spacing and stuff. Yuppity doo dah.
<br />
This is a big deal, really. I'm going to put a lot of words in here to sort out the spacing and stuff. Yuppity doo dah.
<ul>
<li>I like cheese</li>
<li>Yup. Definitely like cheese</li>
<li>I'm pretty darn sure that I like cheese</li>
</ul>
<br />
<br />
<button><a href="#bottom">Can I have a Pants Kicking, please?</a></button>
<br />
</div></div>
<!-- GAP ........................................................................... -->
<div class="col-1-4"><div class="boxNoborder">
<h2>Launch</h2>
<img style="width:50%; height:auto; float:right;" src="https://robsmuckingabout.files.wordpress.com/2016/05/atlantis2bspace2bshuttle2blast2blaunch2bby2bnasa2b20112bby2bcool2bwallpapers2b2528192529.jpg" />
This is a big deal, really.
<ul>
<li>I like cheese</li>
<li>I like cheese</li>
<li>I like cheese</li>
</ul>
<br />
<br />
<button><a href="#optin">Can I have a Pants Kicking, please?</a></button>
<br />
<br />
<button><a href="#top">I don't need any help today, thanks</a></button>
</div></div>
<!-- GAP ........................................................................... -->
</div>
<br /><br /><br /><br /><br />
<hr>
<!--.......................................................Landing Page ....................................................................-->
<!--.......................................................Styles and stuff ...........................................................-->
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scaleable=no, width=device-width" />
<link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans" rel="stylesheet" />
<style>
/*font above is from google fonts */
/* WIDTH OF PAGE */
.post-outer, .colorContent {
max-width: 71.25rem;
margin: auto;
}
/* FONT SIZE and COLOUR and PAGE BACKGROUND */
body, li, a, .content-outer, #main.main.section, .description, .main-inner .columns, .content-fauxcolumn-outer, .main, .section, .region-inner, .content-inner, .post-body, .post-body img, .post-body .tr-caption-container, #allHolder, .Profile img, .Image img, .BlogList .item-thumbnail img, .tabs-inner .widget li a, .post-footer, a:hover, a:link, button {
font-family: 'Open Sans', sans-serif;
font-size: 1.5rem;
line-height: 1.5;
color: #646a70;
text-align: left;
vertical-lign: middle;
box-sizing: border-box;
background: #ffffff none repeat scroll top left;
padding: 0 0 0 0;
border-color: #000000;
}
.colorBar, .colorContent {background-color:#58c1f2;}
.colorContent, .colorContent h2 {color:white;}
/* LINKS */
a:link {color:#58c1f2}
a:hover {color:blue}
button {
border: 2px solid #58c1f2;
padding: 0 1.5rem;
border-radius:5em;
background: transparent;
color: white;
text-align: center;
vertical-align: middle;
text-decoration: none;
}
button a:link {
background: transparent;
text-decoration: none;
}
button a:hover, button:hover {
background: #58c1f2;
color:white;
text-decoration: none;
}
/* HEADERS */
h1, h1.title, h1.title a, h2, h2.title, h3.post-title.entry-title {
font-family: 'Merriweather', serif;
color: #58c1f2;
font-size: 2rem;
line-height: 1.5;
font-weight: normal;
text-align: center;
vertical-align: middle;
}
/* boring stuff */
html, body, .content-outer, .description, #main.main.section, .content-fauxcolumn-outer, .main, .section, .region-inner, .content-inner, #allHolder {
min-width: 0%;
max-width: 100%;
_width: 100%;
margin:0;
padding:0;
overflow:hidden;
}
html {overflow-y: scroll; font-size: 16px;}
.content {
position: relative;
word-wrap: break-word;
}
.colorBar {
box-sizing: border-box;
width: 100vw;
margin-left: calc(-50vw + 50%);
display: block;
}
.colorContent {
box-sizing: border-box;
margin:auto;
}
.boxBorder {
box-sizing: border-box;
margin: .5rem;
border: 1px solid red;
padding: 1rem;
}
.boxNoborder {
box-sizing: border-box;
margin: .5rem;
border: 1px solid green;
padding: 1rem;
}
/* hide header .title, h3.post-title.entry-title, header, #main.main.section */
#navbar, div.header-outer, div.post-header, h3.post-title.entry-title {box-sizing: border-box; overflow:hidden; height: 0px; background:red; margin: 0;padding:0;}
/* hide footer */
.blog-feeds, .blog-pager {box-sizing: border-box; overflow:hidden; height: 0px; background:red; margin: 0;padding:0;}
</style>
<!--.......................................................Styles and stuff ...........................................................-->
<!--.......................................................Menu.............................................................................-->
<!-- http://stackoverflow.com/questions/5540485/how-to-make-an-inline-block-element-fill-the-remainder-of-the-line -->
<!-- http://radiatingstar.com/distribute-divs-images-equaly-line -->
<!--floats http://stackoverflow.com/questions/5540485/how-to-make-an-inline-block-element-fill-the-remainder-of-the-line -->
<style>
.menu {
width: 98%;
text-align: center;
line-height:0;
vertical-align: middle;
padding: 0rem;
}
.mBox {
min-width: 320px;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.mTitle {
vertical-align: middle;
}
.mItems {
vertical-align: middle;
}
.mItem {
display:inline-block;
text-align:right;
vertical-align: middle;
}
.mItem a:link {
vertical-align: middle;
font-size: 1rem;
text-decoration: none;
color:contrast;
padding: .25rem .5rem;
margin: auto auto;
border-radius: 1rem;
border: 2px solid black;
}
.mItem a:hover {
vertical-align: middle;
font-size: 1rem;
padding: .25rem .5rem;
border-radius: 1rem;
border: 2px solid white;
}
</style>
<!--.......................................................Menu.............................................................................-->
<!--.......................................................Creating image at top ...........................................................-->
<style>
/*http://stackoverflow.com/questions/31391459/how-can-i-expand-a-child-div-to-100-screen-width-if-the-container-div-is-smalle */
/*https://css-tricks.com/design-considerations-text-images/ */
/*http://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents */
.bigPicture{
box-sizing: border-box;
}
.bigBackground {
box-sizing: border-box;
width: 100vw;
margin-left: calc(-50vw + 50%);
display: inline-block;
}
#bigImg {
box-sizing: border-box;
position: relative;
background:
linear-gradient(
rgba(0, 0, 255, 0.5),
rgba(0, 255, 0, 0.5)),
url(https://robsmuckingabout.files.wordpress.com/2016/05/maxresdefault.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: top;
min-height: 600px;
padding: 50px 2px;
}
.bigTxt {
box-sizing:border-box;
margin: auto;
padding: 4rem;
max-width: 1000px;
padding: 1rem;
background-color: yellow;
background: rgba(0, 0, 0, 0.5);
border-radius: 1em;
color: white;
text-align: center;
line-height: 1.4;
}
</style>
<!--.......................................................Creating image at top ...........................................................-->
<!--.......................................................Thirds and columns Boxes ........................................................-->
<style>
/* mobile stuff */
/* mobile resets */
*,
*:before,
*:after {
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* grid */
.row {
margin: 0px;
margin-bottom: 0px;
}
.row:last-child {
margin-bottom: 0;
}
[class*="col-"] {
padding: 0px;
}
/* Off mobile */
@media all and ( min-width: 600px ) {
/* Columns */
.col-2-3 {
float: left;
width: 66.66%;
}
.col-1-2 {
float: left;
width: 50%;
}
.col-1-3 {
float: left;
width: 33.33%;
}
.col-3-4 {
float: left;
width: 75%;
}
.col-1-4 {
float: left;
width: 25%;
}
.col-1-8 {
float: left;
width: 12.5%;
}
/* float */
.floatleft {
width:50%;
padding: 2%;
float:left;
}
.floatright {
width:50%;
padding: 2%;
float:right;
}
}
/* On mobile */
@media all and (max-width:599px) {
.floatleft {
width:100%;
}
.floatright {
width:100%;
}
}
</style>
<!--.......................................................Thirds and columns Boxes ........................................................-->
<!--....................................................... Smooth scroll ................................................................-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js> <http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js> <http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
<!-- http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery --> <http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery> <http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery>
<!-- end smoothscroll -->
<!--....................................................... Smooth scroll ................................................................-->
Blogspot Template
Crikey they're ugly.
Blogspot really worked hard to make their templates as ugly as possible.
Wouldn't it be lovely if there was a way to make the templates beautiful, quickly and easily? In, say, 10 minutes?
Here's how...
1. use simple template, use single columns, single widgets in footer
2. Paste this in to page...
Subscribe to:
Posts (Atom)
No comments:
Post a Comment