You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

674 lines
11 KiB

4 years ago
4 years ago
4 years ago
  1. /*!
  2. * Template Name: Developer - Portfolio Landing Page Template for Developers
  3. * Version: 2.4
  4. * Author: Xiaoying Riley
  5. * Twitter: @3rdwave_themes
  6. * Copyright: 3rd Wave Media Ltd.
  7. * Website: https://themes.3rdwavemedia.com/
  8. */
  9. body {
  10. font-family: 'Lato', arial, sans-serif;
  11. color: #434343;
  12. background: #DAE3E7;
  13. font-size: 16px;
  14. -webkit-font-smoothing: antialiased;
  15. -moz-osx-font-smoothing: grayscale;
  16. }
  17. h1, h2, h3, h4, h5, h6 {
  18. font-family: 'Montserrat', sans-serif;
  19. font-weight: 700;
  20. color: #778492;
  21. }
  22. a {
  23. color: #3AAA64;
  24. -webkit-transition: all 0.4s ease-in-out;
  25. -moz-transition: all 0.4s ease-in-out;
  26. -ms-transition: all 0.4s ease-in-out;
  27. -o-transition: all 0.4s ease-in-out;
  28. }
  29. a:hover {
  30. text-decoration: underline;
  31. color: #5f6b77;
  32. color: #2d844e;
  33. }
  34. a:focus {
  35. text-decoration: none;
  36. }
  37. .btn, a.btn {
  38. -webkit-transition: all 0.4s ease-in-out;
  39. -moz-transition: all 0.4s ease-in-out;
  40. -ms-transition: all 0.4s ease-in-out;
  41. -o-transition: all 0.4s ease-in-out;
  42. font-family: 'Montserrat', arial, sans-serif;
  43. padding: 8px 16px;
  44. font-weight: bold;
  45. }
  46. .btn .svg-inline--fa, a.btn .svg-inline--fa {
  47. margin-right: 5px;
  48. position: relative;
  49. top: -2px;
  50. }
  51. .btn:focus, a.btn:focus {
  52. color: #fff;
  53. -webkit-box-shadow: none;
  54. -moz-box-shadow: none;
  55. box-shadow: none;
  56. }
  57. a.btn-cta-primary, .btn-cta-primary {
  58. background: #54ba4e;
  59. border: 1px solid #54ba4e;
  60. color: #fff;
  61. font-weight: 600;
  62. text-transform: uppercase;
  63. }
  64. a.btn-cta-primary:hover, .btn-cta-primary:hover {
  65. background: #49ac43;
  66. border: 1px solid #49ac43;
  67. color: #fff;
  68. }
  69. a.btn-cta-secondary, .btn-cta-secondary {
  70. background: #479FC8;
  71. border: 1px solid #479FC8;
  72. color: #fff;
  73. font-weight: 600;
  74. text-transform: uppercase;
  75. }
  76. 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 {
  77. background: #3893bd;
  78. border: 1px solid #3893bd;
  79. color: #fff;
  80. -webkit-box-shadow: none;
  81. -moz-box-shadow: none;
  82. box-shadow: none;
  83. }
  84. .text-highlight {
  85. color: #32383e;
  86. }
  87. .badge-theme {
  88. background: #3AAA64;
  89. font-size: 12px;
  90. color: #fff;
  91. -webkit-border-radius: 2px;
  92. -moz-border-radius: 2px;
  93. -ms-border-radius: 2px;
  94. -o-border-radius: 2px;
  95. border-radius: 2px;
  96. -moz-background-clip: padding;
  97. -webkit-background-clip: padding-box;
  98. background-clip: padding-box;
  99. }
  100. a.dotted-link {
  101. border-bottom: 1px dotted #778492;
  102. color: #778492;
  103. }
  104. a.dotted-link:hover {
  105. text-decoration: none;
  106. color: #49515a;
  107. }
  108. /* ======= Header ======= */
  109. .header {
  110. padding: 30px 0;
  111. background: #f5f5f5;
  112. border-top: 10px solid #778492;
  113. }
  114. .header .btn {
  115. margin-top: 30px;
  116. font-weight: bold;
  117. }
  118. .header .profile-image {
  119. margin-right: 30px;
  120. }
  121. .header .profile-content .name {
  122. color: #49515a;
  123. font-size: 38px;
  124. margin-bottom: 5px;
  125. margin-top: 30px;
  126. }
  127. .header .profile-content .desc {
  128. color: #778492;
  129. font-family: "Lato", arial, sans-serif;
  130. font-weight: 400;
  131. font-size: 24px;
  132. margin-top: 0;
  133. margin-bottom: 15px;
  134. }
  135. .header .profile-content .social a {
  136. background: #b0b7bf;
  137. width: 36px;
  138. height: 36px;
  139. display: inline-block;
  140. -webkit-border-radius: 50%;
  141. -moz-border-radius: 50%;
  142. -ms-border-radius: 50%;
  143. -o-border-radius: 50%;
  144. border-radius: 50%;
  145. -moz-background-clip: padding;
  146. -webkit-background-clip: padding-box;
  147. background-clip: padding-box;
  148. color: #fff;
  149. text-align: center;
  150. }
  151. .header .profile-content .social a:hover {
  152. background: #778492;
  153. }
  154. .header .profile-content .social a .svg-inline--fa {
  155. font-size: 20px;
  156. margin-top: 8px;
  157. }
  158. /* ======= Sections======= */
  159. .sections-wrapper {
  160. padding-top: 60px;
  161. padding-bottom: 60px;
  162. }
  163. .section {
  164. margin-bottom: 30px;
  165. }
  166. .section .section-inner {
  167. background: #fff;
  168. padding: 30px;
  169. }
  170. .section .heading {
  171. margin-top: 0;
  172. margin-bottom: 30px;
  173. color: #545e69;
  174. font-size: 24px;
  175. }
  176. .section .content .more-link .svg-inline--fa {
  177. margin-right: 5px;
  178. font-size: 14px;
  179. position: relative;
  180. top: -2px;
  181. }
  182. /* About Section */
  183. /* Latest Section */
  184. .latest .item {
  185. margin-bottom: 30px;
  186. }
  187. .latest .item .title {
  188. font-size: 18px;
  189. margin-top: 0;
  190. }
  191. .latest .item .title .label {
  192. margin-left: 5px;
  193. font-size: 12px;
  194. }
  195. .latest .item .title a {
  196. color: #778492;
  197. }
  198. .latest .item .title a:hover {
  199. color: #5f6b77;
  200. }
  201. .latest .item .project-image:hover {
  202. -webkit-opacity: 0.8;
  203. -moz-opacity: 0.8;
  204. opacity: 0.8;
  205. }
  206. .latest .divider {
  207. margin-bottom: 60px;
  208. }
  209. .latest .featured {
  210. margin-bottom: 60px;
  211. }
  212. .latest .featured .title {
  213. font-size: 20px;
  214. margin-bottom: 5px;
  215. font-size: 20px;
  216. }
  217. .latest .featured .summary {
  218. margin-bottom: 30px;
  219. color: #778492;
  220. }
  221. .latest .featured img {
  222. margin-bottom: 30px;
  223. }
  224. .latest .featured .desc {
  225. margin-bottom: 30px;
  226. }
  227. .latest .has-ribbon {
  228. position: relative;
  229. display: inline-block;
  230. }
  231. .latest .has-ribbon .text {
  232. background: #3AAA64;
  233. color: #fff;
  234. }
  235. .latest .has-ribbon .ribbon {
  236. position: absolute;
  237. top: -4px;
  238. right: -4px;
  239. width: 110px;
  240. height: 110px;
  241. overflow: hidden;
  242. }
  243. .latest .has-ribbon .ribbon .text {
  244. font-family: 'Montserrat', sans-serif;
  245. position: relative;
  246. left: -8px;
  247. top: 18px;
  248. width: 158px;
  249. padding: 10px 10px;
  250. font-size: 15px;
  251. font-weight: bold;
  252. text-align: center;
  253. text-transform: uppercase;
  254. color: #fff;
  255. background-color: #479FC8;
  256. -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
  257. -moz-transform: rotate(45deg) translate3d(0, 0, 0);
  258. -ms-transform: rotate(45deg) translate3d(0, 0, 0);
  259. -o-transform: rotate(45deg) translate3d(0, 0, 0);
  260. }
  261. .latest .has-ribbon .ribbon .text:before, .latest .has-ribbon .ribbon .text:after {
  262. content: '';
  263. position: absolute;
  264. bottom: -5px;
  265. border-top: 5px solid #276582;
  266. border-left: 5px solid transparent;
  267. border-right: 5px solid transparent;
  268. }
  269. .latest .has-ribbon .ribbon .text:before {
  270. left: 0;
  271. }
  272. .latest .has-ribbon .ribbon .text:after {
  273. right: 0;
  274. }
  275. /* Projects Section */
  276. .projects .item {
  277. margin-bottom: 30px;
  278. }
  279. .projects .item .title {
  280. font-size: 16px;
  281. margin-top: 0;
  282. margin-bottom: 5px;
  283. line-height: 1.5;
  284. }
  285. .projects .item .title a {
  286. color: #778492;
  287. }
  288. .projects .item .title a:hover {
  289. color: #5f6b77;
  290. }
  291. /* Work Section */
  292. .experience .item {
  293. margin-bottom: 30px;
  294. }
  295. .experience .item .title {
  296. font-size: 16px;
  297. margin-top: 0;
  298. margin-bottom: 5px;
  299. line-height: 1.5;
  300. }
  301. .experience .item .title .place {
  302. color: #999;
  303. font-weight: normal;
  304. }
  305. .experience .item .title .place a {
  306. color: #999;
  307. }
  308. .experience .item .title .place a:hover {
  309. color: #666666;
  310. }
  311. .experience .item .title .year {
  312. color: #999;
  313. font-weight: normal;
  314. }
  315. /* Git section */
  316. .github-graph {
  317. margin-bottom: 30px;
  318. }
  319. .github-graph .js-calendar-graph-svg {
  320. max-width: 100%;
  321. }
  322. .github-graph h2 {
  323. font-size: 18px;
  324. }
  325. .ghfeed {
  326. height: 500px;
  327. }
  328. .ghfeed,
  329. .ghfeed *,
  330. .ghfeed *:before,
  331. .ghfeed *:after {
  332. -webkit-box-sizing: content-box;
  333. -moz-box-sizing: content-box;
  334. box-sizing: content-box;
  335. }
  336. /* Info Section */
  337. .info .svg-inline--fa {
  338. margin-right: 15px;
  339. color: #ccd1d6;
  340. }
  341. .info .svg-inline--fa.fa-envelope-o {
  342. font-size: 14px;
  343. }
  344. .info ul {
  345. margin-bottom: 0;
  346. }
  347. .info li {
  348. margin-bottom: 15px;
  349. }
  350. .info li:last-child {
  351. margin-bottom: 0;
  352. }
  353. /* Skills Section */
  354. .skills .intro {
  355. margin-bottom: 30px;
  356. }
  357. .skills .skillset .item {
  358. margin-bottom: 30px;
  359. }
  360. .skills .skillset .level-title {
  361. font-size: 16px;
  362. position: relative;
  363. margin-top: 0;
  364. margin-bottom: 10;
  365. }
  366. .skills .skillset .level-title .level-label {
  367. color: #ccd1d6;
  368. font-size: 14px;
  369. font-weight: 400;
  370. font-family: "Lato", arial, sans-serif;
  371. position: absolute;
  372. right: 0;
  373. top: 0;
  374. }
  375. .skills .skillset .level-bar {
  376. height: 15px;
  377. background: #e8e8e8;
  378. }
  379. .skills .skillset .level-bar-inner {
  380. height: 15px;
  381. background: #66cb8c;
  382. }
  383. .skills .svg-inline--fa {
  384. margin-right: 3px;
  385. position: relative;
  386. top: -1px;
  387. }
  388. /* Testimonials section */
  389. .testimonials .item {
  390. margin-bottom: 30px;
  391. }
  392. .testimonials .item:last-child {
  393. margin-bottom: 0;
  394. }
  395. .testimonials .item .quote {
  396. color: #666;
  397. font-size: 16px;
  398. border-left: 5px solid #9fdeb7;
  399. padding: 5px 15px;
  400. margin-bottom: 15px;
  401. }
  402. .testimonials .item .quote p {
  403. margin-bottom: 0;
  404. }
  405. .testimonials .item .quote .svg-inline--fa {
  406. color: #79d19a;
  407. margin-right: 15px;
  408. }
  409. .testimonials .item .source {
  410. font-size: 14px;
  411. padding-left: 20px;
  412. font-weight: 500;
  413. }
  414. .testimonials .item .source .name {
  415. color: #939ea9;
  416. font-weight: 600;
  417. }
  418. .testimonials .item .source .title {
  419. color: #999;
  420. }
  421. /* Education section */
  422. .education .item {
  423. margin-bottom: 30px;
  424. }
  425. .education .item:last-child {
  426. margin-bottom: 0;
  427. }
  428. .education .item .title {
  429. font-size: 16px;
  430. margin-top: 0;
  431. }
  432. .education .item .university {
  433. font-family: "Lato", arial, sans-serif;
  434. font-size: 13px;
  435. color: #999;
  436. font-weight: 600;
  437. padding-left: 25px;
  438. }
  439. .education .item .university .year {
  440. color: #b0b7bf;
  441. font-weight: 500;
  442. }
  443. /* Language Section */
  444. .languages .item {
  445. margin-bottom: 15px;
  446. }
  447. .languages .item .title {
  448. color: #778492;
  449. }
  450. .languages .item .level {
  451. color: #999;
  452. }
  453. .languages .item:last-child {
  454. margin-bottom: 0;
  455. }
  456. .languages .item .svg-inline--fa {
  457. color: #79d19a;
  458. }
  459. /* Blog Section */
  460. .blog .item {
  461. margin-bottom: 30px;
  462. }
  463. .blog .item .title {
  464. font-size: 18px;
  465. line-height: 1.3;
  466. }
  467. .blog .item .title a {
  468. color: #778492;
  469. }
  470. .blog .item .title a:hover {
  471. color: #5f6b77;
  472. }
  473. .blog .item p {
  474. margin-bottom: 5px;
  475. }
  476. .blog .item:last-child {
  477. margin-bottom: 0;
  478. }
  479. /* List section */
  480. .list ul li {
  481. margin-bottom: 10px;
  482. }
  483. .list ul li .svg-inline--fa {
  484. margin-right: 5px;
  485. }
  486. .list ul li a {
  487. color: #778492;
  488. }
  489. .list ul li a:hover {
  490. color: #49515a;
  491. }
  492. /* Credits */
  493. .credits ul li {
  494. margin-bottom: 10px;
  495. }
  496. .credits ul li .svg-inline--fa {
  497. margin-right: 5px;
  498. position: relative;
  499. top: -2px;
  500. }
  501. .credits ul li a {
  502. color: #778492;
  503. }
  504. .credits ul li a .svg-inline--fa {
  505. color: #b0b7bf;
  506. }
  507. .credits ul li a:hover {
  508. color: #49515a;
  509. }
  510. .credits .btn {
  511. margin-bottom: 15px;
  512. }
  513. .aside .subheading {
  514. font-size: 18px;
  515. color: #545e69;
  516. }
  517. /* ======= Footer ======= */
  518. .footer {
  519. background: #32383e;
  520. color: #fff;
  521. padding: 10px 0;
  522. }
  523. .footer .copyright {
  524. line-height: 1.6;
  525. color: #a1aab4;
  526. font-size: 14px;
  527. }
  528. .footer a {
  529. color: #fff;
  530. }
  531. .footer .fa-heart {
  532. color: #fb866a;
  533. }
  534. @media (max-width: 767.98px) {
  535. .header {
  536. text-align: center;
  537. }
  538. .header .profile-image {
  539. float: none !important;
  540. margin: 0 auto;
  541. }
  542. .header .profile-content {
  543. float: none !important;
  544. text-align: center;
  545. }
  546. .header .btn {
  547. margin-top: 10px;
  548. float: none !important;
  549. }
  550. .project-image {
  551. margin-bottom: 15px;
  552. }
  553. }
  554. @media (min-width: 1400px) {
  555. .container {
  556. width: 1360px;
  557. max-width: inherit;
  558. }
  559. }