HTML5 | CSS3

main.css





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

}
.ex1{
color: red;


}
#check{
color:blue;


}
h1{font:bold 20px tahoma ;color:red;
}
h2{font:bold 14px tahoma;
}
body
{
text-align:center;

}
a.ex1{color:grey;text-decoration: none;margin:5px ;padding:5px;background-color:yellow;-webkit-border-radius: 5px;}
a.ex1:hover{color:red;}

HEADER,SECTION,FOOTER,ASIDE,NAV,ARTICLE,HGROUP
{
display:block;
}

#big_wrapper{border:10px solid blue;width:1000px;margin:20px auto;-webkit-border-radius:5px;}
#top_header{background:#4267B2;border:1px solid blue;padding:20px; -webkit-border-radius:2px;}

#top_menu{border : 1px solid blue;  display:-webkit-box;display:-webkit-border-radius:5px;}

#top_menu li
{display:inline-block;list-style:none;padding:5px; font:bold 14px tohma; border : 1px solid green;}

#main_section{
float:right;
width:660px;
margin:30px;
 border:1px solid red ;
}
#side_news{float:left; width:150px; margin:20px; padding:30px; background:#770011; border:1px solid red ;}
#the_footer{clear:both; text-align:center; padding:20px; border-top:10px solid black;clear:both}





html code



<HTML>
<head>
<link rel="stylesheet" href="main.css">

</head>


<title>
CSS3
</title>
<body>
<div id="big_wrapper">



 <HEADER id="top_header">
   
<a class="ex1" href="livechat.php">LiveChat</a>
   <a class="ex1" href="livechat.php">Support</a>
   <a class="ex1" href="livechat.php">Contact Us</a>
   
   
   
   </HEADER>

<NAV id="top_menu">
<UL>
<LI>HOME</LI>
<LI>ABOUTUS</LI>
<LI>CONTACTUS</LI>
</UL>

</NAV>
<ASIDE id="side_news">
HI FROM ASIDE
</ASIDE>

<SECTION id="main_section">
<ARTICLE>
<HEADER>

<HGROUP>
<h1>FIRST HEADING</h1>
<h2 id="check">SECOND HEADING</h2>

</HGROUP>
</HEADER>
<p>THIS IS BEST ARTICLE EVER</p>
<FOOTER>
<p>WRITTEN BY AASHISH</p>
</FOOTER>
</ARTICLE>


</SECTION>




<FOOTER id="the_footer">
<?php
$startYear = 2006;
$thisYear = date('Y');
if ($startYear == $thisYear) {
echo $startYear;
} else {
echo "{$startYear}&#8211;{$thisYear}";
}

?>
<input style="background-color:green;color:white;-webkit-border-radius: 5px;"type="submit" value="signup">
</FOOTER>

</div>
</body>

</HTML>




Reactions:

0 comments:

Post a Comment