henrique-mazzoleni / lab-css-flexbox-slack

CSS | Slack clone with Flexbox

Introduction

Slack is a cloud-based set of team collaboration tools and services, or in simpler terms, an online chat application.

We use Slack app almost every day to keep our communications with our classmates and the Ironhack team, but today we will be focusing on their landing page. In today's lab, we'll recreate Slack's landing page while ensuring it's responsive and adapts well to different screens. You can see the web page that we will be cloning here.

The goal of the lab is to create a responsive landing page using CSS, Flexbox, and media queries.

Requirements

• Fork this repo
• Clone this repo

Submission

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin master

• Create a Pull Request so that your TAs can check your work.

Instructions

The starter_code folder contains all the files you'll need. The images folder contains all the images you'll need for your page, although most of them are already displayed on the page.

The index.html already contains all the text and content needed. We will be focusing on the CSS and the styling!

During each iteration, the first step you should do is to inspect the provided screenshots. These are included in each iteration, along with a preview of the final result. Use these as a starting point for implementing your styles.

---

Iteration 1 | Mobile Screens (width < 768px)

Mobile first right? 😉

We will start by focusing on the styles for mobile screens first! 📱 Oh! Remember to use Flexbox to create the layout and display the content in rows or columns from the start. You'll be working on adapting the layout to different screen sizes in the following iterations, so it's essential that you start using Flexbox from start to end!

When done, your page should look like this: Preview - Mobile

Use the following page screenshot as the guide:

Screenshot - Mobile Screens

Back to top

---

Iteration 2 | Small Screens (width > 768px and width < 1024px)

Let's start growing our screen size. Focus on small screens (iPads, tablets or bigger smartphones). Notice we have some changes. You need to work on the following ones:

• The header should go from 1 column to display 2 columns; one with the content and buttons and the other with the image.
• The company logos should be displayed in a single row
• The images in the sections in the main part should be fully displayed and aligned to the left or right side of the page, respectively.
• The section "Team large and small rely on Slack" should have the list items and the buttons displayed horizontally as rows.
• The subfooter items, previously displayed as a column, should now be displayed in a single row.

When done, your page should look like this: Preview - Small Screens

Use the following page screenshot as the guide:

Screenshot - Small Screens

Back to top

---

Iteration 3 | Medium Screens (width > 1024px and width < 1440px)

The easiest change we will have. We'll continue by focusing on the meduim screen size devices (notebooks and bigger tablets):

• The navbar should now display all the menu links. The previously displayed menu icon should now be hidden.
• The sections in the main part should now display the content in 2 columns; one column for the heading and text and the other for the image.
• The section "Welcome to your new digital HQ" should now have the buttons displayed horizontally as rows.

When done, your page should look like this: Preview - Medium Screens

Use the following page screenshot as the guide:

Screenshot - Medium Screens

Back to top

---

Iteration 4 | Large Screens (width > 1440px)

Last one! Some small changes and we are done! In this iteration we are targeting the large screen devices such as desktops and laptops:

• The sign up buttons in the header should now be displayed horizontally, next to each other. Additionaly, the image shown in the header should be centered and fully visible.

When done, your page should look like this: Preview - Large Screens

Use the following page screenshot as the guide:

Screenshot - Large Screens

Back to top

Happy coding! ❤️