diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..74c686522 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,197 @@ + + + + + + + + + + + + + Slack is your digital HQ | Slack + + + + + - + +
+
+

Great teamwork starts with a digital HQ

-
- Slack app screenshot -
-
+

Slack is free to try for as long as you'd like.

-
-
-

Trusted by companies all over the world

+
+ -
- Airbnb logo - NASA logo - Uber logo - Target logo - New York Times logo - Spotify logo + +
-
- -
-

Teams large and small rely on Slack

-

Slack securely scales up to support collaboration at the world’s biggest companies.

- +
+ Slack app screenshot +
+ + +
+
+

Trusted by companies all over the world

+ +
+ Airbnb logo + NASA logo + Uber logo + Target logo + New York Times logo + Spotify logo +
+
+ +
+

Teams large and small rely on Slack

+

+ Slack securely scales up to support collaboration at the world’s + biggest companies. +

+ +
    +
  • +

    85%

    +

    + of users say Slack has improved communication + * +

    +
    • + +
  • +

    86%

    +

    + feel their ability to work remotely has improved has improved + * +

    +
    • + +
  • +

    88%

    +

    + feel more connected to their teams* + * +

    +
    • +
+
+ +
+

Welcome to your new digital HQ

+ +
+ + +
+
+
+ +
+
    +
  • Status
    • +
  • Privacy
    • +
  • Terms
    • +
  • Cookie Preferences
    • +
  • Contact Us
    • +
  • Change Region
    • +
  • Download Slack
    • +
-
    +
    • -

      85%

      -

      - of users say Slack has improved communication - * -

      +
      • -
    • -

      86%

      -

      - feel their ability to work remotely has improved has improved - * -

      +
      • -
    • -

      88%

      -

      - feel more connected to their teams* - * -

      + +
      • +
    • +
    -
- -
-

Welcome to your new digital HQ

