Testimonial Fancy tabs responsive

Developer
Amit Verma
Size
3,056 Kb
Views
4,048
  1. Testimonial Fancy tabs responsive Previews
  2. Testimonial Fancy tabs responsive HTML Codes
  3. Testimonial Fancy tabs responsive CSS Codes

How do I make an testimonial fancy tabs responsive?

What is a testimonial fancy tabs responsive? How do you make a testimonial fancy tabs responsive? This script and codes were developed by Amit Verma on 28 January 2023, Saturday.

Testimonial Fancy tabs responsive Previews
IQ Test

Testimonial Fancy tabs responsive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Testimonial Fancy tabs responsive</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="[ container text-center ]"> <div class="[ row ]"> <div class="[ col-xs-12 ]" style="padding-bottom: 30px;"> <p>This is my attempt to make a wonderful snippet posted by <a target="_blank" href="https://www.bootsnipp.com/maridlcrmn">maridlcrmn</a> a little more responsive. You can find the orginal <a target="_parent" href="https://bootsnipp.com/maridlcrmn/snippets/QbEpr">here</a></p> </div> </div>
</div>
<div class="[ container text-center ]">	<div class="[ row ]">	<div class="[ col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 ]" role="tabpanel"> <div class="[ col-xs-4 col-sm-12 ]"> <!-- Nav tabs --> <ul class="[ nav nav-justified ]" id="nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#dustin" aria-controls="dustin" role="tab" data-toggle="tab"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/dustinlamont/128.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#daksh" aria-controls="daksh" role="tab" data-toggle="tab"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/dakshbhagya/128.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#anna" aria-controls="anna" role="tab" data-toggle="tab"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> <li role="presentation" class=""> <a href="#wafer" aria-controls="wafer" role="tab" data-toggle="tab"> <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/waferbaby/128.jpg" /> <span class="quote"><i class="fa fa-quote-left"></i></span> </a> </li> </ul> </div> <div class="[ col-xs-8 col-sm-12 ]"> <!-- Tab panes --> <div class="tab-content" id="tabs-collapse"> <div role="tabpanel" class="tab-pane fade in active" id="dustin"> <div class="tab-inner"> <p class="lead">Etiam tincidunt enim et pretium efficitur. Donec auctor leo sollicitudin eros iaculis sollicitudin.</p> <hr> <p><strong class="text-uppercase">Dustin Lamont</strong></p> <p><em class="text-capitalize"> Senior web developer</em> at <a href="#">Apple</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="daksh"> <div class="tab-inner"> <p class="lead">Suspendisse dictum gravida est, nec consequat tortor venenatis a. Suspendisse vitae venenatis sapien.</p> <hr> <p><strong class="text-uppercase">Daksh Bhagya</strong></p> <p><em class="text-capitalize"> UX designer</em> at <a href="#">Google</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="anna"> <div class="tab-inner"> <p class="lead">Nullam suscipit ante ac arcu placerat, nec sagittis quam volutpat. Vestibulum aliquam facilisis velit ut ultrices.</p> <hr> <p><strong class="text-uppercase">Anna Pickard</strong></p> <p><em class="text-capitalize"> Master web developer</em> at <a href="#">Intel</a></p> </div> </div> <div role="tabpanel" class="tab-pane fade" id="wafer"> <div class="tab-inner"> <p class="lead"> Fusce erat libero, fermentum quis sollicitudin id, venenatis nec felis. Morbi sollicitudin gravida finibus.</p> <hr> <p><strong class="text-uppercase">Wafer Baby</strong></p> <p><em class="text-capitalize"> Web designer</em> at <a href="#">Microsoft</a></p> </div> </div> </div> </div> </div>	</div>
</div>
</body>
</html>

Testimonial Fancy tabs responsive - Script Codes CSS Codes

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
body { padding-top: 60px; }
.nav.nav-justified > li > a { position: relative; }
.nav.nav-justified > li > a:hover,
.nav.nav-justified > li > a:focus { background-color: transparent; }
.nav.nav-justified > li > a > .quote { position: absolute; left: 0px; top: 0; opacity: 0; width: 30px; height: 30px; padding: 5px; background-color: #13c0ba; border-radius: 15px; color: #fff;
}
.nav.nav-justified > li.active > a > .quote { opacity: 1; }
.nav.nav-justified > li > a > img { box-shadow: 0 0 0 5px #13c0ba; }
.nav.nav-justified > li > a > img { max-width: 100%; opacity: .3; -webkit-transform: scale(.8,.8); transform: scale(.8,.8); -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tab-pane .tab-inner { padding: 30px 0 20px; }
@media (min-width: 768px) { .nav.nav-justified > li > a > .quote { left: auto; top: auto; right: 20px; bottom: 0px; }
}
Testimonial Fancy tabs responsive - Script Codes
Testimonial Fancy tabs responsive - Script Codes
Home Page Home
Developer Amit Verma
Username amit-webdesigner
Uploaded January 28, 2023
Rating 3
Size 3,056 Kb
Views 4,048
Do you need developer help for Testimonial Fancy tabs responsive?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Amit Verma (amit-webdesigner) Script Codes
Name
BOX Rotating Card
Bootstrap 3.0. Responsive Pricing Tables
Zoom in Effect on Image Hover
Image Hover Effect
Rows with image hover effect
CSS Drop Down Menu
Bootstrap Number Spinner
Price Box Effect
Hover effects with CSS3
Responsive Pricing Tables With Hover Effects
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!