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