GyanCode

Saturday 12 November 2016

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

Gyancode

A free library of HTML, CSS, JS

Search This Blog