Skip to content

Instantly share code, notes, and snippets.

Created January 21, 2014 18:42
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/8545681 to your computer and use it in GitHub Desktop.
Save anonymous/8545681 to your computer and use it in GitHub Desktop.
I'd like my page on wordpress to display just like this which is currently just standard HTML / CSS @ http://www.texasenergyessentials.com/
<?php
/*
Template Name: Books
*/
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>texas</title>
<style type="text/css">
body {
margin: 70px 0 0;
background: #e1e1dd;
color: #8A8A8A;
font: normal 62.5%/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.bkwrapper {
margin: 15px auto;
padding: 25px 0px;
width: 960px;
border-radius: 5px;
background: #FFF;
}
.mast {
margin: 0 auto;
padding: 25px 0px;
width: 960px;
}
.masttext h1{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 42px;
position: absolute;
top: 90px;
width: 600px;
color: #FF994D;
margin-left: 20px;
}
.masttext p{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 23px;
font-style: italic;
color: #fff;
padding-left: 26px;
position: absolute;
top: 145px;
}
h3 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h4 {
margin: 0 0 12px 0;
color: #33383D;
font-size: 1.8em;
}
.bodyheader {
margin: 25px;
font-size: 1.8em;
width: 700px;
}
.bodytext {
margin: 25px;
font-size: 1.5em;
width: 700px;
}
.booktext {
margin: 0;
font-size: 1.5em;
width: 700px;
}
.bookimg {
float: left;
margin: 0 40px 15px 40px;
}
.buttonimg {
float: left;
clear: both;
margin-left: 20px;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
*zoom: 1;
}
footer[role="contentinfo"] {
background: #333;
border-radius: 5px;
}
footer[role="contentinfo"] {
border-top: 1px solid #ededed;
clear: both;
font-size: 12px;
line-height: 2;
max-width: 920px;
margin-top: 24px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="mast">
<img src="images/mastheadbook.jpg">
<div class="masttext"> <h1>Texas Energy Essentials</h1><p>News, insight, and analysis.</p> </div>
</div>
<div class="bkwrapper group">
<h4 class="bodyheader">Bunch of text from Mr. Anderson</h4>
<p class="bodytext">Thomas A. Anderson is a man living two lives. By day he is an average computer programmer and by night a hacker known as Neo. Neo has always questioned his reality, but the truth is far beyond his imagination. Neo finds himself targeted by the police when he is contacted by Morpheus, a legendary computer hacker branded a terrorist by the government. Morpheus awakens Neo to the real world, a ravaged wasteland where most of humanity have been captured by a race of machines that live off of the humans' body heat and electrochemical energy and who imprison their minds within an artificial reality known as the Matrix. As a rebel against the machines, Neo must return to the Matrix and confront the agents: super-powerful computer programs devoted to snuffing out Neo and the entire human rebellion.</p>
<p class="bodytext">During the year 1999, a man named Thomas Anderson (also known as Neo), lives an ordinary life. A software techie by day and a computer hacker by night, he sits alone at home by his monitor, waiting for a sign, a signal - from what or whom he doesn't know - until one night, a mysterious woman named Trinity seeks him out and introduces him to that faceless character he has been waiting for: Morpheus. A messiah of sorts, Morpheus presents Neo with the truth about his world by shedding light on the dark secrets that have troubled him for so long.</p>
</div>
<div class="bkwrapper group">
<img class="bookimg" src="images/book1softcover.png" >
<img class="buttonimg" src="images/download.png" >
<h4>Book Title 1</h4>
<p class="booktext">Gastropub fingerstache artisan, next level pop-up Tonx cray flannel Intelligentsia Cosby sweater cred. Pickled pop-up bicycle rights Wes Anderson, Neutra Blue Bottle next level. Chia forage gastropub cliche, fingerstache ethnic paleo put a bird on it Pinterest authentic fap swag skateboard American Apparel cray narwhal. Etsy occupy hoodie Tumblr. Cardigan umami typewriter locavore, beard twee Odd Future. Gluten-free aesthetic literally, ugh wayfarers pork belly farm-to-table. Art party 3 wolf moon, Etsy authentic retro kale chips salvia raw.</p>
</div>
<div class="bkwrapper group">
<img class="bookimg" src="images/book1softcover.png" >
<img class="buttonimg" src="images/download.png" >
<h4>Book Title 1</h4>
<p class="booktext">Gastropub fingerstache artisan, next level pop-up Tonx cray flannel Intelligentsia Cosby sweater cred. Pickled pop-up bicycle rights Wes Anderson, Neutra Blue Bottle next level. Chia forage gastropub cliche, fingerstache ethnic paleo put a bird on it Pinterest authentic fap swag skateboard American Apparel cray narwhal. Etsy occupy hoodie Tumblr. Cardigan umami typewriter locavore, beard twee Odd Future. Gluten-free aesthetic literally, ugh wayfarers pork belly farm-to-table. Art party 3 wolf moon, Etsy authentic retro kale chips salvia raw.</p>
</div>
<div class="bkwrapper group">
<img class="bookimg" src="images/book1softcover.png" >
<img class="buttonimg" src="images/download.png" >
<h4>Book Title 1</h4>
<p class="booktext">Gastropub fingerstache artisan, next level pop-up Tonx cray flannel Intelligentsia Cosby sweater cred. Pickled pop-up bicycle rights Wes Anderson, Neutra Blue Bottle next level. Chia forage gastropub cliche, fingerstache ethnic paleo put a bird on it Pinterest authentic fap swag skateboard American Apparel cray narwhal. Etsy occupy hoodie Tumblr. Cardigan umami typewriter locavore, beard twee Odd Future. Gluten-free aesthetic literally, ugh wayfarers pork belly farm-to-table. Art party 3 wolf moon, Etsy authentic retro kale chips salvia raw.</p>
</div>
<footer id="colophon" role="contentinfo">
<div class="copyright">Copyright © 2013 Steptoe &amp; Johnson PLLC. All rights reserved. </div>
<div class="disclaimer">
This Blog has been prepared by Steptoe &amp; Johnson PLLC for informational purposes only and the content contained herein is not offered as legal advice. This is an advertisement and the information contained herein is not intended to create, and receipt thereof does not establish a lawyer-client relationship. Internet subscribers and online readers should not act upon the information contained herein without seeking professional counsel. Do not send information to us until you speak with one of our lawyers and obtain authorization to do so. Unsolicited information that you send to us will not be treated as confidential and may be disclosed to others. Please contact Steptoe &amp; Johnson PLLC at (304) 933-8000 if you have any questions.<br><br>THIS IS AN ADVERTISEMENT.
</div>
</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment