Add Things To Your Web Page: Design #004

Source Code


<!-- Created by sachin-->


<!DOCTYPE html>
<html>
    <head>
        <title>New Year</title>
		<style>
		
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
@import url('https://fonts.googleapis.com/css?family=Metal+Mania');
'
body,h3{
    margin: 0;
    padding: 0;
    font-family: 'Metal Mania', cursive;
    background-color:#000;
}
.text-container h3{
    font-size: 40px;
    color: rgba(225,225,225,.1);
    background-image: url(https://dl.dropbox.com/s/q0307y3qfx57i0u/images.jpeg?);
    background-repeat: repeat-x ;
    -webkit-background-clip: text; 
    color:transparent ;
    -webkit-animation: slide 15s linear infinite;
    
}
@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -500px 0; }
}
.text-container{
    margin-top:25%;
    text-align: center;
    
}





body {
  margin: 0;
  padding: 0;
  background-image: url("https://s9.postimg.org/w3z61lnxb/holi.jpg");
  background-size: cover;
}

.glowing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.glowing span {
  color: #fff;
  font-family: verdana;
  font-size: 30px;
  color: #fff;
  display: inline-block;
  animation: animate 1s linear infinite;
  width: 30px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 25px solid rgba(255, 255, 255, 0.4);
  margin: 0 -2.5px;
}
@keyframes animate {
  0% {
    color: #f00;
    box-shadow: 0 2px 10px rgba(255, 0, 0, 1);
    border: 2px solid rgba(255, 0, 0, 1);
  }
  33.3% {
    color: #ff0;
    box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
    border: 2px solid rgba(255, 255, 0, 1);
  }
  66.6% {
    color: #0f0;
    box-shadow: 0 2px 10px rgba(0, 255, 0, 1);
    border: 2px solid rgba(0, 255, 0, 1);
  }
  100% {
    color: #f00;
    box-shadow: 0 2px 10px rgba(255, 0, 0, 1);
    border: 2px solid rgba(255, 0, 0, 1);
  }
}
.glowing span:nth-child(1) {
  animation-delay: 0s;
}
.glowing span:nth-child(2) {
  animation-delay: 0.1s;
}
.glowing span:nth-child(3) {
  animation-delay: 0.2s;
}
.glowing span:nth-child(4) {
  animation-delay: 0.3s;
}
.glowing span:nth-child(5) {
  animation-delay: 0.4s;
}
.glowing span:nth-child(6) {
  animation-delay: 0.5s;
}
.glowing span:nth-child(7) {
  animation-delay: 0.6s;
}
.glowing span:nth-child(8) {
  animation-delay: 0.7s;
}
.glowing span:nth-child(9) {
  animation-delay: 0.8s;
}



		</style>
    </head>
    <body>
 
 
  <div class="glowing">
    <span>H</span><span>A</span><span>P</span><span>P</span><span>Y</span><span>-</span><span>N</span><span>E</span><span>W</span><span>-</span><span>Y</span><span>E</span><span>A</span><span>R</span><br/>
    <span>H</span>
    <span>A</span>
    <span>V</span>
    <span>E</span><br/>
    <span>A</span> <br/>
    <span>C</span>
    <span>O</span>
    <span>L</span>
    <span>O</span>
    <span>R</span><br/>
    <span>F</span>
    <span>U</span>
    <span>L</span> <br/>
    <span>L</span>
    <span>I</span>
    <span>F</span>
    <span>E</span>
  </div>
    </body>
</html>
Add Things To Your Web Page

Sunday 3 January 2021

Design #004

Source Code

No comments:

Post a Comment
