A Matter of Mao: Website Design

So I've gone for the cute design over the formal design and began coding it.
Its available to view live on http://amatterofmao.webs.com/

I've completely coded it myself using basic CSS (cascading Style Sheets) and HTML (HyperText markup language) after spending the week reading up on both.

The CSS I've used on the home page is:



<head>

<title>A Matter of Mao: Home</title>
<style type="text/css">
body
{

border:#cc9999;
position: absolute
max-width:800px;

text-align:center;
font-family:Helvetica, sans-serif;

background:#cc9999;
}
a {

color:#cc9999;
text-decoration:none;
}
a:hover {

text-decoration:none;
color:#BBBDC5;
}
.frame {

text-align:center;

font-size:10px;
width: 900px;

margin-left: auto ;
margin-right: auto ;
position: absolute;
left: 50%;
margin-left: -450px;
top:-5px;
padding:10px;
margin-center:0px;
overflow:auto;

letter-spacing:3px;
background:url(http://img860.imageshack.us/img860/2564/journalbackground.png) no-repeat top center;
}

.header {
color:#8b7d7d;
font-size:15px;
text-align:left;
height:450px;

margin-top:55px;
margin-left:150px;

padding:10px;

overflow:auto;
}
.nav {
 color:#8b7d7d;
 font-size:15px;
 text-align:center;
 height:450px;
 margin-top:-325px;
 letter-spacing:3px;
 padding:10px;
 overflow:auto;
}
.content1 {
font-size:10px;

text-align:center;

margin-top:-400px;

height:400px;
width:450px;

padding:10px;

border:#cc9999 1px solid;

overflow:auto;
}
.textbox {
font-size:10px;

text-align:center;

margin-left:100px;
width:670px;

padding:10px;

border:#cc9999 1px solid;

overflow:auto;
}
.textbox t {

text-align:center;
color:#8b7d7d;

font-size:15px;
letter-spacing:3px;
font-weight:bold;
margin:0;

font-variant:small-caps;
}

</style>
</head>

Along with the HTML coding I've used, this is what the homepage looks like.

I'm using the box as a placeholder for where my showreel would be but there won't be a border once the showreel is put in.

I'm unsure about the look of the twitter box at the moment. I'm not sure if I need to get rid of the border there or not.

A Matter of Mao

Wednesday 2 May 2012

Website Design - Coding Stage

No comments:

Post a Comment