JSFiddle - React, Tailwind, and code Playground
by David_Knowles
HTML
<div class="wrapper-splash">
<div class="ban-rotate">
<img src="Custom/Themes/smashburger/Inserts/Images/smash-splash.jpg" alt="banner" />
</div>
<div class="top_category clearfix">
<ul class="categories">
<li class="clearfix">
<div class="top-inf">
<h3><a href="http://smashburger.adamsmcclure.com/UserContentStart.aspx?category=14">MENU</a></h3>
</div>
<div class="img-mid">
<a href="http://smashburger.adamsmcclure.com/UserContentStart.aspx?category=14"><img src="http://smashburger.adamsmcclure.com/Custom/Themes/smashburger/Inserts/Images/SMB_SplashpageVectorImages_0113_02[4].jpg" /></a>
</div>
<div class="description">
<span class="bold">
</span>
<p class="inf">
Need menus? Order your market specific menus here.
</p>
</div>
</li>
<li class="clearfix">
<div class="top-inf">
<h3>GRAND OPENING BOX</h3>
</div>
<div class="img-mid">
<img src="http://smashburger.adamsmcclure.com/Custom/Themes/smashburger/Inserts/Images/SMB_SplashpageVectorImages_0113_03[4].jpg" />
</div>
<div class="description">
<p class="inf">
Select a product category below
</p>
<ul class="tabs left">
<li class="link">
<a href="http://smashburger.adamsmcclure.com/UserContentStart.aspx?category=2">Grand Opening</a>
</li>
<li class="link">
<a href="#">Invites Editable</a>
</li>
<li class="link">
<a href="#">Invites Downloadable</a>
</li>
</ul>
</div>
</li>
<li class="clearfix">
<div class="top-inf">
<h3>MARKETING</h3>
</div>
<div class="img-mid">
<a href="http://smashburger.adamsmcclure.com/UserContentStart.aspx?category=7"><img src="http://smashburger.adamsmcclure.com/Custom/Themes/smashburger/Inserts/Images/SMB_SplashpageVectorImages_0113_04[4].jpg" /></a>
</div>
<div class="description">
<span class="bold">
</span>
<p class="inf">
Shop our inventory of current in store...
CSS
.top_category {position: relative; background:none orange; z-index: -1;}
.categories {/* background:none red; */}
.top_category:before, .top_category:after,
.categories:before, .categories:after {
content: " ";
position: absolute;
z-index: -1;
top: 0;
left: 20%;
width: 20%;
height: 100%;
background: #ccc;
}
.top_category:before {
left: 0%;
background: #eee;
}
.top_category:after {
left: 20%;
background: green;
}
.categories:before {
left: 40%;
background: pink;
}
.categories:after {
left: 60%;
background: yellow;
}
td.basic tr table {
width: 100%;
}
p#MessageNoEntries {
display: none;
}
.basic {
display: none;
}
.wrapper-splash {
display: block;
margin: 0 auto;
max-width: 1155px;
width: 90%;
position: relative;
}
.top_category {
width: auto;
height: auto;
}
.inf > a {
word-wrap: break-word;
}
.clearfix:after {
display: block;
height: 0;
clear: both;
}
.top_category ul.categories {
display: inline-block;
padding: 0px;
margin: 0px;
padding-top: 15px;
text-align: center;
}
*+html .top_category ul.categories li {
margin-left: 10px;
text-align: left;
}
*+html .top_category ul.categories li:first-child {
margin-left: 0px;
}
.top_category ul.categories li {
list-style: none outside none;
text-align: left;
vertical-align: top;
width: 17%;
zoom: 1;
margin: 0 1.5%;
float:left;
}
div.top-inf {
height: 30px;
width: 100%;
}
div.top-inf h3 {
padding-left: 15px;
font-size: 1em;
height: 20px;
}
div.top-inf a {
text-decoration: none;
font-size: 14px;
}
div.description {
width: 100%;
margin: 5px;
min-height: 135px;
}
div.description span.bold {
color: #000;
font-weight: bolder;
padding-top: 5px;
font-size: 12px;
}
div.description p.inf {
display: block;
width: 90%;
}
div.img-mid {
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
#divCategoryPath...
JavaScript
/* //// Responsive Columns having equal height \\\\ */