Tutorial – Designing and coding your very first site – Part II

By Daniel Roeven | January 8, 2010 | No Comments

Program: Any Code Editor
Version: N/A
Difficulty: Easy
Estimated Completion Time: 2 hours
Sourcefile included: Yes
Continue Reading...

Remember a while ago when we designed a site in Fireworks and Photoshop? Well today we’re going to continue on and code that design, so if your new to coding then this is the tutorial for you. There are many more things to learn in web development but this is a great place to start.

Final Result

You can see a live preview here.

Before We Begin

We need to create the folder we’ll be working in. I’ve called it “coding tutorial” but that doesn’t matter, really. In that folder, create the sub-folders “img” and “css”.

Step 1

Let’s start by opening the file we created in the last tutorial. If you lost it, you can download it again.
Now, we’ll need to get the background images and such from the file we created last time. This technique is called slicing. There are many ways of slicing a PSD file, but I’ll use the simplest way for this tutorial. We’ll grab one image for the header and feature area, and one image for the projects bar. We can set the other background colors with CSS.

We’ll also need the generic thumb icon for the project images. First, disable all the text layers by clicking on the eye icon next to the “Text” folder. Now take the single column marquee tool and make a long vertical selection. Exclude the body, projects bar and footer from the selection by clicking on their layers while pressing ctrl-alt.

You should now have a long selection of the header and feature area. Crop (Image > Crop) and Save for Web & Devices (File > Save for Web & Devices). This strips all the excess information from the image, like date and camera info. As we need our website to load as fast as possible we make the images as small a possible. Save as a PNG-24 in the folder called “img”. Call it “bg.png”.

Step 1

Step 2

Ctrl-Z, (undo), a few times until you have the original file again. Now take a piece of the projects bar. Make a long vertical selection and exclude everything except the projects bar. Crop and Save for Web and call it “projectsbg.png”.

Step 3

We still need the generic thumbnail. Ctrl-click the thumbnails layer, Crop and Save for Web as “genericthumb.png”. That’s it, we’re done in Photoshop! Don’t close it yet though, because we still wan’t to copy and paste the text – it saves a lot of time later on.

Step 4: Code Editor

Mac

Open up your favorite code editor. I’ll be using Coda from Panic Software. Another good alternative for Mac is Textmate from Macromates.

Windows

Intype is a great little editor for the windows users out there, with bundles etc…

Other

Dreamweaver from Adobe is a well-known cross-platform code editor.

Pick whatever works for you. First, we’re going to do the markup, (html). It’s a good practice to do the markup first, and then the styling. Right, lets create “index.html”. Once you’ve done that, we’ll be making the basic structure of an HTML file. We need to declare the Doctype and encoding first. It’s a line of code that tells your browser what type of HTML we’re using. It looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Next, we need to add the html, head and body tags. Also we’ll need to link to a stylesheet. We don’t have one yet, but we’ll be creating one soon. Your HTML file should look like this after you’ve added the neccesary tags:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

</head>
<body>

</body>
</html>

Step 5

I recommend saving this structure for future use. Everytime I create a new website, I use the structure from a previous site. This saves a lot of time.

Let’s add the page title. Type “John Doe’s Website” between the title tags, like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>John Doe's Website</title>

</head>
<body>

</body>
</html>

Step 6

Before we can start coding the content, we have to have a vague idea of our layout. Usually you can do this in your head, but for the sake of explanation, I created an image.

Step 6

Step 7

Finally, we can start with the content! We’re going to add a “container” div first. Why? Well, a container div is a box around all of the other content. This makes it easy to center the site in the browser and position the elements.

If you don’t understand just yet, just follow along, you will later. So, add a div with an id of “container”. Inside that div, create a div with the id of “header”, one with the id of “feature”, one with the id of “body”, “projects” and finally the “footer”. Your markup should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<title>John Doe's Website</title>

</head>
<body>

<div id="container">

	<div id="header">
	</div>

	<div id="feature">
	</div>

	<div id="body">
	</div>

	<div id="projects">
	</div>

	<div id="footer">
	</div>

</div>

</body>
</html>

Step 8

Right! Let’s add the text “logo” in the “header” div. Make it an “H1″ tag, as it’s the most important text on the entire page.
Now make an unordered list for the navigation:

<div id="header">
	<h1>Logo</h1>

	<ul>
		<li><a href="#" title="">home</a></li>
		<li><a href="#" title="">about</a></li>
		<li><a href="#" title="">blog</a></li>
		<li><a href="#" title="">contact</a></li>
	</ul>
</div>

Does the above dazzle you? If so, let me explain: an Un-Ordered list, (ul), defines the start and the end of an Un-Ordered list, a List Item, (li), defines the start and the end of an entry in the list, an Anchor, (a), makes the text a link, and the href and title attributes link to a webpage and define the link description, respectively.

The href links to “#”, and that’s a placeholder for now. “#” simply links to the top of the page. Take a look what we’ve made in a browser. Just double-click your HTML file!

Step 9

Onto the feature, add “Hey there, I’m John Doe” in the feature div, wrapped in h2 tags. Also copy and paste the “lorem ipsum”, wrapped in h3 tags.

<div id="feature">
	<h2>hey There, I'm John Doe</h2>
	<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum ullamcorper elit vestibulum luctus. Curabitur.</h3>
</div>

Step 10

Now it’s time to add a “Let me introduce myself” in h4 tags. We’ll need to make some new divs as we have two columns. We are now working on this part:

So, add this in the ‘body’ div:

<div id="body">
	<div id="column1">

	</div>

	<div id="column2">

	</div>
</div>

In the first column, add

<h4>Project 1</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br />
Donec non tortor a lectus molestie ullamcorper.<br />
Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br />
</p>

<h4>Project 2</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br />
Donec non tortor a lectus molestie ullamcorper.<br />
Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br />
</p>

Explanation: Paragraph tags, (p), sets the start and the end of a paragraph, the Break tag, (br), is basically a line break. Pressing “enter” won’t work in HTML, because it doesn’t interpret any other whitespace besides one space. We’ve added these purely for learning purposes, if you don’t specify any Break tags the text will automatically go to a new line when it reaches the maximum width for the Div it’s in, (you’ll understand once we get to the CSS coding later on).

Add the same text in column two and replace “Project 1″ with “Project 3″ and “Projects 2″ with “Project 4″.

Step 11

Next we’re going to work on the projects section, In the div “projects” add:

<h2>Projects:</h2>

<a href="#" title="Project 1"><img src="img/genericthumb.png" alt="Project 1" /></a>
<a href="#" title="Project 2"><img src="img/genericthumb.png" alt="Project 2" /></a>
<a href="#" title="Project 3"><img src="img/genericthumb.png" alt="Project 3" /></a>
<a href="#" title="Project 4"><img src="img/genericthumb.png" alt="Project 4" /></a>

Step 12

The last part of the markup! In the “footer” add, in an Un-Ordered List, (ul, li), links for home, about, blog, contact, twitter and support. Try to figure it out yourself, you should have the knowledge by now. If not, here’s how it should look like:

<ul>
	<li><a href="#">home</li>
	<li><a href="#">about</li>
	<li><a href="#">blog</li>
	<li><a href="#">contact</li>
	<li><a href="#">twitter</li>
	<li><a href="#">support</li>
</ul>

And that’s it for the markup! Here’s how our HTML file should look like so far and a screenshot of our file in a browser.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>John Doe's Site</title>
<link rel="stylesheet" href="css/style.css" type="text/css" ></link>
</head>
<body>
<div id="container">

	<div id="header">
		<h1>Logo</h1>
		<ul>
			<li><a href="#">home</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">blog</a></li>
			<li><a href="#">contact</a></li>
		</ul>
	</div>

	<div id="feature">
		<h2>Hey there, I'm John Doe.</h2>
		<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus moletie ullamcorper.<br/>
			Nam inperdiet mi.<br/>
		</h3>
	</div>

	<div id="body">
		<h4>Let me introduce myself!</h4>
		<div id="column1">
			<h4>Project 1</h4>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus molestie ullamcorper.<br/>
			Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br/>

			<h4>Project 2</h4>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus molestie ullamcorper.<br/>
			Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br/>
			</p>
		</div>

		<div id="column1">
			<h4>Project 3</h4>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus molestie ullamcorper.<br/>
			Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br/>

			<h4>Project 4</h4>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
			Cras ut diam vitae lectus rhoncus consectetur sit amet in lectus.<br/>
			Donec non tortor a lectus molestie ullamcorper.<br/>
			Nam imperdiet ullamcorper mi, in gravida elit accumsan.<br/>
			</p>
		</div>
	</div>

	<div id="projects">

		<h2>Projects:</h2>
		<a href="#" title="Project 1"><img src="img/genericthumb.png" alt="Project 1"/></a>
		<a href="#" title="Project 2"><img src="img/genericthumb.png" alt="Project 2"/></a>
		<a href="#" title="Project 3"><img src="img/genericthumb.png" alt="Project 3"/></a>
		<a href="#" title="Project 4"><img src="img/genericthumb.png" alt="Project 4"/></a>
	</div>

	<div id="footer">
		<ul>
			<li><a href="#">home</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">blog</a></li>
			<li><a href="#">contact</a></li>
			<li><a href="#">twitter</a></li>
			<li><a href="#">support</a></li>
		</ul>
	</div>

