Sira - Online Resume / CV HTML Template

documentation

Created: 07/04/2017
Latest update: 26/10/2017
By: Webrouk
Email: muhammad.mabrouk.web.designer@gmail.com

Sira is a modern and elegant Onepage HTML template. Every single detail is carefully designed in order to create a wonderful user experience.

Sira is very easy to set up and customize and comes with a well documented help file, which will assist you configure the template in minutes.

about section

To change the image in 'About Section' put your image (recommended size 140px * 140px) in 'images' folder.
Then open the index.html file using any text editor. We recommend Sublime Text.
Now look for the following code and replace highlighted text with your image name+your image extension like this (name.png or name.jpg).

<section id="about" class="about">
<div class="container">
<div class="about-content">
<div class="profile-info">
<div class="user-img">
<img src="images⁄man.png" alt="user photo">
<⁄div>

Save the file and refresh your browser.

To edit the text in 'About Section' look for the following code and replace highlighted text.
To change the link of your website replace red highlighted text with your website address and replace yellow highlighted text with your website name.

<h1>webrouk<⁄h1>
<span>front-end web developer<⁄span>
<p>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested
<⁄p>
<⁄div>
<div class="profile-list">
<table>
<tbody>
<tr>
<td>birthday:<⁄td>
<td>22 December 1994<⁄td>
<⁄tr>
<tr>
<td>address:<⁄td>
<td>927 St Patricks Road, Glasgow, ES 23A<⁄td>
<⁄tr>
<tr>
<td>e-mail:<⁄td>
<td>webrouk@yahoo.com<⁄td>
<⁄tr>
<tr>
<td>phone:<⁄td>
<td>+123 456 789 012<⁄td>
<⁄tr>
<tr>
<td>website:<⁄td>
<td><a href="#" target="_blank">www.webrouk.com<⁄a><⁄td>
<⁄tr>
<tr>
<td>nationality:<⁄td>
<td>American<⁄td>
<⁄tr>
<⁄tbody>
<⁄table>

Save the file and refresh your browser.

To change links of social icons replace red highlighted text with your own links.

<ul class="social-links">
<li>
<a href="#" target="_blank" title="Follow Me on Facebook">
<i class="fa fa-facebook" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Twitter">
<i class="fa fa-twitter" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Instagram">
<i class="fa fa-instagram" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li class="br screen350"><⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Google Plus">
<i class="fa fa-google-plus" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Linkedin">
<i class="fa fa-linkedin" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Dribbble">
<i class="fa fa-dribbble" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<⁄ul>

Save the file and refresh your browser.

To change the link of Download Resume button replace red highlighted text with your own link.

<a class="download-resume" href="https:⁄⁄goo.gl⁄LraLmo" target="_blank">Download Resume<⁄a>
<⁄div>
<⁄div>
<⁄div>
<⁄section>

Save the file and refresh your browser.

skills section

To edit the text in 'Skills Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.

<section id="skills" class="skills">
<div class="container">
<h2>skills<⁄h2>
<div class="skills-content">
<div class="progress-content">
<div class="personal-skills">
<h4>
<i class="fa fa-user" aria-hidden="true"><⁄i>
personal skills
<⁄h4>
<div class="progress-bar">
<div class="bar-data">
<span class="bar-title">Communication<⁄span>
<span class="bar-value"><strong>0<⁄strong> %<⁄span>
<⁄div>
<div class="bar-line">
<span class="bar-emptyFill"><⁄span>
<span class="bar-fill"><⁄span>
<⁄div>
<⁄div>
<div class="progress-bar">
<div class="bar-data">
<span class="bar-title">Team Work<⁄span>
<span class="bar-value"><strong>0<⁄strong> %<⁄span>
<⁄div>
<div class="bar-line">
<span class="bar-emptyFill"><⁄span>
<span class="bar-fill"><⁄span>
<⁄div>
<⁄div>
<div class="progress-bar">
<div class="bar-data">
<span class="bar-title">Creativity<⁄span>
<span class="bar-value"><strong>0<⁄strong> %<⁄span>
<⁄div>
<div class="bar-line">
<span class="bar-emptyFill"><⁄span>
<span class="bar-fill"><⁄span>
<⁄div>
<⁄div>
<div class="progress-bar">
<div class="bar-data">
<span class="bar-title">Dedication<⁄span>
<span class="bar-value"><strong>0<⁄strong> %<⁄span>
<⁄div>
<div class="bar-line">
<span class="bar-emptyFill"><⁄span>
<span class="bar-fill"><⁄span>
<⁄div>
<⁄div>
<⁄div>
<div class="professional-skills">
<h4>
<i class="fa fa-users" aria-hidden="true"><⁄i>
professional skills
<⁄h4>
<div class="progress-bar">
<div class="bar-data">
<span class="bar-title">Photoshop<⁄span>
<span class="bar-value"><strong>0<⁄strong> %<⁄span>
<⁄div>
<div class="bar-line">
<span class="bar-emptyFill"><⁄span>
<span class="bar-fill"><⁄span>
<⁄div>
<⁄div>
<div class="progress-bar">
<div class="bar-data">
<span class="bar-title">HTML5 & CSS3<⁄span>
<span class="bar-value"><strong>0<⁄strong> %<⁄span>
<⁄div>
<div class="bar-line">
<span class="bar-emptyFill"><⁄span>
<span class="bar-fill"><⁄span>
<⁄div>
<⁄div>
<div class="progress-bar">
<div class="bar-data">
<span class="bar-title">JavaScript<⁄span>
<span class="bar-value"><strong>0<⁄strong> %<⁄span>
<⁄div>
<div class="bar-line">
<span class="bar-emptyFill"><⁄span>
<span class="bar-fill"><⁄span>
<⁄div>
<⁄div>
<div class="progress-bar">
<div class="bar-data">
<span class="bar-title">PHP<⁄span>
<span class="bar-value"><strong>0<⁄strong> %<⁄span>
<⁄div>
<div class="bar-line">
<span class="bar-emptyFill"><⁄span>
<span class="bar-fill"><⁄span>
<⁄div>
<⁄div>
<⁄div>
<⁄div>
<⁄div>
<⁄div>
<⁄section>

