Posts

Showing posts from May, 2019

Social Links Rotate

Image
<!DOCTYPE html> <html> <head> <title> Social Links </title> <link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css "> </head> <body> <div class =" middle "> <a class =" btn " href =" # "> <i class =" fa fa-facebook " aria-hidden =" true "> </i> </a> <a class =" btn " href =" # "> <i class =" fa fa-facebook " aria-hidden =" true "> </i> </a> <a class =" btn " href =" # "> <i class =" fa fa-facebook " aria-hidden =" true "> </i> </a> <a class =" btn " href =" # "> <i class =" fa fa-facebook " aria-hidden =" true "> </i> </a> </div> <style type =...
Post a Comment
Read more

Stretch Image

Image
<!DOCTYPE html> <html> <head> <title> effecte </title> </head> <body> <div class =" imgBx "> <img src =" 1.jpeg "> <img src =" 2.jpg "> </div> </body> </html> <style type =" text/css "> body{ margin: 0px; padding: 0px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .imgBx{ position: relative; width: 500px; height: 500px; overflow: hidden; } .imgBx img{ position: absolute; top: 0px; left:0px; width: 100%; height: 100%; background-size: cover; transition: 0.5s; } .imgBx:hover img:nth-child(2) {transform: translateX(-50%) scaleX(2); opacity: 0; filter: blur(10px);} .imgBx img:nth-child(1) {transform: translateX(50%) scaleX(2); opacity: 0; filter: blur(10px);} .imgBx:hover img:nth-child(1) {transform: translateX(0) scaleX(2); opacity: 1; filter...
Post a Comment
Read more

Slider Green

Image
<!DOCTYPE html> <html> <head> <title> Slider </title> </head> <body> <section class =" slider "> <input type =" radio " name =" slide " class =" radio1 " checked =" checked "> <input type =" radio " name =" slide " class =" radio2 "> <input type =" radio " name =" slide " class =" radio3 "> <div class =" slide "> </div> </section> </body> </html> <style type =" text/css "> body{margin: 0px;padding: 0px;font-family: arial;} .slider{ position: absolute; width: 100%; height: 100%; background: #333; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; } .slider input[type="radio"]{ position: relative; z-index: 1; margin-bottom:40px; outline: none; cursor: pointer; } ...
Post a Comment
Read more

White Services

Image
<!DOCTYPE html> <html> <head> <title> service Box </title> <link href =" https://fonts.googleapis.com/css?family=Poppins " rel =" stylesheet "> </head> <body> <div class =" container "> <div class =" box "> <div class =" icons "> 01 </div> <div class =" content "> <h3> Services Name </h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a href =" # "> Read More </a> </div> </div> <div class =" box "> <div class =" icons "> 02 </div> <div class =" content "> <h3> Services Name </h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. L...
Post a Comment
Read more

Services Gradient

Image
<!DOCTYPE html> <html> <head> <title> services Box </title> <link href =" https://fonts.googleapis.com/css?family=Poppins " rel =" stylesheet "> </head> <body> <div class =" container "> <div class =" card "> <div class =" face face1 "> <div class =" content "> <h2> Lorem Ipsum is simply dummy text of the </h2> <p> printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took. </p> </div> </div> <div class =" face face2 "> <h2> 01 </h2> </div> </div> <div class =" card "> <div class =" face face1 "> <div class =" content "> <h2> Lorem Ipsum is simply dummy text of the </h2> <p> ...
Post a Comment
Read more

Cursor Pointer

Image
<!DOCTYPE html> <html> <head> <title> Curser Pointer </title> </head> <body> <h2> Follow The Coursor | JavaScript </h2> <div id =" cursor "> </div> </body> </html> <style type =" text/css "> body{margin: 0px; padding: 0px; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; overflow: hidden; cursor: none;} #cursor{ position: absolute; width: 20px; height: 20px; border: 2px solid #000; box-sizing: border-box; transition: 0.1s; transform: translate(-50% -50%); border-radius: 50%; pointer-events: none; } h2:hover ~ #cursor{width: 100px; height: 100px; border: 2px dashed #000; animation: animate 5s linear infinite;} @keyframes animate{ 0%{transform: translate(-50%,-50%) rotate(0deg);} 100%{transform: translate(-50%,-50%) rotate(360deg);} } </style> <script type =" text/java...
Post a Comment
Read more