Rigor

Creative Portfolio

Thank you for purchasing my theme. 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 or create a ticket on our support forum. Thanks so much!

About

Rigor it’s clean and professional html template, is perfect for both agencies and creative studios but also for modern artist & creative people

HTML Structure

This template is a responsive layout with 12 columns. The general template structure is the same throughout the template. Here is the general structure.

view plaincopy to clipboardprint?
  1. <div class="inner" data-scrollbar="">  
  2.     <section class="page_banner">  
  3.         <div class="container">  
  4.             ...  
  5.         </div>  
  6. a href="#" title="" class="scroll_townn"></a>  
  7.     </section><!--page_banner end-->  
  8.   
  9.     <section class="main_content" id="content-scroll">  
  10.         <div class="container">  
  11.             <div class="content_full">  
  12.                 ...  
  13.             </div><!--content_full end-->  
  14.   
  15.             <div class="wrk-sec text-center has-animation" data-delay="100">  
  16.                 ...  
  17.             </div><!--wrk-sec end-->  
  18.         </div>  
  19.     </section><!--main_content end-->  
  20.   
  21.     <footer>  
  22.         <div class="container-fluid">  
  23.             ...  
  24.         </div>  
  25.     </footer><!--footer end-->  
  26.   
  27. </div><!--theme_layout end-->  

CSS files and structure

We are using 4 css sources in this template.

  1. style.css - Contains all of the specific stylings for the template.
  2. white_version.css - Contains all of the specific stylings to change the template color scheme to white.
  3. animate.css & animsition.min.css - Contains all of the specific stylings for the included animations.
  4. all.min.css - Contains all of the specific stylings for FontAwesome.
  5. bootstrap.min.css - Contains all of the specific stylings for Bootstrap elements (grid,...).
  6. responsive.css - Contains all of the specific responsive stylings.
  7. swiper.min.css - Contains all of the specific stylings for Swiper slider.
style.css is separated into sections using:
view plaincopy to clipboardprint?
  1. Fonts  
  2. Reset Css  
  3. HEADER  
  4. FOOTER  
  5. PAGE BANNER  
  6. CONTACT FORM  
  7. MENU OVERLAY  
  8. LANDING PAGE STYLE  
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Tutorial

Lets start editing the template. Open index.html file and follow the steps below.

Most of the edits are the same for all versions.

Header - Logo

view plaincopy to clipboardprint?
  1. <div class="logo">  
  2.     <a href="index.html" class="animsition-link vis-logo" title="">  
  3.         <img src="images/logo.png" alt="">  
  4.     </a>  
  5. </div><!--logo end-->  
  1. Replace "images/logo.png" with your logo url.

Navmenu

This is the basic structure.
view plaincopy to clipboardprint?
  1. <section class="menu-overlay">  
  2.     <div class="menu-btn active">  
  3.         <span class="bar1"></span>  
  4.         <span class="bar2"></span>  
  5.         <span class="bar3"></span>  
  6.     </div><!--menu-close-btn end-->  
  7.     <ul class="menu-links">  
  8.         <li><a href="MENU_ITEM_URL" title="" class="animsition-link">MENU_ITEM_TITLE</a></li>  
  9.         <li><a href="MENU_ITEM_URL" title="" class="animsition-link">MENU_ITEM_TITLE</a></li>  
  10.     </ul>  
  11. </section><!--menu-overlay end-->  
  12.         
  1. Replace MENU_ITEM_TITLE with the name of the item.
  2. Replace MENU_ITEM_URL with an external link to the page.
  3. Apply the same instructions for every menu item. You can add multiple menu items.

Main Slider

