HotFlix Documentation

Getting started

Unzip the archive and find out the folder www. There are all the template files in this folder. You can open the following files for viewing in browser.

1. /main — folder with main template.
2. /admin — folder with admin template.

Main folder:

1. /css — folder with css files.
2. /icon — folder with favicons.
3. /img — folder with image files.
4. /js — folder with javascript files.
5. /webfont — folder with icon font.
   
   
6. index.html, index2.html, index3.html — home page options.
7. catalog.html — catalog page style 1.
8. catalog2.html — catalog page style 2.
9. details.html — details page style 1.
10. details2.html — details page style 2.
11. about.html — about page.
12. actor.html — actor page.
13. faq.html — FAQ page.
14. pricing.html — pricing page.
15. profile.html — profile page.
16. contacts.html — contacts page.
17. privacy.html — privacy page.
18. signin.html — signin page.
19. signup.html — signup page.
20. forgot.html — forgot password page.
21. 404.html — 404 page.

Admin folder:

1. /css — folder with css files.
2. /icon — folder with favicons.
3. /img — folder with image files.
4. /js — folder with javascript files.
5. /webfont — folder with icon font.
   
   
6. index.html — dashboard page.
7. catalog.html — catalog page.
8. reviews.html — reviews page.
9. users.html — users page.
10. comments.html — comments page.
11. add-item.html — item page.
12. edit-user.html — user page.
13. settings.html — settings page.
14. signin.html — signin page.
15. signup.html — signup page.
16. forgot.html — forgot password page.
17. 404.html — 404 page.

Upload the template files (inside the folder www) to server with the help of one of the FTP-clients.

HTML structure

In my template I use Bootstrap, if you don't know how to use it, here is a detailed information on its use.

The standard section has the following HTML structure:

<section class="section">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="section__title">Expected premiere</h2>
      </div>
      ...
    </div>
  </div>
</section>

Home

Section have a two different styles:

section with static background image

<section class="home home--bg">
  <div class="container">
    <div class="row">
      ...
    </div>
  </div>
</section>

section with carousel

<section class="home">
  <div class="container">
    <div class="row">
      <div class="col-12">
       <div class="hero splide splide--hero">
          <div class="splide__arrows">...</div>
          <div class="splide__track">...</div>
       </div>
      </div>
    </div>
  </div>
</section>

Sections

By default section have white background color, but you may change style:

section--bg – section with static background image

<section class="section section--bg" data-bg="img/bg/section__bg.jpg">
  <div class="container">
    ...
  </div>
</section>

section--first – section with margin-top

<section class="section section--first">
  <div class="container">
    ...
  </div>
</section>	

section--border – section with border-top

<section class="section section--border">
  <div class="container">
    ...
  </div>
</section>	

section--blue – section with blue background

<section class="section section--blue">
  <div class="container">
    ...
  </div>
</section>	

Logotype

To change logotype, find image img/logo.svg and replace it with your logo.

Video player

I strongly recommend that you familiarize yourself with the documentation for Plyr. There you can find detailed information about how the plugin works.

Fullscreen gallery

I strongly recommend that you familiarize yourself with the documentation for PhotoSwipe. There you can find detailed information about how the plugin works.

Credits

• Bootstrap
• Splide
• SlimSelect
• Smooth-scrollbar
• Plyr
• PhotoSwipe
• Tabler Icons

Support

If you have any questions or suggestions for improving the template, feel free to contact me at dmitry.volkov.vetrov@gmail.com.