Posts

Showing posts from October, 2019

Click Open Link

Image
<!DOCTYPE html> <html lang="xyz"> <head> <title>Click Link</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="title"> <br><br><br><br> <div class="email-wrapper"> <div class="email"> <div class="header"> <div class="button button1"></div> <div class="button button2"></div> <div class="button button3"></div> </div> <p>Check Out The goeey Button</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui...
Post a Comment
Read more

Mobile Portfolio

Image
<!DOCTYPE html> <html> <head> <title> </title> <link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css "> </head> <body> <div class =" carousel "> <div class =" carousel-item "> <img src =" img.jpg "> </div> <div class =" carousel-item "> <img src =" img.jpg "> </div> <div class =" carousel-item "> <img src =" img.jpg "> </div> <div class =" carousel-item "> <img src =" img.jpg "> </div> <div class =" carousel-item "> <img src =" img.jpg "> </div> </div> <img src =" mobile.png " class =" mobile ...
Post a Comment
Read more

Loader Blue

Image
<!DOCTYPE html> <html> <head> <title> Loader </title> </head> <body> <svg> <circle cx =" 70 " cy =" 70 " r =" 70 "> </circle> </svg> </body> </html> <style type =" text/css "> *{ margin: 0px; padding: 0px; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #05091f; } svg{ position: relative; width: 150px; height: 150px; animation: rotate 2s linear infinite; } svg circle{ width: 100%; height: 100%; fill: none; stroke-width:10; stroke: #00a1ff; stroke-linecap: round; transform: translate(5px, 5px); stroke-dasharray: 440; stroke-dashoffset:440; animation: animate 4s linear infinite; } @keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } @keyframes animate{ 0%,100%{ stroke-dashoffset:440; } 50%{ str...
Post a Comment
Read more

Power Of Light

Image
<!DOCTYPE html> <html> <head> <title> Power Of Light </title> </head> <body> <section> <div class =" light "> </div> <h2> Power of light </h2> <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ev...
Post a Comment
Read more

Neon Light

<!DOCTYPE html> <html> <head> <title> Neon Light </title> </head> <body> <canvas id =" canvas " width =" 1400 " height =" 600 "> </canvas> </body> </html> <style type =" text/css "> body{ background: black; margin: 0px; overflow: hidden; background-repeat: no-repeat; } </style> <script src =" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js "> </script> <script type =" text/javascript "> var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Initialize the GL context var gl = canvas.getContext('webgl'); if(!gl){ console.error("Unable to initialize WebGL."); } //Time step var dt = 0.015; //Time var time = 0.0; //************** Shader sources ...
Post a Comment
Read more

Loader

Image
<!DOCTYPE html> <html> <head> <title> loader </title> </head> <body> <div id =" preloader "> <div id =" status "> &nbsp; </div> </div> <h1> hello Varun </h1> <script src =" https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js "> </script> </body> </html> <script type =" text/javascript "> //loader// jQuery(window).load(function() { $('#status').fadeOut(); $('#preloader').delay(500).fadeOut('slow'); $('body').delay(500).css({'overflow':'visible'}); }); </script> <style type =" text/css "> #preloader {position: fixed; top:0; left:0; right:0; bottom:0; background-color:#22394b; z-index:99999; } #status {width:235px; height:235px; position:absolute; left:50%; top:50%; background-image:url(images/logo.png)...
Post a Comment
Read more

Canvas Menu

Image
<!DOCTYPE html> <html> <head> <title>Canvas Menu</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <section class="header_area">   <div class="main_header_area animated">     <div class="container">       <nav id="navigation1" class="navigation">         <!-- Logo Area Start -->         <div class="nav-header">           <a class="nav-brand" href="index-minimal.html#">LOGO</a>           <div class="nav-toggle"></div>         </div>         <!-- Main Menus Wrapper -->         <div class="nav-...
Post a Comment
Read more