Guest User

CSS

a guest
Oct 4th, 2015
213
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.55 KB | None | 0 0
  1. body {
  2.     background-image:url(dp.jpg);
  3.     background-repeat:no-repeat;
  4.     background-position:center center;
  5.     background-attachment:fixed;
  6.     -webkit-background-size:cover;
  7.     -moz-background-size:cover;
  8.     -o-background-size:cover;
  9.     background-size:cover;
  10.     overflow: hidden;
  11. }
  12. #inner {
  13.     height:auto;
  14.     position: relative;
  15.   top: 40%;
  16.   transform: translateY(-50%);
  17. }
  18. #contents {
  19.     margin: 0 auto;
  20.     width: 1040px;
  21.     height: 100vh;
  22. }
  23. .searchBar {
  24.     border-style: none;
  25.     background-color: rgba(0,0,0,0);
  26.     color:rgb(150,150,150);
  27.     padding-left:10px;
  28.     width: 1040px;
  29.     height: 30px;
  30.     margin-bottom: 10px;
  31.     outline-style: none;
  32.     border: solid 2px white;
  33.     transition: background-color linear 0.2s;
  34. }
  35. .searchBar:focus {
  36.     background-color: white;
  37. }
  38. ul:hover {
  39.     background-color: ;
  40.     color:rgb(255,255,255);
  41. }
  42. ul {
  43.     color:rgba(255,255,255,1);
  44.     list-style-type: none;
  45.     margin: 0;
  46.     padding: 0;
  47.     background-color: rgba(255,255,255,0);
  48.     transition: background-color linear 0.1s;
  49. }
  50. a {
  51.     text-decoration: none;
  52.     font-family: 'Calibri';
  53.     color:rgb(100,50,125);
  54. }
  55. .link {
  56.     padding-top: 6px;
  57.     padding-bottom: 6px;
  58.     font-size: 20px;
  59.     background-color: white;
  60. }
  61. .link:hover {
  62.     /*background-color: #E6E6E6;*/
  63.     background-color: rgba(255,255,255,0.8);
  64.     transition: background-color linear 0.2s;
  65. }
  66. .title {
  67.     font-size: 30px;
  68.     font-family: 'Calibri';
  69.     padding-bottom:2.5px;
  70.     -webkit-touch-callout: none;
  71.     -webkit-user-select: none;
  72.     -khtml-user-select: none;
  73.     -moz-user-select: none;
  74.     -ms-user-select: none;
  75.     user-select: none;
  76.     border:solid 2px white;
  77. }
  78. #block {
  79.     float:left;
  80.  
  81.     margin-right: 10px;
  82.     display: block;
  83.     width: 200px;
  84.     background-color: rgba(255,255,255,0);
  85.     height:auto;
  86.     max-height: 44px;
  87.     text-align: center;
  88.     overflow: hidden;
  89.     cursor: pointer;
  90.     transition: max-height linear 0.2s;
  91. }
  92. #block:hover {
  93.     max-height:300px;
  94. }
  95. @media screen and (max-width:1080px){
  96.     .searchBar {
  97.         width:90vw;
  98.         margin-bottom: 1.25vw;
  99.     }
  100.     #block {
  101.         width:17vw;
  102.         max-height: 43px;
  103.         margin-right: 1.25vw;
  104.     }
  105.     #contents {
  106.         width: 90vw;
  107.     }
  108.     .link {
  109.         font-size: 15px;
  110.     }
  111.     .title {
  112.         font-size: 20px;
  113.         padding-bottom: 8px;
  114.         padding-top: 7px;
  115.     }
  116. }
  117. @media screen and (max-width:540px){
  118.     .searchBar {
  119.         width:90vw;
  120.         margin-bottom: 1.25vw;
  121.         padding-bottom:1px;
  122.     }
  123.     #block {
  124.         width:17vw;
  125.         margin-right: 1.25vw;
  126.         padding-bottom:1px;
  127.         max-height: 42px;
  128.     }
  129.     #contents {
  130.         width: 90vw;
  131.     }
  132.     .link {
  133.         font-size: 15px;
  134.     }
  135.     .title {
  136.         font-size: 15px;
  137.         padding-bottom: 12px;
  138.         padding-top: 9px;
  139.     }
  140. }
Advertisement
Add Comment
Please, Sign In to add comment