#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%);
"
/>
<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%);
"
/>
<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%);
"
/>
<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%);
"
/>
<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%);
"
/>
<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>© 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
Posting Komentar
image quote pre code