RuPRO - One Page Responsive Resume Template

By:Stas Melnikov

Email: melnik909@ya.ru

Thank you for your purchase. If you have any questions, mail me to melnik909@ya.ru

File structure

After unpacking archive, you'll see this structure:

					
files/
│ 
├──css/
│  ├─less/
│  │  ├──bitter_dosis/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──merriweather_sans/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──roboto/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──raleway/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──source_sans_pro/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color1/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color2/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color3/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color4/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color6/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color7/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color8/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color9/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color10/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  ├──color11/
│  │  │  ├──main.less
│  │  │  ├──settings.less
│  │  │  └──main.css
│  │  └──core/	
│  │     ├──about_me.less
│  │     ├──animate.less
│  │     ├──blog.less
│  │     ├──contact.less
│  │     ├──form_elements.less
│  │     ├──footer.less
│  │     ├──grid.less
│  │     ├──helpers.less
│  │     ├──icons.less
│  │     ├──logo.less
│  │     ├──navigation.less
│  │     ├──popup.less
│  │     ├──portfolio.less
│  │     ├──preloaders.less
│  │     ├──services.less
│  │     ├──skills.less
│  │     ├──social.less
│  │     ├──stats.less
│  │     ├──style.less
│  │     ├──timeline.less
│  │     ├──titles.less
│  │     ├──vegas.less
│  │     ├──video.less
│  │     └──welcome.less
│  └──scss/ 
├── icons
├── pages/
│  ├──bitter_dosis/
│  │  ├──type1.html
│  │  ├──type2.html
│  │  ├──header_background_slider.html
│  │  └──header_background_youtube_video.html
│  ├──color/
│  ├──merriweather_sans_font/
│  │  ├──type1.html
│  │  ├──type2.html
│  │  ├──header_background_slider.html
│  │  └──header_background_youtube_video.html
│  ├──navigation_effects/
│  │  ├──effect1.html 
│  │  ...
│  │  └──effect19.html
│  ├──preloaders/
│  │  ├──prelaoder1.html
│  │  ...
│  │  └──prelaoder10.html
│  ├──raleway_font/
│  │  ├──type1.html
│  │  ├──type2.html
│  │  ├──header_background_slider.html
│  │  └──header_background_youtube_video.html
│  ├──roboto_font/
│  │  ├──type1.html
│  │  ├──type2.html
│  │  ├──header_background_slider.html
│  │  └──header_background_youtube_video.html
│  ├──source_sans_pro_font/
│  │  ├──type1.html
│  │  ├──type2.html
│  │  ├──header_background_slider.html
│  └──└──header_background_youtube_video.html
└── js/
    ├──plugins/
    │  ├──jquery.youtubebackground.min.js
    │  ├──layerPopup.min.js
    │  ├──magicLayout.min.js
    │  └──vegas.min.js
    ├──jquery.js
    └──main.js
					
				
  • CSS - CSS styles
    • less - less files
      • bitter_dosis - CSS styles with font "Dosis"
      • merriweather_sans - CSS styles with font "Merriweather Sans"
      • roboto - CSS styles with font "Roboto"
      • raleway - CSS styles with font "Raleway"
      • source_sans_pro - CSS styles with font "Source Sans Pro"
      • color1 - color11 - CSS styles for demonstration the color scheme
      • core - CSS-styles of blocks
        • about_me.less - CSS for "About me" block
        • animate.less - CSS animations for blocks
        • blog.less - CSS for "Blog" block
        • contact.less - CSS for block "Contact"
        • form_elements.less - CSS for form elements
        • footer.less - CSS for site's footer
        • grid.less - CSS for carcass
        • helpers.less - helping mixins
        • icons.less - CSS for icons
        • logo.less - CSS for logo
        • navigation.less - CSS for navigation
        • popup.less - CSS for popups
        • portfolio.less - CSS for "Portfolio" block
        • preloaders.less - CSS for preloaders animation
        • services.less - CSS for "Services" block
        • skills.less - CSS for "Skills" block
        • social.less - CSS social networks elements
        • stats.less - CSS for "Stats" block
        • style.less - reset CSS styles
        • timeline.less - CSS for block "Experrience"
        • titles.less - CSS for titles
        • vegas.less - CSS of Vegas plugin
        • video.less - CSS of jQuery.BackgroundVideo plugin
        • welcome.less - CSS for "Welcome" block
    • scss - scss files
  • icons - svg icons
  • pages - prepared html pages
    • bitter_dosis - example with font "Dosis"
      • type1.html - first type of page
      • type2.html - second type of page
      • header_background_slider.html - example page with background slider
      • header_background_youtube_video.html - example page with background video
    • color - example pages with various colors(option - @add_color_theme)
      • type1_color1.html и type2_color1.html - example with colour #a74752
      • type1_color2.html и type2_color2.html - example with colour #f1c311
      • type1_color3.html и type2_color3.html - example with colour #f4511e
      • type1_color4.html и type2_color4.html - example with colour #42a5f5
      • type1_color5.html и type2_color5.html - example with colour #26c6da
      • type1_color6.html и type2_color6.html - example with colour #825333
      • type1_color7.html и type2_color7.html - example with colour #513f66
      • type1_color8.html и type2_color8.html - example with colour #9e715a
      • type1_color9.html и type2_color9.html - example with colour #1f4b8e
      • type1_color10.html и type2_color10.html - example with colour #f5a6b1
      • type1_color11.html и type2_color11.html -example with colour #43bd8e
    • merriweather_sans_font - example with font "Merriweather Sans"
    • navigation_effects - examples of effects for mobile version of navigation
    • preloaders - examples of preloaders
    • raleway_font - example with font "Raleway"
    • roboto_font - example with font "Roboto"
    • source_sans_pro_font - example with font "Source Sans Pro"
  • js - js scripts
    • plugins - used jQuery plugins
      • jquery.youtubebackground.min.js - video plugin
      • layerPopup.min.js - popups plugin
      • magicLayout.min.js - animation plugin
      • vegas.min.js - slider plugin
    • jquery.js - jQuery library
    • main.js - initialization file

