Symphonius — Music Band HTML Template

  • Created: 18-02-2020
  • By: the-nika
  • Thank you for purchasing this template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
  • NOTE: All images used here are just for preview purpose only & they are not included in main file.

Folder structure

This is folder structure and some files of template. 

Template
├── css/
│   ├── styles.css
│   └── uikit.min.css
├── img/
│   ├── albums/
│   ├── favicons/
│   ├── icons/
│   ├── news/
│   ├── slider/
│   ├── team/
|   │   ├── avatars/
|   │   └── covers/
│   └── video/
├── js/
|   ├── jquery.min.js
|   ├── mediaelement-and-player.min.js
|   ├── scripts.js
│   └── uikit.min.js
├── index.html
└── mail.php

HTML Structure

Symphonius Template bases on UIKit framework. Follow instruction on UIkit to make changes on code correctly.

HTML code placed in index.html file. I recommend edit it in web code editor (Sublime Text, Notepad++, Brackets etc.).

NOTE: This file use UTF-8 coding. Use the editor with UTF-8 support to avoid problems with unreadable symbols.

General Structure

Some code structure of index.html below. 

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <!-- .......... Title .......... -->
    <title>...</title>
    <!-- .......... Fonts and Extras .......... -->
    <link rel="stylesheet" href="...">
    ...
    <!-- .......... Styles .......... -->
    <link rel="stylesheet" href="...">
    ...
    <!-- .......... Favicons .......... -->
    <link rel="apple-touch-icon" sizes="180x180" href="...">
    ...
</head>
<body class="loading">
    <!-- .......... Preloader .......... -->
    <div class="js-preloader preloader"></div>
    ...
    <!-- .......... Fixed Top Panel Start .......... -->
    <header class="panel js-panel">
        ...
        <div class="logo logo--panel uk-visible@m">
            <a href="#intro" data-uk-scroll>
                <!-- .......... Logo .......... -->
                ...
            </a>
            ...
        </div>
        ...
        <!-- .......... Navigation .......... -->
        <ul class="nav nav--panel js-scrollspy-nav uk-flex uk-flex-wrap">...</ul>
        ...
        <!-- .......... Player Controls .......... -->
        <div class="panel__player">...</div>
        ...
    </header>
    <!-- .......... End Fixed Top Panel .......... -->
    <div id="offcanvas-nav" data-uk-offcanvas>
        ...
    </div>

    <!-- .......... Intro Section Start .......... -->
    <section class="intro uk-margin-large-bottom">
        ...
        <div class="logo logo--intro">
            <!-- .......... Logo .......... -->
            <img src="img/logo.svg" alt="">
            ...
        </div>
        ...
        <!-- .......... Navigation .......... -->
        <ul class="nav nav--intro uk-list">...</ul>
        <!-- .......... Social Media .......... -->
        ...
        <div class="social social--intro">...</div>
        ...
        <div class="slider slider--intro uk-position-relative" data-uk-slideshow>
            <!-- .......... Slider .......... -->
            <ul class="slider__items uk-slideshow-items">...</ul>
            ...
            <!-- .......... Slider Controls .......... -->
            <a class="slider__control" ...></a>
            ...
            <!-- .......... Slider Navigation .......... -->
            <ul class="js-slider-intro-nav uk-slideshow-nav"></ul>
            ...
            <div class="events events--intro">
                ...
                <!-- .......... Latest Events .......... -->
                <div>...</div>
                ...
            </div>
        ...
    </section>
    <!-- .......... End Intro Section .......... -->

    <!-- .......... About Us Section .......... -->
    <section id="about_us" class="about uk-section">
        ...
    </section>
    <!-- .......... End About Us Section .......... -->

    <!-- .......... Meet Team Section .......... -->
    <section class="team uk-section uk-overflow-hidden">
        ...
    </section>
    <!-- .......... End Meet Team Section .......... -->

    <!-- .......... Music Section .......... -->
    <section id="music" class="music uk-section">
        ...
    </section>
    <!-- .......... End Music Section .......... -->

    <!-- .......... Video Section .......... -->
    <section id="video" class="video uk-section">
        ...
    </section>
    <!-- .......... End Video Section .......... -->

    <!-- .......... Tour Section .......... -->
    <section id="tour" class="events uk-section">
        ...
    </section>
    <!-- .......... End Tour Section .......... -->

    <!-- .......... News Section .......... -->
    <section id="news" class="news uk-section">
        ...
    </section>
    <!-- .......... End News Section .......... -->

    <!-- .......... Contacts Section .......... -->
    <section id="contacts" class="contacts uk-section">
        ...
    </section>
    <!-- .......... End Contacts Section .......... -->

    <!-- .......... Footer .......... -->
    <footer class="footer bg-dark--1 uk-section uk-section-small">
        ...
    </footer>
    <!-- .......... End Footer .......... -->

    <!-- .......... Modal Windows .......... -->
    ...
    <div id="modal-text" data-uk-modal>...</div>
    ...
    <!-- .......... End Modal Windows .......... -->

    <!-- .......... Scripts .......... -->
    <script src="/js/jquery.min.js"></script>
    ...
    <!-- .......... End Scripts .......... -->
    
</body>
</html>

Navigation

There are three navigation block which you can edit. You need to find comments <!-- .. Navigation .. --> and <!-- .. End Navigation .. --> and edit code between them to change each navigation block.

Each attribute href of link (a) is an anchor to site section with equal id attribute value (with hash ahead). 

<!-- .......... Navigation .......... -->
<ul class="nav {SOME OTHER CLASSES HERE}">
    <li><a href="#about_us">About us</a></li>
    <li><a href="#music">Music</a></li>
    <li><a href="#video">Video</a></li>
    <li><a href="#tour">Tour</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contacts">Contacts</a></li>
</ul>
<!-- .......... End Navigation .......... -->

Social media

There are two social media lists which you can edit. You need to find comments <!-- .. Social Media .. --> and <!-- .. End Social Media .. --> and edit code between them to change each social media block.

Icons got from toolkit "Font Awesome". Here the manual how to use it:
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 

<!-- .......... Social Media .......... -->
...
<ul class="social__list uk-list uk-align-center">
    <li><a href="#" target="_blank"><span class="fab fa-facebook-f"></span></a></li>
    <li><a href="#" target="_blank"><span class="fab fa-youtube"></span></a></li>
    <li><a href="#" target="_blank"><span class="fab fa-instagram"></span></a></li>
    <li><a href="#" target="_blank"><span class="fab fa-twitter"></span></a></li>
</ul>
<!-- .......... End Social Media .......... -->

Slider of First Block

You need to find <!-- .. Slider .. --> and <!-- .. End Slider .. --> comments and edit code between them to change slider block. It contains slider control and dots navigation (find <!-- .. Slider Controls .. --> and <!-- .. Slider Navigation .. --> comments to go to those parts).

Each slide is inside li HTML element and inside div wrapper with slider__screen class attribute value. You can easily change path to slide background image (value of src attribute of img), title inside <span class="js-intro-title uk-hidden">...</span> and link path to full text of article (find href attribute of a with class="btn btn--more"). In this template articles represents in modal windows. 

<div class="slider slider--intro uk-position-relative" data-uk-slideshow="animation: push">
    <!-- .......... Slider .......... -->
    <ul class="slider__items uk-slideshow-items">
        <li>
            <div class="slider__screen">
                <div class="uk-position-cover uk-animation-kenburns uk-animation-reverse uk-transform-origin-center">
                    <img class="slider__image" src="img/slider/01.jpg" alt="" data-uk-cover>
                </div>
                <div class="slider__inner uk-position-top">
                    <div data-uk-slideshow-parallax="scale: 1,1,0.8">
                        <h2 class="intro__title">
                        	<span class="js-intro-title uk-hidden">
                        		Released a new live album, now available on iTunes
                        	</span>
                        </h2>
                        <p>
                        	<a class="btn btn--more" href="#article-1" data-uk-toggle>
                        		Read more <span class="icon icon--dots"></span>
                        	</a>
                        </p>
                    </div>
                </div>
            </div>
        </li>
        <li>

        ...

    </ul>
    <!-- .......... Slider Controls .......... -->
    <a class="slider__control" href="#" data-uk-slidenav-next data-uk-slideshow-item="next"></a>
    <!-- .......... End Slider Controls .......... -->
    <!-- .......... Slider Navigation .......... -->
    <ul class="js-slider-intro-nav uk-slideshow-nav uk-dotnav uk-flex-column uk-flex-center"></ul>
    <!-- .......... End Slider Navigation .......... -->
    <!-- .......... End Slider .......... -->
</div>

Upcoming events

You need to find <!-- .. Latest Events .. --> and <!-- .. End Latest Events .. --> comments and edit code between them to change upcoming events block. It can contain up to three event blocks (each inside own div wrapper).

You can easily change day, month, year and event location. 

<div class="events events--intro uk-position-relative uk-visible@l">
    <div class="events__grid--intro uk-child-width-1-4 uk-grid-small" data-uk-grid>
        <div class="events__title__wrap">
            <h3 class="events__title uk-h3 c-dark--4">Upcoming events</h3>
        </div>
        <!-- .......... Latest Events .......... -->
        <div>
            <a href="#tour" data-uk-scroll="offset: 80">
                <div class="events__block bg-dark--1 uk-grid-collapse" data-uk-grid>
                    <div class="events__date uk-width-auto">
                        <span class="events__day">31</span>
                        <span class="events__month">dec</span>
                        <span class="events__year">2019</span>
                    </div>
                    <div class="events__location uk-width-expand">
                        <span class="events__place">Amsterdam NL</span>
                        <span class="events__club">Ziggo Dome</span>
                    </div>
                </div>
            </a>
        </div>

        ...
        
        <!-- .......... End Latest Events .......... -->
    </div>
</div>

About Us Block

To edit About Us block you need to find <!-- .. About Us Section .. --> and <!-- .. End About Us Section .. --> comments and edit code between them. It contain text block (p inside <div class="about__info">...</div> wrapper) and image (<img class="about__photo">).

Just replace path in value of src attribute of img HTML element with your own to change the image. 

<!-- .......... About Us Section .......... -->
<section id="about_us" class="about uk-section" data-uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
    <div class="uk-container uk-container-large">
        <div class="about__grid uk-grid-collapse uk-flex" data-uk-grid>
            <div class="uk-width-1-2@s">
                <div class="about__info">
                    <h2 class="uk-h2">About us</h2>
                    <p>
                        A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
                    </p>
                    <p>
                        I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
                    </p>
                </div>
            </div>
            <div class="uk-width-1-2@s uk-flex-first@s">
                <img class="about__photo" src="img/about.jpg" data-src="img/about.jpg" alt="" data-uk-img>
            </div>
        </div>
    </div>
</section>
<!-- .......... End About Us Section .......... -->

Meet Team Block

To edit Meet Team block you need to find <!-- .. Meet Team Section .. --> and <!-- .. End Meet Team Section .. --> comments and edit code between them. It contain cards with photo, name and specialty/vocation of team members. Each card is inside div wrapper with class team__member__wrap and it contain a link to details which popup in modal window.

Just replace path in value of data-src attribute of div with class cover__photo with your own to change the photo.
Change anchor to necessary modal window in value of data-uk-toggle attribute in target parameter. 

<!-- .......... Meet Team Section .......... -->
<section class="team uk-section uk-overflow-hidden" data-uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
    <div class="container--min uk-container uk-position-relative">
        <h3 class="team__title uk-h3"><span class="team__title_inner">Meet team</span></h3>
        <div class="team__members uk-flex uk-flex-center" data-uk-grid data-uk-scrollspy="cls:uk-animation-fade; target: .team__member__wrap; delay: 300">
            <div class="team__member__wrap uk-width-1-2 uk-width-1-4@m">
                <a class="team__member" data-uk-toggle="target: #mathew_hyatt">
                    <div class="cover__photo uk-background-cover uk-transition-toggle" data-src="img/team/avatars/Mathew_Hyatt.jpg" data-uk-img>
                        <span class="cover__link boxshadow icon icon--dots uk-transition-scale-up"></span>
                    </div>
                    <span class="team__name">Mathew Hyatt</span>
                    <span class="team__vocation">Vocal, guitar</span>
                </a>
            </div>

            ...
            
        </div>
    </div>
</section>
<!-- .......... End Meet Team Section .......... -->

The code of modal window with team member profile below.

You can change easily avatar, cover image of profile window, name, specialty/vocation of team members, his/her biography/quote and links to social media profiles.

Change cover image and avatar in data-src (src) attribute value of img HTML element and div with class modal__avatar to your own.

Icons got from toolkit "Font Awesome". Here the manual how to use it:
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 

<div id="mathew_hyatt" data-uk-modal>
    <div class="modal modal__profile uk-modal-dialog uk-margin-auto-vertical">
        <div class="modal__cover uk-cover-container">
            <img src="img/team/covers/Mathew_Hyatt.jpg" data-src="img/team/covers/Mathew_Hyatt.jpg" alt="" data-uk-cover>
        </div>
        <div class="modal__content">
            <div class="modal__avatar boxshadow uk-background-cover" data-src="img/team/avatars/Mathew_Hyatt.jpg" data-uk-img></div>
            <h3 class="modal__profile__title uk-modal-title uk-text-center">Mathew Hyatt</h3>
            <div class="modal__profile__subtitle uk-text-center">Vocal, guitar</div>
            <p class="uk-text-left">
                New the her nor case that lady paid read. Invitation friendship travelling eat everything the out two. Shy you who scarcely expenses debating hastened resolved. Always polite moment on is warmth spirit it to hearts.
            </p>
            <p class="uk-text-left">
                Oh acceptance apartments up sympathize astonished delightful. Waiting him new lasting towards. Continuing melancholy especially so to. Me unpleasing impossible in attachment announcing so astonished.
            </p>
            <div class="social social--modal">
                <ul class="social__list uk-list uk-align-center">
                    <li><a href="#" target="_blank"><span class="fab fa-facebook-f"></span></a></li>
                    <li><a href="#" target="_blank"><span class="fab fa-instagram"></span></a></li>
                    <li><a href="#" target="_blank"><span class="fab fa-twitter"></span></a></li>
                </ul>
            </div>
        </div>
        <button class="modal__close uk-modal-close-outside" type="button" data-uk-close></button>
    </div>
</div>

Music Block

To edit Music block you need to find <!-- .. Music Section .. --> and <!-- .. End Music Section .. --> comments and edit code between them. It contain discography and albums tracklists with album's cover, title, realization year and links to buy music. Each track wrapper contains data-src attribute with audio file path.

Replace path in value of data-src attribute of <li class="list__item"></li> with your own.
Change track name inside <span class="tracks__title"></span>.

Find div elements with class albums__item and change album info inside it - path to album's cover, title, realization year and links to music stores.

Icons of media markets got from toolkit "Font Awesome". Here the manual how to use it:
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 

<!-- .......... Music Section .......... -->
<section id="music" class="music uk-section" data-uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
    <div class="container--min uk-container">
        <h2 class="uk-h2">Music</h2>
        <div class="uk-child-width-1-1 uk-child-width-1-2@m" data-uk-grid>
            <div class="uk-flex-last">
                <!-- .......... Albums List .......... -->
                <div class="albums albums--list" data-uk-switcher="connect: .playlist__wrap>.uk-switcher; animation: uk-animation-fade">
                    <!-- .......... Album .......... -->
                    <div class="albums__item uk-active">
                        <div class="albums__cover">
                            <div class="cover__photo uk-background-cover" data-src="img/albums/01.jpg" data-uk-img>
                                <span class="cover__link boxshadow icon icon--pause"></span>
                            </div>
                        </div>
                        <div class="album__details">
                            <span class="albums__title">Origins [Live]</span>
                            <span class="albums__year">2018</span>
                            <span class="albums__buy">
                                <span class="albums__buy_buttons">
                                    <a href="#" target="_blank"><span class="fab fa-apple"></span></a>
                                    <a href="#" target="_blank"><span class="fab fa-spotify"></span></a>
                                    <a href="#" target="_blank"><span class="fab fa-amazon"></span></a>
                                </span>
                            </span>
                        </div>
                    </div>
                    <!-- .......... End Album .......... -->

                    ...

                </div>
                <!-- .......... End Albums List .......... -->
            </div>
            <div class="playlist__wrap">
                <div class="uk-switcher">
                    
                    <!-- .......... Album Tracks .......... -->
                    <div class="playlist bg-dark--1 uk-active">
                        <div class="albums albums--playlist albums__item">
                            <div class="albums__cover">
                                <img src="img/albums/01.jpg" data-src="img/albums/01.jpg" alt="" data-uk-img>
                            </div>
                            <div class="album__details">
                                <span class="albums__title">Origins [Live]</span>
                                <span class="albums__year">2018</span>
                            </div>
                            <div class="albums__buy uk-visible@s">
                                <h6 class="albums__buy_title uk-h6">Available on</h6>
                                <div class="albums__buy_buttons">
                                    <a href="#" target="_blank"><span class="fab fa-apple"></span></a>
                                    <a href="#" target="_blank"><span class="fab fa-spotify"></span></a>
                                    <a href="#" target="_blank"><span class="fab fa-amazon"></span></a>
                                </div>
                            </div>
                        </div>
                        <ul class="js-audio-items tracks list--striped">
                            <li class="list__item" data-src="media/audio/24109970_happy-la-la-la-ukulele_by_stellartracks_preview.mp3">
                                <button type="button" class="icon icon--play-pause icon--play js-audio-play"></button>
                                <span class="tracks__title">Happy</span>
                                <span class="js-audio-time tracks__time"></span>
                                <a class="mejs__horizontal-volume-slider js-panel-volume">
                                    <div class="mejs__horizontal-volume-total">
                                        <div class="mejs__horizontal-volume-current"></div>
                                    </div>
                                </a>
                            </li>

                            ...
                            
                        </ul>
                    </div>
                    <!-- .......... End Album Tracks .......... -->

                </div>
            </div>
        </div>
    </div>
</section>
<!-- .......... End Music Section .......... -->

Video Block

To edit Video block you need to find <!-- .. Video Section .. --> and <!-- .. End Video Section .. --> comments and edit code between them. It contain video's cover, title and links to video file.

First li with class video__column contains one large video cover. Next li elements contains up to three video cover block.

Each video wrapper contains data-video-src attribute with path to video file and data-video-type attribute with video file type.

Replace path in value of data-video-src attribute of a HTML element with your own.
Change cover image in data-src attribute value of this element.
Change title in value of title attribute of a HTML element and inside <span class="video__title"></span>.