This is the basic structure of the main slider.
view plaincopy to clipboardprint?
  1.       <!-- Slider main container -->  
  2. <div id="showcase-tilt-wrap"></div>  
  3. <div id="showcase-tilt"></div>  
  4. <div class="swiper-container">  
  5.     <!-- Additional required wrapper -->  
  6.     <div class="swiper-wrapper">  
  7.         <!-- Slides -->  
  8.         <div class="swiper-slide" data-title="SLIDE_TITLE">  
  9.             <div class="img-mask">  
  10.                 <div class="section-image" style="background-image: url(SLIDE_IMAGE); ">  
  11.                 </div>  
  12.             </div>  
  13.         </div>  
  14.         <div class="swiper-slide" data-title="SLIDE_TITLE">  
  15.             <div class="img-mask">  
  16.                 <div class="section-image" style="background-image: url(SLIDE_IMAGE); ">  
  17.                 </div>  
  18.             </div>  
  19.         </div>  
  20.     </div>  
  21.           <!-- If we need pagination -->  
  22.     <div class="swiper-pagination"></div>  
  23. </div>  
  24.   
  25. <div class="show_text">  
  26.         <h2 class="heading" data-in-effect="fadeInLeft">SLIDE_TITLE</h2>  
  27.         <p>MAIN_TEXT</p>  
  28.         <ul class="featz">  
  29.             <li>  
  30.                 <span>LIST_SUBTITLE</span>  
  31.                 <h3>LIST_TITLE</h3>  
  32.             </li>  
  33.             <li>  
  34.                 <span>LIST_SUBTITLE</span>  
  35.                 <h3>LIST_TITLE</h3>  
  36.             </li>  
  37.         </ul><!--featz end-->  
  38.         <div class="slide_controls">  
  39.         <div class="swiper-button-prev"><span><img src="images/angle-left.png" alt=""></span></div>  
  40.         <div class="swiper-button-next"><span><img src="images/angle-left.png" alt=""></span></div>  
  41.     </div><!--slide_controls end-->  
  42.     </div><!--show_text end-->  
  43.   
  44.         
  1. Replace MAIN_TEXT with the main idea of the website.
  2. Replace SLIDE_TITLE with the slide title.
  3. Replace SLIDE_IMAGE with the slide image URL.
  4. Replace LIST_SUBTITLE with the subtitle of the list itme on the main slider.
  5. Replace LIST_SUBTITLE with the title of the list item on the main slider.

About

view plaincopy to clipboardprint?
  1. <div class="studio_sec">  
  2.     <h2 class="sec-title has-animation" data-delay="100">ABOUT_SECTION_TITLE</h2>  
  3.     <div class="row">  
  4.         <div class="col-lg-4">  
  5.             <div class="std-info has-animation" data-delay="150">  
  6.                 <h3>ABOUT_SECTION_SUBTITLE</h3>  
  7.                 <a href="ABOUT_SECTION_GET_IN_TOUCH" title="" class="lnk">Send e-mail</a>  
  8.             </div><!--std-info end-->  
  9.         </div>  
  10.         <div class="col-lg-8">  
  11.             <div class="std-para has-animation" data-delay="200">  
  12.                 <p>ABOUT_SECTION_DESC</p>  
  13.             </div><!--std-para end-->  
  14.         </div>  
  15.     </div>  
  16. </div><!--studio_sec end-->  
  17. <img class="has-animation" src="ABOUT_SECTION_IMAGE" alt="">  
  18. <h2 class="has-animation">ABOUT_SECTION_CLIENTS_DESC</h2>  
  19. <ul class="has-animation">  
  20.     <li><a href="#" title="">ABOUT_SECTION_CLIENTS_ITEM_TITLE</a></li>  
  21.     <li><a href="#" title="">ABOUT_SECTION_CLIENTS_ITEM_TITLE</a></li>  
  22. </ul>  
  23. <div class="our_services">  
  24.     <h2 class="has-animation" data-delay="100">ABOUT_SECTION_SERVICES_TITLE</h2>  
  25.     <ul class="has-animation" data-delay="100">  
  26.         <li><a href="#" title="">ABOUT_SECTION_SERVICES_ITEMS_TITLE</a></li>  
  27.         <li><a href="#" title="">ABOUT_SECTION_SERVICES_ITEMS_TITLE</a></li>  
  28.     </ul>  
  29.     <ul class="has-animation" data-delay="250">  
  30.         <li><a href="#" title="">ABOUT_SECTION_SERVICES_ITEMS_TITLE</a></li>  
  31.         <li><a href="#" title="">ABOUT_SECTION_SERVICES_ITEMS_TITLE</a></li>  
  32.     </ul>  
  33.     <ul class="has-animation" data-delay="400">  
  34.         <li><a href="#" title="">ABOUT_SECTION_SERVICES_ITEMS_TITLE</a></li>  
  35.         <li><a href="#" title="">ABOUT_SECTION_SERVICES_ITEMS_TITLE</a></li>  
  36.     </ul>  
  37.     <ul class="has-animation" data-delay="550">  
  38.         <li><a href="#" title="">ABOUT_SECTION_SERVICES_ITEMS_TITLE</a></li>  
  39.         <li><a href="#" title="">ABOUT_SECTION_SERVICES_ITEMS_TITLE</a></li>  
  40.     </ul>  
  41.     <div class="clearfix"></div>  
  42. </div><!--our_services end-->  
  1. Replace ABOUT_SECTION_TITLE with the title of the About section.
  2. Replace ABOUT_SECTION_DESC with the description of the About section.
  3. Replace ABOUT_SECTION_SUBTITLE with the subtitle of the About section.
  4. Replace ABOUT_SECTION_GET_IN_TOUCH with the contact form URL.
  5. Replace ABOUT_SECTION_IMAGE with the image URL.
  6. Replace ABOUT_SECTION_CLIENTS_DESC with the clients section description.
  7. Replace ABOUT_SECTION_CLIENTS_ITEM_TITLE with the clients item title.
  8. Replace ABOUT_SECTION_SERVICES_TITLE with the title of the services section.
  9. Replace ABOUT_SECTION_SERVICES_ITEMS_TITLE with the title of the services item.

