🌌Nike's history

🌕 This project was created based on html-css/homework requirements

Open sabovyan.github.io/nike-history/ to view it in the browser.

---

Stack

🌌HTML

• Metatags
• Open Graph tags
• twitter cards
• Semantic tags

🌌CSS

• CSS grid
• flexbox
• media queries
• BEM methodology *

Additional tools

• 🚀Parsel

• facebook debugger
• twitter card validator
• tinypng.com the result of gulp-image or image-min plugins was not that satisfying

---

Each page and implementation

The project consists of four pages

• 🌎 Home
• 🌎 History
• 🌍 founders
• 🌏 Survey

---

🌎 Home

• 🌵 banner - CSS Grid

  • for the small screen I've left just one picture and displayed it as a block element

  .banner {
    display: block
  };

  

• 🌵 timeline - flexbox

  • I make shoeprints not visible for small screens

---

🌎 History

• 🌵 h1 - an animation which makes blinking effect
• 🌵 sections
  • section image - float: right this was the only way that I have found to wrap the text around picture

source for this page - History of Nike timeline and facts article from Thestreet

---

🌍 founders

• 🌵 the whole page was aligned using flexbox
• 🌵 Each card is hover able and has a bit more information and links about the particular person

---

🌍 Survey

• 🌵This page was lined up with CSS Grid
• 🌵 Maybe the layout is not that user-friendly, but I implemented this way to practice grid one more time

💫 footer

• there is a little animation with :hover & :active for the icons at the end of the footer

---

* BEM I have tried to use BEM for the whole project I am sure that there are lots of mistakes but I've tried to stick to this methodology