From 21ec27fc52d46ac14cf089a8a8cad08775037993 Mon Sep 17 00:00:00 2001 From: karunya10 Date: Wed, 9 Jul 2025 15:47:25 +0200 Subject: [PATCH 1/6] Mobile screen support --- starter_code/index.html | 363 ++++++++++++++++------------- starter_code/stylesheets/style.css | 248 ++++++++++++++++++++ 2 files changed, 448 insertions(+), 163 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..01d0bc71e 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,216 @@ + + + + + + + + + + + + + Slack is your digital HQ | Slack + + + + + + +
- Airbnb logo - NASA logo - Uber logo - Target logo - New York Times logo - Spotify logo +

Great teamwork starts with a digital HQ

+ +

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

+ +
- - -
-

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

+
+ + +
+
+
+ + + + diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..b6c7980c1 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,251 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +body { + font-family: "Mulish", Arial, Helvetica, sans-serif; + background-color: #540b51; +} + +.navbar-logo-menus { + display: none; +} +.navbar { + display: flex; + justify-content: space-between; +} +.navbar-logo img { + height: 70px; + width: 70px; + object-fit: contain; +} +.navbar-button button { + background: none; + border: none; + padding-top: 20px; +} + +@media screen and (max-width: 768px) { + .header h1, + p { + text-align: center; + color: white; + } + .header p { + padding-bottom: 20px; + } + .changeColor { + color: #ecb12f; + } + + .email-button-div { + display: flex; + flex-direction: column; + gap: 15px; + align-items: center; + padding: 10px; + } + .email-button { + width: 300px; + height: 50px; + padding: 0 20px; + text-transform: uppercase; + border-radius: 6px; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + } + .email-button:first-child { + background-color: white; + color: #4b0055; + border: none; + } + + .google-btn { + background-color: #4285f4; + color: white; + justify-content: space-between; + } + .google-text { + flex-grow: 1; + } + .google-logo { + height: 20px; + background-color: white; + margin-right: 10px; + border-radius: 3px; + padding: 2px; + } + + .header { + display: flex; + flex-direction: column; + justify-content: center; + } + .head > div:last-child { + max-width: 100%; + overflow: hidden; + } + .slack-app-screenshot { + width: 100%; + height: auto; + max-width: 600px; + display: block; + margin: 0 auto; + object-fit: contain; + padding: 20px; + } + + .img-section { + text-align: center; + background-color: #f3eae2; + padding: 2rem; + } + .img-section > p { + font-weight: bold; + font-size: 1.25rem; + margin-bottom: 2rem; + } + .logo-grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + max-width: 800px; + margin: auto; + } + + .trusted-img { + height: 50px; + object-fit: contain; + } + + .text-section { + display: flex; + flex-direction: column; + background-color: white; + align-items: center; + justify-content: center; + } + + .text-section h3 { + font-size: x-large; + margin-bottom: 0px; + } + + .purple { + color: #540b51; + font-size: x-large; + font-weight: bold; + } + + .text-section ul > li { + list-style: none; + margin: 0px; + } + .text-list { + display: flex; + flex-direction: column; + gap: 20px; + } + + .text-section li:nth-child(2) { + margin: 0px; + } + + .text-sub-list { + display: flex; + flex-direction: column; + } + .text-sub-list p { + margin: 0px; + } + .text-sub-list p:nth-child(2) { + text-align: center; + font-weight: bold; + } + .digital-HQ { + height: 150px; + width: 100%; + text-align: center; + } + .digital-HQ h3 { + color: white; + font-size: x-large; + } + .btn { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + } + .digital-HQ button { + background: none; + color: white; + border: 2px solid white; + height: 40px; + width: 50%; + } + .digital-HQ button:hover { + background: white; + color: #540b51; + } + footer { + padding-top: 10px; + height: 250px; + margin-top: 40px; + background: white; + } + footer li { + list-style: none; + font-weight: 500; + } + footer ul { + display: flex; + flex-direction: column; + gap: 10px; + } + + .link { + display: flex; + gap: 20px; + } + .link img { + object-fit: contain; + } + + .small-line { + width: 400px; + height: 2px; + background-color: rgb(244, 240, 240); + border: none; + margin: auto; + } + .foot-section { + display: flex; + background: white; + flex-direction: column; + } + .icon-class { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0px 10px; + } + .foot-note { + background: white; + text-align: center; + font-color: #454245; + margin-bottom: 20px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1024px) { + .header { + display: flex; + justify-content: center; + } +} From 9a313b84095bf93428c0c0b46576e2b3e269739f Mon Sep 17 00:00:00 2001 From: karunya10 Date: Wed, 9 Jul 2025 16:48:49 +0200 Subject: [PATCH 2/6] Ipad screen support --- starter_code/index.html | 4 +- starter_code/stylesheets/style.css | 307 +++++++++++++++++++++++------ 2 files changed, 247 insertions(+), 64 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 01d0bc71e..9064b6094 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -83,7 +83,7 @@

Great teamwork starts with a digital HQ

-
+
Slack app screenshotGreat teamwork starts with a digital HQ
-

Trusted by companies all over the world

+

TRUSTED BY COMPANIES ALL OVER THE WORLD

div:last-child { - max-width: 100%; - overflow: hidden; - } +.head > div:last-child { + max-width: 100%; + overflow: hidden; +} + +@media screen and (max-width: 768px) { .slack-app-screenshot { width: 100%; height: auto; @@ -112,8 +119,9 @@ body { } .img-section > p { font-weight: bold; - font-size: 1.25rem; + font-size: 0.7rem; margin-bottom: 2rem; + color: black; } .logo-grid { display: flex; @@ -245,7 +253,7 @@ body { .foot-note { background: white; text-align: center; - font-color: #454245; + color: #454245; margin-bottom: 20px; } } @@ -254,5 +262,180 @@ body { .header { display: flex; justify-content: center; + flex-direction: row; + } + .slack-app-screenshot { + width: 100%; + height: 50%; + margin: 0 auto; + object-fit: contain; + padding: 20px; + } + .screenshot { + margin-top: 50px; + } + .img-section { + text-align: center; + background-color: #f3eae2; + padding: 2rem; + } + .img-section > p { + font-weight: bold; + font-size: 0.7rem; + margin-bottom: 2rem; + color: black; + } + .logo-grid { + display: flex; + flex-direction: row; + justify-content: center; + gap: 1rem; + max-width: 800px; + margin: auto; + } + .trusted-img { + height: 30px; + object-fit: contain; + } + + .text-section { + display: flex; + flex-direction: column; + background-color: white; + align-items: center; + justify-content: center; + } + + .text-section h3 { + font-size: x-large; + margin-bottom: 0px; + } + + .purple { + color: #540b51; + font-size: x-large; + font-weight: bold; + } + + .text-section ul > li { + list-style: none; + margin: 0px; + } + .text-list { + display: flex; + flex-direction: column; + gap: 20px; + } + + .text-section li:nth-child(2) { + margin: 0px; + } + + .text-sub-list { + display: flex; + flex-direction: column; + } + .text-sub-list p { + margin: 0px; + } + .text-sub-list p:nth-child(2) { + text-align: center; + font-weight: bold; + } + + .text-list { + display: flex; + flex-direction: row; + gap: 20px; + margin-top: 50px; + margin-bottom: 50px; + } + + .purple { + color: #540b51; + font-size: 3rem; + font-weight: bold; + } + + .btn { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + } + .digital-HQ { + height: 150px; + width: 100%; + text-align: center; + } + .digital-HQ h3 { + font-size: 2rem; + color: white; + } + .digital-HQ button { + background: none; + color: white; + border: 2px solid white; + height: 40px; + width: 60%; + } + .digital-HQ button:hover { + background: white; + color: #540b51; + } + footer { + padding-top: 10px; + height: 250px; + margin-top: 40px; + background: white; + } + footer li { + list-style: none; + font-weight: 200; + } + footer ul { + margin-top: 20px; + padding: 10px; + display: flex; + flex-direction: row; + font-size: small; + justify-content: space-between; + } + + .link { + display: flex; + gap: 20px; + } + .link img { + object-fit: contain; + } + + .small-line { + width: 600px; + height: 2px; + background-color: rgb(244, 240, 240); + border: none; + margin-top: 30px; + } + .foot-section { + display: flex; + background: white; + flex-direction: column; + } + .icon-class { + display: flex; + flex-direction: row; + justify-content: flex-start; + padding: 0px 10px; + gap: 60px; + } + .foot-note { + background: white; + text-align: left; + color: #454245; + margin-bottom: 20px; + padding-left: 10px; + font-size: small; } } From 4479a65598fa2f7eafe038add5f302fc29fb1783 Mon Sep 17 00:00:00 2001 From: karunya10 Date: Wed, 9 Jul 2025 17:04:36 +0200 Subject: [PATCH 3/6] Changing Column to row for header --- starter_code/stylesheets/style.css | 198 ++++++++++++++++++++++++++++- 1 file changed, 196 insertions(+), 2 deletions(-) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 19b483372..fa1def29f 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -37,7 +37,7 @@ p { .header { display: flex; - flex-direction: column; + flex-direction: row; justify-content: center; } .header h1 { @@ -57,7 +57,7 @@ p { .email-button-div { display: flex; - flex-direction: column; + flex-direction: row; gap: 15px; align-items: center; padding: 10px; @@ -101,7 +101,194 @@ p { overflow: hidden; } +.header { + display: flex; + justify-content: center; + flex-direction: row; +} +.slack-app-screenshot { + width: 100%; + height: 60%; + margin: 0 auto; + object-fit: contain; + padding: 20px; +} +.screenshot { + margin-top: 50px; +} +.img-section { + text-align: center; + background-color: #f3eae2; + padding: 2rem; +} +.img-section > p { + font-weight: bold; + font-size: 0.7rem; + margin-bottom: 2rem; + color: black; +} +.logo-grid { + display: flex; + flex-direction: row; + justify-content: center; + gap: 1rem; + max-width: 800px; + margin: auto; +} +.trusted-img { + height: 30px; + object-fit: contain; +} + +.text-section { + display: flex; + flex-direction: column; + background-color: white; + align-items: center; + justify-content: center; +} + +.text-section h3 { + font-size: x-large; + margin-bottom: 0px; +} + +.purple { + color: #540b51; + font-size: x-large; + font-weight: bold; +} + +.text-section ul > li { + list-style: none; + margin: 0px; +} +.text-list { + display: flex; + flex-direction: column; + gap: 20px; +} + +.text-section li:nth-child(2) { + margin: 0px; +} + +.text-sub-list { + display: flex; + flex-direction: column; +} +.text-sub-list p { + margin: 0px; +} +.text-sub-list p:nth-child(2) { + text-align: center; + font-weight: bold; +} + +.text-list { + display: flex; + flex-direction: row; + gap: 20px; + margin-top: 50px; + margin-bottom: 50px; +} + +.purple { + color: #540b51; + font-size: 3rem; + font-weight: bold; +} + +.btn { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; +} +.digital-HQ { + height: 150px; + width: 100%; + text-align: center; +} +.digital-HQ h3 { + font-size: 2rem; + color: white; +} +.digital-HQ button { + background: none; + color: white; + border: 2px solid white; + height: 40px; + width: 60%; +} +.digital-HQ button:hover { + background: white; + color: #540b51; +} +footer { + padding-top: 10px; + height: 250px; + margin-top: 40px; + background: white; +} +footer li { + list-style: none; + font-weight: 200; +} +footer ul { + margin-top: 20px; + padding: 10px; + display: flex; + flex-direction: row; + font-size: small; + justify-content: space-between; +} + +.link { + display: flex; + gap: 20px; +} +.link img { + object-fit: contain; +} + +.small-line { + width: 600px; + height: 2px; + background-color: rgb(244, 240, 240); + border: none; + margin-top: 30px; +} +.foot-section { + display: flex; + background: white; + flex-direction: column; +} +.icon-class { + display: flex; + flex-direction: row; + justify-content: flex-start; + padding: 0px 10px; + gap: 60px; +} +.foot-note { + background: white; + text-align: left; + color: #454245; + margin-bottom: 20px; + padding-left: 10px; + font-size: small; +} + @media screen and (max-width: 768px) { + .email-button-div { + display: flex; + flex-direction: column; + gap: 15px; + align-items: center; + padding: 10px; + } .slack-app-screenshot { width: 100%; height: auto; @@ -259,6 +446,13 @@ p { } @media screen and (min-width: 768px) and (max-width: 1024px) { + .email-button-div { + display: flex; + flex-direction: column; + gap: 15px; + align-items: center; + padding: 10px; + } .header { display: flex; justify-content: center; From e9e39b6ff20d0d0a302a44335bf9f84e12ff75bc Mon Sep 17 00:00:00 2001 From: Laura Sinclair Date: Wed, 9 Jul 2025 17:58:09 +0200 Subject: [PATCH 4/6] layout fixes --- starter_code/stylesheets/style.css | 110 +++++++++++++++++++++++++---- 1 file changed, 96 insertions(+), 14 deletions(-) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index fa1def29f..aee6a93d0 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -9,20 +9,39 @@ links blue: #2E71A6 footer links grey: #454245 */ + +/* 👉 Little reset to avoid headaches */ +html, body { + margin: 0; + padding: 0; + box-sizing: border-box; +} + body { font-family: "Mulish", Arial, Helvetica, sans-serif; background-color: #540b51; + font-size: 16px; /* 👉 Default font size for the document */ } p { color: black; } +img { + width: 100%; /* 👉 Saves you headaches later. It makes all images take as much space as they can, instead of random space that is harder to predict */ +} + +h1 { + font-weight: 700; + font-size: 2.5em; +} + .navbar-logo-menus { display: none; } .navbar { display: flex; justify-content: space-between; + padding: 8px 16px; /* 👉 Little bit of space around the nav */ } .navbar-logo img { height: 70px; @@ -35,18 +54,80 @@ p { padding-top: 20px; } +.navbar-logo img { + width: 100%; + max-width: 140px; +} + .header { display: flex; - flex-direction: row; - justify-content: center; -} -.header h1 { - color: white; + flex-direction: column; + text-align: center; + overflow: hidden; } + +/* +👉 this: + .header h1, p { + ... +} + +means "all the h1 that are in .header" and "all the p (even if they're not in .header)" + +Instead, you want: */ +.header h1, +.header p { text-align: center; } + +.header .screenshot img { + max-width: 800px; +} + + +/* 👉 the css is easier to read if you add the media queries after each element, instead of all at once. But it's a personal choice, both work the same way */ +@media screen and (min-width: 768px) { + .header { + flex-direction: row; + padding: 15px; + } + .header h1, + .header p { + text-align: left; + } + + .header > div { + display: flex; + flex-direction: column; + align-items: center; + } + + .header .screenshot img { + margin-top: auto; + margin-bottom: auto; + } + .header div:first-of-type { + justify-content: center; /* 👉 content is centered vertically on big screens only */ + text-align: left; + align-items: flex-start; + } +} +@media screen and (min-width: 1440px) { + .header .screenshot img { + margin-top: auto; + margin-bottom: auto; + } + .header h1 { + font-size: 4rem; + } +} + +.header h1 { + color: white; +} + .header p { padding-bottom: 20px; color: white; @@ -60,10 +141,11 @@ p { flex-direction: row; gap: 15px; align-items: center; - padding: 10px; + /* padding: 10px; */ } .email-button { - width: 300px; + /* width: 300px; */ /* 👉 I would always avoid setting a fixed width to buttons, because the text might overflow */ + white-space: nowrap; /* 👉 this forces the text to stay on one line */ height: 50px; padding: 0 20px; text-transform: uppercase; @@ -73,6 +155,7 @@ p { align-items: center; justify-content: center; box-sizing: border-box; + border: none; } .email-button:first-child { background-color: white; @@ -90,6 +173,7 @@ p { } .google-logo { height: 20px; + width: 20px; background-color: white; margin-right: 10px; border-radius: 3px; @@ -101,11 +185,13 @@ p { overflow: hidden; } -.header { +/* 👉 this was interfering with the other .header */ +/* .header { display: flex; justify-content: center; flex-direction: row; -} +} */ + .slack-app-screenshot { width: 100%; height: 60%; @@ -176,6 +262,7 @@ p { .text-sub-list { display: flex; flex-direction: column; + align-items: center; } .text-sub-list p { margin: 0px; @@ -453,11 +540,6 @@ footer ul { align-items: center; padding: 10px; } - .header { - display: flex; - justify-content: center; - flex-direction: row; - } .slack-app-screenshot { width: 100%; height: 50%; From b4701f61919925f202867ce644c60e8a46a9fdd8 Mon Sep 17 00:00:00 2001 From: Laura Sinclair Date: Wed, 9 Jul 2025 18:05:22 +0200 Subject: [PATCH 5/6] set up a fixed width for footer icons --- starter_code/stylesheets/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index aee6a93d0..9bd3431ab 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -503,6 +503,8 @@ footer ul { gap: 20px; } .link img { + width: 20px; + height: 20px; object-fit: contain; } From 8c78f1c5819bda58c48d711e35c54f1d1019ca8d Mon Sep 17 00:00:00 2001 From: karunya10 Date: Sun, 13 Jul 2025 22:26:23 +0200 Subject: [PATCH 6/6] Slack-Responsive-Cline --- .vscode/settings.json | 3 + starter_code/index.html | 8 +- starter_code/stylesheets/style.css | 584 +++++++++-------------------- 3 files changed, 185 insertions(+), 410 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6b665aaa0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/starter_code/index.html b/starter_code/index.html index 9064b6094..b8f277e48 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -45,11 +45,11 @@ Search icon - -