Personal portfolio website created with bootstrap.
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.

450 lines
12 KiB

  1. /*!
  2. * Start Bootstrap - Freelancer v4.0.0-beta (https://startbootstrap.com/template-overviews/freelancer)
  3. * Copyright 2013-2017 Start Bootstrap
  4. * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-freelancer/blob/master/LICENSE)
  5. */
  6. body {
  7. font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  8. overflow-x: hidden; }
  9. p {
  10. font-size: 20px; }
  11. p.small {
  12. font-size: 16px; }
  13. a,
  14. a.active,
  15. a:active,
  16. a:focus,
  17. a:hover {
  18. color: #18BC9C;
  19. outline: none; }
  20. h1,
  21. h2,
  22. h3,
  23. h4,
  24. h5,
  25. h6 {
  26. font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  27. font-weight: 700;
  28. text-transform: uppercase; }
  29. hr.star-light,
  30. hr.star-primary {
  31. max-width: 250px;
  32. margin: 25px auto 30px;
  33. padding: 0;
  34. text-align: center;
  35. border: none;
  36. border-top: solid 5px; }
  37. hr.star-light:after,
  38. hr.star-primary:after {
  39. font-family: FontAwesome;
  40. font-size: 2em;
  41. position: relative;
  42. top: -.8em;
  43. display: inline-block;
  44. padding: 0 0.25em;
  45. content: '\f005'; }
  46. hr.star-light {
  47. border-color: white; }
  48. hr.star-light:after {
  49. color: white;
  50. background-color: #18BC9C; }
  51. hr.star-primary {
  52. border-color: #2C3E50; }
  53. hr.star-primary:after {
  54. color: #2C3E50;
  55. background-color: white; }
  56. .img-centered {
  57. margin: 0 auto; }
  58. section {
  59. padding: 100px 0; }
  60. section h2 {
  61. font-size: 3em;
  62. margin: 0; }
  63. section.success {
  64. color: white;
  65. background: #18BC9C; }
  66. @media (max-width: 767px) {
  67. section {
  68. padding: 75px 0; }
  69. section.first {
  70. padding-top: 75px; } }
  71. .scroll-top {
  72. position: fixed;
  73. z-index: 1049;
  74. right: 2%;
  75. bottom: 2%;
  76. width: 50px;
  77. height: 50px; }
  78. .scroll-top .btn {
  79. font-size: 16px;
  80. line-height: 28px;
  81. width: 50px;
  82. height: 50px;
  83. text-align: center;
  84. border-radius: 100%; }
  85. .scroll-top .btn:focus {
  86. outline: none; }
  87. #mainNav {
  88. font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  89. font-weight: 700;
  90. text-transform: uppercase;
  91. border: none;
  92. background: #2C3E50; }
  93. #mainNav a:focus {
  94. outline: none; }
  95. #mainNav .navbar-brand {
  96. font-size: 1.1rem;
  97. color: white; }
  98. #mainNav .navbar-brand.active, #mainNav .navbar-brand:active, #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
  99. color: white; }
  100. #mainNav .navbar-nav {
  101. letter-spacing: 1px; }
  102. #mainNav .navbar-nav li.nav-item a.nav-link {
  103. color: white; }
  104. #mainNav .navbar-nav li.nav-item a.nav-link:hover {
  105. color: #18BC9C;
  106. outline: none; }
  107. #mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
  108. color: white; }
  109. #mainNav .navbar-toggler {
  110. font-size: 14px;
  111. padding: 11px;
  112. text-transform: uppercase;
  113. color: white;
  114. border-color: white; }
  115. #mainNav .navbar-toggler:focus, #mainNav .navbar-toggler:hover {
  116. color: white;
  117. border-color: #18BC9C;
  118. background-color: #18BC9C; }
  119. @media (min-width: 992px) {
  120. #mainNav {
  121. padding-top: 25px;
  122. padding-bottom: 25px;
  123. -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
  124. -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
  125. transition: padding-top 0.3s, padding-bottom 0.3s; }
  126. #mainNav .navbar-brand {
  127. font-size: 2em;
  128. -webkit-transition: all 0.3s;
  129. -moz-transition: all 0.3s;
  130. transition: all 0.3s; }
  131. #mainNav .navbar-nav > li.nav-item > a.nav-link.active {
  132. color: white;
  133. border-radius: 3px;
  134. background: #18BC9C; }
  135. #mainNav .navbar-nav > li.nav-item > a.nav-link.active:active, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
  136. color: white;
  137. background: #18BC9C; }
  138. #mainNav.navbar-shrink {
  139. padding-top: 10px;
  140. padding-bottom: 10px; }
  141. #mainNav.navbar-shrink .navbar-brand {
  142. font-size: 1.5em; } }
  143. header.masthead {
  144. padding-top: 100px;
  145. padding-bottom: 50px;
  146. text-align: center;
  147. color: white;
  148. background: #18BC9C; }
  149. header.masthead img {
  150. display: block;
  151. margin: 0 auto 20px; }
  152. header.masthead .intro-text .name {
  153. font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  154. font-size: 2em;
  155. font-weight: 700;
  156. display: block;
  157. text-transform: uppercase; }
  158. header.masthead .intro-text .skills {
  159. font-size: 1.25em;
  160. font-weight: 300; }
  161. @media (min-width: 768px) {
  162. header.masthead {
  163. padding-top: 200px;
  164. padding-bottom: 100px; }
  165. header.masthead .intro-text .name {
  166. font-size: 4.75em; }
  167. header.masthead .intro-text .skills {
  168. font-size: 1.75em; } }
  169. #portfolio .portfolio-item {
  170. right: 0;
  171. margin: 0 0 15px; }
  172. #portfolio .portfolio-item .portfolio-link {
  173. position: relative;
  174. display: block;
  175. max-width: 400px;
  176. margin: 0 auto;
  177. cursor: pointer; }
  178. #portfolio .portfolio-item .portfolio-link .caption {
  179. position: absolute;
  180. width: 100%;
  181. height: 100%;
  182. -webkit-transition: all ease 0.5s;
  183. -moz-transition: all ease 0.5s;
  184. transition: all ease 0.5s;
  185. opacity: 0;
  186. background: rgba(24, 188, 156, 0.9); }
  187. #portfolio .portfolio-item .portfolio-link .caption:hover {
  188. opacity: 1; }
  189. #portfolio .portfolio-item .portfolio-link .caption .caption-content {
  190. font-size: 20px;
  191. position: absolute;
  192. top: 50%;
  193. width: 100%;
  194. height: 20px;
  195. margin-top: -12px;
  196. text-align: center;
  197. color: white; }
  198. #portfolio .portfolio-item .portfolio-link .caption .caption-content i {
  199. margin-top: -12px; }
  200. #portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
  201. #portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
  202. margin: 0; }
  203. #portfolio * {
  204. z-index: 2; }
  205. @media (min-width: 767px) {
  206. #portfolio .portfolio-item {
  207. margin: 0 0 30px; } }
  208. .portfolio-modal .modal-dialog {
  209. max-width: 100%;
  210. min-height: 100%;
  211. margin: 0;
  212. padding: 0;
  213. text-align: center;
  214. border: none;
  215. border-radius: 0;
  216. background-clip: border-box;
  217. -webkit-box-shadow: none;
  218. box-shadow: none; }
  219. .portfolio-modal .modal-dialog .modal-content {
  220. padding: 100px 0;
  221. border: 0;
  222. border-radius: 0; }
  223. .portfolio-modal .modal-dialog .modal-content h2 {
  224. font-size: 3em;
  225. margin: 0; }
  226. .portfolio-modal .modal-dialog .modal-content img {
  227. margin-bottom: 30px; }
  228. .portfolio-modal .modal-dialog .modal-content .item-details {
  229. margin: 30px 0; }
  230. .portfolio-modal .close-modal {
  231. position: absolute;
  232. top: 25px;
  233. right: 25px;
  234. width: 75px;
  235. height: 75px;
  236. cursor: pointer;
  237. background-color: transparent; }
  238. .portfolio-modal .close-modal:hover {
  239. opacity: 0.3; }
  240. .portfolio-modal .close-modal .lr {
  241. /* Safari and Chrome */
  242. z-index: 1051;
  243. width: 1px;
  244. height: 75px;
  245. margin-left: 35px;
  246. /* IE 9 */
  247. -webkit-transform: rotate(45deg);
  248. -ms-transform: rotate(45deg);
  249. transform: rotate(45deg);
  250. background-color: #2C3E50; }
  251. .portfolio-modal .close-modal .lr .rl {
  252. /* Safari and Chrome */
  253. z-index: 1052;
  254. width: 1px;
  255. height: 75px;
  256. /* IE 9 */
  257. -webkit-transform: rotate(90deg);
  258. -ms-transform: rotate(90deg);
  259. transform: rotate(90deg);
  260. background-color: #2C3E50; }
  261. .portfolio-modal .modal-backdrop {
  262. display: none;
  263. opacity: 0; }
  264. .floating-label-form-group {
  265. position: relative;
  266. margin-bottom: 0;
  267. padding-bottom: 0.5em;
  268. border-bottom: 1px solid #eeeeee; }
  269. .floating-label-form-group input,
  270. .floating-label-form-group textarea {
  271. font-size: 1.5em;
  272. position: relative;
  273. z-index: 1;
  274. padding-right: 0;
  275. padding-left: 0;
  276. resize: none;
  277. border: none;
  278. border-radius: 0;
  279. background: none;
  280. box-shadow: none !important; }
  281. .floating-label-form-group label {
  282. font-size: 0.85em;
  283. line-height: 1.764705882em;
  284. position: relative;
  285. z-index: 0;
  286. top: 2em;
  287. display: block;
  288. margin: 0;
  289. -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  290. -moz-transition: top 0.3s ease, opacity 0.3s ease;
  291. -ms-transition: top 0.3s ease, opacity 0.3s ease;
  292. transition: top 0.3s ease, opacity 0.3s ease;
  293. vertical-align: middle;
  294. vertical-align: baseline;
  295. opacity: 0; }
  296. .floating-label-form-group:not(:first-child) {
  297. padding-left: 14px;
  298. border-left: 1px solid #eeeeee; }
  299. .floating-label-form-group-with-value label {
  300. top: 0;
  301. opacity: 1; }
  302. .floating-label-form-group-with-focus label {
  303. color: #18BC9C; }
  304. form .row:first-child .floating-label-form-group {
  305. border-top: 1px solid #eeeeee; }
  306. footer {
  307. color: white; }
  308. footer h3 {
  309. margin-bottom: 30px; }
  310. footer .footer-above {
  311. padding-top: 50px;
  312. background-color: #2C3E50; }
  313. footer .footer-col {
  314. margin-bottom: 50px; }
  315. footer .footer-below {
  316. padding: 25px 0;
  317. background-color: #2c3e50; }
  318. .btn-outline {
  319. font-size: 20px;
  320. margin-top: 15px;
  321. transition: all 0.3s ease-in-out;
  322. color: white;
  323. border: solid 2px white;
  324. background: transparent; }
  325. .btn-outline.active, .btn-outline:active, .btn-outline:focus, .btn-outline:hover {
  326. color: #18BC9C;
  327. border: solid 2px white;
  328. background: white; }
  329. .btn-primary {
  330. font-weight: 700;
  331. color: white;
  332. border-color: #2C3E50;
  333. background-color: #2C3E50; }
  334. .btn-primary.focus, .btn-primary:focus {
  335. color: white;
  336. border-color: black;
  337. background-color: #1a252f; }
  338. .btn-primary:hover {
  339. color: white;
  340. border-color: #161f29;
  341. background-color: #1a252f; }
  342. .btn-primary.active, .btn-primary:active,
  343. .open > .btn-primary.dropdown-toggle {
  344. color: white;
  345. border-color: #161f29;
  346. background-color: #1a252f; }
  347. .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
  348. .open > .btn-primary.dropdown-toggle.focus,
  349. .open > .btn-primary.dropdown-toggle:focus,
  350. .open > .btn-primary.dropdown-toggle:hover {
  351. color: white;
  352. border-color: black;
  353. background-color: #0d1318; }
  354. .btn-primary.active, .btn-primary:active,
  355. .open > .btn-primary.dropdown-toggle {
  356. background-image: none; }
  357. .btn-primary.disabled.focus, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled].focus, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover,
  358. fieldset[disabled] .btn-primary.focus,
  359. fieldset[disabled] .btn-primary:focus,
  360. fieldset[disabled] .btn-primary:hover {
  361. border-color: #2C3E50;
  362. background-color: #2C3E50; }
  363. .btn-primary .badge {
  364. color: #2C3E50;
  365. background-color: white; }
  366. .btn-success {
  367. font-weight: 700;
  368. color: white;
  369. border-color: #18BC9C;
  370. background-color: #18BC9C; }
  371. .btn-success.focus, .btn-success:focus {
  372. color: white;
  373. border-color: #0a4b3e;
  374. background-color: #128f76; }
  375. .btn-success:hover {
  376. color: white;
  377. border-color: #11866f;
  378. background-color: #128f76; }
  379. .btn-success.active, .btn-success:active,
  380. .open > .btn-success.dropdown-toggle {
  381. color: white;
  382. border-color: #11866f;
  383. background-color: #128f76; }
  384. .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover,
  385. .open > .btn-success.dropdown-toggle.focus,
  386. .open > .btn-success.dropdown-toggle:focus,
  387. .open > .btn-success.dropdown-toggle:hover {
  388. color: white;
  389. border-color: #0a4b3e;
  390. background-color: #0e6f5c; }
  391. .btn-success.active, .btn-success:active,
  392. .open > .btn-success.dropdown-toggle {
  393. background-image: none; }
  394. .btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover,
  395. fieldset[disabled] .btn-success.focus,
  396. fieldset[disabled] .btn-success:focus,
  397. fieldset[disabled] .btn-success:hover {
  398. border-color: #18BC9C;
  399. background-color: #18BC9C; }
  400. .btn-success .badge {
  401. color: #18BC9C;
  402. background-color: white; }
  403. .btn-social {
  404. font-size: 20px;
  405. line-height: 45px;
  406. display: inline-block;
  407. width: 50px;
  408. height: 50px;
  409. text-align: center;
  410. border: 2px solid white;
  411. border-radius: 100%; }
  412. .btn.active,
  413. .btn:active,
  414. .btn:focus {
  415. outline: none; }