Remake the Template

In this exercise, you will be recreating a template from scratch using common CSS properties that you’ve learned thus far.

Purpose

The purpose of this assignment is to get you used to writing HTML and CSS code to create content from scratch.

Getting Started

  1. Create a new project folder with an index.html file and css/styles.css
  2. Copy the starter code into the new index.html file:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

  </body>
</html>
  1. Copy the batman_logo.png here
  2. Open your project in Sublime Text.
  3. Get started.

Requirements

Extra challenge

Instructions

  1. Link the HTML and CSS files together.
  2. Open your project in the browser.
  3. Find the fonts Comfortaa and Fjalla One from Google Fonts and link them into the website.
  4. Go to http://batman-ipsum.com/ and copy some batman ipsum to use as your paragraph in the page.
  5. Create a nav bar with four links: Home, Journey, Details, Contact.
  6. Include the image provided in the webpage.
  7. Format the image size in CSS to be 75% of the page.
  8. Add an h1 with the text Beginning the Journey
  9. Add a p element for the text that you got from http://batman-ipsum.com/.
  10. Format the p tag in CSS to be no wider than 75% of the webpage.
  11. Add a footer element with Batman Ipsum Provided by http://batman-ipsum.com/. The link must be used in an a tag.
  12. Finish the rest of the project in the CSS file.