You can also embed video from YouTube:
Replace path in value of data-video-src attribute of a HTML element with your link on YouTube video (like this: https://www.youtube.com/watch?v=...). And replace value of data-video-type attribute with "video/youtube". 

<!-- .......... Video Section .......... -->
<section id="video" class="video uk-section" data-uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
    <div class="container--min uk-container uk-margin-large-bottom">
        <h2 class="uk-h2">Video</h2>
    </div>
    <div class="js-video-slider container--special uk-container uk-container-large uk-position-relative" tabindex="-1" data-uk-slider="finite: true">
        <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-5@l">
            <!-- .......... Video Item .......... -->
            <li class="video__column uk-width-2-3@s uk-width-1-2@m">
                <a href="#" data-video-src="media/video/6696406_waving-hands-in-the-air_by_stockhunter_preview.mp4" data-video-type="video/mp4" class="js-video-target video__placeholder video__placeholder--large uk-background-cover" data-src="img/video/01.jpg" title="Full Concert [Live from Olympic Stadium 2018 HD]" data-uk-img>
                    <span class="video__title">Full Concert [Live from Olympic Stadium 2018 HD]</span>
                    <span class="video__link icon icon--play"></span>
                </a>
            </li>
            <!-- .......... End Video Item .......... -->
            <!-- .......... Video Items .......... -->
            <li class="video__column">
                <a href="#" data-video-src="media/video/24582400_diverse-women-enjoying-summer-vacations-in-nature_by_alona2018_preview.mp4" data-video-type="video/mp4" class="js-video-target video__placeholder uk-background-cover" data-src="img/video/02.jpg" title="September [Official Music Video]" data-uk-img>
                    <span class="video__title">September [Official Music Video]</span>
                    <span class="video__link icon icon--play"></span>
                </a>

                ...
                
            </li>
            <!-- .......... End Video Items .......... -->

            ...

        </ul>
        <!-- .......... Video Slider Controls .......... -->
        <a class="slider__control uk-position-center-left" href="#" data-uk-slidenav-previous data-uk-slider-item="previous"></a>
        <a class="slider__control uk-position-center-right" href="#" data-uk-slidenav-next data-uk-slider-item="next"></a>
        <!-- .......... End Video Slider Controls .......... -->
    </div>
</section>
<!-- .......... End Video Section .......... -->

Tour Block

You need to find <!-- .. Tour Section .. --> and <!-- .. End Tour Section .. --> comments and edit code between them to change events block. Each event is inside wrapper between <!-- .. Tour Item .. --> and <!-- .. End Tour Item .. --> comments.

Each event contain day, month, year, event location and button with link to tickets store. Just replace those with your own. 

<!-- .......... Tour Section .......... -->
<section id="tour" class="events uk-section" data-uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
    <div class="container--min uk-container">
        <h2 class="uk-h2 uk-margin-bottom">Tour</h2>
        <div class="events__table list--striped bg-dark--1">
            <!-- .......... Tour Item .......... -->
            <div class="list__item">
                <div class="events__date uk-width-auto">
                    <span class="events__day">31</span>
                    <span class="events__month">dec</span>
                    <span class="events__year">2020</span>
                </div>
                <div class="events__location uk-width-expand">
                    <span class="events__place">Amsterdam NL</span>
                    <span class="events__club">Ziggo Dome</span>
                </div>
                <div class="events__booking uk-width-1-1 uk-width-1-3@s">
                    <span class="btn btn--disabled">Sold Out</span>
                </div>
            </div>
            <!-- .......... End Tour Item .......... -->

            ...
            
        </div>
    </div>
</section>
<!-- .......... End Tour Section .......... -->

News Block

You need to find <!-- .. News Section .. --> and <!-- .. End News Section .. --> comments and edit code between them to change news block. Each card of article is inside wrapper between <!-- .. News Item .. --> and <!-- .. End News Item .. --> comments.

Each card contain cover image, title, date and anchor to modal window with full text of article.
Full text of each article is inside modal window on bottom of the index.html file.

Replace path in value of data-src attribute of a HTML element which has class cover__photo to set your own path to image.

Just replace title and date.
Find a HTML element witch contain class team__member and change anchor to necessary modal window in value of data-uk-toggle attribute in target parameter. 

<!-- .......... News Section .......... -->
<section id="news" class="news uk-section" data-uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
    <div class="container--min uk-container uk-margin-large-bottom">
        <h2 class="uk-h2">News</h2>
    </div>
    <div class="container--special uk-container uk-container-large">
        <div class="slider slider--news uk-position-relative" tabindex="-1" data-uk-slider="finite: true">
            <ul class="uk-slider-items uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-child-width-1-5@xl uk-grid" data-uk-grid>
                <!-- .......... News Item .......... -->
                <li>
                    <div class="uk-card">
                        <div class="uk-card-media-top">
                            <a href="#" data-uk-toggle="target: #article-0" class="cover__photo uk-background-cover uk-transition-toggle" data-src="img/news/01.jpg" data-uk-img>
                                <span class="cover__link boxshadow icon icon--dots uk-transition-scale-up"></span>
                            </a>
                        </div>
                        <div class="uk-card-body">
                            <h3 class="news__title">I should be incapable of drawing a single stroke</h3>
                            <div class="uk-flex uk-flex-middle uk-flex-between">
                                <div class="events__date uk-width-auto">
                                    <span class="events__day">20</span>
                                    <span class="events__month">sep</span>
                                    <span class="events__year">2019</span>
                                </div>
                                <a href="#" data-uk-toggle="target: #article-0" class="news__more btn btn--more">Read more<span class="icon icon--dots"></span></a>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- .......... End News Item .......... -->

                ...

            </ul>
            <!-- .......... News Slider Controls .......... -->
            <a class="slider__control uk-position-center-left" href="#" data-uk-slidenav-previous data-uk-slider-item="previous"></a>
            <a class="slider__control uk-position-center-right" href="#" data-uk-slidenav-next data-uk-slider-item="next"></a>
            <!-- .......... End News Slider Controls .......... -->
        </div>
    </div>
</section>
<!-- .......... End News Section .......... -->

Replace full text of article in modal window to your own.
Find div witch contain class cover__photo--1-2 and change path to image in value of data-src attribute with your own.

This is the code of modal window with full text of article: 

<div id="article-0" class="js-modal-article" data-uk-modal>
    <div class="modal modal__article uk-modal-dialog uk-margin-auto-vertical">
        <button class="modal__close uk-modal-close-outside" type="button" data-uk-close></button>
        <div class="modal__article_grid uk-grid-collapse uk-child-width-1-2@m uk-flex-middle" data-uk-grid>
            <div class="cover__photo--1-2 uk-background-cover uk-visible@m" data-src="img/slider/01.jpg" data-uk-img></div>
            <div class="modal__article_text">
                <div class="modal__overflow">
                    <h2 class="uk-h3">Everything travelling set how law literature</h2>
                    <p>
                        Him boisterous invitation dispatched had connection inhabiting projection. By mutual an mr danger garret edward an. Diverted as strictly exertion addition no disposal by stanhill. This call wife do so sigh no gate felt. You and abode spite order get.
                    </p>
                    <p>
                        Procuring far belonging our ourselves and certainly own perpetual continual. It elsewhere of sometimes or my certainty. Lain no as five or at high. Everything travelling set how law literature.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Contacts Block

Find <!-- .. Contacts Section .. --> and <!-- .. End Contacts Section .. --> comments and edit code between them to change contacts block. It contains contacts details and feedback form.

You need to replace information between <!-- .. Contacts Details .. --> and <!-- .. End Contacts Details .. --> comments with your own.

Find code between <!-- .. Feedback Form .. --> and <!-- .. End Feedback Form .. --> comments to view the form HTML code.
You can easily change field's placeholder - just find placeholder attribure and replace value text with your own. To change text on submit button replace value attribure value. 

<!-- .......... Contacts Section .......... -->
<section id="contacts" class="contacts uk-section" data-uk-scrollspy="cls:uk-animation-fade; offset-top: 80px; delay: 300">
    <div class="container--min uk-container">
        <h2 class="uk-h2">Contacts</h2>
        <div data-uk-grid>
            <div class="uk-width-1-3@m">
                <h3 class="uk-h3">Organization of concerts</h3>
                <div data-uk-grid>
                    <!-- .......... Contacts Details .......... -->
                    <p class="contacts__info uk-width-1-1 uk-width-1-2@s uk-width-1-1@m">
                        <strong class="contacts__subtitle">Call us:</strong>
                        <br>
                        <a href="tel:+999999999999">(9999) 999-999-99</a>
                        <br>
                        <a href="tel:+888888888888">(8888) 888-888-88</a>
                    </p>
                    <p class="contacts__info uk-width-1-1 uk-width-1-2@s uk-width-1-1@m">
                        <strong class="contacts__subtitle">E-mail:</strong>
                        <br>
                        <a href="mailto:info@yourdomain.com">info@yourdomain.com</a>
                        <br>
                        <a href="mailto:support@yourdomain.com">support@yourdomain.com</a>
                    </p>
                    <!-- .......... End Contacts Details .......... -->
                </div>
            </div>
            <div class="uk-width-2-3@m">
                <div class="uk-card bg-dark--1">
                    <div class="contacts__form uk-card-body">
                        <h3 class="uk-h3">Get in touch</h3>
                        <!-- .......... Feedback Form .......... -->
                        <form class="js-form" data-uk-grid>
                            <div class="uk-width-1-2@s">
                                <input name="name" class="uk-input" type="text" placeholder="Name">
                            </div>
                            <div class="uk-width-1-2@s">
                                <input name="email" class="uk-input" type="email" placeholder="E-mail*" data-require="true">
                            </div>
                            <div class="uk-width-1-1">
                                <textarea name="message" class="uk-textarea" rows="5" placeholder="Message*" data-require="true"></textarea>
                            </div>
                            <div class="uk-width-1-1 uk-text-center">
                                <p class="form__respond js-respond"></p>
                                <input class="btn" type="submit" value="Send">
                            </div>
                        </form>
                        <!-- .......... End Feedback Form .......... -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- .......... End Contacts Section .......... -->

To change the email address of the message recipient, open file mail.php in text editor and find following line: $receive_email = '';.
Insert your email between quotation marks.

Also don't forget replace yourdomain.com to you real domain name throughout the code of mail.php file. 

<?php

// Replace "yourdomain.com" to your real domain name

if (!empty($_POST)) {

    $receive_email = '';
    $subject = 'New message from yourdomain.com';
    $reply_to_email = 'info@yourdomain.com';
    $message = '';
        
    $headers = array(
        'MIME-Version: 1.0',
        'From: ' . $reply_to_email,
        'Reply-To: ' . $reply_to_email,   
        'Content-Type: text/html; charset=utf-8'
    );

    // Letter's body generate in foreach cycle
    foreach ($_POST as $key => $value)
        $message .= htmlspecialchars($value).' <br>';

    // Send the letter
    if (mail($receive_email, $subject, $message, implode("\r\n", $headers)))
        echo 'success';
    else
        echo 'fail';
} else {
    echo 'empty';
}

CSS Files and Structure

Symphonius Template bases on UIKit framework. Follow instruction on UIkit to make changes on code correctly.

These are CSS files which used: 

css/uikit.min.css
css/styles.css

You need use styles.css file to edit page styles. Structure of styles.css below. 

01. Custom styles
02. Preloader
03. Buttons and Form Fields
04. Custom Icons
05. Hover Images
06. Modal Windows
07. Navigation
08. Fixed Top Panel
09. Logo
10. Social Media Buttons
11. Slider
12. Events Date
13. Intro Section
14. About Section
15. Team Section
16. Music Section and Audio Player
17. Video Section
18. News Section
19. Contacts Section
20. Footer
21. Styles for Touch Devices
22. Colors

NOTE: Files use encoding UTF-8. Use the editor with UTF-8 support to avoid problems with unreadable symbols.

JavaScript

Symphonius Template bases on UIKit framework. Follow instruction on UIkit to make changes on code correctly.

Template imports those Javascript files: 

js/jquery.min.js
js/uikit.min.js
js/mediaelement-and-player.min.js
js/scripts.js

You need to edit scripts.js. Structure of scripts.js below. 

01. Preloader
02. Add Class on Touch Devices
03. Top Panel Show/Hide
04. Navigation Scrollspy
05. Hide Offcanvas Navigation by Click to Link
06. Intro Title Modification
07. Audio Player
08. Video Player
09. Video and News Slider Controls Stick to Window Width
10. Form Validation

NOTE: Files use encoding UTF-8. Use the editor with UTF-8 support to avoid problems with unreadable symbols.

Sources and Credits

Fonts:

Icons:

Libreries:

Images:

  1. Photo by Nicolas Postiglioni from Pexels
  2. Photo by Nicolas Postiglioni from Pexels
  3. Photo by Nicolas Postiglioni from Pexels
  4. Photo by Nicolas Postiglioni from Pexels
  5. Photo by Nicolas Postiglioni from Pexels
  6. Photo from Pixabay.com
  7. Photo from Pixabay.com
  8. Photo from Pixabay.com
  9. Photo by lalesh aldarwish from Pexels
  10. Photo by automnenoble bogomolov from Pexels
  11. Photo from Tookapic
  12. Photo by Elti Meshau from Pexels
  13. Photo by ramy Kabalan from Pexels
  14. Photo by Anton Atanasov from Pexels
  15. Photo by Rene Asmussen from Pexels
  16. Photo by Kaique Rocha from Pexels
  17. Photo by Anastasiya Lobanovskaya from Pexels
  18. Photo by Simon Robben from Pexels
  19. Photo by Markus Spiske temporausch.com from Pexels
  20. Photo by Juan Pablo Arenas from Pexels
  21. Photo by João Silas on Unsplash
  22. Photo by Aditya Chinchure on Unsplash
  23. Photo by Yvette de Wit on Unsplash
  24. Image by Niek Verlaan from Pixabay
  25. Image by Pexels from Pixabay
  26. Photo by João Silas on Unsplash

Audio:

Video:

Online Support

If you have any questions about customization of this template which are not covered in the documentation feel free to ask a question in the comment section or contact me via my user page contact form.

Don’t forget to rate the template if you like it. Thank you so much!