/*! * Template Name: Developer - Portfolio Landing Page Template for Developers * Version: 2.4 * Author: Xiaoying Riley * Twitter: @3rdwave_themes * Copyright: 3rd Wave Media Ltd. * Website: https://themes.3rdwavemedia.com/ */ 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; } a:focus { text-decoration: none; } .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 .svg-inline--fa, a.btn .svg-inline--fa { margin-right: 5px; position: relative; top: -2px; } .btn:focus, a.btn:focus { color: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } 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, a.btn-cta-secondary:not(:disabled):not(.disabled):active:focus, .btn-cta-secondary:hover, .btn-cta-secondary:not(:disabled):not(.disabled):active:focus { background: #3893bd; border: 1px solid #3893bd; color: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .text-highlight { color: #32383e; } .badge-theme { background: #3AAA64; font-size: 12px; color: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } a.dotted-link { border-bottom: 1px dotted #778492; color: #778492; } a.dotted-link:hover { text-decoration: none; color: #49515a; } /* ======= Header ======= */ .header { padding: 30px 0; background: #f5f5f5; border-top: 10px solid #778492; } .header .btn { margin-top: 30px; 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 .svg-inline--fa { font-size: 20px; margin-top: 8px; } /* ======= 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 .svg-inline--fa { margin-right: 5px; font-size: 14px; position: relative; top: -2px; } /* 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 { font-size: 20px; 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 .has-ribbon { position: relative; display: inline-block; } .latest .has-ribbon .text { background: #3AAA64; color: #fff; } .latest .has-ribbon .ribbon { position: absolute; top: -4px; right: -4px; width: 110px; height: 110px; overflow: hidden; } .latest .has-ribbon .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 .has-ribbon .ribbon .text:before, .latest .has-ribbon .ribbon .text:after { content: ''; position: absolute; bottom: -5px; border-top: 5px solid #276582; border-left: 5px solid transparent; border-right: 5px solid transparent; } .latest .has-ribbon .ribbon .text:before { left: 0; } .latest .has-ribbon .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: #999; font-weight: normal; } .experience .item .title .place a { color: #999; } .experience .item .title .place a:hover { color: #666666; } .experience .item .title .year { color: #999; font-weight: normal; } /* Git section */ .github-graph { margin-bottom: 30px; } .github-graph .js-calendar-graph-svg { max-width: 100%; } .github-graph h2 { font-size: 18px; } .ghfeed { height: 500px; } .ghfeed, .ghfeed *, .ghfeed *:before, .ghfeed *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* Info Section */ .info .svg-inline--fa { margin-right: 15px; color: #ccd1d6; } .info .svg-inline--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; } .skills .svg-inline--fa { margin-right: 3px; position: relative; top: -1px; } /* Testimonials section */ .testimonials .item { margin-bottom: 30px; } .testimonials .item:last-child { margin-bottom: 0; } .testimonials .item .quote { color: #666; font-size: 16px; border-left: 5px solid #9fdeb7; padding: 5px 15px; margin-bottom: 15px; } .testimonials .item .quote p { margin-bottom: 0; } .testimonials .item .quote .svg-inline--fa { color: #79d19a; margin-right: 15px; } .testimonials .item .source { font-size: 14px; padding-left: 20px; font-weight: 500; } .testimonials .item .source .name { color: #939ea9; font-weight: 600; } .testimonials .item .source .title { color: #999; } /* 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: #999; 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: #999; } .languages .item:last-child { margin-bottom: 0; } .languages .item .svg-inline--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 p { margin-bottom: 5px; } .blog .item:last-child { margin-bottom: 0; } /* List section */ .list ul li { margin-bottom: 10px; } .list ul li .svg-inline--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 .svg-inline--fa { margin-right: 5px; position: relative; top: -2px; } .credits ul li a { color: #778492; } .credits ul li a .svg-inline--fa { color: #b0b7bf; } .credits ul li a:hover { color: #49515a; } .credits .btn { margin-bottom: 15px; } .aside .subheading { font-size: 18px; color: #545e69; } /* ======= 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; } @media (max-width: 767.98px) { .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: 10px; float: none !important; } .project-image { margin-bottom: 15px; } } @media (min-width: 1400px) { .container { width: 1360px; max-width: inherit; } }