This was done in HTML5, so there's a header, nav, section, aside and footer element. All of these elements have unique ids, and sits inside a div (id="big_wrapper"). So if you are just starting out in learning HTML5 or testing a page and want to attach some quick css3 code, this will be a big help.
*{ list-style-type:none; margin:0px; padding:0px; } body{ font-family: Arial; font-size:14px; color:#303030; background-image:url('images/background.jpg'); background-attachment:fixed; } header, nav, section, aside, footer{ display:block; } #wrapper{ width:1000px; margin-left:150px; background:white; background-image:url('images/paper_background.jpg'); background-attachment:fixed; } #top_nav a, #main_footer a{ color:white; text-decoration:none; } #top_nav a:hover, #main_footer a:hover{ text-decoration:underline; color:yellow; } a{ text-decoration:none; color:#303030; } a:hover{ border-bottom:1px #303030 dotted; font-weight:bold; } #main_header{ background-color:black; text-align:center; } #main_content{ /*float:left; */ width:560px; margin:10px; padding:10px; text-align:left; line-height:20px; background:white; border-radius:15px; box-shadow:5px 5px 5px #080808; float:left; } #main_aside{ float:left; width:320px; margin:10px; padding:10px; background:white; border-radius:15px; box-shadow:5px 5px 5px #080808; } #bod_content{ background:white; background-image:url('images/paper_background.jpg'); } .news_content{ text-align:left; } .h3_eye_catcher{ color:green; text-align:center; } #top_nav{ color:white; text-align:center; text-shadow:1px 1px 3px #080808; padding: 10px; font-weight:bold; margin-bottom:10px; box-shadow:0px 3px 10px #080808; font-size:16px; /* Beginning of Gradient */ background-image: linear-gradient(bottom, #0B0142 48%, #2107B5 95%); background-image: -o-linear-gradient(bottom, #0B0142 48%, #2107B5 95%); background-image: -moz-linear-gradient(bottom, #0B0142 48%, #2107B5 95%); background-image: -webkit-linear-gradient(bottom, #0B0142 48%, #2107B5 95%); background-image: -ms-linear-gradient(bottom, #0B0142 48%, #2107B5 95%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.48, #0B0142), color-stop(0.95, #2107B5) ); /* End of Gradient */ } #main_footer{ clear:both; background:#2107B5; box-shadow:0px 5px 10px #080808 inset; color:white; text-align:center; padding:10px; }
Note: This code is not perfect, but it is a good starting point.
No comments:
Post a Comment