Besa

In this example below you will see how to do a Besa 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>Besa</title>
  
  
  
  
  
</head>

<body>

  <html>

<head>

  <meta charset="UTF-8">

  <title>Besa - Free Shipping</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.canadalightingexperts.com/site/common/splash/slideshow_script.js"></script>
<div class="DeptContainer">
  <div class="DeptTitle">
    <h1>Besa Lighting: <a class="CanadaVPlink">Pay NO duty, Brokerage Fees & Taxes</h1>
  </div>
  <!-- CLOSE DeptTitle-->

  <div class="DeptContentWrap">
    <div class="DeptLeftNav">
      <h3>Shop Besa Lighting</h3>
      <ul>
<li><a href="/Besa-Lighting_Architectural-Track/3-0-0-68/list.aspx">Architectural Track</a></li> 
         <li><a href="/Besa-Lighting_Bathroom/5-0-0-147/list.aspx">Bathroom Lighting</a></li>
         <li><a href="/Besa-Lighting_Ceiling-Fixtures/18-0-0-147/list.aspx">Ceiling Fixtures</a></li>
        <li><a href="/Besa-Lighting_Chandeliers/2-0-0-147/list.aspx">Chandeliers</a></li>
          
<li><a href="/Besa-Lighting_LED-Lights/26-0-0-147/list.aspx">LED Lighting</a></li>         
        <li><a href="Besa-Lighting_Outdoor/4-0-0-147/list.aspx">Outdoor Lighting</a></li>
          <li><a href="/Besa-Lighting_Pendants/14-0-0-147/list.aspx">Pendants</a></li>
        <li><a href="/Besa-Lighting_Wall-Sconces/6-0-0-147/list.aspx">Wall/Sconces</a></li>
        <li><a href="/Besa-Lighting/0-0-0-147/list.aspx">Shop ALL Besa</a></ul>
<h3>Monorail Lighting</h3>
      <ul>
        <li><a href="/Besa_Architectural-Track_Monorail-Systems/3-386-0-68/list.aspx">Monorail Lighting<br></a>
        </li>
        <li><a href="/Besa_Architectural-Track_Accessories/3-387-0-68/list.aspx"> Monorail Accessories</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="/content/handcrafted-glass-process/info.aspx"><img src="//images.canadalightingexperts.com/site/common/dept/Besa-Lighting/besa-festive-hero.jpg" alt="Unique Handcrafted Glass"></a></li>
                <li><a target="_blank" href="/search.aspx?free_text=SCOPE&qd=1"><img src="//images.canadalightingexperts.com/site/common/dept/Besa-Lighting/besa-nor-hp.jpg" alt="No Restocking fees on returns"></a></li>
                
                <li><a href="/search.aspx?free_text=peri&qd=1"><img src="//images.canadalightingexperts.com/site/common/dept/Besa-Lighting/besa-style-hp.jpg" alt="A style for everyone"></a></li>
              </ul>
            </div>
            <!--close DeptHeroSlider-->
           <ul id="deptpagination" class="deptpagination">
              <li class="" onclick="slideshow.pos(0)"> <br>
              </li>
              <li class="" onclick="slideshow.pos(1)"> <br>
              </li>
              <li class="current" onclick="slideshow.pos(2)"> <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="/Besa-Lighting_Architectural-Track/3-0-0-68/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Besa-Lighting/products/3SW-1779CE-BR-SQ.jpg/190/190/1" alt="Mia collection"></a><br><a class="DeptCategoryLink" href="/Besa-Lighting_Architectural-Track/3-0-0-68/list.aspx">Architectural Track</a>
    </div>

  <div class="DeptCategoryBox">
    	<a href="/Besa-Lighting_Bathroom/5-0-0-147/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/site/common/dept/Besa-Lighting/Category-Images/ceiling.jpg" alt=""></a><br>
     <a class="DeptCategoryLink" href="/Besa-Lighting_Bathroom/5-0-0-147/list.aspx">Bathroom Lighting</a>
    </div>
 <div class="DeptCategoryBox">
    	<a href="/Besa-Lighting_Ceiling-Fixtures/18-0-0-68/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Besa-Lighting/products/943052C.jpg/190/190/1" alt="Pahu Collection"></a><br>    <a class="DeptCategoryLink" href="/Besa-Lighting_Ceiling-Fixtures/18-0-0-68/list.aspx">Ceiling Fixtures</a>
    </div> 
     <div class="DeptCategoryBox">
    	<a href="/Besa-Lighting_Chandeliers/2-0-0-147/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Besa-Lighting/products/5LP-565818-BR.jpg/190/190/1" alt="Palla-5 collection"></a><br><a class="DeptCategoryLink" href="/Besa-Lighting_Chandeliers/2-0-0-147/list.aspx">Chandeliers</a>
    </div>

  <div class="DeptCategoryBox">
    	<a href="Besa-Lighting_LED-Lights/26-0-0-147/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/site/common/dept/Besa-Lighting/Category-Images/LED.jpg" alt="Franceasi-The Franceasi collection"></a><br><a class="DeptCategoryLink" href="Besa-Lighting_LED-Lights/26-0-0-147/list.aspx">LED Lights</a>
    </div>
    <div class="DeptCategoryBox">
    	<a href="/Besa-Lighting_Outdoor/4-0-0-147/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/site/common/dept/Besa-Lighting/Category-Images/outdoor.jpg" alt="Portman-The Portman Collection"></a><br>
        <a class="DeptCategoryLink" href="/Besa-Lighting_Outdoor/4-0-0-147/list.aspx">Outdoor</a>
    </div>

 
 <div class="DeptCategoryBox">
    	<a href="/lighting/14-455-628-0-404140/Besa-Lighting_Pahu-4----Low-Voltage-One-Light-Pendant-Pahu-4-Pendant-1.htm"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Besa-Lighting/products/X-A44007-BR.jpg/190/190/1" alt="Pahu Collection"></a><br>
        <a class="DeptCategoryLink" href="/Besa-Lighting_Pendants/14-0-0-147/list.aspx">Pendants</a>
    </div> 
  <div class="DeptCategoryBox">
    	<a href="/Besa-Lighting_Wall-Sconces/6-0-0-147/list.aspx"><img class="DeptCategoryImage" src="//images.canadalightingexperts.com/supplier/Besa-Lighting/products/4WZ-412241-BR.jpg/190/190/1" alt="Metro Park-The Metro Park Collection"></a><br>
      <a class="DeptCategoryLink" href="/Besa-Lighting_Wall-Sconces/6-0-0-147/list.aspx">Wall/Sconces</a>
    </div>

