GyanCode

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>

Gyancode

A free library of HTML, CSS, JS

Search This Blog