API tools faq
paste
Advertisement
Mark2020H

HTML Cards , Another step into digital advertising and design

Mark2020H
Aug 2nd, 2021
998
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.60 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!-- Written  by MD Harrington BexleyHeath London Kent -->
  4.  
  5. <html lang="en">
  6. <head>
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Document</title>
  11.     <link rel="stylesheet" href="main.css">
  12. </head>
  13. <body>
  14.  
  15.     <div class="title">
  16.        
  17.     </div>
  18.      <div class="container_main" id="content">
  19.            
  20.             <div class="circle1"></div>
  21.             <div class="circle2"></div>
  22.             <div class="circle3"></div>
  23.             <div class="circle4"></div>
  24.             <div class="circle5"></div>
  25.  
  26.             <p class="message">
  27.                    
  28.                 Happy Birthday,<br>
  29.                 Wishing you all the best<br>
  30.                 With many more to come<br>
  31.                 Mark Harrington
  32.  
  33.  
  34.             </p>
  35.  
  36.            
  37.      </div>
  38.     <footer class="panel">Designed By MD Harrington</footer>
  39.  
  40. </body>
  41. </html>
  42.  
  43. <!-- CSS Style sheet to link to -->
  44. @import url('https://fonts.googleapis.com/css2?family=Gravitas+One&display=swap') ;
  45.  
  46.  
  47. /* composed and written by MD Harrington Bexleyheath London */
  48.  
  49. * {
  50.     margin: 0;
  51.     padding: 20px;
  52.   }
  53.  
  54.  
  55.   body{
  56.     margin-top: 20px;
  57.     background-image: url('birthdays/night4.jpg');
  58.     background-repeat: no-repeat;
  59.     background-attachment: fixed;
  60.     background-size: cover;
  61.    
  62.   }
  63.  
  64.  div.container_main{
  65.  
  66.         margin:auto;
  67.         display: flex;
  68.         flex-direction: column;
  69.         flex-flow: ;
  70.         width:500px;
  71.         height: 500px;
  72.         position: relative;
  73.         align-items: center;
  74.         justify-content: center;
  75.         vertical-align: middle;
  76.         border-color: whitesmoke;
  77.         border-style: solid;
  78.  
  79.  
  80.         /*border:2px solid rgba(45, 255, 195, 0.287);*/
  81.         border-radius: 50%;
  82.         box-shadow: 0px 0px 42px 9px rgba(45,255,196,0.9);
  83.  
  84.  }
  85.  
  86.  .title{
  87.   display:flex;
  88.   height:70px;
  89.   background-repeat: no-repeat;
  90.   background-position: center;
  91.  
  92.   margin-bottom: 30px;
  93.   align-content: center;
  94.   align-items: center;
  95.   text-align:center;
  96.  
  97.  
  98.   background-image: url('birthdays/Happy-Birthday-02-08-2021.png');
  99.  
  100.  }
  101.  
  102.   div.circle1{
  103.     margin:0  auto;
  104.     width: 500px;
  105.     height: 500px;
  106.     position:absolute;
  107.    
  108.  
  109.     border-radius: 50%;
  110.  
  111.   }
  112.  
  113.   div.circle2{
  114.  
  115.     width: 5px;
  116.     height: 5px;
  117.     position:absolute;
  118.    
  119.     border-radius: 50%;
  120.     background-image: radial-gradient(
  121.       hsl(180, 100%, 80%),
  122.       hsl(180, 100%, 80%) 10%,
  123.       hsla(180, 100%, 80%, 0) 56%
  124.     );
  125.  
  126.     animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+,
  127.                                                       IE 10+, Safari 5 */
  128.  
  129.   }
  130.  
  131.   div.circle3{
  132.  
  133.     width: 5px;
  134.     height: 5px;
  135.     position:absolute;
  136.    
  137.     border-radius: 50%;
  138.     background-image: radial-gradient(
  139.       hsl(61, 100%, 80%),
  140.       hsl(71, 100%, 80%) 10%,
  141.       hsla(180, 100%, 80%, 0) 56%
  142.     );
  143.  
  144.     animation: myOrbit 8s linear infinite; /* Chrome, Firefox 16+, */
  145.                  
  146.   }
  147.  
  148.  
  149.   div.circle4{
  150.  
  151.     width: 5px;
  152.     height: 5px;
  153.     position:absolute;
  154.    
  155.     border-radius: 50%;
  156.     background-image: radial-gradient(
  157.       hsl(355, 100%, 80%),
  158.       hsl(0, 95%, 60%) 10%,
  159.       hsla(5, 96%, 49%, 0.157) 56%
  160.     );
  161.  
  162.     animation: myOrbit 6s linear infinite; /* Chrome, Firefox 16+, */
  163.                  
  164.   }
  165.   div.circle5{
  166.  
  167.     width: 5px;
  168.     height: 5px;
  169.     position:absolute;
  170.    
  171.     border-radius: 50%;
  172.     background-image: radial-gradient(
  173.       hsl(113, 51%, 57%),
  174.       hsl(120, 80%, 61%) 12%,
  175.       hsla(140, 42%, 46%, 0.061) 56%
  176.     );
  177.  
  178.     animation: myOrbit 16s linear infinite; /* Chrome, Firefox 16+, */
  179.                  
  180.   }
  181.  
  182.  
  183.  p.message
  184.  {
  185.    
  186.     position: absolute;
  187.     text-align: center;
  188.     color:rgb(184, 41, 148);
  189.     vertical-align: center;
  190.    
  191.     font-family: 'Gravitas One', serif , cursive;
  192.     font-size: 40px;
  193.     font-weight:bold;
  194.     text-shadow: 1px 0px 4px rgba(7, 245, 201, 0.698);
  195.     opacity:1;
  196.     animation: fadeinout 10s linear infinite;
  197. }
  198.  
  199. footer.panel{
  200.  
  201.  padding: 30px;
  202.  text-align: center;
  203.  
  204.  color:rgb(241, 245, 245);
  205.  
  206.  height: fit-content;
  207.  
  208.  font-family: 'Gravitas One', serif , cursive;
  209.  font-size: 22px;
  210. }
  211.  
  212.  
  213. @-webkit-keyframes fadeinout {
  214.   0%,100% { opacity: 0; }
  215.   50% { opacity: 1; }
  216.   100% {opacity:0}
  217. }
  218.  
  219.  
  220. @keyframes myOrbit {
  221.     from { transform: rotate(360deg) translateX(250px) rotate(0deg); }
  222.     to   { transform: rotate(0deg) translateX(250px) rotate(360deg); }
  223. }
  224.  
  225.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!