<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- created by jody.lee.fitzpatrick(a)outlook.com
websitedesigner.pro want more? contact me.
if you like this buy me a cup of coffee paypal.me/jodyf
-->
<h3 style="text-align:center;color:#fff;font-size:52px;">
Sort of Simple Tabs</h3>
<div id="maintabholder">
<div class="tab">
<!-- this is a tab -->
<div class="tablinks" onclick="openTab(event, 'Web')" id="defaultOpen" onmouseover="openTab(event, 'Web')">
<img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png">
<br />
<b class="icon-title">Web Design</b>
</div>
<!-- end tab -->
<!-- additional tabs -->
<div class="tablinks" onclick="openTab(event, 'Facebook')" onmouseover="openTab(event, 'Facebook')">
<img src="https://www.iconsdb.com/icons/preview/caribbean-blue/facebook-7-xxl.png">
<br />
<b class="icon-title">Facebook Ads</b>
</div>
<div class="tablinks" onclick="openTab(event, 'Graphic')" onmouseover="openTab(event, 'Graphic')">
<img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png">
<br />
<b class="icon-title">Graphic Design</b>
</div>
<div class="tablinks" onclick="openTab(event, 'Funnel')" onmouseover="openTab(event, 'Funnel')">
<img src="https://www.iconsdb.com/icons/preview/caribbean-blue/pie-chart-2-xxl.png">
<br />
<b class="icon-title">Funnel Strategy</b>
</div>
<!-- this is your tabs content -->
<div id="Web" class="tabcontent">
<div class="tab-icon" >
<img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png">
</div>
<div class="tab-cc" >
<h3>
Web Design
</h3>
List your information here. be captitavation yadda yadda yadda.
<div class="btn-div-action">
<a href="#link" >
TAKE ACTION
</a>
</div>
</div>
</div>
<div id="Graphic" class="tabcontent">
<div class="tab-icon" >
<img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png">
</div>
<div class="tab-cc" >
<h3>
Graphic Design
</h3>
Will design anything.
<div class="btn-div-action">
<a href="#link" >
TAKE ACTION ⇒
</a>
</div>
</div>
</div>
<div id="Facebook" class="tabcontent">
<div class="tab-icon" >
<img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png">
</div>
<div class="tab-cc" >
<h3>
Facebook Ads
</h3>
We're masters at facebook ads.
<div class="btn-div-action">
<a href="#link" >
TAKE ACTION ⇒
</a>
</div>
</div>
</div>
<div id="Funnel" class="tabcontent">
<div class="tab-icon" >
<img src="https://www.iconsdb.com/icons/preview/caribbean-blue/website-design-2-xxl.png">
</div>
<div class="tab-cc" >
<h3>
Funnel Mastery
</h3>
Will consult and help you build an awesome funnel.
<div class="btn-div-action">
<a href="#link">
TAKE ACTION
</a>
</div>
</div>
</div>
</div>
</div>
body {
font-family: Arial;
padding-bottom:550px;
background:#000;
}
#maintabholder{ max-width:800px; margin: 0 auto; }
/* you can skip this */
/* this needs to be in a style tag contact me if you need to know how to do this */
/* fixes for styling */
.tab-icon{float:left;padding:25px;}
.btn-div-action {
clear: both;
padding-top: 40px;
}
#maintabholder {
text-align: center;
margin: 0 auto;
background-color:#fff;
}
.icon-title {
clear: both;
text-align: center;
}
.tab {
margin: 0 auto;
background:#eee;
}
.tab-links{ spacing:justify; }
/* experiment */
#tab-cc { text-align:justify }
#tab-cc div { display:inline-block; background:black; padding:0 0.5em; color:white; vertical-align:middle; line-height:70px }
.tabcontent img,
.tablinks img {
max-width: 100px;
clear: both;
text-align: center;
margin: 15px;
}
.tabcontent{ clear:both; text-align:left; }
/* Style the tab */
.btn-div-action a{ position:relative; left:-14px;}
.tab {
overflow: hidden;
}
/* Style the buttons inside the tab */
.tab div {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
margin: 0 auto;
}
.tab-cc{float:left;max-width:70%;}
/* Change background color of buttons on hover */
.tab div:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab .active {
background-color: #eee;
border-bottom: solid 4px gold;
}
.btn-div-action{ clear: both; margin: 0; float:right; }
.btn-div-action a{ padding:12px 20px; background-color:#003366; color:#fff;text-decoration:none; }
/* Style the tab content */
.tab-icon{ float:left;padding:25px; }
.tabcontent {
display: none;
padding: 6px 12px;
border: none;
border-top: solid 2px #eee;
box-shadow: -3px -7px 8px #ddd;
}
/* fades */
.tabcontent {
animation: fadeEffect 1s;
/* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* this needs to be in a script tag */
function openTab(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