<div style="clear: both;">&nbsp;</div> 
   </div>
<div style="clear: both;" class="DeptCategoryTitle">

        <h4>Shop by Glass Color</h4>
                </div>
    <div class="DeptCategoryBox">
    	<a href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=white"><img class="DeptCategoryImage" src="//images.1stoplighting.com/site/common/dept/Besa-Lighting/Category-Images/White.jpg" alt="White"></a><br>
        <a class="DeptCategoryLink" href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=white">White</a>
    </div>
    
    <div class="DeptCategoryBox">
    	<a href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=amber/orange"><img class="DeptCategoryImage" src="//images.1stoplighting.com/site/common/dept/Besa-Lighting/Category-Images/Amber.jpg" alt="Amber/Orange"></a><br><a class="DeptCategoryLink" href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=amber/orange">Amber/Orange</a>
    </div>
    
    <div class="DeptCategoryBox">
    	<a href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=blue"><img class="DeptCategoryImage" src="//images.1stoplighting.com/site/common/dept/Besa-Lighting/Category-Images/Blue.jpg" alt="Blue"></a><br>
        <a class="DeptCategoryLink" href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=blue">Blue</a>
    </div>
    
    <div class="DeptCategoryBox">
    	<a href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=black"><img class="DeptCategoryImage" src="//images.1stoplighting.com/site/common/dept/Besa-Lighting/Category-Images/Black.jpg" alt="Black"></a><br>
        <a class="DeptCategoryLink" href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=black">Black</a>
    </div>
    
    <div class="DeptCategoryBox">
    	<a href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=red"><img class="DeptCategoryImage" src="//images.1stoplighting.com/site/common/dept/Besa-Lighting/Category-Images/Red.jpg" alt="Red"></a><br>
        <a class="DeptCategoryLink" href="/Besa_Pendants/14-0-0-68/list.aspx?baseglass=red">Red</a>
    </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/Besa-Lighting/besa-lighting.gif" alt="Besa Lighting" align="middle" width="153px"><br><br><div class="RightVPTitle">
          Why Shop With Us?</div>
        <div class="RightVPsub"> Exclusive Besa Lighting Offers:</div>

        <ul>
            <li><a onclick="window.open('/generic_content_popout.aspx?_content_=lifetimewarranty','Policies','resizable=yes,scrollbars=yes,toolbar=no,width=670,height=750');
