Melodica is a web template designed for those who want to create personal websites using HTML. This documentation aims to provide basic information about using the Melodica template.
Odyssey is easy to use and completely responsive, so you don’t need to have a lot of experience in HTML, CSS, and JavaScript to design a website. With Odyssey, you can easily create your own personal website.
In this documentation, we will try to explain all the steps needed to use the Melodica template in detail. We will also explain the features of each page and section and how to customize them.
We hope this documentation helps you easily create your own personal website using the Odyssey template. Good luck!
You can be found here all updates to the template
The top sections and footer sections of all html pages are the same. The difference in files structure will be in the inner page. Other than that, HTML structure is the same for all pages. Home pages have hero image at the top and other pages have page title.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Melodica - Musician & Band Template</title>
<meta charset="UTF-8">
<meta name="description" content="Melodica - Musician & Band Templatee">
<meta name="keywords" content="musician, band, dj">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/css/bootstrap-grid.min.css"/>
<link rel="stylesheet" href="assets/css/plugins.css"/>
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css"/>
<!-- Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<!-- Font icons -->
<link rel="stylesheet" href="assets/icon-fonts/fontawesome/css/all.min.css"/>
<link rel="stylesheet" href="assets/icon-fonts/remixicon/remixicon.css"/>
</head>
<body>
<div class="preloader"></div>
<div class="tavonline-overlay"></div>
<div class="site-wrap" data-barba="wrapper">
<main id="main" data-barba="container">
<!-- HEADER
============================================= -->
<header class="type-1">
<div class="header-container">
<div class="row px-0 gx-0">
<div class="col-xl-2 col-md-6 col-6">
<a href="index.html"><img src="assets/images/logo.png" alt="logo"></a>
</div>
<div class="col-xl-8 col-md-3 d-none d-xl-block align-center">
<nav>
<ul>
<li class="menu-item-has-children">
<a href="index.html"><span data-hover="Home">Home</span></a>
<ul class="sub">
<li><a href="index.html">Home 1</a></li>
<li><a href="demo-2.html">Home 2</a></li>
<li><a href="demo-3.html">Home 3</a></li>
<li><a href="demo-4.html">Home 4</a></li>
<li><a href="demo-5.html">Home 5</a></li>
<li><a href="demo-6.html">Home 6</a></li>
<li><a href="demo-7.html">Home 7</a></li>
<li><a href="demo-8.html">Home 8</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="discography.html"><span data-hover="Discography">Discography</span></a>
<ul class="sub">
<li><a href="discography.html">Albums</a></li>
<li><a href="single-album.html">Single Album</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span data-hover="Events">Events</span></a>
<ul class="sub">
<li><a href="events.html">All Events</a></li>
<li><a href="single-event.html">Single Event</a></li>
</ul>
</li>
<li><a href="gallery.html"><span data-hover="Gallery">Gallery</span></a></li>
<li class="menu-item-has-children">
<a href="video-gallery.html"><span data-hover="Videos">Videos</span></a>
<ul class="sub">
<li><a href="video-gallery.html">Video Gallery</a></li>
<li><a href="single-video.html">Single Video</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="shop-page.html"><span data-hover="Shop">Shop</span></a>
<ul class="sub">
<li><a href="shop-page.html">All Products</a></li>
<li><a href="single-product.html">Single Product</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="shop-page.html"><span data-hover="News">News</span></a>
<ul class="sub">
<li class="active"><a href="news-page.html">All News</a></li>
<li><a href="single-news.html">Single News</a></li>
</ul>
</li>
<li><a href="contact.html"><span data-hover="Contact">Contact</span></a></li>
</ul>
</nav>
</div>
<div class="col-xl-2 col-md-6 col-6">
<div class="hamburger-menu mobile">
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="shop-button">
<span>2</span>
<i class="ri-shopping-bag-fill"></i>
</div>
</div>
</div>
</div>
</header>So how this layout work? First we have header which contains logo and hamburger icon. There are two header, one is fixed and the other is moving with us as the page scrolls. When changing the logo, remember to change both. After that we have right bar items(social icons, up to top button) and full menu. And then we have page content. Inside of it you can place your real content – columns. Every page content have container which can be classes “container”. Inside of a container there is a row. inside of a row you are placing columns – your content. Every row is one visual row which can contain columns where sum of the classes numbers is equal 12. That means you can have col-lg-6 and col-lg-6 in one row, for example. Or you can have three times col-lg-4. For more about how grid works you can visit official bootstrap pages as this template is based on Bootstrap’s grid.
All .css files are placed in “assets/css” folder. Melodica includes following css files:
In this section we will present you all js files that are used in this template.
Here we will explain how to customize all sections. (If you do not want to deal with customization, you can send us all your pictures and contents, you can get hire us for customizations)
In this section we will present you and explain grid system used.
Melodica is based on Bootstrap Grid System. So what you need to know about using this grid system? First of all, every column, or page section must have it’s container. That is div with class “container”. Inside of it there must be div or section with class “row”. Inside one row, you put your columns. One row is actually one row visually. That means that column with class .col-lg-12 will go inside one row. In row below that column can be another row that is containing for example .col-lg-4 and col-lg-8.
How do you combine columns? As there are 12 columns, sum of it’s classes numbers must be 12. That is, in one row can go col-lg-7 and col-lg-5, or col-lg-3 and col-lg-9, and so on. Important thing to remember is that inside one row can go columns which sum is 12. Every row has it’s bottom margin, which is 70px. So it is important to remember that one row is including only one visual row of columns. You can also use nested columns. For example you can have col-lg-9 (like on the page with sidebar) and inside of it you can place a row that containes two col-lg-6 columns. That columns inside will be half wide of it’s parent column. Inside of these columns you can put your content.
In the Melodica HTML template, pages are sections within the same HTML file. The main menus are located within index.html. These pages transition with JavaScript animations.
<!-- HEADER
============================================= -->
<header class="type-1">
<div class="header-container">
<div class="row px-0 gx-0">
<div class="col-xl-2 col-md-6 col-6">
<a href="index.html"><img src="assets/images/logo.png" alt="logo"></a>
</div>
<div class="col-xl-8 col-md-3 d-none d-xl-block align-center">
<nav>
<ul>
<li class="menu-item-has-children">
<a href="index.html"><span data-hover="Home">Home</span></a>
<ul class="sub">
<li><a href="index.html">Home 1</a></li>
<li><a href="demo-2.html">Home 2</a></li>
<li><a href="demo-3.html">Home 3</a></li>
<li><a href="demo-4.html">Home 4</a></li>
<li><a href="demo-5.html">Home 5</a></li>
<li><a href="demo-6.html">Home 6</a></li>
<li><a href="demo-7.html">Home 7</a></li>
<li><a href="demo-8.html">Home 8</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="discography.html"><span data-hover="Discography">Discography</span></a>
<ul class="sub">
<li><a href="discography.html">Albums</a></li>
<li><a href="single-album.html">Single Album</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span data-hover="Events">Events</span></a>
<ul class="sub">
<li><a href="events.html">All Events</a></li>
<li><a href="single-event.html">Single Event</a></li>
</ul>
</li>
<li><a href="gallery.html"><span data-hover="Gallery">Gallery</span></a></li>
<li class="menu-item-has-children">
<a href="video-gallery.html"><span data-hover="Videos">Videos</span></a>
<ul class="sub">
<li><a href="video-gallery.html">Video Gallery</a></li>
<li><a href="single-video.html">Single Video</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="shop-page.html"><span data-hover="Shop">Shop</span></a>
<ul class="sub">
<li><a href="shop-page.html">All Products</a></li>
<li><a href="single-product.html">Single Product</a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="shop-page.html"><span data-hover="News">News</span></a>
<ul class="sub">
<li class="active"><a href="news-page.html">All News</a></li>
<li><a href="single-news.html">Single News</a></li>
</ul>
</li>
<li><a href="contact.html"><span data-hover="Contact">Contact</span></a></li>
</ul>
</nav>
</div>
<div class="col-xl-2 col-md-6 col-6">
<div class="hamburger-menu mobile">
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="shop-button">
<span>2</span>
<i class="ri-shopping-bag-fill"></i>
</div>
</div>
</div>
</div>
</header>Under each <!-- a comment --> comment line, you can see and edit the corresponding comment.
<!-- TESTIMONIALS -->
<div class="testimonials">
<div class="section-title">
<h4>Client Comments</h4>
<svg viewBox="0 0 312 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.76926 10.172C9.21204 10.172 11.7711 10.0661 14.2139 9.96011C15.2608 9.96011 16.1914 9.85415 17.2383 9.85415C21.6586 9.64223 26.0788 9.43032 30.4991 9.2184C35.8499 9.00648 41.0845 8.68861 46.4353 8.47669C53.9963 8.05285 61.5572 7.73498 69.1182 7.31114C70.8631 7.20518 72.6079 7.20518 74.3527 7.09923C78.773 6.88731 83.1933 6.67539 87.6135 6.56943C92.0338 6.35752 96.454 6.1456 100.874 6.03964C102.619 5.93368 104.364 5.82772 106.109 5.82772C113.088 5.61581 120.184 5.40389 127.163 5.19197C131.467 5.08601 135.771 4.98005 140.191 4.76814C141.936 4.76814 143.565 4.66218 145.31 4.66218C152.056 4.55622 158.919 4.45026 165.666 4.3443C172.413 4.23834 179.043 4.13239 185.79 4.02643C187.535 4.02643 189.28 4.02643 191.141 4.02643C195.561 4.02643 199.865 4.02643 204.285 4.02643C211.148 4.02643 217.895 4.02643 224.758 3.92047C226.968 3.92047 229.178 3.92047 231.388 3.92047C236.041 3.92047 240.694 3.92047 245.347 3.92047C245.696 3.92047 246.161 3.92047 246.51 3.92047C236.041 4.02643 225.456 4.13239 214.987 4.3443C210.567 4.45026 206.263 4.45026 201.842 4.55622C199.981 4.55622 198.004 4.55622 196.143 4.66218C189.745 4.76814 183.463 4.98005 177.066 5.08601C169.737 5.29793 162.409 5.40389 155.081 5.61581C153.801 5.61581 152.638 5.72176 151.358 5.72176C147.403 5.93368 143.565 6.03964 139.61 6.25156C131.7 6.56943 123.79 6.88731 115.88 7.20518C114.717 7.20518 113.553 7.31114 112.39 7.4171C108.552 7.62902 104.597 7.9469 100.758 8.15881C93.7786 8.58265 86.9156 9.00648 79.9362 9.43032C78.0751 9.53627 76.0976 9.74819 74.2364 9.85415C69.8162 10.172 65.3959 10.4899 60.9756 10.9137C55.3921 11.3376 49.6923 11.7614 44.1088 12.1852C36.3152 12.821 28.4053 13.4567 20.6117 14.0925C18.7505 14.1985 16.8893 14.4104 14.9118 14.5163C11.5385 14.8342 8.16513 15.1521 4.79178 15.47C4.44281 15.47 4.09384 15.6819 4.09384 16.1057C4.09384 16.4236 4.44281 16.7415 4.79178 16.7415C6.07132 16.7415 7.23455 16.8474 8.5141 16.8474C8.28146 17.3772 8.16513 17.6951 8.16513 18.013C8.16513 19.1785 9.21204 20.2381 10.6079 20.2381C20.2627 19.7083 29.8012 19.0725 39.4559 18.6487C47.8312 18.3308 56.2064 17.907 64.5816 17.5891C73.7711 17.1653 83.0769 16.7415 92.2664 16.4236C95.1745 16.3176 98.0826 16.2117 100.991 15.9997C101.805 15.9997 102.619 15.8938 103.55 15.8938C118.439 15.5759 133.328 15.1521 148.218 14.8342C156.128 14.6223 164.154 14.4104 172.064 14.3044C174.972 14.1985 177.764 14.1985 180.672 14.0925C195.91 13.8806 211.148 13.6687 226.386 13.4567C232.901 13.3508 239.415 13.2448 245.929 13.1389C251.512 13.0329 257.096 13.0329 262.679 12.821C267.332 12.715 271.869 12.5031 276.522 12.3972C278.848 12.2912 281.174 12.2912 283.385 12.1852C288.619 11.8674 293.854 11.5495 299.088 11.2316C298.739 11.6554 298.739 12.2912 298.855 12.715C298.972 13.2448 299.321 13.6687 299.902 13.8806C300.368 14.0925 301.066 14.3044 301.531 14.0925C302.694 13.6687 303.857 13.2448 304.904 12.821C304.904 12.821 304.904 12.821 304.788 12.821C304.904 12.821 304.904 12.715 305.021 12.715C305.137 12.715 305.253 12.6091 305.253 12.6091H305.137C305.719 12.3972 306.3 12.1852 306.998 11.8674C307.58 11.6554 308.278 11.3376 308.859 11.1257C309.557 10.8078 310.139 10.4899 310.837 10.172C311.535 9.85415 312 9.00648 312 8.26477C312 7.84094 311.884 7.52306 311.651 7.09923C311.418 6.67539 310.837 6.1456 310.255 6.03964C309.674 5.93368 309.092 5.82772 308.51 5.82772C308.394 5.82772 308.278 5.82772 308.161 5.82772C307.812 5.82772 307.347 5.82772 306.998 5.93368C306.068 6.03964 305.253 6.1456 304.323 6.1456C303.625 6.1456 302.927 6.25156 302.113 6.25156C300.135 6.35752 298.274 6.46347 296.296 6.67539C295.831 6.67539 295.25 6.78135 294.784 6.78135C295.017 6.56943 295.133 6.35752 295.133 6.1456C295.25 5.93368 295.25 5.72176 295.25 5.50985C295.25 5.40389 295.25 5.19197 295.366 5.08601C295.366 4.8741 295.366 4.66218 295.25 4.55622C295.25 4.55622 295.366 4.55622 295.366 4.45026C295.715 4.23834 296.064 4.02643 296.296 3.60259C296.529 3.28472 296.645 2.86088 296.645 2.43705C296.645 2.01321 296.529 1.69534 296.296 1.2715C296.18 1.16554 296.064 0.953627 295.947 0.847669C295.598 0.529793 295.25 0.423834 294.901 0.317876C294.203 0.105959 293.388 0 292.574 0C291.876 0 291.295 0 290.597 0C289.666 0 288.735 0 287.805 0C286.525 0 285.129 0 283.85 0C280.36 0 276.871 0 273.381 0C270.124 0 266.75 0 263.493 0C260.469 0 257.561 0 254.537 0C242.555 0 230.69 0.105959 218.709 0.211917C209.752 0.317876 200.795 0.423834 191.839 0.423834C187.884 0.423834 183.812 0.529793 179.857 0.635752C170.901 0.847669 161.944 0.953627 152.987 1.16554C150.428 1.16554 147.869 1.2715 145.31 1.2715C143.797 1.2715 142.402 1.37746 140.889 1.37746C132.049 1.69534 123.208 2.01321 114.368 2.33109C111.692 2.43705 109.017 2.54301 106.225 2.64897C104.713 2.64897 103.201 2.75492 101.689 2.86088C92.848 3.28472 84.1238 3.70855 75.2833 4.13239C70.7467 4.3443 66.2102 4.55622 61.6736 4.8741C53.8799 5.29793 46.0863 5.72176 38.409 6.25156C31.6623 6.67539 24.9156 6.99327 18.1689 7.31114C17.122 7.4171 16.0751 7.4171 14.9118 7.52306C13.167 7.62902 11.4222 7.62902 9.67733 7.73498C8.16513 8.15881 6.53662 8.15881 5.02442 8.15881C4.9081 7.73498 4.44281 7.4171 4.09384 7.52306C3.04693 7.52306 2.11635 7.62902 1.06945 7.73498C0.604158 7.84094 0.138868 8.05285 0.0225451 8.47669C-0.0937776 9.00648 0.25519 9.53627 0.720481 9.64223C1.18577 9.74819 1.65106 9.85415 2.11635 9.96011C2.58164 10.0661 2.93061 10.0661 3.3959 10.0661C4.55913 10.172 5.60603 10.172 6.76926 10.172ZM278.964 6.78135C280.36 6.78135 281.872 6.78135 283.268 6.78135C283.385 7.09923 283.617 7.31114 283.85 7.52306C283.268 7.52306 282.687 7.62902 282.221 7.62902C281.174 7.62902 280.128 7.73498 279.081 7.73498C274.428 7.84094 269.891 8.05285 265.238 8.15881C263.144 8.26477 261.051 8.37073 258.957 8.37073C255.7 8.37073 252.326 8.47669 249.069 8.47669C241.508 8.58265 234.064 8.68861 226.503 8.79456C211.846 9.00648 197.306 9.2184 182.649 9.43032C172.18 9.53627 161.711 9.85415 151.242 10.172C135.538 10.5959 119.719 10.9137 104.015 11.3376C100.874 11.4435 97.7336 11.5495 94.5929 11.7614C85.636 12.1852 76.6792 12.5031 67.7224 12.9269C58.9981 13.3508 50.1576 13.6687 41.4334 14.0925C40.6192 14.0925 39.8049 14.1985 38.9906 14.1985C41.3171 13.9865 43.7599 13.8806 46.0863 13.6687C54.3452 13.1389 62.6042 12.5031 70.8631 11.9733C73.7711 11.7614 76.6792 11.5495 79.4709 11.3376C80.9831 11.2316 82.4953 11.1257 83.8912 11.1257C92.6154 10.7018 101.223 10.172 109.831 9.74819C111.46 9.64223 113.205 9.53627 114.833 9.43032C117.276 9.32436 119.719 9.2184 122.045 9.2184C130.886 8.90052 139.726 8.58265 148.567 8.26477C150.544 8.15881 152.522 8.15881 154.383 8.05285C154.848 8.05285 155.43 8.05285 155.895 8.05285C157.291 8.05285 158.687 8.05285 159.966 7.9469C168.807 7.73498 177.764 7.62902 186.604 7.4171C190.675 7.31114 194.747 7.20518 198.818 7.20518C211.962 7.09923 225.223 6.99327 238.368 6.88731C252.094 6.88731 265.587 6.78135 278.964 6.78135Z" />
<path d="M24.1953 25C24.547 25 24.8321 24.7335 24.8321 24.4048C24.8321 24.0761 24.547 23.8096 24.1953 23.8096C23.8437 23.8096 23.5586 24.0761 23.5586 24.4048C23.5586 24.7335 23.8437 25 24.1953 25Z"/>
</svg>
</div>
<div class="owl-carousel owl-theme client-comments">
<!-- a comment -->
<div class="item">
<div class="rates">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
<p class="body-two text">“I could probably go into sales for you. We’ve used Super plumbers for the last five years.”</p>
<div class="author">
<p class="name body-two">Edie A.</p>
<p class="job body-three">Founder @Tavonline</p>
</div>
</div>
<!-- a comment -->
<div class="item">
<div class="rates">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
<p class="body-two text">"We were treated like royalty. Definitely worth the investment. Odyssey is exactly what our business has been lacking."</p>
<div class="author">
<p class="name body-two">Roland Holmes</p>
<p class="job body-three">Founder @Envato</p>
</div>
</div>The images used in the preview are not included in the download files. You can see some of them used below
Thank you for purchasing Mosby. We hope this file helped you with customizations and setting up your site. however if you have any questions or would like to hire us for customizations please email us