GyanCode

Saturday 12 November 2016

Right arrow with before after css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Right arrow with before after css</title>
</head>
<style>
.left-box { background: #27aae0; color: #fff; padding: 10px 15px; position: relative; margin: 10px 0px; border-radius: 9px; width: 440px; float: left;}
.left-box h5 { font-size: 20px; margin:0px;}
.left-box p { font-size: 14px;}
.left-box:after {bottom: 100%; left: 28%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(213,222,227,0); border-width: 11px; margin-left: 21em; border-left-color: #27aae0; top: 20px;}
</style>
<body>
<div class="left-box">
<h5>Is your website shunning your customers away?</h5>
<p> Does your customers on an ecommerce website come and abandon from buying in your website. Do they just leave and buy the same product from a competitor website then for sure you need to relook at your website usability design.</p>
</div>
</body>
</html>

Project Counter

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project Counter</title>
</head>
<style>
.count{ display: inline-block; margin:10px 0; width:100%;}
.count .single{width: 20%;float: left;padding: 4% 3% 2% 3%;margin: 2.5%;height: 230px;border: 5px #FFFFFF solid;border-radius: 50%;text-align: center;}
.count .single .counter {font-size: 48px;color: #FFFFFF;display: inline-block;font-weight: bold;text-align: center;}
.count .single span{ font-size:30px; color:#FFFFFF;}
.count .single h3{color:#FFFFFF;line-height: 24px; font-size:18px; font-weight:bold;}
.count .counter > span {margin-bottom: 0;}
.circle {background: #2980b9;width: 200px;line-height: 200px;display: inline-block;color: #fff; border-radius: 100%;}
</style>
<body>
<div class="count">
<div class="single" style="background-color:#833292;"><div class="counter">80</div><span>%</span><h3>Repeat Customers</h3></div>
<div class="single" style="background-color:#f8622f;"><div class="counter">350</div><span>+</span><h3>E-Commerce Portals</h3></div>
<div class="single" style="background-color:#0674a5;"><div class="counter">2000</div><span>+</span><h3>Website Projects</h3></div>
<div class="single" style="background-color:#dc2889;"><div class="counter">13</div><span>+</span><h3>Years of Experience</h3></div>
</div>
</body>
</html>

News Ticker Vertical

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>News Ticker Vertical</title>
</head>
<style>
.newstape {color: #999999; height: 419px; overflow: hidden;}
.newstape .newstape-content {position: relative;}
.newstape .newstape-content .news-block{ margin-bottom:20px;}
.newstape .newstape-content .news-block .test{ color:#999999; font-size:16px; font-family:Calibri; margin:0px;}
.newstape .newstape-content .news-block .name{ color:#f83e4e; text-align:left; margin:0px;}

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.newstape').newstape();
});
</script>

<body>
<div class="newstape">
<div class="newstape-content">
<div class="news-block">
<p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="name">- Lorem Ipsum</div>
</div>
<div class="news-block">
<p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="name">- Lorem Ipsum</div>
</div>
<div class="news-block">
<p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="name">- Lorem Ipsum</div>
</div>
<div class="news-block">
<p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div class="name">- Lorem Ipsum</div>
</div>
</div>
</div>
</body>
</html>

Thursday 13 October 2016

Full width & height banner in any screen

<style>
#header #parallax_bg{width: 100%;height: 100vh;overflow: hidden;}
#header #parallax_bg img{ max-width:350%; text-align:center;    height: auto;}
#header {padding-top: 0px;padding-bottom: 0px; text-align: center;color: #f8f8f8;}
#header .banner{ width:80%; display:inline-block;position: relative;}
#header .banner .logo{text-align: center;margin: 0px 0 50px; }
#header .banner .top-show{margin-top: -57%; margin-right: auto;margin-left: auto; text-align: center; margin-bottom: 0; top: 20%; position: absolute;left: 0; right: 0;}
</style>

<div id="header">
<div id="parallax_bg"><img src="images/banner.jpg"></div>
    <div class="banner">
      <div class="top-show">
        <div class="logo"><a href=""><img src="images/logo.png"></a></div>
      </div>
    </div>
</div>

Saturday 8 October 2016

Mobile Frame create in Html with css


	<!DOCTYPE html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Mobile App Demo</title>
	</head>

	<body>


	<div class="third-frame">
	<div class="second-frame">
	<div class="frame-scroll-correction"></div>
	<iframe class="main-frame" src="home.html"></iframe>
	</div>
	</div>



	<style>

	*{
	margin:0px;
	padding:0px;
	border:0px;
	}

	body{
	background-color:#ececec;
	}

	.main-frame{
	background-color:#000000;
	margin-left:auto;
	margin-right:auto;
	display:block;
	position:relative;
	z-index:1;
	width: 340px;
	height: 550px;
	}

	.second-frame{
	height:100%;
	width: 340px;
	border:solid 20px #000;
	border-radius:40px;
	border-bottom:solid 80px #000;
	border-top:solid 60px #000;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index:2;
	}

	.third-frame{
	height:100%;
	background-color:#ccc;
	padding:5px;
	width: 380px;
	border-radius:45px;
	margin-left:auto;
	margin-right:auto;
	margin-top:80px;
	}

	.frame-scroll-correction{
	position:absolute;
	height:100%;
	width:22px;
	background-color:#000;
	z-index:99;
	right:-20px;
	}

	.resolution-selecter-deploy em{
	float:right;
	padding-right:20px;
	font-size:19px;
	font-style:normal;
	}



	</style>

	</body>
	</html> Check the Example

Thursday 15 September 2016

Mega menu for mobile off-canvas

Jquery Show Less and More Content

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Jquery Show Less and More Content</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(function() {
var showTotalChar = 200, showChar = "Show (+)", hideChar = "Hide (-)";
$('.show').each(function() {
var content = $(this).text();
if (content.length > showTotalChar) {
var con = content.substr(0, showTotalChar);
var hcon = content.substr(showTotalChar, content.length - showTotalChar);
var txt= con + '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>  <a href="" class="showmoretxt">' + showChar + '</a></span>';
$(this).html(txt);
}
});
$(".showmoretxt").click(function() {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showChar);
} else {
$(this).addClass("sample");
$(this).text(hideChar);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>

<style>
.body{padding:0; margin:0;}
.main_ctnt {
    border: 1px solid #000000;
    margin: 100px;
    padding: 15px;
    width: 650px;
}
.show {
    font:normal 15px arial;
    text-align: justify;
    padding: 15px 0 0 0;
}
.morectnt span {
display: none;
}
.showmoretxt {
    font: bold 15px tahoma;
    text-decoration: none;
}
</style>

    </head>
    <body>
    <div class="main_ctnt">
<div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta.</div>
</div>

    </body>
</html>

Radio button css

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>awesome bootstrap checkbox demo</title>
	<link rel="stylesheet" href="bootstrap.css"/>
	<link rel="stylesheet" href="../bower_components/Font-Awesome/css/font-awesome.css"/>
	<style> .radio label {display: inline-block;position: relative; padding-left: 5px; } .radio label::before {content: "";position: absolute; width: 17px;height: 17px;left: 0; margin-left: -20px;border: 1px solid #cccccc; border-radius: 50%; background-color: #fff;} .radio label::after {display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #009C71; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); } .radio input[type="radio"] { opacity: 0; z-index: 1; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .radio.radio-inline { margin-top: 0; }	</style>
	</head>
	<body>


	<div class="radio radio-info radio-inline">
	<input type="radio" id="test" value="option1" name="radioInline" checked>
	<label for="test"> Checked </label>
	</div>
	<div class="radio radio-inline">
	<input type="radio" id="test2" value="option2" name="radioInline">
	<label for="test2"> Test </label>
	</div>
	</body>
	</html>

Clip Image

Friday 5 August 2016

Less & show button in jquery with toggle

Subscribe to: Posts ( Atom )

Gyancode

A free library of HTML, CSS, JS

Search This Blog