yasoob/template.html Secret

## template.html
<!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>
	<!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>