Thanks to Victoria Kirst for this assignment idea!

You will be creating a journal web page.  We will design this in steps using what we have learned about HTML and CSS.

Your first version should look like this:

Of course, you can write whatever text you want.  Notice that different sections have different borders around them.  In CSS, borders 3 pixels thick are created with the following line:

border: 3px solid green;

You can replace green with other colors to get something that looks like what you see above.

Use CSS classes to style specific parts in the same way.  For example, the dates are written like the following:

<span class="date">10/20/2010</span>

And the corresponding CSS code is:

.date {
	border: 3px solid purple;
}

Part 2: spacing

Modify the spacing and alignment of elements to look like the following:

Notice that there is a 30px margin between “My life is so exciting” and the first entry.  Also notice that the orange rectangle (a div) should be 600px in width.

Part 3: Styling

Add this background image:

• The main title and entries have a background color of #C5DCE4
• The sub title has a font size of 20px, be italic and have a background color of #B8CCD3
• The entries have a 1px solid white border
• The overall container has a border of 5px solid white
• The date is italic

Done?  Is there some spacing you can add to make it look better?  Images?  Different colors?  Experiment!

(3 votes, average: 2.67 out of 5)

 Loading ...