RazKode ID Loading...

#1 Membuat Web Portfolio Sederhana Dengan HTML CSS Dan Javascript

Cara Membuat Web Portfolio Sederhana Menggunakan HTML, CSS, Dan Javascript.

Pengenalan

Oke temen temen kali ini saya ingin membagikan Source Code Membuat Portfolio Dengan Sederhana.
Untuk membuat portfolio yang menarik memang tidak mudah. Oleh karena itu saya ingin membagikan ke kalian source code ini secara gratis atau open source.

Portfolio sangat penting bagi kalian yang ingin memamerkan karya seni yang kalian buat agar dapat memikat perhatian orang lain. Selain itu portfolio juga tidak luput dari perekrut untuk melihat apa yang telah kalian buat entah itu Desain, Website, Aplikasi, Ataupun projek yang pernah kalian selesaikan.

Nah langsung saja kita mulai 

Membuat Simpel Web Portfolio

Langkah pertama, kalian buatlah sebuah file bernama index.html. Lalu copy code dibawah ini di file index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata of the Webpage -->
    <!-- Character-set Metadata -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Viewport Metadata -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Description Metadata-->
    <meta name="description" content="Portfolio Website" />
    <!-- Author Metadata -->
    <meta name="author" content="Romadhon Aji Satrya" />
    <!-- Keyword Metadata -->
    <meta
      name="keywords"
      content="Aditya Singh, Romadhon Aji Satrya, Romadhon Aji Satrya DPS,
        Romadhon Aji Satrya DPSRKP, Romadhon Aji Satrya UMass, Aditya Vikram
        Singh UMass Amherst, Romadhon Aji Satrya New Delhi, Aditya Vikram
        Singh Amherst, Romadhon Aji Satrya ISSDC, Romadhon Aji Satrya NASA,
        Romadhon Aji Satrya, Romadhon Aji Satrya Website, Aditya V Singh"
    />
    <!-- Webpage Logo -->
    <link rel="shortcut icon" href="./assets/img/favicon.ico" />
    <!-- Webpage Title -->
    <title>Romadhon Aji Satrya</title>

    <!-- Import CSS: Main Stylesheet -->
    <link rel="stylesheet" href="./assets/css/main.css" />
  </head>

  <body>
    <div id="particles-js">
      <div class="header">
        <h1>
          <span class="site-title">Romadhon Aji Satrya</span>
          <span class="site-description"
            >Programmer • Web Developer • Graphic Designer</span
          >
        </h1>
        <div class="header-icons">
          <a
            aria-label="My LinkedIn Profile"
            target="_blank"
            href=""
          >
            <i class="icon fa fa-linkedin" aria-hidden="true"></i>
          </a>
          <a
            aria-label="My Github Profile"
            target="_blank"
            href="https://github.com/romaaji"
          >
            <i class="icon fa fa-github-alt" aria-hidden="true"></i>
          </a>
          <a
            aria-label="My Résumé"
            target="_blank"
            href="https://www.romaa.uno"
          >
            <i class="icon fa fa fa-file-pdf-o" aria-hidden="true"></i>
          </a>
          <a
            aria-label="Send Email"
            href="mailto:romaa@romaa.uno"
            target="_blank"
            ><i class="icon fa fa-envelope"></i
          ></a>
        </div>
        <div class="header-links">
          <a class="link" href="#about" data-scroll>About Me</a>
          <a class="link" href="#projects" data-scroll>Projects</a>
        </div>
      </div>
      <a class="down" href="#about" data-scroll
        ><i class="icon fa fa-chevron-down" aria-hidden="true"></i
      ></a>
    </div>

    <!-- About Section -->
    <section id="about">
      <!-- User Introduction-->
      <div class="user-details">
        <h1>My Story</h1>
        <img
          src="./assets/img/Professional-Picture-Me.jpg"
          alt="Professional Me"
          width="20%"
        />
        <!-- GANTI DENGAN BIO Kamu -->
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor nisl sit amet leo consequat dignissim. Integer et efficitur tellus. Aliquam rhoncus massa sed ultrices lacinia. Cras eu metus quis nisi maximus pulvinar id et leo. Morbi sit amet orci pharetra, porttitor risus quis, elementum tellus. Curabitur in condimentum dui. Maecenas ullamcorper, tortor et venenatis ultrices, sapien ipsum gravida sapien, a pulvinar ipsum ex dictum dolor. Quisque ligula eros, ullamcorper in dictum sed, pretium in ipsum. Fusce facilisis lobortis sapien varius semper. Nunc at tortor justo. Duis quis fringilla risus, at elementum nulla. Suspendisse sit amet ante suscipit, semper mi ac, congue eros. Ut blandit tortor ac nisl volutpat tempor. Ut ultrices lorem sit amet nulla tincidunt volutpat. Sed facilisis rutrum finibus. Quisque urna nunc, egestas vel lectus in, pharetra vehicula magna.
        </p>
      </div>

      <!-- User Specifics -->
      <div class="user">
        <!-- Technology Stack #1: Languages -->
        <div class="tech">
          <h2>Languages</h2>
          <i class="devicon-python-plain colored"></i>
          <i class="devicon-java-plain-wordmark colored"></i>
          <i class="devicon-cplusplus-plain colored"></i>
          <i class="devicon-javascript-plain colored"></i>
          <p>
            My favorite languages for systems programming, web automation, and
            data analysis.
          </p>
        </div>

        <!-- Technology Stack #2: Front-End -->
        <div class="tech">
          <h2>Front-End</h2>
          <i class="devicon-react-original colored"></i>
          <i class="devicon-bootstrap-plain colored"></i>
          <i class="devicon-html5-plain-wordmark colored"></i>
          <i class="devicon-css3-plain-wordmark colored"></i>
          <p>
            My preferred technologies for front-end web development and
            component design.
          </p>
        </div>

        <!-- Technology Stack #3: Back-End -->
        <div class="tech">
          <h2>Back-End</h2>
          <i class="devicon-nodejs-plain colored"></i>
          <i class="devicon-express-original colored"></i>
          <i class="devicon-mongodb-plain-wordmark colored"></i>
          <i class="devicon-mysql-plain-wordmark colored"></i>
          <p>
            My preferred technologies for back-end web programming and database
            architecture.
          </p>
        </div>

        <!-- Technology Stack #4: Tools -->
        <div class="tech">
          <h2>Tools</h2>
          <i class="devicon-git-plain colored"></i>
          <i class="devicon-visualstudio-plain colored"></i>
          <i class="devicon-github-plain colored"></i>
          <i class="devicon-docker-plain colored"></i>
          <p>
            My favorite tools for version control, code editing, and container
            orchestration.
          </p>
        </div>
      </div>
    </section>

    <!-- Projects Section -->
    <section id="projects">
      <div class="user-details">
        <h1>Featured Projects</h1>
      </div>

      <!-- User Project #1: Personal Résumé Website -->
      <div class="user-projects">
        <div class="images-right">
          <img
            alt="Personal Résume Wébsite"
            src="./assets/img/Personal-Resume-Website.jpg"
          />
        </div>
        <div class="contents" style="text-align: center;">
          <h3>Personal Résumé Website</h3>
          <div>
            <img
              height="32"
              width="32"
              src="https://unpkg.com/simple-icons@3.4.0/icons/javascript.svg"
              style="
                filter: invert(96%) sepia(47%) saturate(4151%)
                  hue-rotate(338deg) brightness(100%) contrast(95%);
              "
            />
            &nbsp;
            <img
              height="32"
              width="32"
              src="https://unpkg.com/simple-icons@3.4.0/icons/bootstrap.svg"
              style="
                filter: invert(24%) sepia(14%) saturate(2270%)
                  hue-rotate(222deg) brightness(102%) contrast(90%);
              "
            />
            &nbsp;
            <img
              height="32"
              width="32"
              src="https://unpkg.com/simple-icons@3.4.0/icons/html5.svg"
              style="
                filter: invert(38%) sepia(74%) saturate(1192%)
                  hue-rotate(341deg) brightness(90%) contrast(98%);
              "
            />
            &nbsp;
            <img
              height="32"
              width="32"
              src="https://unpkg.com/simple-icons@3.4.0/icons/css3.svg"
              style="
                filter: invert(33%) sepia(29%) saturate(3844%)
                  hue-rotate(184deg) brightness(90%) contrast(84%);
              "
            />
          </div>
          <p style="text-align: justify;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor nisl sit amet leo consequat dignissim. Integer et efficitur tellus. Aliquam rhoncus massa sed ultrices lacinia. Cras eu metus quis nisi maximus pulvinar id et leo. Morbi sit amet orci pharetra, porttitor risus quis, elementum tellus. Curabitur in condimentum dui. Maecenas ullamcorper, tortor et venenatis ultrices, sapien ipsum gravida sapien, a pulvinar ipsum ex dictum dolor. Quisque ligula eros, ullamcorper in dictum sed, pretium in ipsum. Fusce facilisis lobortis sapien varius semper. Nunc at tortor justo. Duis quis fringilla risus, at elementum nulla.
          </p>
          <a
            class="project-link"
            target="_blank"
            href="https://www.romaa.uno"
            >Check it out!</a
          >
        </div>
      </div>

      <!-- User Project #2: Summer 2020 Project -->
      <div class="user-projects">
        <div class="images-left">
          <img
            alt="Summer 2020 Project"
            src="./assets/img/Summer-2020-Project.jpg"
          />
        </div>
        <div class="contents-right" style="text-align: center;">
          <h3>Summer 2020 Project</h3>
          <img
            height="32"
            width="32"
            src="https://unpkg.com/simple-icons@3.4.0/icons/react.svg"
            style="
              filter: invert(73%) sepia(74%) saturate(1552%) hue-rotate(169deg)
                brightness(109%) contrast(97%);
            "
          />
          &nbsp;
          <img
            height="32"
            width="32"
            src="https://unpkg.com/simple-icons@3.4.0/icons/mongodb.svg"
            style="
              filter: invert(51%) sepia(57%) saturate(456%) hue-rotate(71deg)
                brightness(95%) contrast(91%);
            "
          />
          &nbsp;
          <img
            height="32"
            width="32"
            src="https://unpkg.com/simple-icons@3.4.0/icons/django.svg"
            style="
              filter: invert(9%) sepia(48%) saturate(2719%) hue-rotate(138deg)
                brightness(95%) contrast(93%);
            "
          />
          <p style="text-align: justify;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor nisl sit amet leo consequat dignissim. Integer et efficitur tellus. Aliquam rhoncus massa sed ultrices lacinia. Cras eu metus quis nisi maximus pulvinar id et leo. Morbi sit amet orci pharetra, porttitor risus quis, elementum tellus. Curabitur in condimentum dui. Maecenas ullamcorper, tortor et venenatis ultrices, sapien ipsum gravida sapien, a pulvinar ipsum ex dictum dolor. Quisque ligula eros, ullamcorper in dictum sed, pretium in ipsum. Fusce facilisis lobortis sapien varius semper. Nunc at tortor justo. Duis quis fringilla risus, at elementum nulla.
          </p>
          <a
            class="project-link"
            target="_blank"
            href="https://github.com/romaaji"
            >Check it out!</a
          >
        </div>
      </div>

      <!-- User Project #3: COVID-19 Tracker App -->
      <div class="user-projects">
        <div class="images-right">
          <img
            alt="COVID-19 Tracker App"
            src="./assets/img/Static Site Builder.png"
          />
        </div>
        <div class="contents" style="text-align: center;">
          <h3>Static Site Builder</h3>
          <div>
            <img
              height="32"
              width="32"
              src="https://unpkg.com/simple-icons@3.4.0/icons/javascript.svg"
              style="
                filter: invert(96%) sepia(47%) saturate(4151%)
                  hue-rotate(338deg) brightness(100%) contrast(95%);
              "
            />
          </div>
          <p style="text-align: justify;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor nisl sit amet leo consequat dignissim. Integer et efficitur tellus. Aliquam rhoncus massa sed ultrices lacinia. Cras eu metus quis nisi maximus pulvinar id et leo. Morbi sit amet orci pharetra, porttitor risus quis, elementum tellus. Curabitur in condimentum dui. Maecenas ullamcorper, tortor et venenatis ultrices, sapien ipsum gravida sapien, a pulvinar ipsum ex dictum dolor. Quisque ligula eros, ullamcorper in dictum sed, pretium in ipsum. Fusce facilisis lobortis sapien varius semper. Nunc at tortor justo. Duis quis fringilla risus, at elementum nulla.
          </p>
          <a
            class="project-link"
            target="_blank"
            href="https://github.com/romaaji
          >
            Check it out!
          </a>
        </div>
      </div>

      <!-- Use Project #4: Valuto: Account Management System -->
      <div class="user-projects">
        <div class="images-left">
          <img
            alt="Valuto: Account Management System"
            src="./assets/img/Valuto-Account-Management.jpg"
          />
        </div>
        <div class="contents-right" style="text-align: center;">
          <h3>Valuto: Account Management System</h3>
          <div>
            <img
              height="32"
              width="32"
              src="https://unpkg.com/simple-icons@3.4.0/icons/cplusplus.svg"
              style="
                filter: invert(22%) sepia(77%) saturate(1486%)
                  hue-rotate(183deg) brightness(101%) contrast(103%);
              "
            />
          </div>
          <p style="text-align: justify;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor nisl sit amet leo consequat dignissim. Integer et efficitur tellus. Aliquam rhoncus massa sed ultrices lacinia. Cras eu metus quis nisi maximus pulvinar id et leo. Morbi sit amet orci pharetra, porttitor risus quis, elementum tellus. Curabitur in condimentum dui. Maecenas ullamcorper, tortor et venenatis ultrices, sapien ipsum gravida sapien, a pulvinar ipsum ex dictum dolor. Quisque ligula eros, ullamcorper in dictum sed, pretium in ipsum. Fusce facilisis lobortis sapien varius semper. Nunc at tortor justo. Duis quis fringilla risus, at elementum nulla.
          </p>
          <a
            class="project-link"
            target="_blank"
            href="https://github.com/romaaji"
          >
            Check it out!
          </a>
        </div>
      </div>
    </section>

    <footer class="footer">
      <p>&copy; Romadhon Aji Satrya, 2021</p>
    </footer>

    <!-- Import JS: Particles Theme -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <!-- Import JS: Sweet Scroll -->
    <script src="./assets/js/sweet-scroll.min.js"></script>
    <!-- Import JS: Google Analytics -->
    <script src="./assets/js/google-analytics.js"></script>
    <!-- Import JS: Main Script -->
    <script src="./assets/js/main.js"></script>
  </body>
