906 lines
49 KiB
HTML
906 lines
49 KiB
HTML
|
<!doctype html>
|
||
|
|
<html class="no-js" lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="author" content="ThemeZaa">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
||
|
|
|
||
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
||
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
||
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||
|
|
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
||
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
||
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
||
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
||
|
|
<link rel="stylesheet" href="demos/music-onepage/music-onepage.css" />
|
||
|
|
</head>
|
||
|
|
<body class="left-modern-menu left-menu-onepage">
|
||
|
|
|
||
|
|
<header class="left-modern-header" id="navbar-menu">
|
||
|
|
<div class="left-modern-sidebar header-dark bg-black">
|
||
|
|
<a class="navbar-brand section-link" href="demo-music-onepage.html">
|
||
|
|
<img src="images/demo-music-onepage-logo-white.png" data-at2x="images/demo-music-onepage-logo-white@2x.png" alt class="default-logo">
|
||
|
|
<img src="images/demo-music-onepage-logo-white.png" data-at2x="images/demo-music-onepage-logo-white@2x.png" alt class="alt-logo">
|
||
|
|
<img src="images/demo-music-onepage-logo-white.png" data-at2x="images/demo-music-onepage-logo-white@2x.png" alt class="mobile-logo">
|
||
|
|
</a>
|
||
|
|
<div class="toggle-icon">
|
||
|
|
<span class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
|
||
|
|
<span class="navbar-toggler-line"></span>
|
||
|
|
<span class="navbar-toggler-line"></span>
|
||
|
|
<span class="navbar-toggler-line"></span>
|
||
|
|
<span class="navbar-toggler-line"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="vertical-title">
|
||
|
|
<div class="title fs-13 fw-600">© 2024 Crafto</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav class="modern-sidebar-nav header-dark bg-black">
|
||
|
|
<div class="h-100">
|
||
|
|
<div class="modern-side-menu" data-scroll-options="{ "theme": "light" }">
|
||
|
|
<ul class="menu-item-list alt-font text-uppercase fw-500">
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-music-onepage.html#about" class="inner-link nav-link">About</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-music-onepage.html#albums" class="inner-link nav-link">Albums</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-music-onepage.html#tracklist" class="inner-link nav-link">Tracklist</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-music-onepage.html#videos" class="inner-link nav-link">Videos</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-music-onepage.html#tours" class="inner-link nav-link">Tours</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-music-onepage.html#awards" class="inner-link nav-link">Awards</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-music-onepage.html#contact" class="inner-link nav-link">Contact</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="main-content">
|
||
|
|
|
||
|
|
<section id="home" class="p-0 ipad-top-space-margin position-relative overflow-hidden cover-background" style="background-image: url('images/demo-music-onepage-main-banner-bg-01.jpg')">
|
||
|
|
<span class="fs-460 xl-fs-250 text-base-color position-absolute right-minus-50px top-50 word-break-normal alt-font text-uppercase fw-600 ls-minus-3px w-100 text-center" data-bottom-top="transform: translate3d(100px, 0px, 0px) scale(.7);" data-top-bottom="transform: translate3d(-100px, 0px, 0px) scale(1.4);">Vibration</span>
|
||
|
|
<div id="particles-style-01" class="h-100 position-absolute left-0px top-0 w-100" data-particle="true" data-particle-options="{"particles": {"number": {"value": 15,"density": {"enable": true,"value_area": 900}},"shape": {"type": ["image"],"image":{"src":"images/demo-music-onepage-main-banner-bg-02.png","width":30,"height":32}},"opacity": {"value": 1,"random": false,"anim": {"enable": false,"speed": 1,"sync": false}},"size": {"value": 25,"random": true,"anim": {"enable": false,"sync": true}},"line_linked":{"enable":false,"distance":0,"color":"#ffffff","opacity":0.4,"width":1},"move": {"enable": true,"speed":1,"direction": "right","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}"></div>
|
||
|
|
<div class="container full-screen md-h-600px sm-h-450px">
|
||
|
|
<div class="row h-100 align-items-end position-relative">
|
||
|
|
<img src="images/demo-music-onepage-main-banner-bg-03.png" class="absolute-middle-center" alt>
|
||
|
|
<div class="col-12 text-center position-relative pb-8">
|
||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="position-relative d-inline-block text-center border border-3 border-color-white rounded-circle video-icon-box video-icon-large popup-youtube xs-mb-10px">
|
||
|
|
<span>
|
||
|
|
<span class="video-icon">
|
||
|
|
<i class="bi bi-play-fill text-white fs-32"></i>
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<div class="d-block mx-auto mt-minus-30px">
|
||
|
|
<img src="images/demo-music-onepage-main-banner-bg-04.png" alt>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="p-0 bg-dark-gray position-relative">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row row-cols-2 row-cols-lg-6 row-cols-sm-4 g-0 justify-content-center ps-5 pe-5" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
|
||
|
|
<div class="col icon-with-text-style-03 xs-mb-25px">
|
||
|
|
<div class="feature-box">
|
||
|
|
<div class="feature-box-icon">
|
||
|
|
<a href="https://www.apple.com/" target="_blank"><i class="fa-brands fa-apple icon-large text-white mb-10px"></i></a>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
||
|
|
<a href="https://www.apple.com/" target="_blank" class="fs-13 ls-3px d-inline-block text-white text-uppercase">Itunes</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col icon-with-text-style-03 xs-mb-25px">
|
||
|
|
<div class="feature-box">
|
||
|
|
<div class="feature-box-icon">
|
||
|
|
<a href="https://open.spotify.com/" target="_blank"><i class="fa-brands fa-spotify icon-large text-white mb-10px"></i></a>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
||
|
|
<a href="https://open.spotify.com/" target="_blank" class="fs-13 ls-3px d-inline-block text-white text-uppercase">Spotify</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col icon-with-text-style-03">
|
||
|
|
<div class="feature-box">
|
||
|
|
<div class="feature-box-icon">
|
||
|
|
<a href="https://www.youtube.com/" target="_blank"><i class="fa-brands fa-youtube icon-large text-white mb-10px"></i></a>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
||
|
|
<a href="https://www.youtube.com/" target="_blank" class="fs-13 ls-3px d-inline-block text-white text-uppercase">Youtube</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col icon-with-text-style-03">
|
||
|
|
<div class="feature-box">
|
||
|
|
<div class="feature-box-icon">
|
||
|
|
<a href="https://www.google.com" target="_blank"><i class="fa-brands fa-google icon-large text-white mb-10px"></i></a>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
||
|
|
<a href="https://www.google.com" target="_blank" class="fs-13 ls-3px d-inline-block text-white text-uppercase">Google</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="about" class="bg-dark-gray position- overflow-hidden pb-0">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="container position-relative">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-5 text-center text-md-start">
|
||
|
|
<div class="outside-box-left-30 d-none d-md-inline-block">
|
||
|
|
<div data-bottom-top="transform:scale(1, 1) translate3d(60px, 0px, 0px);" data-top-bottom="transform:scale(1, 1) translate3d(-60px, 0px, 0px);">
|
||
|
|
<span class="fs-250 fw-600 text-black-russian-gray alt-font text-uppercase text-nowrap">Biography</span>
|
||
|
|
</div>
|
||
|
|
<div class="bg-yellow w-150px h-150px d-flex align-items-center justify-content-center border-radius-100 position-absolute top-minus-70px left-minus-150px xl-left-0px text-center" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)"><h4 class="text-dark-gray alt-font text-uppercase fw-700 mb-0 w-80 mx-auto lh-34 position-relative top-5px">Rock band</h4></div>
|
||
|
|
</div>
|
||
|
|
<div class="fs-14 text-base-color text-uppercase ls-1px fw-600">15 years live band experience <span class="w-120px h-1px bg-base-color d-none d-lg-inline-block align-middle position-relative top-minus-1px ms-10px lg-w-70px"></span></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 offset-md-1 position-relative last-paragraph-no-margin mt-8 sm-mt-20px text-center text-md-start" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<h2 class="alt-font text-white text-uppercase mb-15px">Midnight vibration</h2>
|
||
|
|
<p class="w-80 lg-w-95 md-w-100">Music is composed and performed for many purposes, ranging from aesthetic pleasure, religious or ceremonial purposes, or as an entertainment our product for the marketplace. Music is made for sharing and inspiration. With our new online player it becomes much easier to choose your favorite songs.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section id="albums" class="position-relative bg-dark-gray pb-0">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="container position-relative">
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-12 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<h2 class="alt-font text-white text-uppercase">Latest albums</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<ul class="portfolio-creative portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center" data-anime="{ "el": "childs","translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<li class="grid-sizer"></li>
|
||
|
|
|
||
|
|
<li class="grid-item transition-inner-all">
|
||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="popup-vimeo">
|
||
|
|
<div class="portfolio-box">
|
||
|
|
<div class="portfolio-image" style="background: #8e26bd">
|
||
|
|
<img src="images/demo-music-onepage-portfolio-01.jpg" alt />
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
|
|
<h3 class="text-uppercase portfolio-title mt-auto alt-font text-white" data-text="Morning"></h3>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mt-auto icon-box w-50px h-50px rounded-circle border border-color-transparent-white-very-light border-2"><i class="bi bi-play-fill text-white icon-small"></i></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
<li class="grid-item transition-inner-all">
|
||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="popup-vimeo">
|
||
|
|
<div class="portfolio-box">
|
||
|
|
<div class="portfolio-image" style="background: #4493b2">
|
||
|
|
<img src="images/demo-music-onepage-portfolio-02.jpg" alt />
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
|
|
<h3 class="text-uppercase portfolio-title mt-auto alt-font text-white" data-text="Northde"></h3>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mt-auto icon-box w-50px h-50px rounded-circle border border-color-transparent-white-very-light border-2"><i class="bi bi-play-fill text-white icon-small"></i></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
<li class="grid-item transition-inner-all">
|
||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="popup-vimeo">
|
||
|
|
<div class="portfolio-box">
|
||
|
|
<div class="portfolio-image" style="background: #be5038">
|
||
|
|
<img src="images/demo-music-onepage-portfolio-03.jpg" alt />
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
|
|
<h3 class="text-uppercase portfolio-title mt-auto alt-font text-white" data-text="Mockups"></h3>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mt-auto icon-box w-50px h-50px rounded-circle border border-color-transparent-white-very-light border-2"><i class="bi bi-play-fill text-white icon-small"></i></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
<li class="grid-item transition-inner-all">
|
||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="popup-vimeo">
|
||
|
|
<div class="portfolio-box">
|
||
|
|
<div class="portfolio-image" style="background: #9c277d">
|
||
|
|
<img src="images/demo-music-onepage-portfolio-04.jpg" alt />
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
|
|
<h3 class="text-uppercase portfolio-title mt-auto alt-font text-white" data-text="Harmony"></h3>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mt-auto icon-box w-50px h-50px rounded-circle border border-color-transparent-white-very-light border-2"><i class="bi bi-play-fill text-white icon-small"></i></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
<li class="grid-item transition-inner-all">
|
||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="popup-vimeo">
|
||
|
|
<div class="portfolio-box">
|
||
|
|
<div class="portfolio-image" style="background: #125275">
|
||
|
|
<img src="images/demo-music-onepage-portfolio-06.jpg" alt />
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
|
|
<h3 class="text-uppercase portfolio-title mt-auto alt-font text-white" data-text="Gravity"></h3>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mt-auto icon-box w-50px h-50px rounded-circle border border-color-transparent-white-very-light border-2"><i class="bi bi-play-fill text-white icon-small"></i></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
<li class="grid-item transition-inner-all">
|
||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="popup-vimeo">
|
||
|
|
<div class="portfolio-box">
|
||
|
|
<div class="portfolio-image" style="background: #ee4283">
|
||
|
|
<img src="images/demo-music-onepage-portfolio-05.jpg" alt />
|
||
|
|
</div>
|
||
|
|
<div class="portfolio-hover justify-content-center align-items-center d-flex flex-column pt-40px pb-40px">
|
||
|
|
<h3 class="text-uppercase portfolio-title mt-auto alt-font text-white" data-text="Pain"></h3>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mt-auto icon-box w-50px h-50px rounded-circle border border-color-transparent-white-very-light border-2"><i class="bi bi-play-fill text-white icon-small"></i></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section id="tracklist" class="bg-dark-gray position-relative pb-0">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="container position-relative">
|
||
|
|
<div class="row mb-1">
|
||
|
|
<div class="col-12 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<h2 class="alt-font text-white text-uppercase">Popular tracklist</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<div class="col-lg-10 pt-20px pb-20px border-bottom border-color-transparent-white-light tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center"><span class="fw-600 text-uppercase text-white">22 Aug</span></div>
|
||
|
|
<div class="col-md-5 col-xl-7 col-lg-6 d-flex justify-content-center justify-content-md-start"><a href="https://www.youtube.com/" target="blank" class="text-medium-gray"><i class="bi bi-youtube text-white fs-20 me-10px align-middle"></i> Give me one moment in time </a></div>
|
||
|
|
<div class="col-md-2 col-xl-1 text-center"><span>04:35</span></div>
|
||
|
|
<div class="col-md-3 col-lg-2 d-flex justify-content-center align-items-center"><i class="bi bi-suit-heart-fill text-base-color icon-very-small lh-0px me-10px"></i><div class="fs-14 text-uppercase"><span class="fw-600 text-white">10K+</span> Likes</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-10 pt-20px pb-20px border-bottom border-color-transparent-white-light tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center"><span class="fw-600 text-uppercase text-white">22 Jul</span></div>
|
||
|
|
<div class="col-md-5 col-xl-7 col-lg-6 d-flex justify-content-center justify-content-md-start"><a href="https://www.youtube.com/" target="blank" class="text-medium-gray"><i class="bi bi-youtube text-white fs-20 me-10px align-middle"></i> Everything i do i do it for you</a></div>
|
||
|
|
<div class="col-md-2 col-xl-1 text-center"><span>03:25</span></div>
|
||
|
|
<div class="col-md-3 col-lg-2 d-flex justify-content-center align-items-center"><i class="bi bi-suit-heart-fill text-base-color icon-very-small lh-0px me-10px"></i><div class="fs-14 text-uppercase"><span class="fw-600 text-white">08K+</span> Likes</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-10 pt-20px pb-20px border-bottom border-color-transparent-white-light tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center"><span class="fw-600 text-uppercase text-white">08 Jul</span></div>
|
||
|
|
<div class="col-md-5 col-xl-7 col-lg-6 d-flex justify-content-center justify-content-md-start"><a href="https://www.youtube.com/" target="blank" class="text-medium-gray"><i class="bi bi-youtube text-white fs-20 me-10px align-middle"></i> I will be right here waiting for you</a></div>
|
||
|
|
<div class="col-md-2 col-xl-1 text-center"><span>05:15</span></div>
|
||
|
|
<div class="col-md-3 col-lg-2 d-flex justify-content-center align-items-center"><i class="bi bi-suit-heart-fill text-base-color icon-very-small lh-0px me-10px"></i><div class="fs-14 text-uppercase"><span class="fw-600 text-white">16K+</span> Likes</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-10 pt-20px pb-20px border-bottom border-color-transparent-white-light tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center"><span class="fw-600 text-uppercase text-white">22 Jun</span></div>
|
||
|
|
<div class="col-md-5 col-xl-7 col-lg-6 d-flex justify-content-center justify-content-md-start"><a href="https://www.youtube.com/" target="blank" class="text-medium-gray"><i class="bi bi-youtube text-white fs-20 me-10px align-middle"></i>Close your eyes give me your hand</a></div>
|
||
|
|
<div class="col-md-2 col-xl-1 text-center"><span>04:18</span></div>
|
||
|
|
<div class="col-md-3 col-lg-2 d-flex justify-content-center align-items-center"><i class="bi bi-suit-heart-fill text-base-color icon-very-small lh-0px me-10px"></i><div class="fs-14 text-uppercase"><span class="fw-600 text-white">15K+</span> Likes</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-10 pt-20px pb-20px tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center"><span class="fw-600 text-uppercase text-white">26 Jun</span></div>
|
||
|
|
<div class="col-md-5 col-xl-7 col-lg-6 d-flex justify-content-center justify-content-md-start"><a href="https://www.youtube.com/" target="blank" class="text-medium-gray"><i class="bi bi-youtube text-white fs-20 me-10px align-middle"></i>I can't fight this feeling anymore</a></div>
|
||
|
|
<div class="col-md-2 col-xl-1 text-center"><span>03:35</span></div>
|
||
|
|
<div class="col-md-3 col-lg-2 d-flex justify-content-center align-items-center"><i class="bi bi-suit-heart-fill text-base-color icon-very-small lh-0px me-10px"></i><div class="fs-14 text-uppercase"><span class="fw-600 text-white">07K+</span> Likes</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-center mt-5 position-relative z-index-1 sm-mx-0" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 1000, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<div class="row align-items-center justify-content-center bg-black-russian-gray border-radius-100px p-15px">
|
||
|
|
<div class="col-auto fs-14 text-uppercase fw-700 text-center"><span class="text-white">10,000+</span> Midnight vibration songs waiting for you <span class="ps-15px">></span></div>
|
||
|
|
<div class="col-auto align-items-center d-flex">
|
||
|
|
<a href="demo-music-onepage.html#">
|
||
|
|
<i class="bi bi-youtube text-white icon-small me-5px lh-0px align-middle"></i>
|
||
|
|
<span class="text-white fs-14 fw-600 text-uppercase">Youtube</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto"><div class="w-1px h-15px bg-payne-gray"></div></div>
|
||
|
|
<div class="col-auto align-items-center d-flex">
|
||
|
|
<a href="demo-music-onepage.html#">
|
||
|
|
<i class="bi bi-apple text-white icon-small me-5px lh-0px align-middle"></i>
|
||
|
|
<span class="text-white fs-14 fw-600 text-uppercase">Itunes</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="position-relative bg-dark-gray">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="absolute-middle-center mt-minus-50px sm-mt-minus-10px"><img src="images/demo-music-onepage-bg-01.png" data-bottom-top="transform: rotate(0deg); filter: blur(0px)" data-top-bottom="transform:rotate(-64deg); filter: blur(5px)" alt /></div>
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row position-relative mt-2 mb-2 sm-mb-0">
|
||
|
|
<div class="col swiper swiper-width-auto text-center" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":50, "speed": 50000, "loop": true, "pagination": { "el": ".slider-four-slide-pagination-2", "clickable": false }, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-four-slide-next-2", "prevEl": ".slider-four-slide-prev-2" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
||
|
|
<div class="swiper-wrapper marquee-slide">
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="fs-200 sm-fs-150 fw-600 alt-font text-base-color text-uppercase">Music is the moonlight in the gloomy night of life </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="fs-200 sm-fs-150 fw-600 alt-font text-base-color text-uppercase">Music is the moonlight in the gloomy night of life </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="fs-200 sm-fs-150 fw-600 alt-font text-base-color text-uppercase">Music is the moonlight in the gloomy night of life </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="fs-200 sm-fs-150 fw-600 alt-font text-base-color text-uppercase">Music is the moonlight in the gloomy night of life </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section id="videos" class="overflow-hidden position-relative bg-dark-gray p-0">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row mb-2">
|
||
|
|
<div class="col-12 text-center z-index-1">
|
||
|
|
<h2 class="alt-font text-white text-uppercase">Latest videos</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="outside-box-right-15 outside-box-left-15">
|
||
|
|
<div class="swiper swiper-dark-pagination swiper-line-pagination-style-01 magic-cursor light text-slider-style-05" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "pagination": { "el": ".swiper-line-pagination", "clickable": true }, "navigation": { "nextEl": ".slider-three-slide-next", "prevEl": ".slider-three-slide-prev" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 3 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="services-box-style-01 hover-box last-paragraph-no-margin">
|
||
|
|
<div class="position-relative box-image">
|
||
|
|
<a href="https://www.youtube.com/" target="_blank">
|
||
|
|
<img src="images/demo-music-onepage-main-slider-01.jpg" alt>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-90px h-90px md-w-70px md-h-70px rounded-circle bg-base-color"><i class="bi bi-youtube text-white icon-very-medium"></i></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="ps-8 pe-8 pt-5 text-center">
|
||
|
|
<span class="fs-19 d-inline-block text-white fw-600">Artscape theatre</span>
|
||
|
|
<p>Live performance in USA</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="services-box-style-01 hover-box last-paragraph-no-margin">
|
||
|
|
<div class="position-relative box-image">
|
||
|
|
<a href="https://www.youtube.com/" target="_blank">
|
||
|
|
<img src="images/demo-music-onepage-main-slider-02.jpg" alt>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-90px h-90px md-w-70px md-h-70px rounded-circle bg-base-color"><i class="bi bi-youtube text-white icon-very-medium"></i></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="ps-8 pe-8 pt-5 text-center">
|
||
|
|
<span class="fs-19 d-inline-block text-white fw-600">Suels academy</span>
|
||
|
|
<p>Live performance in Brussels</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="services-box-style-01 hover-box last-paragraph-no-margin">
|
||
|
|
<div class="position-relative box-image">
|
||
|
|
<a href="https://www.youtube.com/" target="_blank">
|
||
|
|
<img src="images/demo-music-onepage-main-slider-03.jpg" alt>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-90px h-90px md-w-70px md-h-70px rounded-circle bg-base-color"><i class="bi bi-youtube text-white icon-very-medium"></i></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="ps-8 pe-8 pt-5 text-center">
|
||
|
|
<span class="fs-19 d-inline-block text-white fw-600">Seun kologbi</span>
|
||
|
|
<p>Live performance in France</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="services-box-style-01 hover-box last-paragraph-no-margin">
|
||
|
|
<div class="position-relative box-image">
|
||
|
|
<a href="https://www.youtube.com/" target="_blank">
|
||
|
|
<img src="images/demo-music-onepage-main-slider-04.jpg" alt>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-90px h-90px md-w-70px md-h-70px rounded-circle bg-base-color"><i class="bi bi-youtube text-white icon-very-medium"></i></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="ps-8 pe-8 pt-5 text-center">
|
||
|
|
<span class="fs-19 d-inline-block text-white fw-600">Halloween bitchy</span>
|
||
|
|
<p>Live performance in London</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="services-box-style-01 hover-box last-paragraph-no-margin">
|
||
|
|
<div class="position-relative box-image">
|
||
|
|
<a href="https://www.youtube.com/" target="_blank">
|
||
|
|
<img src="images/demo-music-onepage-main-slider-01.jpg" alt>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-90px h-90px md-w-70px md-h-70px rounded-circle bg-base-color"><i class="bi bi-youtube text-white icon-very-medium"></i></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="ps-8 pe-8 pt-5 text-center">
|
||
|
|
<span class="fs-19 d-inline-block text-white fw-600">Artscape theatre</span>
|
||
|
|
<p>Live performance in USA</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="services-box-style-01 hover-box last-paragraph-no-margin">
|
||
|
|
<div class="position-relative box-image">
|
||
|
|
<a href="https://www.youtube.com/" target="_blank">
|
||
|
|
<img src="images/demo-music-onepage-main-slider-02.jpg" alt>
|
||
|
|
<span class="d-flex justify-content-center align-items-center mx-auto icon-box absolute-middle-center z-index-1 w-90px h-90px md-w-70px md-h-70px rounded-circle bg-base-color"><i class="bi bi-youtube text-white icon-very-medium"></i></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="ps-8 pe-8 pt-5 text-center">
|
||
|
|
<span class="fs-19 d-inline-block text-white fw-600">Suels academy</span>
|
||
|
|
<p>Live performance in Brussels</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section id="tours" class="bg-dark-gray position-relative pb-0">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="container position-relative">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 text-center">
|
||
|
|
<h2 class="alt-font text-white text-uppercase">Upcoming shows</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-lg-10 pt-25px pb-30px border-bottom border-color-transparent-white-light tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center">
|
||
|
|
<span class="fw-600 text-uppercase text-white">22 Jul</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5 col-xl-6 text-center text-md-start sm-mb-15px">
|
||
|
|
<a href="demo-music-onepage.html#" class="text-white">Videotron center</a>
|
||
|
|
<span class="fs-16 d-block lh-15 mt-5px">Manhadtan, NY, United States</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2 text-center sm-mb-10px">
|
||
|
|
<span class="pt-5px pb-5px ps-15px pe-15px border-radius-100px text-uppercase bg-black-russian-gray fs-12 fw-700">Sold out</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 col-xl-2 text-center">
|
||
|
|
<a href="demo-music-onepage.html#" class="btn btn-link btn-hover-animation-switch btn-large text-base-color primary-font fw-700">
|
||
|
|
<span>
|
||
|
|
<span class="btn-text">Buy tickets</span>
|
||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-10 pt-25px pb-30px border-bottom border-color-transparent-white-light tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center">
|
||
|
|
<span class="fw-600 text-uppercase text-white">08 Aug</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5 col-xl-6 text-center text-md-start sm-mb-15px">
|
||
|
|
<a href="demo-music-onepage.html#" class="text-white">Spotify on stage</a>
|
||
|
|
<span class="fs-16 d-block lh-15 mt-5px">Suncorp stadium, Brisbane, Australia</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 col-xl-2 text-center">
|
||
|
|
<a href="demo-music-onepage.html#" class="btn btn-link btn-hover-animation-switch btn-large text-base-color primary-font fw-700">
|
||
|
|
<span>
|
||
|
|
<span class="btn-text">Buy tickets</span>
|
||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-10 pt-25px pb-30px border-bottom border-color-transparent-white-light tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center">
|
||
|
|
<span class="fw-600 text-uppercase text-white">28 Aug</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5 col-xl-6 text-center text-md-start sm-mb-15px">
|
||
|
|
<a href="demo-music-onepage.html#" class="text-white">Halloween bitchy land</a>
|
||
|
|
<span class="fs-16 d-block lh-15 mt-5px">Mediolanum forum, Milan, Italy</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2 text-center sm-mb-10px">
|
||
|
|
<span class="pt-5px pb-5px ps-15px pe-15px border-radius-100px text-uppercase bg-black-russian-gray fs-12 fw-700">Sold out</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 col-xl-2 text-center">
|
||
|
|
<a href="demo-music-onepage.html#" class="btn btn-link btn-hover-animation-switch btn-large text-base-color primary-font fw-700">
|
||
|
|
<span>
|
||
|
|
<span class="btn-text">Buy tickets</span>
|
||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-10 pt-25px pb-30px tracklist-style transition">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-2 text-center">
|
||
|
|
<span class="fw-600 text-uppercase text-white">06 Sep</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5 col-xl-6 text-center text-md-start sm-mb-15px">
|
||
|
|
<a href="demo-music-onepage.html#" class="text-white">Cornelius - singha light</a>
|
||
|
|
<span class="fs-16 d-block lh-15 mt-5px">Odyssey, Belfast, United Kingdom</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 col-xl-2 text-center">
|
||
|
|
<a href="demo-music-onepage.html#" class="btn btn-link btn-hover-animation-switch btn-large text-base-color primary-font fw-700">
|
||
|
|
<span>
|
||
|
|
<span class="btn-text">Buy tickets</span>
|
||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
|
|
<span class="btn-icon"><i class="fa-solid fa-arrow-right"></i></span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="bg-dark-gray position-relative overflow-hidden">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="container position-relative">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-5 d-none d-md-inline-block">
|
||
|
|
<div class="outside-box-left-30">
|
||
|
|
<div data-bottom-top="transform:scale(1, 1) translate3d(0px, 0px, 0px);" data-top-bottom="transform:scale(1, 1) translate3d(-200px, 0px, 0px);">
|
||
|
|
<span class="fs-250 fw-600 text-black-russian-gray alt-font text-uppercase text-nowrap">Countdown</span>
|
||
|
|
</div>
|
||
|
|
<div class="bg-yellow w-150px h-150px d-flex align-items-center justify-content-center border-radius-100 position-absolute top-minus-70px left-minus-150px xl-left-0px text-center" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
|
||
|
|
<h4 class="text-dark-gray alt-font text-uppercase fw-700 mb-0 w-80 mx-auto lh-34 position-relative top-5px">Next event</h4>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-5 col-lg-6 col-md-7 offset-xl-1 position-relative last-paragraph-no-margin text-center text-md-start">
|
||
|
|
<h6 class="alt-font text-base-color text-uppercase mb-20px">Next Event in New york, USA</h6>
|
||
|
|
<div class="d-flex countdown-style-03 justify-content-center justify-content-md-start">
|
||
|
|
<div data-enddate="2024/08/08 12:00:00" class="countdown"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section id="awards" class="bg-base-color position-relative">
|
||
|
|
<div class="absolute-middle-center mt-minus-50px"><img src="images/demo-music-onepage-bg-03.png" alt /></div>
|
||
|
|
<div class="container position-relative">
|
||
|
|
<div class="row mb-3">
|
||
|
|
<div class="col-12 text-center">
|
||
|
|
<h2 class="alt-font fw-600 text-dark-gray text-uppercase">Achievements</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center border border-1 border-color-dark-gray g-0 mb-5">
|
||
|
|
|
||
|
|
<div class="col icon-with-text-style-07">
|
||
|
|
<div class="hover-box dark-hover feature-box ps-17 pe-17 lg-ps-12 lg-pe-12 pt-23 pb-23 overflow-hidden border-end xs-border-end-0 md-border-bottom border-color-dark-gray">
|
||
|
|
<span class="alt-font fs-24 text-uppercase text-dark-gray position-absolute right-25px top-20px">2017</span>
|
||
|
|
<div class="feature-box-icon">
|
||
|
|
<i class="fa-brands fa-apple icon-double-large text-dark-gray mb-20px"></i>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content">
|
||
|
|
<span class="text-uppercase fs-16 lh-24 text-dark-gray fw-700 d-block w-85 mx-auto">Apple music awards</span>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-overlay bg-dark-gray"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col icon-with-text-style-07">
|
||
|
|
<div class="hover-box dark-hover feature-box ps-17 pe-17 lg-ps-12 lg-pe-12 pt-23 pb-23 overflow-hidden border-end md-border-end-0 md-border-bottom border-color-dark-gray">
|
||
|
|
<span class="alt-font fs-24 text-uppercase text-dark-gray position-absolute right-25px top-20px">2019</span>
|
||
|
|
<div class="feature-box-icon">
|
||
|
|
<i class="fa-brands fa-google-play icon-double-large text-dark-gray mb-20px"></i>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content">
|
||
|
|
<span class="text-uppercase fs-16 lh-24 text-dark-gray fw-700 d-block w-85 mx-auto">Google musical Oscar 2023</span>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-overlay bg-dark-gray"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col icon-with-text-style-07">
|
||
|
|
<div class="hover-box dark-hover feature-box ps-17 pe-17 lg-ps-12 lg-pe-12 pt-23 pb-23 overflow-hidden border-end xs-border-end-0 xs-border-bottom border-color-dark-gray">
|
||
|
|
<span class="alt-font fs-24 text-uppercase text-dark-gray position-absolute right-25px top-20px">2020</span>
|
||
|
|
<div class="feature-box-icon">
|
||
|
|
<i class="fa-brands fa-microblog icon-double-large text-dark-gray mb-20px"></i>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content">
|
||
|
|
<span class="text-uppercase fs-16 lh-24 text-dark-gray fw-700 d-block w-85 mx-auto">Achievements of musicians</span>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-overlay bg-dark-gray"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col icon-with-text-style-07">
|
||
|
|
<div class="hover-box dark-hover feature-box ps-17 pe-17 lg-ps-12 lg-pe-12 pt-23 pb-23 overflow-hidden">
|
||
|
|
<span class="alt-font fs-24 text-uppercase text-dark-gray position-absolute right-25px top-20px">2021</span>
|
||
|
|
<div class="feature-box-icon">
|
||
|
|
<i class="fa-brands fa-youtube icon-double-large text-dark-gray mb-20px"></i>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content">
|
||
|
|
<span class="text-uppercase fs-16 lh-24 text-dark-gray fw-700 d-block w-85 mx-auto">Significant music awards</span>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-overlay bg-dark-gray"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="row row-cols-1 justify-content-center counter-style-06">
|
||
|
|
|
||
|
|
<div class="col feature-box">
|
||
|
|
<div class="feature-box-content">
|
||
|
|
<div class="counter-number alt-font text-dark-gray counter fs-200 fw-700 ls-minus-1px position-relative top-20px" data-speed="2000" data-to="15"></div>
|
||
|
|
<span class="counter-title fs-19 text-white ls-4px fw-700 text-uppercase ps-15px pe-15px">years live band experience</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="bg-dark-gray position-relative pb-0">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<img src="images/demo-music-onepage-bg-04.png" class="absolute-top-center" alt />
|
||
|
|
<div class="container">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-12 text-center z-index-1">
|
||
|
|
<h2 class="alt-font text-white text-uppercase">Lovers testimonials</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-center mb-8 sm-mb-40px">
|
||
|
|
<div class="col-lg-10 testimonials-style-10 position-relative ps-8 pe-8 swiper-number-pagination-progress" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<div class="swiper magic-cursor light pb-5" data-slider-options="{ "loop": true, "keyboard": { "enabled": true, "onlyInViewport": true }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "pagination": { "el": ".swiper-number-line-pagination", "clickable": true }, "navigation": { "nextEl": ".swiper-button-next-nav", "prevEl": ".swiper-button-previous-nav", "effect": "fade" } }" data-swiper-number-pagination-progress="true">
|
||
|
|
<div class="swiper-wrapper">
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="d-flex flex-column">
|
||
|
|
<div class="align-self-center text-center w-80 last-paragraph-no-margin">
|
||
|
|
<h5 class="fw-100 lh-44 alt-font mb-0 ls-0px">Thanks Jean for arranging the such amazing band, grateful to have the team in my wedding, thanks for creating such a romantic atmosphere for us! <span class="text-base-color d-inline-block">- Herman miller</span></h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="d-flex flex-column">
|
||
|
|
<div class="align-self-center text-center w-80 last-paragraph-no-margin">
|
||
|
|
<h5 class="fw-100 lh-44 alt-font mb-0 ls-0px">Our guests love your performance so much! Hope to see you guys again on my baby's hundred days banquet!!! Everyone loved your wonderful live band performance! <span class="text-base-color d-inline-block">- Jonsan donner</span></h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<div class="d-flex flex-column">
|
||
|
|
<div class="align-self-center text-center w-80 last-paragraph-no-margin">
|
||
|
|
<h5 class="fw-100 lh-44 alt-font mb-0 ls-0px">Thank you for being there and playing all these lovely and sweet songs from my favourite song lists! Music for the performance during my wedding! <span class="text-base-color d-inline-block">- Mackangy rose</span></h5>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="swiper-pagination-wrapper d-flex align-items-center justify-content-center">
|
||
|
|
<div class="number-prev"></div>
|
||
|
|
<div class="swiper-pagination-progress bg-aluminium-grey">
|
||
|
|
<span class="swiper-progress"></span>
|
||
|
|
</div>
|
||
|
|
<div class="number-next"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-button-previous-nav swiper-button-prev border border-1 border-color-transparent-white-light w-60px h-60px border-radius-100px"><i class="feather icon-feather-arrow-left fs-22 text-white"></i></div>
|
||
|
|
<div class="swiper-button-next-nav swiper-button-next border border-1 border-color-transparent-white-light w-60px h-60px border-radius-100px"><i class="feather icon-feather-arrow-right fs-22 text-white"></i></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row align-items-center justify-content-center row-cols-3 row-cols-md-5 row-cols-sm-3 instagram-follow-api position-relative">
|
||
|
|
<div class="col instafeed-grid sm-mb-30px">
|
||
|
|
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-music-onepage-instagram-01.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
|
|
</div>
|
||
|
|
<div class="col instafeed-grid sm-mb-30px">
|
||
|
|
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-music-onepage-instagram-02.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
|
|
</div>
|
||
|
|
<div class="col instafeed-grid sm-mb-30px">
|
||
|
|
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-music-onepage-instagram-03.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
|
|
</div>
|
||
|
|
<div class="col instafeed-grid">
|
||
|
|
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-music-onepage-instagram-04.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
|
|
</div>
|
||
|
|
<div class="col instafeed-grid">
|
||
|
|
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-music-onepage-instagram-05.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
|
|
</div>
|
||
|
|
<div class="absolute-middle-center z-index-1 w-auto">
|
||
|
|
<a href="https://www.instagram.com" target="_blank" class="btn btn-small btn-switch-text btn-dark-gray btn-round-edge fw-700 left-icon btn-box-shadow instagram-button">
|
||
|
|
<span>
|
||
|
|
<span><i class="fa-brands fa-instagram fs-17"></i></span>
|
||
|
|
<span class="btn-double-text primary-font" data-text="Instagram">Instagram</span>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section id="contact" class="bg-dark-gray position-relative overflow-hidden">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="container position-relative">
|
||
|
|
<div class="row align-items-end text-center text-md-start">
|
||
|
|
<div class="col-lg-3 col-md-4 last-paragraph-no-margin" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<h2 class="alt-font text-white text-uppercase">Let's talk?</h2>
|
||
|
|
<p class="lh-28">We are here to answer any question you may have.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-4" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
|
|
<p class="w-75 xl-w-100 lh-28">Midnight vibration band 401 Broadway, 24th Floor, Orchard view, London</p>
|
||
|
|
<div class="d-flex align-items-center text-white justify-content-center justify-content-md-start">
|
||
|
|
<i class="feather icon-feather-phone align-middle me-10px"></i>
|
||
|
|
<span><a href="tel:1800222000">1-800-222-000</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-5 offset-lg-1 col-md-4">
|
||
|
|
<div class="outside-box-right-30 d-none d-md-inline-block">
|
||
|
|
<div class="d-none d-lg-inline-block" data-bottom-top="transform:scale(1, 1) translate3d(-60px, 0px, 0px);" data-top-bottom="transform:scale(1, 1) translate3d(60px, 0px, 0px);">
|
||
|
|
<span class="fs-250 fw-600 text-black-russian-gray alt-font text-uppercase text-nowrap">Contact band</span>
|
||
|
|
</div>
|
||
|
|
<div class="bg-yellow w-150px h-150px d-flex align-items-center justify-content-center border-radius-100 position-absolute top-minus-70px right-minus-150px xl-right-0px text-center" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)"><h4 class="text-dark-gray alt-font text-uppercase fw-700 mb-0 w-80 mx-auto lh-34 position-relative top-5px">Live band</h4></div>
|
||
|
|
<a href="cdn-cgi/l/email-protection.html#2d44435c58445f546d4e5f4c4b5942034e4240" class="fs-15 text-base-color text-uppercase ls-1px fw-600"><span class="__cf_email__" data-cfemail="93fafde2e6fae1ead3f0e1f2f5e7fcbdf0fcfe">[email protected]</span></a> <span class="w-120px h-1px bg-base-color d-none d-lg-inline-block align-middle position-relative top-minus-1px ms-10px lg-w-70px"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="cover-background footer-sticky" style="background-image: url('images/demo-music-onepage-footer-bg-img.jpg')">
|
||
|
|
<div class="background-position-left-top h-100 w-100 position-absolute left-0px top-0 d-none d-md-block" style="background-image: url('images/demo-music-onepage-vertical-line-bg.svg')"></div>
|
||
|
|
<div class="container position-relative ">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 mb-20px elements-social social-icon-style-10">
|
||
|
|
<ul class="fs-14 ls-1px fw-600 text-center light text-uppercase">
|
||
|
|
<li class="me-30px"><a class="spotify" href="https://open.spotify.com/" target="_blank">
|
||
|
|
<i class="fa-brands fa-spotify me-5px"></i>
|
||
|
|
<span>Spotify</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="me-30px">
|
||
|
|
<a class="itunes" href="https://www.apple.com/in/itunes/" target="_blank">
|
||
|
|
<i class="fa-brands fa-apple me-5px"></i>
|
||
|
|
<span>Itunes</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="me-30px">
|
||
|
|
<a class="youtube" href="https://www.youtube.com/" target="_blank">
|
||
|
|
<i class="fa-brands fa-youtube me-5px"></i>
|
||
|
|
<span>Youtube</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="me-30px">
|
||
|
|
<a class="soundcloud" href="https://soundcloud.com/" target="_blank">
|
||
|
|
<i class="fa-brands fa-soundcloud me-5px"></i>
|
||
|
|
<span>Soundcloud</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="instagram" href="https://www.instagram.com" target="_blank">
|
||
|
|
<i class="fa-brands fa-instagram me-5px"></i>
|
||
|
|
<span>Instagram</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 text-center fs-15 last-paragraph-no-margin">
|
||
|
|
<p>© 2024 Crafto is proudly powered by <a href="https://www.themezaa.com/" target="_black" class="text-white text-decoration-line-bottom">ThemeZaa</a></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="scroll-progress d-none d-xxl-block">
|
||
|
|
<a href="demo-music-onepage.html#" class="scroll-top" aria-label="scroll">
|
||
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
||
|
|
<script type="text/javascript" src="js/main.js"></script>
|
||
|
|
|
||
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DND93RJKBT"></script>
|
||
|
|
<script>
|
||
|
|
window.dataLayer = window.dataLayer || [];
|
||
|
|
function gtag(){dataLayer.push(arguments);}
|
||
|
|
gtag('js', new Date());
|
||
|
|
|
||
|
|
gtag('config', 'G-DND93RJKBT');
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|