# Project 2

# Final Bootstrap Project

• The final project is building a 3-page Responsive website with the Bootstrap version 4 framework.
• Create your OWN colour scheme to override the defaults provided by Bootstrap 4.
• You will be graded on good design too.
• You must make your OWN Bootstrap website. If you are caught using a commericial (or free) template for your Bootstrap site then you will get ZERO on this project.
• Common to Every PAGE
  • Every page must have the same navigation menu at the top
  • The nav menu lets the user navigate between Home, Portfolio, and Contact page.
  • Below the nav bar will be a large header area with a minimum height of 40% of the viewport.
  • Inside the header you need to have a round avatar which is half the height of the header and centered vertically inside the header.
  • The title in the header will be different on each page.
  • The colour scheme needs to be the same on every page.
  • The header background should always be 100% the width of the page.
  • All the content on the page should fit inside 80% the width of the page.
  • The content areas should always be centered on the screen.
  • The only exception to the 80% width is the mobile phone layout where the content area would fill the whole width of the screen. You still need padding though.
• Page ONE (Home)
  • The home page will contain a list of at least 6 technologies that you have learned to use this semester. Each technology (e.g. HTML, CSS, JS, etc.) needs an icon and at least one paragraph detailing what you can do with that technology.
  • The title on the home page will be your name.
• Page TWO (Portfolio)
  • The portfolio page will contain a list of projects that you have created and stored on Github.
  • The projects will be displayed as Bootstrap Card elements.
  • Each card should be the same width.
  • As the width of the page adjusts so will the number of cards shown in each row.
  • Each card needs to have a thumbnail image at the top of the Card and it should fill the whole Card width
  • Card sizes can be adjusted as well as the page resizes. Try to always make the best use of the available width.
  • The title on this page will be Portfolio
• Page THREE (Contact)
  • The third page is a form that the visitor would fill out to request that you work on a job.
  • They will need to provide their own contact info - name, email, phone
  • They will also need to provide a time frame for the work and details about the job.
  • The title on this page will be Contact for Hiring
  • The form should have different layouts that make best use of the space available.
• Sass Stylesheets
  • Use Sass to create your own unique colour palette for this project
  • Use Sass partials to separate your scss stylesheets into logical groupings (e.g. variables, header, etc.) and import the partials into your main scss stylesheet
  • You should store all of your Sass stylesheets in a directory named scss and have them compile into a CSS stylesheet in a directory named css

# Submission

• The repo needs to be private.
• Set the Master branch as the Github Pages branch for the repo.
• On the Assignment page in BS LMS, submit both the github.io URL and the github.com URL.
• You will need to test the page through GitHub Pages on GitHub.io to see if your CSS works.
• Be sure to invite me to your repo via my Algonquin College Github account (garrarj), otherwise I will not be able to view and mark your repo.

Back to Assignment List