Tutorial: Part06

<!DOCTYPE html>
<html>
<head>

<!--Notes are written like this. So long as they are enclosed in tags like these, your browser will not read them.-->

<!--Customisation Options (part 2)-->

<meta name="color:Background" content="#cccccc" />
<meta name="color:Primary Colour" content="#03999b" />
<meta name="color:Secondary Colour" content="#4cc3c5" />

<meta name="font:Body" content="Georgia" />

<meta name="image:Background" content="http://i41.tinypic.com/wvztsk.png" />
<meta name="image:Sidebar" content="" />

<!--Things that go in the tab (part 1)-->

<title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<!--Custom font (part 4)-->

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>


<style type="text/css">

/*Notes in CSS look like this. If you use <!--these--> it will not work*/

/*The Background (part 3)*/

body {
	background-color: {color:Background};
	font-family: {font:Body};
	background-image: url({image:Background});
	background-attachment: fixed;
	margin: 0;
	word-wrap: break-word;
}

/*The Sidebar (part 4)*/

#sidebar {
	background-color: white;
	width: 260px;
	position: fixed;
	top: 150px;
	left: 100px;
}

/*The Sidebar: Title*/

#sidebar .title {
	font-family: 'Great Vibes', cursive;
	font-size: 30px;
	text-align: center;
	padding: 10px;
}

#sidebar .title a {
	color: {color:Primary Colour};
	text-decoration: none;
}

#sidebar .title a:hover {
	color: {color:Secondary Colour};
}

/*The Sidebar: Image*/

#sidebar .image {
	width: 260px;
	height: auto;
}

/*The Sidebar: Description*/

#sidebar .description {
	color: black;
	font-size: 11px;
	text-align: justify;
	padding:10px;
	line-height:100%;
}

#sidebar .description a {
	color: {color:Primary Colour};
	text-decoration: none;
}

#sidebar .description a:hover {
	color: {color:Secondary Colour};
}

/*The Sidebar: Links*/

#sidebar .links {
	background-color: {color:Primary Colour};
    	color: white;
	font-size: 11px;
	text-align: center;
	padding: 3px 5px;
    	margin: 2px;
   	float: left;
	width: 116px;
}

#sidebar .links a {
	text-decoration:none;
}

#sidebar .links:hover {
	background-color: {color:Secondary Colour};
}


/***************************/

/*The Main Content (Part 6)*/

#content {
    width: 560px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 60px 0 60px 460px;
    padding: 20px 0;
    color: black;
}

#content a {
    color: {color:Primary Colour};
    text-decoration: none;
}

#content a:hover {
    color: {color:Secondary Colour};
}

#content blockquote {
    border-left: solid 2px black;
    margin: 0;
    padding-left: 10px;
}

img {
    border: 0;
    max-width: 100%;
}

#content #posts {
    background-color: white;
    width: 500px;
    margin: 0 auto 20px;
    padding:10px;
}

#content #posts .title {
    font-size: 22px;
}

#content #posts .text {
    font-size:11px;
}


</style>

</head>
<body>

<!--The Sidebar (part 4)-->

<div id="sidebar">
<div class="title"><a href="/">{Title}</a></div>
<img class="image" src="{image:Sidebar}" />
<div class="description">{Description}</div>

{block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
{block:SubmissionsEnabled}<a href="/submit"><div class="links">{SubmitLabel}</div></a>{/block:SubmissionsEnabled}
{block:HasPages}{block:Pages}<a href="{url}"><div class="links">{Label}</div></a>{/block:Pages}{/block:HasPages}

</div> <!--sidebar-->
<!--I like to label my closing divs like I did above to make the code easier to read. It is not compulsary.-->

<!--------------------------->

<!--The Main Content (part 5 & 6)-->

<div id="content">
{block:Posts}
<div id="posts">

{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
{block:Caption}<div class="text">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{block:Caption}<div class="text">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Video}
{Video-500}
{block:Caption}<div class="text">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}
{AudioPlayerBlack}
<div class="text">~ {PlayCountWithLabel}</div>
{block:Caption}<div class="text">{Caption}</div>{/block:Caption}
{/block:Audio}

{block:Quote}
<div class="title">“{Quote}”</div>
{block:Source}<div class="text"><br>~ {Source}</div>{/block:Source}
{/block:Quote}

{block:Text}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="text">{Body}</div>
{/block:Text}

{block:Answer}
<div class="title">{Question}</div>
<div class="text">~ {Asker}</div>
<div class="text">{Answer}</div>
{/block:Answer}

{block:Chat}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="text">
{block:Lines}
{block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
{/block:Lines}
</div> <!--text-->
{/block:Chat}

{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}
<div class="text">{Description}</div>
{/block:Description}
{/block:Link}

</div> <!--posts-->
{/block:Posts}
</div> <!--content-->

</body>
</html>