From e0ca08b5c6a06ff4273d4a690301d465b7341324 Mon Sep 17 00:00:00 2001 From: MassFuer Date: Tue, 18 Nov 2025 17:57:21 +0100 Subject: [PATCH 1/2] not finished, I got a headache :) --- starter_code/index.html | 319 +++++++++++++++-------------- starter_code/stylesheets/style.css | 204 ++++++++++++++++++ 2 files changed, 367 insertions(+), 156 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..b7c7b917e 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,186 @@ + + + + + + + + + + + + + Slack is your digital HQ | Slack + + + + + - - - - - - -
-
-

Great teamwork starts with a digital HQ

- -

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

- - - + + © 2022 Slack Technologies, LLC, a Salesforce company. All rights + reserved. Various trademarks held by their respective owners. +
- -
- -
- 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

- - - -
- -
- - - - - \ No newline at end of file + + + diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..b6a243d60 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,207 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ +*, *::before, *::after { + box-sizing: border-box; +} +nav, header { + background-color: #540B51; +} +#hero-img { + width: 80%; +} +.logos img { + width: 50px; +} + +@media screen and (max-width: 768px) { + /* nav { + display:flex; + } */ + .nav-laptop { + display:none; + } + .nav-mobile { + display:flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + } + .nav-mobile button { + background-color: #540B51; + border: none; + } + .logo { + margin-right:auto; + width: 100px; + } + header { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + header h1 { + font-size: 40px; + font-weight: bold; + } + header h1,p { + text-align: center; + color: white; + } + .slack { + color:#ECB12F + } + .sign-up { + display: flex; + flex-direction: column; + margin: 10px; + } + .sign-up button { + width: 100%; + height: 70px; + border: grey; + border-radius: 8px; + margin: 5px auto; + } + .sign-up img { + /* width: 100%; */ + height: 50px; + background-color: white; + } + .sign-up-email { + background-color: white; + text-transform: uppercase; + font-weight: bold; + color:#540B51 + } + .sign-up-google { + display:flex; + justify-content: space-around; + align-items: center; + text-transform: uppercase; + background-color: #4285F4; + font-weight: bold; + } + .hero { + margin: 20px; + } + .container { + width: 100%; + margin:0; + padding:0; + /* border: 1px solid red; */ + } + .partners { + background-color: #F3EAE2; + + } + .partners p { + color: black; + font-weight: bold; + text-transform: uppercase; + font-size: 25px; + } + .logos { + display:flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + .logos img { + width: 33%; + } + .stats { + /* display:flex; */ + /* justify-content: center; */ + background-color: white; + /* text-align: center; */ + } + .stats h3 { + color:#540B51; + font-size: 40px; + text-align: center; + font-weight: bold; + } + .stats p { + color:black; + font-size: 20px; + text-align: center; + font-weight: bold; + } + .percentages li { + margin: 10px auto; + } + .percentages li p { + color:black; + font-size: 12px; + font-weight: bold; + width: 50% + } + .percentages li p span { + color:#540B51; + font-size: 40px; + } + .stats li { + list-style: none; + } + .welcome { + background-color: #540B51; + padding: 10px 0; + } + .welcome h3 { + color: white; + font-size: 40px; + font-weight: bold; + text-align: center; + } + .welcome button { + display:block; + padding: 5px; + margin: 5px auto; + width: 80%; + background-color: white; + color:#540B51; + border: 1px solid white; + border-radius: 8px; + text-transform: uppercase; + } + .welcome button:nth-child(2) { + background-color: #540B51; + color:white; + border: 1px solid white; + text-transform: uppercase; + + } + footer { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: left; + } + .legal li { + margin-left: 0; + padding-left: 0; + list-style: none; + font-weight: bold; + } + .legal li:last-child { + color:#2E71A6; + } + .icons { + display:flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + /* align-self: space-between; */ + } + .icons li { + list-style: none; + } + small { + text-align: center; + color:grey; + align-self: center; + } +} \ No newline at end of file From 63373dc0032bf02b0596a2b0e4ec517d1fb666ae Mon Sep 17 00:00:00 2001 From: MassFuer Date: Wed, 19 Nov 2025 16:08:41 +0100 Subject: [PATCH 2/2] another try with 2 more breakpoints --- starter_code/index.html | 5 +- starter_code/stylesheets/style.css | 385 ++++++++++++++++++++++++++++- 2 files changed, 377 insertions(+), 13 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index b7c7b917e..2062090f3 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -74,7 +74,8 @@

Great teamwork starts with a digital HQ

@@ -175,7 +176,7 @@

Welcome to your new digital HQ

-
+
© 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 b6a243d60..aaedff52d 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -33,12 +33,14 @@ nav, header { flex-direction: row; justify-content: flex-end; align-items: center; + padding: 10px; } .nav-mobile button { background-color: #540B51; border: none; } .logo { + margin: 10px; margin-right:auto; width: 100px; } @@ -49,7 +51,7 @@ nav, header { align-items: center; } header h1 { - font-size: 40px; + font-size: 4em; font-weight: bold; } header h1,p { @@ -97,6 +99,8 @@ nav, header { width: 100%; margin:0; padding:0; + display: flex; + flex-direction: column; /* border: 1px solid red; */ } .partners { @@ -120,26 +124,37 @@ nav, header { width: 33%; } .stats { - /* display:flex; */ - /* justify-content: center; */ + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; background-color: white; /* text-align: center; */ } .stats h3 { color:#540B51; - font-size: 40px; + font-size: 32px; text-align: center; font-weight: bold; } .stats p { color:black; - font-size: 20px; + font-size: 18px; text-align: center; font-weight: bold; } - .percentages li { - margin: 10px auto; + .percentages { + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; + /* width: 100%; */ + /* margin: 10px 0; + padding: 0; */ } + /* .percentages li { + margin: 10px auto; + } */ .percentages li p { color:black; font-size: 12px; @@ -149,6 +164,7 @@ nav, header { .percentages li p span { color:#540B51; font-size: 40px; + padding: 10px; } .stats li { list-style: none; @@ -186,10 +202,9 @@ nav, header { flex-direction: column; justify-content: flex-start; align-items: left; + margin: 0; } .legal li { - margin-left: 0; - padding-left: 0; list-style: none; font-weight: bold; } @@ -206,9 +221,357 @@ nav, header { .icons li { list-style: none; } - small { + .small { text-align: center; color:grey; align-self: center; } -} \ No newline at end of file +} + +@media screen and (min-width: 768px) and (max-width: 1024px) { + .nav-laptop { + display:none; + } + .nav-mobile { + display:flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + padding: 10px; + } + .nav-mobile button { + background-color: #540B51; + border: none; + } + .logo { + margin: 10px; + margin-right:auto; + width: 100px; + } + header { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + } + header h1 { + font-size: 3em; + font-weight: bold; + } + header h1,p { + text-align: center; + color: white; + } +} + .slack { + color:#ECB12F + } + .sign-up { + display: flex; + flex-direction: column; + margin: 10px; + } + .sign-up button { + width: 100%; + height: 70px; + border: grey; + border-radius: 8px; + margin: 10px auto; + } + .sign-up img { + /* width: 100%; */ + height: 50px; + background-color: white; + } + .sign-up-email { + background-color: white; + text-transform: uppercase; + font-weight: bold; + color:#540B51 + } + .sign-up-google { + display:flex; + justify-content: space-around; + align-items: center; + text-transform: uppercase; + background-color: #4285F4; + font-weight: bold; + } + .hero { + margin: 20px; + } + .container { + width: 100%; + margin:0; + padding:0; + display: flex; + flex-direction: column; + /* border: 1px solid red; */ + } + .partners { + background-color: #F3EAE2; + + } + .partners p { + color: black; + font-weight: bold; + text-transform: uppercase; + font-size: 25px; + } + .logos { + display:flex; + flex-wrap: nowrap; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: 20px; + } + .logos img { + width: 10%; + } + .stats { + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: white; + /* text-align: center; */ + } + .stats h3 { + color:#540B51; + font-size: 32px; + text-align: center; + font-weight: bold; + } + .stats p { + color:black; + font-size: 18px; + text-align: center; + font-weight: bold; + } + .percentages { + display:flex; + flex-direction: row; + justify-content: center; + align-items: center; + /* width: 100%; */ + /* margin: 10px 0; + padding: 0; */ + } + /* .percentages li { + margin: 10px auto; + } */ + .percentages li p { + color:black; + font-size: 12px; + font-weight: bold; + width: 50% + } + .percentages li p span { + color:#540B51; + font-size: 40px; + padding: 10px; + } + .stats li { + list-style: none; + } + .welcome { + background-color: #540B51; + padding: 10px 0; + } + .welcome h3 { + color: white; + font-size: 40px; + font-weight: bold; + text-align: center; + } + .welcome button { + display:block; + padding: 5px; + margin: 5px auto; + width: 80%; + background-color: white; + color:#540B51; + border: 1px solid white; + border-radius: 8px; + text-transform: uppercase; + } + .welcome button:nth-child(2) { + background-color: #540B51; + color:white; + border: 1px solid white; + text-transform: uppercase; + + } + footer { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: left; + margin: 0; + } + .legal { + display:flex; + flex-direction: row; + justify-content: space-between; + align-items: left; + } + .legal li { + list-style: none; + font-weight: bold; + } + .legal li:last-child { + color:#2E71A6; + } + .icons { + display:flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + /* align-self: space-between; */ + } + .icons li { + list-style: none; + margin: 20px 50px 20px 0; + } + .small { + text-align: left; + color:grey; + margin: 0 20px + } + + @media screen and (min-width: 1024px) and (max-width: 1440px) { + .nav-mobile { + display:none; + } + /* nav { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } */ + .nav-laptop { + display:flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 10px; + } + .nav-links { + display:flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + margin-right: 20px; + } + .nav-links li { + list-style: none; + margin: 0 10px; + font-weight: bold; + } + .nav-links li a { + color: white; + text-decoration: none; + } + .nav-laptop button { + background-color: #540B51; + border: none; + } + .logo { + /* margin: 10px; */ + /* margin-right:auto; */ + width: 100px; + } + header { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + } + header h1 { + font-size: 3em; + font-weight: bold; + } + header h1,p { + text-align: center; + color: white; + } +} + .slack { + color:#ECB12F + } + .sign-up { + display: flex; + flex-direction: column; + margin: 10px; + } + .sign-up button { + width: 100%; + height: 70px; + border: grey; + border-radius: 8px; + margin: 10px auto; + } + .sign-up img { + /* width: 100%; */ + height: 50px; + background-color: white; + } + .sign-up-email { + background-color: white; + text-transform: uppercase; + font-weight: bold; + color:#540B51 + } + .sign-up-google { + display:flex; + justify-content: space-around; + align-items: center; + text-transform: uppercase; + background-color: #4285F4; + font-weight: bold; + } + .hero { + margin: 20px; + } + .container { + width: 100%; + margin:0; + padding:0; + display: flex; + flex-direction: column; + /* border: 1px solid red; */ + } + .partners { + background-color: #F3EAE2; + + } + .partners p { + color: black; + font-weight: bold; + text-transform: uppercase; + font-size: 25px; + } + /* .welcome { + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; + } */ + + .welcome button { + padding: 5px; + margin: 5px auto; + width: 80%; + background-color: white; + color:#540B51; + border: 1px solid white; + border-radius: 8px; + text-transform: uppercase; + } + .welcome button:nth-child(2) { + background-color: #540B51; + color:white; + border: 1px solid white; + text-transform: uppercase; + } \ No newline at end of file