</html>

Selanjutnya buatlah folder assets, Lalu bikin folder lagi bernama css. Setelah itu bikin file bernama main.css

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans);
@import url(https://fonts.googleapis.com/css?family=Rubik);

html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    line-height: 1.5;
    color: #555;
    font-family: 'Nunito Sans', sans-serif
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
    display: block
}

h1 {
    margin: .67em 0;
    font-size: 2.5rem;
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

code,
kbd,
pre,
samp {
    font-family: monospace;
    font-size: 1em
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

audio,
canvas,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio],
legend {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@-webkit-keyframes pulse {

    0%,
    to {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        filter: alpha(opacity=40);
        opacity: .4;
        top: 0
    }

    50% {
        -ms-filter: none;
        -webkit-filter: none;
        filter: none;
        opacity: 1;
        top: -10px
    }
}

@keyframes pulse {

    0%,
    to {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
        filter: alpha(opacity=40);
        opacity: .4;
        top: 0
    }

    50% {
        -ms-filter: none;
        -webkit-filter: none;
        filter: none;
        opacity: 1;
        top: -10px
    }
}

@font-face {
    font-family: 'FontAwesome';
    src: url(../fonts/fontawesome-webfont.eot?v=4.7.0);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format("embedded-opentype"), url(../fonts/fontawesome-webfont.woff2?v=4.7.0) format("woff2"), url(../fonts/fontawesome-webfont.woff?v=4.7.0) format("woff"), url(../fonts/fontawesome-webfont.ttf?v=4.7.0) format("truetype"), url(../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format("svg");
    font-weight: 400;
    font-style: normal
}

.fa {
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-fw {
    width: 1.28571429em;
    text-align: center
}

.fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none
}

.fa-ul>li {
    position: relative
}

.fa-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: .14285714em;
    text-align: center
}

.fa-li.fa-lg {
    left: -1.85714286em
}

.fa-border {
    padding: .2em .25em .15em;
    border: solid .08em #eee;
    border-radius: .1em
}

.fa-pull-left {
    float: left
}

.fa-pull-right,
.pull-right {
    float: right
}

.fa.fa-pull-left {
    margin-right: .3em
}

.fa.fa-pull-right {
    margin-left: .3em
}

.pull-left {
    float: left
}

.fa.pull-left {
    margin-right: .3em
}

.fa.pull-right {
    margin-left: .3em
}

.fa-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear
}

.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8)
}

.fa-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.fa-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.fa-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1)
}

:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-rotate-90 {
    filter: none
}

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle
}

.fa-stack-1x,
.fa-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center
}

.fa-stack-1x {
    line-height: inherit
}

.fa-stack-2x {
    font-size: 2em
}

.fa-inverse {
    color: #fff
}

.fa-glass:before {
    content: "\f000"
}

.fa-music:before {
    content: "\f001"
}

.fa-search:before {
    content: "\f002"
}

.fa-envelope-o:before {
    content: "\f003"
}

.fa-heart:before {
    content: "\f004"
}

.fa-star:before {
    content: "\f005"
}

.fa-star-o:before {
    content: "\f006"
}

.fa-user:before {
    content: "\f007"
}

.fa-film:before {
    content: "\f008"
}

.fa-th-large:before {
    content: "\f009"
}

.fa-th:before {
    content: "\f00a"
}

.fa-th-list:before {
    content: "\f00b"
}

.fa-check:before {
    content: "\f00c"
}

.fa-close:before,
.fa-remove:before,
.fa-times:before {
    content: "\f00d"
}

.fa-search-plus:before {
    content: "\f00e"
}

.fa-search-minus:before {
    content: "\f010"
}

.fa-power-off:before {
    content: "\f011"
}

.fa-signal:before {
    content: "\f012"
}

.fa-cog:before,
.fa-gear:before {
    content: "\f013"
}

.fa-trash-o:before {
    content: "\f014"
}

.fa-home:before {
    content: "\f015"
}

.fa-file-o:before {
    content: "\f016"
}

.fa-clock-o:before {
    content: "\f017"
}

.fa-road:before {
    content: "\f018"
}

.fa-download:before {
    content: "\f019"
}

.fa-arrow-circle-o-down:before {
    content: "\f01a"
}

.fa-arrow-circle-o-up:before {
    content: "\f01b"
}

.fa-inbox:before {
    content: "\f01c"
}

.fa-play-circle-o:before {
    content: "\f01d"
}

.fa-repeat:before,
.fa-rotate-right:before {
    content: "\f01e"
}

.fa-refresh:before {
    content: "\f021"
}

.fa-list-alt:before {
    content: "\f022"
}

.fa-lock:before {
    content: "\f023"
}

.fa-flag:before {
    content: "\f024"
}

.fa-headphones:before {
    content: "\f025"
}

.fa-volume-off:before {
    content: "\f026"
}

.fa-volume-down:before {
    content: "\f027"
}

.fa-volume-up:before {
    content: "\f028"
}

.fa-qrcode:before {
    content: "\f029"
}

.fa-barcode:before {
    content: "\f02a"
}

.fa-tag:before {
    content: "\f02b"
}

.fa-tags:before {
    content: "\f02c"
}

.fa-book:before {
    content: "\f02d"
}

.fa-bookmark:before {
    content: "\f02e"
}

.fa-print:before {
    content: "\f02f"
}

.fa-camera:before {
    content: "\f030"
}

.fa-font:before {
    content: "\f031"
}

.fa-bold:before {
    content: "\f032"
}

.fa-italic:before {
    content: "\f033"
}

.fa-text-height:before {
    content: "\f034"
}

.fa-text-width:before {
    content: "\f035"
}

.fa-align-left:before {
    content: "\f036"
}

.fa-align-center:before {
    content: "\f037"
}

.fa-align-right:before {
    content: "\f038"
}

.fa-align-justify:before {
    content: "\f039"
}

.fa-list:before {
    content: "\f03a"
}

.fa-dedent:before,
.fa-outdent:before {
    content: "\f03b"
}

.fa-indent:before {
    content: "\f03c"
}

.fa-video-camera:before {
    content: "\f03d"
}

.fa-image:before,
.fa-photo:before,
.fa-picture-o:before {
    content: "\f03e"
}

.fa-pencil:before {
    content: "\f040"
}

.fa-map-marker:before {
    content: "\f041"
}

.fa-adjust:before {
    content: "\f042"
}

.fa-tint:before {
    content: "\f043"
}

.fa-edit:before,
.fa-pencil-square-o:before {
    content: "\f044"
}

.fa-share-square-o:before {
    content: "\f045"
}

.fa-check-square-o:before {
    content: "\f046"
}

.fa-arrows:before {
    content: "\f047"
}

.fa-step-backward:before {
    content: "\f048"
}

.fa-fast-backward:before {
    content: "\f049"
}

.fa-backward:before {
    content: "\f04a"
}

.fa-play:before {
    content: "\f04b"
}

.fa-pause:before {
    content: "\f04c"
}

.fa-stop:before {
    content: "\f04d"
}

.fa-forward:before {
    content: "\f04e"
}

.fa-fast-forward:before {
    content: "\f050"
}

.fa-step-forward:before {
    content: "\f051"
}

.fa-eject:before {
    content: "\f052"
}

.fa-chevron-left:before {
    content: "\f053"
}

.fa-chevron-right:before {
    content: "\f054"
}

.fa-plus-circle:before {
    content: "\f055"
}

.fa-minus-circle:before {
    content: "\f056"
}

.fa-times-circle:before {
    content: "\f057"
}

.fa-check-circle:before {
    content: "\f058"
}

.fa-question-circle:before {
    content: "\f059"
}

.fa-info-circle:before {
    content: "\f05a"
}

.fa-crosshairs:before {
    content: "\f05b"
}

.fa-times-circle-o:before {
    content: "\f05c"
}

.fa-check-circle-o:before {
    content: "\f05d"
}

.fa-ban:before {
    content: "\f05e"
}

.fa-arrow-left:before {
    content: "\f060"
}

.fa-arrow-right:before {
    content: "\f061"
}

.fa-arrow-up:before {
    content: "\f062"
}

.fa-arrow-down:before {
    content: "\f063"
}

.fa-mail-forward:before,
.fa-share:before {
    content: "\f064"
}

.fa-expand:before {
    content: "\f065"
}

.fa-compress:before {
    content: "\f066"
}

.fa-plus:before {
    content: "\f067"
}

.fa-minus:before {
    content: "\f068"
}

.fa-asterisk:before {
    content: "\f069"
}

.fa-exclamation-circle:before {
    content: "\f06a"
}

.fa-gift:before {
    content: "\f06b"
}

.fa-leaf:before {
    content: "\f06c"
}

.fa-fire:before {
    content: "\f06d"
}

.fa-eye:before {
    content: "\f06e"
}

.fa-eye-slash:before {
    content: "\f070"
}

.fa-exclamation-triangle:before,
.fa-warning:before {
    content: "\f071"
}

.fa-plane:before {
    content: "\f072"
}

.fa-calendar:before {
    content: "\f073"
}

.fa-random:before {
    content: "\f074"
}

.fa-comment:before {
    content: "\f075"
}

.fa-magnet:before {
    content: "\f076"
}

.fa-chevron-up:before {
    content: "\f077"
}

.fa-chevron-down:before {
    content: "\f078"
}

.fa-retweet:before {
    content: "\f079"
}

.fa-shopping-cart:before {
    content: "\f07a"
}

.fa-folder:before {
    content: "\f07b"
}

.fa-folder-open:before {
    content: "\f07c"
}

.fa-arrows-v:before {
    content: "\f07d"
}

.fa-arrows-h:before {
    content: "\f07e"
}

.fa-bar-chart-o:before,
.fa-bar-chart:before {
    content: "\f080"
}

.fa-twitter-square:before {
    content: "\f081"
}