</div>

</body>
</html>

Step 13

Ooh, exciting! We can start doing the css! This is going to be fun, I promise. So, let’s start by making a new file called style.css, and place it in the “css” folder. I like to start my css files by making a structure. I make three different categories with comments: “General”, “Typography” and “Style”. Then I make some sub-categories: “Header”, “Feature”, “Body”, “Projects” and “Footer”. It looks like this:

/*--- General ---*/

/*--- Typography ---*/

/*--- Style ---*/

/* Header */

/* Feature */

/* Body */

/* Projects */

/* Footer */

As you can see the different sections are the same as the id’s of the divs in the html.

Step 14

Before we get all too deep in the CSS, I’ll tell you how it works.

The story of the box model

All elements in HTML can be considered boxes. They can contain an image, or some text, or even nothing!
We can give these boxes a color with css, but we can position them too, also using css. We use margin and padding to position them, see the image below for reference.

Box Model

Step 15

Alright, we need to get rid of the default margins and paddings the browser assigns to the elements, (in most browsers there is default styling already in place, that’s sort of why people complain so much about IE6, because it doesn’t have very good pre-set default margins, among other things).

To do this we add this little line:

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px;}

As you can see, it sets all the margins and all the paddings of the body, div, img and text values etc. to zero. This eliminates nasty surprises for later on from other browsers such as IE and Opera.

Step 16

Let’s give the site a background color and such. To do this, we’ll modify the body – not the div called “body”, but the body of the HTML file. We’re going to give it a background-color of #142a5b, a background-image that repeats horizontally, and we’re going to set a base font size to work with.

body {
	background-image: url(../img/bg.png);
	background-repeat: repeat-x;
	background-color: #142a5b;
	font-size: 62.5%;
}

Look at it in the browser, you’ll see we have a fancy background!

Step 17

We’re going to set the width of the “container” div. As you can measure in Photoshop, the width should be 900 pixels. We’ll also need to center it. This can be tricky, but once you know how to do it it’s really easy. We’re going to add a margin to both sides of the container, and force them to be exactly the same size – because they’re both the same size, the container will be positioned in the center.

#container {
	margin: 0 auto;
	width: 900px;
}

Step 18

Do a browser check, and you’ll see that our layout is centered! And that’s it for the “General” category. Now, the typography. We’ve already defined the base font size: 62,5%. This makes 1em equal to 10px (em is the font value we’ll be working with – it’s bad habit to use pixels as a font size). Examine the fonts in Photoshop, we’ll discover that H1 is the color #c8d7dc, at a size of 40px, it’s bold, and of course the font is Arial. Also it’s about 20px down from the top. Translated to CSS this is:

h1 {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 4em;
	font-weight: bold;
	padding-top: 20px;
}

Editors Note: As you can see, each value is quite simple to understand, it’s remembering those values that can be tricky. Try typing it out as put above, then delete it, then type it again, and repeat maybe 3-5 times untill you remember it by hand, now don’t just keep on and on repeating it if you can’t remember it, just carry on with this tutorial and use my little tip through out, after a while it’ll be imprinted on your brain

~ KayRoseDesign.

Step 19

