responsive-portfolio

Link to webpage

There are 3 HTML files for this homework :

  • index.html (About/Home)
  • portfolio.html
  • contact.html

Navbar

using Bootstrap and adding some CSS styles such as :

  • Google fonts for navbar brand
  • Pseudo class (hover)

Also, there is a hamburger menu on navbar for small screens and needs javascript functin. That is why I left it inactive for now!

About/Home Page

Using grid system to create it.

  • first row with two columns (col-md-6)
  • second row with one column (row mb-5 mt-5)

Using Fontawesome to add Github icon for a fixed footer and then add my githup account link.

Portfolio

using

  • alert class

  • grid system

    (col-md-4 & col-md-8)

    (col-md-12 col-lg-6) for cards

  • card

    Adding links to cards and opening them in a new tab (target:_blank)

Contact

  • using grid system one row with 2 columns

    (col-md-6)

  • adding media query that hide the picture for screen less than 460 px

    @media screen and (max-width:460px) { #pic{ display: none; } }

Adding background images and some CSS styles

  • background colors
  • fonts
  • font styles
  • position
  • margin
  • padding