adriana2710 / mini-project01

Mini Project 1 - Software Engineering IOD

Mini Project 1 - Software Engineering IOD

This is the solution to the first challenge from my Software Engineering course at the Institute of Data.

Table of contents

• The challenge
• Screenshot
• Built with

The challenge

You have been hired by Oyo to create a login page for their website. They want to have their login page have the following features:

● A background image for the whole page that is supplied to you by Oyo (oyo.jpg in Google Classroom) ● A header at the top to welcome the user ● A navigation bar with a Home, Link, and Affiliates button and a dropdown menu on the left, and a search box and search button on the right ● A login form which allows the user to enter their username and password, and their gender. ● The login form will also have a login button, a registration link, and also various disclaimers. ● The login form will have a slightly darkened background so it is distinct, but won’t be dark enough to not be able to see the page’s image background ● Try to make the page look like end-result-1.png and end-result-2.png in Google Classroom Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• BEM methodology
• Desktop-first workflow