.fa-facebook-square:before {
    content: "\f082"
}

.fa-camera-retro:before {
    content: "\f083"
}

.fa-key:before {
    content: "\f084"
}

.fa-cogs:before,
.fa-gears:before {
    content: "\f085"
}

.fa-comments:before {
    content: "\f086"
}

.fa-thumbs-o-up:before {
    content: "\f087"
}

.fa-thumbs-o-down:before {
    content: "\f088"
}

.fa-star-half:before {
    content: "\f089"
}

.fa-heart-o:before {
    content: "\f08a"
}

.fa-sign-out:before {
    content: "\f08b"
}

.fa-linkedin-square:before {
    content: "\f08c"
}

.fa-thumb-tack:before {
    content: "\f08d"
}

.fa-external-link:before {
    content: "\f08e"
}

.fa-sign-in:before {
    content: "\f090"
}

.fa-trophy:before {
    content: "\f091"
}

.fa-github-square:before {
    content: "\f092"
}

.fa-upload:before {
    content: "\f093"
}

.fa-lemon-o:before {
    content: "\f094"
}

.fa-phone:before {
    content: "\f095"
}

.fa-square-o:before {
    content: "\f096"
}

.fa-bookmark-o:before {
    content: "\f097"
}

.fa-phone-square:before {
    content: "\f098"
}

.fa-twitter:before {
    content: "\f099"
}

.fa-facebook-f:before,
.fa-facebook:before {
    content: "\f09a"
}

.fa-github:before {
    content: "\f09b"
}

.fa-unlock:before {
    content: "\f09c"
}

.fa-credit-card:before {
    content: "\f09d"
}

.fa-feed:before,
.fa-rss:before {
    content: "\f09e"
}

.fa-hdd-o:before {
    content: "\f0a0"
}

.fa-bullhorn:before {
    content: "\f0a1"
}

.fa-bell:before {
    content: "\f0f3"
}

.fa-certificate:before {
    content: "\f0a3"
}

.fa-hand-o-right:before {
    content: "\f0a4"
}

.fa-hand-o-left:before {
    content: "\f0a5"
}

.fa-hand-o-up:before {
    content: "\f0a6"
}

.fa-hand-o-down:before {
    content: "\f0a7"
}

.fa-arrow-circle-left:before {
    content: "\f0a8"
}

.fa-arrow-circle-right:before {
    content: "\f0a9"
}

.fa-arrow-circle-up:before {
    content: "\f0aa"
}

.fa-arrow-circle-down:before {
    content: "\f0ab"
}

.fa-globe:before {
    content: "\f0ac"
}

.fa-wrench:before {
    content: "\f0ad"
}

.fa-tasks:before {
    content: "\f0ae"
}

.fa-filter:before {
    content: "\f0b0"
}

.fa-briefcase:before {
    content: "\f0b1"
}

.fa-arrows-alt:before {
    content: "\f0b2"
}

.fa-group:before,
.fa-users:before {
    content: "\f0c0"
}

.fa-chain:before,
.fa-link:before {
    content: "\f0c1"
}

.fa-cloud:before {
    content: "\f0c2"
}

.fa-flask:before {
    content: "\f0c3"
}

.fa-cut:before,
.fa-scissors:before {
    content: "\f0c4"
}

.fa-copy:before,
.fa-files-o:before {
    content: "\f0c5"
}

.fa-paperclip:before {
    content: "\f0c6"
}

.fa-floppy-o:before,
.fa-save:before {
    content: "\f0c7"
}

.fa-square:before {
    content: "\f0c8"
}

.fa-bars:before,
.fa-navicon:before,
.fa-reorder:before {
    content: "\f0c9"
}

.fa-list-ul:before {
    content: "\f0ca"
}

.fa-list-ol:before {
    content: "\f0cb"
}

.fa-strikethrough:before {
    content: "\f0cc"
}

.fa-underline:before {
    content: "\f0cd"
}

.fa-table:before {
    content: "\f0ce"
}

.fa-magic:before {
    content: "\f0d0"
}

.fa-truck:before {
    content: "\f0d1"
}

.fa-pinterest:before {
    content: "\f0d2"
}

.fa-pinterest-square:before {
    content: "\f0d3"
}

.fa-google-plus-square:before {
    content: "\f0d4"
}

.fa-google-plus:before {
    content: "\f0d5"
}

.fa-money:before {
    content: "\f0d6"
}

.fa-caret-down:before {
    content: "\f0d7"
}

.fa-caret-up:before {
    content: "\f0d8"
}

.fa-caret-left:before {
    content: "\f0d9"
}

.fa-caret-right:before {
    content: "\f0da"
}

.fa-columns:before {
    content: "\f0db"
}

.fa-sort:before,
.fa-unsorted:before {
    content: "\f0dc"
}

.fa-sort-desc:before,
.fa-sort-down:before {
    content: "\f0dd"
}

.fa-sort-asc:before,
.fa-sort-up:before {
    content: "\f0de"
}

.fa-envelope:before {
    content: "\f0e0"
}

.fa-linkedin:before {
    content: "\f0e1"
}

.fa-rotate-left:before,
.fa-undo:before {
    content: "\f0e2"
}

.fa-gavel:before,
.fa-legal:before {
    content: "\f0e3"
}

.fa-dashboard:before,
.fa-tachometer:before {
    content: "\f0e4"
}

.fa-comment-o:before {
    content: "\f0e5"
}

.fa-comments-o:before {
    content: "\f0e6"
}

.fa-bolt:before,
.fa-flash:before {
    content: "\f0e7"
}

.fa-sitemap:before {
    content: "\f0e8"
}

.fa-umbrella:before {
    content: "\f0e9"
}

.fa-clipboard:before,
.fa-paste:before {
    content: "\f0ea"
}

.fa-lightbulb-o:before {
    content: "\f0eb"
}

.fa-exchange:before {
    content: "\f0ec"
}

.fa-cloud-download:before {
    content: "\f0ed"
}

.fa-cloud-upload:before {
    content: "\f0ee"
}

.fa-user-md:before {
    content: "\f0f0"
}

.fa-stethoscope:before {
    content: "\f0f1"
}

.fa-suitcase:before {
    content: "\f0f2"
}

.fa-bell-o:before {
    content: "\f0a2"
}

.fa-coffee:before {
    content: "\f0f4"
}

.fa-cutlery:before {
    content: "\f0f5"
}

.fa-file-text-o:before {
    content: "\f0f6"
}

.fa-building-o:before {
    content: "\f0f7"
}

.fa-hospital-o:before {
    content: "\f0f8"
}

.fa-ambulance:before {
    content: "\f0f9"
}

.fa-medkit:before {
    content: "\f0fa"
}

.fa-fighter-jet:before {
    content: "\f0fb"
}

.fa-beer:before {
    content: "\f0fc"
}

.fa-h-square:before {
    content: "\f0fd"
}

.fa-plus-square:before {
    content: "\f0fe"
}

.fa-angle-double-left:before {
    content: "\f100"
}

.fa-angle-double-right:before {
    content: "\f101"
}

.fa-angle-double-up:before {
    content: "\f102"
}

.fa-angle-double-down:before {
    content: "\f103"
}

.fa-angle-left:before {
    content: "\f104"
}

.fa-angle-right:before {
    content: "\f105"
}

.fa-angle-up:before {
    content: "\f106"
}

.fa-angle-down:before {
    content: "\f107"
}

.fa-desktop:before {
    content: "\f108"
}

.fa-laptop:before {
    content: "\f109"
}

.fa-tablet:before {
    content: "\f10a"
}

.fa-mobile-phone:before,
.fa-mobile:before {
    content: "\f10b"
}

.fa-circle-o:before {
    content: "\f10c"
}

.fa-quote-left:before {
    content: "\f10d"
}

.fa-quote-right:before {
    content: "\f10e"
}

.fa-spinner:before {
    content: "\f110"
}

.fa-circle:before {
    content: "\f111"
}

.fa-mail-reply:before,
.fa-reply:before {
    content: "\f112"
}

.fa-github-alt:before {
    content: "\f113"
}

.fa-folder-o:before {
    content: "\f114"
}

.fa-folder-open-o:before {
    content: "\f115"
}

.fa-smile-o:before {
    content: "\f118"
}

.fa-frown-o:before {
    content: "\f119"
}

.fa-meh-o:before {
    content: "\f11a"
}

.fa-gamepad:before {
    content: "\f11b"
}

.fa-keyboard-o:before {
    content: "\f11c"
}

.fa-flag-o:before {
    content: "\f11d"
}

.fa-flag-checkered:before {
    content: "\f11e"
}

.fa-terminal:before {
    content: "\f120"
}

.fa-code:before {
    content: "\f121"
}

.fa-mail-reply-all:before,
.fa-reply-all:before {
    content: "\f122"
}

.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
    content: "\f123"
}

.fa-location-arrow:before {
    content: "\f124"
}

.fa-crop:before {
    content: "\f125"
}

.fa-code-fork:before {
    content: "\f126"
}

.fa-chain-broken:before,
.fa-unlink:before {
    content: "\f127"
}

.fa-question:before {
    content: "\f128"
}

.fa-info:before {
    content: "\f129"
}

.fa-exclamation:before {
    content: "\f12a"
}

.fa-superscript:before {
    content: "\f12b"
}

.fa-subscript:before {
    content: "\f12c"
}

.fa-eraser:before {
    content: "\f12d"
}

.fa-puzzle-piece:before {
    content: "\f12e"
}

.fa-microphone:before {
    content: "\f130"
}

.fa-microphone-slash:before {
    content: "\f131"
}

.fa-shield:before {
    content: "\f132"
}

.fa-calendar-o:before {
    content: "\f133"
}

.fa-fire-extinguisher:before {
    content: "\f134"
}

.fa-rocket:before {
    content: "\f135"
}

.fa-maxcdn:before {
    content: "\f136"
}

.fa-chevron-circle-left:before {
    content: "\f137"
}

.fa-chevron-circle-right:before {
    content: "\f138"
}

.fa-chevron-circle-up:before {
    content: "\f139"
}

.fa-chevron-circle-down:before {
    content: "\f13a"
}

.fa-html5:before {
    content: "\f13b"
}

.fa-css3:before {
    content: "\f13c"
}

.fa-anchor:before {
    content: "\f13d"
}

.fa-unlock-alt:before {
    content: "\f13e"
}

.fa-bullseye:before {
    content: "\f140"
}

.fa-ellipsis-h:before {
    content: "\f141"
}

.fa-ellipsis-v:before {
    content: "\f142"
}

.fa-rss-square:before {
    content: "\f143"
}

.fa-play-circle:before {
    content: "\f144"
}

.fa-ticket:before {
    content: "\f145"
}

.fa-minus-square:before {
    content: "\f146"
}

.fa-minus-square-o:before {
    content: "\f147"
}

.fa-level-up:before {
    content: "\f148"
}

.fa-level-down:before {
    content: "\f149"
}

.fa-check-square:before {
    content: "\f14a"
}

.fa-pencil-square:before {
    content: "\f14b"
}

.fa-external-link-square:before {
    content: "\f14c"
}

.fa-share-square:before {
    content: "\f14d"
}

.fa-compass:before {
    content: "\f14e"
}

.fa-caret-square-o-down:before,
.fa-toggle-down:before {
    content: "\f150"
}

.fa-caret-square-o-up:before,
.fa-toggle-up:before {
    content: "\f151"
}

.fa-caret-square-o-right:before,
.fa-toggle-right:before {
    content: "\f152"
}

.fa-eur:before,
.fa-euro:before {
    content: "\f153"
}

.fa-gbp:before {
    content: "\f154"
}

.fa-dollar:before,
.fa-usd:before {
    content: "\f155"
}

.fa-inr:before,
.fa-rupee:before {
    content: "\f156"
}

.fa-cny:before,
.fa-jpy:before,
.fa-rmb:before,
.fa-yen:before {
    content: "\f157"
}

.fa-rouble:before,
.fa-rub:before,
.fa-ruble:before {
    content: "\f158"
}

.fa-krw:before,
.fa-won:before {
    content: "\f159"
}

.fa-bitcoin:before,
.fa-btc:before {
    content: "\f15a"
}

.fa-file:before {
    content: "\f15b"
}

