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>
<p>dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content
</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...
CSS
body, html {position:fixed; overflow:hidden;}
/* -- dummy content -- */
.top_category ul.categories {overflow: hidden;}
.top_category ul.categories li {height: 600px;}
.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:...
JavaScript
/* //// remove page scrolling \\\\ */