commit
04a8404802
@ -0,0 +1 @@ |
||||
.idea |
@ -0,0 +1,709 @@ |
||||
/* |
||||
* Template Name: Developer - Responsive Website Template for Developers |
||||
* Version: 1.0 |
||||
* Author: 3rd Wave Media |
||||
* Twitter: @3rdwave_themes |
||||
* License: Creative Commons Attribution 3.0 License |
||||
* Website: http://themes.3rdwavemedia.com/ |
||||
* |
||||
* Grav Template Version |
||||
* Version: 2.0 |
||||
* Author: NunoPress LLC |
||||
* Website: https://nunopress.com |
||||
*/ |
||||
|
||||
/* ======= Base ======= */ |
||||
body { |
||||
font-family: 'Lato', arial, sans-serif; |
||||
color: #434343; |
||||
background: #dae3e7; |
||||
font-size: 16px; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 { |
||||
font-family: 'Montserrat', sans-serif; |
||||
font-weight: 700; |
||||
color: #778492; |
||||
} |
||||
a { |
||||
color: #3aaa64; |
||||
-webkit-transition: all 0.4s ease-in-out; |
||||
-moz-transition: all 0.4s ease-in-out; |
||||
-ms-transition: all 0.4s ease-in-out; |
||||
-o-transition: all 0.4s ease-in-out; |
||||
} |
||||
a:hover { |
||||
text-decoration: underline; |
||||
color: #5f6b77; |
||||
color: #2d844e; |
||||
} |
||||
.btn, |
||||
a.btn { |
||||
-webkit-transition: all 0.4s ease-in-out; |
||||
-moz-transition: all 0.4s ease-in-out; |
||||
-ms-transition: all 0.4s ease-in-out; |
||||
-o-transition: all 0.4s ease-in-out; |
||||
font-family: 'Montserrat', arial, sans-serif; |
||||
padding: 8px 16px; |
||||
font-weight: bold; |
||||
} |
||||
.btn .fa, |
||||
a.btn .fa { |
||||
margin-right: 5px; |
||||
} |
||||
.btn:focus, |
||||
a.btn:focus { |
||||
color: #fff; |
||||
} |
||||
a.btn-cta-primary, |
||||
.btn-cta-primary { |
||||
background: #54ba4e; |
||||
border: 1px solid #54ba4e; |
||||
color: #fff; |
||||
font-weight: 600; |
||||
text-transform: uppercase; |
||||
} |
||||
a.btn-cta-primary:hover, |
||||
.btn-cta-primary:hover { |
||||
background: #49ac43; |
||||
border: 1px solid #49ac43; |
||||
color: #fff; |
||||
} |
||||
a.btn-cta-secondary, |
||||
.btn-cta-secondary { |
||||
background: #479fc8; |
||||
border: 1px solid #479fc8; |
||||
color: #fff; |
||||
font-weight: 600; |
||||
text-transform: uppercase; |
||||
} |
||||
a.btn-cta-secondary:hover, |
||||
.btn-cta-secondary:hover { |
||||
background: #3893bd; |
||||
border: 1px solid #3893bd; |
||||
color: #fff; |
||||
} |
||||
.text-highlight { |
||||
color: #32383e; |
||||
} |
||||
.label-theme { |
||||
background: #3aaa64; |
||||
font-size: 12px; |
||||
} |
||||
a.dotted-link { |
||||
border-bottom: 1px dotted #778492; |
||||
color: #778492; |
||||
} |
||||
a.dotted-link:hover { |
||||
text-decoration: none; |
||||
color: #49515a; |
||||
} |
||||
/* |
||||
iframe { |
||||
.header { |
||||
padding: 0; |
||||
} |
||||
} |
||||
.iframe-wrapper { |
||||
overflow: auto; |
||||
-webkit-overflow-scrolling:touch; |
||||
} |
||||
*/ |
||||
|
||||
/* ======= Images ======= */ |
||||
img.circle { |
||||
border-radius: 50%; |
||||
} |
||||
img.rounded { |
||||
border-radius: 10%; |
||||
} |
||||
img.drop { |
||||
border-radius: 50% 50% 50% 10%; |
||||
} |
||||
|
||||
/* ======= Header ======= */ |
||||
.header { |
||||
padding: 30px 0; |
||||
background: #f5f5f5; |
||||
border-top: 10px solid #778492; |
||||
} |
||||
.header .btn { |
||||
margin-top: 60px; |
||||
font-weight: bold; |
||||
} |
||||
.header .profile-image { |
||||
margin-right: 30px; |
||||
} |
||||
.header .profile-content { |
||||
display: inline-block; |
||||
margin-right: 30px; |
||||
} |
||||
.header .profile-content .name { |
||||
color: #49515a; |
||||
font-size: 38px; |
||||
margin-bottom: 5px; |
||||
margin-top: 30px; |
||||
} |
||||
.header .profile-content .desc { |
||||
color: #778492; |
||||
font-family: "Lato", arial, sans-serif; |
||||
font-weight: 400; |
||||
font-size: 24px; |
||||
margin-top: 0; |
||||
margin-bottom: 15px; |
||||
} |
||||
.header .profile-content .social a { |
||||
width: 36px; |
||||
height: 36px; |
||||
display: inline-block; |
||||
color: #bcd; |
||||
text-align: center; |
||||
} |
||||
.header .profile-content .social a:hover { |
||||
color: #456; |
||||
} |
||||
.header .profile-content .social a .fa { |
||||
font-size: 20px; |
||||
padding-top: 8px; |
||||
} |
||||
.header .profile-bio { |
||||
width: 20em; |
||||
display: inline-block; |
||||
} |
||||
.header .profile-bio .biography { |
||||
text-align: center; |
||||
color: #778492; |
||||
} |
||||
|
||||
/* ======= Language ======= */ |
||||
.lang-dropdown { |
||||
position: absolute; |
||||
left: 90%; |
||||
} |
||||
.current-lang { |
||||
color: #778492; |
||||
} |
||||
.lang-dropdown-menu { |
||||
display: none; |
||||
background-color: #fcfcfc; |
||||
border-style: solid; |
||||
border-width: 1px; |
||||
border-radius: 15%; |
||||
border-color: #aab7c5; |
||||
border-radius: 15%; |
||||
} |
||||
.lang-dropdown-menu ul { |
||||
list-style-type: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
.lang-dropdown-menu li{ |
||||
padding: 0; |
||||
margin: 0; |
||||
border-radius: 15%; |
||||
} |
||||
.lang-dropdown-menu a { |
||||
color: #778492; |
||||
text-decoration: none; |
||||
padding: 10px 30px; |
||||
} |
||||
.lang-dropdown-menu li:hover {background: #e4e4e4;} |
||||
.lang-dropdown:hover .lang-dropdown-menu {display: block;} |
||||
|
||||
/* ======= Top Menu ======= */ |
||||
.topmenu { |
||||
background: #f5f5f5; |
||||
position: relative; |
||||
z-index: 7; |
||||
} |
||||
.sticky { |
||||
position: fixed; |
||||
top: 0; |
||||
width: 100%; |
||||
} |
||||
.sticky + .content { |
||||
padding-top: 150px; |
||||
} |
||||
.navbar { |
||||
margin: 0; |
||||
height: 1em; |
||||
float: right; |
||||
} |
||||
.navbar ul { |
||||
list-style-type: none; |
||||
float: right; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
.navbar li { |
||||
float: left; |
||||
} |
||||
.navbar li a { |
||||
display: inline-block; |
||||
margin: 10px; |
||||
color: #778492; |
||||
} |
||||
.logo { |
||||
float: left !important; |
||||
} |
||||
.hidden { |
||||
display: none; |
||||
} |
||||
.mobile-menu { |
||||
display: none; |
||||
float: right; |
||||
} |
||||
.button_container { |
||||
height: 40px; |
||||
width: 40px; |
||||
} |
||||
.hamburger { |
||||
display:block; |
||||
width: 100%; |
||||
height: 4px; |
||||
border-radius: 15%; |
||||
background: #778492; |
||||
transition: all .35s ease; |
||||
} |
||||
.top { |
||||
margin-top: 8px; |
||||
} |
||||
.middle { |
||||
margin-top: 6px; |
||||
} |
||||
.bottom { |
||||
margin-top: 6px; |
||||
} |
||||
.button_container.active .top{ |
||||
transform: translateY(10px) rotate(45deg); |
||||
background: #aab7c5; |
||||
} |
||||
.button_container.active .middle { |
||||
opacity: 0; |
||||
} |
||||
.button_container.active .bottom { |
||||
transform: translateY(-10px) rotate(-45deg); |
||||
background: #aab7c5; |
||||
} |
||||
.overlay { |
||||
position: fixed; |
||||
display: none; |
||||
width: 100%; |
||||
height: 100%; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
background-color: rgba(0,0,0,0.8); |
||||
z-index: 5; |
||||
} |
||||
.overlay.open { |
||||
display: block; |
||||
} |
||||
.overlay-menu { |
||||
position: relative; |
||||
top: 50px; |
||||
} |
||||
.tree { |
||||
list-style-type: none; |
||||
} |
||||
.overlay.open .topmenu { |
||||
position: fixed; |
||||
top: 0; |
||||
} |
||||
|
||||
/* ======= Sections======= */ |
||||
.sections-wrapper { |
||||
padding-top: 60px; |
||||
padding-bottom: 60px; |
||||
} |
||||
.section { |
||||
margin-bottom: 30px; |
||||
} |
||||
.section .section-inner { |
||||
background: #fff; |
||||
padding: 30px; |
||||
} |
||||
.section .heading { |
||||
margin-top: 0; |
||||
margin-bottom: 30px; |
||||
color: #545e69; |
||||
font-size: 24px; |
||||
} |
||||
.section .content .more-link .fa { |
||||
margin-right: 5px; |
||||
font-size: 14px; |
||||
} |
||||
/* About Section */ |
||||
/* Latest Section */ |
||||
.latest .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.latest .item .title { |
||||
font-size: 18px; |
||||
margin-top: 0; |
||||
} |
||||
.latest .item .title .label { |
||||
margin-left: 5px; |
||||
font-size: 12px; |
||||
} |
||||
.latest .item .title a { |
||||
color: #778492; |
||||
} |
||||
.latest .item .title a:hover { |
||||
color: #5f6b77; |
||||
} |
||||
.latest .item .project-image:hover { |
||||
-webkit-opacity: 0.8; |
||||
-moz-opacity: 0.8; |
||||
opacity: 0.8; |
||||
} |
||||
.latest .divider { |
||||
margin-bottom: 60px; |
||||
} |
||||
.latest .featured { |
||||
margin-bottom: 60px; |
||||
} |
||||
.latest .featured .title { |
||||
margin-bottom: 5px; |
||||
font-size: 20px; |
||||
} |
||||
.latest .featured .summary { |
||||
margin-bottom: 30px; |
||||
color: #778492; |
||||
} |
||||
.latest .featured img { |
||||
margin-bottom: 30px; |
||||
} |
||||
.latest .featured .desc { |
||||
margin-bottom: 30px; |
||||
} |
||||
.latest .featured-image { |
||||
position: relative; |
||||
} |
||||
.latest .featured-image .text { |
||||
background: #3aaa64; |
||||
color: #fff; |
||||
} |
||||
.latest .featured-image .ribbon { |
||||
position: absolute; |
||||
top: -4px; |
||||
right: -4px; |
||||
width: 110px; |
||||
height: 110px; |
||||
overflow: hidden; |
||||
} |
||||
.latest .featured-image .ribbon .text { |
||||
font-family: 'Montserrat', sans-serif; |
||||
position: relative; |
||||
left: -8px; |
||||
top: 18px; |
||||
width: 158px; |
||||
padding: 10px 10px; |
||||
font-size: 15px; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
text-transform: uppercase; |
||||
color: #fff; |
||||
background-color: #479fc8; |
||||
-webkit-transform: rotate(45deg) translate3d(0, 0, 0); |
||||
-moz-transform: rotate(45deg) translate3d(0, 0, 0); |
||||
-ms-transform: rotate(45deg) translate3d(0, 0, 0); |
||||
-o-transform: rotate(45deg) translate3d(0, 0, 0); |
||||
} |
||||
.latest .featured-image .ribbon .text:before, |
||||
.latest .featured-image .ribbon .text:after { |
||||
content: ''; |
||||
position: absolute; |
||||
bottom: -5px; |
||||
border-top: 5px solid #276582; |
||||
border-left: 5px solid transparent; |
||||
border-right: 5px solid transparent; |
||||
} |
||||
.latest .featured-image .ribbon .text:before { |
||||
left: 0; |
||||
} |
||||
.latest .featured-image .ribbon .text:after { |
||||
right: 0; |
||||
} |
||||
/* Projects Section */ |
||||
.projects .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.projects .item .title { |
||||
font-size: 16px; |
||||
margin-top: 0; |
||||
margin-bottom: 5px; |
||||
line-height: 1.5; |
||||
} |
||||
.projects .item .title a { |
||||
color: #778492; |
||||
} |
||||
.projects .item .title a:hover { |
||||
color: #5f6b77; |
||||
} |
||||
/* Work Section */ |
||||
.experience .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.experience .item .title { |
||||
font-size: 16px; |
||||
margin-top: 0; |
||||
margin-bottom: 5px; |
||||
line-height: 1.5; |
||||
} |
||||
.experience .item .title .place { |
||||
color: #999999; |
||||
font-weight: normal; |
||||
} |
||||
.experience .item .title .place a { |
||||
color: #999999; |
||||
} |
||||
.experience .item .title .place a:hover { |
||||
color: #666666; |
||||
} |
||||
.experience .item .title .year { |
||||
color: #999999; |
||||
font-weight: normal; |
||||
} |
||||
/* Git section */ |
||||
.ghfeed { |
||||
height: 600px; |
||||
} |
||||
.ghfeed, |
||||
.ghfeed *, |
||||
.ghfeed *:before, |
||||
.ghfeed *:after { |
||||
-webkit-box-sizing: content-box; |
||||
-moz-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
} |
||||
/* Info Section */ |
||||
.info .fa { |
||||
margin-right: 15px; |
||||
color: #ccd1d6; |
||||
} |
||||
.info .fa.fa-envelope-o { |
||||
font-size: 14px; |
||||
} |
||||
.info ul { |
||||
margin-bottom: 0; |
||||
} |
||||
.info li { |
||||
margin-bottom: 15px; |
||||
} |
||||
.info li:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
/* Skills Section */ |
||||
.skills .intro { |
||||
margin-bottom: 30px; |
||||
} |
||||
.skills .skillset .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.skills .skillset .level-title { |
||||
font-size: 16px; |
||||
position: relative; |
||||
margin-top: 0; |
||||
margin-bottom: 10; |
||||
} |
||||
.skills .skillset .level-title .level-label { |
||||
color: #ccd1d6; |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
font-family: "Lato", arial, sans-serif; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
} |
||||
.skills .skillset .level-bar { |
||||
height: 15px; |
||||
background: #e8e8e8; |
||||
} |
||||
.skills .skillset .level-bar-inner { |
||||
height: 15px; |
||||
background: #66cb8c; |
||||
} |
||||
/* Testimonials section */ |
||||
.testimonials .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.testimonials .item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
.testimonials .item .quote { |
||||
color: #666666; |
||||
font-size: 16px; |
||||
border-left-color: #9fdeb7; |
||||
margin-bottom: 15px; |
||||
} |
||||
.testimonials .item .quote .fa { |
||||
color: #79d19a; |
||||
margin-right: 15px; |
||||
} |
||||
.testimonials .item .source { |
||||
font-size: 14px; |
||||
padding-left: 30px; |
||||
font-weight: 500; |
||||
} |
||||
.testimonials .item .source .name { |
||||
color: #939ea9; |
||||
font-weight: 600; |
||||
} |
||||
.testimonials .item .source .title { |
||||
color: #999999; |
||||
} |
||||
/* Education section */ |
||||
.education .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.education .item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
.education .item .title { |
||||
font-size: 16px; |
||||
margin-top: 0; |
||||
} |
||||
.education .item .university { |
||||
font-family: "Lato", arial, sans-serif; |
||||
font-size: 13px; |
||||
color: #999999; |
||||
font-weight: 600; |
||||
padding-left: 25px; |
||||
} |
||||
.education .item .university .year { |
||||
color: #b0b7bf; |
||||
font-weight: 500; |
||||
} |
||||
/* Language Section */ |
||||
.languages .item { |
||||
margin-bottom: 15px; |
||||
} |
||||
.languages .item .title { |
||||
color: #778492; |
||||
} |
||||
.languages .item .level { |
||||
color: #999999; |
||||
} |
||||
.languages .item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
.languages .item .fa { |
||||
color: #79d19a; |
||||
} |
||||
/* Blog Section */ |
||||
.blog .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.blog .item .title { |
||||
font-size: 18px; |
||||
line-height: 1.3; |
||||
} |
||||
.blog .item .title a { |
||||
color: #778492; |
||||
} |
||||
.blog .item .title a:hover { |
||||
color: #5f6b77; |
||||
} |
||||
.blog .item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
/* List section */ |
||||
.list ul li { |
||||
margin-bottom: 10px; |
||||
} |
||||
.list ul li .fa { |
||||
margin-right: 5px; |
||||
} |
||||
.list ul li a { |
||||
color: #778492; |
||||
} |
||||
.list ul li a:hover { |
||||
color: #49515a; |
||||
} |
||||
/* Credits */ |
||||
.credits ul li { |
||||
margin-bottom: 10px; |
||||
} |
||||
.credits ul li .fa { |
||||
margin-right: 5px; |
||||
} |
||||
.credits ul li a { |
||||
color: #778492; |
||||
} |
||||
.credits ul li a:hover { |
||||
color: #49515a; |
||||
} |
||||
.credits .btn { |
||||
margin-bottom: 15px; |
||||
} |
||||
|
||||
/* ======= Footer ======= */ |
||||
.footer { |
||||
background: #32383e; |
||||
color: #fff; |
||||
padding: 10px 0; |
||||
} |
||||
.footer .copyright { |
||||
line-height: 1.6; |
||||
color: #a1aab4; |
||||
font-size: 14px; |
||||
} |
||||
.footer a { |
||||
color: #fff; |
||||
} |
||||
.footer .fa-heart { |
||||
color: #fb866a; |
||||
} |
||||
|
||||
/* ======= Responsive display ======= */ |
||||
/* Extra small devices (phones, less than 768px) */ |
||||
@media (max-width: 767px) { |
||||
.header { |
||||
text-align: center; |
||||
} |
||||
.header .profile-image { |
||||
float: none !important; |
||||
margin: 0 auto; |
||||
} |
||||
.header .profile-content { |
||||
float: none !important; |
||||
text-align: center; |
||||
} |
||||
.header .profile-bio { |
||||
float: none !important; |
||||
width: 100%; |
||||
} |
||||
.header .btn { |
||||
margin-top: 30px; |
||||
float: none !important; |
||||
} |
||||
.project-image { |
||||
margin-bottom: 15px; |
||||
} |
||||
.desktop-menu { |
||||
display: none; |
||||
} |
||||
.mobile-menu { |
||||
display: inline; |
||||
} |
||||
.lang-dropdown { |
||||
left: 78%; |
||||
} |
||||
} |
||||
/* Small devices (tablets, 768px and up) */ |
||||
/* Medium devices (desktops, 992px and up) */ |
||||
/* Large devices (large desktops, 1200px and up) */ |
||||
/* Ex-Large devices (large desktops, 1200px and up) */ |
||||
@media (min-width: 1400px) { |
||||
.container { |
||||
width: 1360px; |
||||
} |
||||
} |
@ -0,0 +1,563 @@ |
||||
/* |
||||
* Template Name: Developer - Responsive Website Template for Developers |
||||
* Version: 1.0 |
||||
* Author: 3rd Wave Media |
||||
* Twitter: @3rdwave_themes |
||||
* License: Creative Commons Attribution 3.0 License |
||||
* Website: http://themes.3rdwavemedia.com/ |
||||
* |
||||
* Grav Template Version |
||||
* Version: 2.0 |
||||
* Author: NunoPress LLC |
||||
* Website: https://nunopress.com |
||||
*/ |
||||
/* ======= Base ======= */ |
||||
body { |
||||
font-family: 'Lato', arial, sans-serif; |
||||
color: #434343; |
||||
background: #dae3e7; |
||||
font-size: 16px; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6 { |
||||
font-family: 'Montserrat', sans-serif; |
||||
font-weight: 700; |
||||
color: #778492; |
||||
} |
||||
a { |
||||
color: #3aaa64; |
||||
-webkit-transition: all 0.4s ease-in-out; |
||||
-moz-transition: all 0.4s ease-in-out; |
||||
-ms-transition: all 0.4s ease-in-out; |
||||
-o-transition: all 0.4s ease-in-out; |
||||
} |
||||
a:hover { |
||||
text-decoration: underline; |
||||
color: #5f6b77; |
||||
color: #2d844e; |
||||
} |
||||
.btn, |
||||
a.btn { |
||||
-webkit-transition: all 0.4s ease-in-out; |
||||
-moz-transition: all 0.4s ease-in-out; |
||||
-ms-transition: all 0.4s ease-in-out; |
||||
-o-transition: all 0.4s ease-in-out; |
||||
font-family: 'Montserrat', arial, sans-serif; |
||||
padding: 8px 16px; |
||||
font-weight: bold; |
||||
} |
||||
.btn .fa, |
||||
a.btn .fa { |
||||
margin-right: 5px; |
||||
} |
||||
.btn:focus, |
||||
a.btn:focus { |
||||
color: #fff; |
||||
} |
||||
a.btn-cta-primary, |
||||
.btn-cta-primary { |
||||
background: #54ba4e; |
||||
border: 1px solid #54ba4e; |
||||
color: #fff; |
||||
font-weight: 600; |
||||
text-transform: uppercase; |
||||
} |
||||
a.btn-cta-primary:hover, |
||||
.btn-cta-primary:hover { |
||||
background: #49ac43; |
||||
border: 1px solid #49ac43; |
||||
color: #fff; |
||||
} |
||||
a.btn-cta-secondary, |
||||
.btn-cta-secondary { |
||||
background: #479fc8; |
||||
border: 1px solid #479fc8; |
||||
color: #fff; |
||||
font-weight: 600; |
||||
text-transform: uppercase; |
||||
} |
||||
a.btn-cta-secondary:hover, |
||||
.btn-cta-secondary:hover { |
||||
background: #3893bd; |
||||
border: 1px solid #3893bd; |
||||
color: #fff; |
||||
} |
||||
.text-highlight { |
||||
color: #32383e; |
||||
} |
||||
.label-theme { |
||||
background: #3aaa64; |
||||
font-size: 12px; |
||||
} |
||||
a.dotted-link { |
||||
border-bottom: 1px dotted #778492; |
||||
color: #778492; |
||||
} |
||||
a.dotted-link:hover { |
||||
text-decoration: none; |
||||
color: #49515a; |
||||
} |
||||
/* |
||||
iframe { |
||||
|
||||
.header { |
||||
padding: 0; |
||||
} |
||||
} |
||||
|
||||
.iframe-wrapper { |
||||
overflow: auto; |
||||
-webkit-overflow-scrolling:touch; |
||||
} |
||||
*/ |
||||
/* ======= Images ======= */ |
||||
img.circle { |
||||
border-radius: 50%; |
||||
} |
||||
img.rounded { |
||||
border-radius: 10%; |
||||
} |
||||
img.drop { |
||||
border-radius: 50% 50% 50% 10%; |
||||
} |
||||
|
||||
/* ======= Header ======= */ |
||||
.header { |
||||
padding: 30px 0; |
||||
background: #f5f5f5; |
||||
border-top: 10px solid #778492; |
||||
} |
||||
.header .btn { |
||||
margin-top: 60px; |
||||
font-weight: bold; |
||||
} |
||||
.header .profile-image { |
||||
margin-right: 30px; |
||||
} |
||||
.header .profile-content .name { |
||||
color: #49515a; |
||||
font-size: 38px; |
||||
margin-bottom: 5px; |
||||
margin-top: 30px; |
||||
} |
||||
.header .profile-content .desc { |
||||
color: #778492; |
||||
font-family: "Lato", arial, sans-serif; |
||||
font-weight: 400; |
||||
font-size: 24px; |
||||
margin-top: 0; |
||||
margin-bottom: 15px; |
||||
} |
||||
.header .profile-content .social a { |
||||
background: #b0b7bf; |
||||
width: 36px; |
||||
height: 36px; |
||||
display: inline-block; |
||||
-webkit-border-radius: 50%; |
||||
-moz-border-radius: 50%; |
||||
-ms-border-radius: 50%; |
||||
-o-border-radius: 50%; |
||||
border-radius: 50%; |
||||
-moz-background-clip: padding; |
||||
-webkit-background-clip: padding-box; |
||||
background-clip: padding-box; |
||||
color: #fff; |
||||
text-align: center; |
||||
} |
||||
.header .profile-content .social a:hover { |
||||
background: #778492; |
||||
} |
||||
.header .profile-content .social a .fa { |
||||
font-size: 20px; |
||||
padding-top: 8px; |
||||
} |
||||
.header .profile-bio { |
||||
margin-left: 30px; |
||||
margin-right: 30px; |
||||
margin-top: 15px; |
||||
margin-bottom: 15px; |
||||
} |
||||
.header .profile-bio .biography { |
||||
text-align: justify; |
||||
color: #494e52; |
||||
} |
||||
|
||||
/* ======= Sections======= */ |
||||
.sections-wrapper { |
||||
padding-top: 60px; |
||||
padding-bottom: 60px; |
||||
} |
||||
.section { |
||||
margin-bottom: 30px; |
||||
} |
||||
.section .section-inner { |
||||
background: #fff; |
||||
padding: 30px; |
||||
} |
||||
.section .heading { |
||||
margin-top: 0; |
||||
margin-bottom: 30px; |
||||
color: #545e69; |
||||
font-size: 24px; |
||||
} |
||||
.section .content .more-link .fa { |
||||
margin-right: 5px; |
||||
font-size: 14px; |
||||
} |
||||
/* About Section */ |
||||
/* Latest Section */ |
||||
.latest .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.latest .item .title { |
||||
font-size: 18px; |
||||
margin-top: 0; |
||||
} |
||||
.latest .item .title .label { |
||||
margin-left: 5px; |
||||
font-size: 12px; |
||||
} |
||||
.latest .item .title a { |
||||
color: #778492; |
||||
} |
||||
.latest .item .title a:hover { |
||||
color: #5f6b77; |
||||
} |
||||
.latest .item .project-image:hover { |
||||
-webkit-opacity: 0.8; |
||||
-moz-opacity: 0.8; |
||||
opacity: 0.8; |
||||
} |
||||
.latest .divider { |
||||
margin-bottom: 60px; |
||||
} |
||||
.latest .featured { |
||||
margin-bottom: 60px; |
||||
} |
||||
.latest .featured .title { |
||||
margin-bottom: 5px; |
||||
font-size: 20px; |
||||
} |
||||
.latest .featured .summary { |
||||
margin-bottom: 30px; |
||||
color: #778492; |
||||
} |
||||
.latest .featured img { |
||||
margin-bottom: 30px; |
||||
} |
||||
.latest .featured .desc { |
||||
margin-bottom: 30px; |
||||
} |
||||
.latest .featured-image { |
||||
position: relative; |
||||
} |
||||
.latest .featured-image .text { |
||||
background: #3aaa64; |
||||
color: #fff; |
||||
} |
||||
.latest .featured-image .ribbon { |
||||
position: absolute; |
||||
top: -4px; |
||||
right: -4px; |
||||
width: 110px; |
||||
height: 110px; |
||||
overflow: hidden; |
||||
} |
||||
.latest .featured-image .ribbon .text { |
||||
font-family: 'Montserrat', sans-serif; |
||||
position: relative; |
||||
left: -8px; |
||||
top: 18px; |
||||
width: 158px; |
||||
padding: 10px 10px; |
||||
font-size: 15px; |
||||
font-weight: bold; |
||||
text-align: center; |
||||
text-transform: uppercase; |
||||
color: #fff; |
||||
background-color: #479fc8; |
||||
-webkit-transform: rotate(45deg) translate3d(0, 0, 0); |
||||
-moz-transform: rotate(45deg) translate3d(0, 0, 0); |
||||
-ms-transform: rotate(45deg) translate3d(0, 0, 0); |
||||
-o-transform: rotate(45deg) translate3d(0, 0, 0); |
||||
} |
||||
.latest .featured-image .ribbon .text:before, |
||||
.latest .featured-image .ribbon .text:after { |
||||
content: ''; |
||||
position: absolute; |
||||
bottom: -5px; |
||||
border-top: 5px solid #276582; |
||||
border-left: 5px solid transparent; |
||||
border-right: 5px solid transparent; |
||||
} |
||||
.latest .featured-image .ribbon .text:before { |
||||
left: 0; |
||||
} |
||||
.latest .featured-image .ribbon .text:after { |
||||
right: 0; |
||||
} |
||||
/* Projects Section */ |
||||
.projects .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.projects .item .title { |
||||
font-size: 16px; |
||||
margin-top: 0; |
||||
margin-bottom: 5px; |
||||
line-height: 1.5; |
||||
} |
||||
.projects .item .title a { |
||||
color: #778492; |
||||
} |
||||
.projects .item .title a:hover { |
||||
color: #5f6b77; |
||||
} |
||||
/* Work Section */ |
||||
.experience .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.experience .item .title { |
||||
font-size: 16px; |
||||
margin-top: 0; |
||||
margin-bottom: 5px; |
||||
line-height: 1.5; |
||||
} |
||||
.experience .item .title .place { |
||||
color: #999999; |
||||
font-weight: normal; |
||||
} |
||||
.experience .item .title .place a { |
||||
color: #999999; |
||||
} |
||||
.experience .item .title .place a:hover { |
||||
color: #666666; |
||||
} |
||||
.experience .item .title .year { |
||||
color: #999999; |
||||
font-weight: normal; |
||||
} |
||||
/* Git section */ |
||||
.ghfeed { |
||||
height: 600px; |
||||
} |
||||
.ghfeed, |
||||
.ghfeed *, |
||||
.ghfeed *:before, |
||||
.ghfeed *:after { |
||||
-webkit-box-sizing: content-box; |
||||
-moz-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
} |
||||
/* Info Section */ |
||||
.info .fa { |
||||
margin-right: 15px; |
||||
color: #ccd1d6; |
||||
} |
||||
.info .fa.fa-envelope-o { |
||||
font-size: 14px; |
||||
} |
||||
.info ul { |
||||
margin-bottom: 0; |
||||
} |
||||
.info li { |
||||
margin-bottom: 15px; |
||||
} |
||||
.info li:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
/* Skills Section */ |
||||
.skills .intro { |
||||
margin-bottom: 30px; |
||||
} |
||||
.skills .skillset .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.skills .skillset .level-title { |
||||
font-size: 16px; |
||||
position: relative; |
||||
margin-top: 0; |
||||
margin-bottom: 10; |
||||
} |
||||
.skills .skillset .level-title .level-label { |
||||
color: #ccd1d6; |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
font-family: "Lato", arial, sans-serif; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
} |
||||
.skills .skillset .level-bar { |
||||
height: 15px; |
||||
background: #e8e8e8; |
||||
} |
||||
.skills .skillset .level-bar-inner { |
||||
height: 15px; |
||||
background: #66cb8c; |
||||
} |
||||
/* Testimonials section */ |
||||
.testimonials .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.testimonials .item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
.testimonials .item .quote { |
||||
color: #666666; |
||||
font-size: 16px; |
||||
border-left-color: #9fdeb7; |
||||
margin-bottom: 15px; |
||||
} |
||||
.testimonials .item .quote .fa { |
||||
color: #79d19a; |
||||
margin-right: 15px; |
||||
} |
||||
.testimonials .item .source { |
||||
font-size: 14px; |
||||
padding-left: 30px; |
||||
font-weight: 500; |
||||
} |
||||
.testimonials .item .source .name { |
||||
color: #939ea9; |
||||
font-weight: 600; |
||||
} |
||||
.testimonials .item .source .title { |
||||
color: #999999; |
||||
} |
||||
/* Education section */ |
||||
.education .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.education .item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
.education .item .title { |
||||
font-size: 16px; |
||||
margin-top: 0; |
||||
} |
||||
.education .item .university { |
||||
font-family: "Lato", arial, sans-serif; |
||||
font-size: 13px; |
||||
color: #999999; |
||||
font-weight: 600; |
||||
padding-left: 25px; |
||||
} |
||||
.education .item .university .year { |
||||
color: #b0b7bf; |
||||
font-weight: 500; |
||||
} |
||||
/* Language Section */ |
||||
.languages .item { |
||||
margin-bottom: 15px; |
||||
} |
||||
.languages .item .title { |
||||
color: #778492; |
||||
} |
||||
.languages .item .level { |
||||
color: #999999; |
||||
} |
||||
.languages .item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
.languages .item .fa { |
||||
color: #79d19a; |
||||
} |
||||
/* Blog Section */ |
||||
.blog .item { |
||||
margin-bottom: 30px; |
||||
} |
||||
.blog .item .title { |
||||
font-size: 18px; |
||||
line-height: 1.3; |
||||
} |
||||
.blog .item .title a { |
||||
color: #778492; |
||||
} |
||||
.blog .item .title a:hover { |
||||
color: #5f6b77; |
||||
} |
||||
.blog .item:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
/* List section */ |
||||
.list ul li { |
||||
margin-bottom: 10px; |
||||
} |
||||
.list ul li .fa { |
||||
margin-right: 5px; |
||||
} |
||||
.list ul li a { |
||||
color: #778492; |
||||
} |
||||
.list ul li a:hover { |
||||
color: #49515a; |
||||
} |
||||
/* Credits */ |
||||
.credits ul li { |
||||
margin-bottom: 10px; |
||||
} |
||||
.credits ul li .fa { |
||||
margin-right: 5px; |
||||
} |
||||
.credits ul li a { |
||||
color: #778492; |
||||
} |
||||
.credits ul li a:hover { |
||||
color: #49515a; |
||||
} |
||||
.credits .btn { |
||||
margin-bottom: 15px; |
||||
} |
||||
/* ======= Footer ======= */ |
||||
.footer { |
||||
background: #32383e; |
||||
color: #fff; |
||||
padding: 10px 0; |
||||
} |
||||
.footer .copyright { |
||||
line-height: 1.6; |
||||
color: #a1aab4; |
||||
font-size: 14px; |
||||
} |
||||
.footer a { |
||||
color: #fff; |
||||
} |
||||
.footer .fa-heart { |
||||
color: #fb866a; |
||||
} |
||||
/* Extra small devices (phones, less than 768px) */ |
||||
@media (max-width: 767px) { |
||||
.header { |
||||
text-align: center; |
||||
} |
||||
.header .profile-image { |
||||
float: none !important; |
||||
margin: 0 auto; |
||||
} |
||||
.header .profile-content { |
||||
float: none !important; |
||||
text-align: center; |
||||
} |
||||
.header .btn { |
||||
margin-top: 30px; |
||||
float: none !important; |
||||
} |
||||
.project-image { |
||||
margin-bottom: 15px; |
||||
} |
||||
} |
||||
/* Small devices (tablets, 768px and up) */ |
||||
/* Medium devices (desktops, 992px and up) */ |
||||
/* Large devices (large desktops, 1200px and up) */ |
||||
/* Ex-Large devices (large desktops, 1200px and up) */ |
||||
@media (min-width: 1400px) { |
||||
.container { |
||||
width: 1360px; |
||||
} |
||||
} |
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,53 @@ |
||||
jQuery(document).ready(function($) { |
||||
|
||||
|
||||
/*======= Skillset *=======*/ |
||||
|
||||
$('.level-bar-inner').css('width', '0'); |
||||
|
||||
$(window).on('load', function() { |
||||
|
||||
$('.level-bar-inner').each(function() { |
||||
|
||||
var itemWidth = $(this).data('level'); |
||||
|
||||
$(this).animate({ |
||||
width: itemWidth |
||||
}, 800); |
||||
|
||||
}); |
||||
|
||||
}); |
||||
|
||||
/* Bootstrap Tooltip for Skillset */ |
||||
$('.level-label').tooltip(); |
||||
}); |
||||
|
||||
|
||||
|
||||
/* ======= Sticky top menu ======= */ |
||||
window.onscroll = function() {stickyTop()}; |
||||
var topmenu = document.getElementById("topMenu"); |
||||
var logo = document.getElementById("navLogo"); |
||||
var overlay = document.getElementById("overlay"); |
||||
var sticky = topmenu.offsetTop; |
||||
|
||||
function stickyTop() { |
||||
if (window.pageYOffset > sticky || overlay.classList.contains("open")) { |
||||
topmenu.classList.add("sticky"); |
||||
logo.classList.remove("hidden"); |
||||
} else { |
||||
topmenu.classList.remove("sticky"); |
||||
logo.classList.add("hidden"); |
||||
} |
||||
} |
||||
|
||||
/* ======== Responsive menu ======= */ |
||||
var toggle = document.getElementById("toggle"); |
||||
toggle.onclick = function() {toggleMenu()}; |
||||
|
||||
function toggleMenu() { |
||||
toggle.classList.toggle("active"); |
||||
overlay.classList.toggle("open"); |
||||
stickyTop(); |
||||
} |
@ -0,0 +1,442 @@ |
||||
/*! |
||||
* Bootstrap v3.2.0 (http://getbootstrap.com) |
||||
* Copyright 2011-2014 Twitter, Inc. |
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) |
||||
*/ |
||||
|
||||
.btn-default, |
||||
.btn-primary, |
||||
.btn-success, |
||||
.btn-info, |
||||
.btn-warning, |
||||
.btn-danger { |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); |
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); |
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); |
||||
} |
||||
.btn-default:active, |
||||
.btn-primary:active, |
||||
.btn-success:active, |
||||
.btn-info:active, |
||||
.btn-warning:active, |
||||
.btn-danger:active, |
||||
.btn-default.active, |
||||
.btn-primary.active, |
||||
.btn-success.active, |
||||
.btn-info.active, |
||||
.btn-warning.active, |
||||
.btn-danger.active { |
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); |
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); |
||||
} |
||||
.btn:active, |
||||
.btn.active { |
||||
background-image: none; |
||||
} |
||||
.btn-default { |
||||
text-shadow: 0 1px 0 #fff; |
||||
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%); |
||||
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0)); |
||||
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #dbdbdb; |
||||
border-color: #ccc; |
||||
} |
||||
.btn-default:hover, |
||||
.btn-default:focus { |
||||
background-color: #e0e0e0; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-default:active, |
||||
.btn-default.active { |
||||
background-color: #e0e0e0; |
||||
border-color: #dbdbdb; |
||||
} |
||||
.btn-default:disabled, |
||||
.btn-default[disabled] { |
||||
background-color: #e0e0e0; |
||||
background-image: none; |
||||
} |
||||
.btn-primary { |
||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%); |
||||
background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2)); |
||||
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #2b669a; |
||||
} |
||||
.btn-primary:hover, |
||||
.btn-primary:focus { |
||||
background-color: #2d6ca2; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-primary:active, |
||||
.btn-primary.active { |
||||
background-color: #2d6ca2; |
||||
border-color: #2b669a; |
||||
} |
||||
.btn-primary:disabled, |
||||
.btn-primary[disabled] { |
||||
background-color: #2d6ca2; |
||||
background-image: none; |
||||
} |
||||
.btn-success { |
||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%); |
||||
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641)); |
||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #3e8f3e; |
||||
} |
||||
.btn-success:hover, |
||||
.btn-success:focus { |
||||
background-color: #419641; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-success:active, |
||||
.btn-success.active { |
||||
background-color: #419641; |
||||
border-color: #3e8f3e; |
||||
} |
||||
.btn-success:disabled, |
||||
.btn-success[disabled] { |
||||
background-color: #419641; |
||||
background-image: none; |
||||
} |
||||
.btn-info { |
||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); |
||||
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); |
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2)); |
||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0); |
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
||||
background-repeat: repeat-x; |
||||
border-color: #28a4c9; |
||||
} |
||||
.btn-info:hover, |
||||
.btn-info:focus { |
||||
background-color: #2aabd2; |
||||
background-position: 0 -15px; |
||||
} |
||||
.btn-info:active, |
||||
.btn-info.active { |
||||
background-color: #2aabd2; |
||||
border-color: #28a4c9; |
||||
} |
||||
.btn-info:disabled, |
||||
.btn-info[disabled] { |
||||
background-color: #2aabd2; |
||||
background-image: none; |
||||
} |
||||
.btn-warning { |
||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); |
||||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); |
||||
< |