Now we need to do the navigation. This is a lot of work, but it’s not hard. We need to eliminate a list-style, and we need to give it about 40px padding-top. The li needs 5px padding left and right – this spaces the navigation links out. Finally the color of the links is #c8d7dc, the font is Arial, size 16px. Also, we want an underline on links we hover on. Follow my lead:

ul {
	list-style: none;
	padding-top: 40px;
}

ul li {
	padding-left: 5px;
	padding-right: 5px;
}

ul li a {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

Step 20

Wait! The navigation isn’t aligned to the right, and the links aren’t on the same line! How do we do that? We add a float: right on the “ul”. It works as you’d expect: it floats the element in question to the right. However, it wont be on the same line as our logo. To do that we need to add float: left to the logo. That pushes both of the elements in opposite directions, and they fit next to each other, on the same line. Also we need to add a float: left on the “li” element. Those are a lot of floats! Check it out:

h1 {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 4em;
	font-weight: bold;
	float: left;
	padding-top: 20px;
}

ul {
	list-style: none;
	float: right;
	padding-top: 40px;
}

ul li {
	float: left;
	padding-left: 5px;
	padding-right: 5px;
}

Step 21

Ugh, now there’s text all over the place! That’s because we floated items in opposite directions! To prevent this, we’ll add a “clearing div”. Basically, it clears up right and left. If we place a clearing div beneath our navigation, our problem should be solved. We need to go back to our HTML file and add:

<div class="clear"></div>

Then in our CSS file, under the category general, add:

.clear {
	clear: both;
}

Step 24

Practise time! Let’s test your skills. Translate the following data to CSS:

color: #244386
font-family: Arial, helvetica, sans-serif
font-size: 4em
font-weight: bold
text-align: center

#projects h2

float: left
padding-left: 20px
padding-right: 20px
padding-top: 25px

color: #244386
font-family: Arial, helvetica, sans-serif
font-size: 2.4em
font-weight: normal
text-align: center
padding-top: 20px

color: #85b2d3
font-family: Arial, helvetica, sans-serif
font-size: 3em
font-weight: bold
text-align: center

color: #85b2d3;
font-family: Arial, helvetica, sans-serif
font-size: 1.2em
font-weight: normal
text-align: center

h5 a

color: #85b2d3
text-decoration: none
padding-left: 5px
padding-right: 5px
padding-bottom: 20px

color: #85b2d3
font-family: Arial, helvetica, sans-serif
font-size: 1.6em
font-weight: normal
text-align: justify

strong

font-weight: bold

Have you succeeded? Great! If not, here’s the CSS for the above.

/*--- Typography ---*/
h1 {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 4em;
	font-weight: bold;
	float: left;
	padding-top: 20px;
}

h2 {
	color: #244386;
	font-family: Arial, helvetica, sans-serif;
	font-size: 4em;
	font-weight: bold;
	text-align: center;
}

#projects h2 {
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 25px;
}

h3 {
	color: #244386;
	font-family: Arial, helvetica, sans-serif;
	font-size: 2.4em;
	font-weight: normal;
	text-align: center;
	padding-top: 20px;
}

h4 {
	color: #85b2d3;
	font-family: Arial, helvetica, sans-serif;
	font-size: 3em;
	font-weight: bold;
	text-align: center;
}

h5 {
	color: #85b2d3;
	font-family: Arial, helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	text-align: center;
}

h5 a {
	color:  #85b2d3;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 20px;
}

p {
	color: #85b2d3;
	font-family: Arial, helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: normal;
	text-align: justify;
}

strong {
	font-weight: bold;
}

ul {
	list-style: none;
	float: right;
	padding-top: 40px;
}

ul li {
	float: left;
	padding-left: 5px;
	padding-right: 5px;
}

ul li a {
	color: #c8d7dc;
	font-family: Arial, helvetica, sans-serif;
	font-size: 1.6em;"
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

Step 23

With the typography done, we can move on to the styling part. Let’s look at our first element: the header. It’s the first element on the page, containing both the logo and the navigation. But actually, we don’t need any positioning for that element! It’s right where it should be, we can leave it right there. Next element: the feature. It looks alright actually, but it needs a margin on the top to be moved down. I used about 65 pixels. You should know how the CSS should look like.

#feature {
	margin-top: 65px;
}

Step 24