Settings

Settings can be found in the file 'settings'. For editing the settings you must use any compiler for LESS or SASS.

Variable names Value Description
@color_theme_one #000 Main colour
@color_theme_two #fff Main colour
@add_color_theme #a74752 Additional color. Available 11 colours. (#a74752, #f1c311, #f4511e, #42a5f5, #26c6da, #825333, #513f66, #9e715a, #1f4b8e, #f5a6b1, #43bd8e).
@add_color_theme2 #eee Additional color
@add_color_theme3 #ddd Additional color
@color_theme_one_bg rgba(0, 0, 0, 0.7) Background colour for background images
@font_family 'Raleway', sans-serif The font used in the theme. There are 5 variants ('Raleway', sans-serif; 'Roboto', sans-serif; 'Merriweather Sans', sans-serif; 'Dosis', sans-serif; 'Source Sans Pro', sans-serif)

Typography

Here are using google fonts. Available fonts:

  • https://fonts.googleapis.com/css?family=Bitter|Dosis:400,300,700"
  • https://fonts.googleapis.com/css?family=Raleway:400,300,700
  • https://fonts.googleapis.com/css?family=Roboto:400,300,700
  • https://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,700
  • https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700

Mixins for working with fonts

In this theme I use this mixins for working with fonts:

Mixin name Font-weight Font-size
.font_400_s28() 400 2.8 rem
.font_400_s24() 400 2.4rem
.font_400_s22() 400 2.2rem
.font_400_s16() 400 1.6rem
.font_400_s14() 400 1.4rem
.font_700_s80() 700 8rem
.font_700_s28() 700 2.8rem
.font_700_s24() 700 2.4rem
.font_700_s22() 700 2.2rem
.font_700_s18() 700 1.8rem
.font_700_s16() 700 1.6rem
.font_700_s14() 700 1.4rem
.font_300_s35() 300 3.5rem
.font_300_s28() 300 2.8rem
.font_300_s24() 300 2.4rem
.font_300_s16() 300 1.6rem

Titles

Class name Size
.title .font_300_s35();
.title_middle .font_300_s28();
.title_small .font_700_s24();
.title_little .font_700_s22();
.subtitle .font_400_s16();

Icons

In this theme I use this classes for working with icons:

