582 lines
28 KiB
HTML
582 lines
28 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="zxx">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Musico</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- <link rel="manifest" href="site.webmanifest"> -->
|
|
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
|
|
<!-- Place favicon.ico in the root directory -->
|
|
|
|
<!-- CSS here -->
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/owl.carousel.min.css">
|
|
<link rel="stylesheet" href="css/magnific-popup.css">
|
|
<link rel="stylesheet" href="css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="css/themify-icons.css">
|
|
<link rel="stylesheet" href="css/nice-select.css">
|
|
<link rel="stylesheet" href="css/audioplayer.css">
|
|
<link rel="stylesheet" href="css/flaticon.css">
|
|
<link rel="stylesheet" href="css/gijgo.css">
|
|
<link rel="stylesheet" href="css/animate.css">
|
|
<link rel="stylesheet" href="css/slick.css">
|
|
<link rel="stylesheet" href="css/slicknav.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<!-- <link rel="stylesheet" href="css/responsive.css"> -->
|
|
</head>
|
|
|
|
<body>
|
|
<!--[if lte IE 9]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
|
<![endif]-->
|
|
|
|
<!-- header-start -->
|
|
<header>
|
|
<div class="header-area ">
|
|
<div id="sticky-header" class="main-header-area">
|
|
<div class="container-fluid">
|
|
<div class="header_bottom_border">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-3 col-lg-2">
|
|
<div class="logo">
|
|
<a href="index.html">
|
|
<img src="img/logo.png" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-6 col-lg-7">
|
|
<div class="main-menu d-none d-lg-block">
|
|
<nav>
|
|
<ul id="navigation">
|
|
<li><a class="active" href="index.html">home</a></li>
|
|
<li><a href="about.html">About</a></li>
|
|
<li><a href="track.html">tracks</a></li>
|
|
<li><a href="#">blog <i class="ti-angle-down"></i></a>
|
|
<ul class="submenu">
|
|
<li><a href="blog.html">blog</a></li>
|
|
<li><a href="single-blog.html">single-blog</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#">pages <i class="ti-angle-down"></i></a>
|
|
<ul class="submenu">
|
|
<li><a href="elements.html">elements</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="contact.html">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-3 d-none d-lg-block">
|
|
<div class="social_icon text-right">
|
|
<ul>
|
|
<li><a href="#"> <i class="fa fa-facebook"></i> </a></li>
|
|
<li><a href="#"> <i class="fa fa-twitter"></i> </a></li>
|
|
<li><a href="#"> <i class="fa fa-instagram"></i> </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="mobile_menu d-block d-lg-none"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- header-end -->
|
|
|
|
<!-- slider_area_start -->
|
|
<div class="slider_area">
|
|
<div class="single_slider d-flex align-items-center slider_bg_1 overlay2">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="slider_text text-center ">
|
|
<h3>Musician </h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- slider_area_end -->
|
|
|
|
<!-- music_area -->
|
|
<div class="music_area">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-xl-10">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-9 col-md-9">
|
|
<div class="music_field">
|
|
<div class="thumb">
|
|
<img src="img/music_man/1.png" alt="">
|
|
</div>
|
|
<div class="audio_name">
|
|
<div class="name">
|
|
<h4>Frando Kally</h4>
|
|
<p>10 November, 2019</p>
|
|
</div>
|
|
<audio preload="auto" controls>
|
|
<source src="https://www.w3schools.com/html/horse.mp3">
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-3">
|
|
<div class="music_btn">
|
|
<a href="#" class="boxed-btn">buy albam</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- music_area end -->
|
|
|
|
<!-- about_area -->
|
|
<div class="about_area">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-5 col-md-6">
|
|
<div class="about_thumb">
|
|
<img class="img-fluid" src="img/about/about_1.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-7 col-md-6">
|
|
<div class="about_info">
|
|
<h3>Jack Kalib</h3>
|
|
<p>Esteem spirit temper too say adieus who direct esteem. It esteems luckily or picture placing drawing. Apartments frequently or motionless on reasonable projecting expression enim ad minim veniam quis nostrud exercitation we have supported programmes to help alleviate human suffering through animal welfare when people might depend.</p>
|
|
<div class="signature">
|
|
<img src="img/about/signature.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/ about_area -->
|
|
|
|
<!-- youtube_video_area -->
|
|
<div class="youtube_video_area">
|
|
<div class="container-fluid p-0">
|
|
<div class="row no-gutters">
|
|
<div class="col-xl-3 col-lg-3 col-md-6">
|
|
<div class="single_video">
|
|
<div class="thumb">
|
|
<img src="img/video/1.png" alt="">
|
|
</div>
|
|
<div class="hover_elements">
|
|
<div class="video">
|
|
<a class="popup-video" href="https://www.youtube.com/watch?v=Hzmp3z6deF8">
|
|
<i class="fa fa-play"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hover_inner">
|
|
<span>New York Show-2018</span>
|
|
<h3><a href="#">Shadows of My Dream</a></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-3 col-md-6">
|
|
<div class="single_video">
|
|
<div class="thumb">
|
|
<img src="img/video/2.png" alt="">
|
|
</div>
|
|
<div class="hover_elements">
|
|
<div class="video">
|
|
<a class="popup-video" href="https://www.youtube.com/watch?v=Hzmp3z6deF8">
|
|
<i class="fa fa-play"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hover_inner">
|
|
<span>New York Show-2018</span>
|
|
<h3><a href="#">Shadows of My Dream</a></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-3 col-md-6">
|
|
<div class="single_video">
|
|
<div class="thumb">
|
|
<img src="img/video/3.png" alt="">
|
|
</div>
|
|
<div class="hover_elements">
|
|
<div class="video">
|
|
<a class="popup-video" href="https://www.youtube.com/watch?v=Hzmp3z6deF8">
|
|
<i class="fa fa-play"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hover_inner">
|
|
<span>New York Show-2018</span>
|
|
<h3><a href="#">Shadows of My Dream</a></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-3 col-md-6">
|
|
<div class="single_video">
|
|
<div class="thumb">
|
|
<img src="img/video/4.png" alt="">
|
|
</div>
|
|
<div class="hover_elements">
|
|
<div class="video">
|
|
<a class="popup-video" href="https://www.youtube.com/watch?v=Hzmp3z6deF8">
|
|
<i class="fa fa-play"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hover_inner">
|
|
<span>New York Show-2018</span>
|
|
<h3><a href="#">Shadows of My Dream</a></h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / youtube_video_area -->
|
|
|
|
<!-- music_area -->
|
|
<div class="music_area music_gallery">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="section_title text-center mb-65">
|
|
<h3>Latest Tracks</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center mb-20">
|
|
<div class="col-xl-10">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-9 col-md-9">
|
|
<div class="music_field">
|
|
<div class="thumb">
|
|
<img src="img/music_man/1.png" alt="">
|
|
</div>
|
|
<div class="audio_name">
|
|
<div class="name">
|
|
<h4>Frando Kally</h4>
|
|
<p>10 November, 2019</p>
|
|
</div>
|
|
<audio preload="auto" controls>
|
|
<source src="https://www.w3schools.com/html/horse.mp3">
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-3">
|
|
<div class="music_btn">
|
|
<a href="#" class="boxed-btn">buy albam</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row align-items-center justify-content-center mb-20">
|
|
<div class="col-xl-10">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-9 col-md-9">
|
|
<div class="music_field">
|
|
<div class="thumb">
|
|
<img src="img/music_man/2.png" alt="">
|
|
</div>
|
|
<div class="audio_name">
|
|
<div class="name">
|
|
<h4>Frando Kally</h4>
|
|
<p>10 November, 2019</p>
|
|
</div>
|
|
<audio preload="auto" controls>
|
|
<source src="https://www.w3schools.com/html/horse.mp3">
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-3">
|
|
<div class="music_btn">
|
|
<a href="#" class="boxed-btn">buy albam</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row align-items-center justify-content-center mb-20">
|
|
<div class="col-xl-10">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-9 col-md-9">
|
|
<div class="music_field">
|
|
<div class="thumb">
|
|
<img src="img/music_man/3.png" alt="">
|
|
</div>
|
|
<div class="audio_name">
|
|
<div class="name">
|
|
<h4>Frando Kally</h4>
|
|
<p>10 November, 2019</p>
|
|
</div>
|
|
<audio preload="auto" controls>
|
|
<source src="https://www.w3schools.com/html/horse.mp3">
|
|
</audio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-3">
|
|
<div class="music_btn">
|
|
<a href="#" class="boxed-btn">buy albam</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- music_area end -->
|
|
|
|
<!-- gallery -->
|
|
<div class="gallery_area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="section_title text-center mb-65">
|
|
<h3>Image Galleries</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row grid">
|
|
<div class="col-xl-5 col-lg-5 grid-item cat1 col-md-6">
|
|
<div class="single-gallery mb-30">
|
|
<div class="portfolio-img">
|
|
<img src="img/gallery/1.png" alt="">
|
|
</div>
|
|
<div class="gallery_hover">
|
|
<a class="popup-image" href="img/gallery/1.png" class="hover_inner">
|
|
<i class="ti-plus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-7 col-lg-7 grid-item cat3 cat4 col-md-6">
|
|
<div class="single-gallery mb-30">
|
|
<div class="portfolio-img">
|
|
<img src="img/gallery/2.png" alt="">
|
|
</div>
|
|
<div class="gallery_hover">
|
|
<a class="popup-image" href="img/gallery/2.png" class="hover_inner">
|
|
<i class="ti-plus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4 col-lg-6 grid-item cat4 col-md-6">
|
|
<div class="single-gallery mb-30">
|
|
<div class="portfolio-img">
|
|
<img src="img/gallery/3.png" alt="">
|
|
</div>
|
|
<div class="gallery_hover">
|
|
<a class="popup-image" href="img/gallery/3.png" class="hover_inner">
|
|
<i class="ti-plus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4 col-lg-6 grid-item cat2 col-md-6">
|
|
<div class="single-gallery mb-30">
|
|
<div class="portfolio-img">
|
|
<img src="img/gallery/4.png" alt="">
|
|
</div>
|
|
<div class="gallery_hover">
|
|
<a class="popup-image" href="img/gallery/4.png" class="hover_inner">
|
|
<i class="ti-plus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4 col-lg-6 grid-item cat2 col-md-6">
|
|
<div class="single-gallery mb-30">
|
|
<div class="portfolio-img">
|
|
<img src="img/gallery/5.png" alt="">
|
|
</div>
|
|
<div class="gallery_hover">
|
|
<a class="popup-image" href="img/gallery/5.png" class="hover_inner">
|
|
<i class="ti-plus"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/ gallery -->
|
|
|
|
<!-- contact_rsvp -->
|
|
<div class="contact_rsvp">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="text text-center">
|
|
<h3>Contact For RSVP</h3>
|
|
<a class="boxed-btn3" href="contact.html">Contact Me</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/ contact_rsvp -->
|
|
|
|
<!-- footer start -->
|
|
<footer class="footer">
|
|
<div class="footer_top">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-6 col-md-6">
|
|
<div class="footer_widget">
|
|
<h3 class="footer_title">
|
|
Services
|
|
</h3>
|
|
<div class="subscribe-from">
|
|
<form action="#">
|
|
<input type="text" placeholder="Enter your mail">
|
|
<button type="submit" >Subscribe</button>
|
|
</form>
|
|
</div>
|
|
<p class="sub_text">Esteem spirit temper too say adieus who direct esteem esteems luckily.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-5 col-md-5 offset-xl-1">
|
|
<div class="footer_widget">
|
|
<h3 class="footer_title">
|
|
Contact Me
|
|
</h3>
|
|
<ul>
|
|
<li><a href="#">conbusi@support.com
|
|
</a></li>
|
|
<li><a href="#">+10 873 672 6782
|
|
</a></li>
|
|
<li><a href="#">600/D, Green road, Kings Garden NewYork-6732</a></li>
|
|
</ul>
|
|
<div class="socail_links">
|
|
<ul>
|
|
<li>
|
|
<a href="#">
|
|
<i class=" fa fa-facebook "></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fa fa-google-plus"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fa fa-twitter"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fa fa-youtube-play"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<i class="fa fa-instagram"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="copy-right_text">
|
|
<div class="container">
|
|
<div class="footer_border"></div>
|
|
<div class="row">
|
|
<div class="col-xl-7 col-md-6">
|
|
<p class="copy_right">
|
|
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
|
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
|
|
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
|
</p>
|
|
</div>
|
|
<div class="col-xl-5 col-md-6">
|
|
<div class="footer_links">
|
|
<ul>
|
|
<li><a href="#">home</a></li>
|
|
<li><a href="#">about</a></li>
|
|
<li><a href="#">tracks</a></li>
|
|
<li><a href="#">blog</a></li>
|
|
<li><a href="#">contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!--/ footer end -->
|
|
|
|
<!-- link that opens popup -->
|
|
|
|
<!-- JS here -->
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
|
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
|
crossorigin="anonymous">
|
|
</script>
|
|
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
|
|
<script src="js/vendor/jquery-1.12.4.min.js"></script>
|
|
<script src="js/popper.min.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/owl.carousel.min.js"></script>
|
|
<script src="js/isotope.pkgd.min.js"></script>
|
|
<script src="js/ajax-form.js"></script>
|
|
<script src="js/waypoints.min.js"></script>
|
|
<script src="js/jquery.counterup.min.js"></script>
|
|
<script src="js/imagesloaded.pkgd.min.js"></script>
|
|
<script src="js/audioplayer.js"></script>
|
|
<script src="js/scrollIt.js"></script>
|
|
<script src="js/jquery.scrollUp.min.js"></script>
|
|
<script src="js/wow.min.js"></script>
|
|
<script src="js/nice-select.min.js"></script>
|
|
<script src="js/jquery.slicknav.min.js"></script>
|
|
<script src="js/jquery.magnific-popup.min.js"></script>
|
|
<script src="js/plugins.js"></script>
|
|
<script src="js/gijgo.min.js"></script>
|
|
<script src="js/slick.min.js"></script>
|
|
<!--contact js-->
|
|
<script src="js/contact.js"></script>
|
|
<script src="js/jquery.ajaxchimp.min.js"></script>
|
|
<script src="js/jquery.form.js"></script>
|
|
<script src="js/jquery.validate.min.js"></script>
|
|
<script src="js/mail-script.js"></script>
|
|
|
|
<script src="js/main.js"></script>
|
|
|
|
<script>
|
|
$(function() {
|
|
$('audio').audioPlayer({
|
|
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |