GyanCode

Tuesday, 3 January 2017

Sticky footer

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Sticky footer</title>
</head>
<style>
* { margin: 0;}
html, body { font-family:Verdana, Arial, Helvetica, sans-serif}
.container {min-height: 50%; text-align:center; }
.container:after {content: ""; display: block;}
.container h1{ margin:20% auto;}
.footer, .container:after { height: 45px; }
.footer {background: #333; color:#fff;float: left; width: 100%;}
.footer h4{ text-align:center; font-size:13px; margin:14px 0;}
</style>
<body>
<div class="container">

<h1>Sticky Footer</h1>

</div>

<footer class="footer">
<h4>I'm the Sticky Footer.</h4>
</footer>
</body>
</html>

Tuesday, 27 December 2016

Comments in HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Comments in HTML</title>
</head>

<body>

<section id="comments">
<div class="container">

</div>
</section>

</body>
</html>

Box Shadow Css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Box Shadow Css</title>
</head>
<style>
.shadow {margin: 40px;background-color: rgb(68,68,68); -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);box-shadow: 5px 5px 5px rgba(68,68,68,0.6);}
.shadow .content {position: relative; padding: 100px;background-color: #DDD;}
.shadow .content h2{ font-size:36px; text-align:center;}
</style>
<body>
<div class="shadow">
<div class="content">
<h2>Box Shadow Demo</h2>
</div>
</div>
</body>
</html>

Text Blur css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Blur css</title>
</head>
<style>
h1{color:#000000; font-size:50px; font-family:arial; text-shadow: 0 0 3px #000000, 3px 0 3px #000000, 0 3px 3px #000000, -3px 0 3px #000000,0 -3px 3px #000000;}
</style>
<body>
<h1>Demo text blur</h1>
</body>
</html>

Gyancode

A free library of HTML, CSS, JS

Search This Blog