Advertisement
pan7nikt

css\galeria2.css

Oct 4th, 2022
779
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.21 KB | None | 0 0
  1. #container {
  2.   text-align: center;
  3.   clear: both;
  4.   height: 2160px;
  5.   width: 960px;
  6.   border-radius: 5px;
  7.   border-style: solid;
  8.   border-color: black;
  9.   border-width: 2px;
  10.   background-color: #82bede;
  11. }
  12.  
  13. #banner {
  14.   height: 12%;
  15.   width: 100%;
  16.   float: left;
  17.   background-color: #82bede;
  18. }
  19.  
  20. #banner img {
  21.   width: 100%;
  22.   height: 100%;
  23. }
  24.  
  25. #navbar {
  26.   height: 2%;
  27.   width: 100%;
  28.   float: left;
  29.   background-color: #355e70;
  30. }
  31.  
  32. /*menu*/
  33. #menu2 {
  34.   text-align: center;
  35.   margin: 50px 0 50px 0;
  36. }
  37.  
  38. #menu2 ul {
  39.   margin: 0;
  40.   list-style: none;
  41.   display: inline-block;
  42.   white-space: nowrap;
  43. }
  44.  
  45. .topbutton {
  46.   border: none;
  47.   background-color: #98c0cf;
  48.   margin-left: 7px;
  49.   position: relative;
  50.   top: 50%;
  51.   transform: translateY(-50%);
  52.   float: left;
  53.   width: 100px;
  54.   height: 25px;
  55. }
  56.  
  57. #menu2 li {
  58.   display: inline;
  59. }
  60.  
  61. #menu2 li a {
  62.   display: block;
  63.   margin-top: 6px;
  64.   height: 30px;
  65.   float: left;
  66.   color: #000;
  67.   text-decoration: none;
  68.   font: normal 14px/22px 'latomedium', arial,sans-serif;
  69.   padding: 0 0 0 12px;
  70.   background: url(../img/pro_nine_0a.gif) no-repeat;
  71. }
  72.  
  73. #menu2 li a b {
  74.   height: 100%;
  75.   float: left;
  76.   display: block;
  77.   background: url(../img/pro_nine_0.gif) right top;
  78.   padding: 0 12px 0 0;
  79. }
  80.  
  81. #menu2 li a:hover {
  82.   background: url(../img/pro_nine_1a.gif) no-repeat;
  83. }
  84.  
  85. #menu2 li a:hover b {
  86.   background: url(../img/pro_nine_1.gif) right top;
  87. }
  88.  
  89. /*galeria*/
  90. body {
  91.   min-height: 100vh;
  92.   display: grid;
  93.   place-content: start center;
  94.   background: linear-gradient(#fff, #aaa, #fff);
  95. }
  96.  
  97. .container ul {
  98.   display: table;
  99.   padding: 10px 0 10px 0;
  100.   list-style: none;
  101.   width: 600px;
  102.   margin: 0 auto;
  103. }
  104.  
  105. .container ul:hover li {
  106.   opacity: 0.8;
  107.   -webkit-filter: blur(5px);
  108.   filter: blur(5px);
  109. }
  110.  
  111. .container ul li {
  112.   cursor: pointer;
  113.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  114.   float: left;
  115.   margin: 1px;
  116.   width: 180px;
  117.   height: 180px;
  118.   opacity: 1;
  119.   transition: all 0.3s linear;
  120. }
  121.  
  122. .container ul li:hover {
  123.   box-shadow: 0 5px 15px gba(0, 0, 0, 0.4);
  124.   opacity: 1;
  125.   transform: scale(1.08);
  126.   -webkit-filter: blur(0);
  127.   filter: blur(0);
  128. }
  129.  
  130. .container img {
  131.   max-width: 180px;
  132.   max-height: 180px;
  133. }
  134.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement