Add Things To Your Web Page

Sunday 3 January 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 29 September 2019

Design #003

Source Code


<!-- Created by sachin-->

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

    
        <style>
         


#heart {
    position: relative;
    width: 100px;
    height: 90px;
    animation: heartbeat 1s infinite;
    margin:0 auto
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #c33;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}




@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}
         
            
        </style>  <div id="heart"></div><br/>

    </body>
</html>

Wednesday 25 September 2019

Design #002

Name fading

W E L C O M E

Source Code


<!-- Created by sachin-->

<!DOCTYPE html>
<html >
<head>

  <title>Loading Animation CSS</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">


  
</head>
<style>
    @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height:50%;
  background: #000;
  z-index: 9999;
}

.loading-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #fff;
  font-family: 'Quattrocento Sans', sans-serif;
}
.loading-text span:nth-child(1) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
          animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
          animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
          animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
          animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
          animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
          animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
  -webkit-filter: blur(0px);
          filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
          animation: blur-text 1.5s 1.2s infinite linear alternate;
}

@-webkit-keyframes blur-text {
  0% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(4px);
            filter: blur(4px);
  }
}

@keyframes blur-text {
  0% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  100% {
    -webkit-filter: blur(4px);
            filter: blur(4px);
  }
}

</style>

<body>
  <div class="loading">
    <div class="loading-text">
        <span class="loading-text-words">w</span>
        <span class="loading-text-words">e</span>
        <span class="loading-text-words">l</span>
        <span class="loading-text-words">c</span>
        <span class="loading-text-words">o</span>
 <span class="loading-text-words">m</span>
        <span class="loading-text-words">e</span>
    </div>
</div>
  
  
</body>
</html>

Design #001

Source Code


<!-- Created by sachin-->

<html>

<head>

  <meta charset="utf-8">

  <title>menubar</title>

  <style>

   .outer{

                                  width:150px;

                                  height:50px;

                                 overflow-x:hidden;

                                  position:relative;

                                  float:left;

                                  margin-right:5px;

                                  margin-left:10px;

                                  border-radius:50px;

                                  }

                                  .inner{

                                  width:300px;

                                  height:50px;

                                  font:bold 16px/50px "arial";

                                  position: absolute; right:0;

                                  color:white;

                                  text-align:right;

                                  text-decoration:none;

                                  white-space:pre;

                                  transition:width .7s,color .7s;}

                                 

                                  .inner:before{

                                  content:"";

                                  position:absolute;

                                  width:139px;

                                  height:39px;

                                  right:5px;

                                  top:5px;

                                  border-radius:50px;

                                  border:1px dashed #333;

                                  }

                                  .color1{background:linear-gradient(60deg,blue 150px,#333 180px,#333);}

                                 .color2{background:linear-gradient(60deg,green 150px,#333 180px,#333);}

                                  .color3{background:linear-gradient(60deg,orange 150px,#333 180px,#333);}

                                  .color4{background:linear-gradient(60deg,pink 150px,#333 180px,#333);}

                                  .color5{background:linear-gradient(60deg,red 150px,#333 180px,#333);}

          .color6{background:linear-gradient(60deg,yellow 150px,#333 180px,#333);}

                                  .inner:hover{

                                  width:150px;

                                  color:black;}

                                  </style>

                                  </head>

                                  <body>

                                    

                                      <div class="outer">

                                   

                                                  <a href="##" class="inner color1">HOME    </a>

                                                  </div>

                                                  <div class="outer">

                                                  <a href="##" class="inner color2">ADMIN     </a>

                                                  </div>

                                                  <div class="outer">

                                                  <a href="##" class="inner color3">GALLERY     </a>

                                                  </div>

                                              
                                                  <div class="outer">

                                                  <a href="##" class="inner color4">COMMENT     </a>

                                                  </div>

                                                   <div class="outer">

                                                  <a href="##" class="inner color5">CONTACT   </a>
                                    </div>
                                                      
                                                  </body>

  </html>

Hi Everyone,

This blog is created to provide all the required web designs as mentioned below:

Loading GIF's
Animated Buttons
Animation Templates
Colorful Navigation Bar
Stylish Web pages
Different Login pages
Colorful font style
You can send a mail for required design (Will be provided within 48 hours. sachinbillav5@gmail.com)
Etc....