Simple-Webpage-Using-HTML-CSS

PART A

With the material provided to you. You should be pretty confident now to understand what HTML is and why CSS is required.

Your first assignment will be to make an index.html page which gives the following result.

• Here are the things you need to demonstrate:
• Your page should have a header, footer and nav sections.
• Show use of Buttons, Image and Anchor tags
• Show an ordered and Unordered list.

Extra marks for showing usage of font styles.

Implementation

First off, I created two files, index.html for HTML code and style.css for integrating CSS styles. This webpage gives details about the Life is Strange Franchise, which is a video game series made by DONTNOD, Square Enix and Deck Nine Games, to showcase different elements given in the problem statement.

1. The Header section consists of the Navigation Bar and the Title of the page "Life is Strange Franchise". The Navigation Bar consists of "Home", "About Us", "Games", "Community", "Contact", Sign in Button and Sign up button. Hover effect has been added on each of these sections where on normal sections it shows a dark dot below the section name and on the button lightens the color. Clicking them won't redirect to another page.
2. The Body of the webpage consists of details abouts three games which uses ordered list and the key feature of each game in unordered list. Each of them also have the game cover page as well as a hyperlink made using anchor tags to redirect to the game's Steam page.
3. The Font styles used here is Poppins which is imported in the CSS file. All the font, margins, colors and other specifications for style class wise is declared in the style.css.
4. An extra feature of Light/Dark Mode as well as a search bar in NavBar has been added using Javascript within the index.html file. The style change is in css file.

• Header:

• Hover on section "Community":

• Hover on button "Sign In":

• Search Bar:

• Light Mode:

• Dark Mode:

• Footer:

PART B

Design a Website that looks like below:

Implementation

First I created the NavBar and 3 boxes using HTML and CSS. Using a color pick tool, I extracted the color of each of the elements in screenshot, made changes accordingly. Then I generated the Lorem Ipsum text from Cupcake Lorem Ipsum tool and added in the respective places. Then comparing my work and the screenshot given, I adjusted the sizes and the margins for Navbar with the title left aligned, sections on the navbar right aligned, body with 10% margin from the left and right which applies on both the text and the boxes, with all text being justified.