Class name Description
.icon Main class. By default, icons have size 3rem.
.icon_middle Class for displaying 2rem icons.
.icon_rounded Class for displaying icons with borders.
.icon_rounded-hover Class for effect when hovering on icon.
.icon_rounded-black Class for displying icons in black circle.
.icon_rounded-crimson Class for displying icons in dark red circle.

HTML-structure

					
<!DOCTYPE html>
<html lang="en">
 <head>
 
  <!-- meta-information-->
 
  <title>RuPRO - One Page Responsive Resume Template</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  
   <!-- attaching CSS-->
  
  <link rel="stylesheet" href="../../css/less/raleway/main.css" type="text/css"/>
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,700" rel="stylesheet"/> 
  
 </head>
 </body>

  <!-- attaching JS-scripts-->

 <script src="../../js/jquery.js"></script>
 <script src="../../js/plugins/magicLayout.min.js"></script>
 <script src="../../js/plugins/layerPopup.min.js"></script>
 <script src="../../js/main.js"></script>
 </body>
</html>
					
				

HTML-structure of "Welcome" block

					
<header id="welcome" class="header box_blur display_js">
 <div class="main-container main-container_fullheight">
  <div class="welcome">
   <h1 class="welcome__header">
    <span class="welcome__name layer" data-show-effect="fadeInDown" data-show-delay="500">I'am Bernard Balfour</span>
    <span class="welcome__label layer" data-show-effect="fadeInUp" data-show-delay="500">
     Front-end developer from Denmark
    </span>
   </h1>
   <div class="welcome__footer">
    <a href="#" class="welcome__link layer" data-show-effect="fadeInUp" data-show-delay="1000">download resume</a>
   </div>
  </div>
 </div>
</header>
					
				

HTML-structure of "About me" block

					
<section id="about" class="wrapper display_js">

  <div class="main-container main-container_padding">
   
   <header class="main-container__header">
    <h2 class="title title_bottom-decor">About me</h2>
    <div class="subtitle">Let me introduce myself</div>
   </header>

   <div class="content about-me">
    <div class="about-me__layout layer" data-show-effect="fadeInLeft" data-show-delay="200">
     <div class="avatar">
      <img class="avatar__img responsive-img"  src="http://placehold.it/300x300" alt="Avatar"/>
     </div>
     <div class="about-me__content">
      ...
     </div>
    </div>
    <section class="about-me__sidebar layer" data-show-effect="fadeInRight" data-show-delay="200">
     <h3 class="title title_middle about-me__title">PERSONAL <span class="about-me__title-label">INFO</span></h3>
     <div class="about-me__row">
      <div class="about-me__column">
       <div class="about-me__tag">Name</div>
      </div>
      <div class="about-me__column">
       <div class="about-me__value">Bernard Balfour</div>
      </div>
     </div>
     ...
    </div>
   </section>
  </div>
 </div>
</section>
					
				

HTML-structure of "Skills" block

					
<section id="skills" class="wrapper box_blur skills-display display_js">
 <div class="main-container main-container_padding">
  <header class="main-container__header">
   <h2 class="title title_bottom-decor title_white">Skills</h2>
  </header>
  <div class="content skills">
   <div class="skills__column layer" data-show-effect="fadeIn" data-show-delay="400">
    ...
   </div>
   <div class="skills__column skills-bar">
    <div class="skills-bar__item">
     <div class="skill-bar layer skill-bar_js" data-show-effect="fadeInLeft" data-show-delay="200" data-skill-bar-width="90%">
      <div class="skill layer" data-show-effect="fadeIn" data-show-delay="1200">
       <span class="skill__name">HTML</span>
       <span class="skill__value skill__value_js"></span>
      </div>
     </div>
    </div>
    ...
   </div>
  </div>
 </div>
</section>
					
				

Description of specific classes and attributes for block

  • data-skill-bar-width - value for 'progress bar' width
  • skill-bar_js - class for requesting to calculate 'progress bar'
  • skill__value_js - class for adding 'progress bar' value

