Advertisement
Konark

Untitled

Mar 15th, 2017
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.24 KB | None | 0 0
  1. @import "reset.css";
  2.  
  3. html {
  4.     font-family: Arial, sans-serif;
  5.     color: #6a645a;
  6.     font-size: 14px;
  7. }
  8.  
  9. .header {
  10.     padding-top: 44px;
  11. }
  12.  
  13. .container {
  14.     width: 980px;
  15.     margin: 0 auto;
  16. }
  17.  
  18.     .header .logo {
  19.         float: left;
  20.     }
  21.  
  22.     .menu {
  23.         margin-left: 34px;
  24.         float: left;
  25.     }
  26.  
  27.         .menu .menu-block {
  28.             display: inline-block;
  29.             border-left: 1px solid #eef1f2;
  30.             padding-left: 11px;
  31.             margin-right: 20px;
  32.             vertical-align: top;
  33.         }
  34.  
  35.             .menu .menu-block p {
  36.                 font-size: 14px;
  37.                 color: #48a1f8;
  38.                 font-weight: 700;
  39.             }
  40.  
  41.             .menu .menu-block ul {
  42.                 margin-top: 14px;
  43.             }
  44.  
  45.             .menu .menu-block li a {
  46.                 color: #62737d;
  47.                 font-size: 11px;
  48.             }
  49.  
  50.     .contact {
  51.         float: right;
  52.         width: 135px;
  53.         height: 65px;
  54.         border-radius: 5px;
  55.         background: linear-gradient(to top, #fef6e8, #fffffe);
  56.         -webkit-box-shadow: 0px 3px 10px 0px rgba(242, 235, 220, 0.8);
  57.         -moz-box-shadow:    0px 3px 10px 0px rgba(242, 235, 220, 0.8);
  58.         box-shadow:         0px 3px 10px 0px rgba(242, 235, 220, 0.8);
  59.         padding-top: 7px;
  60.         padding-left: 11px;
  61.         box-sizing: border-box;
  62.     }
  63.  
  64.         .contact .phone {
  65.             background: url("../images/phone.png") left center no-repeat;
  66.             height: 11px;
  67.             font-size: 11px;
  68.             color: #7e929d;
  69.             padding-left: 13px;
  70.             margin-bottom: 6px;
  71.         }
  72.  
  73.         .contact p {
  74.             color: #213c4b;
  75.             font-size: 12px;
  76.         }
  77.  
  78.             .contact p span {
  79.                 color: #48a1f8;
  80.                 font-size: 16px;
  81.                 font-weight: 700;
  82.             }
  83.  
  84.     .inform-ushp {
  85.         height: 806px;
  86.         background: url("../images/bg-inform.jpg") no-repeat;
  87.         text-align: center;
  88.         padding-top: 1px;
  89.         border-bottom: 10px solid #b1a5a4;
  90.     }
  91.  
  92.         .inform-ushp h3 {
  93.             margin-top: 42px;
  94.             color: #635232;
  95.             font-size: 34px;
  96.             font-weight: 700;
  97.         }
  98.  
  99.         .inform-ushp h4 {
  100.             margin-top: 30px;
  101.             color: #635232;
  102.             font-size: 26px;
  103.             font-style: italic;
  104.         }
  105.  
  106.         .inform-ushp p {
  107.             margin-top: 30px;
  108.             font-size: 17px;
  109.             color: #635232;
  110.             line-height: 1.5;
  111.         }
  112.  
  113.     .about-ushp {
  114.         height: 250px;
  115.         background: #fffdf5;
  116.         border-bottom: 10px solid #fffae9;
  117.     }
  118.  
  119.         .about-ushp h3 {
  120.             margin-top: 32px;
  121.             width: 465px;
  122.             color: #635232;
  123.             font-size: 23px;
  124.             border-bottom: 1px solid #e4dab9;
  125.             padding-bottom: 10px;
  126.             margin-bottom: 25px;
  127.             font-weight: 700;
  128.         }
  129.  
  130.         .about-ushp .left_text {
  131.             float: left;
  132.             width: 465px;
  133.         }
  134.  
  135.         .about-ushp .right_text {
  136.             float: right;
  137.             width: 465px;
  138.         }
  139.  
  140.     .tech-ushp {
  141.         padding-top: 43px;
  142.     }
  143.  
  144.         .tech-ushp h3 {
  145.             color: #635232;
  146.             font-size: 31px;
  147.             font-weight: 700;
  148.             text-align: center;
  149.         }
  150.  
  151.         .labels {
  152.             text-align: center;
  153.         }
  154.  
  155. /* Tabs START */
  156. .tabs {
  157.     position: relative;
  158.     margin: 0 auto;
  159.     width: 800px;
  160. }
  161. .tabs label {
  162.     color: #555;
  163.     cursor: pointer;
  164.     display: inline-block;
  165.     padding-right: 11px;
  166.     height: 37px;
  167.     line-height: 37px;
  168.     position: relative;
  169.     top: 2px;
  170.     background: linear-gradient(to top, #fef6e9, #fffdf9);
  171.     text-align: center;
  172.     padding-left: 39px;
  173.     margin-bottom: 14px;
  174.     margin-right: 15px;
  175. }
  176.  
  177. .tabs input {
  178.     position: absolute;
  179.     left: -9999px;
  180. }
  181.  
  182. #tab_1:checked  ~ #tab_l1,
  183. #tab_2:checked  ~ #tab_l2,
  184. #tab_3:checked  ~ #tab_l3,
  185. #tab_4:checked  ~ #tab_l4,
  186. #tab_5:checked  ~ #tab_l5,
  187. #tab_6:checked  ~ #tab_l6,
  188. #tab_7:checked  ~ #tab_l7,
  189. #tab_8:checked  ~ #tab_l8,
  190. #tab_9:checked  ~ #tab_l9,
  191. #tab_10:checked  ~ #tab_l10{
  192.     background: linear-gradient(to top, #ff8c04, #ffae4f);
  193.     border: 1px solid #fff;
  194.     top: 0;
  195.     z-index: 3;
  196.     color: #fff;
  197. }
  198.  
  199. .tech-ushp label span {
  200.     color: #fff;
  201.     position: absolute;
  202.     left: 6px;
  203.     top: 4px;
  204.     line-height: 29px;
  205.     font-size: 21px;
  206.     font-weight: 700;
  207.     width: 29px;
  208.     height: 29px;
  209.     border-radius: 15px;
  210.     display: inline-block;
  211.     background: #ff8a00;
  212. }
  213.  
  214. #tab_1:checked  ~ #tab_l1 span,
  215. #tab_2:checked  ~ #tab_l2 span,
  216. #tab_3:checked  ~ #tab_l3 span,
  217. #tab_4:checked  ~ #tab_l4 span,
  218. #tab_5:checked  ~ #tab_l5 span,
  219. #tab_6:checked  ~ #tab_l6 span,
  220. #tab_7:checked  ~ #tab_l7 span,
  221. #tab_8:checked  ~ #tab_l8 span,
  222. #tab_9:checked  ~ #tab_l9 span,
  223. #tab_10:checked  ~ #tab_l10 span{
  224.     color: #ff8b00;
  225.     position: absolute;
  226.     left: 6px;
  227.     top: 4px;
  228.     line-height: 29px;
  229.     font-size: 21px;
  230.     font-weight: 700;
  231.     width: 29px;
  232.     height: 29px;
  233.     border-radius: 15px;
  234.     display: inline-block;
  235.     background: #fff;
  236. }
  237.  
  238.  
  239.  
  240. .tabs_cont {
  241.     background: #fff;
  242.     position: relative;
  243.     z-index: 2;
  244.     margin-top: 47px;
  245. }
  246.  
  247. .tabs_cont > div {
  248.     position: absolute;
  249.     left: -9999px;
  250.     top: 0;
  251.     opacity: 0;
  252.     -moz-transition: opacity .5s ease-in-out;
  253.     -webkit-transition: opacity .5s ease-in-out;
  254.     transition: opacity .5s ease-in-out;
  255. }
  256. #tab_1:checked ~ .tabs_cont #tab_c1,
  257. #tab_2:checked ~ .tabs_cont #tab_c2,
  258. #tab_3:checked ~ .tabs_cont #tab_c3,
  259. #tab_4:checked ~ .tabs_cont #tab_c4,
  260. #tab_5:checked ~ .tabs_cont #tab_c5,
  261. #tab_6:checked ~ .tabs_cont #tab_c6,
  262. #tab_7:checked ~ .tabs_cont #tab_c7,
  263. #tab_8:checked ~ .tabs_cont #tab_c8,
  264. #tab_9:checked ~ .tabs_cont #tab_c9,
  265. #tab_10:checked ~ .tabs_cont #tab_c10{
  266.     position: static;
  267.     left: 0;
  268.     opacity: 1;
  269. }
  270. /* END Tabs */
  271.  
  272. .tabs_cont h4 {
  273.     font-size: 21px;
  274.     color: #635232;
  275.     font-weight: 700;
  276.     margin-bottom: 15px;
  277. }
  278.  
  279. .tabs_cont .left_text {
  280.     width: 462px;
  281.     float: left;
  282. }
  283.  
  284. .clearfix {
  285.     clear: both;
  286. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement