kellishouts

ToDo Layouts

Here are some pretty layouts for the To Do List. These are optional, you can use your own styles if you wish.

Create a standard html5 setup linking an external stylesheet.

index.html
stylesheets/
 styles.css

Spacing

Text

Create a new branch from the Out of This World project.
Set up a server to run the project.
In your project directory, create a directory called 'stylesheets'.
Inside the stylesheets directory, create an external stylesheet called styles.css
In your index document, link to the external stylesheet.
Besides adding the link to the stylesheet, do not add any additional markup to the index file.
In the external stylesheet, style the page to meet the following requirements.

1. Write a style declaration (or set of declatations) that will: (a) make "Fire Kingdom" red, and (b) make everything else grey.

 <ul>
  <li class="kingdoms">
  	Kingdoms
    <ul>
      <li id="fire_kingdom">Fire Kingdom</li>

	@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700\|Fjalla+One);

	html{
	font-size: 16px;
	font-family: 'Lato', sans-serif;
	color: #FFF;
	}

	body{
	background-image: url('/images/bg.jpg');

	<html>
	<head>
	<meta charset="UTF-8">
	<title>Out of This World</title>
	<link rel="stylesheet" href="/stylesheets/styles.css">
	</head>
	<body>
	<header>
	<h1 id="title">Cosmos</h1>
	<h2 id="subtitle">Hearts of the Stars Euclid</h2>

	// oop.js
	// Class Definition (is Capitalized)
	function Animal ( name ) {
	// class constructor

	// instance properties
	this.name = name;
	this.last_ate = null;

	console.log('created a new Animal named', this.name);