118 lines
3.6 KiB
Plaintext
118 lines
3.6 KiB
Plaintext
<div class="np-homepage-featured np-homepage-tips-tricks np-max-width">
|
|
<div class="np-homepage-featured-text">
|
|
<div class="np-homepage-headline">
|
|
Professional Climbers
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tips-tricks-carousel np-carousel" id="tips-tricks-carousel">
|
|
<div class="np-carousel-card">
|
|
<video class='left-video' autoplay muted loop>
|
|
<source type="video/mp4" src="https://i.imgur.com/IizyBxj.mp4">
|
|
</video>
|
|
<div class='review'>
|
|
<div class='review-text'>
|
|
“Enlightenment isn't found with a full stomach or a soft pillow.”
|
|
</div>
|
|
<div class='review-name'>
|
|
Cory Richards
|
|
</div>
|
|
<div class='review-title'>
|
|
Professional Mountain Climbers & Photographer
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="np-carousel-card">
|
|
<video class='left-video' autoplay muted loop>
|
|
<source type="video/mp4" src="https://i.imgur.com/HS7PW7n.mp4">
|
|
</video>
|
|
<div class='review'>
|
|
<div class='review-text'>
|
|
“If you don't own your grunt work, can you really say you've done the climb?” </div>
|
|
<div class='review-name'>
|
|
Tommy Caldwell
|
|
</div>
|
|
<div class='review-title'>
|
|
Multiple First Ascents in Yosemite National Park
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="np-carousel-card">
|
|
<video class='left-video' autoplay muted loop>
|
|
<source type="video/mp4" src="https://i.imgur.com/wMtE1Yt.mp4">
|
|
</video>
|
|
<div class='review'>
|
|
<div class='review-text'>
|
|
“Fear is always there; it's a survival instinct. You just need to know how to manage it. </div>
|
|
<div class='review-name'>
|
|
Jimmy Chin
|
|
</div>
|
|
<div class='review-title'>
|
|
World-class videographer, photographer, and climber.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.left-video {
|
|
border-radius: 18px;
|
|
border: black 8px solid;
|
|
position: relative;
|
|
height: 380px;
|
|
width: 660px;
|
|
object-fit: fill;
|
|
left: 100px;
|
|
top: -100px;
|
|
}
|
|
.review {
|
|
background: black;
|
|
border-radius: 5px;
|
|
padding: 100px 150px;
|
|
width: 70%;
|
|
}
|
|
.review-text {
|
|
font-size: 24px;
|
|
}
|
|
.review-name {
|
|
font-size: 18px;
|
|
padding-top: 25px;
|
|
padding-bottom: 10px;
|
|
color: lightgrey;
|
|
}
|
|
.review-title {
|
|
color: lightgray;
|
|
}
|
|
.tips-tricks-carousel .slick-list {
|
|
height: 580px;
|
|
}
|
|
.tips-tricks-carousel .slick-initialized .slick-slide {
|
|
width: 100% !important;
|
|
margin: auto;
|
|
position: relative;
|
|
top: 100px;
|
|
}
|
|
.tips-tricks-carousel .np-carousel-card {
|
|
margin: auto !important;
|
|
}
|
|
.tips-tricks-carousel div.slick-list:nth-child(1) > div:nth-child(1) {
|
|
height: 700px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
$("#tips-tricks-carousel").slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
cssEase: 'linear',
|
|
arrows: false,
|
|
infinite: true,
|
|
dots: true,
|
|
autoplay: true,
|
|
autoplaySpeed: 5000
|
|
});
|
|
});
|
|
|
|
</script> |