"top"
Bootstrap 4.1.1 Snippet by ravindra93

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="da_courseMain">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="courese_Maintitle">
<h1>The Complete JavaScript Course 2020: Build Real Projects!</h1>
<h4>Master JavaScript with the most complete course! Projects, challenges, quizzes, JavaScript ES6+, OOP, AJAX, Webpack</h4>
<ul class="list-inline rating_details">
<li><span class="label label-primary">Best Seller</span></li>
<li><i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
<i class="far fa-star"></i> <span class="rate_num">4.6 (56,938 ratings)</span></li>
<li><span class="enroll_num">246,636</span> students enrolled</li>
</ul>
<h5 class="creatby">Created by Jonas Schmedtmann</h5>
<h6>Last updated 10/2019</h6>
<ul class="list-inline launguaes">
<li><i class="fas fa-headset"></i> English</li>
<li><i class="fas fa-closed-captioning"></i> English, French [Auto-generated], </li>
<li class="popover__wrapper">
<a href="#">7 more</a>
<div class="popover__content">
<ul>
<li>German [Auto-generated]</li>
<li>Indonesian [Auto-generated]</li>
<li>Italian [Auto-generated]</li>
<li>Japanese [Auto-generated]</li>
<li>Portuguese [Auto-generated]</li>
<li>Spanish [Auto-generated]</li>
<li>Turkish [Auto-generated]</li>
</ul>
</div>
</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.popover__wrapper {
position: relative;
display: inline-block;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
transform: translate(0, 10px);
background-color: #fff;
padding: 10px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
width: 230px;
}
.popover__content::before {
position: absolute;
z-index: -1;
content: "";
left: 30px;
top: -8px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
transition-duration: 0.3s;
transition-property: transform;
}
.popover__wrapper:hover .popover__content {
z-index: 10;
opacity: 1;
visibility: visible;
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.popover__content ul {
padding: 0;
list-style-position: inside;
}
section.da_courseMain {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*Scroll to top when arrow up clicked BEGIN*/
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
$('#back2Top').fadeIn();
} else {
$('#back2Top').fadeOut();
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
/*Scroll to top when arrow up clicked END*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Angular

Questions / Comments: