<section>
		<div class="container text-center text-md-left">
			<h2 class="mb-3">Majeng Karya - Lazuardii8</h2>
			<ul class="ul__list--inline sosmed__list">
				<li class="mr-3"><a target="_black" href="https://www.instagram.com/lazuardii8/"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
				<li class="mr-3"><a target="_black" href="https://dribbble.com/lazuardii8"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
				<li class="mr-3"><a target="_black" href="https://github.com/lazuardii8"><i class="fa fa-github" aria-hidden="true"></i></a></li>
				<li class="mr-3"><a target="_black" href="https://codepen.io/lazuardi16"><i class="fa fa-codepen" aria-hidden="true"></i></a></li>
				<li class="mr-3"><a target="_black" href="https://lazuardii8.space"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
			</ul>
		</div>
	</section>

	
	<section class="overflow-hidden position-relative">
		
		<!-- slider backround -->
		<div class="slider__image">
			<div><img src="https://i.ibb.co/nj2kJps/1.jpg" alt=""></div>
			<div><img src="https://i.ibb.co/BnmT08d/2.jpg" alt=""></div>
			<div><img src="https://i.ibb.co/jZV97kG/3.jpg" alt=""></div>
			<div><img src="https://i.ibb.co/gPqB58V/4.jpg" alt=""></div>
			<div><img src="https://i.ibb.co/9pdB3Mc/5.jpg" alt=""></div>
			<div><img src="https://i.ibb.co/t3PDdQB/6.jpg" alt=""></div>
		</div>

		<div class="container">
			
			<div class="row">
				<div class="col-md-3 text-center text-md-left pb-5 pb-md-0 my-auto color__white">
					<h4>Card Background Slider</h4>
					<p>Card Backrond Slide is a blend of background image and card in the section, using slick JS.</p>
				</div>
				<div class="col-md-8 offset-md-1 my-auto">
					

					<ul class="ul__list--inline slider__card">
						<li class="no__outline pl-3 pr-3">
							<div class="card__wrapper p-2 text-center">
								<img src="https://i.ibb.co/nj2kJps/1.jpg" class="mb-3" alt="">
								<h5>Image #1</h5>
							</div>
						</li>
						<li class="no__outline pl-3 pr-3">
							<div class="card__wrapper p-2 text-center">
								<img src="https://i.ibb.co/BnmT08d/2.jpg" class="mb-3" alt="">
								<h5>Image #2</h5>
							</div>
						</li>
						<li class="no__outline pl-3 pr-3">
							<div class="card__wrapper p-2 text-center">
								<img src="https://i.ibb.co/jZV97kG/3.jpg" class="mb-3" alt="">
								<h5>Image #3</h5>
							</div>
						</li>
						<li class="no__outline pl-3 pr-3">
							<div class="card__wrapper p-2 text-center">
								<img src="https://i.ibb.co/gPqB58V/4.jpg" class="mb-3" alt="">
								<h5>Image #4</h5>
							</div>
						</li>
						<li class="no__outline pl-3 pr-3">
							<div class="card__wrapper p-2 text-center">
								<img src="https://i.ibb.co/9pdB3Mc/5.jpg" class="mb-3" alt="">
								<h5>Image #5</h5>
							</div>
						</li>
						<li class="no__outline pl-3 pr-3">
							<div class="card__wrapper p-2 text-center">
								<img src="https://i.ibb.co/t3PDdQB/6.jpg" class="mb-3" alt="">
								<h5>Image #6</h5>
							</div>
						</li>
					</ul>

				</div>
			</div>

		</div>
	</section>

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap');

section{
	padding: 80px 0;
}

img{
	max-width: 100%;
}

*{
	font-size: 16px;
	font-family: 'Noto Sans TC', sans-serif;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

.uppercase__font{
	text-transform: uppercase;
}
.capitalize__font{
	text-transform: capitalize;
}

.justify{
	text-align:justify;
}

.underline{
	text-decoration: underline;
}

h1{
	font-size: 70px;
}

h2{
	font-size: 50px;
	@media screen and(max-width: 768px){
		font-size: 35px;
	}
}

h3{
	font-size: 40px;
	@media screen and(max-width: 768px){
		font-size: 25px;
	}
}

h4{
	font-size: 30px;
	@media screen and(max-width: 768px){
		font-size: 20px;
	}
}

h5{
	font-size: 24px;
	@media screen and(max-width: 768px){
		font-size: 18px;
	}
}

h6{
	font-size: 18px;
	@media screen and(max-width: 768px){
		font-size: 14px;
	}
}

h1, h2, h3, h4, h5{
	font-weight: 900;
}


@for $i from 1 through 9 {
	.fw-#{$i}{
		font-weight: 100 * $i !important;
	}
}

@for $i from 1 through 9 {
	.lh-#{$i}{
		line-height: 1rem * $i !important;
	}
}


.normal{
	font-weight:normal !important;
}

.no__outline{
	outline-style: none !important;
}

.pointer{
	cursor: pointer;
}

// ul
.ul__list--inline{
	list-style:none;
	padding:0;
	margin:0;

	>li{
		display:inline-block;
	}
}

.ul__list{
	list-style:none;
	padding:0;
	margin:0;
}

.sosmed__list{
	li{
		a{
			width: 40px;
			height: 40px;
			transition: .5s;
			border-radius:50%;
			display:inline-block;
			position:relative;
			font-size: 20px;
			color: black;

			&:hover{
				color:white;
				background-color: black;
				box-shadow: 0px 10px 40px #3e3c3c7a;
			}

			i{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		}
	}
}


// slider bg

.slider__image{
	position:absolute;
	left:0;
	bottom: 0;
	top:0;
	right: 0;

	&.slick-slider{
		position: absolute !important;  
		width: 100%;  
		z-index: -1;
	}

	div{

		height:100%;
		width:100%;

		img{
			width:100%;
			height:100%;
			object-fit: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	}
}


.card__wrapper{
	background-color:white;
  li{
  width:100%;  
  }
  
	img{
		width:100%;
		height: 250px;
		object-fit: cover;
	}
}

.color__white{
	color:white;
}

$('.slider__image').slick({
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: false,
			fade: false,
			infinite: true,
			autoplay: true,
			focusOnSelect: true,
			centerPadding: 0,
			slideMargin: 10,
			centerPadding: 0,
			asNavFor: '.slider__card'
		});		

		$('.slider__card').slick({
			slidesToShow: 3,
			slidesToScroll: 1,
			asNavFor: '.slider__image',
			fade: false,
			arrows: false,
			infinite: true,
			autoplay: true,
			pauseOnHover:true,
			focusOnSelect: true,
			responsive: [
			{
				breakpoint: 1024,
				settings: {
					slidesToShow: 2,
					slidesToScroll: 1,
				}
			},
			{
				breakpoint: 577,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
				}
			}
			]
		});