Posts

Form Sliding

Image
<!DOCTYPE html> <html lang="en" > <head>   <meta charset="UTF-8">   <title>Weekly Coding Challenge #1 -  Double slider Sign in/up Form - Desktop Only</title>   <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <h2>Weekly Coding Challenge #1: Sign in/up Form</h2> <div class="container" id="container">     <div class="form-container sign-up-container">         <form action="#">             <h1>Create Account</h1>             <div class="social-container">                 <a href="#" class="social"><i class="...
Post a Comment
Read more

Social Media

Image
<link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css "> <style type =" text/css "> /*---sharetoggle--*/ #ss_menu { z-index: 9999; bottom: 30px; width: 60px; height: 60px; color: #fff; position: fixed; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; right: 30px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } #ss_menu > .menu { display: block; position: absolute; border-radius: 50%; width: 60px; height: 60px; text-align: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16); color: #fff; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; bo...
Post a Comment
Read more

Responsive

Image
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)   and (-webkit-min-device-pixel-ratio: 2) {   .phone-view{ display:none: } } /* Portrait */ @media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)   and (-webkit-min-device-pixel-ratio: 2)   and (orientation: portrait) {    .phone-view{ display:none: } } /* Landscape */ @media only screen   and (min-device-width: 320px)   and (max-device-width: 480px)   and (-webkit-min-device-pixel-ratio: 2)   and (orientation: landscape) {    .phone-view{ display:none: } } /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ /* Portrait and Landscape */ @media only screen   and (min-device-width: 320px)   and (max-device-width: 568px)   and (-webkit-min-device-pixel-ratio: 2) {    .phone-view{ display:none: } ...
Post a Comment
Read more

php code

<ul> <li class="<?php if($page=='home'){echo 'active-new';}?>"><a href="./">Home</a></li> <li class="<?php if($page=='about'){echo 'active-new';}?>"><a href="about.php">About</a></li> <li class="<?php if($page=='prodcuts'){echo 'active-new';}?>"><a href="product.php">Products</a></li> <li class="<?php if($page=='gallery'){echo 'active-new';}?>"><a href="gallery.php">Gallery</a></li> <li class="<?php if($page=='contact'){echo 'active-new';}?>"><a href="contact.php">Contact</a></li> </ul> <?php $page = 'prodcuts'; require_once "includes/header.php" ?> <?php $page = '6'; require_once ...
Post a Comment
Read more

One Page Scroll

//One Page Script// $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top - 9 }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); });
Post a Comment
Read more

Zip Welcome

Image
<!DOCTYPE html> <html> <head> <title>Scroll</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <section> <div class="bg"></div> </section> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script type="text/javascript"> $(document).ready(function () { $(window).scroll(function(){ var scrollpos = $(window).scrollTop(); $('.bg').css({ 'height': +(scrollpos)+'px' }) }) }); </script> </body> </html> <style type="text/css"> body{margin: 0px; padding: 0px; min-height: 1550px;} section{position: relative; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .bg{position: fixed; background: url(full-img.png); background-size: cover; background-attachment:...
Post a Comment
Read more

image comparion slider using Html Css & Java Script

Image
<!DOCTYPE html> <html> <head> <title>Change</title> </head> <body> <section> <div id="layer"></div> </section> <script type="text/javascript"> var slide = document.getElementById('layer'); window.onmousemove = function (e) { var x = e.clientX; slide.style.left = x + 'px'; } </script> </body> </html> <style type="text/css"> body{margin: 0px; padding: 0px; } section{ position: absolute; width: 100%; height: 100vh; overflow: hidden; background: url(img-1.jpg)no-repeat; background-attachment: fixed; } #layer{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100vh; background: url(img-2.jpg)no-repeat; border-left: 2px solid #000; background-attachment: fixed; } </style>
Post a Comment
Read more