Hinkley

In this example below you will see how to do a Hinkley with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>Hinkley</title>
  
  
  
  
  
</head>

<body>

  <style type="text/css">
.DeptContainer {
}
.DeptTitle h1 {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.1em;
	min-height: 40px;
	padding: 0 10px 10px 10px;
	margin: 0;
	text-align: left;
}
.DeptTitleVP {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 26px;
	font-style: italic;
}
.DeptContentWrap {
	width: 990px;
	display: inline-block;
}
.DeptLeftNav {
	width: 165px;
	margin-left: 10px;
	margin-top: 10px;
	float: left;
}
.DeptLeftNav h3 {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: bold;
	padding: 0;
	margin: 0;
	line-height: 1.1em;
	font-size: 15px;
	text-align: left;
	color: #353535;
}
.DeptLeftNav ul {
	list-style-type: none;
	margin: 5px 0 20px 0;
	padding: 0;
}
.DeptLeftNav li {
	font-size: 12px;
	line-height: 1.1em;
	padding: 5px 0px;
}
.DeptLeftNav a {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-weight: normal;
	color: #252525;
	text-decoration: none;
}
.DeptLeftNav a:hover {
	color: red;
}
.DeptContentCenter {
	width: 580px;
	margin: 0 10px;
	float: left;
}
.DeptHeroWrap {
	width: 570px;
	min-height: 320px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 10px;
	clear: both;
}
#DeptHeroSliderWrap {
	width: 570px;
	margin: 0;
	padding: 0;
	float: left;
}
#DeptHeroSliderContainer {
	margin: 0;
	padding: 0;
	position: relative;
	background-color: none;
	width: 570px;
	height: 320px;
}
#DeptHeroSlider {
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	width: 570px;
	height: 320px;
	border: 1px solid #a2a2a2;
}
#DeptHeroSlider ul {
	margin: 0;
	padding: 0;
	position: absolute;
	list-style: none;
	top: 0;
	left: 0;
	margin-top: 0;
}
#DeptHeroSlider li {
	margin: 0;
	padding: 0;
	float: left;
	width: 8300px;
	height: 300px;
}
#DeptHeroSlider img {
	margin: 0;
	padding: 0;
	border: none;
}
.deptpagination {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 10px;
	left: 500px;
	list-style: none;
	height: 10px;
}
.deptpagination li {
	float: left;
	height: 15px;
	width: 15px;
	border-radius: 10px;
	background-color: #ffffff;
	margin-right: 5px;
}
.deptpagination li:hover, li.current {
	background-color: #808080;
}
.DeptCategoryTable {
	width: 570px;
	margin-top: 25px;
	margin-left: 5px;
}
.DeptCategoryTitle h4 {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	padding: 7px 15px;
	margin: 0px 0px 5px 0px;
	font-size: 17px;
	background-color: #353535;
	color: #fff;
}
.DeptCategoryBox {
	float: left;
	width: 110px;
	height: 140px;
	min-height: 140px;
	padding: 10px 14px;
	margin: 10px 0px;
	text-align: center;
}
.DeptCategoryImage {
	width: 110px;
	height: 110px;
	margin-bottom: 5px;
}
.DeptCategoryLink {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 1em;
	color: #353535!important;
	font-weight: normal!important;
	text-decoration: none;
}
.DeptCategoryLink:hover {
	color: #993333!important;
	text-decoration: none!important;
}
.DeptPromoRight {
	width: 200px;
	float: right;
	margin-right: 7px;
}
.DeptListRight {
	border-radius: 2px;
	padding: 10px 9px;
	margin-bottom: 9px;
	background-color: #fff;
	text-align: left;
	border-style: solid;
	border-width: 1px;
	border-color: #acacac;
}
.DeptListRight ul {
	padding: 10px 0px;
	margin: 0 10px 0 25px
}
.DeptListRight li {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	font-color: #353535;
	line-height: 1.3em;
	margin-bottom: 10px;
	text-align: left!important;
}
#freeshipping {
	color: green;
}
.CanadaVP {
	color: #993333!important;
}
a.CanadaVPlink {
	color: #993333!important;
}
a.CanadaVPlink:hover {
	color: #666666!important;
}
.RightVPTitle {
	font-size: 17px;
	padding-bottom: 7px;
	color: #307fc0;
	font-weight: bold;
	margin-left: 10px;
}
.RightVPsub {
	font-size: 13px;
	color: #be3d3d;
	font-weight: bold;
	margin-left: 10px;
}
.DeptListRight a {
	text-decoration: none;
}
.DeptListRight a:hover {
	color: #993333;
	cursor: pointer;
}
.DeptPromoBanner {
	width: 200px;
	margin-bottom: 15px;
}
.DeptLandingFooter {
	clear: both;
	margin-top: 20px;
	padding: 15px;
	border-top: 1px solid #ddd;
}
.DeptLandingFooter h5 {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	padding: 5px 0px 10px 0px;
	margin: 0;
}
.DeptLandingFooter p {
	font-family: Roboto, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	padding: 5px 0px 15px 0px;
	margin: 0;
	line-height: 1.3em;
}
</style>