HTML-structure "Experience" block

					
<section id="experience" class="wrapper display_js">
 <div class="main-container main-container_padding">
  <header class="main-container__header">
   <h2 class="title title_bottom-decor">Experience</h2>
   <div class="subtitle">More about my experience</div>
  </header>
  <div class="timeline">
   <div class="timeline__line layer" data-show-effect="fadeInDown" data-show-delay="0" data-time="2000"></div>
   <div class="timeline__layout">
    <div class="timeline__dotted layer" data-show-effect="zoomIn" data-show-delay="500" data-time="300"></div>
     <div class="timeline__inner timeline__time layer" data-show-effect="fadeIn" data-show-delay="900">
     <span class="timeline__date">2014 - 2015</span>
     <span class="timeline__place-work">Web Studio "Name"</span>
    </div>
    <article class="timeline__inner timeline__content layer" data-show-effect="fadeInRight" data-show-delay="1000">
     <h3 class="title title_small timeline__title">Front-end developer</h3>
     <div class="timeline__description">
       ...
     </div>
    </article>
   </div>				
  </div>
 </div>
</section>
					
				

HTML-structure "Stats" block

					
<section id="stats" class="wrapper stats-display box_blur display_js">
 <div class="main-container main-container_padding">
  <header class="main-container__header">
   <h2 class="title title_bottom-decor title_white">My stats</h2>
  </header>
  <div class="content stats">
   <div class="stats__item layer" data-show-effect="zoomIn" data-show-delay="300">
    <i class="icon icon-thumbs-up stats__icon"></i>
    <div class="stats__label">20+ projects done</div>
   </div>
  </div>
 </div>
</section>
					
				

HTML-structure "Services" block

					
<section id="services" class="wrapper display_js">
 <div class="main-container main-container_padding main-container_no-padding-bottom">
  <header class="main-container__header">
   <h2 class="title title_bottom-decor">Services</h2>
   <div class="subtitle">What can I do for you</div>
  </header>
  <div class="content services">
   <article class="service layer" data-show-effect="zoomIn" data-show-delay="0">
    <i class="icon icon_rounded icon_rounded-crimson icon-design service__icon"></i>
    <header class="service__header">
     <h4 class="title title_small service__name">Title</h4>
    </header>
    <div class="service__description">
     ...
    </div>
   </article>
  </div>
 </div>
</section>
					
				

HTML-structure "Portfolio" block

In "Portfolio" block there are two types of displaying information.

Content structure of type1.html:

					
<section id="portfolio" class="wrapper portfolio display_js">
 <header class="portfolio__header">
  <h2 class="title title_bottom-decor">Portfolio</h2>
  <div class="subtitle">My latest works</div>
 </header>
 <div class="content list-works">
 
  <div class="list-works__column">
  
   <a href="#" class="list-works__item list-works__item_big layer open-popup_js" data-show-effect="fadeIn" data-show-delay="100" data-id="he">
    <div class="list-works__wrap-img">
     <img src="http://placehold.it/960x960" class="responsive-img" alt="Work" />
    </div>	
    <div class="list-works__overlay"> 
     <span class="list-works__name-project list-works__name-project_fade">Title work</span>
     <span class="list-works__link-project">showmore</span>
    </div>
   </a>
   
   <a href="#" class="list-works__item layer open-popup_js" data-show-effect="fadeIn" data-show-delay="800" data-id="aa">
    <div class="list-works__wrap-img">
     <img src="http://placehold.it/480x480" class="responsive-img" alt="Work" />
    </div>
    <div class="list-works__overlay"> 
     <span class="list-works__name-project list-works__name-project_fade">Title work</span>
     <span class="list-works__link-project">showmore</span>
    </div>
   </a>
    ...
  </div>
  
  <div class="list-works__column">
    ...
   <a href="#" class="list-works__item layer open-popup_js" data-show-effect="fadeIn" data-show-delay="600" data-id="ml">
    <div class="list-works__wrap-img">
     <img src="http://placehold.it/480x480" class="responsive-img" alt="Work" />
    </div>
    <div class="list-works__overlay"> 
     <span class="list-works__name-project list-works__name-project_fade">Title work</span>
     <span class="list-works__link-project">showmore</span>
    </div>
   </a>	
   
   <a href="#" class="list-works__item list-works__item_big layer open-popup_js" data-show-effect="fadeIn" data-show-delay="700" data-id="lrmw">
    <div class="list-works__wrap-img">
     <img src="http://placehold.it/960x960" class="responsive-img" alt="Work" />
    </div>
    <div class="list-works__overlay"> 
     <span class="list-works__name-project list-works__name-project_fade">Title work</span>
     <span class="list-works__link-project">showmore</span>
    </div>
   </a>
  </div>

 </div>
