DEL Commercial Pool Page

In this example below you will see how to do a DEL Commercial Pool Page with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by californialad, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright californialad ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>DEL Commercial Pool Page</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="products-container">
	<div class="technology aop">
		<div class="heading">
			<img alt="DEL AOP" src="https://www.delozone.com/images/DEL%20aop%20logo%20reverse2k.png" />
		</div>
		<div class="description-background">
			<div class="product description description-wide">
				<p>Through the combination of Corona Discharge Technology, Germicidal UV Light, and DEL&#39;s Advanced Plasma Gap technology, the DEL AOP lineup provides Advanced Oxidation Process in truly robust units.</p>
				<ul style="margin-top: 10px;">
					<li>Destroys 99.9% of Harmful Contaminants</li>
					<li>Oxidizes&nbsp;<em>Cryptosporidium parvum</em>,&nbsp;<em>Giardia</em>, and Other Chlorine Resistant Microorganisms</li>
					<li>Reduces Chemical Demand</li>
					<li>Increases Effectiveness of Residual Sanitizers</li>
					<li>Eliminates Chemical Odors, Irriration, and Damage to Pool Systems</li>
				</ul>
				<img alt="Ozone is generated with APG ozone cells, then UV-C light is introduced to the ozonated water. The ozone and UV-C react, cretaing powerful hydroxyl radicals." src="https://www.delozone.com/images/Ozone-Diagram.png" />
			</div>
			<div class="product left">
				<div class="name">
					<img alt="DEL AOP 50" src="https://www.delozone.com/images/aop 50.png" />
				</div>
				<!-- name -->
				<div class="overflow-container">
					<div class="details">	<strong>Product Details</strong>
						<ul class="specification-list">
							<li>Patented APG Ozone Cells</li>
							<li>Germicidal UV-C Lamp</li>
							<li>240 VAC</li>
							<li>Floor or Wall Mount</li>
							<li>NSF, UL, cUL Certified</li>
							<li>CSA/NEMA 3 Metal Enclosure</li>
							<li>MDV XL Kit Available</li>
						</ul>
					</div>
					<!-- details -->
					<div class="action">
						<img src="https://www.delozone.com/images/SEC-front_web.png" /> <a class="btn dark" href="https://www.delozone.com/files/DEL-AOP-Trifold-Brochure_web.pdf" target="_blank">Brochure &raquo;</a>  <a class="btn dark" href="https://www.delozone.com/file.php?id=4-2305-01" target="_blank">Manual &raquo;</a>
					</div>
				</div>
				<!-- product -->
				<!-- action -->
			</div>
			<!-- product -->
			<div class="product right mdv">
				<div class="overflow-container">
					<div class="details">
						<h2>
							MDV FOR DEL AOP</h2>
						<p>
							<!-- name -->DEL MDV units prevent bubbles from returning to the pool, which eliminates bubble noise and visibility.</p>
						<p>An MDV (Mixing De-Gas Vessel) should be used in all indoor, covered, and vinyl-lined pools when used in conjunction with AOP units.</p>
						<p>MDV systems may also be used in outdoor applications to eliminate bubbles from your return flow.&nbsp;</p>
					</div>
					<!-- details -->
					<div class="action">
						<img class="mdv-image" height="180" src="https://www.delozone.com/images/MDV-XL_front_web.png" /> <a class="btn dark w-wide" href="https://www.delozone.com/file.php?id=4-2069-01" target="_blank">MDV XL Manual &raquo;</a>
					</div>
					<!-- action -->
				</div>
				<!-- overflow-container -->
			</div>
			<!-- product -->
		</div>
		<!-- technology -->
	</div>
	<!-- overflow-container -->