return false;" onblur="this.blur();">Lifetime Warranty</a>
</li>
                      <li><a onclick="window.open('/content/returns/info.aspx?_content_=lifetimewarranty','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_=150-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>

           <li id="freeshipping"><strong>FREE SHIPPING on every order</strong></li>

            </ul>
            </div><!--CLOSE DeptListRight-->

       <a href="/lighting/14-455-628-0-404117/Besa-Lighting_Hoppi----Low-Voltage-One-Light-Pendant-Hoppi-Pendant-1.htm"><img style="margin-bottom: 15px;" src="//images.1stoplighting.com/site/common/dept/Besa-Lighting/besa-festive-rn.jpg" alt="Hoppi Mini pendant"></a>
        <a href="/lighting/14-455-628-0-404021/Besa-Lighting_Amelia-6---One-Light-Pendant-Amelia-6-Pendant-1.htm"><img style="margin-bottom: 15px;" src="//images.1stoplighting.com/site/common/dept/Besa-Lighting/rightnav-amelia.jpg" alt="Amelia Pendant"></a>
       </div>
    <!--close deptheroright--> 

      <div class="DeptLandingFooter">
    <h5>About Besa Lighting</h5>

         <p style="line-height: 1.5em;"><a href="/Besa-Lighting/0-0-0-147/list.aspx"><img style="padding: 22px 20px 20px;" alt="Besa Lighting" src="//images.canadalightingexperts.com/supplier/Besa-Lighting/besa-lighting.gif" align="left"></a>

         <p><strong>Besa Lighting</strong> has been the leading designer and manufacturer of unique and beautiful handcrafted glass lighting for over 20 years. <strong>Besa</strong> offers a large range of lighting solutions for both residential and commercial customers.</p>
  <p><strong>Besa Lighting</strong> was founded in 1986 in Central Ohio and has since pushed the boundaries of design by featuring products made from handcrafted glass imported from all around the world. The company’s glass décor successfully finds the balance of artful and purposeful.<br><br><strong>Why buy <a href="/Besa-Lighting/0-0-0-68/list.aspx">Besa Lighting</a>?</strong><br>Choice equals solutions, and <strong>Besa</strong> offers a lot of choice. <strong>Besa</strong> offers a great variety lighting solutions in design, function and affordability. From vibrant <a href="/Besa-Lighting_Pendants/14-0-0-68/list.aspx">pendant lighting</a>, to contemporary <a href="/Besa-Lighting_Outdoor/4-0-0-68/list.aspx">exterior lighting</a>, to functional <em>and</em> stylish <a href="/Besa-Lighting_Ceiling-Fixtures/18-0-0-68/list.aspx">ceiling fixtures</a> and <a href="/Besa_Wall-Sconces/6-0-0-68/list.aspx">wall sconces</a>. </p>
  <p><strong>Besa Lighting</strong> combines traditional methods, passed down from generation to generation, experienced glass-makers and skilled craftsmen to add real value, beauty and uniqueness to every <strong>Besa</strong> product. Choosing <strong>Besa</strong> is choosing one of the best.</p>
    <p>In addition to variety and value, <strong>Besa Lighting</strong> products are energy efficient, another part of Besa’s commitment to achieve only the highest level of quality and service.</p>
  <p>It is <strong>Besa Lighting’s</strong> goal to offer choice in lighting solutions. A unique reality of choice; not a selection of options that are derivatives of each other. “Choice” is <strong>Besa</strong>’s word, and they certainly show their commitment to offering a wide variety of artistic, functional and fashionable designs.</p>
  <p>One of <strong>Besa</strong>’s unique products is the<a href="/lighting/14-455-628-0-302536/Besa_Tutu-Single-Pendant-1BC-412168-SN.htm">Tutu Single Pendant</a>. This contemporary design comes in several beautiful options of shades, such as: Amber Cloud, Garnet, Blue Cloud and Ceylon. Another one of <strong>Besa</strong>’s more stand-out designs is the <a href="/lighting/14-114-842-0-104292/Besa_Juli-Single-Pendant-1Jx-Juli.htm">Juli Single Pendant</a>. The Juli Single Pendant blends contemporary aesthetics with timeless elegance to display a drop of style that you will only find with <strong>Besa</strong>. It is also available in the stunning colors that the Tutu is available in.</p>
    <p>The pendants that <strong>Besa Lighting</strong> offers are available as <a href="/Besa_Pendants_Multi-light-Pendants/14-446-0-68/list.aspx">multi-light pendants</a> which add more illumination and more style to any room. Multi-light pendants are a perfect touch for hanging above a dining area, kitchen island or even bar area</p>
    <p><strong>Besa Lighting</strong> stands out as one of the most fascinating manufacturers. Their dedication and commitment to making each and every one of their products unique and valuable makes them an excellent decision when searching for the lighting you need. For affordable, unique, valuable and stylish lighting, look no further than <strong>Besa Lighting</strong>.</p>

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

</body>

</html>
  
  

</body>

</html>

Comments