</section>
					
				

Content part is divided into two columns in which you can add elements.

Description of specific classes and attributes for the block

  • .list-works__item - standart class for displaying with 50% of column width.
  • .list-works__item_big - standart class for displaying with 100% of column width.

Content structure of type2.html:

					
<div class="list-works list-works_visible-description-yes">
 <div class="list-works__element">
 
 <!-- project images-->
 
  <div class="list-works__wrap-img list-works__wrap-img_blur layer" data-show-effect="fadeInLeft" data-show-delay="0" data-time="500">
   <svg class="list-works__blur-svg">
   
   <!-- unique id for filter tag-->
   
    <filter id="blur"> 
     <feComponentTransfer>
      <feFuncR type="gamma" amplitude=".3" exponent=".99" />
      <feFuncG type="gamma" amplitude=".3" exponent=".99"  />
      <feFuncB type="gamma" amplitude=".3" exponent=".99" />
     </feComponentTransfer>
     <feColorMatrix values="0" type="saturate" />
    </filter>
	
	<!-- in attribute 'filter' add 'id'-->
	
    <image x="0" y="0" width="100%" height="100%" filter="url(#blur)" xlink:href="http://placehold.it/960x960" />
   </svg>
   <img src="http://placehold.it/960x960" class="responsive-img" alt="Work" />
  </div>
  
  <!-- description of project-->
  
  <div class="list-works__description">
   <h3 class="title list-works__name-project layer" data-show-effect="fadeInDown" data-show-delay="500" data-time="300">Title work</h3>
   <div class="list-works__content layer" data-show-effect="fadeIn" data-show-delay="700">
    ...
   </div>
   <footer class="list-works__footer">
   
   <!-- block with used technologies-->
   
    <div class="project-tech layer" data-show-effect="fadeIn" data-show-delay="800">
	
     <h4 class="title title_little title_bold title_text-transform-no project-tech__title">Technologies:</h4>
     <span class="icon icon_middle icon_rounded icon_rounded-black icon-html5 project-tech__icon layer" data-show-effect="zoomIn"
           data-time="300" data-show-delay="1200"></span>
    </div>
	 
    <a href="#" class="list-works__show-project layer" data-show-effect="fadeInUp" data-time="300" data-show-delay="800">Show Project</a>
   
   </footer>
  </div>
  
  ...
  
 </div>
</div>
					
				

For creating effects you must use 'svg'. In options you must set uniq id for tag < filter >. And in attribute 'filter' set id value

HTML-structure "My journal" block

					
<section id="blog" class="wrapper display_js">
 <div class="main-container main-container_padding main-container_no-padding-bottom">
  <header class="main-container__header">
   <h2 class="title title_bottom-decor">MY JOURNAL</h2>
   <div class="subtitle">My latest news</div>
  </header>
  <div class="content blog">
  
  <!-- post without image-->
  
   <article class="blog__column post post_footer-yes layer" data-show-effect="flipInY" data-time="2000" data-show-delay="0">
    <div class="post__layout">
     <h4 class="title title_little post__title">
	  <a href="#" class="open-popup_js" data-id="blog-popup">LOREM IPSUM DOLOR SIT AMET</a>
     </h4>
     <div class="post__description">
      ...
     </div>
    </div>
    <footer class="post__footer">
     <span class="post__date">30 December, 2015</span>
    </footer>
   </article>
  
  <!-- post with image-->
     
   <article class="blog__column post layer" data-show-effect="flipInY"  data-time="2000" data-show-delay="100">
    <header class="post__header">
     <img src="http://placehold.it/480x320" class="responsive-img post__img open-popup_js" data-id="blog-popup" alt="LOREM IPSUM"/>
     <span class="post__date post__date_absolute">30 November, 2015</span>
    </header>
    <div class="post__layout">
     <h4 class="title title_little post__title">
      <a href="#" class="open-popup_js" data-id="blog-popup">LOREM IPSUM DOLOR SIT AMET</a>
     </h4>
     <div class="post__description">
      ...
     </div>
    </div>
   </article>
  </div>
 </div>