Work

view plaincopy to clipboardprint?
  1.      <div class="content">  
  2. <svg class="distort" width="600" height="600" viewBox="0 0 600 600">  
  3.     <filter id="distortionFilter">  
  4.         <feTurbulence type="fractalNoise" baseFrequency="0.01 0.003" numOctaves="5" seed="2" stitchTiles="noStitch" x="0%" y="0%" width="100%" height="100%" result="noise"></feTurbulence>  
  5.         <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%"></feDisplacementMap>  
  6.     </filter>  
  7.     <g filter="url(#distortionFilter)">  
  8.         <image class="distort__img" x="50" y="50" xlink:href="WORK_PORTFOLIO_ITEM_IMAGE" height="700" width="500"></image>  
  9.         <image class="distort__img" x="50" y="50" xlink:href="WORK_PORTFOLIO_ITEM_IMAGE" height="700" width="500"></image>  
  10.     </g>  
  11. </svg>  
  12. <nav class="menu portfolio_content text-center">  
  13.     <div class="portfolio_item has-animation" data-delay="2500">  
  14.         <h2><a href="WORK_PORTFOLIO_ITEM_URL" class="menu__link" title="">WORK_PORTFOLIO_ITEM_TITLE</a></h2>  
  15.         <a href="#" title="">WORK_PORTFOLIO_ITEM_TITLE</a>  
  16.     </div>  
  17.     <div class="portfolio_item has-animation" data-delay="2700">  
  18.         <h2><a class="menu__link" href="WORK_PORTFOLIO_ITEM_URL" title="">WORK_PORTFOLIO_ITEM_TITLE</a></h2>  
  19.         <a href="#" title="">WORK_PORTFOLIO_ITEM_TITLE</a>  
  20.     </div><!--portfolio_item end-->  
  21. </nav>  
  22. /div>  
  23.        
  1. Replace WORK_PORTFOLIO_ITEM_TITLE with the title of the portfolio item.
  2. Replace WORK_PORTFOLIO_ITEM_URL with the URL of the portfolio item.
  3. Replace WORK_PORTFOLIO_ITEM_IMAGE with the image URL of the portfolio item.

Portfolio Item

view plaincopy to clipboardprint?
  1. <div class="studio_sec">  
  2.     <h2 class="sec-title no-bf has-animation">PORTFOLIO_SINGLE_ITEM_TITLE</h2>  
  3.     <div class="row">  
  4.         <div class="col-lg-4">  
  5.             <div class="std-info has-animation">  
  6.                 <h2>PORTFOLIO_SINGLE_ITEM_SUBTITLE.</h2>  
  7.             </div><!--std-info end-->  
  8.         </div>  
  9.         <div class="col-lg-8">  
  10.             <div class="std-para has-animation">  
  11.                 <p>PORTFOLIO_SINGLE_ITEM_DESC</p>  
  12.                 <a href="PORTFOLIO_SINGLE_ITEM_PROJECT_URL" title="" class="view-proj">View Project</a>  
  13.             </div><!--std-para end-->  
  14.         </div>  
  15.     </div>  
  16. </div><!--studio_sec end-->  
  17. <div class="portfolio_list">  
  18.     <div class="portfolio-thumbnail has-animation">  
  19.         <img src="PORTFOLIO_SINGLE_ITEM_IMAGE" alt="">  
  20.     </div><!--portfolio-thumbnail end-->  
  21.     <div class="portfolio-thumbnail has-animation">  
  22.         <img src="PORTFOLIO_SINGLE_ITEM_IMAGE" alt="">  
  23.     </div><!--portfolio-thumbnail end-->  
  24.     <div class="portfolio-thumbnail has-animation">  
  25.         <img src="PORTFOLIO_SINGLE_ITEM_IMAGE" alt="">  
  26.     </div><!--portfolio-thumbnail end-->  
  27. </div><!--portfolio_list end-->  
  1. Replace PORTFOLIO_SINGLE_ITEM_TITLE with the title of portfolio item.
  2. Replace PORTFOLIO_SINGLE_ITEM_DESC with the description of the portfolio item.
  3. Replace PORTFOLIO_SINGLE_ITEM_SUBTITLE with the subtitle of the portfolio item.
  4. Replace PORTFOLIO_SINGLE_ITEM_PROJECT_URL with the project external URL.
  5. Replace PORTFOLIO_SINGLE_ITEM_IMAGE with the image URL.

Contact

