Advertisement
Guest User

CSS

a guest
Mar 29th, 2017
110
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.10 KB | None | 0 0
  1. html, body{
  2.             height: 100%;
  3.         }
  4.             body{
  5.                 background-color: #f0040f;
  6.                 -webkit-animation: color 5s ease-in  0s infinite alternate;
  7.                 -moz-animation: color 5s linear  0s infinite alternate;
  8.                 animation: color 5s linear  0s infinite alternate;
  9.                 background-size: cover;
  10.             }
  11.                 /* Animasi + Prefix untuk browser */
  12.             @-webkit-keyframes color {
  13.         0% { background-color: #f1c40f; }
  14.         32% { background-color: #e74c3c; }
  15.         55% { background-color: #9b59b6; }
  16.         76% { background-color: #16a085; }
  17.         100% { background-color: #2ecc71; }
  18.     }
  19.     @-moz-keyframes color {
  20.          0% { background-color: #f1c40f; }
  21.         32% { background-color: #e74c3c; }
  22.         55% { background-color: #9b59b6; }
  23.         76% { background-color: #16a085; }
  24.         100% { background-color: #2ecc71; }
  25.     }
  26.     @keyframes color {
  27.       0% { background-color: #f1c40f; }
  28.         32% { background-color: #e74c3c; }
  29.         55% { background-color: #9b59b6; }
  30.         76% { background-color: #16a085; }
  31.         100% { background-color: #2ecc71; }
  32.     }
  33.             header{
  34.                 width: 98%;
  35.                 height: 60px;
  36.                 font-family: arial;
  37.                 position:fixed;
  38.                 font-size: 20px;
  39.                 color: white;
  40.                 margin: auto;
  41.                 background-color: black;
  42.                 opacity: 0.7;
  43.             }
  44.  
  45.  
  46.             header .nav{
  47.                 padding-left: 40%;
  48.                 padding-top: 20px;
  49.             }
  50.            
  51.             a{
  52.                 text-decoration: none;
  53.                 color: white;
  54.             }
  55.             header .nav a{
  56.                 text-decoration: none;
  57.                 color:white;
  58.             }
  59.             header .nav a:hover{
  60.                 color: blue;
  61.  
  62.             }
  63.             header img{
  64.                 float: left;
  65.                 padding-left: 5%;
  66.                 height:100%;
  67.             }
  68.             footer{
  69.                 width: 100%;
  70.                 height: 5%;
  71.                 font-family: arial;
  72.                 font-size: 120%;
  73.                 color: white;
  74.                 text-align: center;
  75.             }
  76.             #gambar
  77.             {
  78.                 width: 70%;
  79.             }
  80.             .isi1{
  81.                 margin-top: 5%;
  82.                 margin-left: 30%;
  83.                 width: 35%;
  84.                 color: blue;
  85.                 background:rgba(0,0,0,0.6);
  86.                 text-align: left;
  87.                 padding: 1%;
  88.                 font-family: arial;
  89.  
  90.             }
  91.             .isi{
  92.                     min-height: 92%;
  93.  
  94.             }
  95.             .welcome{
  96.                 margin-top: 5%;
  97.                 margin-left: 30%;
  98.                 width: 35%;
  99.                 color: blue;
  100.                 background:rgba(0,0,0,0.6);
  101.                 text-align: center;
  102.                 padding: 1%;
  103.                 font-family: arial;
  104.             }
  105.             .welcome img{
  106.                 width: 70%;
  107.             }
  108.             .go {
  109.                 margin-top: 1%;
  110.                 margin-left: 43%;
  111.                 background-color: blue;
  112.                 color: #fff;
  113.                 background-repeat: no-repeat;
  114.                 border: 1px solid #e1e8ed;
  115.                 border-radius:8px;
  116.                 cursor: pointer;
  117.                 display: inline-block;
  118.                 font-size: 20px;
  119.                 line-height: normal;
  120.                 padding: 8px 16px;
  121.                 position: relative;
  122.             }
  123.             .go:hover{
  124.                 background-color: red;
  125.             }
  126.  
  127.             /* responnsiv */
  128.             @media (max-width: 720px){
  129.                 header a{
  130.                     display: none;
  131.                 }
  132.                 .nav{
  133.                     display: none;
  134.                 }
  135.                 .welcome{
  136.                     width: 100%;
  137.                     font-size: 20px;
  138.                     text-align: center;
  139.                         }
  140.                     .welcome h1,img{
  141.                     text-align: center;
  142.                     margin: auto;
  143.                     width: 80%;
  144.  
  145.                     }
  146.                 .go{
  147.                     width: 80%;
  148.                 }
  149.                 header{
  150.                     display: none;
  151.                 }
  152.            
  153.             }
  154.             @media (min-width: 720px) and (max-width: 992px)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement