Giter Site home page Giter Site logo

lab-css-flexbox-slack's Introduction

Ironhack logo

CSS | Slack Clone with Flexbox

Introduction

You should be reaaaaally familiar with Slack at this point, but just to make it more clear, Slack is a cloud-based set of team collaboration tools and services or in simpler terms, it is a chatting program.

We use the app almost every day to keep our communications with our classmates and the Ironhack team, so we know perfectly the chat interface but today we are going to clone their landing page. Here you can visit the website and check what are we going to do. ๐Ÿ˜œ

We want to practice our new Flexbox skill, so we are going to implement the "responsiveness" of the landing page. No worries, we will show you what we need!

Requirements

  • Fork this repo
  • Clone this repo into your ~/code/labs
  • Include both the client and server applications in your submission.

Submission

  • Upon completion, run the following commands
git add .
git commit -m "done"
git push origin master

Exercise

The starter_code contains the basic structure of an HTML & CSS project to start working. You will also find and images folder where all the images you will need for the project are stored.

:::info In the HTML you find all the text needed! Focus on give it some style! :::

Iteration 1 | Large Screen (width > 1200px)

First, we need to clone the design we see on our laptops! :laptop: ๐Ÿ’ป Oh! Remember to use flexbox, because it will be really helpful later on when we need to adapt it!

You should have something like this:

Iteration 2 | Medium Screen (1024px > width > 960px)

This one is really simple, we just need small changes.

  1. The menu on our top nav-bar is replaced by a toggle button. We just need to make the list disappears and show the toggle menu button. Not necessary to make the button work, remember we are practicing our design skills here ๐Ÿ˜‰

  2. Change the main header layout. Instead of having them one beside the other, now we need the text on top and the image below it.

Iteration 3 | Small Screen (961px > width > 767px)

On small screens, we just need one change. The companies logo, instead of 3 per row, we should display them in pairs, that means we will have 3 rows of 2 logos each.

Iteration 4 | Extra Small Screen (width < 768px)

Last one! On extra small screens we will have a lot of changes! If you notice, this is the width apply to smartphones, so our web will have some changes! Take a look of the following screenshoots and adapt your code to clone it! ๐Ÿ’ช ๐Ÿ“ฑ







lab-css-flexbox-slack's People

Contributors

alexbhdez avatar papuarza avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.