Landing Page Styling

[dev-mhany]

PC Styling Edits

Landing Page

1. Navbar Logo

• Change font family from Lato to Inter.
• Adjust margin-right from 8px to 0px.
• Change margin-left from 12.5vw to 185px (or 9.6vw at a 1920px viewport).
• Set the gap between navbar text items to 74px.

2. Login Button

• Adjust width from 146px to 148px.

3. Showcase Title

• Increase line height from 60px to 62.5px.
• Change width from 60% to 771px (or 40vw at a 1920px viewport).
• Add margin-right of 71px (replacing the current padding of 32px).

4. Description Text ("whether")

• Reduce line height from 27px to 22.5px.

5. "Build Your Skill" Button

• Reduce width from 197px to 177px.
• Change font family from Lato to Roboto.
• Reduce line height from 24px to 20px.

6. "How It Works - 3 Simple Steps" Section

• Add margin-top of 60px.
• Reduce font size from 26px to 22px.
• Change title font family to Poppins.
• Reduce line height from 32.5px to 27.5px.

7. "How It Works" Cards

• Reduce icon margin-bottom from 16px to 15px.
• For numbered items (1., 2., 3.):
  • Reduce font size from 20px to 18px.
  • Change line height from 32px to 22px ("normal").
  • Increase font weight from 500 to 700.
• Reduce padding-top from 24px to 15px.
• Reduce padding-bottom from 16px to 15px.
• Change text color from #000000 to #202E5B.
• Increase card description font size from 14px to 18px.
• Increase padding-bottom from 24px to 30px.
• Reduce horizontal padding from 24px to 10px.

8. Section Spacing

• Increase margin-bottom before the footer from 48px to 99px (at a 1920px viewport).
• Change margin-top from 31px to 60px (from the last featured skill image).

9. Footer

• Remove the support email.
• Add <br/> after “100% data privacy - no tracking,” and set the width of the entire box to 348px.
• Change font size to 18px (from 16px) with a line height of 24px.
• Change small text font size to 14px (from 13px) with letter spacing of -0.14px.
• Change margin-left to 240px instead of 12.5vw, or remove 16px from the left padding.

10. 3 Cards Overlapping Image

• Set width to 558px or 46.094vw.
• Set height to 467px or 24.323vw.
• Set margin-right to 260px or 13.542vw.

---

Mobile Styling Edits

Landing Page

1. Navbar

• Set hamburger button margin-right to 15px instead of 8px padding.

2. Showcase Title

• Align text to start instead of center.
• Set margin-top to 43px from the end of the navbar instead of 75px.

3. Description Text ("whether")

• Increase the gap between elements to 15px instead of 10px.

4. "Build Your Skill" Button

• Reduce width from 197px to 195px.
• Reduce height from 52px to 44px.
• Set inner padding:
  • padding-left and padding-right to 20px.
  • padding-top and padding-bottom to 22px.

5. “What are OpenCreds?”

• Change font family to Poppins instead of Lato.
• Change font size to 22px instead of 1.125rem.
• Change font weight to 700 instead of 400.
• Align text to start instead of center.

6. Card Image

• Set height to 304px.
• Set width to 131px.
• Set margin-left to 15px.
• Apply margin-x and padding of 15px, and set margin-bottom to 45px for the entire section.

7. "How It Works - 3 Simple Steps" Section

• Set title width to 92.308vw with margin-x of 15px.
• Apply padding:
  • padding-left and padding-right to 15px.
  • padding-top to 0.5px.
  • padding-bottom to 10.5px.
• Set margin-bottom to 15px.

8. "How It Works" Cards

• Reduce padding-top from 24px to 15px.
• Reduce padding-bottom from 24px to 15px.
• Set section margin-bottom to 15px instead of padding-bottom of 48px.

9. "Build Your Skill" Button (Mobile)

• Set width to 100% with a maximum width of 360px.
• Apply margin-x of 15px.
• Change font family to Roboto instead of Lato.
• Set line height to 20px instead of 1.75.
• Set margin-bottom to 30px instead of 90px.

10. Footer

• Set margin-top to 60px.