Repository: izzydoesizzy/resumetemplate
Branch: gh-pages
Commit: 40c0171e0ab4
Files: 5
Total size: 29.8 KB

Directory structure:
gitextract_rmhs84jj/

├── README.md
├── css/
│   ├── style.css
│   └── timeline.css
├── index.html
└── js/
    └── scripts.js

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
# [ClearCareer](http://startbootstrap.com/) 

[Resume](https://izzydoesizzy.github.io/resumetemplate/) is a one page creative theme for [Bootstrap](http://getbootstrap.com/) created by [Izzy Piyale-Sheard](http://izzydoesizzy.com/).

## Getting Started

To use this theme, please take the following steps.
1. Fork this repository on GitHub
2. Make an edit to your site and commit the change
3. Go to [http://YourGithubProfile.github.io/resumetemplate](http://izzydoesizzy.github.io/resumetemplate)

## Adding a custom domain name
There are 2 ways of adding a custom domain to your Github Pages site.

#### Method 1: 
1. Click on "Settings" under your repository
2. Scroll down to custom domain
3. Add your custom domain
4. Login to your domain registrar and modify the DNS settings
	- Add a new A Record
		- Record Type: 	A
		- Host: 		@
		- Points to: 	192.30.252.153
	- [see more details](http://stackoverflow.com/questions/23375422/how-to-setup-github-pages-to-redirect-dns-requests-from-subdomain-e-g-www-to/23375423#23375423)

#### Method 2:
1. In the main directory add a file named CNAME (without a file extension)
2. Open and edit the file, and add your domain name [example.com](#)
3. Login to your domain registrar and modify the DNS settings
	- Add a new A Record
		- Record Type: 	A
		- Host: 		@
		- Points to: 	192.30.252.153
	- [see more details](http://stackoverflow.com/questions/23375422/how-to-setup-github-pages-to-redirect-dns-requests-from-subdomain-e-g-www-to/23375423#23375423)

![Edit](/images/image1.png) ![Edit](/images/image2.png)
![Edit](/images/image3.png) ![Edit](/images/image4.png)


## Bugs and Issues

Have a bug or an issue with this theme? [Open a new issue](https://github.com/clearcareer/ResumeTemplate/issues) here on GitHub.

## Copyright and License

Copyright 2016 ClearCareer. Code released under the [Creative Commons 4.0](https://creativecommons.org/licenses/by/4.0/) license.


## Attribution

[IconMoon](https://icomoon.io/)  
[FontAwesome](http://fontawesome.io/)  

This resume template uses the [Bootstrap](http://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).

Bruno Rodriguez - Timeline  
- [Github: https://github.com/itbruno](https://github.com/itbruno)
- [Twitter: https://twitter.com/_brunoweb](https://twitter.com/_brunoweb)

Train Tracks Photo https://unsplash.com/@reddangelo16


<hr>

This project was developed by **Iskender Piyale-Sheard (aka: Izzy)**, the Community Manager at [Lighthouse Labs](http://bit.ly/izzydoesizzygithub) as a fun side project. 

Come say hi on Twitter [@izzydoesizzy](http://www.twitter.com/izzydoesizzy)! 

----
> Iskender Piyale-Sheard: [www.izzydoesizzy.com](https://www.izzydoesizzy.com/) &nbsp;&middot;&nbsp;
> LinkedIn: [@izzydoesizzy](https://www.linkedin.com/in/izzydoesizzy) &nbsp;&middot;&nbsp;
> Twitter: [@izzydoesizzy](https://twitter.com/izzydoesizzy)



================================================
FILE: css/style.css
================================================
/**
 * =================================================================== 
 *
 *  ResumeTemplate v1.0 ClearCareer
 *  url: clearcareer.ca
 *  Design by: Iskender Piyale-Sheard
 *  website: izzydoesizzy.com
 *  Created 06-27-2016
 *  Last Updated: 03-19-2017
 *  ------------------------------------------------------------------
 *  Table of Contents:

 *  01. Global Styles
 *  02. Intro
 *  03. Social Icons
 *  04. Icon Fonts
 *  05. Section Styles
 *  06. Timeline Styles
 *  05. Footer
 EXTRAS

 * =================================================================== 
 */

/* 01. Basic Styles
 * =================================================================== */

 html {
    overflow-x: hidden;
 }
 body {
    font-family: 'Source Sans Pro', sans-serif;
 }

 h1 {
    font-weight: bold;
 }

 h2 {
 }

 h5 {
    font-weight: 600;
 }

 a {
    cursor: pointer;
    color: #1abc9c;
    text-decoration: none;
 }

 a:hover {
    text-decoration:none;
    color: #1abc9c;
    opacity: 0.9;
 }

 hr {
    border-top: 5px solid #1abc9c;
    width: 80px;
    padding-bottom: 20px;
 }


 .colour-splash {
    color: #1abc9c;
 }

 .section-primary span {
    color: #1abc9c;
    font-weight: bolder;
    opacity: 1;
 }








/* 02. Intro
 * =================================================================== */

 .section-image {
 	background: #151515 url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=1199&h=799&q=80) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    text-align: center;
    color: #fff;
    display:table;
 }

 .img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #111111;
    opacity: .7;
 }

 .intro {
    vertical-align: middle;
    text-align: center;
    display:table-cell;
    -webkit-transform: translateY(-2.1rem);
    -ms-transform: translateY(-2.1rem);
    transform: translateY(-2.1rem);
}

.intro .row {
    margin-right: 0;
    margin-left:0;
}

.intro h1 {
    font-size: 84px;
}

.intro h5 {
    color: #1abc9c;
    font-size: 2.3rem;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: .3rem;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.section-image span {
    text-transform: uppercase;
    font-size: 1.4em;
    padding: 0 10px;
    font-weight: 100;
}

.section-image h1 {
    margin-top: 0;
}

.section-image p {
    font-weight: lighter;
    opacity: 0.9;
}



/* 03. Social Icons
 * =================================================================== */

.social {
  margin: 0 10px;
  padding-top: 1.3em;
  text-align: center;
  color: #fff;
  font-size: 0.9em;
}

.social a {
  color: white;
  text-decoration:none;
  padding: 2em;
}

.social a:hover{
  opacity: 0.6;
}

.social-footer {
    position: block;
    padding: 15px;
}

.social-footer a {
    color: white;
    text-decoration: none;
    padding: 0.6em;
    font-size: 1.7em;
}


/* 04. Icon Font
 * =================================================================== */

 .lnr {
    font-size: 4em !important;
    color:#fff;
 }

/* 05. Section Styles
 * =================================================================== */

section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.profilepic {
    height: 150px;
    width: auto;
    border-radius: 300px;
}

.section-primary p {
    text-align: justify;
}

.section-primary {
    border: #1abc9c;
}

.section-colour {
    background-color: #1abc9c;
    color: #fff;
}

.section-colour p {
    text-align: justify;
}

.section-heading .lead, .section-heading h2 {
    text-align: center;
}

.section-colour {
    border: #fff;
}

.section-colour hr {
    border-top: 5px solid #fff;
 }



/* 01. Timeline Styles
 * =================================================================== */

.timeline-icon .fa {
    color: white;
    margin: 14px;
    font-size: 1.7em;
}

#skills {
    background: #151515 url(https://images.unsplash.com/photo-1456983933114-c22026990f4b?dpr=2&auto=format&crop=entropy&fit=crop&w=1280&h=720&q=80) no-repeat center center;
    height: auto;
}


/* 05. Footer
 * =================================================================== */

footer {
    display: block;
    position: static;
    bottom: 0;
    background-color: black;
    color: #fff;
    padding: 50px 0;

}

footer p {
    padding: 15px;
    opacity: 0.8;
}


/* EXTRAS
 * =================================================================== */



        /* Mouse Icon
         * =================================================================== */
        .mouse-icon {
            border: 2px solid #fff;
            border-radius: 16px;
            display: block;
            height: 50px;
            margin: 100px auto;
            position: absolute;
            left: 0;
            right: 0;
            width: 30px;
            z-index: 10;
        }
        .mouse-icon .scroll {
            animation-delay: 0s;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-name: scrolling;
            animation-play-state: running;
            animation-timing-function: linear;
        }
        .mouse-icon .scroll {
            background: #fff none repeat scroll 0 0;
            border-radius: 10px;
            height: 10px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            top: 4px;
            width: 4px;
        }
        @keyframes scrolling {
        0% {
            opacity: 0;
            top: 5px;
        }
        30% {
            opacity: 1;
            top: 10px;
        }
        100% {
            opacity: 0;
            top: 25px;
        }
        }

        .pad-xl {
            padding: 200px 0px;
        }

        .pad-lg {
            padding: 160px 0px;
        }

        .pad-sm {
            padding: 80px 0px;
        }

        .pad-xs {
            padding: 30px 0px;
        }

        /* /Mouse Icon
         * =================================================================== */

 
/* Media Queries
 * =================================================================== */

@media (max-width: 480px) {
    .social a {
        padding: 0.4em;
        font-size: 0.9em;
    }

    .social-footer {
        text-align: center;
        position:block;
        text-align: center;
    }

    .social-footer a {
        padding: 0.3em;
        font-size: 1.6em;

    }

    .intro-desc {
        font-size: 0.7em;
    }

    .section-image span {
        font-size: 1em;
        padding: 0 1px;

}

    .intro h1 {
        font-size: 50px;
        padding-top: 15px;
    }

    footer {
        text-align: center;
        padding-bottom: 100px;
    }

    #skills {
        background: #151515 url(https://images.unsplash.com/photo-1456983933114-c22026990f4b?dpr=2&auto=format&crop=entropy&fit=crop&w=1280&h=720&q=80) no-repeat center center;
        background-position: top center;

    }
}

@media (max-width: 991px) {
    .social-footer {
        text-align: center;
    }

    footer p {
    text-align: center;
    }

}




================================================
FILE: css/timeline.css
================================================
/**
 * =================================================================== 
 *
 *  ResumeTemplate v1.0 Main ClearCareer
 *  url: clearcareer.ca
 *  06-27-2016
 *  ------------------------------------------------------------------
 * 
 * Timeline Tempalte by Bruno Rodriguez
 * 
 * https://github.com/itbruno
 * http://itbruno.com.br
 * http://www.twitter.com/_brunoweb
 * 
 * =================================================================== 
 */

header:after, #timeline .timeline-item:after, header:before, #timeline .timeline-item:before {
  content: '';
  display: block;
  width: 100%;
  clear: both;
}

*, *:before, *:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body, html {
  height: 100%;
}

body {
  background: #f9f9f9;
  background-size: cover;
  margin: 0;
  padding: 0;
  font-family: helvetica, arial, tahoma, verdana;
  line-height: 20px;
  font-size: 14px;
  color: #726f77;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

h1, h2, h3, h4 {
  font-family: "Dosis", arial, tahoma, verdana;
  font-weight: 500;
}

.project-name {
  text-align: center;
  padding: 10px 0;
}

header {
  background: #1abc9c;
  padding: 10px;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}
header .logo {
  color: #1abc9c;
  float: left;
  font-family: "Dosis", arial, tahoma, verdana;
  font-size: 22px;
  font-weight: 500;
}
header .logo > span {
  color: #f7aaaa;
  font-weight: 300;
}
header .social {
  float: right;
}
header .social .btn {
  font-family: "Dosis";
  font-size: 14px;
  margin: 10px 5px;
}


.timelinedot {
  margin: 13px;  
  color:white;
}


#timeline {
  width: 100%;
  margin: 30px auto;
  position: relative;
  padding: 0 10px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#timeline:before {
  content: "";
  width: 3px;
  height: 100%;
  background: #1abc9c;
  left: 50%;
  top: 0;
  position: absolute;
}
#timeline:after {
  content: "";
  clear: both;
  display: table;
  width: 100%;
}
#timeline .timeline-item {
  margin-bottom: 50px;
  position: relative;
}
#timeline .timeline-item .timeline-icon {
  background: #1abc9c;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  margin-left: -23px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
#timeline .timeline-item .timeline-icon svg {
  position: relative;
  top: 14px;
  left: 14px;
}
#timeline .timeline-item .timeline-content {
  width: 45%;
  background: #fff;
  padding: 20px;
  -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#timeline .timeline-item .timeline-content h2 {
  padding: 15px;
  background: #1abc9c;
  color: #fff;
  margin: -20px -20px 0 -20px;
  font-weight: 300;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -ms-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

#timeline .timeline-item .timeline-content p {
  padding-top: 15px;
}

#timeline .timeline-item .timeline-content:before {
  content: '';
  position: absolute;
  left: 45%;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #1abc9c;
}
#timeline .timeline-item .timeline-content.right {
  float: right;
}
#timeline .timeline-item .timeline-content.right:before {
  content: '';
  right: 45%;
  left: inherit;
  border-left: 0;
  border-right: 7px solid #1abc9c;
}


@media screen and (max-width: 768px) {
  #timeline {
    margin: 30px;
    padding: 0px;
    width: 90%;
  }
  #timeline:before {
    left: 0;
  }
  #timeline .timeline-item .timeline-content {
    width: 90%;
    float: right;
  }
  #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
    left: 10%;
    margin-left: -6px;
    border-left: 0;
    border-right: 7px solid #1abc9c;
  }
  #timeline .timeline-item .timeline-icon {
    left: 0;
  }
}




================================================
FILE: index.html
================================================
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta content="" name="description">
    <meta content="" name="author">
    <link href="../../favicon.ico" rel="icon">

    <title>ClearCareer</title><!-- Bootstrap core CSS -->
    <link crossorigin="anonymous" href=
    "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    integrity=
    "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
    rel="stylesheet"><!-- FontAwesome Icon Font -->
    <link href=
    "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
    rel="stylesheet"><!-- LinearIcons Icon Font -->
    <link href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css" rel=
    "stylesheet"><!-- Main Stylesheet -->
    <link href="css/style.css" rel="stylesheet"><!-- Timeline CSS -->
    <link href="css/timeline.css" rel="stylesheet">
</head>

<body>
    <!-- INTRO SECTION -->


    <section class="section-image">
        <div class="img-overlay"></div>
        <a href="https://github.com/izzydoesizzy/resumetemplate" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
            <div class="intro">
                <div class="row">
                    <div class="col-md-12">
                        <h5>Hi there</h5>


                        <h1>I'm Luke Skywalker</h1>


                        <p class="intro-desc"><span>Designer</span>
                        <span class="colour-splash">•</span>
                        <span>Adventurer</span> <span class=
                        "colour-splash">•</span> <span>Coffee
                        Drinker</span></p>
                    </div>
                    <!-- /col-md-12 -->
                </div>


                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="social">
                            <a href="http://www.twitter.com/izzydoesizzy"
                            target="_blank"><i class=
                            "fa fa-twitter fa-3x"></i></a> <a href=
                            "http://www.instagram.com/izzydoesizzy" target=
                            "_blank"><i class="fa fa-instagram fa-3x"></i></a> 
                            <!-- <a href="http://www.dribbble.com/izzydoesizzy" target="_blank">
                                  <i class="fa fa-dribbble fa-3x"></i>
                                </a> -->
                             <a href="https://ca.linkedin.com/in/ipiyale"
                            target="_blank"><i class=
                            "fa fa-linkedin fa-3x"></i></a> <a href=
                            "https://medium.com/@izzydoesizzy" target=
                            "_blank"><i class="fa fa-medium fa-3x"></i></a>
                            <a href="http://www.youtube.com/user/izzydoesizzy"
                            target="_blank"><i class=
                            "fa fa-youtube fa-3x"></i></a> <a href=
                            "http://www.github.com/izzydoesizzy" target=
                            "_blank"><i class="fa fa-github fa-3x"></i></a>
                        </div><!-- /social -->
                    </div><!-- /col-md-8 -->
                </div><!-- /row -->
                


                <div class="bottom">
                    <a href="#about">
                    <div class="mouse-icon">
                        <div class="scroll">
                        </div>
                    </div></a>
                </div>
            </div><!-- /intro -->
    </section>
    
    
    <!-- ABOUT SECTION -->
    <section class="section-primary" id="about">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <img class="profilepic" src=
                    "https://pbs.twimg.com/profile_images/641063961144750081/IqosL0KD.jpg">

                    <h2>About Me</h2>

                    <hr>


                    <p class="lead">Lorem Ipsum is simply dummy text of the
                    printing and typesetting industry. <span>Lorem Ipsum</span>
                    has been the industry's standard dummy text ever since the
                    1500s, when an <span>unknown printer</span> took a galley
                    of type and scrambled it to make a type specimen book.</p>
                </div><!-- /col-md-6 -->
            </div><!-- / row -->
        </div><!-- /container -->
    </section>
    <!-- SKILLS SECTION -->


    <section class="section-image" id="skills">
        <div class="img-overlay"></div>


        <div class="container">
            <div class="row">
                <div class="col-md-12 section-heading">
                    <h2>Skills</h2>


                    <p class="lead">Here are a few cool things about me</p>

                    <hr>
                </div>
            </div>


            <div class="row">
                <div class="col-md-4 text-center">
                    <span class="lnr lnr-user"></span>

                    <h2>Heading</h2>


                    <p>Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a
                    type specimen book.</p>
                </div>


                <div class="col-md-4 text-center">
                    <span class="lnr lnr-star"></span>

                    <h2>Heading</h2>


                    <p>Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a
                    type specimen book.</p>
                </div>


                <div class="col-md-4 text-center">
                    <span class="lnr lnr-diamond"></span>

                    <h2>Heading</h2>


                    <p>Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a
                    type specimen book.</p>
                </div>
            </div> <!-- / row -->
        </div><!-- /container -->
    </section>
    <!-- TIMELINE SECTION -->


    <section class="section-primary" id="timelinesection">
        <div class="container">
            <div class="row">
                <div class="col-md-12 section-heading">
                    <h2>Things I've done</h2>


                    <p class="lead">Here are a few cool things about me</p>

                    <hr class="white">
                </div>
            </div>


            <div class="row">
                <div class="col-md-12">
                    <!-- Timeline -->


                    <div id="timeline">
                        <!-- Timeline Item, copy from here to create various boxes -->


                        <div class="timeline-item">
                            <!--Icon inside the circle-->


                            <div class="timeline-icon">
                                <i class="fa fa-star"></i>
                            </div>
                            <!-- Content from timeline box and position (right or left)-->


                            <div class="timeline-content right">
                                <h2>This Happened</h2>


                                <p>Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit. Atque, facilis quo maiores
                                magnam modi ab libero praesentium
                                blanditiis.</p>
                            </div>
                        </div>
                        <!-- /Timeline Item-->
                        <!-- Timeline Item, copy from here to create various boxes -->


                        <div class="timeline-item">
                            <!--Icon inside the circle-->


                            <div class="timeline-icon">
                                <i class="fa fa-cog"></i>
                            </div>
                            <!-- Content from timeline box and position (right or left)-->


                            <div class="timeline-content left">
                                <h2>This Happened</h2>


                                <p>Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit. Atque, facilis quo maiores
                                magnam modi ab libero praesentium
                                blanditiis.</p>
                            </div>
                        </div>
                        <!-- /Timeline Item-->
                        <!-- Timeline Item, copy from here to create various boxes -->


                        <div class="timeline-item">
                            <!--Icon inside the circle-->


                            <div class="timeline-icon">
                                <i class="fa fa-plane"></i>
                            </div>
                            <!-- Content from timeline box and position (right or left)-->


                            <div class="timeline-content right">
                                <h2>This Happened</h2>


                                <p>Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit. Atque, facilis quo maiores
                                magnam modi ab libero praesentium
                                blanditiis.</p>
                            </div>
                        </div>
                        <!-- /Timeline Item-->
                        <!-- Timeline Item, copy from here to create various boxes -->


                        <div class="timeline-item">
                            <!--Icon inside the circle-->


                            <div class="timeline-icon">
                                <i class="fa fa-group"></i>
                            </div>
                            <!-- Content from timeline box and position (right or left)-->


                            <div class="timeline-content left">
                                <h2>This Happened</h2>


                                <p>Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit. Atque, facilis quo maiores
                                magnam modi ab libero praesentium
                                blanditiis.</p>
                            </div>
                        </div>
                        <!-- /Timeline Item-->
                        <!-- Timeline Item, copy from here to create various boxes -->


                        <div class="timeline-item">
                            <!--Icon inside the circle-->


                            <div class="timeline-icon">
                                <i class="fa fa-star"></i>
                            </div>
                            <!-- Content from timeline box and position (right or left)-->


                            <div class="timeline-content right">
                                <h2>This Happened</h2>


                                <p>Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit. Atque, facilis quo maiores
                                magnam modi ab libero praesentium
                                blanditiis.</p>
                            </div>
                        </div>
                        <!-- /Timeline Item-->
                    </div>
                    <!-- /col-md-12 -->
                </div>
                <!-- /row -->
            </div>
        </div> <!-- / container -->
    </section>
    <!-- FOOTER SECTION -->

    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <p>Design by: <a href="http://www.izzydoesizzy.com" target=
                    "_blank">Iskender Piyale-Sheard</a><br>
                    <a href="http://creativecommons.org/licenses/by/4.0/"
                    target="_blank"><i class="fa fa-creative-commons"></i>
                    Attribution 4.0 License</a></p>
                </div>


                <div class="col-md-4 text-center">
                    <p>Made with <i class="fa fa-heart"></i> by <a href=
                    "http://www.clearcarer.ca" target="_blank"></a> <a href=
                    "http://www.clearcareer.ca" target=
                    "_blank">ClearCareer</a></p>
                </div>


                <div class="col-md-4">
                    <div class="social-footer">
                        <a href="http://www.twitter.com/izzydoesizzy" target=
                        "_blank"><i class="fa fa-twitter"></i></a> <a href=
                        "http://www.instagram.com/izzydoesizzy" target=
                        "_blank"><i class="fa fa-instagram"></i></a> <a href=
                        "https://ca.linkedin.com/in/ipiyale" target=
                        "_blank"><i class="fa fa-linkedin"></i></a>  <a href=
                        "http://www.youtube.com/user/izzydoesizzy" target=
                        "_blank"><i class="fa fa-youtube"></i></a> <a href=
                        "http://www.github.com/izzydoesizzy" target=
                        "_blank"><i class="fa fa-github"></i></a>
                    </div> <!-- /social footer -->
                </div> <!-- /col-md-4 -->
            </div><!-- /row -->
        </div><!-- /container -->
    </footer>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script> 
    <script>
    window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
    </script> 
    <script src="js/bootstrap.min.js">
    </script> 
    <script src="js/scripts.js">
    </script>
</body>
</html>

================================================
FILE: js/scripts.js
================================================
// ResumeTemplate v1.0 ClearCareer
// url: clearcareer.ca
// by: Iskender Piyale-Sheard
// website: izzydoesizzy.com
// Created 06-27-2016
 

// Smooth Scroll Function
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});