Add Things To Your Web Page: 2021

Design #006

Source Code


<!-- Created by sachin-->

  <!DOCTYPE HTML>
    <html>
        <head>
            <title>Searching</title>
			<style>
			

body {
    background: #2b2b2b;
    padding : 0;
    margin : 0;
}
.loader {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translateX(-10%) translateY(-150%);
}
.loader span {
    font-family: arial;
    font-size: 20px;
    color: rgba(255,255,255,.1);
    display: inline-block;
    transition: all .5s;
    animation: animate 2s infinite;
}
.loader span:nth-child(1) {
    animation-delay: .1s;
}
.loader span:nth-child(2) {
    animation-delay: .2s;
}
.loader span:nth-child(3) {
    animation-delay: .3s;
}
.loader span:nth-child(4) {
    animation-delay: .4s;
}
.loader span:nth-child(5) {
    animation-delay: .5s;
}
.loader span:nth-child(6) {
    animation-delay: .6s;
}
.loader span:nth-child(7) {
    animation-delay: .7s;
}
.loader span:nth-child(8) {
    animation-delay: .8s;
}
.loader span:nth-child(9) {
    animation-delay: .9s;
}
@keyframes animate {
    0% {
        color: yellow;
        transform: translate3d (0);
        margin-left: 0;
    }
    25% {
        font-size:25px;
        color: red;
        transform: translate3d (1500px);
        margin-left: 10px;
        text-shadow: 0 15px 5px rgba(0,0,0,1);
    }
    100% {
        color: violet;
        transform: translate3d (0);
        margin-left: 0;
}
			</style>
            
        </head>
    <body>
        <div class="container loader">
            <span>S</span>
            <span>E</span>
            <span>A</span>
            <span>R</span>
            <span>C</span>
            <span>H</span>
            <span>I</span>
            <span>N</span>
            <span>G</span>
            </div>
    </body>
</html>

Design #005

Source Code


<!-- Created by sachin-->

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
   <style type="text/css">
       .dd {
         position: relative;
         display: inline-block;
      }
      .dd-btn {
         padding: 15px;
         text-align: center;
         background: #173459;
         border: none;
         width: 300px;
         color: #f8f9f9;
      }
      .dd-content {
         position: absolute;
         width: 100%;
         box-shadow: 0 18px 36px rgba(0,0,0,0.30), 0 14px 11px rgba(0,0,0,0.22);
         height: 0px;
         transition: height 1s;
         overflow: hidden;
      }
      .dd:hover > .dd-content {
         height: 150px;
      }
      .dd-content > a {
         display: block;
         padding: 15px;
         text-decoration: none;
         color: black;
      }
	  </style>
</head>
<body>
<center>
   <div class="dd">
      <button class="dd-btn"> Menu (Hover On Me)</button>
      <div class="dd-content">
        
         <a href="#"> Home </a>
         <a href="#"> About </a>
         <a href="#"> Articles </a>
      </div>
   </div>
   </center>
</body>
</html>

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>

Sunday 3 January 2021

Design #006

Source Code

Design #005

Source Code

Design #004

Source Code