.fa-file-text:before {
    content: "\f15c"
}

.fa-sort-alpha-asc:before {
    content: "\f15d"
}

.fa-sort-alpha-desc:before {
    content: "\f15e"
}

.fa-sort-amount-asc:before {
    content: "\f160"
}

.fa-sort-amount-desc:before {
    content: "\f161"
}

.fa-sort-numeric-asc:before {
    content: "\f162"
}

.fa-sort-numeric-desc:before {
    content: "\f163"
}

.fa-thumbs-up:before {
    content: "\f164"
}

.fa-thumbs-down:before {
    content: "\f165"
}

.fa-youtube-square:before {
    content: "\f166"
}

.fa-youtube:before {
    content: "\f167"
}

.fa-xing:before {
    content: "\f168"
}

.fa-xing-square:before {
    content: "\f169"
}

.fa-youtube-play:before {
    content: "\f16a"
}

.fa-dropbox:before {
    content: "\f16b"
}

.fa-stack-overflow:before {
    content: "\f16c"
}

.fa-instagram:before {
    content: "\f16d"
}

.fa-flickr:before {
    content: "\f16e"
}

.fa-adn:before {
    content: "\f170"
}

.fa-bitbucket:before {
    content: "\f171"
}

.fa-bitbucket-square:before {
    content: "\f172"
}

.fa-tumblr:before {
    content: "\f173"
}

.fa-tumblr-square:before {
    content: "\f174"
}

.fa-long-arrow-down:before {
    content: "\f175"
}

.fa-long-arrow-up:before {
    content: "\f176"
}

.fa-long-arrow-left:before {
    content: "\f177"
}

.fa-long-arrow-right:before {
    content: "\f178"
}

.fa-apple:before {
    content: "\f179"
}

.fa-windows:before {
    content: "\f17a"
}

.fa-android:before {
    content: "\f17b"
}

.fa-linux:before {
    content: "\f17c"
}

.fa-dribbble:before {
    content: "\f17d"
}

.fa-skype:before {
    content: "\f17e"
}

.fa-foursquare:before {
    content: "\f180"
}

.fa-trello:before {
    content: "\f181"
}

.fa-female:before {
    content: "\f182"
}

.fa-male:before {
    content: "\f183"
}

.fa-gittip:before,
.fa-gratipay:before {
    content: "\f184"
}

.fa-sun-o:before {
    content: "\f185"
}

.fa-moon-o:before {
    content: "\f186"
}

.fa-archive:before {
    content: "\f187"
}

.fa-bug:before {
    content: "\f188"
}

.fa-vk:before {
    content: "\f189"
}

.fa-weibo:before {
    content: "\f18a"
}

.fa-renren:before {
    content: "\f18b"
}

.fa-pagelines:before {
    content: "\f18c"
}

.fa-stack-exchange:before {
    content: "\f18d"
}

.fa-arrow-circle-o-right:before {
    content: "\f18e"
}

.fa-arrow-circle-o-left:before {
    content: "\f190"
}

.fa-caret-square-o-left:before,
.fa-toggle-left:before {
    content: "\f191"
}

.fa-dot-circle-o:before {
    content: "\f192"
}

.fa-wheelchair:before {
    content: "\f193"
}

.fa-vimeo-square:before {
    content: "\f194"
}

.fa-try:before,
.fa-turkish-lira:before {
    content: "\f195"
}

.fa-plus-square-o:before {
    content: "\f196"
}

.fa-space-shuttle:before {
    content: "\f197"
}

.fa-slack:before {
    content: "\f198"
}

.fa-envelope-square:before {
    content: "\f199"
}

.fa-wordpress:before {
    content: "\f19a"
}

.fa-openid:before {
    content: "\f19b"
}

.fa-bank:before,
.fa-institution:before,
.fa-university:before {
    content: "\f19c"
}

.fa-graduation-cap:before,
.fa-mortar-board:before {
    content: "\f19d"
}

.fa-yahoo:before {
    content: "\f19e"
}

.fa-google:before {
    content: "\f1a0"
}

.fa-reddit:before {
    content: "\f1a1"
}

.fa-reddit-square:before {
    content: "\f1a2"
}

.fa-stumbleupon-circle:before {
    content: "\f1a3"
}

.fa-stumbleupon:before {
    content: "\f1a4"
}

.fa-delicious:before {
    content: "\f1a5"
}

.fa-digg:before {
    content: "\f1a6"
}

.fa-pied-piper-pp:before {
    content: "\f1a7"
}

.fa-pied-piper-alt:before {
    content: "\f1a8"
}

.fa-drupal:before {
    content: "\f1a9"
}

.fa-joomla:before {
    content: "\f1aa"
}

.fa-language:before {
    content: "\f1ab"
}

.fa-fax:before {
    content: "\f1ac"
}

.fa-building:before {
    content: "\f1ad"
}

.fa-child:before {
    content: "\f1ae"
}

.fa-paw:before {
    content: "\f1b0"
}

.fa-spoon:before {
    content: "\f1b1"
}

.fa-cube:before {
    content: "\f1b2"
}

.fa-cubes:before {
    content: "\f1b3"
}

.fa-behance:before {
    content: "\f1b4"
}

.fa-behance-square:before {
    content: "\f1b5"
}

.fa-steam:before {
    content: "\f1b6"
}

.fa-steam-square:before {
    content: "\f1b7"
}

.fa-recycle:before {
    content: "\f1b8"
}

.fa-automobile:before,
.fa-car:before {
    content: "\f1b9"
}

.fa-cab:before,
.fa-taxi:before {
    content: "\f1ba"
}

.fa-tree:before {
    content: "\f1bb"
}

.fa-spotify:before {
    content: "\f1bc"
}

.fa-deviantart:before {
    content: "\f1bd"
}

.fa-soundcloud:before {
    content: "\f1be"
}

.fa-database:before {
    content: "\f1c0"
}

.fa-file-pdf-o:before {
    content: "\f1c1"
}

.fa-file-word-o:before {
    content: "\f1c2"
}

.fa-file-excel-o:before {
    content: "\f1c3"
}

.fa-file-powerpoint-o:before {
    content: "\f1c4"
}

.fa-file-image-o:before,
.fa-file-photo-o:before,
.fa-file-picture-o:before {
    content: "\f1c5"
}

.fa-file-archive-o:before,
.fa-file-zip-o:before {
    content: "\f1c6"
}

.fa-file-audio-o:before,
.fa-file-sound-o:before {
    content: "\f1c7"
}

.fa-file-movie-o:before,
.fa-file-video-o:before {
    content: "\f1c8"
}

.fa-file-code-o:before {
    content: "\f1c9"
}

.fa-vine:before {
    content: "\f1ca"
}

.fa-codepen:before {
    content: "\f1cb"
}

.fa-jsfiddle:before {
    content: "\f1cc"
}

.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-ring:before,
.fa-life-saver:before,
.fa-support:before {
    content: "\f1cd"
}

.fa-circle-o-notch:before {
    content: "\f1ce"
}

.fa-ra:before,
.fa-rebel:before,
.fa-resistance:before {
    content: "\f1d0"
}

.fa-empire:before,
.fa-ge:before {
    content: "\f1d1"
}

.fa-git-square:before {
    content: "\f1d2"
}

.fa-git:before {
    content: "\f1d3"
}

.fa-hacker-news:before,
.fa-y-combinator-square:before,
.fa-yc-square:before {
    content: "\f1d4"
}

.fa-tencent-weibo:before {
    content: "\f1d5"
}

.fa-qq:before {
    content: "\f1d6"
}

.fa-wechat:before,
.fa-weixin:before {
    content: "\f1d7"
}

.fa-paper-plane:before,
.fa-send:before {
    content: "\f1d8"
}

.fa-paper-plane-o:before,
.fa-send-o:before {
    content: "\f1d9"
}

.fa-history:before {
    content: "\f1da"
}

.fa-circle-thin:before {
    content: "\f1db"
}

.fa-header:before {
    content: "\f1dc"
}

.fa-paragraph:before {
    content: "\f1dd"
}

.fa-sliders:before {
    content: "\f1de"
}

.fa-share-alt:before {
    content: "\f1e0"
}

.fa-share-alt-square:before {
    content: "\f1e1"
}

.fa-bomb:before {
    content: "\f1e2"
}

.fa-futbol-o:before,
.fa-soccer-ball-o:before {
    content: "\f1e3"
}

.fa-tty:before {
    content: "\f1e4"
}

.fa-binoculars:before {
    content: "\f1e5"
}

.fa-plug:before {
    content: "\f1e6"
}

.fa-slideshare:before {
    content: "\f1e7"
}

.fa-twitch:before {
    content: "\f1e8"
}

.fa-yelp:before {
    content: "\f1e9"
}

.fa-newspaper-o:before {
    content: "\f1ea"
}

.fa-wifi:before {
    content: "\f1eb"
}

.fa-calculator:before {
    content: "\f1ec"
}

.fa-paypal:before {
    content: "\f1ed"
}

.fa-google-wallet:before {
    content: "\f1ee"
}

.fa-cc-visa:before {
    content: "\f1f0"
}

.fa-cc-mastercard:before {
    content: "\f1f1"
}

.fa-cc-discover:before {
    content: "\f1f2"
}

.fa-cc-amex:before {
    content: "\f1f3"
}

.fa-cc-paypal:before {
    content: "\f1f4"
}

.fa-cc-stripe:before {
    content: "\f1f5"
}

.fa-bell-slash:before {
    content: "\f1f6"
}

.fa-bell-slash-o:before {
    content: "\f1f7"
}

.fa-trash:before {
    content: "\f1f8"
}

.fa-copyright:before {
    content: "\f1f9"
}

.fa-at:before {
    content: "\f1fa"
}

.fa-eyedropper:before {
    content: "\f1fb"
}

.fa-paint-brush:before {
    content: "\f1fc"
}

.fa-birthday-cake:before {
    content: "\f1fd"
}

.fa-area-chart:before {
    content: "\f1fe"
}

.fa-pie-chart:before {
    content: "\f200"
}

.fa-line-chart:before {
    content: "\f201"
}

.fa-lastfm:before {
    content: "\f202"
}

.fa-lastfm-square:before {
    content: "\f203"
}

.fa-toggle-off:before {
    content: "\f204"
}

.fa-toggle-on:before {
    content: "\f205"
}

.fa-bicycle:before {
    content: "\f206"
}

.fa-bus:before {
    content: "\f207"
}

.fa-ioxhost:before {
    content: "\f208"
}

.fa-angellist:before {
    content: "\f209"
}

.fa-cc:before {
    content: "\f20a"
}

.fa-ils:before,
.fa-shekel:before,
.fa-sheqel:before {
    content: "\f20b"
}

.fa-meanpath:before {
    content: "\f20c"
}

.fa-buysellads:before {
    content: "\f20d"
}

.fa-connectdevelop:before {
    content: "\f20e"
}

.fa-dashcube:before {
    content: "\f210"
}

.fa-forumbee:before {
    content: "\f211"
}

.fa-leanpub:before {
    content: "\f212"
}

.fa-sellsy:before {
    content: "\f213"
}

.fa-shirtsinbulk:before {
    content: "\f214"
}

.fa-simplybuilt:before {
    content: "\f215"
}

.fa-skyatlas:before {
    content: "\f216"
}

.fa-cart-plus:before {
    content: "\f217"
}

.fa-cart-arrow-down:before {
    content: "\f218"
}

.fa-diamond:before {
    content: "\f219"
}

.fa-ship:before {
    content: "\f21a"
}

.fa-user-secret:before {
    content: "\f21b"
}

.fa-motorcycle:before {
    content: "\f21c"
}

.fa-street-view:before {
    content: "\f21d"
}

.fa-heartbeat:before {
    content: "\f21e"
}

.fa-venus:before {
    content: "\f221"
}

.fa-mars:before {
    content: "\f222"
}

.fa-mercury:before {
    content: "\f223"
}

.fa-intersex:before,
.fa-transgender:before {
    content: "\f224"
}

.fa-transgender-alt:before {
    content: "\f225"
}

.fa-venus-double:before {
    content: "\f226"
}

.fa-mars-double:before {
    content: "\f227"
}

.fa-venus-mars:before {
    content: "\f228"
}

.fa-mars-stroke:before {
    content: "\f229"
}

.fa-mars-stroke-v:before {
    content: "\f22a"
}

.fa-mars-stroke-h:before {
    content: "\f22b"
}

.fa-neuter:before {
    content: "\f22c"
}

.fa-genderless:before {
    content: "\f22d"
}

.fa-facebook-official:before {
    content: "\f230"
}

.fa-pinterest-p:before {
    content: "\f231"
}

.fa-whatsapp:before {
    content: "\f232"
}

.fa-server:before {
    content: "\f233"
}

.fa-user-plus:before {
    content: "\f234"
}

.fa-user-times:before {
    content: "\f235"
}

.fa-bed:before,
.fa-hotel:before {
    content: "\f236"
}

.fa-viacoin:before {
    content: "\f237"
}

.fa-train:before {
    content: "\f238"
}

.fa-subway:before {
    content: "\f239"
}

.fa-medium:before {
    content: "\f23a"
}

.fa-y-combinator:before,
.fa-yc:before {
    content: "\f23b"
}

.fa-optin-monster:before {
    content: "\f23c"
}

.fa-opencart:before {
    content: "\f23d"
}

.fa-expeditedssl:before {
    content: "\f23e"
}

.fa-battery-4:before,
.fa-battery-full:before,
.fa-battery:before {
    content: "\f240"
}

.fa-battery-3:before,
.fa-battery-three-quarters:before {
    content: "\f241"
}

.fa-battery-2:before,
.fa-battery-half:before {
    content: "\f242"
}

.fa-battery-1:before,
.fa-battery-quarter:before {
    content: "\f243"
}

.fa-battery-0:before,
.fa-battery-empty:before {
    content: "\f244"
}

.fa-mouse-pointer:before {
    content: "\f245"
}

.fa-i-cursor:before {
    content: "\f246"
}

.fa-object-group:before {
    content: "\f247"
}

.fa-object-ungroup:before {
    content: "\f248"
}

.fa-sticky-note:before {
    content: "\f249"
}

.fa-sticky-note-o:before {
    content: "\f24a"
}

.fa-cc-jcb:before {
    content: "\f24b"
}

.fa-cc-diners-club:before {
    content: "\f24c"
}

.fa-clone:before {
    content: "\f24d"
}

.fa-balance-scale:before {
    content: "\f24e"
}

.fa-hourglass-o:before {
    content: "\f250"
}

.fa-hourglass-1:before,
.fa-hourglass-start:before {
    content: "\f251"
}

.fa-hourglass-2:before,
.fa-hourglass-half:before {
    content: "\f252"
}

.fa-hourglass-3:before,
.fa-hourglass-end:before {
    content: "\f253"
}

.fa-hourglass:before {
    content: "\f254"
}

.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
    content: "\f255"
}

.fa-hand-paper-o:before,
.fa-hand-stop-o:before {
    content: "\f256"
}

.fa-hand-scissors-o:before {
    content: "\f257"
}

.fa-hand-lizard-o:before {
    content: "\f258"
}

.fa-hand-spock-o:before {
    content: "\f259"
}

.fa-hand-pointer-o:before {
    content: "\f25a"
}

.fa-hand-peace-o:before {
    content: "\f25b"
}

.fa-trademark:before {
    content: "\f25c"
}

.fa-registered:before {
    content: "\f25d"
}

.fa-creative-commons:before {
    content: "\f25e"
}

.fa-gg:before {
    content: "\f260"
}

.fa-gg-circle:before {
    content: "\f261"
}

.fa-tripadvisor:before {
    content: "\f262"
}

.fa-odnoklassniki:before {
    content: "\f263"
}

.fa-odnoklassniki-square:before {
    content: "\f264"
}

.fa-get-pocket:before {
    content: "\f265"
}

.fa-wikipedia-w:before {
    content: "\f266"
}

.fa-safari:before {
    content: "\f267"
}

.fa-chrome:before {
    content: "\f268"
}

.fa-firefox:before {
    content: "\f269"
}

.fa-opera:before {
    content: "\f26a"
}

.fa-internet-explorer:before {
    content: "\f26b"
}

.fa-television:before,
.fa-tv:before {
    content: "\f26c"
}

.fa-contao:before {
    content: "\f26d"
}

.fa-500px:before {
    content: "\f26e"
}

.fa-amazon:before {
    content: "\f270"
}

.fa-calendar-plus-o:before {
    content: "\f271"
}

.fa-calendar-minus-o:before {
    content: "\f272"
}

.fa-calendar-times-o:before {
    content: "\f273"
}

.fa-calendar-check-o:before {
    content: "\f274"
}

.fa-industry:before {
    content: "\f275"
}

.fa-map-pin:before {
    content: "\f276"
}

.fa-map-signs:before {
    content: "\f277"
}

.fa-map-o:before {
    content: "\f278"
}

.fa-map:before {
    content: "\f279"
}

.fa-commenting:before {
    content: "\f27a"
}

.fa-commenting-o:before {
    content: "\f27b"
}

.fa-houzz:before {
    content: "\f27c"
}

.fa-vimeo:before {
    content: "\f27d"
}

.fa-black-tie:before {
    content: "\f27e"
}

.fa-fonticons:before {
    content: "\f280"
}

.fa-reddit-alien:before {
    content: "\f281"
}

.fa-edge:before {
    content: "\f282"
}

.fa-credit-card-alt:before {
    content: "\f283"
}

.fa-codiepie:before {
    content: "\f284"
}

.fa-modx:before {
    content: "\f285"
}

.fa-fort-awesome:before {
    content: "\f286"
}

.fa-usb:before {
    content: "\f287"
}

.fa-product-hunt:before {
    content: "\f288"
}

.fa-mixcloud:before {
    content: "\f289"
}

.fa-scribd:before {
    content: "\f28a"
}

.fa-pause-circle:before {
    content: "\f28b"
}

.fa-pause-circle-o:before {
    content: "\f28c"
}

.fa-stop-circle:before {
    content: "\f28d"
}

.fa-stop-circle-o:before {
    content: "\f28e"
}

.fa-shopping-bag:before {
    content: "\f290"
}

.fa-shopping-basket:before {
    content: "\f291"
}

.fa-hashtag:before {
    content: "\f292"
}

.fa-bluetooth:before {
    content: "\f293"
}

.fa-bluetooth-b:before {
    content: "\f294"
}

.fa-percent:before {
    content: "\f295"
}

.fa-gitlab:before {
    content: "\f296"
}

.fa-wpbeginner:before {
    content: "\f297"
}

.fa-wpforms:before {
    content: "\f298"
}

.fa-envira:before {
    content: "\f299"
}

.fa-universal-access:before {
    content: "\f29a"
}

.fa-wheelchair-alt:before {
    content: "\f29b"
}

.fa-question-circle-o:before {
    content: "\f29c"
}

.fa-blind:before {
    content: "\f29d"
}

.fa-audio-description:before {
    content: "\f29e"
}

.fa-volume-control-phone:before {
    content: "\f2a0"
}

.fa-braille:before {
    content: "\f2a1"
}

.fa-assistive-listening-systems:before {
    content: "\f2a2"
}

.fa-american-sign-language-interpreting:before,
.fa-asl-interpreting:before {
    content: "\f2a3"
}

.fa-deaf:before,
.fa-deafness:before,
.fa-hard-of-hearing:before {
    content: "\f2a4"
}

.fa-glide:before {
    content: "\f2a5"
}

.fa-glide-g:before {
    content: "\f2a6"
}

.fa-sign-language:before,
.fa-signing:before {
    content: "\f2a7"
}

.fa-low-vision:before {
    content: "\f2a8"
}

.fa-viadeo:before {
    content: "\f2a9"
}

.fa-viadeo-square:before {
    content: "\f2aa"
}

.fa-snapchat:before {
    content: "\f2ab"
}

.fa-snapchat-ghost:before {
    content: "\f2ac"
}

.fa-snapchat-square:before {
    content: "\f2ad"
}

.fa-pied-piper:before {
    content: "\f2ae"
}

.fa-first-order:before {
    content: "\f2b0"
}

.fa-yoast:before {
    content: "\f2b1"
}

.fa-themeisle:before {
    content: "\f2b2"
}

.fa-google-plus-circle:before,
.fa-google-plus-official:before {
    content: "\f2b3"
}

.fa-fa:before,
.fa-font-awesome:before {
    content: "\f2b4"
}

.fa-handshake-o:before {
    content: "\f2b5"
}

.fa-envelope-open:before {
    content: "\f2b6"
}

.fa-envelope-open-o:before {
    content: "\f2b7"
}

.fa-linode:before {
    content: "\f2b8"
}

.fa-address-book:before {
    content: "\f2b9"
}

.fa-address-book-o:before {
    content: "\f2ba"
}

.fa-address-card:before,
.fa-vcard:before {
    content: "\f2bb"
}

.fa-address-card-o:before,
.fa-vcard-o:before {
    content: "\f2bc"
}

.fa-user-circle:before {
    content: "\f2bd"
}

.fa-user-circle-o:before {
    content: "\f2be"
}

.fa-user-o:before {
    content: "\f2c0"
}

.fa-id-badge:before {
    content: "\f2c1"
}

.fa-drivers-license:before,
.fa-id-card:before {
    content: "\f2c2"
}

.fa-drivers-license-o:before,
.fa-id-card-o:before {
    content: "\f2c3"
}

.fa-quora:before {
    content: "\f2c4"
}

.fa-free-code-camp:before {
    content: "\f2c5"
}

.fa-telegram:before {
    content: "\f2c6"
}

.fa-thermometer-4:before,
.fa-thermometer-full:before,
.fa-thermometer:before {
    content: "\f2c7"
}

.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
    content: "\f2c8"
}

.fa-thermometer-2:before,
.fa-thermometer-half:before {
    content: "\f2c9"
}

.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
    content: "\f2ca"
}

.fa-thermometer-0:before,
.fa-thermometer-empty:before {
    content: "\f2cb"
}

.fa-shower:before {
    content: "\f2cc"
}

.fa-bath:before,
.fa-bathtub:before,
.fa-s15:before {
    content: "\f2cd"
}

.fa-podcast:before {
    content: "\f2ce"
}

.fa-window-maximize:before {
    content: "\f2d0"
}

.fa-window-minimize:before {
    content: "\f2d1"
}

.fa-window-restore:before {
    content: "\f2d2"
}

.fa-times-rectangle:before,
.fa-window-close:before {
    content: "\f2d3"
}

.fa-times-rectangle-o:before,
.fa-window-close-o:before {
    content: "\f2d4"
}

.fa-bandcamp:before {
    content: "\f2d5"
}

.fa-grav:before {
    content: "\f2d6"
}

.fa-etsy:before {
    content: "\f2d7"
}

.fa-imdb:before {
    content: "\f2d8"
}

.fa-ravelry:before {
    content: "\f2d9"
}

.fa-eercast:before {
    content: "\f2da"
}

.fa-microchip:before {
    content: "\f2db"
}

.fa-snowflake-o:before {
    content: "\f2dc"
}

.fa-superpowers:before {
    content: "\f2dd"
}

.fa-wpexplorer:before {
    content: "\f2de"
}

.fa-meetup:before {
    content: "\f2e0"
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}

@font-face {
    font-family: devicon;
    src: url(../fonts/devicon.eot?-hdf3wh);
    src: url(../fonts/devicon.eot?#iefix-hdf3wh) format("embedded-opentype"), url(../fonts/devicon.woff?-hdf3wh) format("woff"), url(../fonts/devicon.ttf?-hdf3wh) format("truetype"), url(../fonts/devicon.svg?-hdf3wh#devicon) format("svg");
    font-weight: 400;
    font-style: normal
}

[class*=" devicon-"],
[class^=devicon-] {
    font-family: devicon;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.devicon-express-original-wordmark:before {
    content: "\e93c"
}

.devicon-express-original:before {
    content: "\e93d"
}

.devicon-devicon-plain-wordmark:before {
    content: "\e93a"
}

.devicon-devicon-plain:before {
    content: "\e93b"
}

.devicon-intellij-plain-wordmark:before {
    content: "\e932"
}

.devicon-intellij-plain:before {
    content: "\e933"
}

.devicon-pycharm-plain-wordmark:before {
    content: "\e934"
}

.devicon-pycharm-plain:before {
    content: "\e935"
}

.devicon-rubymine-plain-wordmark:before {
    content: "\e936"
}

.devicon-rubymine-plain:before {
    content: "\e937"
}

.devicon-webstorm-plain-wordmark:before {
    content: "\e938"
}

.devicon-webstorm-plain:before {
    content: "\e939"
}

.devicon-tomcat-line-wordmark:before {
    content: "\e92c"
}

.devicon-tomcat-line:before {
    content: "\e92d"
}

.devicon-vuejs-line-wordmark:before {
    content: "\e92e"
}

.devicon-vuejs-line:before {
    content: "\e92f"
}

.devicon-vuejs-plain-wordmark:before {
    content: "\e930"
}

.devicon-vuejs-plain:before {
    content: "\e931"
}

.devicon-swift-plain-wordmark:before {
    content: "\e92a"
}

.devicon-swift-plain:before {
    content: "\e92b"
}

.devicon-webpack-plain-wordmark:before {
    content: "\e928"
}

.devicon-webpack-plain:before {
    content: "\e929"
}

.devicon-visualstudio-plain-wordmark:before {
    content: "\e926"
}

.devicon-visualstudio-plain:before {
    content: "\e927"
}

.devicon-slack-plain-wordmark:before {
    content: "\e924"
}

.devicon-slack-plain:before {
    content: "\e925"
}

.devicon-facebook-original:before,
.devicon-facebook-plain:before {
    content: "\e91c"
}

.devicon-typescript-original:before,
.devicon-typescript-plain:before {
    content: "\e920"
}

.devicon-babel-original:before,
.devicon-babel-plain:before {
    content: "\e921"
}

.devicon-mocha-plain:before {
    content: "\e919"
}

.devicon-jasmine-plain-wordmark:before {
    content: "\e91b"
}

.devicon-jasmine-plain:before {
    content: "\e91a"
}

.devicon-gatling-plain-wordmark:before {
    content: "\e918"
}

.devicon-gatling-plain:before {
    content: "\e917"
}

.devicon-ssh-original-wordmark:before,
.devicon-ssh-plain-wordmark:before {
    content: "\e916"
}

.devicon-ssh-original:before,
.devicon-ssh-plain:before {
    content: "\e915"
}

.devicon-sourcetree-original-wordmark:before,
.devicon-sourcetree-plain-wordmark:before {
    content: "\e914"
}

.devicon-sourcetree-original:before,
.devicon-sourcetree-plain:before {
    content: "\e913"
}

.devicon-phpstorm-plain-wordmark:before {
    content: "\e912"
}

.devicon-phpstorm-plain:before {
    content: "\e911"
}

.devicon-protractor-plain-wordmark:before {
    content: "\e901"
}

.devicon-protractor-plain:before {
    content: "\e900"
}

.devicon-gradle-plain-wordmark:before {
    content: "\e8f1"
}

.devicon-gradle-plain:before {
    content: "\e902"
}

.devicon-cucumber-plain-wordmark:before {
    content: "\e905"
}

.devicon-cucumber-plain:before {
    content: "\e904"
}

.devicon-jeet-plain-wordmark:before {
    content: "\e906"
}

.devicon-jeet-plain:before {
    content: "\e903"
}

.devicon-gitlab-plain-wordmark:before {
    content: "\e908"
}

.devicon-gitlab-plain:before {
    content: "\e907"
}

.devicon-github-original-wordmark:before,
.devicon-github-plain-wordmark:before {
    content: "\e90a"
}

.devicon-github-original:before,
.devicon-github-plain:before {
    content: "\e909"
}

.devicon-d3js-plain:before {
    content: "\e90c"
}

.devicon-confluence-original-wordmark:before,
.devicon-confluence-plain-wordmark:before {
    content: "\e90e"
}

.devicon-confluence-original:before,
.devicon-confluence-plain:before {
    content: "\e90d"
}

.devicon-bitbucket-original-wordmark:before,
.devicon-bitbucket-plain-wordmark:before {
    content: "\e910"
}

.devicon-bitbucket-original:before,
.devicon-bitbucket-plain:before {
    content: "\e90f"
}

.devicon-safari-line-wordmark:before {
    content: "\e632"
}

.devicon-safari-line:before {
    content: "\e63a"
}

.devicon-safari-plain-wordmark:before {
    content: "\e63b"
}

.devicon-safari-plain:before {
    content: "\e63c"
}

.devicon-jetbrains-line-wordmark:before,
.devicon-jetbrains-line:before,
.devicon-jetbrains-plain-wordmark:before,
.devicon-jetbrains-plain:before {
    content: "\e63d"
}

.devicon-django-line-wordmark:before,
.devicon-django-line:before {
    content: "\e63e"
}

.devicon-django-plain-wordmark:before,
.devicon-django-plain:before {
    content: "\e63f"
}

.devicon-gimp-plain:before {
    content: "\e633"
}

.devicon-redhat-plain-wordmark:before {
    content: "\e62a"
}

.devicon-redhat-plain:before {
    content: "\e62b"
}

.devicon-cplusplus-line-wordmark:before,
.devicon-cplusplus-line:before {
    content: "\e634"
}

.devicon-cplusplus-plain-wordmark:before,
.devicon-cplusplus-plain:before {
    content: "\e635"
}

.devicon-csharp-line-wordmark:before,
.devicon-csharp-line:before {
    content: "\e636"
}

.devicon-csharp-plain-wordmark:before,
.devicon-csharp-plain:before {
    content: "\e637"
}

.devicon-c-line-wordmark:before,
.devicon-c-line:before {
    content: "\e638"
}

.devicon-c-plain-wordmark:before,
.devicon-c-plain:before {
    content: "\e639"
}

.devicon-nodewebkit-line-wordmark:before {
    content: "\e611"
}

.devicon-nodewebkit-line:before {
    content: "\e612"
}

.devicon-nodewebkit-plain-wordmark:before {
    content: "\e613"
}

.devicon-nodewebkit-plain:before {
    content: "\e614"
}

.devicon-nginx-original-wordmark:before,
.devicon-nginx-original:before,
.devicon-nginx-plain-wordmark:before,
.devicon-nginx-plain:before {
    content: "\e615"
}

.devicon-erlang-plain-wordmark:before {
    content: "\e616"
}

.devicon-erlang-plain:before {
    content: "\e617"
}

.devicon-doctrine-line-wordmark:before {
    content: "\e618"
}

.devicon-doctrine-line:before {
    content: "\e619"
}

.devicon-doctrine-plain-wordmark:before {
    content: "\e61a"
}

.devicon-doctrine-plain:before {
    content: "\e625"
}

.devicon-apache-line-wordmark:before {
    content: "\e626"
}

.devicon-apache-line:before {
    content: "\e627"
}

.devicon-apache-plain-wordmark:before {
    content: "\e628"
}

.devicon-apache-plain:before {
    content: "\e629"
}

.devicon-go-line:before {
    content: "\e610"
}

.devicon-redis-plain-wordmark:before {
    content: "\e606"
}

.devicon-redis-plain:before {
    content: "\e607"
}

.devicon-meteor-plain-wordmark:before {
    content: "\e608"
}

.devicon-meteor-plain:before {
    content: "\e609"
}

.devicon-heroku-line-wordmark:before,
.devicon-heroku-original-wordmark:before {
    content: "\e60a"
}

.devicon-heroku-line:before,
.devicon-heroku-original:before {
    content: "\e60b"
}

.devicon-heroku-plain-wordmark:before {
    content: "\e60c"
}

.devicon-heroku-plain:before {
    content: "\e60f"
}

.devicon-go-plain:before {
    content: "\e61b"
}

.devicon-docker-plain-wordmark:before {
    content: "\e61e"
}

.devicon-docker-plain:before {
    content: "\e61f"
}

.devicon-amazonwebservices-original:before,
.devicon-amazonwebservices-plain:before {
    content: "\e603"
}

.devicon-amazonwebservices-plain-wordmark:before {
    content: "\e604"
}

.devicon-android-plain-wordmark:before {
    content: "\e60d"
}

.devicon-android-plain:before {
    content: "\e60e"
}

.devicon-angularjs-plain-wordmark:before {
    content: "\e61c"
}

.devicon-angularjs-plain:before {
    content: "\e61d"
}

.devicon-appcelerator-original:before,
.devicon-appcelerator-plain:before {
    content: "\e620"
}

.devicon-appcelerator-plain-wordmark:before {
    content: "\e621"
}

.devicon-apple-original:before,
.devicon-apple-plain:before {
    content: "\e622"
}

.devicon-atom-original-wordmark:before,
.devicon-atom-plain-wordmark:before {
    content: "\e623"
}

.devicon-atom-original:before,
.devicon-atom-plain:before {
    content: "\e624"
}

.devicon-backbonejs-plain-wordmark:before {
    content: "\e62c"
}

.devicon-backbonejs-plain:before {
    content: "\e62d"
}

.devicon-bootstrap-plain-wordmark:before {
    content: "\e62e"
}

.devicon-bootstrap-plain:before {
    content: "\e62f"
}

.devicon-bower-line-wordmark:before {
    content: "\e630"
}

.devicon-bower-line:before {
    content: "\e631"
}

.devicon-bower-plain-wordmark:before {
    content: "\e64e"
}

.devicon-bower-plain:before {
    content: "\e64f"
}

.devicon-chrome-plain-wordmark:before {
    content: "\e665"
}

.devicon-chrome-plain:before {
    content: "\e666"
}

.devicon-codeigniter-plain-wordmark:before {
    content: "\e667"
}

.devicon-codeigniter-plain:before {
    content: "\e668"
}

.devicon-coffeescript-original-wordmark:before,
.devicon-coffeescript-plain-wordmark:before {
    content: "\e669"
}

.devicon-coffeescript-original:before,
.devicon-coffeescript-plain:before {
    content: "\e66a"
}

.devicon-css3-plain-wordmark:before {
    content: "\e678"
}

.devicon-css3-plain:before {
    content: "\e679"
}

.devicon-debian-plain-wordmark:before {
    content: "\e67e"
}

.devicon-debian-plain:before {
    content: "\e67f"
}

.devicon-dot-net-plain-wordmark:before {
    content: "\e6d3"
}

.devicon-dot-net-plain:before {
    content: "\e6d4"
}

.devicon-drupal-plain-wordmark:before {
    content: "\e6e2"
}

.devicon-drupal-plain:before {
    content: "\e6e3"
}

.devicon-firefox-plain-wordmark:before {
    content: "\e75d"
}

.devicon-firefox-plain:before {
    content: "\e75e"
}

.devicon-foundation-plain-wordmark:before {
    content: "\e7a2"
}

.devicon-foundation-plain:before {
    content: "\e7a3"
}

.devicon-git-plain-wordmark:before {
    content: "\e7a7"
}

.devicon-git-plain:before {
    content: "\e7a8"
}

.devicon-google-original-wordmark:before,
.devicon-google-plain-wordmark:before {
    content: "\e91d"
}

.devicon-google-original:before,
.devicon-google-plain:before {
    content: "\e91e"
}

.devicon-grunt-line-wordmark:before {
    content: "\e7a9"
}

.devicon-grunt-line:before {
    content: "\e7aa"
}

.devicon-grunt-plain-wordmark:before {
    content: "\e7ea"
}

.devicon-grunt-plain:before {
    content: "\e7eb"
}

.devicon-gulp-plain:before {
    content: "\e7ec"
}

.devicon-html5-plain-wordmark:before {
    content: "\e7f6"
}

.devicon-html5-plain:before {
    content: "\e7f7"
}

.devicon-ie10-original:before,
.devicon-ie10-plain:before {
    content: "\e7f8"
}

.devicon-illustrator-line:before {
    content: "\e7f9"
}

.devicon-illustrator-plain:before {
    content: "\e7fa"
}

.devicon-inkscape-plain-wordmark:before {
    content: "\e834"
}

.devicon-inkscape-plain:before {
    content: "\e835"
}

.devicon-java-plain-wordmark:before {
    content: "\e841"
}

.devicon-java-plain:before {
    content: "\e842"
}

.devicon-javascript-plain:before {
    content: "\e845"
}

.devicon-jquery-plain-wordmark:before {
    content: "\e849"
}

.devicon-jquery-plain:before {
    content: "\e84a"
}

.devicon-krakenjs-plain-wordmark:before {
    content: "\e84f"
}

.devicon-krakenjs-plain:before {
    content: "\e850"
}

.devicon-laravel-plain-wordmark:before {
    content: "\e851"
}

.devicon-laravel-plain:before {
    content: "\e852"
}

.devicon-less-plain-wordmark:before {
    content: "\e853"
}

.devicon-linux-plain:before {
    content: "\eb1c"
}

.devicon-mongodb-plain-wordmark:before {
    content: "\eb43"
}

.devicon-mongodb-plain:before {
    content: "\eb44"
}

.devicon-moodle-plain-wordmark:before {
    content: "\eb5a"
}

.devicon-moodle-plain:before {
    content: "\eb5b"
}

.devicon-mysql-plain-wordmark:before {
    content: "\eb60"
}

.devicon-mysql-plain:before {
    content: "\eb61"
}

.devicon-nodejs-plain-wordmark:before {
    content: "\eb69"
}

.devicon-nodejs-plain:before {
    content: "\eb6a"
}

.devicon-oracle-original:before,
.devicon-oracle-plain:before {
    content: "\eb6b"
}

.devicon-photoshop-line:before {
    content: "\eb6c"
}

.devicon-photoshop-plain:before {
    content: "\eb6d"
}

.devicon-php-plain:before {
    content: "\eb71"
}

.devicon-postgresql-plain-wordmark:before {
    content: "\eb7c"
}

.devicon-postgresql-plain:before {
    content: "\eb7d"
}

.devicon-python-plain-wordmark:before {
    content: "\eb88"
}

.devicon-python-plain:before {
    content: "\eb89"
}

.devicon-rails-plain-wordmark:before {
    content: "\eba2"
}

.devicon-rails-plain:before {
    content: "\eba3"
}

.devicon-react-original-wordmark:before,
.devicon-react-plain-wordmark:before {
    content: "\e600"
}

.devicon-react-original:before,
.devicon-react-plain:before {
    content: "\e601"
}

.devicon-ruby-plain-wordmark:before {
    content: "\ebc9"
}

.devicon-ruby-plain:before {
    content: "\ebca"
}

.devicon-sass-original:before,
.devicon-sass-plain:before {
    content: "\ebcb"
}

.devicon-sequelize-original-wordmark:before,
.devicon-sequelize-plain-wordmark:before {
    content: "\e922"
}

.devicon-sequelize-original:before,
.devicon-sequelize-plain:before {
    content: "\e923"
}

.devicon-symfony-original-wordmark:before,
.devicon-symfony-plain-wordmark:before {
    content: "\e602"
}

.devicon-symfony-original:before,
.devicon-symfony-plain:before {
    content: "\e605"
}

.devicon-travis-plain-wordmark:before {
    content: "\ebcc"
}

.devicon-travis-plain:before {
    content: "\ebcd"
}

.devicon-trello-plain-wordmark:before {
    content: "\ebce"
}

.devicon-trello-plain:before {
    content: "\ebcf"
}

.devicon-twitter-original:before,
.devicon-twitter-plain:before {
    content: "\e91f"
}

.devicon-ubuntu-plain-wordmark:before {
    content: "\ebd0"
}

.devicon-ubuntu-plain:before {
    content: "\ebd1"
}

.devicon-vim-plain:before {
    content: "\ebf3"
}

.devicon-windows8-original-wordmark:before,
.devicon-windows8-plain-wordmark:before {
    content: "\ebf4"
}

.devicon-windows8-original:before,
.devicon-windows8-plain:before {
    content: "\ebf5"
}

.devicon-wordpress-plain-wordmark:before {
    content: "\ebfd"
}

.devicon-wordpress-plain:before {
    content: "\ebfe"
}

.devicon-yii-plain-wordmark:before {
    content: "\ec01"
}

.devicon-yii-plain:before {
    content: "\ec02"
}

.devicon-zend-plain-wordmark:before {
    content: "\ec03"
}

.devicon-zend-plain:before {
    content: "\ec04"
}

.devicon-express-original-wordmark.colored,
.devicon-express-original.colored {
    color: #444
}

.devicon-devicon-plain-wordmark.colored,
.devicon-devicon-plain.colored {
    color: #60be86
}

.devicon-intellij-plain-wordmark.colored,
.devicon-intellij-plain.colored {
    color: #136ba2
}

.devicon-pycharm-plain-wordmark.colored,
.devicon-pycharm-plain.colored {
    color: #4d8548
}

.devicon-rubymine-plain-wordmark.colored,
.devicon-rubymine-plain.colored {
    color: #c12c4c
}

.devicon-webstorm-plain-wordmark.colored,
.devicon-webstorm-plain.colored {
    color: #2788b5
}

.devicon-tomcat-line-wordmark.colored,
.devicon-tomcat-line.colored {
    color: #d1a41a
}

.devicon-vuejs-line-wordmark.colored,
.devicon-vuejs-line.colored,
.devicon-vuejs-plain-wordmark.colored,
.devicon-vuejs-plain.colored {
    color: #41b883
}

.devicon-swift-plain-wordmark.colored,
.devicon-swift-plain.colored {
    color: #f05138
}

.devicon-webpack-plain-wordmark.colored,
.devicon-webpack-plain.colored {
    color: #1c78c0
}

.devicon-visualstudio-plain-wordmark.colored,
.devicon-visualstudio-plain.colored {
    color: #68217a
}

.devicon-slack-plain-wordmark.colored,
.devicon-slack-plain.colored {
    color: #2d333a
}

.devicon-gatling-plain-wordmark.colored,
.devicon-gatling-plain.colored {
    color: #e77500
}

.devicon-ssh-original-wordmark.colored,
.devicon-ssh-original.colored,
.devicon-ssh-plain-wordmark.colored,
.devicon-ssh-plain.colored {
    color: #231f20
}

.devicon-sourcetree-original-wordmark.colored,
.devicon-sourcetree-original.colored,
.devicon-sourcetree-plain-wordmark.colored,
.devicon-sourcetree-plain.colored {
    color: #205081
}

.devicon-phpstorm-plain-wordmark.colored,
.devicon-phpstorm-plain.colored {
    color: #5058a6
}

.devicon-protractor-plain-wordmark.colored,
.devicon-protractor-plain.colored {
    color: #b7111d
}

.devicon-cucumber-plain-wordmark.colored,
.devicon-cucumber-plain.colored {
    color: #00a818
}

.devicon-gradle-plain-wordmark.colored,
.devicon-gradle-plain.colored {
    color: #02303a
}

.devicon-jeet-plain-wordmark.colored,
.devicon-jeet-plain.colored {
    color: #ff664a
}

.devicon-gitlab-plain-wordmark.colored,
.devicon-gitlab-plain.colored {
    color: #e24329
}

.devicon-github-original-wordmark.colored,
.devicon-github-original.colored,
.devicon-github-plain-wordmark.colored,
.devicon-github-plain.colored {
    color: #181616
}

.devicon-d3js-plain.colored {
    color: #f7974e
}

.devicon-bitbucket-original-wordmark.colored,
.devicon-bitbucket-original.colored,
.devicon-bitbucket-plain-wordmark.colored,
.devicon-bitbucket-plain.colored,
.devicon-confluence-original-wordmark.colored,
.devicon-confluence-original.colored,
.devicon-confluence-plain-wordmark.colored,
.devicon-confluence-plain.colored {
    color: #205081
}

.devicon-amazonwebservices-original.colored,
.devicon-amazonwebservices-plain-wordmark.colored,
.devicon-amazonwebservices-plain.colored {
    color: #f7a80d
}

.devicon-android-plain-wordmark.colored,
.devicon-android-plain.colored {
    color: #a4c439
}

.devicon-angularjs-plain-wordmark.colored,
.devicon-angularjs-plain.colored {
    color: #c4473a
}

.devicon-apache-line-wordmark.colored,
.devicon-apache-line.colored,
.devicon-apache-plain-wordmark.colored,
.devicon-apache-plain.colored {
    color: #303284
}

.devicon-appcelerator-original.colored,
.devicon-appcelerator-plain-wordmark.colored,
.devicon-appcelerator-plain.colored {
    color: #ac162c
}

.devicon-apple-original.colored,
.devicon-apple-plain.colored {
    color: #000
}

.devicon-atom-original-wordmark.colored,
.devicon-atom-original.colored,
.devicon-atom-plain-wordmark.colored,
.devicon-atom-plain.colored {
    color: #67595d
}

.devicon-babel-original.colored,
.devicon-babel-plain.colored {
    color: #f9dc3e
}

.devicon-backbonejs-plain-wordmark.colored,
.devicon-backbonejs-plain.colored {
    color: #002a41
}

.devicon-bootstrap-plain-wordmark.colored,
.devicon-bootstrap-plain.colored {
    color: #59407f
}

.devicon-bower-line-wordmark.colored,
.devicon-bower-line.colored,
.devicon-bower-plain-wordmark.colored,
.devicon-bower-plain.colored {
    color: #ef5734
}

.devicon-c-line-wordmark.colored,
.devicon-c-line.colored,
.devicon-c-plain-wordmark.colored,
.devicon-c-plain.colored {
    color: #03599c
}

.devicon-chrome-plain-wordmark.colored,
.devicon-chrome-plain.colored {
    color: #ce4e4e
}

.devicon-codeigniter-plain-wordmark.colored,
.devicon-codeigniter-plain.colored {
    color: #ee4323
}

.devicon-coffeescript-original-wordmark.colored,
.devicon-coffeescript-original.colored,
.devicon-coffeescript-plain-wordmark.colored,
.devicon-coffeescript-plain.colored {
    color: #28334c
}

.devicon-cplusplus-line-wordmark.colored,
.devicon-cplusplus-line.colored,
.devicon-cplusplus-plain-wordmark.colored,
.devicon-cplusplus-plain.colored {
    color: #9c033a
}

.devicon-csharp-line-wordmark.colored,
.devicon-csharp-line.colored,
.devicon-csharp-plain-wordmark.colored,
.devicon-csharp-plain.colored {
    color: #68217a
}

.devicon-css3-plain-wordmark.colored,
.devicon-css3-plain.colored {
    color: #3d8fc6
}

.devicon-debian-plain-wordmark.colored,
.devicon-debian-plain.colored {
    color: #a80030
}

.devicon-django-line-wordmark.colored,
.devicon-django-line.colored,
.devicon-django-plain-wordmark.colored,
.devicon-django-plain.colored {
    color: #003a2b
}

.devicon-docker-plain-wordmark.colored,
.devicon-docker-plain.colored {
    color: #019bc6
}

.devicon-doctrine-line-wordmark.colored,
.devicon-doctrine-line.colored,
.devicon-doctrine-plain-wordmark.colored,
.devicon-doctrine-plain.colored {
    color: #f56d39
}

.devicon-dot-net-plain-wordmark.colored,
.devicon-dot-net-plain.colored {
    color: #1384c8
}

.devicon-drupal-plain-wordmark.colored,
.devicon-drupal-plain.colored {
    color: #0073ba
}

.devicon-erlang-plain-wordmark.colored,
.devicon-erlang-plain.colored {
    color: #a90533
}

.devicon-facebook-original.colored,
.devicon-facebook-plain.colored {
    color: #3d5a98
}

.devicon-firefox-plain-wordmark.colored,
.devicon-firefox-plain.colored {
    color: #dd732a
}

.devicon-foundation-plain-wordmark.colored,
.devicon-foundation-plain.colored {
    color: #008cba
}

.devicon-gimp-plain-wordmark.colored,
.devicon-gimp-plain.colored {
    color: #716955
}

.devicon-git-plain-wordmark.colored,
.devicon-git-plain.colored {
    color: #f34f29
}

.devicon-go-line.colored,
.devicon-go-plain.colored {
    color: #000
}

.devicon-google-original-wordmark.colored,
.devicon-google-original.colored,
.devicon-google-plain-wordmark.colored,
.devicon-google-plain.colored {
    color: #587dbd
}

.devicon-grunt-line-wordmark.colored,
.devicon-grunt-line.colored,
.devicon-grunt-plain-wordmark.colored,
.devicon-grunt-plain.colored {
    color: #fcaa1a
}

.devicon-gulp-plain.colored {
    color: #eb4a4b
}

.devicon-heroku-line-wordmark.colored,
.devicon-heroku-line.colored,
.devicon-heroku-original-wordmark.colored,
.devicon-heroku-original.colored,
.devicon-heroku-plain-wordmark.colored,
.devicon-heroku-plain.colored {
    color: #6762a6
}

.devicon-html5-plain-wordmark.colored,
.devicon-html5-plain.colored {
    color: #e54d26
}

.devicon-ie10-original.colored,
.devicon-ie10-plain.colored {
    color: #1ebbee
}

.devicon-illustrator-line.colored,
.devicon-illustrator-plain.colored {
    color: #faa625
}

.devicon-inkscape-plain-wordmark.colored,
.devicon-inkscape-plain.colored {
    color: #000
}

.devicon-java-plain-wordmark.colored,
.devicon-java-plain.colored {
    color: #ea2d2e
}

.devicon-jasmine-plain-wordmark.colored,
.devicon-jasmine-plain.colored {
    color: #8a4182
}

.devicon-javascript-plain.colored {
    color: #f0db4f
}

.devicon-jetbrains-line-wordmark.colored,
.devicon-jetbrains-line.colored,
.devicon-jetbrains-plain-wordmark.colored,
.devicon-jetbrains-plain.colored {
    color: #f68b1f
}

.devicon-jquery-plain-wordmark.colored,
.devicon-jquery-plain.colored {
    color: #0769ad
}

.devicon-krakenjs-plain-wordmark.colored,
.devicon-krakenjs-plain.colored {
    color: #0081c2
}

.devicon-laravel-plain-wordmark.colored,
.devicon-laravel-plain.colored {
    color: #fd4f31
}

.devicon-less-plain-wordmark.colored {
    color: #2a4d80
}

.devicon-linux-plain.colored {
    color: #000
}

.devicon-meteor-plain-wordmark.colored,
.devicon-meteor-plain.colored {
    color: #df5052
}

.devicon-mocha-plain.colored {
    color: #8d6748
}

.devicon-mongodb-plain-wordmark.colored,
.devicon-mongodb-plain.colored {
    color: #4faa41
}

.devicon-moodle-plain-wordmark.colored,
.devicon-moodle-plain.colored {
    color: #f7931e
}

.devicon-mysql-plain-wordmark.colored,
.devicon-mysql-plain.colored {
    color: #00618a
}

.devicon-nginx-original-wordmark.colored,
.devicon-nginx-original.colored,
.devicon-nginx-plain-wordmark.colored,
.devicon-nginx-plain.colored {
    color: #090
}

.devicon-nodejs-plain-wordmark.colored,
.devicon-nodejs-plain.colored {
    color: #83cd29
}

.devicon-nodewebkit-line-wordmark.colored,
.devicon-nodewebkit-line.colored,
.devicon-nodewebkit-plain-wordmark.colored,
.devicon-nodewebkit-plain.colored {
    color: #3d3b47
}

.devicon-oracle-original.colored,
.devicon-oracle-plain-wordmark.colored,
.devicon-oracle-plain.colored {
    color: #ea1b22
}

.devicon-photoshop-line.colored,
.devicon-photoshop-plain.colored {
    color: #80b5e2
}

.devicon-php-plain.colored {
    color: #6181b6
}

.devicon-postgresql-plain-wordmark.colored,
.devicon-postgresql-plain.colored {
    color: #336791
}

.devicon-python-plain-wordmark.colored,
.devicon-python-plain.colored {
    color: #ffd845
}

.devicon-rails-plain-wordmark.colored,
.devicon-rails-plain.colored {
    color: #a62c46
}

.devicon-ruby-plain-wordmark.colored,
.devicon-ruby-plain.colored {
    color: #d91404
}

.devicon-safari-line-wordmark.colored,
.devicon-safari-line.colored,
.devicon-safari-plain-wordmark.colored,
.devicon-safari-plain.colored {
    color: #1b88ca
}

.devicon-react-original-wordmark.colored,
.devicon-react-original.colored,
.devicon-react-plain-wordmark.colored,
.devicon-react-plain.colored {
    color: #61dafb
}

.devicon-redhat-original-wordmark.colored,
.devicon-redhat-original.colored,
.devicon-redhat-plain-wordmark.colored,
.devicon-redhat-plain.colored {
    color: #e93442
}

.devicon-redis-plain-wordmark.colored,
.devicon-redis-plain.colored {
    color: #d82c20
}

.devicon-sass-original.colored,
.devicon-sass-plain-wordmark.colored,
.devicon-sass-plain.colored {
    color: #c69
}

.devicon-sequelize-original-wordmark.colored,
.devicon-sequelize-original.colored,
.devicon-sequelize-plain-wordmark.colored,
.devicon-sequelize-plain.colored {
    color: #3b4b72
}

.devicon-symfony-original-wordmark.colored,
.devicon-symfony-original.colored,
.devicon-symfony-plain-wordmark.colored,
.devicon-symfony-plain.colored {
    color: #1a171b
}

.devicon-travis-plain-wordmark.colored,
.devicon-travis-plain.colored {
    color: #bb2031
}

.devicon-trello-plain-wordmark.colored,
.devicon-trello-plain.colored {
    color: #23719f
}

.devicon-twitter-original.colored,
.devicon-twitter-plain.colored {
    color: #1da1f2
}

.devicon-typescript-original.colored,
.devicon-typescript-plain.colored {
    color: #007acc
}

.devicon-ubuntu-plain-wordmark.colored,
.devicon-ubuntu-plain.colored {
    color: #dd4814
}

.devicon-vim-plain.colored {
    color: #179a33
}

.devicon-windows8-original-wordmark.colored,
.devicon-windows8-original.colored,
.devicon-windows8-plain-wordmark.colored,
.devicon-windows8-plain.colored {
    color: #00adef
}

.devicon-wordpress-plain-wordmark.colored,
.devicon-wordpress-plain.colored {
    color: #494949
}

.devicon-yii-plain-wordmark.colored,
.devicon-yii-plain.colored {
    color: #0073bb
}

.devicon-zend-plain-wordmark.colored,
.devicon-zend-plain.colored {
    color: #68b604
}

article,
aside,
figcaption,
figure,
footer,
header,
nav,
section {
    display: block
}

h1,
h2,
h3,
h4,
strong {
    margin-top: 1em;
    padding-top: 1em;
    line-height: 1.25;
    color: #333
}

h2 {
    font-size: 2rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1rem
}

ol,
ul {
    padding-left: 40px
}

figure,
ol,
p,
ul {
    margin: 1em 0
}

a img {
    border: 0
}

#particles-js {
    background: #1488CC;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2B32B2, #1488CC);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2B32B2, #1488CC);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    display: flex;
    vertical-align: bottom;
    width: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

#particles-js .particles-js-canvas-el {
    width: 100% !important;
    height: 100vh !important
}

.header {
    z-index: 1;
    text-align: center;
    color: #fff;
    position: absolute;
    font-family: 'Rubik', sans-serif;
    width: 80%;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.header .site-title {
    font-size: 35px;
    display: block;
    line-height: 1;
    color: #fff;
}

@media only screen and (min-width:550px) {
    .header .site-title {
        margin: 0;
        font-size: 100px
    }
}

.header .site-description {
    font-size: 20px;
    display: block;
    line-height: 1;
    color: #fff;
    margin-top: 10px
}

@media only screen and (min-width:550px) {
    .header .site-description {
        font-size: 40px
    }
}

.header-links {
    margin: 10px
}

.header-links .link {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    margin: 10px
}

@media only screen and (min-width:550px) {
    .header-links .link {
        font-size: 20px
    }
}

.header-icons {
    display: flex;
    justify-content: center;
    text-align: center
}

.down,
.header-icons .icon {
    color: #fff;
    text-align: center
}

.header-icons .icon {
    height: 20px;
    padding: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    transition: all .7s;
    width: 20px;
    font-size: 20px;
    margin: 5px
}

.header-icons .icon:active,
.header-icons .icon:hover {
    color: #1488CC;
    background: #fff
}

@media only screen and (min-width:550px) {
    .header-icons .icon {
        width: 35px;
        height: 35px;
        font-size: 35px
    }
}

.down {
    position: absolute;
    bottom: 25px;
    width: 100%;
    margin: 0 auto;
    display: block;
    font-size: 30px;
    cursor: pointer
}

.down .icon {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    fill: #fff;
    -webkit-animation: pulse 1.3s infinite;
    animation: pulse 1.3s infinite
}

.down .icon:active,
.down .icon:hover,
.footer a:active,
.footer a:hover {
    color: #4b5664
}

#about {
    width: 90%;
    margin: 0 auto;
    max-width: 960px
}

@media only screen and (min-width:550px) {
    #about {
        width: 80%
    }
}

.tech {
    margin: 10px
}

.user {
    text-align: center;
    font-size: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.user p {
    font-size: 16px
}

@media only screen and (min-width:550px) {
    .user {
        flex-wrap: nowrap;
        font-size: 75px
    }
}

.user-details {
    text-align: center;
    margin: 5px auto
}

#projects {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 90%;
    max-width: 960px;
    margin: 0 auto
}

@media only screen and (min-width:550px) {
    #projects {
        width: 80%
    }
}

.user-projects {
    margin: 20px auto
}

.user-projects img {
    max-width: 100%;
    height: auto;
    border-radius: 5px
}

.user-projects h5 {
    margin: 0
}

.user-projects li {
    color: #1488CC;
    font-size: 1.1rem
}

.user-projects p {
    margin-right: 5px
}

@media only screen and (min-width:550px) {
    .contents {
        margin-left: 0;
        width: 48%
    }

    .contents,
    .contents-right {
        margin-top: -5%
    }

    .contents-right,
    .images-right {
        float: right;
        width: 48%
    }

    .images-right img {
        float: right
    }

    .images-left {
        float: left;
        width: 48%
    }

    .images-left img {
        float: left
    }
}

.project-link {
    display: inline-block;
    margin: 10px 0;
    padding: 5px;
    color: #1488CC;
    background-color: transparent;
    border: 1px solid #1488CC;
    border-radius: 10px;
    text-align: center;
    outline: 0;
    text-decoration: none;
    cursor: pointer;
    transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out
}

