Mark2020H

HTML Cards , Another step into digital advertising and design

Aug 2nd, 2021
640
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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.  
RAW Paste Data