Rameshwar ghodke Rameshwar-ghodke

💭

working as Web Designer

Senior Software Engineer

Rameshwar-ghodke / Add rating star with smily faces using html css and javascipt

Created April 19, 2021 10:44

	// css
	.rating_icn i.far{font-size:28px; cursor: pointer; margin:0px 5px;}
	.rating_icn i.far.one,.rating_icn i.far.onestar{color:#f7350ad9;}
	.rating_icn i.far.one,.rating_icn i.far:hover{color:#f7350ad9; transform:scale(1.3); transition: 0.3s;}


	//HTML
	<div class='col-md-6 col-sm-6 col-lg-4 col-xl-4 mb-3'>
	<label>Add Rating <span class='text-danger'>*</span></label>
	<!-- <input type='number'required name='add_rate' class='form-control' id='' placeholder='eg.5'/> -->

Rameshwar-ghodke / Make it tree structure layout using HTML CSS

Created March 24, 2021 09:14

Make it tree structure layout using HTML CSS and javascripti

	/====== CSS ======/

	ul, #tree_list { list-style-type: none;}
	#tree_list { margin: 0; padding: 0;}
	#tree_list .box1 { cursor: pointer;
	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; }
	#tree_list .box1::before { content: "\2610"; color: black; display: inline-block; margin-right: 6px;}

Rameshwar-ghodke / Add filterration with collased panel, hide show

Created March 19, 2021 05:21

Add filterration with collased panel, hide show using HTML, CSS and Javascript

	// script for show icons down and up arrow onclick it
	<script>
	$('.downkey').click(function(){
	$('.downkey').addClass('d-none');
	$('.upkey').removeClass('d-none');
	});
	$('.upkey').click(function(){
	$('.upkey').addClass('d-none');
	$('.downkey').removeClass('d-none');
	});

Rameshwar-ghodke / Disable Copy, Paste, Cut and Right Click using jQuery

Created March 5, 2021 05:35

Disable Copy, Paste, Cut and Right Click using jQuery and disable mouse right click also

	Syntax : $(“selector”).on(event, function)

	<!DOCTYPE html>
	<html>

	<head>
	<title>The jQuery Example</title>
	<script src=
	"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
	</script>

Rameshwar-ghodke / Add Watermark to print page using HTML CSS

Created February 26, 2021 06:04

1)Add Watermark to print page using HTML CSS 2) also using mpdf function into PHP controller at time of generate pdf add watermark

	// USING HTML & CSS
	<div class="watermark"> Watermark text ा</div>
	.watermark {display: inline; position: fixed !important; opacity: 0.25; font-size: 3em; width: 100%; text-align: center; z-index: 1000; top: 50%; right: 5px; writing-mode: horizontal-tb; }

	// USING PHP and MPDF()

	$mpdf = new mPDF('utf-8', 'A4-C');
	$mpdf->showWatermarkImage = true;
	// $mpdf->showWatermarkText = true;
	// $mpdf->WriteHTML('<watermarktext content="watermark text alpha="0.3" />');

Rameshwar-ghodke / bouncing bubble effect using CSS

Last active February 22, 2021 03:58

moving bubbles horizontally and vertically using animation css

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	* {
	margin: 0;
	padding: 0;

Rameshwar-ghodke / Apply Text fade in fade out continuously using css

Created February 17, 2021 04:59

Apply Text fade in fade out continuously using css

	// HTML
	<div class="col-md-3 col-lg-2 col-xl-2 col-sm-4 my-auto safe_village">
	<a href='#'>Safe Villages</a>
	</div>

	// CSS
	@-webkit-keyframes fade-in{
	from{ opacity:1; top:0px; }
	to{opacity:0; top:-5px; }
	}

Rameshwar-ghodke / add page scroll to top effect using jquery

Created February 1, 2021 11:17

Go to Top , Add page scroll to top effect using j-query, HTML and css

	<<div class="gototop"></div>

	.gototop {
	transition: background 0.35s ease;
	background-size: 100% 100% !important;
	background-image: // set image or icon path
	background-color: #ffffff;
	width: 40px;
	height: 40px;
	bottom: 5%;

Rameshwar-ghodke / on hover show underline with animation effect

Created January 22, 2021 04:21

on Menu item - mouse hover show transition effect on website

Rameshwar-ghodke / Star rating code in html

Created January 16, 2021 06:16

print star ratings in html

	<!-- Font Awesome Icon Library -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
	.star-checked {
	color: orange;
	}
	</style>
	</head>
	<body>