<div class="technology ozone">
	<div class="heading">
		<img alt="DEL OZONE" src="https://www.delozone.com/images/DEL%20ozone%20logo%20reverse2k.png" />
	</div>
	<div class="description-background">
		<div class="product description description-wide">
			<p>Keep staff and pool visitors safe from harm by utilizing a fitting DEL ozone sanitizing system for your commercial pool application. Our systems provide the peace of mind you need when servicing a vast amount of guests at your facility.&nbsp;</p>
			<p>	<strong>DEL System Benefits</strong>
			</p>
			<ul>
				<li>Destroys 99.9% of Harmful Contaminants</li>
				<li>Oxidizes&nbsp;<em>Cryptosporidium parvum</em>,&nbsp;<em>Giardia</em>, and Other Chlorine Resistant Microorganisms</li>
				<li>Reduces Total Chemical Demand</li>
				<li>Increases Effectiveness of Residual Sanitizers</li>
				<li>Eliminates Chemical Odors and Eye/Skin/Hair Irrirations</li>
				<li>Will Not Harm Pool Systems</li>
			</ul>
			<img class="ozone-explainer-img" src="https://www.delozone.com/images/Ozone-Diagram1.png" />
		</div>
		<div class="product right">
			<div class="name">
				<h2>
					Genesis CD-2-130</h2>
			</div>
			<!-- name -->
			<div class="overflow-container">
				<div class="details">	<strong>Standard Features</strong>
					<ul class="specification-list">
						<li>Customizable Configurations Generate 2-45 g/hr of Ozone</li>
						<li>Oxygen Flow Meter/Controller</li>
						<li>Safety Management System</li>
						<li>Ozone Generator Isolation Upon Shut-Down</li>
						<li>Dry Contacts for Remote Ambiet Ozone Monitor Shut-Down &amp; User Interlock</li>
						<li>Fault Protection</li>
						<li>Powder Coated 16 Gauge Steel Enclosure /&nbsp; NEMA-12</li>
						<li>UL, cUL, NSF Certified</li>
					</ul>
				</div>
				<!-- details -->
				<div class="action">
					<img class="abg-25-img" src="https://www.delozone.com/images/CD-7G_225px.png" />
					<div class="pn">&nbsp;</div>	<a class="btn dark" href="https://www.delozone.com/file.php?id=4-1406-01" target="_blank">Brochure &raquo;</a>  <a class="btn dark" href="https://www.delozone.com/file.php?id=4-1391-01" target="_blank">Manual &raquo;</a>
				</div>
			</div>
		</div>
		<!-- product -->
		<div class="product left">
			<div class="name">
				<h2>
					Genesis CPS Skids</h2>
			</div>
			<!-- name -->
			<div class="overflow-container">
				<div class="details">	<strong>Standard Features</strong>
					<ul class="specification-list">
						<li>Configuration Generates 25 g/hr of Ozone</li>
						<li>Oxygen Flow Meter/Controller</li>
						<li>Safety Management System</li>
						<li>Ozone Generator Isolation Upon Shut-Down</li>
						<li>Dry Contacts for Remote Ambiet Ozone Monitor Shut-Down &amp; User Interlock</li>
						<li>Fault Protection</li>
						<li>Powder Coated Steel Enclosure / NEMA-3R</li>
						<li>UL, cUL, NSF Certified</li>
					</ul>
				</div>
				<!-- details -->
				<div class="action">
					<img alt="Genesis CPS" src="https://www.delozone.com/images/CPS-8025_225px.png" />
					<div class="pn">&nbsp;</div>	<a class="btn dark" href="https://www.delozone.com/file.php?id=4-1409-01" target="_blank">Brochure &raquo;</a>  <a class="btn dark" href="https://www.delozone.com/file.php?id=4-1091-01" target="_blank">Manual &raquo;</a>
				</div>
			</div>
		</div>
		<!-- product -->
		<div class="product right">
			<div class="name">
				<h2>
					PLATINUM P-100/200</h2>
			</div>
			<!-- name -->
			<div class="overflow-container">
				<div class="details">	<strong>Standard Features</strong>
					<ul class="specification-list">
						<li>Customizable Configuratations Allow 40-150 g/hr of Ozone</li>
						<li>Touch Screen LCD Interface</li>
						<li>Automated Control System</li>
						<li>Remote Monitoring / Controlling</li>
						<li>Automated Flow Control Maintains Vacuum</li>
						<li>Thermal-Catalytic Gaseous Ozone Destructs</li>
						<li>ORP Monitor/Controllers</li>
						<li>Data Logging Abilities</li>
						<li>Wall Mount</li>
						<li>Plasma Block&reg; Technology</li>
						<li>UL, cUL, and NSF Certified</li>
					</ul>
				</div>
				<!-- details -->
				<div class="action">
					<img alt="DEL OZONE PLATINUM P-100" src="https://www.delozone.com/images/Platinum_P-100_BLACK_quarter-angle_lg.png" />
					<div class="pn">&nbsp;</div>	<a class="btn dark" href="https://www.delozone.com/file.php?id=4-2371-01" target="_blank">Brochure &raquo;</a>  <a class="btn dark" href="https://www.delozone.com/file.php?id=4-2266-01" target="_blank">Manual &raquo;</a>
				</div>
				<!-- action -->
			</div>
			<!-- overflow-container -->
			<p>&nbsp;</p>
		</div>
		<!-- product -->
		<div class="product left">
			<div class="name">
				<h2>
					Quantum CD-250/400/800/1200</h2>
			</div>
			<!-- name -->
			<div class="overflow-container">
				<div class="details">	<strong>Standard Features</strong>
					<ul class="specification-list">
						<li>Customizable Configurations Generate 250-1200 g/hr of Ozone</li>
						<li>Medium Frequency, Cold Cathode, Water-Cooled Tubes; Dielectric Ozone Cells</li>
						<li>LCD Interface&nbsp;</li>
						<li>PLC Monitor/Controller</li>
						<li>Variable Ozone Output Control</li>
						<li>Safety Management System</li>
						<li>Ozone Generator Isolation During Shut-Down</li>
						<li>Dry Contacts for Remote Ambient Ozone Monitor Shut-Down&nbsp;</li>
						<li>Fault Protection</li>
						<li>Powder-Coated Steel Enclosure / NEMA-3R&nbsp;</li>
					</ul>
				</div>
				<!-- details -->
				<div class="action">
					<img alt="DEL OZONE PLATINUM P-100" height="293" src="/images/CD-1200F_web.png" width="300" />
					<div class="pn">&nbsp;</div>	<a class="btn dark" href="https://www.delozone.com/file.php?id=4-1408-01" target="_blank">Brochure &raquo;</a>  <a class="btn dark" href="https://www.delozone.com/file.php?id=4-0860-01" target="_blank">Manual &raquo;</a>
				</div>
				<!-- action -->
			</div>
			<!-- overflow-container -->
			<p>&nbsp;</p>
		</div>
		<!-- product -->
	</div>
	<!-- description background -->
