Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be a folder with documentation and a folder "assets" containing all source files. Updload the source files to your server via FTP.

What's Included

  • assets
      • cssContaining all css files
      • imagesHere is a place to put your media files like logo, images, etc.
      • jsContaining all js files
      • sassContaining all scss files
      • index.html Main HTML file
      • index-video.html Video Version Mail HTML file
      • contact-mail.php Form Submission PHP file
      • .htaccess Configuration file
      • favicon.icon Favicon icon
      • gulpfile.js Gulpfile
      • package.json Package JSON file

HTML page sturture

  <html>
      <head>
         [Page meta, page css files, page title, favicon etc]
      </head>
      <body>
        <div class="preloader">
           [Preloader content]
        </div>
        <header>
           [Logo, Main banner content]
        </header>
        <section id="banner" class="">
          [Banner content]
        </section>
        <nav class="site-menu " id="fixed-nav"> 
          [Navbar content]
        </nav>
        <main class="ps-main-content">
        <section id="" class="">
          [Section content]
        </section>
        </main> 
        <footer id="colophon" class="site-footer">
          [Footer content]
        </footer>
          [Js files content]
      </body>
  </html>
          

Components

Preloader

Page Loading Transitions are enabled by default. If you wish to disable the page loading transition you can simply delete below section.

 <div class="preloader">
   [Loader Content]
 </div>

Favicon

Favicon is an icon associated with URL that is displayed at various places such as in a browser’s address bar or next to the site name in a bookmark list. Following code is for favicon, to change just place your favicon.ico file in root path

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Basic Styling

Color Scheme

Analogue template uses sass variable, so changing color scheme is much easier. You just need to add your color at one place and it will apply everywhere.

Go to _variables-site.scss file in sass folder, check for the variable name and replace the HEX color code.

Background Image

Analogue template added background images path in index.html file using inline css rules.

To change background image go to the respective section and change the image name.

Please make sure your new image is placed in images folder

Font

Analogue template uses Google WebFont, there are thousands of fonts available, you can select fonts as per your need from google fonts library

Find the current added font link inside thehead tag.

<!---- this is example link that added in head tag---->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:500,700,800%7CWork+Sans:400,500,700" media="all">

In Order to change the fonts, you neeed to change the above link with your new google fonts link. and change font-family in _variables-site.scss in sass folder

You can learn more about how to use google fonts here

Buttons

Analogue template uses .dark_btn class name for define button, In order to change the button style, go to _variables-sites.scss inside sass folder and make required changes in variables color.

Page Layout

We have followed Bootstrap 4 standard layout

    <div class="container">
       <div class="row">
          <div class="col-lg-X">
            .......
          </div><!--/col-->
        </div><!--/row-->
    </div><!--/container-->
  

<div class="col-lg-X"> Define how many columns you want in row, Where X is value from 1 to 12.

Some Example layout for Page column

col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-4
col-lg-4
col-lg-4
col-lg-6
col-lg-6
col-lg-12

Elements

Banner Text Rotator

Analogue templates uses simple jquery text rotator.

To change rotating text go to index.html file and find the following code

  <div class="col-lg-8 banner-text">
      <h1 class="text-rotator">We design and build products for 
        <span class="rotate">Startups., Enterprises., Healthcares., Mobility., Retails., Logistics., Education., Automotive.</span>
      </h1>
  </div> 
  

Rotating text are placed inside in rotate class, place your text by comma seperated here.

You can also easily increase or decrease text rotation speed by simply changing speed in main.js file in js folder.

Find the following code in main.js file

  $(".text-rotator .rotate").textrotator({
          speed: 2500
  });
  

Portfolio

Inside the portfolio section following code demostrate the individual portfolio detail.

In order to add more portfolio items, just copy and paste below code and make required changes.

    <!--- Portfolio item start from here-->
        <div class="portfolio-item  item col-md-4 ux-ui-design ">
          <div class="portfolio-inner">
            <!--- Portfolio image-->
            <img class="portfolio_img img-fluid" src="images/starbucks.jpg" alt="Starbucks" />
            <div class="portfolio-content d-flex justify-content-center align-items-center">
              <!--- Portfolio title-->
              <span class="port-title">Starbucks</span>
              <a href="#portfolioModal" class="link-item port-link" data-toggle="modal">
              <!--- Icon that showing above the title in pop up-->
              <img src="images/apple.jpg"  class="port_logo d-none" alt="Starbucks" >             
            </div>
            <!--- Portfolio category title-->
            <bdi>UX/UI Design | Web Development</bdi>
            <div class="d-none port_content">
              <!--- Portfolio Description-->
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <ul>
                <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</li>
                <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                <li>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</li>
              </ul>
            </div>
          </div>
        </div>
    <!--- Portfolio item end from here-->
   

Team

Inside the about section following code demostrate the individual team member detail.

In order to add more team members just copy and paste below code and make required changes.

    <!---  team info start -->
    <div class="col-md-3 col-sm-4  mb5 our-team">
        <div class="team-inner">
          <ul class="social">
          <!---  add your social media link here -->
          <li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>
          <li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>
        </ul>             
        <div class="team_img"> <!---  Team member image -->
            <img src="images/team-8.jpg" alt="Team Member" />
        </div>                    
            <div class="team-content text-center">
              <h3 class="title"> John Doe </h3> <!---  Name of team member -->
                <span >UX/UI Designer</span>  <!---  Designation -->
              <a href="#expert_modal" class="team_modal_link link-item" data-toggle="modal"></a>
              <div class="d-none"> <!---  Desciption -->
                <p> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
              </div>
            </div>
        </div>
    </div>
    <!--- team info end-->
   

Contact Form

To connect the contact form with your email account please enter your email address into the contact-mail.php file under $recipient = "youremail@gmail.com"; and subject can be changed from $subject = "Your Subject $name";

	$recipient = "youremail@gmail.com"; /*----- Add your email address here------*/
        $subject = "Your Subject $name"; /*------ Add your email subject here------*/

Additionally you can changes success / failure alert messages in same file.

Social Media

Below is code demostrate the social media section

   <ul class="footer-social">

      <li><a href="javascript:;"><i class="fa fa-facebook"></i></a></li>

      <li><a href="javascript:;"><i class="fa fa-linkedin"></i></a></li>

      <li><a href="javascript:;"><i class="fa fa-twitter"></i></a></li>

    </ul>
  

Add your social media links at the place of javascript:;

Analogue template uses font awesome icons, to change/add social icons go to font awesome and select your icons.

Template Sections

Analogue template have many other sections, to make changes in sections go to respective section and make required changes. HTML is properly commented and arranged section wise, so we sure you will be easily make necessary changes

Utilities Classes

Analogue template uses standard bootstrap 4 utilities classes like for margin, padding etc. You can learn more about utilities classes here and use them as per your need

Video Version

All the files for the Video and Image backgorund version are common. To use Video Backgorund Template as default then just rename the index-video.html to index.html