SHARE
TWEET

Untitled

a guest Jun 26th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <link rel="stylesheet" href="css/style.css">
  8.         <title>BOOM Design</title>
  9.     </head>
  10.     <body>
  11.         <div class="container">
  12.             <figure class="bottom-triangle">
  13.                 <img src="img/triangle1.svg" alt="">
  14.             </figure>
  15.             <figure class="top-triangle">
  16.                 <img src="img/triangle2.svg" alt="">
  17.             </figure>
  18.           <figure class="boomlogo">
  19.               <img src="img/logo.svg" alt="">
  20.           </figure>
  21.         </div>
  22.     </body>
  23.     </html>
  24.      
  25. html, body{
  26.       padding: 0;
  27.       margin: 0;
  28.       overflow: hidden;
  29.     }
  30.  
  31.     .container{
  32.       background-image: url(../img/background1.jpg);
  33.       background-repeat: no-repeat;
  34.       background-size: cover;
  35.       opacity: 1;
  36.       width: 100vw;
  37.       height: 100vh;
  38.       position: relative;
  39.       -webkit-animation-name: opening;
  40.       -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  41.       animation-name: opening;
  42.       animation-duration: 1s;
  43.       z-index: 0;
  44.     }
  45.  
  46.     /* Safari 4.0 - 8.0 */
  47.     @-webkit-keyframes opening {
  48.       from {opacity: 0;}
  49.       to {opacity: 1;}
  50.     }
  51.  
  52.     /* Standard syntax */
  53.     @keyframes opening {
  54.       from {opacity: 0;}
  55.       to {opacity: 1;}
  56.     }
  57.  
  58.     .bottom-triangle {
  59.       margin: 0;
  60.       padding: 0;
  61.       position: absolute;
  62.       top: 0;
  63.       bottom: 0;
  64.       left: 0;
  65.       -webkit-animation-name: entering; /* Safari 4.0 - 8.0 */
  66.       -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  67.       animation-name: entering;
  68.       animation-duration: 1s;
  69.       z-index: 2;
  70.     }
  71.  
  72.     .top-triangle {
  73.       margin: 0;
  74.       padding: 0;
  75.       position: absolute;
  76.       top: 0;
  77.       bottom: 0;
  78.       left: 0;
  79.       -webkit-animation-name: entering2; /* Safari 4.0 - 8.0 */
  80.       -webkit-animation-duration: 1.5s; /* Safari 4.0 - 8.0 */
  81.       animation-name: entering2;
  82.       animation-duration: 1.5s;
  83.       z-index: 3;
  84.     }
  85.  
  86.     .boomlogo {
  87.       margin: 0;
  88.       padding: 0;
  89.       position: absolute;
  90.       opacity: 1;
  91.       top: 0;
  92.       bottom: 0;
  93.       left: 0;
  94.       -webkit-animation-name: entering3; /* Safari 4.0 - 8.0 */
  95.       -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
  96.       animation-name: entering3;
  97.       animation-duration: 2s;
  98.       z-index: 4;
  99.     }
  100.  
  101.  
  102.     /* Safari 4.0 - 8.0 */
  103.     @-webkit-keyframes entering {
  104.       from {left: -445px;}
  105.       to {left: 0;}
  106.     }
  107.  
  108.     /* Standard syntax */
  109.     @keyframes entering {
  110.       from {left: -445px;}
  111.       to {left: 0;}
  112.     }
  113.  
  114.     /* Safari 4.0 - 8.0 */
  115.     @-webkit-keyframes entering2 {
  116.       from {left: -900px;}
  117.       to {left: 0;}
  118.     }
  119.  
  120.     /* Standard syntax */
  121.     @keyframes entering2 {
  122.       from {left: -900px;}
  123.       to {left: 0;}
  124.     }
  125.  
  126.     /* Safari 4.0 - 8.0 */
  127.     @-webkit-keyframes entering3 {
  128.       from {opacity: 0;}
  129.       to {opacity: 1;}
  130.     }
  131.  
  132.     /* Standard syntax */
  133.     @keyframes entering3 {
  134.       from {opacity: 0;}
  135.       to {opacity: 1;}
  136.     }
  137.  
  138.     .container figure img {
  139.       height: 100vh;
  140.     }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top