.project-link:active,
.project-link:hover {
    background-color: #5347a8;
    border-color: #5347a8;
    color: #fff;
    transition: color .3s ease-in, background-color .3s ease-in, border-color .3s ease-in
}

.footer {
    background: #1488CC;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2B32B2, #1488CC);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2B32B2, #1488CC);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 10px 0;
    margin-top: 100px;
    text-align: center;
    color: #fff
}

.footer .love {
    color: red
}

.footer a {
    text-decoration: none;
    margin: 0;
    color: #fff
}

Jika sudah buat folder baru didalam folder assets sebelumnya dengan nama js. Lalu bikin file bernama main.js


document.addEventListener("DOMContentLoaded",function(){new SweetScroll({}),particlesJS("particles-js",{particles:{number:{value:30,density:{enable:!0,value_area:800}},color:{value:"#ffffff"},shape:{type:"polygon",stroke:{width:0,color:"#000000"},polygon:{nb_sides:5},image:{src:"img/github.svg",width:100,height:100}},opacity:{value:.5,random:!1,anim:{enable:!1,speed:1,opacity_min:.1,sync:!1}},size:{value:3,random:!0,anim:{enable:!1,speed:19.18081918081918,size_min:.1,sync:!1}},line_linked:{enable:!0,distance:150,color:"#ffffff",opacity:.4,width:1},move:{enable:!0,speed:4,direction:"none",random:!0,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:600,rotateY:1200}},nb:80},interactivity:{detect_on:"canvas",events:{onhover:{enable:!1,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:400,line_linked:{opacity:1}},bubble:{distance:400,size:40,duration:2,opacity:8,speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}}},retina_detect:!0})},!1);


Begitulah kira kira cara membuat situs web portfolio. Jika kamu ingin mendownload filenya bisa download di bawah ini

See Also :