How to Create a Comment Box in Php
The Comment Box is very Important to the Website. & Every developer are need to create a Comment Box. And Now I have provide the code of Comment box....
Step-2:- Write the Code of (Index.php) Page.
<!DOCTYPE html>
<html lang=en-US>
<head>
<title>Smashing HTML5!</title>
<meta charset=utf-8 />
<link rel=stylesheet href=css/main.css type=text/css />
</head>
<body id=index class=home>
<section id=comments class=body>
<header>
<h2>Comments</h2>
</header>
<ol id=posts-list class=hfeed<?php echo($has_comments?' has-comments':''); ?>>
<li class=no-comments>Be the first to add a comment.</li>
<?php
foreach ($comments as &$comment) {
?>
<li><article id=comment_<?php echo($comment['id']); ?> class=hentry>
<footer class=post-info>
<abbr class=published title=<?php echo($comment['date']); ?>>
<?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
</abbr>
<address class="vcard author">
By <a class="url fn" href=#><?php echo($comment['comment_author']); ?></a>
</address>
</footer>
<div class=entry-content>
<p><?php echo($comment['comment']); ?></p>
</div>
</article></li>
<?php
}
?>
</ol>
<div id=respond>
<h3>Leave a Comment</h3>
<form action=post_comment.php method=post id=commentform>
<label for=comment_author class=required>Your name</label>
<input type=text name=comment_author id=comment_author value tabindex=1 required=required style=width:50%>
<label for=email class=required>Your email</label>
<input type=email name=email id=email value tabindex=2 required=required style=width:50%>
<label for=comment class=required>Your message</label>
<textarea name=comment id=comment rows=10 tabindex=4 required=required style=width:50%></textarea>
<input type=hidden name=comment_post_ID value=<?php echo($comment_post_ID); ?> id=comment_post_ID style="width:50%"/>
<input name=submit type=submit value="create comment" style=background-color:black;height:40px;border-radius:0 />
</form>
</div>
</section>
<style type=text/css>a:hover{background-color:transparent}input:required,textarea:required{outline:1px solid black}</style>
</body>
</html>
Step-3:- Write the Code of (post_comment.php) Page.
<?php
require('Persistence.php');
$db = new Persistence();
$added = $db->add_comment($_POST);
if($added) {
header( 'Location: index.php' );
}
else {
header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>
Step-4:- Write the Code of (Persistence.php) Page.
<?php
date_default_timezone_set('UTC');
class Persistence {
private $data = array();
function __construct() {
session_start();
if( isset($_SESSION['blog_comments']) == true ){
$this->data = $_SESSION['blog_comments'];
}
}
function get_comments($comment_post_ID) {
$comments = array();
if( isset($this->data[$comment_post_ID]) == true ) {
$comments = $this->data[$comment_post_ID];
}
return $comments;
}
function get_all_comments() {
return $this->data;
}
function add_comment($vars) {
$added = false;
$comment_post_ID = $vars['comment_post_ID'];
$input = array(
'comment_author' => $vars['comment_author'],
'email' => $vars['email'],
'comment' => $vars['comment'],
'comment_post_ID' => $comment_post_ID,
'date' => date('r'));
if($this->validate_input($input) == true) {
if( isset($this->data[$comment_post_ID]) == false ) {
$this->data[$comment_post_ID] = array();
}
$input['id'] = uniqid('comment_');
$this->data[$comment_post_ID][] = $input;
$this->sync();
$added = $input;
}
return $added;
}
function delete_all() {
$this->data = array();
$this->sync();
}
private function sync() {
$_SESSION['blog_comments'] = $this->data;
}
private function validate_input($input) {
$input['email'] = filter_var($input['email'], FILTER_SANITIZE_EMAIL);
if (filter_var($input['email'], FILTER_VALIDATE_EMAIL) == false) {
return false;
}
$input['comment_author'] = substr($input['comment_author'], 0, 70);
if($this->check_string($input['comment_author']) == false) {
return false;
}
$input['comment_author'] = htmlentities($input['comment_author']);
$input['comment'] = substr($input['comment'], 0, 300);
if($this->check_string($input['comment'], 5) == false) {
return false;
}
$input['comment'] = htmlentities($input['comment']);
$input['comment_post_ID'] = filter_var($input['comment_post_ID'], FILTER_VALIDATE_INT);
if (filter_var($input['comment_post_ID'], FILTER_VALIDATE_INT) == false) {
return false;
}
return true;
}
private function check_string($string, $min_size = 1) {
return strlen(trim($string)) >= $min_size;
}
}
?>
Code of Comment Box..
Step-1:- Create a 4 Php Pages..
1- index.php
2- post_comment.php
3- Persistence.php
4- clear.php
1- index.php
2- post_comment.php
3- Persistence.php
4- clear.php
Step-2:- Write the Code of (Index.php) Page.
<?php
require('Persistence.php');
$comment_post_ID = 1;
$db = new Persistence();
$comments = $db->get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>
require('Persistence.php');
$comment_post_ID = 1;
$db = new Persistence();
$comments = $db->get_comments($comment_post_ID);
$has_comments = (count($comments) > 0);
?>
<!DOCTYPE html>
<html lang=en-US>
<head>
<title>Smashing HTML5!</title>
<meta charset=utf-8 />
<link rel=stylesheet href=css/main.css type=text/css />
</head>
<body id=index class=home>
<section id=comments class=body>
<header>
<h2>Comments</h2>
</header>
<ol id=posts-list class=hfeed<?php echo($has_comments?' has-comments':''); ?>>
<li class=no-comments>Be the first to add a comment.</li>
<?php
foreach ($comments as &$comment) {
?>
<li><article id=comment_<?php echo($comment['id']); ?> class=hentry>
<footer class=post-info>
<abbr class=published title=<?php echo($comment['date']); ?>>
<?php echo( date('d F Y', strtotime($comment['date']) ) ); ?>
</abbr>
<address class="vcard author">
By <a class="url fn" href=#><?php echo($comment['comment_author']); ?></a>
</address>
</footer>
<div class=entry-content>
<p><?php echo($comment['comment']); ?></p>
</div>
</article></li>
<?php
}
?>
</ol>
<div id=respond>
<h3>Leave a Comment</h3>
<form action=post_comment.php method=post id=commentform>
<label for=comment_author class=required>Your name</label>
<input type=text name=comment_author id=comment_author value tabindex=1 required=required style=width:50%>
<label for=email class=required>Your email</label>
<input type=email name=email id=email value tabindex=2 required=required style=width:50%>
<label for=comment class=required>Your message</label>
<textarea name=comment id=comment rows=10 tabindex=4 required=required style=width:50%></textarea>
<input type=hidden name=comment_post_ID value=<?php echo($comment_post_ID); ?> id=comment_post_ID style="width:50%"/>
<input name=submit type=submit value="create comment" style=background-color:black;height:40px;border-radius:0 />
</form>
</div>
</section>
<style type=text/css>a:hover{background-color:transparent}input:required,textarea:required{outline:1px solid black}</style>
</body>
</html>
Step-3:- Write the Code of (post_comment.php) Page.
<?php
require('Persistence.php');
$db = new Persistence();
$added = $db->add_comment($_POST);
if($added) {
header( 'Location: index.php' );
}
else {
header( 'Location: index.php?error=Your comment was not posted due to errors in your form submission' );
}
?>
Step-4:- Write the Code of (Persistence.php) Page.
<?php
date_default_timezone_set('UTC');
class Persistence {
private $data = array();
function __construct() {
session_start();
if( isset($_SESSION['blog_comments']) == true ){
$this->data = $_SESSION['blog_comments'];
}
}
function get_comments($comment_post_ID) {
$comments = array();
if( isset($this->data[$comment_post_ID]) == true ) {
$comments = $this->data[$comment_post_ID];
}
return $comments;
}
function get_all_comments() {
return $this->data;
}
function add_comment($vars) {
$added = false;
$comment_post_ID = $vars['comment_post_ID'];
$input = array(
'comment_author' => $vars['comment_author'],
'email' => $vars['email'],
'comment' => $vars['comment'],
'comment_post_ID' => $comment_post_ID,
'date' => date('r'));
if($this->validate_input($input) == true) {
if( isset($this->data[$comment_post_ID]) == false ) {
$this->data[$comment_post_ID] = array();
}
$input['id'] = uniqid('comment_');
$this->data[$comment_post_ID][] = $input;
$this->sync();
$added = $input;
}
return $added;
}
function delete_all() {
$this->data = array();
$this->sync();
}
private function sync() {
$_SESSION['blog_comments'] = $this->data;
}
private function validate_input($input) {
$input['email'] = filter_var($input['email'], FILTER_SANITIZE_EMAIL);
if (filter_var($input['email'], FILTER_VALIDATE_EMAIL) == false) {
return false;
}
$input['comment_author'] = substr($input['comment_author'], 0, 70);
if($this->check_string($input['comment_author']) == false) {
return false;
}
$input['comment_author'] = htmlentities($input['comment_author']);
$input['comment'] = substr($input['comment'], 0, 300);
if($this->check_string($input['comment'], 5) == false) {
return false;
}
$input['comment'] = htmlentities($input['comment']);
$input['comment_post_ID'] = filter_var($input['comment_post_ID'], FILTER_VALIDATE_INT);
if (filter_var($input['comment_post_ID'], FILTER_VALIDATE_INT) == false) {
return false;
}
return true;
}
private function check_string($string, $min_size = 1) {
return strlen(trim($string)) >= $min_size;
}
}
?>
Step-5:- Write the Code of (clear.php) Page.
<?php
require('Persistence.php');
$db = new Persistence();
$db->delete_all();
print_r($db->get_all_comments());
?>
Step-6:- And Now the time of CSS Pages.
1- main.css
@import url("reset.css");
@import url("global-forms.css");
body {
color: #000305;
font-size: 87.5%;
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
h2 {font-size: 1.571em}
h3 {font-size: 1.429em}
h4 {font-size: 1.286em}
h5 {font-size: 1.143em}
h6 {font-size: 1em}
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}
ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
blockquote {font-style: italic;}
cite {}
q {}
table {margin: .5em auto 1.5em auto; width: 98%;}
thead th {padding: .5em .4em; text-align: left;}
thead td {}
tbody td {padding: .5em .4em;}
tbody th {}
tbody .alt td {}
tbody .alt th {}
tfoot th {}
tfoot td {}
header, section, footer,
aside, nav, article, figure {
display: block;
}
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
#banner {
margin: 0 auto;
padding: 2.5em 0 0 0;
}
#banner h1 {font-size: 3.571em; line-height: .6;}
#banner h1 a:link, #banner h1 a:visited {
color: #000305;
display: block;
font-weight: bold;
margin: 0 0 .6em .2em;
text-decoration: none;
width: 427px;
}
#banner h1 a:hover, #banner h1 a:active {
background: none;
color: #C74350;
text-shadow: none;
}
#banner h1 strong {font-size: 0.36em; font-weight: normal;}
#banner nav {
background: #000305;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
padding: 0;
text-align: center;
width: 800px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 1.5em;
text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
background: #C74451;
color: #fff;
text-shadow: none !important;
}
#banner nav li:first-child a {
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#featured {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#featured figure {
border: 2px solid #eee;
float: right;
margin: 0.786em 2em 0 5em;
width: 248px;
}
#featured figure img {display: block; float: right;}
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
#content {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#extras {margin: 0 auto 3em auto; overflow: hidden;}
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
color: #C74350;
font-size: 1.429em;
margin-bottom: .25em;
padding: 0 3px;
}
#extras a:link, #extras a:visited {
color: #444;
display: block;
border-bottom: 1px solid #F4E3E3;
text-decoration: none;
padding: .3em .25em;
}
#extras li:last-child,
#extras li:last-child a {border: 0}
#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}
#extras a:hover, #extras a:active {color: #fff;}
#extras .blogroll {
float: left;
width: 615px;
}
#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
#extras .social {
float: right;
width: 175px;
}
#extras div[class='social'] a {
background-repeat: no-repeat;
background-position: 3px 6px;
padding-left: 25px;
}
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
#about {
background: #fff;
font-style: normal;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
text-align: left;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}
#contentinfo {padding-bottom: 2em; text-align: right;}
.hentry {
border-bottom: 1px solid #eee;
padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
.hentry .post-info * {font-style: normal;}
.hentry footer {margin-bottom: 2em;}
.hentry footer address {display: inline;}
#posts-list footer address {display: block;}
#posts-list {list-style: none; margin: 0;}
#posts-list .hentry {padding-left: 200px; position: relative;}
#posts-list .hentry:hover {
background: #C64350;
color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
color: #F6CF74;
text-shadow: 1px 1px 1px #333;
}
#posts-list footer {
left: 10px;
position: absolute;
top: 1.5em;
width: 190px;
}
#about-author {
background: #f9f9f9;
clear: both;
font-style: normal;
margin: 2em 0;
padding: 10px 20px 15px 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#about-author strong {
color: #C64350;
clear: both;
display: block;
font-size: 1.429em;
}
#about-author .photo {border: 1px solid #ddd; float: left; margin: 5px 1em 0 0;}
#comments-list {list-style: none; margin: 0 1em;}
#comments-list blockquote {
background: #f8f8f8;
clear: both;
font-style: normal;
margin: 0;
padding: 15px 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#comments-list footer {color: #888; padding: .5em 1em 0 0; text-align: right;}
#comments-list li:nth-child(2n) blockquote {background: #F5f5f5;}
#add-comment label {clear: left; float: left; text-align: left; width: 150px;}
#add-comment input[type='text'],
#add-comment input[type='email'],
#add-comment input[type='url'] {float: left; width: 200px;}
#add-comment textarea {float: left; height: 150px; width: 495px;}
#add-comment p.req {clear: both; margin: 0 .5em 1em 0; text-align: right;}
#add-comment input[type='submit'] {float: right; margin: 0 .5em;}
#add-comment * {margin-bottom: .5em;}
#comments {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#comments label {
display: block;
}
#comments label:after {
content:" *";
}
#comments ol li:nth-child(2n+1) {
background-color: #F5F4EF;
}
#respond {
margin-top: 40px;
}
#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
margin-bottom: 10px;
display: block;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
line-height: 1.4em;
}
#posts-list.has-comments li.no-comments {
display: none;
}
Step-8:- Write the Code of (reset.css) Page.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {
border-collapse: collapse;
border-spacing: 0;
}
Step-9:- Write the Code of (global-forms.css) Page.
fieldset {
background: #f9f9f9;
margin: 1.5em;
padding: 2em;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
legend {font-size: 1.25em; margin-bottom: 0 !important; margin-bottom: 1.429em; padding: 0 .5em;}
label {font-size: 1.1em; height: 25px; line-height: 25px;}
input[type='text'],
input[type='email'],
input[type='url'],
textarea {
background: #fff;
border: 1px solid #eee;
color: #999;
font-family: inherit;
font-size: inherit;
padding: 2px;
}
input[type='text']:hover,
input[type='email']:hover,
input[type='url']:hover,
textarea:hover {
background: #FFFBEF;
border-color: #ff0;
cursor: text;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
textarea:focus {
background: #ffC;
border-color: #ff1;
color: #0d0d0d;
}
input[type='checkbox'], input[type='radio'] {
display: block;
margin-top: 4px;
}
input[type='submit'] {
background: #C74350;
border: 0;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-family: inherit;
font-size: inherit;
padding: .3em 2em;
text-shadow: 1px 1px 1px #000;
}
input:required, textarea:required {outline: 1px solid #C74350;}
textarea {width: 99%; margin-bottom: 7px;}
div.left {margin-left: 1em;}
div.right {margin-right: 1em;}
.labels-left label, div.left label {
clear: left;
float: left;
margin-right: .5em;
text-align: right;
}
.labels-left input, div.left input, .labels-left select, div.left select {float: left;}
.labels-right label, div.right label {
float: left;
margin-left: .5em;
text-align: right;
}
.labels-right input, div.right input, .labels-right select, div.right select {clear: left; float: left;}
.labels-top label, div.top label {display: block;}
.labels-top input, div.top input {margin-bottom: 0;}
.columns-2 div.column1, .columns-2 div.column2 {float: left; width: 48%;}
.columns-2 input.text {width: 150px;}
.columns-3 div.column1, .columns-3 div.column2, .columns-3 div.column3 {float: left; width: 33%;}
.columns-3 input.text {width: 120px;}
.columns-2 div.left, .columns-2 div.right, .columns-2 div.top {width: 32%;}
.columns-3 div.left, .columns-3 div.right, .columns-3 div.top {width: 29%;}
.req {color: #C74350;}
.error,.notice, .success {
padding: .2em;
margin-bottom: 1em;
border: 2px solid #ddd;
}
.error {background: #FBE3E4; border-color: #FBC2C4; color: #8a1f11;}
.notice {background: #FFF6BF; border-color: #FFD324; color: #514721;}
.success {background: #E6EFC2; border-color: #C6D880; color: #264409;}
.error a {color: #8a1f11;}
.notice a {color: #514721;}
.success a {color: #264409;}
Step-6:- And Now the time of CSS Pages.
Create a 3 CSS Pages in css folder..
1- main.css
2- reset.css
3- global-forms.css
Step-7:- Write the Code of (main.css) Page.
@import url("global-forms.css");
body {
color: #000305;
font-size: 87.5%;
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
h2 {font-size: 1.571em}
h3 {font-size: 1.429em}
h4 {font-size: 1.286em}
h5 {font-size: 1.143em}
h6 {font-size: 1em}
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}
ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
blockquote {font-style: italic;}
cite {}
q {}
table {margin: .5em auto 1.5em auto; width: 98%;}
thead th {padding: .5em .4em; text-align: left;}
thead td {}
tbody td {padding: .5em .4em;}
tbody th {}
tbody .alt td {}
tbody .alt th {}
tfoot th {}
tfoot td {}
header, section, footer,
aside, nav, article, figure {
display: block;
}
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
#banner {
margin: 0 auto;
padding: 2.5em 0 0 0;
}
#banner h1 {font-size: 3.571em; line-height: .6;}
#banner h1 a:link, #banner h1 a:visited {
color: #000305;
display: block;
font-weight: bold;
margin: 0 0 .6em .2em;
text-decoration: none;
width: 427px;
}
#banner h1 a:hover, #banner h1 a:active {
background: none;
color: #C74350;
text-shadow: none;
}
#banner h1 strong {font-size: 0.36em; font-weight: normal;}
#banner nav {
background: #000305;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
padding: 0;
text-align: center;
width: 800px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 1.5em;
text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
background: #C74451;
color: #fff;
text-shadow: none !important;
}
#banner nav li:first-child a {
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#featured {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#featured figure {
border: 2px solid #eee;
float: right;
margin: 0.786em 2em 0 5em;
width: 248px;
}
#featured figure img {display: block; float: right;}
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
#content {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#extras {margin: 0 auto 3em auto; overflow: hidden;}
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
color: #C74350;
font-size: 1.429em;
margin-bottom: .25em;
padding: 0 3px;
}
#extras a:link, #extras a:visited {
color: #444;
display: block;
border-bottom: 1px solid #F4E3E3;
text-decoration: none;
padding: .3em .25em;
}
#extras li:last-child,
#extras li:last-child a {border: 0}
#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}
#extras a:hover, #extras a:active {color: #fff;}
#extras .blogroll {
float: left;
width: 615px;
}
#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
#extras .social {
float: right;
width: 175px;
}
#extras div[class='social'] a {
background-repeat: no-repeat;
background-position: 3px 6px;
padding-left: 25px;
}
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
#about {
background: #fff;
font-style: normal;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
text-align: left;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}
#contentinfo {padding-bottom: 2em; text-align: right;}
.hentry {
border-bottom: 1px solid #eee;
padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
.hentry .post-info * {font-style: normal;}
.hentry footer {margin-bottom: 2em;}
.hentry footer address {display: inline;}
#posts-list footer address {display: block;}
#posts-list {list-style: none; margin: 0;}
#posts-list .hentry {padding-left: 200px; position: relative;}
#posts-list .hentry:hover {
background: #C64350;
color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
color: #F6CF74;
text-shadow: 1px 1px 1px #333;
}
#posts-list footer {
left: 10px;
position: absolute;
top: 1.5em;
width: 190px;
}
#about-author {
background: #f9f9f9;
clear: both;
font-style: normal;
margin: 2em 0;
padding: 10px 20px 15px 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#about-author strong {
color: #C64350;
clear: both;
display: block;
font-size: 1.429em;
}
#about-author .photo {border: 1px solid #ddd; float: left; margin: 5px 1em 0 0;}
#comments-list {list-style: none; margin: 0 1em;}
#comments-list blockquote {
background: #f8f8f8;
clear: both;
font-style: normal;
margin: 0;
padding: 15px 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#comments-list footer {color: #888; padding: .5em 1em 0 0; text-align: right;}
#comments-list li:nth-child(2n) blockquote {background: #F5f5f5;}
#add-comment label {clear: left; float: left; text-align: left; width: 150px;}
#add-comment input[type='text'],
#add-comment input[type='email'],
#add-comment input[type='url'] {float: left; width: 200px;}
#add-comment textarea {float: left; height: 150px; width: 495px;}
#add-comment p.req {clear: both; margin: 0 .5em 1em 0; text-align: right;}
#add-comment input[type='submit'] {float: right; margin: 0 .5em;}
#add-comment * {margin-bottom: .5em;}
#comments {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#comments label {
display: block;
}
#comments label:after {
content:" *";
}
#comments ol li:nth-child(2n+1) {
background-color: #F5F4EF;
}
#respond {
margin-top: 40px;
}
#respond input[type='text'],
#respond input[type='email'],
#respond textarea {
margin-bottom: 10px;
display: block;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
line-height: 1.4em;
}
#posts-list.has-comments li.no-comments {
display: none;
}
Step-8:- Write the Code of (reset.css) Page.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {
border-collapse: collapse;
border-spacing: 0;
}
Step-9:- Write the Code of (global-forms.css) Page.
fieldset {
background: #f9f9f9;
margin: 1.5em;
padding: 2em;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
legend {font-size: 1.25em; margin-bottom: 0 !important; margin-bottom: 1.429em; padding: 0 .5em;}
label {font-size: 1.1em; height: 25px; line-height: 25px;}
input[type='text'],
input[type='email'],
input[type='url'],
textarea {
background: #fff;
border: 1px solid #eee;
color: #999;
font-family: inherit;
font-size: inherit;
padding: 2px;
}
input[type='text']:hover,
input[type='email']:hover,
input[type='url']:hover,
textarea:hover {
background: #FFFBEF;
border-color: #ff0;
cursor: text;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
textarea:focus {
background: #ffC;
border-color: #ff1;
color: #0d0d0d;
}
input[type='checkbox'], input[type='radio'] {
display: block;
margin-top: 4px;
}
input[type='submit'] {
background: #C74350;
border: 0;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-family: inherit;
font-size: inherit;
padding: .3em 2em;
text-shadow: 1px 1px 1px #000;
}
input:required, textarea:required {outline: 1px solid #C74350;}
textarea {width: 99%; margin-bottom: 7px;}
div.left {margin-left: 1em;}
div.right {margin-right: 1em;}
.labels-left label, div.left label {
clear: left;
float: left;
margin-right: .5em;
text-align: right;
}
.labels-left input, div.left input, .labels-left select, div.left select {float: left;}
.labels-right label, div.right label {
float: left;
margin-left: .5em;
text-align: right;
}
.labels-right input, div.right input, .labels-right select, div.right select {clear: left; float: left;}
.labels-top label, div.top label {display: block;}
.labels-top input, div.top input {margin-bottom: 0;}
.columns-2 div.column1, .columns-2 div.column2 {float: left; width: 48%;}
.columns-2 input.text {width: 150px;}
.columns-3 div.column1, .columns-3 div.column2, .columns-3 div.column3 {float: left; width: 33%;}
.columns-3 input.text {width: 120px;}
.columns-2 div.left, .columns-2 div.right, .columns-2 div.top {width: 32%;}
.columns-3 div.left, .columns-3 div.right, .columns-3 div.top {width: 29%;}
.req {color: #C74350;}
.error,.notice, .success {
padding: .2em;
margin-bottom: 1em;
border: 2px solid #ddd;
}
.error {background: #FBE3E4; border-color: #FBC2C4; color: #8a1f11;}
.notice {background: #FFF6BF; border-color: #FFD324; color: #514721;}
.success {background: #E6EFC2; border-color: #C6D880; color: #264409;}
.error a {color: #8a1f11;}
.notice a {color: #514721;}
.success a {color: #264409;}
Thanks..
This comment has been removed by the author.
ReplyDelete