</section>
					
				

HTML-structure "Contact" block

					
<section id="contact" class="wrapper display_js">
 <div class="main-container main-container_padding">
  <header class="main-container__header">
   <h2 class="title title_bottom-decor">Contact</h2>
   <div class="subtitle">Get in touch</div>
  </header>
  <form class="contact-form">
   <div class="contact-form__item layer"  data-show-effect="fadeInLeft" data-show-delay="400">
    <i class="icon icon-user contact-form__icon"></i>
    <input class="text-field" placeholder="Your name" name="username" required/>
   </div>
   <div class="contact-form__item layer"  data-show-effect="fadeInRight" data-show-delay="500">
    <i class="icon icon-mail contact-form__icon"></i>
    <input class="text-field" type="email" placeholder="Your email" name="email" required/>
   </div>
   <div class="contact-form__item layer"  data-show-effect="fadeInLeft" data-show-delay="600">
    <i class="icon icon-message contact-form__icon"></i>
    <textarea class="text-field textarea" placeholder="Your message" name="message" required></textarea>
   </div>
   <button class="button contact-form__button layer"  data-show-effect="fadeInRight" data-show-delay="700">
    <span class="button__label">Send</span>
   </button>  </form>
 </div>
</section>
					
				

Initialization plugin for appearing elements.

First, you need to attach magicLayout.min.js and main.js. Next, you must add class 'layer' to initializing element, and set his value for next attributes.

  • data-show-effect - effect of the appearance
  • data-show-delay - delay before starting animation
  • data-time - duration of animation. You may don't set it, then animation will lasts 1000ms.

For example,

					
<header id="welcome" class="header box_blur display_js">
 <div class="main-container main-container_fullheight">
  <div class="welcome">
   <h1 class="welcome__header">
    <span class="welcome__name layer" data-show-effect="fadeInDown" data-show-delay="500">I'am Bernard Balfour</span>
    <span class="welcome__label layer" data-show-effect="fadeInUp" data-show-delay="500">
     Front-end developer from Denmark
    </span>
   </h1>
   <div class="welcome__footer">
    <a href="#" class="welcome__link layer" data-show-effect="fadeInUp" data-show-delay="1000">download resume</a>
   </div>
  </div>
 </div>
</header>
					
				

List of effects

Effects for the appearance
jump impulse jump jumpIn
jumpInDown jumpInLeft jumpInRight jumpInUp
jump fadeIn fadeInDown fadeInDownBig
fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig
fadeInUp fadeInUpBig flipInX flipInY
lightSpeedIn rotateIn rotateInDownLeft rotateInDownRight
rotateInUpLeft rotateInUpRight rollIn zoomIn
zoomInDown zoomInLeft zoomInRight zoomInUp

Initialization of background video

First, you must attach jquery.youtubebackground.min.js. Then, need to initialize plugin and give id to video, which may get from url. For example, http://www.youtube.com/watch?v=videoID. Result will be like this:

					
<script src="../../js/plugins/jquery.youtubebackground.min.js"></script>
<script>
 (function($){

  $("#welcome").YTPlayer({
	videoId: "0PYSlOutMNw",
	pauseOnScroll: true
  });

 })(jQuery);
</script>
					
				

Initialization of background slider

At first, you'll need to attach vegas.min.js. Then, need to initialize plugin. And result will be:

					
<script src="../../js/plugins/vegas.min.js"></script>
<script>
(function($){

 $("#welcome").vegas({

  animation : 'kenburnsDown',
  timer: false,
  slides: [
   { src: "http://placehold.it/1920x1080" },
   { src: "http://placehold.it/1920x1080" }
  ]

 });

 })(jQuery);
</script>
					
				

List of effects for mobile menu

HTML-structure of mobile menu:

					
<div class="nav-panel">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

If you want to add effect, need to add class of effect to '.nav-panel'. For example, for first effect - .nav-panel_right-to-left. As well, I note, that all ready examples you'll find in folder 'navigation_effects'.

Effect1

					
<div class="nav-panel nav-panel_right-to-left">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect2

					
<div class="nav-panel nav-panel_flip-left">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect3

					
<div class="nav-panel nav-panel_flip-right">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect4

					
<div class="nav-panel nav-panel_fullwidth nav-panel_flip-center">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect5

					
<div class="nav-panel nav-panel_fullwidth nav-panel_flip-center-inverse">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect6

					
<div class="nav-panel nav-panel_fullwidth nav-panel_flip-top">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect7

					
<div class="nav-panel nav-panel_flip-top">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect8

					
<div class="nav-panel nav-panel_flip-bottom">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect9

					
<div class="nav-panel nav-panel_fullwidth nav-panel_flip-bottom">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect10

					
<div class="nav-panel nav-panel_fullwidth nav-panel_top-to-bottom">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect11

					
<div class="nav-panel nav-panel_right-to-left">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect12

					
<div class="nav-panel nav-panel_bottom-to-top">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect13

					
<div class="nav-panel nav-panel_fullwidth nav-panel_bottom-to-top">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect14

					
<div class="nav-panel nav-panel_fullwidth nav-panel_right-to-left">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect15

					
<div class="nav-panel nav-panel_fullwidth nav-panel_left-to-right">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect16

					
<div class="nav-panel nav-panel_left-to-right">
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect17

					
<div class="nav-panel nav-panel_fullwidth nav-panel_zoom-in">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect18

					
<div class="nav-panel nav-panel_fullwidth nav-panel_flip-left">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

Effect19

					
<div class="nav-panel nav-panel_fullwidth nav-panel_flip-right">
 <span class="close-arrow close-arrow_black mobile-menu-close_js"></span>
 <header class="nav-panel__header logo logo_bottom-decor">
  <span class="logo__item">Bernard</span>
  <span class="logo__item logo__item_bold">Balfour</span>
  <span class="logo__label">Front-end developer</span>
 </header>
 <div class="nav-panel__content">
  <nav class="nav nav-panel__layout">
   <a href="#welcome" class="nav-panel__link init-scroll_js" data-scroll-nav="0" data-id-section="welcome">
    <i class="icon icon-home nav-panel__icon"></i>
    Home
   </a>
    ...
   </nav>
  </div>
</div>
					
				

List of preloaders

For using preloaders, you need to copy ready HTML code and paste it before tag 'body'. All ready examples you'll find in folder 'preloaders'.

Preloader1

					
<div class="preloader box_blur preloader_js" data-class-overlay="overlay">
 <div class="mpc_preloader prelodader-animation_js">
  <div class="mpc_preloader_round mpc_preloader2">Loading</div>
 </div>
</div>
					
				

Preloader2

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader prelodader-animation_js">
  <div class="mpc_preloader_round mpc_preloader3">Loading</div>
 </div>
</div>
					
				

Preloader3

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader prelodader-animation_js">
  <div class="mpc_preloader_round mpc_preloader4">Loading</div>
 </div>
</div>	
					
				

Preloader4

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader mpc_preloader5 prelodader-animation_js">
  <div class="mpc_preloader5_element">
   <div class="mpc_preloader5_rotator">
    <div class="mpc_preloader5_rotator_element"></div>
    <div class="mpc_preloader5_rotator_element"></div>
   </div>
  </div>
 </div>
</div>	
					
				

Preloader5

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader mpc_preloader6 prelodader-animation_js">
  <div class="mpc_preloader6_element mpc_preloader6_element1"> </div>
  <div class="mpc_preloader6_element mpc_preloader6_element2"> </div>
  <div class="mpc_preloader6_element mpc_preloader6_element3"> </div>
  <div class="mpc_preloader6_element mpc_preloader6_element4"> </div>
 </div>
</div>	
					
				

Preloader6

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader prelodader-animation_js">
  <div class="mpc_preloader7"></div>
 </div>
</div>	
					
				

Preloader7

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader prelodader-animation_js">
  <div class="mpc_preloader8">
   <div class="mpc_preloader8_element"></div>
  </div>
 </div>
</div>	
					
				

Preloader8

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader prelodader-animation_js">
  <div class="mpc_preloader9"></div>
 </div>
</div>	
					
				

Preloader9

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader prelodader-animation_js">
  <div class="mpc_preloader12"></div>
 </div>
</div>	
					
				

Preloader10

					
<div class="preloader box_blur preloader_js">
 <div class="mpc_preloader prelodader-animation_js">
  <div class="mpc_preloader13"></div>
 </div>
</div>
					
				

Additional mixins

Name Description
.transition(@property, @time, @effect, @delay) Mixin for cross browser realisation of 'transition'. @property – attribute for animation; @time – duration of animation; @effect – animation effect; @delay – delay before starting animation.
.complex_transition(@property, @property2, @time, @effect, @delay) Mixin for cross browser realisation of 'transition' with 2 attributes. Settings are same as 'transition' mixin.
.translate(@x, @y) Mixin for cross browser realisation of 'transform' wth 'translate' value.
.transform_scale(@x,@y,@value) Mixin for cross browser realisation of 'transform'with 'translate' and 'scale' values. @x - value on X-axis; @y –value on Y-axis; @value – value for attribute 'scale'.
.absolute_middle_block() Mixin for realisation absolute positioning on the Y-axis.
.absolute_center_horizonatal() Mixin for realisation absolute positioning on the X-axis.
.absolute_center_block() Mixin for realisation absolute positioning on the Y-axis and X-axis.
.transform_translate_rotateY(@x, @y, @value) Mixin for cross browser realisation of 'transform'with 'translate' and 'rotateY' values. @x - value on X-axis; @y – value on Y-axis; @value – value for attribute 'rotateY'.
.transform_translate_rotateX(@x, @y, @value) Mixin for cross browser realisation of 'transform' with 'translate' and 'rotateX'. @x - value on X-axis; @y – value on Y-axis; @value – value for attribute 'rotateX'.
.transform_translate_rotate3d(@x, @y, @valueX, @valueY, @valueZ, @deg) Mixin for cross browser realisation of 'transform' with 'translate' and 'rotate3d'. @x - value on X-axis; @y – value on Y-axis; @valueX, @valueY, @valueZ – value for setting the axis, @deg - angle of rotation.
.transform_rotate(@value) Mixin for cross browser realisation of 'transform' with 'rotate' value. @value – angle of rotation.
.transform_simple_scale(@value) Mixin for cross browser realisation of 'transform' with 'scale' value. @value – coefficient for attribute 'scale'.
.transform_origin(@value1, @value2) Mixin for cross browser realisation of 'transform-origin'. @value1, @value2 – value of attribute.
.transform_style(@value) Mixin for cross browser realisation of 'transform-style'. @value - value of attribute.
.clear() Mixin for clearing attribute 'float'
.bottom_line_decor() Mixin for decorative underscore in titles and logo
.flexbox() Mixin for cross browser realisation of 'flexbox'.
.flexwrap(@value) Mixin for cross browser realisation of 'flex-wrap'. @value - value of attribute.
.justify_content(@value) Mixin for cross browser realisation of 'justify-content'. @value - value of attribute.
.align_items(@value) Mixin for cross browser realisation of 'align-items'. @value - value of attribute.
.flex_direction(@value) Mixin for cross browser realisation of 'flex-direction'. @value - value of attribute.

Additional variables

Name Description
@padding_section Upper and lower indent in section
@width_form_elements Width of elements of contacts form. By default, value is 89.6%
@hover_animation_time Duration of animation while hovering at portfolio element. By default, value is 0.5s.

List of jQuery plugins

Name Description
JQuery jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
Magic layout I created a Jquery plugin that animates all page elements. To demonstrate its capabilities, I created this demo page as my portfolio. The main advantage of the plugin is its simple. You will need to connect the files and set need settings. For you available 36 effects, the ability to control the animation time. This plugin will help to make beautiful sites!
Layered Responsive Modal Window One of the most popular features of the website is a modal window. Modern developers pay little attention to them. Often Windows look awful, boring or don’t work. So we decided to create a unique component for modal dialogs! The result surprised us! Turned out so beautiful, interesting window. Now you can create the same. The only thing that can you can prevent this by you! Create, invent! Create individual Windows! Which is not on any website. Our component is suitable for lightbox. Your quality pictures will gain a new look! This you will surely enjoy.
jQuery.BackgroundVideo A wrapper for the Youtube API - Great for fullscreen background videos or just regular videos.
Vegas – Backgrounds and Slideshows Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.