<script type="text/javascript" src="//images.1stoplighting.com/site/common/splash/slideshow_script.js"></script>

<div class="DeptContainer">
  <div class="DeptTitle">
    <h1>Hinkley Lighting <strong class="DeptTitleVP"> - Exclusive Lifetime Warranty</strong></h1>
  </div>
  <!-- CLOSE DeptTitle-->
  <div class="DeptContentWrap">
    <div class="DeptLeftNav">
      <h3>Shop Hinkley Lighting</h3>
      <ul>
         <li><a href="/Hinkley-Lighting_Bathroom/5-0-0-81/list.aspx">Bathroom </a></li>  
         <li><a href="/Hinkley-Lighting_Ceiling-Fixtures/18-0-0-81/list.aspx">Ceiling Fixtures</a></li>
        <li><a href="/Hinkley-Lighting_Chandeliers/2-0-0-81/list.aspx">Chandeliers</a></li>      
        <li><a href="/Hinkley-Lighting_Kitchen/8-0-0-81/list.aspx">Kitchen</a></li>
           <li><a href="/Hinkley-Lighting_Landscape/13-0-0-81/list.aspx">Landscape</a></li>
<li><a href="/Hinkley-Lighting_LED-Lights/26-0-0-81/list.aspx">LED Lighting</a></li>        
        <li><a href="/Hinkley-Lighting_Outdoor/4-0-0-81/list.aspx">Outdoor Lighting</a></li>
          <li><a href="/Hinkley-Lighting_Pendants/14-0-0-81/list.aspx">Pendants</a></li>
        <li><a href="/Hinkley-Lighting_Wall-Sconces/6-0-0-81/list.aspx">Wall/Sconces</a></li>
        <li><a href="/Hinkley/0-0-0-81/list.aspx">Shop ALL Hinkley</a></li>
      </ul>  
    </div>
    
    <!-- CLOSE DeptLeftNav-->
    
    <div class="DeptContentCenter">
      <div class="DeptHeroWrap"> 
        <!--HERO SLIDER BEGINS HERE-->
        <div id="DeptHeroSliderWrap">
          <div id="DeptHeroSliderContainer">
                    <div style="overflow: hidden;" id="DeptHeroSlider">
              <ul style="left: 0px; width: 0px;">
               
                 <li><a href="/search.aspx?free_text=trellis&qd=1"><img src="//images.1stoplighting.com/site/common/dept/Hinkley-Lighting/hink-ltw-hp.jpg" alt="Lifetime Warranty"></a></li>
               
                 <li><a href="/search.aspx?free_text=dorian&qd=1"><img src="//images.1stoplighting.com/site/common/dept/Hinkley-Lighting/hink-dor-hp.jpg" alt="The Dorian Collection"></a></li>
                
              </ul>
            </div>
            <!--close DeptHeroSlider-->
            <ul id="deptpagination" class="deptpagination">
              <li class="current" onclick="slideshow.pos(0)"> <br>
              </li>
              <li class="" onclick="slideshow.pos(1)"> <br>
              </li>
            </ul>
              </div>
          <!--close DeptHeroSliderContainter--> 
        </div>
        <!--close DeptHeroSliderWrap--> 
        
        <script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
	id:'DeptHeroSlider',
	auto:7,
	resume:true,
	vertical:false,
	navid:'deptpagination',
	activeclass:'current',
	position:0,
	rewind:false,
	elastic:false

});
</script>
        
      </div>
      <!--close DeptHeroWrap--> 
      
      
      <!--DeptCategoryTable BEGINS -->
