Skip to content

Instantly share code, notes, and snippets.

@yasoob

yasoob/template.html Secret

Created Jan 26, 2018
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>Your New Project for Our Best Client</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*resets from YUI*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
q:before,q:after {content:;}
abbr,acronym { border:0;}
/* setup the page */
@page { margin: 0px; background: #ffffff; }
/* setup the footer */
@page { @bottom { content: flow(foot); } }
#footer { flow: static(foot); }
html{border-top: 10px solid #ffd040;}
/* some useful defaults */
th, td, caption { padding: 4px 10px 4px 5px; }
/* useful utility */
.clear { clear:both; }
/* layout */
#container { font-family: Omnes Light, Trebuchet MS, Calibri, Futura, Geneva, Tahoma; font-size: 14pt; color: #a7a7a7; position: relative; }
#logo{ position: absolute; top: 50px; left: 120px; z-index: -2; }
/* footer shenanigans! */
#footer { text-align: center; display: block; background: #376f9f;}
/* hack around the way prince handles the footer */
#footer #contain { display: inline-block; width: 700px; height: 50px; color: white;}
/* end hack */
/* colors */
.black { color: black }
/* stylin */
#header_img { align:left; position: absolute; top: 30px; left: 30px; z-index: -2;}
#main { margin: 0 30px; }
#header { font-size: 0.5em; text-align: right; margin-top: 6em; }
#header span.black { font-size: 1em; margin: 0 0.75em; }
#quote_name { margin-top: 3.5em; text-align: right; font-weight: bold; font-size: 1.5em }
#client { font-size: 0.75em; margin-top: 3em; margin-left: 0.5em;}
#client_header { font-size: 0.5em; }
#phase_details {
margin-top: 2em;
font-size: 0.6em;
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: gray;
width: 100%;
}
#phase_details th { font-size: 0.8em; padding: 10px !important; border-style: solid !important; }
#phase_details th, td {
border-width: 1px;
padding: 3px 5px;
border-top-style: none;
border-bottom-style: none;
border-left-style: solid;
border-right-style: solid;
border-color: gray;
background-color: white;
}
#phase_details tr.first td { padding-top: 10px; padding-bottom: 10px; }
#phase_details td.price { text-align: left; }
#phase_details .price_container { float: left; min-width: 30%; }
#phase_details thead .title { width: 20%; }
#phase_details thead .description { width: 60%; font-weight: bold; font-size: 1.2em; color: black;}
#phase_details thead .price { width: 20%; font-weight: bold; font-size: 1.2em; color: black;}
#phase_details tr.last { border-bottom: 1px solid gray; }
#footer #contain { text-align: center; font-size: 0.8em; }
#total_price { text-align: right; margin-right: 6.75em; margin-top: 0.5em; }
#total_price h2 { color: black; font-size: 0.6em; font-weight: bold; }
#total_price .price { margin-left: 0.75em; }
</style>
</head>
<body>
<div id="container">
<img id="header_img" style="width:70px; height: 70px;" src="https://freepythontips.files.wordpress.com/2013/07/python_logo_notext.png"/>
<span id="logo">Python Tips</span>
<div id="main">
<div id="header">
<div id="header_info black">1234 Made Up LN <span class="black">|</span> (555)-555-5555 <span class="black">|</span> example.com</div>
</div>
<h1 class="black" id="quote_name">Intermediate Python</h1>
<div id="client">
<div id="client_header">client:</div>
<p class="address black">
John Doe
</p>
</div>
<table id="phase_details">
<thead>
<tr>
<th class="description">Product</th>
<th class="price">Price</th>
</tr>
</thead>
<tr class="first black">
<td>Book Bundle</td>
<td class="price"><div class="price_container">$300</div></td>
</tr>
<tr>
<td>PDF Version</td>
<td class="price"><div class="price_container">$200</div></td>
</tr>
<tr>
<td>EPUB Version</td>
<td class="price"><div class="price_container">$100</div></td>
</tr>
<tr class="last">
<td></td><td></td>
</tr>
</table>
</div>
<div id="total_price">
<h2>TOTAL: <span class="price black">$1100</span></h2>
<img src="https://cpa.co.uk/wp-content/uploads/2017/05/paid-stamp.jpg" style="width: 140px; margin-right: -35px;">
</div>
</div>
<div id="footer">
<div id="contain">
<p>Copyright © Python Tips 2018 All right reserved.</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment