<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="tab-content container-fluid">
<ul class="tab-menu container">
<li class="active">
<div class="item-block">
<div class="item-icon item-icon-1"></div>
</div>
<h3>Responsive<br>
Websites</h3>
</li>
<li>
<div class="item-block item-block-2">
<div class="item-icon item-icon-2"></div>
</div>
<h3>e Commerce<br>
Websites</h3>
</li>
<li>
<div class="item-block item-block-3">
<div class="item-icon item-icon-3"></div>
</div>
<h3>Daily blog<br>
Websites</h3>
</li>
<li>
<div class="item-block item-block-4">
<div class="item-icon item-icon-4"></div>
</div>
<h3>Search based<br>
Websites</h3>
</li>
</ul>
<div class="tab-content container">
<h1>Lorem Ipsum is simply dummy text </h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever<br>
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five<br>
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<p>t was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing<br>
software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled<br> it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially<br> unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with<br> desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
.tab-content{
margin-top:100px;
}
.tab-content .tab-menu{
list-style-type: none;
width: 100%;
}
.tab-content .tab-menu li{
display: inline-block;
border-bottom: 1px solid #dedede;
}
.tab-menu li.active{
border:1px solid #dedede;
border-bottom: none;
}
.tab-menu li.active h3{
font-weight: bold;
color: #5f5f5f;
}
.tab-menu li h3{
font-family:segoeWPLight;
font-size: 1.1875em;
color: #676666;
margin-top: 62px;
text-align: center;
margin-right: 131px;
}
.item-block{
width: 100px;
height: 55px;
background: #6598e6;
position: relative;
}
.item-block:before,
.item-block:after{
content: "";
width: 0;
height: 0;
position: absolute;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.item-block:before{
top:-25px;
border-bottom: 25px solid #6598e6;
}
.item-block:after {
bottom: -25px;
border-top: 25px solid #6598e6;
}
/*2*/
.item-block-2{
background: #fdcf0a;
}
.item-block-2:before{
top:-25px;
border-bottom: 25px solid #fdcf0a;
}
.item-block-2:after {
bottom: -25px;
border-top: 25px solid #fdcf0a;
}
/*3*/
.item-block-3{
background: #12b367;
}
.item-block-3:before{
top:-25px;
border-bottom: 25px solid #12b367;
}
.item-block-3:after {
bottom: -25px;
border-top: 25px solid #12b367;
}
/*4*/
.item-block-4{
background: #e67624;
}
.item-block-4:before{
top:-25px;
border-bottom: 25px solid #e67624;
}
.item-block-4:after {
bottom: -25px;
border-top: 25px solid #e67624;
}
.tab-content>div{
/*box-shadow: 0 4px 10px rgba(0,0,0,0.5);*/
border:1px solid #dedede;
border-top: none;
height: 783px;
}
.tab-content .comp{
background: url("img/iphone.png") no-repeat;
height: 329px;
width: 732px;
box-shadow:none;
border: none;
position: relative;
top: 69px;
}
.tab-content>div h1{
position: relative;
top: 69px;
font-family:segoeWPLight;
font-size: 1.75em;
color: #4f4f4f;
padding-bottom: 20px;
}
.tab-content>div p{
position: relative;
top: 69px;
color: #818181;
font-family: 'Univers 45 Light Oblique';
font-size:1em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.