view plaincopy to clipboardprint?
  1. <div class="contact_sec">  
  2.     <h2 class="sec-title has-animation">CONTACT_TITLE</h2>  
  3.     <div class="row">  
  4.         <div class="col-lg-4">  
  5.             <div class="contct-info has-animation">  
  6.                 <ul class="cntt_list">  
  7.                     <li>  
  8.                         <h5>want to talk?</h5>  
  9.                         <h3><a href="mailto:CONTACT_EMAIL" title="">CONTACT_EMAIL</a></h3>  
  10.                     </li>  
  11.                     <li>  
  12.                         <span>Address</span>  
  13.                         <h4>CONTACT_ADDR</h4>  
  14.                     </li>  
  15.                     <li>  
  16.                         <span>Phone</span>  
  17.                         <h4>CONTACT_PHONE</h4>  
  18.                     </li>  
  19.                 </ul>  
  20.                 <p>We all know how important your information is. They are always safe with us.</p>  
  21.             </div><!--contct-info end-->  
  22.         </div>  
  23.         <div class="col-lg-8">  
  24.             <div class="contact-form has-animation">  
  25.                 <h3>Send Message</h3>  
  26.                 <form>  
  27.                     <div class="form_field">  
  28.                         <input type="text" name="name" placeholder="Your Name">  
  29.                     </div><!--form_field end-->  
  30.                     <div class="form_field">  
  31.                         <input type="text" name="email" placeholder="Your E-mail">  
  32.                     </div><!--form_field end-->  
  33.                     <div class="form_field">  
  34.                         <textarea name="message" placeholder="Your Message"></textarea>  
  35.                     </div><!--form_field end-->  
  36.                     <div class="form-submit">  
  37.                         <input type="submit" name="submit" value="Send Message" class="submit">  
  38.                         <div class="clearfix"></div>  
  39.                     </div>  
  40.                 </form>  
  41.             </div><!--contact-form end-->  
  42.         </div>  
  43.     </div>  
  44. </div><!--studio_sec end-->  
  1. Replace CONTACT_TITLE with the title of the contact section.
  2. Replace CONTACT_ADDR with the contact address.
  3. Replace CONTACT_EMAIL with the contact email.
  4. Replace CONTACT_PHONE with the contact phone.

Page Contact Form

view plaincopy to clipboardprint?
  1. <div class="wrk-sec text-center has-animation" data-delay="100">  
  2.         <h2>CONTACT_FORM_TITLE</h2>  
  3.         <p>CONTACT_FORM_DESC</p>  
  4.         <a href="CONTACT_FORM_PAGE_URL" title="" class="page_link animsition-link">contact us</a>  
  5.     </div><!--wrk-sec end-->  
  1. Replace CONTACT_FORM_TITLE with contact form title.
  2. Replace CONTACT_FORM_DESC with the contact form decription.
  3. Replace CONTACT_FORM_PAGE_URL with the contact page URL.

Footer

view plaincopy to clipboardprint?
  1.       <footer>  
  2.     <div class="container-fluid">  
  3.         <div class="copytz">  
  4.             <span>FOOTER_COPYRIGHT_TEXT</span>  
  5.             <a href="#" title=""><span>By</span> FOOTER_COPYRIGHT_TEXT</a>  
  6.         </div><!--copytz end-->  
  7.         <div class="socials-wrap">  
  8.             <ul class="socials">  
  9.                 <li><span class="parallax-wrap"><a class="parallax-element" href="FOOTER_SOCIAL_URL" target="_blank">FOOTER_SOCIAL_TITLE</a></span></li>  
  10.                 <li><span class="parallax-wrap"><a class="parallax-element" href="FOOTER_SOCIAL_URL" target="_blank">FOOTER_SOCIAL_TITLE</a></span></li>  
  11.             </ul>  
  12.         </div>  
  13.         <div class="clearfix"></div>  
  14.     </div>  
  15. </footer><!--footer end-->  
  16.         
  1. Replace FOOTER_COPYRIGHT_TEXT with the copyright text.
  2. Replace FOOTER_SOCIAL_TITLE with the social item title.
  3. Replace FOOTER_SOCIAL_URL with the social item URL.

Change to Template White theme

Our Template also has the white version. To get one please go to Template folder and check for white_version/index.html.

Thats it. You are done. Now your website is ready to launch.

How to rate this item

Just click http://themeforest.net/downloads and you will see our template among other purchased items.
Your review helps us to support this product and create more. Thank you!

Credits

This template imports some javascript source below.

jQuery plugins
  1. jQuery
  2. animsition
  3. ScrollMagic
  4. Swiper
  5. Lettering.JS
  6. textillate.js
Icon fonts
  1. Font Awesome
Fonts
  1. Poppins

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Jellythemes