<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>
</ul>
</div>
</div>
</div>
<!-- course -->
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="course_leftdeta">
</div>
</div>
<div class="col-md-4">
<div class="course_rightvideo">
</div>
</div>
</div>
</div>
</section>
<a id="back2Top" title="Back to top" href="#">➤</a>
.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 {
padding: 60px 0px;
background: url(../css/5973.jpg) no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
.da_courseMain::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(11, 10, 12, 0.55);
top: 0;
}
#back2Top {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 999;
display: none;
cursor: pointer;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 50px;
right: 0;
background-color: #DDD;
color: #555;
text-align: center;
font-size: 30px;
text-decoration: none;
}
#back2Top:hover {
background-color: #DDF;
color: #000;
}
/*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*/