The same problem for the body: it should be positioned a little lower. Add “margin-top: 120px; to “#body”.

For the columns we’re going to work with floats again. Float “#column1″ to the left, and “#column2″ to the right. Make both of the columns 400px wide. Also both columns need a “padding-top: 30px;”, “padding-left: 20px;” and a “padding-right: 20px;”.

/* Body */
#body {
	margin-top: 120px;
}

#column1 {
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	width: 400px;
	float: left;
}

#column2 {
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	width: 400px;
	float: right;
}

Step 25

Ugly! It looks all messed up! How can this be solved? “Clearing div” to the rescue! Place it beneath the body but above the projects bar. We can reuse the clearing div as it’s a “class”.

<div class="clear"></div>

Step 26

We’re at the last part of the CSS! Technically there’s still the footer, but it doesn’t need any special styling. All that’s left is the projects bar. The projects bar has a background image, a width of 860px to make it just as wide as our body text and a height of exactly 100px. It also had a 20px top and bottom margin and we’ll center it using “auto”.

#projects {
	height: 100px;
	width: 860px;
	margin: 20px auto;
	background-image: url(../img/projectsbg.png);
}

Step 27

Nearly there! The images need correct spacing:

#projects img {
	margin-right: 20px;
	margin-top: 20px;
	border-width: 0px;
}

Final Result & Download!

Look at that, we’re done! Now go admire your work in a browser, we’ve acomplished alot today, be proud! This maybe alot for you to handle at first, but if you go over it a few times you’ll get the hang of it, and remember to drop a comment below!

Enjoy This Article

If you enjoyed reading this article then why not Tweet about it or Digg it so others may have just as much enjoyment?

Daniel Roeven

He´s Daniel Roeven, high school student by day, design geek by night, and one of our awesome guest writers here on BeCreative Magazine. Daniel has a passion for all things design-related and he likes good music. Daniel lives in Eindhoven, in the chilly but beautiful, Holland. Be sure to check out his website while you´re at it: http://www.daniel.roeven.com/

Be The First To Comment!

Comments RSS Feed

Subscribe To Our Feed

Subscribe to our RSS Feed and E-Mail for the latest updates on all of our content.

Community Link Feed!

42 Stunning Fire and Flames Illustrations
A showcase of most beautiful and fantastic fire and flames artworks.
Giveaway: Win 1000 Business Cards!
We have a nice giveaway for card lovers this week! 1000 Free Business Cards to Giveaway to 4 lucky people (each winner gets 1000) courtesy of Allbusinesscards.com
Photoshop-Quicktip #2: Shadows
Today we’re going to learn three different ways to create shadows in Photoshop, ranging from simple Drop Shadows to complex Caster Shadows.
6 Free Twitter Apps for Android And Nexus One Phones
If you still are searching for Twitter app for you Android powered phone maybe you will find useful this list of top six Twitter applications for your Android phone.
How To Create iPhone-Style Navigation (Part I)
In this tutorial I’d like to talk about how to make an iPhone style navigation using jQuery and CSS. This tutorial is divided into 2 parts. In part 1 we discusses the conception of the menu, the techniques to implement that concept and to tidy up your menu display so as to make it more like what iPhone has. In part 2, we discusses how to implement the script that we have made in part 1 on our daily life by adding AJAX (here we call the content from the menus that is chosen dynamically) and cookie (in order to make the chosen menu be appeared in the right order though we refresh the page).
The hidden power of border-radius
In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.

Submit a link!

Write For Us!

Here at BeCreative Magazine we pay $20/USD per user submitted tutorial that we approve for publication...got an idea? then send in the whole thing or just pitch us the idea and we'll take a look.

Submit an Article!

Tutorial – Designing and coding your very first site – Part II

Final Result

Before We Begin

Step 1

Step 2

Step 3

Step 4: Code Editor

Mac

Windows

Other

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

The story of the box model

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Step 21

Step 24

Step 23

Step 24

Step 25

Step 26

Step 27

Final Result & Download!

Related Posts

Enjoy This Article

Daniel Roeven

Be The First To Comment!

Leave a Reply

Subscribe To Our Feed

Community Link Feed!

Write For Us!

Our Favourites

About BeCreative Magazine

From Twitter