 |
| Get pulling! |
Here's mine: http://robsbootstraplab.blogspot.co.nz/p/bootstrap-example.html
Using previous ideas: http://robstestinglab.blogspot.co.nz/p/webpage-templates.html
Step 1
Set up blogspot site like this: http://robstestinglab.blogspot.co.nz/p/bootstrap-instructions.html
It makes it so have completely empty webpage.
Step 2
Can now make the webpages just by putting them in the html bit of composing a page.
Step 3
Here's a good website for instructions:
https://www.w3schools.com/bootstrap/default.asp
Step 4
Converting code to a format for blogspot:
http://codeformatter.blogspot.co.nz/
Step 5
Take the templates below and tinker. This is based on the w3schools template.
Here's the big framework and CSS stuff
OK, here's where change fonts and colours and stuff.For fonts, change Lato and Montserrat
Get the fonts from google fonts.
Is pretty easy - just search for hash, or color, and you'll pretty much find all of them.
color01 - neutral eg ffffff, ink 303030
color02 - slight zing eg d0d0f0
color03 - contrast - eg 6060a0, #f4511e
<!-- ..........................................................................PAGE SETUP ....................... -->
<!--DOCTYPE html-->
<html lang="en">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Company Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"></link>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
/*Setups ........................................................................................................ */
html {
font-size:62.5%
}
html,body {
overflow-y:auto;
}
/*FONTS ........................................................................................................ */
h1 {
font: 7.2rem/1.25 Montserrat;
text-align:center;
}
h2 {
font: 3.6rem/1.25 Montserrat;
text-align:center;
}
h3,h4,h5,h6 {
font: 2.4rem/1.25 Montserrat;
text-align:center;
}
body, p, li {
font: 1.8rem/1.5 Lato, sans-serif;
}
/*h1,h2,h3,h4,h5,h6,p,ol,ul,li,blockquote,q,li,nav,i,b,u,em,strong,small,button,img,a,code,form,input,label,textarea,nav,option,select,details,summary,table,thead,th,tbody,tr,td,tfoot,*/
/*COLORS ......................................................................................................... */
/*
color01 - neutral eg ffffff, ink 303030
color02 - slight zing eg d0d0f0
color03 - contrast - eg 6060a0, #f4511e
*/
.jumbotron {
color: #ffffff;
}
.bg-color01 {
background-color: #ffffff;
}
.bg-color01 h1, .bg-color01 h2,.bg-color01 h3,.bg-color01 h4, .bg-color01 h5, .bg-color01 h6, .bg-color01 .glyphicon {
color: #6060a0;
}
.bg-color01 p, .bg-color01 li {
color:#303030;
}
.bg-color02 {
background-color: #d0d0f0;
}
.bg-color02 h1, .bg-color02 h2,.bg-color02 h3,.bg-color02 h4, .bg-color02 h5, .bg-color02 h6, .bg-color02 .glyphicon {
color: #6060a0;
}
.bg-color02 p, .bg-color02 li {
color:#303030;
}
.bg-color03 {
background-color: #6060a0;
color: #ffffff;
}
.bg-color03 h1, .bg-color03 h2,.bg-color03 h3,.bg-color03 h4, .bg-color03 h5, .bg-color03 h6, .bg-color03 .glyphicon {
color: #ffffff;
}
.bg-color03 p, .bg-color03 li {
color:#ffffff;
}
.navbar, .navbar-default .navbar-toggle, .navbar li a, .navbar .navbar-brand {
background-color: #6060a0;
color: #ffffff !important;
border-color: transparent;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #6060a0 !important;
background-color: #ffffff !important;
}
.btn-color03 {
border: 1px solid #6060a0;
background-color: #6060a0;
color: #ffffff;
}
.btn-color03:hover {
border: 1px solid #6060a0;
background-color: #ffffff !important;
color: #6060a0;
}
.panel {
border: 1px solid #6060a0;
}
.panel-heading, .panel-heading h1, .panel-heading h2, .panel-heading h3, .panel-heading h4, .panel-heading h5, .panel-heading h6 {
background-color: #6060a0 !important;
color: #ffffff !important;
}
.panel-body {
}
.panel-footer {
background-color: white !important;
}
.panel-footer h4, .panel-footer h5 {
color: #303030;
}
/*SECTIONS AND BITS ...............................................................................................*/
.jumbotron {
margin:0;
background-size:cover;
text-shadow: 2px 2px 5px #000;
padding: 3rem;
}
.jumbotron .btn {
text-shadow: 0px 0px 0px #000;
}
.greybox {
background:rgba(5,5,5,0.5);
border-radius:1rem;
margin:auto;
float:none;
padding:1.6rem;
}
.navbar, .navbar li a {
margin-bottom: 0;
z-index: 9999;
border: 0;
font-size: 1.2rem !important;
line-height: 1.25 !important;
letter-spacing: .25rem;
border-radius: 0;
}
.btn {
margin: 1.6rem 0;
word-wrap:normal;
white-space:normal;
}
.btn-centered {
display:block;
margin: 1.6rem auto;
}
.thumbnail {
padding: 0 0 1.6rem 0;
border: none;
border-radius: 0;
text-align:center;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: .5rem;
}
.panel {
border-radius:0 !important;
transition: box-shadow 0.5s;
}
.panel:hover {
box-shadow: 1.6rem 0px 2.4rem rgba(0,0,0, .5);
}
.panel-heading {
padding: 2.4rem;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer h3 {
font-size: 3.2rem;
}
.panel-footer h4, .panel-footer h5 {
font-size: 1.6rem;
}
.logo-small {
font-size: 3.5rem;
}
.logo {
font-size: 12.5rem;
}
.item h4, .item h5 {
font-size: 1.25rem;
line-height: 1.375rem;
font-weight: 400;
font-style: italic;
margin: 4.5rem 0;
}
.item span {
font-style: normal;
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 1.5rem 0;
}
.btn-lg {
width: 100%;
margin-bottom: 2rem;
}
}
/*MODAL STUFF --------------------- */
@media screen and (max-width: 480px) {
.modal-dialog {
width: 100vw;
max-width:480px;
}
}
.modal-header, h5, .close {
background-color: #6060a0;
color: #fff !important;
text-align: center;
font-size: 2rem;
}
.modal-header p {
background-color: #6060a0;
color: #fff !important;
text-align: center;
}
.modal-header, .modal-body {
padding: 2.5rem 3rem;
}
/*POLAROID STUFF --------------------- */
div.polaroidContainer {padding-left:1%;}
div.polaroid {
width: 90%;
padding: 1.25rem 1.25rem 1.25rem 1.25rem;
border: 1px solid #BFBFBF;
background-color: white;
box-shadow: 1.25rem 1.25rem 1.25rem #aaaaaa;
}
.polaroid img {border: 1px solid #BFBFBF;}
div.rotate_right {
float: left;
-ms-transform: rotate(4deg); /* IE 9 */
-webkit-transform: rotate(4deg); /* Safari */
transform: rotate(4deg);
}
div.rotate_left {
float: left;
-ms-transform: rotate(-4deg); /* IE 9 */
-webkit-transform: rotate(-4deg); /* Safari */
transform: rotate(-4deg);
}
.caption {
text-align:center;
font-family:"Comic Sans MS", cursive, sans-serif;
background-color:white;
}
.float_right {float:right;max-width:460px;}
.float_left {float:left;max-width:460px;}
</style>
<!-- ......................................................................... PAGE START ............................. -->
<body data-offset="60" data-spy="scroll" data-target=".navbar">
<section id="myPage" />
<!-- END ........................................................................................................................................................................................................ -->
</body>
</html>
Here's the Menu
Note the red button. Easy to change. <!-- .......................................................................... MENU ............................. -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a style="background-color:red;" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
Here's the Jumbotron
Change the css greybox to change box, can change background image here.Also contains the modal button here.
<!-- ......................................................................... JUMBOTRON ............................. -->
<div class="jumbotron text-center" style="background-image: linear-gradient(rgba(255, 255, 255, 1),rgba(0, 0, 0, 0)),url(https://robsmuckingabout.files.wordpress.com/2016/05/maxresdefault.jpg);">
<div class="container-fluid">
<div class="greybox col-sm-8">
<h2>Want to rule the world?</h2>
<h4>Then you'll want to read this.<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.<br />
All of this without any extra work, money or effort.<br /></h4>
<!-- Used to open the Modal -->
<button class="btn btn-color03 btn-lg" data-target="#myModal" data-toggle="modal">Oh yes please! I'd love a World Domination Blueprint. Send it to me now!</button>
</div>
</div>
</div>
<!-- close off the jumbotron container -->
Here's the Modal Screen
This little thing was an absolute bastard to get working.The script is just if you're scrolling to within the same page.
More for testing a funnel, really.
The html overflow is so scrolls to right place on mobile. (maybe should be in CSS bit?) The width bit is so fits properly on mobile too.
The button to get here is on the jumbotron screen.
Good to have this immediately after the jumbotron screen in the code.
Can only have one modal per webpage, but I think it's okay to have multiple buttons to get there.
<!-- ............................................................................. Modal content .................. -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<p>You're so close! Fill in this form for your blueprint</p>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<div class="polaroidContainer">
<div class="polaroid rotate_left">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Leonardo_da_Vinci_-_Virgin_of_the_Rocks_%28detail%29_-_WGA12696.jpg" style="transform: scaleX(-1);" width="100%" />
<p class="caption">Look at this!</p>
</div>
</div>
</div>
<div class="col-sm-8">
<h4>Enter your first name and email to get your awesome <strong>WORLD DOMINATION BLUEPRINT</strong> in your inbox today.</h4>
<h4>You could be taking over the world before dinnertime!</h4>
<form role="form">
<div class="form-group">
<input class="form-control" id="psw" placeholder="First name" type="text" />
</div>
<div class="form-group">
<input class="form-control" id="usrname" placeholder="Best email" type="text" />
</div>
<button class="btn btn-block btn-color03" href="" data-dismiss="modal">Yes! Send me my blueprint!</button>
<button class="btn btn-block" data-dismiss="modal" type="submit" data-target="#myPage">Nah. I don't mind having a crap life</button>
</form>
<small>Spam is inconsiderate and just bad manners.</small><br />
<small>If I'm ever accidentally impolite, please don't worry, it's easy to unsubscribe</small><br />
</div>
</div>
</div>
<div class="modal-footer">Need <a href="#">help?</a><br /></div>
<!--script so closing modal takes to #Optin_TY - only need this if link to destination within page - http://jsfiddle.net/mbv02x0L/1/ -->
<script>
jQuery(function($) {
$('#myModal').on('hidden.bs.modal', function (e) {
$('html, body').animate({
scrollTop: $("#Optin_TY").offset().top
}, 2000);
})
});
</script>
</div>
</div>
</div>
<!-- end of modal stuff -->
Here's the 3 part choice
Blah <!-- ..................................................... 3 Part Choice ............................................. -->
<div class="bg-color01">
<div class="container text-center" id="services">
<h2>What step do you need help with?</h2>
<h4>
Select the one you want</h4>
<br />
<div class="row">
<div class="col-sm-4">
<div class="polaroidContainer">
<div class="polaroid rotate_left">
<img src="https://robsmuckingabout.files.wordpress.com/2016/05/old-map-sea-monster-sailing-ship-africa-madagascar-colin-and-linda-mckie.jpg" width="100%" />
<p class="caption">Which way am I supposed to be going?</p>
</div>
</div>
<h4>Plotting</h4>
<p>Difficulty figuring out what you want to do?
<button class="btn btn-color03 btn-lg" type="submit">Yes! Send me my blueprint!</button>
</div>
<div class="col-sm-4">
<div class="polaroidContainer">
<div class="polaroid rotate_right">
<img src="https://robsmuckingabout.files.wordpress.com/2016/05/atlantis2bspace2bshuttle2blast2blaunch2bby2bnasa2b20112bby2bcool2bwallpapers2b2528192529.jpg" style="transform: scaleX(-1);" width="100%" />
<p class="caption">Off we go!</p>
</div>
</div>
<h4>Launch</h4>
<p>Need some help getting started?</p>
<button class="btn btn-lg btn-color03" type="submit">Can I have a pants kicking please?</button>
</div>
<div class="col-sm-4">
<div class="polaroidContainer">
<div class="polaroid rotate_left">
<img src="https://robsmuckingabout.files.wordpress.com/2016/05/hqdefault.jpg" width="100%" />
<p class="caption">Pesky Varmints</p>
</div>
</div>
<h4>Follow Through</h4>
<p>Here's how to overcome the locals...</p>
<button class="btn btn-block btn-color03" type="submit">Woohoo! Pass me the dynamite!</button>
</div>
</div>
<br /><br />
</div>
</div>
Here's the Home or Sales Page with 2 colours
Blah <!-- .............................................Sales Content with polaroid ...................................... -->
<div class="bg-color01">
<div class="container" id="about">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<h2>How I Made My Life 42,678% Awesomer -</h2>
<h3>and here's how you can too…</h3>
<br />
<div class="polaroidContainer float_right">
<div class="polaroid rotate_right">
<img src="https://robsmuckingabout.files.wordpress.com/2016/07/robert-angelo.jpg" style="transform: scaleX(-1);" width="100%" />
<p class="caption">Off we go!</p>
</div>
</div>
<p>Hi, I’m: Rob Angelo, an ordinary Dad with a good job and a family I love very much.</p>
<p>But for years I struggled with dozens of projects that I had online, but never actually producing anything.</p>
<p>This was crap. I would listen to a podcast or webinar, have a massive surge of energy and enthusiasm, have lots of fun bashing away at it, finish a “working copy” that functionally did everything that I wanted it to, and then… nothing.</p>
<p>It would sit on my computer doing nothing.</p>
<p>I would look at it occasionally, feel guilty, know I’d spent months on it, and realize it had all been a big fat waste of time.</p>
<p>My low point? I remember one morning…</p>
<p>I said to myself “enough”.</p>
<br />
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ............................................................. on different colour....................... -->
<div class="bg-color02">
<div class="container">
<br />
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<h2>So what <em>is</em> the answer, exactly?</h2>
<br />
<br />
<div class="polaroidContainer float_left">
<div class="polaroid rotate_right">
<img src="https://robsmuckingabout.files.wordpress.com/2016/05/top-secret-1076813_960_720.jpg" width="100%" />
<p class="caption">Don't tell anybody...</p>
</div>
</div>
<p>Then I discovered the process of Discovering Out Loud, a system where I have to state a result in advance, then explicitly state my success’s and failures online so others can replicate it.</p>
<p>MOA…</p>
<p>Now I complete the tasks that actually produce measurable results because firstly I’m actually going for results, secondly it’s okay to have failures because they’re documented and worked around, and thirdly I’ll be held accountable.</p>
<p>Now, does this mean I have a lambourghini, sit on the beach drinking alcoholic beverages with umbrellas and fruit, and have bikini clad girls lusting after the chance to massage my feet?</p>
<p>Well, actually, yes it does.</p>
<p>If you would like to get similar results in your life, just click on the link below, and you’ll get a fasttrack worksheet that’ll really clarify this down for you.</p>
<br /><button class="btn btn-lg btn-color03 btn-centered">I'd love a whole bunch of awesome, thanks</button>
<br />
</div>
</div>
</div>
</div>
<!-- ...........................................................................Footer ......................... -->
<footer class="container-fluid text-center bg-color03">
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<a href="#myPage" title="To Top"><span class="glyphicon glyphicon-chevron-up"></span>Top</a>
</div>
<div class="col-sm-4">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com/" title="Visit w3schools">www.w3schools.com</a></p>
</div>
</div>
</footer>
Here's the OPTIN PAGE
<!-- ................................................................... BLOG/OPTIN PAGE ............................. -->
<!-- .............................................................................. MENU ............................. -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a style="background-color:red;" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<!-- ................................................................... BLOG/OPTIN CONTENT .......................... -->
<div class="bg-color02">
<div class="container">
<h2>How to Avoid a Crappy Poo-bum Life</h2>
<h3>with absolutely no effort…</h3>
<br />
<div class="row">
<!-- ............................................ Article/webcopy .......................... -->
<div class="col-sm-9">
<div class="float_right">
<div class="thumbnail">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/The_Incredible_Silk_route_and_the_Horrible_weather.jpg/1280px-The_Incredible_Silk_route_and_the_Horrible_weather.jpg" style="transform: scaleX(-1);" width="100%" />
<p class="caption">This ain't the path you want...</p>
</div>
</div>
<p>Life can be pretty good, most of the time.</p>
<p>But sometimes, despite our best efforts, a big bowl of shit soup is served to us.</p>
<p>A times like this, we need a gentle solution that gets us back on track.</p>
<p>Here's a proven 4 minute template that just works.</p>
<p>With it, you'll discover:</p>
<ul>
<li>What’s really important to you – and what you MUST ignore…</li>
<li>How to destroy the “legions of the Mind Suckers” that will assuredly get in your way…</li>
<li>What the True Path is, and how to dynamite it – FAST!</li>
</ul>
<p>Just enter your name and email, apply the template, and you’ll be back to Planet Conquering within the next 4 minutes…</p>
</div>
<div class="col-sm-3 bg-color01">
<h4>Get your <strong>FEEL-GOOD-inator Template</strong> in your inbox today,</h4>
<p>and you could be kicking bottom again before dinnertime...</p>
<form role="form">
<div class="form-group">
<input class="form-control" id="psw" placeholder="First name" type="text" />
</div>
<div class="form-group">
<input class="form-control" id="usrname" placeholder="Best email" type="text" />
</div>
<button class="btn btn-block btn-color03" href="" data-dismiss="modal">Lordy Yes I need this template!</button>
<button class="btn btn-block" data-dismiss="modal" type="submit" data-target="#myPage">No thank you. I really don't mind having a crap life</button>
</form>
<small><abbr title="Spam is inconsiderate and just bad manners. If I'm ever accidentally impolite, please don't worry, it's easy to unsubscribe.">Privacy Policy</abbr></small><br />
<small><abbr title="Not only will you get the template, you'll also get a really cool few bonuses in your email. But of course if you don't like them, just yell at me and I'll take them back...">and some Extra Help</abbr></small><br />
</div>
</div>
</div>
</div>
<!-- ....................................................................... FOOTER ............................. -->
<footer class="container-fluid text-center bg-color03">
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<a href="#myPage" title="To Top"><span class="glyphicon glyphicon-chevron-up"></span>Top</a>
</div>
<div class="col-sm-4">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com/" title="Visit w3schools">www.w3schools.com</a></p>
</div>
</div>
</footer>
Here's Services with icons, Pictures, Sales boxes and contact page
Oops, I think I put in some sections twice. Oh well. <!-- ...................................................................... EXTRA BITS .............................. -->
<!-- ...................................................................... PORTFOLIO .............................. -->
<div class="bg-color02">
<div class="container text-center" id="services">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br />
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
Lorem ipsum dolor sit amet..<br />
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
Lorem ipsum dolor sit amet..<br />
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
Lorem ipsum dolor sit amet..<br />
</div>
</div>
<br /><br />
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
Lorem ipsum dolor sit amet..<br />
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
Lorem ipsum dolor sit amet..<br />
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4>HARD WORK</h4>
Lorem ipsum dolor sit amet..<br />
</div>
</div>
</div>
</div>
<!-- ............................................................................. PORTFOLIO ....................... -->
<div class="bg-color02">
<div class="container text-center" id="portfolio">
<h2>
Portfolio</h2>
<br />
<h4>
What we have created</h4>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img alt="Paris" height="300" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/BoglenTerrier5monthsIMG1106.JPG" width="400" />
<strong>Paris</strong><br />
Yes, we built Paris<br />
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img alt="New York" height="300" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/BoglenTerrier5monthsIMG1106.JPG" width="400" />
<strong>New York</strong><br />
We built New York<br />
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img alt="San Francisco" height="300" src="https://upload.wikimedia.org/wikipedia/commons/5/5b/BoglenTerrier5monthsIMG1106.JPG" width="400" />
<strong>San Francisco</strong><br />
Yes, San Fran is ours<br />
</div>
</div>
</div>
<br />
</div>
</div>
<!-- ......................................................................... PRICING ................ -->
<div class="bg-color02">
<div class="container" id="pricing">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works for you</h4>
</div>
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h2>Basic</h2>
</div>
<div class="panel-body">
<strong>20</strong> Lorem<br />
<strong>15</strong> Ipsum<br />
<strong>5</strong> Dolor<br />
<strong>2</strong> Sit<br />
<strong>Endless</strong> Amet<br />
</div>
<div class="panel-footer">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-color03 btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h2>Pro</h2>
</div>
<div class="panel-body">
<strong>50</strong> Lorem<br />
<strong>25</strong> Ipsum<br />
<strong>10</strong> Dolor<br />
<strong>5</strong> Sit<br />
<strong>Endless</strong> Amet<br />
</div>
<div class="panel-footer">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-color03 btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h2>Premium</h2>
</div>
<div class="panel-body">
<strong>100</strong> Lorem<br />
<strong>50</strong> Ipsum<br />
<strong>25</strong> Dolor<br />
<strong>10</strong> Sit<br />
<strong>Endless</strong> Amet<br />
</div>
<div class="panel-footer">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ...................................................................... CONTACT ............. -->
<div class="bg-color02">
<div class="container" id="contact">
<h2 class="text-center">
CONTACT</h2>
<div class="row">
<div class="col-sm-5">
Contact us and we'll get back to you within 24 hours.<br />
<span class="glyphicon glyphicon-map-marker"></span> Chicago, US<br />
<span class="glyphicon glyphicon-phone"></span> +00 1515151515<br />
<span class="glyphicon glyphicon-envelope"></span> myemail@something.com<br />
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" required="" type="text" />
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" required="" type="email" />
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br />
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ....................................................................... FOOTER ............................. -->
<footer class="container-fluid text-center bg-color03">
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<a href="#myPage" title="To Top"><span class="glyphicon glyphicon-chevron-up"></span>Top</a>
</div>
<div class="col-sm-4">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com/" title="Visit w3schools">www.w3schools.com</a></p>
</div>
</div>
</footer>
Here's the Thank You Page
To be honest, this is a bit mediocre. Basically the jumbotron with header and footer, but it has the facebook button so is useful.Note the id at the top, too, for jumping to.
<!-- .............................................................OPTIN THANK YOU PAGE .......................... -->
<div id="Optin_TY"></div>
<!-- .................................................................... MENU ............................. -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
<li><a href="#pricing">PRICING</a></li>
<li><a style="background-color:red;" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<!-- .................................................................... JUMBOTRON ................................ -->
<div class="jumbotron text-center" style="background:linear-gradient(rgba(80,80,80,0.5),rgba(80,80,80,0.5)),url(https://upload.wikimedia.org/wikipedia/commons/8/8c/Antares_Orb-3_explosion_upon_impact_after_failure.jpg);background-size: cover; min-height:80vh">
<div class="container text-center">
<h1>Welcome to the secret WDB club!</h1>
<h4>Because you're now a member of our secret club I'd like to give you some other cool free stuff<br />
Click on the share button below for the WDB, say something like "This looks kind of cool. Check it out", and you'll get access to "The World Domination Blueprint FastTrack Video Guide" for free.<br />
</h4>
<!-- Used to open the SB -->
<a class="btn btn-primary btn-lg"><i class="fa fa-facebook-square"></i> Share on Facebook</a><br /><br />
<a class="btn btn-default btn-lg" href="#myPage"><span class="glyphicons glyphicons-ice-cream-no"></span> No, it's okay, I don't mind being deprived.</a>
</div>
</div>
<!-- .................................................................... FOOTER ................................ -->
<footer class="container-fluid text-center bg-color03">
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<a href="#myPage" title="To Top"><span class="glyphicon glyphicon-chevron-up"></span>Top</a>
</div>
<div class="col-sm-4">
<p>Bootstrap Theme Made By <a href="https://www.w3schools.com/" title="Visit w3schools">www.w3schools.com</a></p>
</div>
</div>
</footer>
No comments:
Post a Comment