<div class="DeptCategoryTable">
  
    	<div class="DeptCategoryTitle">
        	<h4>Shop by Category</h4>
            </div>
   <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_Bathroom/5-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/5893BR.jpg/190/190/1" alt="3LT BATH"></a><br>
        <a class="DeptCategoryLink" href="/Hinkley-Lighting_Bathroom/5-0-0-81/list.aspx">Bathroom </a>
    </div>
       <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_Ceiling-Fixtures/18-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/hl_3712fb.jpg/190/190/1" alt="Rockford Chandelier"></a><br>
    <a class="DeptCategoryLink" href="/Hinkley-Lighting_Ceiling-Fixtures/18-0-0-81/list.aspx">Ceiling Fixtures</a>
    </div>
  
     <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_Chandeliers/2-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/hl_4018ol.jpg/190/190/1" alt=" Casa Chandelier"></a><br>
        <a class="DeptCategoryLink" href="/Progress-Lighting_Chandeliers/2-0-0-70/list.aspx">Chandeliers</a>
    </div>
 
  <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_Kitchen/8-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/hl_4717rb.jpg/190/190/1" alt="Tahoe Combination Fixture"></a><br>
        <a class="DeptCategoryLink" href="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/hl_4717rb.jpg/190/190/1">Kitchen Lighting</a>
    </div>
       <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_Landscape/13-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/hl_1538bz.jpg/190/190/1" alt="One Light Outdoor Spot Lamp"></a><br>
      <a class="DeptCategoryLink" href="/Hinkley-Lighting_Landscape/13-0-0-81/list.aspx">Landscape</a>
    </div>
  <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_LED-Lights/26-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/1649SK-LED.jpg/190/190/1" alt="LED "></a>
    <a class="DeptCategoryLink" href="/Hinkley-Lighting_LED-Lights/26-0-0-81/list.aspx">LED Lights</a>
    </div>

    <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_Outdoor/4-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/hl_2201sz.jpg/190/190/1" alt="Cape Cod Brass Outdoor Lantern Fixture"></a><br>
        <a class="DeptCategoryLink" href="/Hinkley-Lighting_Outdoor/4-0-0-81/list.aspx">Outdoor</a>
    </div>

  <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_Pendants/14-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/3203BR.jpg/190/190/1" alt="Hampton Three Light Chandelier"></a><br>
        <a class="DeptCategoryLink" href="/Hinkley-Lighting_Pendants/14-0-0-81/list.aspx">Pendants</a>
    </div> 

  <div class="DeptCategoryBox">
    	<a href="/Hinkley-Lighting_Wall-Sconces/6-0-0-81/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/products/4700VK.jpg/190/190/1" alt="Valley 1lt Sconce"></a><br>
      <a class="DeptCategoryLink" href="/Hinkley-Lighting_Wall-Sconces/6-0-0-81/list.aspx">Wall/Sconces</a>
    </div>
     
<div style="clear: both;">&nbsp;</div> 

    </div>
    <!--CLOSE DeptContentCenter-->
    
  </div>
  <!--CLOSE DeptContentWrap --> 
       <div class="DeptPromoRight">
      <div class="DeptListRight">
<img style="padding-top:0px; padding-left:10px;" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/hinkley-lighting.gif" alt="HinkleyLighting" align="middle" width="153px"><br><br><div class="RightVPTitle">
          Why Shop With Us?</div>
        <div class="RightVPsub"> Exclusive Hinkley Lighting Offers:</div>
         
        <ul>
                <li><a onclick="window.open('/generic_content_popout.aspx?_content_=1week60','Policies','resizable=yes,scrollbars=yes,toolbar=no,width=670,height=750');
return false;" onblur="this.blur();">1 Week Delivery or You Get $60</a>
</li>
        <li><a onclick="window.open('/content/satisfaction-guarantee/info.aspx_content_=No -Restock','Policies','resizable=yes,scrollbars=yes,toolbar=no,width=670,height=750');
return false;" onblur="this.blur();">No Restocking Fees on Returns</a>
</li>
                 <li><a onclick="window.open('/generic_content_popout.aspx?_content_=low-price-guarantee','Policies','resizable=yes,scrollbars=yes,toolbar=no,width=670,height=750');