</div>
<!-- technology -->
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/californialad/del-commercial-pool-page-JOvEep */
* html .group {
	zoom: 1;
}
/* IE6 */

*:first-child+html .group {
	zoom: 1;
}
/* IE7 */

.product {
	padding: 20px;
	display: block;
	width: 433px;
	background: #FFFFFF;
	height: 380px;
	position: relative;
}
.product p {
	margin-top: 0;
}
.overflow-container {
	overflow: hidden;
	height: 350px;
}
.mdv .overflow-container {
	height: 390px;
}
.products-container {
	width: 949px;
	margin: auto;
	font-family: calibri;
	font-size: 16px;
}
.left {
	float: left;
}
.right {
	float: right;
}
.technology {
	position: relative;
	overflow: hidden;
	padding-left: 1px;
	margin-bottom: 60px;
}
.technology.aop {
	background: #00a67e;
}
.technology.ozone {
	background: #09aac3;
}
.technology.uv-c {
	background: #f68409;
	background-image: linear-gradient(to bottom, #f9a617, #f78b0c);
}
.heading {
	padding: 30px;
}
.aop .heading {
	background: #00a67e;
	background-image: linear-gradient(#23ba6e, #06a97c);
}
.uv-c .heading {
	background-image: linear-gradient(to bottom, #f9a617, #f78b0c);
}
.ozone .heading {
	background: #09aac3;
	background-image: linear-gradient(to bottom, #34c6ce, #10aec5);
}
.heading img {
	height: 35px;
}
.description {
	padding: 20px;
	line-height: 18px;
}

.description-wide {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  height: 260px;
}
.description-wide ul {
  width: 40%;
  display: inline-block;
  float: left;
  margin-top: 0;
}
.description-wide .ozone-explainer-img {
  display: relative;
  right: 0;
  float: right;
}
.aop .description {
	background: #e5fff9;
	border-right: 1px solid #00a67e;
}
.ozone .description {
	background: #caeaef;
}
.uv-c .description {
	background: #faeacd;
}
.description {
	display: block;
}
.description-background {
	position: relative;
	display: block;
	overflow: hidden;
}
.aop .description-background {
	background-color: #e5fff9;
}
.ozone .description-background {
	background-color: #caeaef;
}
.uv-c .description-background {
	background-color: #faeacd;
}
.uv-c .description {
	border-right: 1px solid #f68409;
	border-bottom: 1px solid #f68409;
}
.product h2 {
	margin-top: 0;
	font-size: 22px;
}
.aop .product {
	border-bottom: 1px solid #14b175;
	border-right: 1px solid #14b175;
}
.ozone .product {
	border-bottom: 1px solid #09aac3;
	border-right: 1px solid #09aac3;
}
.uv-c .product {
	border-bottom: 1px solid #f68409;
	border-right: 1px solid #f68409;
}
.details {
	width: 50%;
	float: right;
	font-size: 14px;
}
.details li,
.details p {
	line-height: 16px;
}
.name {
	display: block;
	color: #003634;
	height: 30px;
	padding-bottom: 20px;
	position: relative;
	z-index: 30;
}
.name img {
	height: 35px;
}
.specification-list {
	padding-left: 25px;
	padding-top: 0;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 20px;
}
.specification-list li {
	margin-bottom: 5px;
}
.btn {
	display: block;
	float: left;
	margin-right: 1px;
	padding: 5px;
	width: 85px;
	text-decoration: none;
	text-align: Center;
	color: black;
	transition: border-color .1s ease-in-out;
}
.btn.w-auto {
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
}
.aop .btn {
	border: 1px solid #14b175;
	background: #c7eddb;
}
.aop .dark {
	background: #14b175;
	background-image: linear-gradient(#23ba6e, #06a97c);
	color: white;
}
.uv-c .btn {
	border: 1px solid #f68409;
	background: #fde7c4;
}
.uv-c .dark {
	color: white;
	background: #f68409;
	background-image: linear-gradient(to bottom, #f9a617, #f78b0c);
}
.ozone .btn {
	border: 1px solid #09aac3;
	background: #caeaef;
}
.ozone .btn.dark {
	background-image: linear-gradient(to bottom, #34c6ce, #10aec5);
}
.uv-c .btn:hover {
	border-color: #005385;
}
.ozone .btn:hover {
	border-color: #422102;
}
.aop .btn:hover {
	border-color: #003634;
}
.aop .dark:hover {
	background-image: linear-gradient(to top, #23ba6e, #06a97c);
}
.ozone .dark:hover {
	background-image: linear-gradient(to top, #34c6ce, #10aec5);
}
.uv-c .dark:hover {
	background-image: linear-gradient(to top, #f9a617, #f78b0c);
}
.ozone .dark {
	color: white;
	background: #09aac3;
}
.pn {
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 14px;
	margin-top: 10px;
}
.pnsmall {
	font-size: 14px;
	line-height: 14px;
}
.btn.w-wide {
	width: 183px;
	margin-top: 1px;
}
.action {
	width: 48%;
	float: left;
	text-align: center;
	height: 240px;
}
.action img {
	margin: auto;
	display: block;
	max-height: 250px;
	max-width: 100%;
	width: auto;
	margin-bottom: 20px;
}
.accessory-title {
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 5px;
}
.accessory {
	display: block;
	background: #e5e5e5;
	padding: 20px;
	padding-bottom: 0px;
	margin: -20px;
	margin-top: 30px;
	position: relative;
}
.mdv {
	background: #e5e5e5;
}
.accessory:after {
	content: "";
	display: table;
	clear: both;
}
.accessory .btn {
	margin-right: 20px;
}
.accessory img {
	display: block;
	float: left;
	position: absolute;
	bottom: 0;
	margin-top: -40px;
	margin-right: 10px;
}
.accessory-desc {
	margin-left: 100px;
}
.accessory p {
	margin-top: 10px;
	font-size: 14px;
}
.accessory-pn {
	padding: 5px;
	font-size: 14px;
}
.accessory-title {
	font-size: 24px;
	padding-top: 0;
	margin-top: 0;
}
.action .mdv-image {
	max-height: 400px;
	height: 300px;
	max-width: 300px;
}
.desc-explainer-img {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 0 1px 0px;
}
.btn.disabled,
.btn.disabled:hover {
	background: #ccc;
	border: 1px solid #666;
	color: #666;
}

/*Downloaded from https://www.codeseek.co/californialad/del-commercial-pool-page-JOvEep */
var aop = {
  "name": "aop",
  "description": "Through the combination of Corona Discharge Technology, Germicidal UV Light, and DEL's Advanced Plasma Gap technology, the DEL AOP lineup provides Advanced Oxidation Process in truly robust units. DEL AOP systems destroy Cryptosporidium parvum, Giardia, and other chlorine resistant microorganisms.",
  "units" : {
    "AOP25" : {
      "name" : "AOP 25",
      "specs": ["Advanced Plasma Gap ozone cells", "Low pressure/high output UV-C germicidal lamps",'3/4" PVC socket','Inlet and Outlet 3/4" PVC Unions',"110-240 VAC, 50/60Hz, 1╬Ž, 0.3 Amps","Hydroxyl free radical injection via variable-speed compatible Mazzei venturi injector","Operates under vacuum for effectiveness and safety","Mixing Degas Vessel available","Wall or post mounted"],
      "brochure url" : "https://www.delozone.com/file.php?id=4-2540-01",
      "manual url" : "https://www.delozone.com/file.php?id=4-2535-01"
    }
  }
}

document.getElementById("aop-list").appendChild( createList(aop.units.AOP25.specs) );
  
function createList(list) {
  var completeList = document.createElement("UL");
  completeList.className += "specification-list";
  for(var i = 0; i < list.length; i++) {
    var newText = document.createTextNode( list[i] );
    var newLI = document.createElement("LI");
    newLI.appendChild(newText);
    completeList.appendChild(newLI);
  }
  return completeList;
}

Comments