To edit the progress percentage Open the script.js file in 'js' folder using any text editor then look for the following code and replace highlighted numbers.

⁄⁄ Personal Skills Percentage
personalSkill1 = 70, ⁄⁄ ========> (Communication)
personalSkill2 = 80, ⁄⁄ ========> (Team Work)
personalSkill3 = 75, ⁄⁄ ========> (Creativity)
personalSkill4 = 90, ⁄⁄ ========> (Dedication)
⁄⁄ Professional Skills Percentage
professionalSkill1 = 90, ⁄⁄ ========> (Photoshop)
professionalSkill2 = 55, ⁄⁄ ========> (HTML5 & CSS3)
professionalSkill3 = 75, ⁄⁄ ========> (JavaScript)
professionalSkill4 = 60, ⁄⁄ ========> (PHP)

Save the files and refresh your browser.

education section

To edit the text in 'Education Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.

<section id="education" class="education">
<div class="container">
<h2>education<⁄h2>
<ul class="education-content">
<li>
<div class="timeline wow fadeInLeft" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2016 - 2017<⁄span>
<h4>oxford university<⁄h4>
<h5>software engineering<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInRight" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2013 - 2016<⁄span>
<h4>oxford university<⁄h4>
<h5>software engineering<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInLeft" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2010 - 2015<⁄span>
<h4>oxford university<⁄h4>
<h5>software engineering<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInRight" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2009 - 2012<⁄span>
<h4>oxford university<⁄h4>
<h5>software engineering<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInLeft" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2006 - 2009<⁄span>
<h4>oxford university<⁄h4>
<h5>software engineering<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInRight" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2004 - 2006<⁄span>
<h4>oxford university<⁄h4>
<h5>software engineering<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<⁄ul>
<⁄div>
<⁄section>

Save the file and refresh your browser.

experience section

To edit the text in 'Experience Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.

<section id="experience" class="experience">
<div class="container">
<h2>experience<⁄h2>
<ul class="experience-content">
<li>
<div class="timeline wow fadeInLeft" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2016 - 2017<⁄span>
<h4>microsoft Corp.<⁄h4>
<h5>web developer<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInRight" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2013 - 2016<⁄span>
<h4>microsoft Corp.<⁄h4>
<h5>web developer<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInLeft" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2010 - 2015<⁄span>
<h4>microsoft Corp.<⁄h4>
<h5>web developer<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInRight" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2009 - 2012<⁄span>
<h4>microsoft Corp.<⁄h4>
<h5>web developer<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInLeft" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2006 - 2009<⁄span>
<h4>microsoft Corp.<⁄h4>
<h5>web developer<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<li>
<div class="timeline wow fadeInRight" data-wow-duration=".8s" data-wow-offset="100">
<span class="date">2004 - 2006<⁄span>
<h4>microsoft Corp.<⁄h4>
<h5>web developer<⁄h5>
<p>
if you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
<⁄p>
<⁄div>
<⁄li>
<⁄ul>
<⁄div>
<⁄section>

Save the file and refresh your browser.

hobbies section

To edit the text in 'Hobbies Section' Open the index.html file using any text editor then look for the following code and replace highlighted text.

<section id="hobbies" class="hobbies">
<div class="container">
<h2>hobbies<⁄h2>
<div class="hobbies-content">
<p>
it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
<⁄p>
<ul class="hobbies-icons">
<li>
<i class="fa fa-futbol-o" aria-hidden="true"><⁄i>
<span>football<⁄span>
<⁄li>
<li>
<i class="fa fa-book" aria-hidden="true"><⁄i>
<span>reading<⁄span>
<⁄li>
<li class="br screen450"><⁄li>
<li>
<i class="fa fa-plane" aria-hidden="true"><⁄i>
<span>travel<⁄span>
<⁄li>
<li class="br screen991"><⁄li>
<li>
<i class="fa fa-car" aria-hidden="true"><⁄i>
<span>driving<⁄span>
<⁄li>
<li class="br screen450"><⁄li>
<li>
<i class="fa fa-gamepad" aria-hidden="true"><⁄i>
<span>games<⁄span>
<⁄li>
<li>
<i class="fa fa-shopping-bag" aria-hidden="true"><⁄i>
<span>shopping<⁄span>
<⁄li>
<⁄ul>
<⁄div>
<⁄div>
<⁄section>

To change icons in 'Hobbies Section' replace highlighted code with your new icons.

Visit This Page to get more icons.

<section id="hobbies" class="hobbies">
<div class="container">
<h2>hobbies<⁄h2>
<div class="hobbies-content">
<p>
it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
<⁄p>
<ul class="hobbies-icons">
<li>
<i class="fa fa-futbol-o" aria-hidden="true"><⁄i>
<span>football<⁄span>
<⁄li>
<li>
<i class="fa fa-book" aria-hidden="true"><⁄i>
<span>reading<⁄span>
<⁄li>
<li class="br screen450"><⁄li>
<li>
<i class="fa fa-plane" aria-hidden="true"><⁄i>
<span>travel<⁄span>
<⁄li>
<li class="br screen991"><⁄li>
<li>
<i class="fa fa-car" aria-hidden="true"><⁄i>
<span>driving<⁄span>
<⁄li>
<li class="br screen450"><⁄li>
<li>
<i class="fa fa-gamepad" aria-hidden="true"><⁄i>
<span>games<⁄span>
<⁄li>
<li>
<i class="fa fa-shopping-bag" aria-hidden="true"><⁄i>
<span>shopping<⁄span>
<⁄li>
<⁄ul>
<⁄div>
<⁄div>
<⁄section>

Save the file and refresh your browser.

contact section

To turn on contact form Open the contact_form.php file using any text editor then look for the following code and replace highlighted text and save the file.

$mail_to = "youremail@email.com"; ⁄⁄ replace it with your email

date_default_timezone_set("Africa⁄Cairo"); ⁄⁄ replace it with your timezone

You can find your timezone in This Page.

To change the google map to your location open the script.js file in 'js' folder and search for the following code and replace highlighted text with your own google map code and save the file.

⁄⁄ Google Maps
google.maps.event.addDomListener(window, 'load', myMap);
function myMap() {
var myCenter = new google.maps.LatLng(30.0444196, 31.23571160000006),
mapOptions = {
center: myCenter,
mapTypeControl: false,
streetViewControl: false,
scrollwheel: false,
zoom: 12
},
mapCanvas = document.getElementById("map"),
map = new google.maps.Map(mapCanvas, mapOptions),
marker = new google.maps.Marker({
position: myCenter,
icon: 'http:⁄⁄maps.google.com⁄mapfiles⁄ms⁄icons⁄blue-dot.png'
});
marker.setMap(map);
}

To get Latitude & Longitude please visit This Page.

To change links of social icons replace red highlighted text with your own links.

<ul class="social-links">
<li>
<a href="#" target="_blank" title="Follow Me on Facebook">
<i class="fa fa-facebook" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Twitter">
<i class="fa fa-twitter" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Instagram">
<i class="fa fa-instagram" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li class="br screen350"><⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Google Plus">
<i class="fa fa-google-plus" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Linkedin">
<i class="fa fa-linkedin" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<li>
<a href="#" target="_blank" title="Follow Me on Dribbble">
<i class="fa fa-dribbble" aria-hidden="true"><⁄i>
<⁄a>
<⁄li>
<⁄ul>

Save the file and refresh your browser.

Thank You

Finally thank you very much for choosing this template. Please keep in mind that we are working very hard to providing better quality in coming days.

If you have any questions that are beyond the scope of this help file, please contact me via my profile.