return false;" onblur="this.blur();">Low Price Guarantee</a>
</li>
        
<li class="CanadaVP"><a class="CanadaVPlink" onclick="window.open('/generic_content_popout.aspx?_content_=canada-ad','Policies','resizable=yes,scrollbars=yes,toolbar=no,width=670,height=750');
return false;" onblur="this.blur();">Pay NO duty &amp; brokerage fees, taxes (GST/PST, etc.)</a> </li>

            </ul>
            </div><!--CLOSE DeptListRight-->
        
        
        <a href="/Hinkley-Lighting_Outdoor/4-0-0-81/list.aspx"><img style="margin-bottom: 15px;" src="//images.1stoplighting.com/site/common/dept/Hinkley-Lighting/hink-out-rn.jpg" alt="Outdoor lighting"></a>
       </div>
    <!--close deptheroright--> 
  
  
      <div class="DeptLandingFooter">
    <h5>About Hinkley Lighting</h5>
        
         <p style="line-height: 1.5em;"><a href="/content/Hinkley-Lighting/info.aspx"><img style="padding: 22px 20px 20px;" alt="Hinkley Lighting" src="//images.canadalightingexperts.com/supplier/Hinkley-Lighting/hinkley-lighting.gif" align="left"></a>
       
           <p>Founded in 1922, <strong>Hinkley Lighting</strong> has set the bar high when it comes to producing quality lighting fixtures and accessories that are both affordable and excellent in detail.</p>

           <p>  <strong>Hinkley Lighting</strong> has seen an enormous amount of growth since its start as a small company that produced and sold outdoor lanterns. Today, <strong>Hinkley Lighting</strong> produces thousands of fixtures from their traditional outdoor lanterns to contemporary multi-light chandeliers. Customers do not have to worry or stress about <strong>Hinkley </strong> products. Attention to detail is given to every product which results in the highest quality.</p>

            <p> Quality and value are two concepts that <strong>Hinkley</strong> strives for in their products and throughout their business. Starting within the family, <strong>Hinkley Lighting</strong> has stayed true to their roots and is now in their fourth generation as a family business. This company has been thriving on personal relationships and family atmosphere which has led them to success throughout the last 90 years.</p>

        <p> Not only has the family-oriented style help lead <strong>Hinkley Lighting</strong> to their continued success, but their newly crafted mantra has as well. LIFE AGLOW is <strong>Hinkley’s</strong> way of ensuring that their products become part of your family’s everyday lifestyle style. Various products can be used as accent lighting to highlight a memorable moment, or to illuminate a large occasion or room in your home. All <strong>Hinkley Lighting</strong> products can be incorporated into your rooms because of their versatility and use of multiple designs.</p>

        <p>LIFE AGLOW is also <strong>Hinkley Lighting</strong>'s way of showing their customers that they care. <strong>Hinkley</strong> focuses on various categories that showcase not only their inventiveness, but also their responsibility to their customers. <strong>Hinkley Lighting</strong> focuses on Green Technology throughout their inventory. They are constantly developing new technologies in order to make their products more energy efficient. <strong>Hinkley </strong> has upgraded their LED lights to cutting-edge high lumen output integrated solutions that will save you even more and help maximize your environment efficiency.</p>

             <p>Next, <strong>Hinkley Lighting</strong> is known for bringing lighting, design, and fashion together. Extreme detail is given to the design of every product. Whether it is the luxe finishes, the quality of the material, or the attention to artistic detail, all <strong>Hinkley</strong> products are crafted to be fashionable home furnishings. <strong>Hinkley Lighting</strong> takes into consideration the latest trends and designs fixtures that create one-of-a-kind environments in your home.</p>
<P>
<strong>Hinkley Lighting</strong> seeks the importance of caring for their customers. By establishing a relationship with <strong>Hinkley Lighting</strong>, we have been able to offer our customers exclusive benefits on all of our <strong>Hinkley</strong> products. We offer low prices guaranteed on our <strong>Hinkley Lighting</strong> fixtures. We also offer an exclusive lifetime warranty on every product by <strong>Hinkley Lighting</strong>. Refer to the top of this page to see the complete list of all our customers’ exclusive benefits. </p>
        
        </p>

    </div><!--CLOSE DeptLandingFooter --> 
</div>
<!-- CLOSE DeptContainer --></div>
  
  

</body>

</html>

Comments