LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
	
CSS
body {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans Condensed', sans-serif;
}
h2 {
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 700;
}
.btn-close {
    border: 1px solid;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  cursor: pointer;
}
ul.tabs {
    margin: auto;
    padding: 0px;
    list-style: none;
    width: calc(100% - (2*4%));
}
		ul.tabs li{
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
		}

		ul.tabs li.current{
			color: #222;
		}
ul.tabs li.current label{
		border-bottom: 1px solid #000;
    pointer-events: none;
    cursor: default;
    opacity: 1;
}

		.tab-content{
			display: none;
			padding: 15px;
		}

		.tab-content.current{
			display: inherit;
		}
ul.content li{
  display: none;
}
ul.links {
    display: flex;
    list-style-type: none;
    justify-content: center;
    padding: 0 0 20px 0;
}
ul.links li img, 
ul.content li ul li img {
    width: 230px;
}
ul.links li a {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    color: #333;
    text-decoration: none;
}
ul.links li.active a {
    font-weight: bold;
}

ul.content.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0 0 0;
    border-top: 1px solid #C3C3C3;
}
ul.content {display: none;}
ul.content li {
  flex-direction: column;
  align-items: center;
}
ul.content li ul {
  display: flex;
  padding: 0;
}
ul.content li ul li {
  display: flex !important;
  padding: 10px;
}
ul.content li ul li a{
  flex-direction: column-reverse;
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
}
ul.content li ul li a:hover{
  text-decoration: underline;
  font-weight:bold;
}
ul.links li img, 
ul.content li ul li img {
  transform: scale(1);
  transition: 0.3s all;
}
ul.links li:hover img,
ul.content li ul li:hover img {
  transform: scale(1.1);
  transition: 0.3s all;
}
.slider {
    position: relative;
}
.slider-navigation-pages-wrapper {
    display: none;
}
.slider-navigation-prev,
.slider-navigation-next {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background-color: #333;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.slider-navigation-prev:hover,
.slider-navigation-next:hover {
  background-color: #404040;
}

.slider-navigation-prev:after,
.slider-navigation-next:after {
  font-size: 28px;
  line-height: 24px;
  color: #fff;
}

.slider-navigation-prev {
  left: 0px;
}

.slider-navigation-prev:after {
  content: "←";
}

.slider-navigation-next {
  right: 0px;
}

.slider-navigation-next:after {
  content: "→";
}

.slider-navigation-dots-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.slider-navigation-dots {
  width: 16px;
  height: 16px;
  margin: 0 5px;
  border: 0;
  border-radius: 50%;
  background-color: #333;
}

.slider-navigation-dots:hover, .slider-navigation-dots.is-active {
  background-color: #404040;
}

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
JS
$('.links li a').on('click',function(e){
  $('.links li').removeClass();
  $('.content').fadeIn(1000).addClass('active').css('display', 'flex');
  $(this).parent().addClass('active');
  e.preventDefault();
  var className = $(this).text().toLowerCase();
  $(".content li").not('.' + className).hide();
  $(".content li" + "." + className).show().css('display', 'flex');
});
$(document).ready(function(c) {
	$('.btn-close').on('click', function(c){
		$(this).parent().fadeToggle('slow', function(c){
		});
	});	
});
$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

});

// jQuery Slider Plugin
// https://github.com/libeo-vtt/jquery-slider
$('.slider').slider({
    displayedSlides: 3,
    displayDotsNumber: false
});
Term
Wed, 12/27/2017 - 07:03

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv