MEE - Responsive Resume / Personal Portfolio Template
- Created: 29 Aug 2014
- Latest Update: 28 July 2018
- By: ThemeZaa
- Email: info@themezaa.com
Thank you for purchasing theme. If you have any questions that are beyond the scope of this help file, please feel free to emai. Thanks so much!
We love to hear your feedback - if you find any bugs or have suggestions for improvements please get in touch. Nearly all of the time we follow your advice and issue a rapid update to Finely.
If you like this template, please remember to rate it on Themeforest - it really helps us to know what people think of our templates. To rate this item, go to your Downloads page on Themeforest, then next to this template click on a star rating you'd like to give us.
Thank you so much.ThemeZaa Team
Overview
Mee is a Unique and Creative Responsive Resume Template.
Mee is built with the latest HTML5 and CSS3 technologies. The page is Search Engine Optimized using professional html markup.
File Structure
As Mee is an HTML template, it uses a number of .html pages in conjunction with css stylesheets and a number of javascript plugins. The following is a brief overview of the files and a look at some prominent features.
4 color schemes. Please pick the right one for you.
default/index.html
dark_gray/index.html
black/index.html
violet/index.html
HTML Files
Note that index.html will be the file your browser defaults to when you navigate to the directory in your web browser.
CSS Files
Mee comes with a number of CSS files, many of which you will likely never touch. There are two however, that you will likely edit if you are changing the style of the site in anyway.
style.cssThis is the main stylesheet for the template and includes all styles relating to the appearance of the elements you see inside each page. This stylesheets has been commented.
responsive.cssThis file is sectioned into smaller screened laptops, smartphones and tablets (both portrait and landscape) and any changes made to these sections will only be visible on the appropriate device (or at the target screen size).
portfolio.cssThis file is into portfolio section and any changes made to these sections will only be visible on portfolio.
scroll.cssThis file is for entire page scrolling effects.
font-awesome.cssGives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Check the cheatsheet.
carousel.cssThis file is into portfolio section carousel slider. Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
normalize.cssThis file is for entire page for normal HTML tags. For example html, button, input, select, textarea etc...
Javascript Files
All Javascript files for the template that includes all functions specific to the theme such as control of the navigation and slider declarations among other things.
jquery.mousewheel.js, mwheelIntent.js, jquery.jscrollpane.min.js, jquery.history.js, core.string.js, jquery.easing.1.3.js, jquery.smartresize.js, jquery.page.js, head.min.jsThese files are entire page for horizontal page scrolling effect.
jquery-2.0.3.min.js, jquery.min.jsThis file is for entire page for jQuery plugin library.
progressbar.jsThis file is used for skills section in language skills.
modernizr.custom.jsModernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
imagesloaded.min.js, masonry.min.js, class_helper.js, grid_gallery.jsThese files are used for portfolio section.
carousel.jsThis file is used for portfolio section in carousel slider.
jquery.easypiechart.jsThis file is used for skills section in skills piechart.
text.rotator.jsThis file is used for text rotating effect.
settings.jsThis is the main scripts file for the template that includes all functions specific to the theme such as control of the PieChart, Progress Bar, Carousel, Mobile Menu, Text Rotator declarations among other things.
sendemail.jsThis is used for contact us form validation prosess.
PHP File
sent-email.phpThis file is used for contact us section of mail sent prosess.
HTML
This is the HTML part for the Page.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" /> <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"> <title>Andrew Smith - Responsive Resume / Personal Portfolio Template</title> <link rel="shortcut icon" href="favicon.ico"> <!-- Google Font--> <link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700,900,900italic,700italic%7COswald:400,300,700' rel='stylesheet' type='text/css'> <!-- Design Style --> <link rel="stylesheet" type="text/css" href="css/scroll.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- Icon --> <link rel="stylesheet" type="text/css" href="css/font-awesome.css" /> <!-- Portfolio Thumbnail / Slider --> <link rel="stylesheet" type="text/css" href="css/portfolio.css" /> <link rel="stylesheet" type="text/css" href="css/carousel.css"> <!-- Responsive --> <link rel="stylesheet" type="text/css" href="css/responsive.css" /> </head> <body> <div id="container" class="container"> <!-- Left Menu / Logo--> <aside class="menu" id="menu"> <div class="logo"> <!-- Logo image--> <img src="http://placehold.it/140x140" alt=""/> <!-- Logo name--> <span>Andrew Smith</span></div> <!-- Mobile Navigation--> <a href="#menu1" class="menu-link"></a> <!-- Left Navigation--> <nav id="menu1" role="navigation"> <a href="#chapterintroduction"><span id="link_introduction" class="active">Home</span></a> <a href="#chapterabout"><span id="link_about">About</span></a> <a href="#chapterskills"><span id="link_skills">Skills</span></a> <a href="#chapterexperience"><span id="link_experience">Experience</span></a> <a href="#chaptereducation"><span id="link_education">Education</span></a> <a href="#chapterportfolio"><span id="link_portfolio">Portfolio</span></a> <a href="#chaptercontact"><span id="link_contact">Contact</span></a></nav> <div class="social"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a> </div> <div class="copyright"> © Andrew Smith.<br> All Rights Reserved. </div> </aside> <!-- Go to top link for mobile device --> <a href="#menu" class="totop-link">Go to the top</a> <div class="content-scroller"> <div class="content-wrapper"> <!-- Introduction --> <article class="content introduction noscroll" id="chapterintroduction"> <div class="inner"> <h2><span>HEllo, I'm</span><br> Andrew Smith</h2> <span class="title">UX Designer / Frontend Developer</span> </div> <div id="owl-demo" class="owl-carousel"> <div class="item"><img src="http://placehold.it/804x979" alt="" /></div> <div class="item"><img src="http://placehold.it/804x979" alt="" /></div> <div class="item"><img src="http://placehold.it/804x979" alt="" /></div> </div> </article> <!-- About --> <article class="content about white-bg" id="chapterabout"> <div class="inner"> <h2>About</h2> <div class="title-divider"></div> <div class="about-con"> <ul> <li>Name: Andrew Smith</li> <li>Email: <a href="mailto:andrew@gmail.com">andrew@gmail.com</a></li> <li>Phone: (123) - 456-7890</li> <li>Date of birth: 23 February 1986</li> <li>Address: PO Box 16122 Collins Street West, Victoria, USA.</li> <li>Nationality: United States</li> </ul> <h3>Professional Profile</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate vestibulum elementum. Suspendisse id neque a nibh mollis blandit.<br> </p> <a href="#" class="button">Download resume as PDF format</a> <img src="http://placehold.it/150x134" class="signature" alt="" /></div> </div> </article> <!-- Skills --> <article class="content skills gray-bg" id="chapterskills"> <div class="inner"> <h2>Skills</h2> <div class="title-divider"></div> <h3>Just My Awesome Skills</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus dignissim.</p> <div class="skills-con"> <div class="container-sub margin-top50"> <div class="row"> <div class="col-6 margin-bottom50"> <div class="col-6"><span class="chart" data-percent="75"><span class="percent"></span> </span></div> <div class="col-6 chart-text"> <h4>Film Editing</h4> <p>Expert, 4 years</p> </div> </div> <div class="col-6 margin-bottom50"> <div class="col-6"><span class="chart" data-percent="88"><span class="percent"></span> </span></div> <div class="col-6 chart-text"> <h4>Art Direction</h4> <p>Advanced, 2 years</p> </div> </div> <div class="col-6"> <div class="col-6"><span class="chart" data-percent="90"><span class="percent"></span> </span></div> <div class="col-6 chart-text"> <h4>Technical Expertise</h4> <p>Expert, 8 years</p> </div> </div> <div class="col-6"> <div class="col-6"><span class="chart" data-percent="96"><span class="percent"></span> </span></div> <div class="col-6 chart-text"> <h4>HTML5 CSS3</h4> <p>Expert, 8 years</p> </div> </div> </div> </div> <div class="full-divider"></div> <div class="container-sub skill-list"> <div class="row"> <h3>Knowledge</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus dignissim.</p> <div class="col-4 margin-top10"> <ul> <li>Google Analythics & SEO</li> <li>Instal and Configure</li> <li>E-commerce Platform</li> <li>Color theory knowledge</li> </ul> </div> <div class="col-4 margin-top10"> <ul> <li>Photo manipulation skills</li> <li>Digital Painting</li> <li>Photo Composition</li> <li>Good sense of Tipography</li> </ul> </div> <div class="col-4 margin-top10"> <ul> <li>Web Usability</li> <li>Grid & Layout</li> <li>Portrait Retouching</li> <li>Video Editing</li> </ul> </div> </div> </div> <div class="full-divider"></div> <div class="container-sub"> <div class="row"> <h3>Language Skills</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus dignissim.</p> <div class="progressbar-main margin-top50"> <div class="progress-bar-description">English Experienced</div> <div id="progressBar" class="progress"> <div class="progress-value"></div> </div> </div> <div class="progressbar-main margin-top40"> <div class="progress-bar-description">French Advanced</div> <div id="progressBar2" class="progress"> <div class="progress-value"></div> </div> </div> <div class="progressbar-main margin-top40"> <div class="progress-bar-description">German Basic</div> <div id="progressBar3" class="progress"> <div class="progress-value"></div> </div> </div> </div> </div> </div> </div> </article> <!-- Experience --> <article class="content experience white-bg" id="chapterexperience"> <div class="inner"> <h2>Experience</h2> <div class="title-divider"></div> <h3>14 Years Experience!</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus dignissim.</p> <div class="experience-con"> <div class="container-sub"> <div class="full-divider"></div> <div class="row"> <div class="experience-details"> <div class="col-6 margin-bottom50 margin-top50"> <div class="col-3 icon-block"><i class="fa fa-send-o"></i></div> <div class="flot-left"> <h5>Panara Media</h5> <h4>Art Director</h4> <span>2014 - 2013</span> </div> </div> <div class="col-6 margin-bottom50 margin-top50 no-margin-top"> Phasellus nec gravida purus. Aliquam ac enim vel ipsum consectetur vulputate. Duis quis feugiat neque. Pellentesque eleifend, nisi vel mattis vestibulum, est lacus pretium quam. </div> </div> <div class="full-divider"></div> <div class="experience-details"> <div class="col-6 margin-bottom50 margin-top50"> <div class="col-3 icon-block"><i class="fa fa-briefcase"></i></div> <div class="flot-left"> <h5>Ace Advertising</h5> <h4>Project Manager</h4> <span>2013 - 2011</span> </div> </div> <div class="col-6 margin-bottom50 margin-top50 no-margin-top"> Phasellus nec gravida purus. Aliquam ac enim vel ipsum consectetur vulputate. Duis quis feugiat neque. Pellentesque eleifend, nisi vel mattis vestibulum, est lacus pretium quam. </div> </div> <div class="full-divider"></div> <div class="experience-details"> <div class="col-6 margin-bottom50 margin-top50"> <div class="col-3 icon-block"><i class="fa fa-arrows-alt"></i></div> <div class="flot-left"> <h5>Linksture Web</h5> <h4>Senior UX Designer</h4> <span>2011 - 2008</span> </div> </div> <div class="col-6 margin-bottom50 margin-top50 no-margin-top"> Phasellus nec gravida purus. Aliquam ac enim vel ipsum consectetur vulputate. Duis quis feugiat neque. Pellentesque eleifend, nisi vel mattis vestibulum, est lacus pretium quam. </div> </div> <div class="full-divider"></div> <div class="experience-details"> <div class="col-6 margin-bottom50 margin-top50"> <div class="col-3 icon-block"><i class="fa fa-quote-right"></i></div> <div class="flot-left"> <h5>Matrix Media</h5> <h4>Visual / UI Designer</h4> <span>2008 - 2006</span> </div> </div> <div class="col-6 margin-bottom50 margin-top50 no-margin-top"> Phasellus nec gravida purus. Aliquam ac enim vel ipsum consectetur vulputate. Duis quis feugiat neque. Pellentesque eleifend, nisi vel mattis vestibulum, est lacus pretium quam. </div> </div> <div class="full-divider"></div> <div class="experience-details"> <div class="col-6 margin-bottom50 margin-top50"> <div class="col-3 icon-block"><i class="fa fa-bullhorn"></i></div> <div class="flot-left"> <h5>Creatika Agency</h5> <h4>Graphic Designer</h4> <span>2006 - 2004</span> </div> </div> <div class="col-6 margin-bottom50 margin-top50 no-margin-top"> Phasellus nec gravida purus. Aliquam ac enim vel ipsum consectetur vulputate. Duis quis feugiat neque. Pellentesque eleifend, nisi vel mattis vestibulum, est lacus pretium quam. </div> </div> </div> </div> </div> </div> </article> <!-- Education --> <article class="content education gray-bg" id="chaptereducation"> <div class="inner"> <h2>Education</h2> <div class="title-divider"></div> <h3>Just My Education</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus dignissim.</p> <div class="education-con"> <div class="container-sub"> <div class="full-divider"></div> <div class="row"> <div class="education-details"> <div class="col-6 margin-bottom50 margin-top50"> <div class="col-3 icon-block"><i class="fa fa-photo"></i></div> <div class="flot-left"> <h5>University of Design</h5> <h4>Bachelor of Arts</h4> <span>2009 - 2010</span> </div> </div> <div class="col-6 margin-bottom50 margin-top50 no-margin-top"> Phasellus nec gravida purus. Aliquam ac enim vel ipsum consectetur vulputate. Duis quis feugiat neque. Pellentesque eleifend, nisi vel mattis vestibulum, est lacus pretium quam. </div> </div> <div class="full-divider"></div> <div class="education-details"> <div class="col-6 margin-bottom50 margin-top50"> <div class="col-3 icon-block"><i class="fa fa-laptop"></i></div> <div class="flot-left"> <h5>Boston State University</h5> <h4>Visual Art & Design</h4> <span>2006 - 2007</span> </div> </div> <div class="col-6 margin-bottom50 margin-top50 no-margin-top"> Phasellus nec gravida purus. Aliquam ac enim vel ipsum consectetur vulputate. Duis quis feugiat neque. Pellentesque eleifend, nisi vel mattis vestibulum, est lacus pretium quam. </div> </div> <div class="full-divider"></div> <div class="education-details"> <div class="col-6 margin-bottom50 margin-top50"> <div class="col-3 icon-block"><i class="fa fa-life-bouy"></i></div> <div class="flot-left"> <h5>Boston State University</h5> <h4>Degree of Design</h4> <span>2004 - 2005</span> </div> </div> <div class="col-6 margin-bottom50 margin-top50 no-margin-top"> Phasellus nec gravida purus. Aliquam ac enim vel ipsum consectetur vulputate. Duis quis feugiat neque. Pellentesque eleifend, nisi vel mattis vestibulum, est lacus pretium quam. </div> </div> </div> </div> </div> </div> </article> <!-- Pportfolio --> <article class="content portfolio white-bg" id="chapterportfolio"> <div class="inner"> <h2>Portfolio</h2> <div class="title-divider"></div> <h3>Our portfolio features a variety of projects and services</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus dignissim.</p> <div class="portfolio-con"> <div class="container-sub margin-top50"> <div class="row"> <div id="grid-gallery" class="grid-gallery"> <section class="grid-wrap"> <ul class="grid"> <li> <figure> <img src="http://placehold.it/700x475" alt=""/> <figcaption> <div class="figcaption-details"> <img src="images/icon-plus.png" height="82" width="82" alt="" /> <h3>Project Name</h3> <span>Work Details</span> </div> </figcaption> </figure> </li> <li> <figure> <img src="http://placehold.it/700x475" alt=""/> <figcaption> <div class="figcaption-details"> <img src="images/icon-plus.png" height="82" width="82" alt="" /> <h3>Project Name</h3> <span>Work Details</span> </div> </figcaption> </figure> </li> <li> <figure> <img src="http://placehold.it/700x475" alt=""/> <figcaption> <div class="figcaption-details"> <img src="images/icon-plus.png" height="82" width="82" alt="" /> <h3>Project Name</h3> <span>Work Details</span> </div> </figcaption> </figure> </li> <li> <figure> <img src="http://placehold.it/700x475" alt=""/> <figcaption> <div class="figcaption-details"> <img src="images/icon-plus.png" height="82" width="82" alt="" /> <h3>Project Name</h3> <span>Work Details</span> </div> </figcaption> </figure> </li> <li> <figure> <img src="http://placehold.it/700x475" alt=""/> <figcaption> <div class="figcaption-details"> <img src="images/icon-plus.png" height="82" width="82" alt="" /> <h3>Project Name</h3> <span>Work Details</span> </div> </figcaption> </figure> </li> </ul> </section> <!-- Lightbox Popup --> <section class="slideshow"> <ul> <li> <figure> <figcaption> <h3>Project Name</h3> <span>Work Details</span> <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p> </figcaption> <div id="owl-demo" class="owl-carousel"> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> </div> </figure> </li> <li> <figure> <figcaption> <h3>Project Name</h3> <span>Work Details</span> <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p> </figcaption> <img src="http://placehold.it/700x475" alt="" /> </figure> </li> <li> <figure> <figcaption> <h3>Project Name</h3> <span>Work Details</span> <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p> </figcaption> <div id="owl-demo" class="owl-carousel"> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> </div> </figure> </li> <li> <figure> <figcaption> <h3>Project Name</h3> <span>Work Details</span> <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p> </figcaption> <img src="http://placehold.it/700x475" alt="" /> </figure> </li> <li> <figure> <figcaption> <h3>Project Name</h3> <span>Work Details</span> <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p> </figcaption> <img src="http://placehold.it/700x475" alt="" /> </figure> </li> </ul> <nav> <span class="fa nav-prev"></span> <span class="fa nav-next"></span> <span class="fa nav-close"></span> </nav> </section> </div> </div> </div> </div> </div> </article> <!-- Contact --> <article class="content contact gray-bg" id="chaptercontact"> <div class="inner"> <h2>Contact</h2> <div class="title-divider"></div> <h3>Let's Keep In Touch</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus dignissim.</p> <div class="full-divider"></div> <div class="contact-con margin-top50"> <div class="container-sub"> <div class="row"> <div class="contact-details"> <div class="col-6"> <div class="contact-text"> <div class="col-2 icon-block address"><i class="fa fa-map-marker"></i></div> <div class="flot-left"> <strong>Andrew Smith</strong><br> PO Box 16122 Collins Street West,<br> Victoria 8007, United States. </div> </div> <div class="contact-text"> <div class="col-2 icon-block phone"><i class="fa fa-phone"></i></div> <div class="flot-left"> <strong>Phone</strong><br> +123-456-7890 </div> </div> <div class="contact-text"> <div class="col-2 icon-block email"><i class="fa fa-envelope"></i></div> <div class="flot-left"> <strong>Email</strong><br> <a href="mailto:no-reply@domain.com">no-reply@domain.com</a> </div> </div> </div> <div class="col-6 m-margin-top30"> <h3>I'm also on Social Networks</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam tempus aliquet vitae eget dolor. <div class="contact-social margin-top30"><a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-youtube"></i></a><a href="#"><i class="fa fa-google-plus"></i></a><a href="#"><i class="fa fa-linkedin"></i></a> </div> </div> </div> </div> </div> <div class="full-divider"></div> <div class="container-sub"> <div class="row"> <div class="contact-form"> <h3>Drop Me a Line</h3> <form id="form1" name="form1" method="post" > <input name="name" type="text" id="name" placeholder="Your Name..." /> <input name="email" type="text" id="email" placeholder="Your Email..." /> <textarea name="message" id="message" cols="45" rows="5" placeholder="Your Message..."></textarea> <input type="submit" name="button" id="button" value="say hello!" > <div id="successmsg" ></div> </form> </div> </div> </div> </div> </div> </article> <!-- Introduction --> <article class="content introduction-end" id="chapterthankyou"> <div class="inner"> <div class="introduction-end-con margin-top50"> <h3><strong>Andrew Smith</strong></h3> <div id="rotate" class="rotate"> <div><span>awesome.</span></div> <div><span>invincible.</span></div> <div><span>unbeatable.</span></div> <div><span>indestructible.</span></div> </div> </div> </div> </article> </div> <!-- content-wrapper --> </div> <!-- content-scroller --> </div> <!-- Pie Chart / Skills --> <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> <!-- Send Email --> <script type="text/javascript" src="js/sendemail.js"></script> <!-- Progressbar / Skills--> <script type="text/javascript" src="js/progressbar.js"></script> <!-- Portfolio--> <script src="js/modernizr.custom.js"></script> <script type="text/javascript" src="js/head.min.js"></script> <!-- Portfolio Thumbnail --> <script type="text/javascript" src="js/imagesloaded.min.js"></script> <script type="text/javascript" src="js/masonry.min.js"></script> <script type="text/javascript" src="js/class_helper.js"></script> <script type="text/javascript" src="js/grid_gallery.js"></script> <!-- Portfolio Grid --> <script> new CBPGridGallery( document.getElementById( 'grid-gallery' ) ); </script> <!-- Page Scrolling --> <script> head.js( { jquery : "js/jquery.min.js" }, { mousewheel : "js/jquery.mousewheel.js" }, { mwheelIntent : "js/mwheelIntent.js" }, { jScrollPane : "js/jquery.jscrollpane.min.js" }, { history : "js/jquery.history.js" }, { stringLib : "js/core.string.js" }, { easing : "js/jquery.easing.1.3.js" }, { smartresize : "js/jquery.smartresize.js" }, { page : "js/jquery.page.js" } ); </script> <!-- Portfolio Slider--> <script type="text/javascript" src="js/carousel.js"></script> <script type="text/javascript" src="js/jquery.easypiechart.js"></script> <script type="text/javascript" src="js/text.rotator.js"></script> <!-- All Javascript Component--> <script src="js/settings.js"></script> </body> </html>
More to come in next updates.
Change Logo
This is the HTML part for the logo
<div class="logo"> <img alt="" src="http://placehold.it/140x140"> <span>Andrew Smith</span> </div>
Change About Image
Step 1Open css/style.css file
Step 2Find ".about" class and replace this line "background: url(http://placehold.it/1100x1080/fff)no-repeat 100% 0 scroll;" with "background: url(../images/yourimage.jpg)no-repeat 100% 0 scroll;"
Change Introduction Last Section Image
Step 1Open css/style.css file
Step 2Find ".introduction-end" class and replace this line "background: url(http://placehold.it/1608x1080/000)no-repeat right top;" with "background: url(../images/yourimage.jpg)no-repeat right top;"
Using Pie Chart
This is the HTML part for the piechart
<div class="col-6"><span class="chart" data-percent="75"><span class="percent"></span></span></div> <div class="col-6 chart-text"> <h4>Film Editing</h4> <p>Expert, 4 years</p> </div>
And here is the CSS part for the piechart.
/* ========================================================================== #PieChart ========================================================================== */ .chart { position: relative; display: inline-block; width: 154px; height: 154px; text-align: center; border-radius: 50%; background-color: #FFF; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { display: inline-block; line-height: 110px; z-index: 2; font-size: 40px; font-family: 'Oswald', sans-serif; font-weight: 400; letter-spacing: -1px; margin: 21px 0 0 0; color: #ffb400; } .percent:after { content: '%'; margin-left: 0.1em; font-family: 'Oswald', sans-serif; font-weight: 100; } .angular { margin-top: 100px; } .angular .chart { margin-top: 0; } .chart-text { margin: 30px 0 0 0 } .chart-text p { margin: 10px 0 0 15px } .chart-text h4 { margin: 0 0 0 15px; }
Using Progressbar
This is the HTML part for the progressbar
<div class="progressbar-main"> <div class="progress-bar-description">French Advanced</div> <div id="progressBar" class="progress"> <div class="progress-value"></div> </div></div>
This is the javascripts for the progressbar. Please open settings.js and add/edit below code.
/* ========================================================================== #Progress Bar For Skills Page ========================================================================== */ progressBar(99, $('#progressBar')); progressBar(80, $('#progressBar2')); progressBar(60, $('#progressBar3'));
This is the CSS part for the progressbar.
/* ========================================================================== #Progressbar ========================================================================== */ .progress { background: #d4d4d4; width: 86%; float: right; position: relative; top: 10px; } .progress div { background-color: #8f8f8f; height: 6px; } .progressbar-main { position: relative; min-height: 35px } .progress-value span { font-family: 'Oswald', sans-serif; font-size: 40px; font-weight: 400; position: relative; left: -93px; color: #000; top: -19px } .progress-value span:after { content: "%"; font-weight: 100 } .progress-bar-description { font-weight: 500; color: #000; margin: 0 0 0 90px; font-size: 14px; }
Using Lightbox Gallery
This is the HTML part for the lightbox
<div class="row"> <div id="grid-gallery" class="grid-gallery"> <section class="grid-wrap"> <ul class="grid"> <li> <figure> <img src="http://placehold.it/700x475" alt=""/> <figcaption> <div class="figcaption-details"> <img src="images/icon-plus.png" height="82" width="82" alt="" /> <h3>The Flavour Restaurant</h3> <span>Website Design & Development</span> </div> </figcaption> </figure> </li> </ul> </section> <!-- grid-wrap --> <section class="slideshow"> <ul> <li> <figure> <figcaption> <h3>The Flavour Restaurant</h3> <span>Website Design & Development</span> <p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p> </figcaption> <img src="http://placehold.it/700x475" alt="" /> </figure> </figure> </li> </ul> <nav> <span class="fa nav-prev"></span> <span class="fa nav-next"></span> <span class="fa nav-close"></span> </nav> </section> <!-- slideshow --> </div> <!-- grid-gallery --> </div>
This is the javascripts for the lightbox.
new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
This is the CSS part for the lightbox. Please open portfolio.css
/* ========================================================================== #General style ========================================================================== */ .grid-gallery ul { list-style: none; margin: 0; padding: 0; } .grid-gallery figure { margin: 0; } .grid-gallery figure img { display: block; width: 100%; } .grid-gallery figcaption h3 { margin: 0; font-weight: 500; font-size: 20px; font-family: 'Roboto', sans-serif; color: #000; text-transform: uppercase; padding: 0 0 10px 0; } .grid-gallery figcaption span { border-bottom: 3px solid #ffb400; color: #000; display: block; font-size: 12px; margin: 0 0 25px; padding: 0 0 15px; text-transform: uppercase; } /* ========================================================================== #Grid ========================================================================== */ .grid-wrap { } .grid { margin: 0 auto; } .grid li { width: 100%; float: left; cursor: pointer; margin: 0 0 70px 0; position: relative !important; top:inherit !important; } .grid figure { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .grid li:hover figure { opacity: 1; } .grid figcaption { background-color: #ffb400; opacity: 0; position: absolute; top: 0; width: 100%; height: 100%; transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; } .grid li:hover figcaption { opacity: 1; transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; } .figcaption-details { position: absolute; top: 32%; width: 100%; text-align: center; } .figcaption-details img { width: 82px !important; height: 82px !important; display: inline !important; margin: 0 0 30px } /* ========================================================================== #Slideshow ========================================================================== */ .slideshow { position: fixed; background: rgba(255,204,0,1); background: -moz-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,204,0,1)), color-stop(100%, rgba(229,0,118,0.85))); background: -webkit-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%); background: -o-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%); background: -ms-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%); background: linear-gradient(to right, rgba(255,204,0,1) 0%, rgba(229,0,118,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#e50076', GradientType=1 ); width: 100%; height: 100%; top: 0; left: 0; z-index: 500; opacity: 0; visibility: hidden; overflow: hidden; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } .slideshow-open .slideshow { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .slideshow ul { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 150px); transform: translate3d(0, 0, 150px); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .slideshow ul.animatable li { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .slideshow-open .slideshow ul { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slideshow li { width: 700px; height: 630px; position: absolute; top: 42%; left: 47.5%; margin: -280px 0 0 -330px; visibility: hidden; } .slideshow li.show { visibility: visible; } .slideshow li:after { content: ''; position: absolute; width: 114%; height: 114%; top: 0; left: 0; background: rgba(255,255,255,0.8); -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .slideshow li.current:after { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; } .slideshow figure { width: 100%; height: 100%; background: #fff; border: 50px solid #fff; overflow: hidden; } .slideshow figcaption { padding-bottom: 20px; } .slideshow figcaption h3 { font-weight: 300; font-size: 200%; } /* ========================================================================== #Navigation ========================================================================== */ .slideshow nav span { position: fixed; z-index: 1000; color: #000; text-align: center; padding: 3%; cursor: pointer; font-size: 2.2em; } .slideshow nav span:hover { color: #FFF } .slideshow nav span.nav-prev, .slideshow nav span.nav-next { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .slideshow nav span.nav-close { top: 0; right: 0; padding: 0.5em 0.7em; color: #fff; background-color: #000; } .slideshow nav span.nav-close:hover { background-color: #FFF; color: #000 } .icon:before, .icon:after { font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } span.nav-prev { left: 20% } span.nav-prev:before { content: "\f053"; } span.nav-next { right: 20% } span.nav-next:before { content: "\f054"; } span.nav-close:before { content: "\f00d"; } /* ========================================================================== #Responsive ========================================================================== */ /* Example media queries (reduce number of columns and change slideshow layout) */ /*@media screen and (max-width: 60em) { .grid li { width: 33.3%; } .slideshow li { width: 100%; height: 100%; top: 0; left: 0; margin: 0; } .slideshow li figure img { width: auto; margin: 0 auto; max-width: 100%; } .slideshow nav span, .slideshow nav span.nav-close { font-size: 1.8em; padding: 0.3em; } .info-keys { display: none; } } @media screen and (max-width: 35em) { .grid li { width: 50%; } } @media screen and (max-width: 24em) { .grid li { width: 100%; } }*/
Using Carousel Slideshow
This is the HTML part for the carousel slideshow.
<div id="owl-demo" class="owl-carousel"> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> <div class="item"><img src="http://placehold.it/700x475" alt="" /></div> </div>
This is the javascripts for the carousel slideshow. Please open settings.js.
/* ========================================================================== #Carousel For Portfolio Page ========================================================================== */ $(document).ready(function() { $(".owl-carousel").owlCarousel({ navigation : true, slideSpeed : 300, paginationSpeed : 400, singleItem : true, autoPlay: 3000 }); });
This is the CSS part for the carousel slideshow. Please open carousel.css
/* ========================================================================== #Clearfix ========================================================================== */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* ========================================================================== #Display none until init ========================================================================== */ .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item { float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* Mouse grab icon */ .grabbing { cursor: url(../images/grabbing.png) 8 8, move; } /* Fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } /* ========================================================================== #Controls ========================================================================== */ .owl-theme .owl-controls { margin-top: 10px; text-align: center; } .owl-pagination { bottom: 8%; position: absolute; width: 100%; text-align: center; z-index: 1; } .owl-buttons { display: none; } /* ========================================================================== #Next and Prev Buttons ========================================================================== */ .owl-theme .owl-controls .owl-buttons div { color: #FFF; display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ margin: 5px; padding: 3px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #869791; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 0.5; } /* Clickable class fix problem with hover on touch devices */ /* Use it for non-touch hover action */ .owl-theme .owl-controls.clickable .owl-buttons div:hover { filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; text-decoration: none; } /* ========================================================================== #Pagination ========================================================================== */ .owl-theme .owl-controls .owl-page { display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span { border: 2px solid #fff; border-radius: 100%; display: block; height: 10px; margin: 5px 7px; width: 10px; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { background-color: #fff; } /* ========================================================================== #If PaginationNumbers is true ========================================================================== */ .owl-theme .owl-controls .owl-page span.owl-numbers { height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* preloading images */ .owl-item.loading { min-height: 150px; background: url(AjaxLoader.gif) no-repeat center center }
Linking the mail form
Your mail form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.
Step 1Open js/sendemail.js and replace yourdomain.com with your real domain name in form post url (http://www.yourdomain.com/send-email.php).
Step 2Open send-email.php and replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo.png). You also need to change your from email address (Receiver Email Address) at the top with info@yourdomain.com to your real email address, same way you can change subject line with replace of text Contact us form details. Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.
Change Font
We using google web font, Roboto and Oswald.
It's included here
<!-- Google Font-->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700,900,900italic,700italic|Oswald:400,300,700' rel='stylesheet' type='text/css'>
If you need some other fonts you can choose it here.
Using the Icon
We using font awesome icon
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Check the cheatsheet.
It's included here
<!-- Icon -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />