Advertisement
Guest User

sytyle.css

a guest
Sep 1st, 2016
191
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.09 KB | None | 0 0
  1. html,
  2. body {
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6.  
  7. #logo-image {
  8.     width: 350px;
  9.     height: 350px;
  10. }
  11.  
  12. body {
  13.     font-family: Merriweather,'Helvetica Neue',Arial,sans-serif;
  14. }
  15.  
  16. hr {
  17.     max-width: 50px;
  18.     border-color: #fff;
  19.     border-width: 3px;
  20. }
  21. hr.left{
  22.     margin-left: 20px;
  23. }
  24.  
  25. a {
  26.     color: #d00;
  27.     -webkit-transition: all .35s;
  28.     -moz-transition: all .35s;
  29.     transition: all .35s;
  30. }
  31.  
  32. a:hover,
  33. a:focus {
  34.     color: #eb3812;
  35. }
  36.  
  37. h1,
  38. h2,
  39. h3,
  40. h4,
  41. h5,
  42. h6 {
  43.     font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  44. }
  45.  
  46. h2.gallery-heading {
  47.     color: #fff;
  48. }
  49.  
  50. p {
  51.     margin-bottom: 20px;
  52.     font-size: 16px;
  53.     line-height: 1.5;
  54.     font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  55. }
  56.  
  57. .bg-primary {
  58.     background-color: #777;
  59. }
  60.  
  61. .bg-primary > p {
  62.     color: black;
  63. }
  64.  
  65. .bg-dark {
  66.     color: #fff;
  67.     background-color: #222;
  68. }
  69.  
  70. .include-gallery {
  71.     margin-bottom: 0;
  72.     padding: 0;
  73.     width: 100%;
  74.     border-bottom: 10px solid #444;
  75.     border-top: 10px solid #444;
  76.     height: 100%;
  77. }
  78.  
  79. section {
  80.     padding: 100px 0;
  81. }
  82.  
  83. section#about{
  84.     background: #222;
  85.     border-top: 10px solid #444;
  86.     border-bottom: 10px solid #444;
  87.  
  88. }
  89.  
  90. section#gallery{
  91.     background: #222;
  92. }
  93.  
  94. aside {
  95.     padding: 20px;
  96.     background-color: #aaa;
  97. }
  98.  
  99. aside#account {
  100.     padding: 50px;
  101.     border-bottom: 10px solid #444;
  102. }
  103.  
  104. .modal-header {
  105.     background-color: white;
  106. }
  107.  
  108. .portfolio-modal .close-modal{
  109.     position:absolute;
  110.     width:75px;
  111.     height:75px;
  112.     background-color:transparent;
  113.     top:25px;
  114.     right:25px;
  115.     cursor:pointer
  116. }
  117.  
  118. .portfolio-modal .close-modal:hover{
  119.     opacity:.3
  120. }
  121. .portfolio-modal .close-modal .lr{
  122.     height:75px;
  123.     width:1px;
  124.     margin-left:35px;
  125.     background-color:#fff;
  126.     transform:rotate(45deg);
  127.     -ms-transform:rotate(45deg);
  128.     -webkit-transform:rotate(45deg);
  129.     z-index:1051
  130. }
  131. .portfolio-modal .close-modal .lr .rl{
  132.     height:75px;
  133.     width:1px;
  134.     background-color:#fff;
  135.     transform:rotate(90deg);
  136.     -ms-transform:rotate(90deg);
  137.     -webkit-transform:rotate(90deg);
  138.     z-index:1052
  139. }
  140.  
  141. .modal-content {
  142.     padding-top: 100px;
  143.     background-color: #222;
  144. }
  145. .modal-content .modalText{
  146.     color: #eee;
  147. }
  148.  
  149. .no-padding {
  150.     padding: 0;
  151. }
  152. .text-danger {
  153.     color: red;
  154. }
  155.  
  156. .navbar-default {
  157.     border-color: rgba(34,34,34,.05);
  158.     font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  159.     background-color: #fff;
  160.     -webkit-transition: all .35s;
  161.     -moz-transition: all .35s;
  162.     transition: all .35s;
  163. }
  164.  
  165. .navbar-default .navbar-header .navbar-brand {
  166.     text-transform: uppercase;
  167.     font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  168.     font-weight: 700;
  169.     color: #d00;
  170. }
  171.  
  172. .navbar-default .navbar-header .navbar-brand:hover,
  173. .navbar-default .navbar-header .navbar-brand:focus {
  174.     color: #eb3812;
  175. }
  176.  
  177. .navbar-default .nav > li>a,
  178. .navbar-default .nav>li>a:focus {
  179.     text-transform: uppercase;
  180.     font-size: 13px;
  181.     font-weight: 700;
  182.     color: #222;
  183. }
  184.  
  185. .navbar-default .nav > li>a:hover,
  186. .navbar-default .nav>li>a:focus:hover {
  187.     color: #d00;
  188. }
  189.  
  190. .navbar-default .nav > li.active>a,
  191. .navbar-default .nav>li.active>a:focus {
  192.     color: #d00!important;
  193.     background-color: transparent;
  194. }
  195.  
  196. .navbar-default .nav > li.active>a:hover,
  197. .navbar-default .nav>li.active>a:focus:hover {
  198.     background-color: transparent;
  199. }
  200.  
  201. @media(min-width:768px) {
  202.     .navbar-default {
  203.         border-color: rgba(255,255,255,.3);
  204.         background-color: rgba(0,0,0,0.2);
  205.     }
  206.  
  207.     .navbar-default .navbar-header .navbar-brand {
  208.         color: rgba(255,255,255,.7);
  209.     }
  210.  
  211.     .navbar-default .navbar-header .navbar-brand:hover,
  212.     .navbar-default .navbar-header .navbar-brand:focus {
  213.         color: #fff;
  214.     }
  215.  
  216.     .navbar-default .nav > li>a,
  217.     .navbar-default .nav>li>a:focus {
  218.         color: rgba(255,255,255,.7);
  219.     }
  220.  
  221.     .navbar-default .nav > li>a:hover,
  222.     .navbar-default .nav>li>a:focus:hover {
  223.         color: #fff;
  224.     }
  225.  
  226.     .navbar-default.affix {
  227.         border-color: rgba(34,34,34,.05);
  228.         background-color: #fff;
  229.     }
  230.  
  231.     .navbar-default.affix .navbar-header .navbar-brand {
  232.         font-size: 14px;
  233.         color: #d00;
  234.     }
  235.  
  236.     .navbar-default.affix .navbar-header .navbar-brand:hover,
  237.     .navbar-default.affix .navbar-header .navbar-brand:focus {
  238.         color: #eb3812;
  239.     }
  240.  
  241.     .navbar-default.affix .nav > li>a,
  242.     .navbar-default.affix .nav>li>a:focus {
  243.         color: #222;
  244.     }
  245.  
  246.     .navbar-default.affix .nav > li>a:hover,
  247.     .navbar-default.affix .nav>li>a:focus:hover {
  248.         color: #d00;
  249.     }
  250. }
  251.  
  252. header {
  253.     position: relative;
  254.     width: 100%;
  255.     min-height: auto;
  256.     text-align: center;
  257.     color: #fff;
  258.     background-image: url(../img/arabesque-bg.jpg);
  259.     background-position: center;
  260.     -webkit-background-size: cover;
  261.     -moz-background-size: cover;
  262.     background-size: cover;
  263.     -o-background-size: cover;
  264. }
  265.  
  266. header .header-content {
  267.     position: relative;
  268.     width: 100%;
  269.     padding: 100px 15px;
  270.     text-align: center;
  271. }
  272.  
  273. header .header-content .header-content-inner h1 {
  274.     margin-top: 0;
  275.     margin-bottom: 100px;
  276.     text-transform: uppercase;
  277.     font-weight: 700;
  278. }
  279.  
  280. header .header-content .header-content-inner hr {
  281.     margin: 30px auto;
  282. }
  283.  
  284. header .header-content .header-content-inner p {
  285.     margin-bottom: 50px;
  286.     font-size: 16px;
  287.     font-weight: 300;
  288.     color: rgba(255,255,255,.9);
  289. }
  290.  
  291. @media(min-width:768px) {
  292.     header {
  293.         min-height: 100%;
  294.     }
  295.  
  296.     header .header-content {
  297.         position: absolute;
  298.         top: 50%;
  299.         padding: 0 50px;
  300.         -webkit-transform: translateY(-50%);
  301.         -ms-transform: translateY(-50%);
  302.         transform: translateY(-50%);
  303.     }
  304.  
  305.     header .header-content .header-content-inner {
  306.         margin-right: auto;
  307.         margin-left: auto;
  308.         max-width: 1000px;
  309.     }
  310.  
  311.     header .header-content .header-content-inner p {
  312.         margin-right: auto;
  313.         margin-left: auto;
  314.         max-width: 80%;
  315.         font-size: 18px;
  316.     }
  317. }
  318.  
  319. .section-heading {
  320.     margin-top: 0;
  321. }
  322.  
  323. .service-box {
  324.     margin: 50px auto 0;
  325.     max-width: 400px;
  326. }
  327.  
  328. @media(min-width:992px) {
  329.     .service-box {
  330.         margin: 20px auto 0;
  331.     }
  332. }
  333.  
  334. .service-box p {
  335.     margin-bottom: 0;
  336. }
  337.  
  338. .portfolio-box {
  339.     display: block;
  340.     position: relative;
  341.     margin: 0 auto;
  342.     max-width: 650px;
  343. }
  344.  
  345. .portfolio-box .portfolio-box-caption {
  346.     display: block;
  347.     position: absolute;
  348.     bottom: 0;
  349.     width: 100%;
  350.     height: 100%;
  351.     text-align: center;
  352.     color: #fff;
  353.     opacity: 0;
  354.     background: rgba(100,0,0,.7);
  355.     -webkit-transition: all .35s;
  356.     -moz-transition: all .35s;
  357.     transition: all .35s;
  358. }
  359.  
  360. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  361.     position: absolute;
  362.     top: 50%;
  363.     width: 100%;
  364.     text-align: center;
  365.     transform: translateY(-50%);
  366. }
  367.  
  368. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
  369. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  370.     padding: 0 15px;
  371.     font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  372. }
  373.  
  374. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  375.     text-transform: uppercase;
  376.     font-size: 14px;
  377.     font-weight: 600;
  378. }
  379.  
  380. .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  381.     font-size: 18px;
  382. }
  383.  
  384. .portfolio-box:hover .portfolio-box-caption {
  385.     opacity: 1;
  386. }
  387.  
  388. @media(min-width:768px) {
  389.     .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  390.         font-size: 16px;
  391.     }
  392.  
  393.     .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  394.         font-size: 22px;
  395.     }
  396. }
  397.  
  398. .call-to-action h2 {
  399.     margin: 0 auto 20px;
  400. }
  401.  
  402. .text-primary {
  403.     color: #d00;
  404. }
  405.  
  406. .no-gutter > [class*=col-] {
  407.     padding-right: 0;
  408.     padding-left: 0;
  409. }
  410.  
  411. .btn-default {
  412.     border-color: #fff;
  413.     color: #222;
  414.     background-color: #fff;
  415.     -webkit-transition: all .35s;
  416.     -moz-transition: all .35s;
  417.     transition: all .35s;
  418. }
  419.  
  420. .btn-default:hover,
  421. .btn-default:focus,
  422. .btn-default.focus,
  423. .btn-default:active,
  424. .btn-default.active,
  425. .open > .dropdown-toggle.btn-default {
  426.     border-color: #ededed;
  427.     color: #222;
  428.     background-color: #f2f2f2;
  429. }
  430.  
  431. .btn-default:active,
  432. .btn-default.active,
  433. .open > .dropdown-toggle.btn-default {
  434.     background-image: none;
  435. }
  436.  
  437. .btn-default.disabled,
  438. .btn-default[disabled],
  439. fieldset[disabled] .btn-default,
  440. .btn-default.disabled:hover,
  441. .btn-default[disabled]:hover,
  442. fieldset[disabled] .btn-default:hover,
  443. .btn-default.disabled:focus,
  444. .btn-default[disabled]:focus,
  445. fieldset[disabled] .btn-default:focus,
  446. .btn-default.disabled.focus,
  447. .btn-default[disabled].focus,
  448. fieldset[disabled] .btn-default.focus,
  449. .btn-default.disabled:active,
  450. .btn-default[disabled]:active,
  451. fieldset[disabled] .btn-default:active,
  452. .btn-default.disabled.active,
  453. .btn-default[disabled].active,
  454. fieldset[disabled] .btn-default.active {
  455.     border-color: #fff;
  456.     background-color: #fff;
  457. }
  458.  
  459. .btn-default .badge {
  460.     color: #fff;
  461.     background-color: #222;
  462. }
  463.  
  464. .btn-primary {
  465.     border-color: #d00;
  466.     color: #fff;
  467.     background-color: #d00;
  468.     -webkit-transition: all .35s;
  469.     -moz-transition: all .35s;
  470.     transition: all .35s;
  471. }
  472.  
  473. .btn-primary:hover,
  474. .btn-primary:focus,
  475. .btn-primary.focus,
  476. .btn-primary:active,
  477. .btn-primary.active,
  478. .open > .dropdown-toggle.btn-primary {
  479.     border-color: #ed431f;
  480.     color: #fff;
  481.     background-color: #ee4b28;
  482. }
  483.  
  484. .btn-primary:active,
  485. .btn-primary.active,
  486. .open > .dropdown-toggle.btn-primary {
  487.     background-image: none;
  488. }
  489.  
  490. .btn-primary.disabled,
  491. .btn-primary[disabled],
  492. fieldset[disabled] .btn-primary,
  493. .btn-primary.disabled:hover,
  494. .btn-primary[disabled]:hover,
  495. fieldset[disabled] .btn-primary:hover,
  496. .btn-primary.disabled:focus,
  497. .btn-primary[disabled]:focus,
  498. fieldset[disabled] .btn-primary:focus,
  499. .btn-primary.disabled.focus,
  500. .btn-primary[disabled].focus,
  501. fieldset[disabled] .btn-primary.focus,
  502. .btn-primary.disabled:active,
  503. .btn-primary[disabled]:active,
  504. fieldset[disabled] .btn-primary:active,
  505. .btn-primary.disabled.active,
  506. .btn-primary[disabled].active,
  507. fieldset[disabled] .btn-primary.active {
  508.     border-color: #d00;
  509.     background-color: #d00;
  510. }
  511.  
  512. .btn-primary .badge {
  513.     color: #d00;
  514.     background-color: #fff;
  515. }
  516.  
  517. .btn {
  518.     border: 0;
  519.     border-radius: 300px;
  520.     text-transform: uppercase;
  521.     font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
  522.     font-weight: 700;
  523. }
  524.  
  525. .btn-xl {
  526.     padding: 15px 30px;
  527. }
  528.  
  529. ::-moz-selection {
  530.     text-shadow: none;
  531.     color: #fff;
  532.     background: #222;
  533. }
  534.  
  535. ::selection {
  536.     text-shadow: none;
  537.     color: #fff;
  538.     background: #222;
  539. }
  540.  
  541. img::selection {
  542.     color: #fff;
  543.     background: 0 0;
  544. }
  545.  
  546. img::-moz-selection {
  547.     color: #fff;
  548.     background: 0 0;
  549. }
  550.  
  551. body {
  552.     -webkit-tap-highlight-color: #222;
  553. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement