Advertisement
Guest User

freelancer.css

a guest
Jun 24th, 2015
152
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.03 KB | None | 0 0
  1. /*!
  2.  * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
  3.  * Code licensed under the Apache License v2.0.
  4.  * For details, see http://www.apache.org/licenses/LICENSE-2.0.
  5.  */
  6.  
  7. body {
  8.     overflow-x: hidden;
  9. }
  10.  
  11. p {
  12.     font-size: 20px;
  13. }
  14.  
  15. p.small {
  16.     font-size: 16px;
  17. }
  18.  
  19. a,
  20. a:hover,
  21. a:focus,
  22. a:active,
  23. a.active {
  24.     outline: 0;
  25.     color: #18bc9c;
  26. }
  27.  
  28. h1,
  29. h2,
  30. h3,
  31. h4,
  32. h5,
  33. h6 {
  34.     text-transform: uppercase;
  35.     font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  36.     font-weight: 700;
  37. }
  38.  
  39. hr.star-light,
  40. hr.star-primary {
  41.     margin: 25px auto 30px;
  42.     padding: 0;
  43.     max-width: 250px;
  44.     border: 0;
  45.     border-top: solid 5px;
  46.     text-align: center;
  47. }
  48.  
  49. hr.star-light:after,
  50. hr.star-primary:after {
  51.     content: "\f005";
  52.     display: inline-block;
  53.     position: relative;
  54.     top: -.8em;
  55.     padding: 0 .25em;
  56.     font-family: FontAwesome;
  57.     font-size: 2em;
  58. }
  59.  
  60. hr.star-light {
  61.     border-color: #fff;
  62. }
  63.  
  64. hr.star-light:after {
  65.     color: #fff;
  66.     background-color: #18bc9c;
  67. }
  68.  
  69. hr.star-primary {
  70.     border-color: #2c3e50;
  71. }
  72.  
  73. hr.star-primary:after {
  74.     color: #2c3e50;
  75.     background-color: #fff;
  76. }
  77.  
  78. .img-centered {
  79.     margin: 0 auto;
  80. }
  81.  
  82. header {
  83.     text-align: center;
  84.     color: #fff;
  85.     background: #18bc9c;
  86. }
  87.  
  88. header .container {
  89.     padding-top: 100px;
  90.     padding-bottom: 50px;
  91. }
  92.  
  93. header img {
  94.     display: block;
  95.     margin: 0 auto 20px;
  96. }
  97.  
  98. header .intro-text .name {
  99.     display: block;
  100.     text-transform: uppercase;
  101.     font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  102.     font-size: 2em;
  103.     font-weight: 700;
  104. }
  105.  
  106. header .intro-text .skills {
  107.     font-size: 1.25em;
  108.     font-weight: 300;
  109. }
  110.  
  111. @media(min-width:768px) {
  112.     header .container {
  113.         padding-top: 200px;
  114.         padding-bottom: 100px;
  115.     }
  116.  
  117.     header .intro-text .name {
  118.         font-size: 4.75em;
  119.     }
  120.  
  121.     header .intro-text .skills {
  122.         font-size: 1.75em;
  123.     }
  124. }
  125.  
  126. @media(min-width:768px) {
  127.     .navbar-fixed-top {
  128.         padding: 25px 0;
  129.     }
  130.  
  131.     .navbar-fixed-top .navbar-brand {
  132.         font-size: 2em;
  133.     }
  134.  
  135.     .navbar-fixed-top.navbar-shrink {
  136.         padding: 10px 0;
  137.     }
  138.  
  139.     .navbar-fixed-top.navbar-shrink .navbar-brand {
  140.         font-size: 1.5em;
  141.     }
  142. }
  143.  
  144. .navbar {
  145.     text-transform: uppercase;
  146.     font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  147. }
  148.  
  149. .navbar a:focus {
  150.     outline: 0;
  151. }
  152.  
  153. .navbar .navbar-nav {
  154.     letter-spacing: 1px;
  155. }
  156.  
  157. .navbar .navbar-nav li a:focus {
  158.     outline: 0;
  159. }
  160.  
  161. .navbar-default,
  162. .navbar-inverse {
  163.     border: 0;
  164. }
  165.  
  166. section {
  167.     padding: 100px 0;
  168. }
  169.  
  170. section h2 {
  171.     margin: 0;
  172.     font-size: 3em;
  173. }
  174.  
  175. section.success {
  176.     color: #fff;
  177.     background: #18bc9c;
  178.     padding: 25px;
  179. }
  180.  
  181. section.success a,
  182. section.success a:hover,
  183. section.success a:focus,
  184. section.success a:active,
  185. section.success a.active {
  186.     outline: 0;
  187.     color: #2c3e50;
  188. }
  189.  
  190. @media(max-width:767px) {
  191.     section {
  192.         padding: 75px 0;
  193.     }
  194.  
  195.     section.first {
  196.         padding-top: 75px;
  197.     }
  198.    
  199. }
  200.  
  201. #portfolio .portfolio-item {
  202.     right: 0;
  203.     margin: 0 0 15px;
  204. }
  205.  
  206. #portfolio .portfolio-item .portfolio-link {
  207.     display: block;
  208.     position: relative;
  209.     margin: 0 auto;
  210.     max-width: 400px;
  211. }
  212.  
  213. #portfolio .portfolio-item .portfolio-link .caption {
  214.     position: absolute;
  215.     width: 100%;
  216.     height: 100%;
  217.     opacity: 0;
  218.     background: rgba(24,188,156,.9);
  219.     -webkit-transition: all ease .5s;
  220.     -moz-transition: all ease .5s;
  221.     transition: all ease .5s;
  222. }
  223.  
  224. #portfolio .portfolio-item .portfolio-link .caption:hover {
  225.     opacity: 1;
  226. }
  227.  
  228. #portfolio .portfolio-item .portfolio-link .caption .caption-content {
  229.     position: absolute;
  230.     top: 50%;
  231.     width: 100%;
  232.     height: 20px;
  233.     margin-top: -12px;
  234.     text-align: center;
  235.     font-size: 20px;
  236.     color: #fff;
  237. }
  238.  
  239. #portfolio .portfolio-item .portfolio-link .caption .caption-content i {
  240.     margin-top: -12px;
  241. }
  242.  
  243. #portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
  244. #portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
  245.     margin: 0;
  246. }
  247.  
  248. #portfolio * {
  249.     z-index: 2;
  250. }
  251.  
  252. @media(min-width:767px) {
  253.     #portfolio .portfolio-item {
  254.         margin: 0 0 30px;
  255.     }
  256. }
  257.  
  258. .btn-outline {
  259.     margin-top: 15px;
  260.     border: solid 2px #fff;
  261.     font-size: 20px;
  262.     color: #fff;
  263.     background: 0 0;
  264.     transition: all .3s ease-in-out;
  265. }
  266.  
  267. .btn-outline:hover,
  268. .btn-outline:focus,
  269. .btn-outline:active,
  270. .btn-outline.active {
  271.     border: solid 2px #fff;
  272.     color: #18bc9c;
  273.     background: #fff;
  274. }
  275.  
  276. .floating-label-form-group {
  277.     position: relative;
  278.     margin-bottom: 0;
  279.     padding-bottom: .5em;
  280.     border-bottom: 1px solid #eee;
  281. }
  282.  
  283. .floating-label-form-group input,
  284. .floating-label-form-group textarea {
  285.     z-index: 1;
  286.     position: relative;
  287.     padding-right: 0;
  288.     padding-left: 0;
  289.     border: 0;
  290.     border-radius: 0;
  291.     font-size: 1.5em;
  292.     background: 0 0;
  293.     box-shadow: none!important;
  294.     resize: none;
  295. }
  296.  
  297. .floating-label-form-group label {
  298.     display: block;
  299.     z-index: 0;
  300.     position: relative;
  301.     top: 2em;
  302.     margin: 0;
  303.     font-size: .85em;
  304.     line-height: 1.764705882em;
  305.     vertical-align: middle;
  306.     vertical-align: baseline;
  307.     opacity: 0;
  308.     -webkit-transition: top .3s ease,opacity .3s ease;
  309.     -moz-transition: top .3s ease,opacity .3s ease;
  310.     -ms-transition: top .3s ease,opacity .3s ease;
  311.     transition: top .3s ease,opacity .3s ease;
  312. }
  313.  
  314. .floating-label-form-group::not(:first-child) {
  315.     padding-left: 14px;
  316.     border-left: 1px solid #eee;
  317. }
  318.  
  319. .floating-label-form-group-with-value label {
  320.     top: 0;
  321.     opacity: 1;
  322. }
  323.  
  324. .floating-label-form-group-with-focus label {
  325.     color: #18bc9c;
  326. }
  327.  
  328. form .row:first-child .floating-label-form-group {
  329.     border-top: 1px solid #eee;
  330. }
  331.  
  332. footer {
  333.     color: #fff;
  334. }
  335.  
  336. footer h3 {
  337.     margin-bottom: 30px;
  338. }
  339.  
  340. footer .footer-above {
  341.     padding-top: 50px;
  342.     background-color: #2c3e50;
  343. }
  344.  
  345. footer .footer-col {
  346.     margin-bottom: 50px;
  347. }
  348.  
  349. footer .footer-below {
  350.     padding: 25px 0;
  351.     background-color: #233140;
  352. }
  353.  
  354. .btn-social {
  355.     display: inline-block;
  356.     width: 50px;
  357.     height: 50px;
  358.     border: 2px solid #fff;
  359.     border-radius: 100%;
  360.     text-align: center;
  361.     font-size: 20px;
  362.     line-height: 45px;
  363. }
  364.  
  365. .btn:focus,
  366. .btn:active,
  367. .btn.active {
  368.     outline: 0;
  369. }
  370.  
  371. .scroll-top {
  372.     z-index: 1049;
  373.     position: fixed;
  374.     right: 2%;
  375.     bottom: 2%;
  376.     width: 50px;
  377.     height: 50px;
  378. }
  379.  
  380. .scroll-top .btn {
  381.     width: 50px;
  382.     height: 50px;
  383.     border-radius: 100%;
  384.     font-size: 20px;
  385.     line-height: 28px;
  386. }
  387.  
  388. .scroll-top .btn:focus {
  389.     outline: 0;
  390. }
  391.  
  392. .portfolio-modal .modal-content {
  393.     padding: 100px 0;
  394.     min-height: 100%;
  395.     border: 0;
  396.     border-radius: 0;
  397.     text-align: center;
  398.     background-clip: border-box;
  399.     -webkit-box-shadow: none;
  400.     box-shadow: none;
  401. }
  402.  
  403. .portfolio-modal .modal-content h2 {
  404.     margin: 0;
  405.     font-size: 3em;
  406. }
  407.  
  408. .portfolio-modal .modal-content img {
  409.     margin-bottom: 30px;
  410. }
  411.  
  412. .portfolio-modal .modal-content .item-details {
  413.     margin: 30px 0;
  414. }
  415.  
  416. .portfolio-modal .close-modal {
  417.     position: absolute;
  418.     top: 25px;
  419.     right: 25px;
  420.     width: 75px;
  421.     height: 75px;
  422.     background-color: transparent;
  423.     cursor: pointer;
  424. }
  425.  
  426. .portfolio-modal .close-modal:hover {
  427.     opacity: .3;
  428. }
  429.  
  430. .portfolio-modal .close-modal .lr {
  431.     z-index: 1051;
  432.     width: 1px;
  433.     height: 75px;
  434.     margin-left: 35px;
  435.     background-color: #2c3e50;
  436.     -webkit-transform: rotate(45deg);
  437.     -ms-transform: rotate(45deg);
  438.     transform: rotate(45deg);
  439. }
  440.  
  441. .portfolio-modal .close-modal .lr .rl {
  442.     z-index: 1052;
  443.     width: 1px;
  444.     height: 75px;
  445.     background-color: #2c3e50;
  446.     -webkit-transform: rotate(90deg);
  447.     -ms-transform: rotate(90deg);
  448.     transform: rotate(90deg);
  449. }
  450.  
  451. .portfolio-modal .modal-backdrop {
  452.     display: none;
  453.     opacity: 0;
  454. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement