Posts

Showing posts from May, 2020

Swipe To Slide / Draggable slider using Jquery

Image
Create a file name as index.html. Copy and paste the code in created html file. then preview the file. <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Draggable & Touch-friendly Slider Example</title> <style type="text/css"> @import url("https://fonts.googleapis.com/css?family=Montserrat"); * { box-sizing: border-box; } body { height: 100%; background: #efefef; color: #333; font-family: 'Montserrat', sans-serif; font-weight: 600; text-align: center; letter-spacing: 0.15em; font-size: 18px; } .slider { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2)
Post a Comment
Read more

Image gallery filter using JavaScript

Image
Create a file name as index.html. Copy and paste the code in created html file. then preview the file. <!DOCTYPE html> <html> <title>AVI image gallery filter using javascript</title> <style> body{ background-attachment: fixed; background-image: url("https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/12465917_1635749766699587_1279892828258216364_o.jpg?_nc_cat=102&_nc_sid=e007fa&_nc_ohc=FWPa0buZEygAX_1q5tu&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=be5968c9332fa2d47d2b8a3c44f94a05&oe=5EE67B26"); background-blend-mode:luminosity; background-repeat: no-repeat; background-size: cover; position: relative; } .mainavi{ margin: 0 auto; padding: 40px; } .mainavi h2{ background: #612c0db8; padding: 10px; font-size: 20px; color: #fff; font-family: cursive; } .filterDiv { float: left; /*background-color: #2196F3;*/ color: #ffffff; width: 300px; height: 300px; line
Post a Comment
Read more