- - - -
- -
- - - - - \ No newline at end of file + +
+ + © 2022 Slack Technologies, LLC, a Salesforce company. All rights + reserved. Various trademarks held by their respective owners. + +
+ + + diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..c84dcf5f2 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,471 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 10px; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +/* NAVBAR */ +nav { + width: 100%; + height: 8rem; + padding: 0 3rem; + background: #540b51; + display: flex; + align-items: center; +} + +nav a { + color: #fff; + font-size: 1.5rem; + font-weight: 600; +} + +.nav-left { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 4rem; + width: 60%; +} + +.slack-logo { + width: 10rem; +} + +.nav-left ul { + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav-left ul li { + width: 9rem; +} + +.nav-right { + width: 40%; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 5rem; +} + +.nav-right button { + border: none; + background: none; + width: 3rem; + height: 3rem; +} + +.nav-right .nav-right-btns { + display: flex; + align-items: center; + gap: 4rem; +} + +.nav-right .nav-right-btns li:last-child { + background: #fff; + width: 13rem; + height: 4rem; + border-radius: 5px; + display: flex; + align-items: center; + justify-content: center; +} + +.nav-right .try { + color: #540b51; + font-size: 400; + text-transform: uppercase; +} + +/* header */ +header { + background: #540b51; + color: #fff; + padding: 4rem 8rem; + display: flex; + align-items: center; +} + +.header-left { + width: 50%; +} + +.header-left h1 { + font-size: 7.8rem; + font-weight: 900; + margin-bottom: 10rem; +} + +.header-left p { + font-size: 2.6rem; + width: 45rem; + margin-bottom: 3rem; +} + +.header-left span { + color: #ecb12f; + font-weight: 600; +} + +.header-right img { + width: 100%; + /* padding: 3rem 0; */ +} + +.header-btns { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10rem; +} + +.header-btns button { + width: 48%; + height: 5rem; + text-transform: uppercase; + font-size: 1.6rem; + letter-spacing: 1px; + color: #540b51; + border-radius: 8px; + border: none; + cursor: pointer; +} + +.header-btns button:last-child { + display: flex; + align-items: center; + justify-content: center; + gap: 4rem; + background: #4285f4; + position: relative; +} + +.header-btns button img { + width: 3rem; + background: #fff; + padding: 2px; + margin-left: 8px; + position: absolute; + left: 0; +} + +.header-btns button span { + color: #fff; + font-size: 1.6rem; + font-weight: 400; +} + +/* main */ +main { + margin-bottom: 3rem; +} + +.companies { + background: #f3eae2; + padding: 3rem; + text-align: center; + margin-bottom: 10rem; +} + +.companies p { + font-size: 1.6rem; + color: #000000; + font-weight: 500; + text-transform: uppercase; +} + +.brands { + display: flex; + align-items: center; + justify-content: space-between; + padding: 3rem 1rem; +} + +.airbnb { + width: 10rem; +} + +.nasa { + width: 6rem; +} + +.uber { + width: 8rem; +} + +.target { + width: 5rem; +} + +.nty { + width: 20rem; +} + +.spotify { + width: 12rem; +} + +.teams { + text-align: center; + margin-bottom: 8rem; +} + +.teams h3 { + font-size: 4.4rem; + font-weight: 800; + color: #540b51; + margin-bottom: 3rem; +} + +.teams > p { + font-size: 1.8rem; + font-weight: 400; + color: #191817; + margin-bottom: 6rem; +} + +.teams > ul { + padding: 0 8rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.teams > ul > li { + width: 20%; + height: 17rem; +} + +.teams > ul p { + font-size: 1.5rem; + font-weight: bolder; + color: #191817; + text-align: left; +} + +.teams > ul p span { + font-size: 7rem; + color: #540b51; + font-weight: 900; +} + +.welcome { + background: #540b51; + color: #fff; + padding: 8rem 0 5rem 0; + margin-bottom: 5rem; + text-align: center; +} + +.welcome h3 { + font-size: 4rem; + font-weight: bolder; + margin-bottom: 3rem; +} + +.welcome-btns { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; +} + +.welcome button { + text-transform: uppercase; + font-size: 1.5rem; + font-weight: 500; + color: #540b51; + width: 20rem; + height: 6rem; + border-radius: 5px; + border: none; +} + +.welcome button:last-child { + background: #540b51; + border: 1px solid #fff; + color: #fff; +} + +/* footer */ +footer { + margin: 3rem auto; + width: 90%; + border-top: 2px solid #eee; + font-size: 1.4rem; +} + +footer ul { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 3rem; +} + +footer .footer-nav { + font-weight: 500; +} + +footer .footer-nav li:last-child { + color: #4285f4; +} + +footer .footer-icon { + width: 30%; + font-size: 2.4rem; + margin-bottom: 4rem; +} + +/* width > 1024px and width < 1440px */ +@media (min-width: 1024px) and (max-width: 1440px) { + .header-btns { + flex-direction: column; + gap: 2rem; + } + + .header-btns button { + width: 100%; + } +} + +/* width > 768px and width < 1024px */ +@media (min-width: 768px) and (max-width: 1024px) { + html { + font-size: 8px; + } + + .nav-left ul { + display: none; + } + + .nav-right .nav-right-btns { + display: none; + } + + .nav-right .btn-menu { + display: block; + } + + .header-btns { + flex-direction: column; + gap: 2rem; + } + + .header-btns button { + width: 100%; + } + + .welcome-btns { + flex-direction: column; + gap: 1rem; + } + + .welcome button { + width: 50%; + } +} + +/* width < 768px */ +@media (max-width: 768px) { + html { + font-size: 8px; + } + + .nav-left ul { + display: none; + } + + .nav-right .nav-right-btns { + display: none; + } + + .nav-right .btn-menu { + display: block; + } + + header { + flex-direction: column; + text-align: center; + justify-content: center; + } + + .header-left, + .header-left p, + .header-btns button { + width: 100%; + } + + .header-btns { + flex-direction: column; + gap: 2rem; + } + + .brands { + flex-wrap: wrap; + } + + .teams > ul { + flex-direction: column; + + gap: 3rem; + } + + .teams > ul > li { + width: 30%; + height: auto; + } + + .teams > ul p { + text-align: center; + } + + .header-btns { + flex-direction: column; + gap: 2rem; + } + + .header-btns button { + width: 100%; + } + + .welcome-btns { + flex-direction: column; + gap: 1rem; + } + + .welcome button { + width: 50%; + } + + footer .footer-nav { + flex-direction: column; + align-items: flex-start; + gap: 2rem; + } + + footer .footer-icon { + width: 100%; + } + + footer > div { + text-align: center; + } +}