A Pen by JonnyNinetoes

Thumbnail
This awesome code was written by JonnyNineToes, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JonnyNineToes ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  JonnyNinetoes</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <article class="container">
	<header>
		<div class="row">
			<div class="one-half column center">
				<!-- <img src="https://141nh047iozd1l75s22eer06-wpengine.netdna-ssl.com/wp-content/uploads/2014/05/Fake-Bright-Green-Logo_Horz-v2-760.png" alt="Customer Logo"> -->&nbsp; </div>
			<div class="one-half column center"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRHYS0wR0wmI42bCehl7bJ_vHuPckAX_ejfrb2dWUKE75z_iZo6A" alt="[corporate_name] Logo"></div>
		</div>
		<div class="row">
			<div class="one-half column center">
				<table>
					<tbody>
						<tr>
							<th>Customer Name:</th>
							<td>[company_name]</td>
						</tr>
						<tr>
							<th>Service Term:</th>
							<td>[service_term]</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="one-half column center">
				<p class="red">Budgetary Quote</p>
				<table>
					<caption>Quote Valid for 30 Days</caption>
					<tbody>
						<tr>
							<th>Date:</th>
							<td>[date]</td>
						</tr>
						<tr>
							<th>Prepared By:</th>
							<td>[data_tam_name]</td>
						</tr>
						<tr>
							<th>Title:</th>
							<td>[data_tam_title]</td>
						</tr>
						<tr>
							<th>Telephone:</th>
							<td>[data_tam_phone]</td>
						</tr>
						<tr>
							<th>Email:</th>
							<td><a href="mailto:[data_tam_email]">[data_tam_email]</a></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</header>
	<section>
		<table id="tblFinalBreakdown">
			<thead>
				<tr>
					<th>Location</th>
					<th>Product Description</th>
					<th>Bandwidth</th>
					<th>Current MRC</th>
					<th>MRC 36 Mos</th>
					<th>NRC</th>
				</tr>
			</thead>
			<tbody>

				<tr>
					<td>1234 Some Street</td>
					<td>Dedicated Internet</td>
					<td>50M</td>
					<td class="currency">1078.00</td>
					<td class="currency">-</td>
					<td class="currency">-</td>
				</tr>
				<tr>
					<td>1234 Some Street</td>
					<td>Dedicated Internet</td>
					<td>100M</td>
					<td class="currency">-</td>
					<td class="currency">998.00</td>
					<td class="currency">-</td>
				</tr>

			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" class="invisible"></td>
					<td class="currency">1078.00</td>
					<td class="currency">998.00</td>
					<td class="currency">-</td>
				</tr>
				<tr>
					<td colspan="4" class="invisible">Current vs. Net MRC Change:</td>
					<td class="currency">80.00</td>
					<td class="invisible"></td>
				</tr>
			</tfoot>
		</table>
	</section>
	<section>
		<ul>
			<li>MRC = Monthly Recurring Charges</li>
			<li>NRC = Non-Recurring Charges</li>
			<li>Totals do not include any taxes, fees, or surcharges.</li>
			<li>Current Term (36 months) expires <strong>[expiration_date]</strong>.</li>
			<li>Ethernet equipment fees: $24.95 per month, per site.</li>
		</ul>
	</section>
	<footer>
		<p><small>Proprietary and Confidential</small></p>
	</footer>
</article>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/JonnyNineToes/a-pen-by-jonnyninetoes-qoxOaQ */
article.container {
	position: relative;
	margin: 1in auto;
}

article header img {
	display: block;	
	margin: 0 auto;
	width: auto;
	height: auto;
	max-width: 362px;
	max-height: 150px;
}

article header table {
	display: inline-block;
	border-collapse: collapse;
/* 	font-size: 75%; */
}

article header table caption {
	font-style: italic;
}

article header table th {
	text-align: right;
	font-style: italic;
}

article header table th, 
article header table td {
	padding: 3px;
	border-bottom: none;
} 

#tblFinalBreakdown {
	width: 100%;
	border-collapse: collapse;
	font-size: 80%;
}

#tblFinalBreakdown th {
	color: #FFF;
	background-color: #00F;
	border: 1px solid #00F;
}

#tblFinalBreakdown td {
	font-weight: normal;
	border: 1px solid #E1E1E1;
}

#tblFinalBreakdown th, #tblFinalBreakdown td {
	padding: 4px 15px;
} 

#tblFinalBreakdown td.invisible {
	border: none;
	text-align: right;
}

#tblFinalBreakdown td.currency:before {
    content: "$";
	position: absolute;
	left: 15px;
}

#tblFinalBreakdown td.currency {
	text-align: right;
	position: relative;
}

footer p {
	text-align: center;
}

.red {
	color: #F00;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0;
}

.center {
	text-align: center;
}

Comments