kuchuz

Tugas 3 PWEB-D style.css

Oct 27th, 2021
724
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. header,
  2. section,
  3. footer,
  4. aside,
  5. nav,
  6. article,
  7. figure,
  8. figcaption {
  9.     display: block;
  10. }
  11.  
  12. body {
  13.     color: #a1650c80;
  14.     background-color: #e6d0a5;
  15.     background-image: url("bg.png");
  16.     background-position: center;
  17.     font-family: Georgia, Times, serif;
  18.     line-height: 1.4em;
  19.     margin: 0px;
  20. }
  21.  
  22. .wrapper {
  23.     width: 940px;
  24.     margin: 20px auto 20px auto;
  25.     border: 2px solid #000000;
  26.     background-color: #e6d0a5;
  27. }
  28.  
  29. header {
  30.     height: 160px;
  31.     background-image: url("head.png");
  32.     background-repeat: no-repeat;
  33.     background-size: cover;
  34. }
  35.  
  36. h1 {
  37.     text-indent: -9999px;
  38.     width: 940px;
  39.     height: 130px;
  40.     margin: 0px;
  41. }
  42.  
  43. nav,
  44. footer {
  45.     clear: both;
  46.     color: #ffffff;
  47.     background-color: #5e2f09;
  48.     height: 30px;
  49. }
  50.  
  51. nav ul {
  52.     margin: 0px;
  53.     padding: 5px 0px 4px 30px;
  54. }
  55.  
  56. nav li {
  57.     display: inline;
  58.     margin-right: 40px;
  59. }
  60.  
  61. nav li a {
  62.     color: #ffffff;
  63. }
  64.  
  65. nav li a:hover,
  66. nav li a.current {
  67.     color: #000000;
  68. }
  69.  
  70. article {
  71.     clear: both;
  72.     overflow: auto;
  73.     width: 100%
  74. }
  75.  
  76. hgroup {
  77.     margin-top: 40px;
  78. }
  79.  
  80. figure {
  81.     float: left;
  82.     width: 290px;
  83.     height: 220px;
  84.     padding: 5px;
  85.     margin: 20px;
  86.     border: 1px solid #eeeeee;
  87. }
  88.  
  89. figcaption {
  90.     font-size: 90%;
  91.     text-align: left;
  92. }
  93.  
  94. aside {
  95.     width: 230px;
  96.     float: right;
  97.     Padding: 0px 0px 0px 20px;
  98. }
  99.  
  100. aside section a {
  101.     display: block;
  102.     padding: 10px;
  103.     border-bottom: 1px solid #eeeeee;
  104. }
  105.  
  106. aside section o:hover {
  107.     color: #850823;
  108.     background-color: #efefef;
  109. }
  110.  
  111. a {
  112.     color: #ac0d0d;
  113.     text-decoration: none;
  114. }
  115.  
  116. h1,
  117. h2,
  118. h3 {
  119.     font-weight: normal;
  120. }
  121.  
  122. h2 {
  123.     margin: 1em 0px 5px 0px;
  124.     padding: 0px;
  125. }
  126.  
  127. h3 {
  128.     margin: 0px 0px 10px 0px;
  129.     color: #83060c
  130. }
  131.  
  132. aside h2 {
  133.     padding: 30px 0px 10px 0px;
  134.     color: #790b0b;
  135. }
  136.  
  137. footer {
  138.     font-size: 80%;
  139.     padding: 7px 0px 0px 20px;
  140. }
  141.  
  142. .fig-img {
  143.     width: 100%;
  144. }
  145.  
  146. .slideshow-container {
  147.     width: 100%;
  148.     height: 300px;
  149.     position: relative;
  150.     margin: auto;
  151. }
  152.  
  153. .mySlides {
  154.     display: none;
  155.     height: 100%;
  156.     overflow: hidden;
  157.     position: relative;
  158. }
  159.  
  160. .prev,
  161. .next {
  162.     cursor: pointer;
  163.     position: absolute;
  164.     top: 50%;
  165.     width: auto;
  166.     margin-top: -22px;
  167.     padding: 16px;
  168.     color: rgb(174, 180, 86);
  169.     background-color: rgba(0, 0, 0, 0.5);
  170.     font-weight: bold;
  171.     font-size: 18px;
  172.     transition: 0.6s ease;
  173.     border-radius: 0 3px 3px 0;
  174.     user-select: none;
  175. }
  176.  
  177. .next {
  178.     right: 0;
  179.     border-radius: 3px 0 0 3px;
  180. }
  181.  
  182. .prev:hover,
  183. .next:hover {
  184.     background-color: rgba(0, 0, 0, 0.8);
  185. }
  186.  
  187. .dot {
  188.     cursor: pointer;
  189.     height: 15px;
  190.     width: 15px;
  191.     margin: 0 2px;
  192.     background-color: #bbb;
  193.     border-radius: 50%;
  194.     display: inline-block;
  195.     transition: background-color 0.6s ease;
  196. }
  197.  
  198. .active,
  199. .dot:hover {
  200.     background-color: #472d05;
  201. }
  202.  
  203. .fade {
  204.     -webkit-animation-name: fade;
  205.     -webkit-animation-duration: 1.5s;
  206.     animation-name: fade;
  207.     animation-duration: 1.5s;
  208. }
  209.  
  210. @-webkit-keyframes fade {
  211.     from {
  212.         opacity: .4
  213.     }
  214.     to {
  215.         opacity: 1
  216.     }
  217. }
  218.  
  219. @keyframes fade {
  220.     from {
  221.         opacity: .4
  222.     }
  223.     to {
  224.         opacity: 1
  225.     }
  226. }
  227.  
  228. .slideshow-img {
  229.     width: 100%;
  230.     position: absolute;
  231.     top: 50%;
  232.     left: 50%;
  233.     transform: translate(-50%, -50%);
  234. }
  235.  
  236. section {
  237.     width: 100%;
  238.     margin-bottom: 20px;
  239. }
  240.  
  241. .container {
  242.     width: 659px;
  243.     float: left;
  244.     border-right: 1px solid #e6d0a5;
  245. }
  246.  
  247. .youtube-video {
  248.     display: block;
  249.     margin: auto;
  250. }
  251.  
  252.  
RAW Paste Data