You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+52-25Lines changed: 52 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -33,46 +33,73 @@ git push origin master
33
33
34
34
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.
35
35
36
-
:::info
37
-
In the HTML you find all the text needed! Focus on give it some style!
38
-
:::
36
+
**In the HTML you find all the text needed! Focus on give it some style!**
39
37
40
-
### Iteration 1 | Large Screen (width > 1200px)
38
+
### Iteration 1 | Extra Small Screen (width < 768px)
41
39
42
-
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!
40
+
Mobile first right? :wink:
43
41
44
-
You should have something like this:
42
+
Firs, we are going to clone the mobile design of the webpage! 📱 Oh! Remember to use **flexbox**, because it will be really helpful later on when we need to adapt it to different screen-size!
43
+
44
+
After doing your magic, you should have something like this:
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 :wink:
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.
64
+
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:
### Iteration 4 | Extra Small Screen (width < 768px)
68
+
2. Now we have 2 companies logos on each row.
70
69
71
-
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! :muscle::iphone:
70
+
3. The **subfooter** goes from 2 columns, to display all the 4 columns in the same row.
1. Our **nav-bar** starts to show all the menu links, so go ahead, remove the collapse icon and add the list.
96
+
97
+
2. On the top of the webpage, the image is displayed in line with the "Where work happens" text. If you are using `flex-box` (you must :wink: ), this should be super easy!
0 commit comments