×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: CSS
Posted by: VIGNESHWARAN Ravi
Added: Sep 24, 2017 7:03 AM
Views: 4
Tags: no tags
  1. /* Reset CSS */
  2. html, body, div, span, applet, object, iframe,
  3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  4. a, abbr, acronym, address, big, cite, code,
  5. del, dfn, em, font, img, ins, kbd, q, s, samp,
  6. small, strike, strong, sub, sup, tt, var,
  7. b, u, i, center,
  8. dl, dt, dd, ol, ul, li,
  9. fieldset, form, label, legend,
  10. table, caption, tbody, tfoot, thead, tr, th, td {
  11.         margin: 0;
  12.         padding: 0;
  13.         border: 0;
  14.         outline: 0;
  15.         font-size: 100%;
  16.         vertical-align: baseline;
  17.         background: transparent;
  18. }
  19. body {
  20.         background: #DCDDDF url(https://cdn.pixabay.com/photo/2016/03/26/05/08/fractal-1280069_960_720.jpg);
  21.         background-repeat: no-repeat;
  22.         background-position: center;
  23.         background-size: cover;
  24.         color: #000;
  25.         font: 14px Arial;
  26.         margin: 0 auto;
  27.         padding: 0;
  28.         position: relative;
  29. }
  30. h1{ font-size:28px;}
  31. h2{ font-size:26px;}
  32. h3{ font-size:18px;}
  33. h4{ font-size:16px;}
  34. h5{ font-size:14px;}
  35. h6{ font-size:12px;}
  36. h1,h2,h3,h4,h5,h6{ color:#563D64;}
  37. small{ font-size:10px;}
  38. b, strong{ font-weight:bold;}
  39. a{ text-decoration: none; }
  40. a:hover{ text-decoration: underline; }
  41. .left { float:left; }
  42. .right { float:right; }
  43. .alignleft { float: left; margin-right: 15px; }
  44. .alignright { float: right; margin-left: 15px; }
  45. .clearfix:after,
  46. form:after {
  47.         content: ".";
  48.         display: block;
  49.         height: 0;
  50.         clear: both;
  51.         visibility: hidden;
  52. }
  53. .container { margin: 25px auto; position: relative; width: 900px; }
  54. #content {
  55.         background: #f9f9f9;
  56.         background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  57.         background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  58.         background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  59.         background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  60.         background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  61.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
  62.         -webkit-box-shadow: 0 1px 0 #fff inset;
  63.         -moz-box-shadow: 0 1px 0 #fff inset;
  64.         -ms-box-shadow: 0 1px 0 #fff inset;
  65.         -o-box-shadow: 0 1px 0 #fff inset;
  66.         box-shadow: 0 1px 0 #fff inset;
  67.         border: 1px solid #c4c6ca;
  68.         margin: 0 auto;
  69.         margin-top: 150px;
  70.         padding: 25px 0 0;
  71.         position: relative;
  72.         text-align: center;
  73.         text-shadow: 0 1px 0 #fff;
  74.         width: 400px;
  75. }
  76. #content h1 {
  77.         color: #7E7E7E;
  78.         font: bold 25px Helvetica, Arial, sans-serif;
  79.         letter-spacing: -0.05em;
  80.         line-height: 20px;
  81.         margin: 10px 0 30px;
  82. }
  83. #content h1:before,
  84. #content h1:after {
  85.         content: "";
  86.         height: 1px;
  87.         position: absolute;
  88.         top: 10px;
  89.         width: 27%;
  90. }
  91. #content h1:after {
  92.         background: rgb(126,126,126);
  93.         background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  94.         background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  95.         background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  96.         background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  97.         background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  98.     right: 0;
  99. }
  100. #content h1:before {
  101.         background: rgb(126,126,126);
  102.         background: -moz-linear-gradient(right,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  103.         background: -webkit-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  104.         background: -o-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  105.         background: -ms-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  106.         background: linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
  107.     left: 0;
  108. }
  109. #content:after,
  110. #content:before {
  111.         background: #f9f9f9;
  112.         background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  113.         background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  114.         background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  115.         background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  116.         background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
  117.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
  118.         border: 1px solid #c4c6ca;
  119.         content: "";
  120.         display: block;
  121.         height: 100%;
  122.         left: -1px;
  123.         position: absolute;
  124.         width: 100%;
  125. }
  126. #content:after {
  127.         -webkit-transform: rotate(2deg);
  128.         -moz-transform: rotate(2deg);
  129.         -ms-transform: rotate(2deg);
  130.         -o-transform: rotate(2deg);
  131.         transform: rotate(2deg);
  132.         top: 0;
  133.         z-index: -1;
  134. }
  135. #content:before {
  136.         -webkit-transform: rotate(-3deg);
  137.         -moz-transform: rotate(-3deg);
  138.         -ms-transform: rotate(-3deg);
  139.         -o-transform: rotate(-3deg);
  140.         transform: rotate(-3deg);
  141.         top: 0;
  142.         z-index: -2;
  143. }
  144. #content form { margin: 0 20px; position: relative }
  145. #content form input[type="text"],
  146. #content form input[type="password"] {
  147.         -webkit-border-radius: 3px;
  148.         -moz-border-radius: 3px;
  149.         -ms-border-radius: 3px;
  150.         -o-border-radius: 3px;
  151.         border-radius: 3px;
  152.         -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  153.         -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  154.         -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  155.         -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  156.         box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  157.         -webkit-transition: all 0.5s ease;
  158.         -moz-transition: all 0.5s ease;
  159.         -ms-transition: all 0.5s ease;
  160.         -o-transition: all 0.5s ease;
  161.         transition: all 0.5s ease;
  162.         background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
  163.         border: 1px solid #c8c8c8;
  164.         color: #777;
  165.         font: 13px Helvetica, Arial, sans-serif;
  166.         margin: 0 0 10px;
  167.         padding: 15px 10px 15px 40px;
  168.         width: 80%;
  169. }
  170. #content form input[type="text"]:focus,
  171. #content form input[type="password"]:focus {
  172.         -webkit-box-shadow: 0 0 2px #ed1c24 inset;
  173.         -moz-box-shadow: 0 0 2px #ed1c24 inset;
  174.         -ms-box-shadow: 0 0 2px #ed1c24 inset;
  175.         -o-box-shadow: 0 0 2px #ed1c24 inset;
  176.         box-shadow: 0 0 2px #ed1c24 inset;
  177.         background-color: #fff;
  178.         border: 1px solid #ed1c24;
  179.         outline: none;
  180. }
  181. #username { background-position: 10px 10px !important }
  182. #password { background-position: 10px -53px !important }
  183. #content form input[type="submit"] {
  184.         background: rgb(254,231,154);
  185.         background: -moz-linear-gradient(top,  rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
  186.         background: -webkit-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  187.         background: -o-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  188.         background: -ms-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  189.         background: linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
  190.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
  191.         -webkit-border-radius: 30px;
  192.         -moz-border-radius: 30px;
  193.         -ms-border-radius: 30px;
  194.         -o-border-radius: 30px;
  195.         border-radius: 30px;
  196.         -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  197.         -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  198.         -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  199.         -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  200.         box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
  201.         border: 1px solid #D69E31;
  202.         color: #85592e;
  203.         cursor: pointer;
  204.         float: left;
  205.         font: bold 15px Helvetica, Arial, sans-serif;
  206.         height: 35px;
  207.         margin: 20px 0 35px 15px;
  208.         position: relative;
  209.         text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  210.         width: 120px;
  211. }
  212. #content form input[type="submit"]:hover {
  213.         background: rgb(254,193,81);
  214.         background: -moz-linear-gradient(top,  rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
  215.         background: -webkit-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  216.         background: -o-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  217.         background: -ms-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  218.         background: linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
  219.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
  220. }
  221. #content form div a {
  222.         color: #004a80;
  223.     float: right;
  224.     font-size: 12px;
  225.     margin: 30px 15px 0 0;
  226.     text-decoration: underline;
  227. }
  228. .button {
  229.         background: rgb(247,249,250);
  230.         background: -moz-linear-gradient(top,  rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
  231.         background: -webkit-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
  232.         background: -o-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
  233.         background: -ms-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
  234.         background: linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
  235.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
  236.         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  237.         -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  238.         -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  239.         -o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  240.         box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  241.         -webkit-border-radius: 0 0 5px 5px;
  242.         -moz-border-radius: 0 0 5px 5px;
  243.         -o-border-radius: 0 0 5px 5px;
  244.         -ms-border-radius: 0 0 5px 5px;
  245.         border-radius: 0 0 5px 5px;
  246.         border-top: 1px solid #CFD5D9;
  247.         padding: 15px 0;
  248. }
  249. .button a {
  250.         background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
  251.         color: #7E7E7E;
  252.         font-size: 17px;
  253.         padding: 2px 0 2px 40px;
  254.         text-decoration: none;
  255.         -webkit-transition: all 0.3s ease;
  256.         -moz-transition: all 0.3s ease;
  257.         -ms-transition: all 0.3s ease;
  258.         -o-transition: all 0.3s ease;
  259.         transition: all 0.3s ease;
  260. }
  261. .button a:hover {
  262.         background-position: 0 -135px;
  263.         color: #00aeef;
  264.        
  265. }
  266.