From d6a1da074243c3e2a872193f5068c50af3939534 Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Sun, 12 Oct 2025 16:22:24 +0200 Subject: [PATCH 1/6] mobile nav menu implemented --- starter_code/index.html | 323 ++++++++++++++--------------- starter_code/stylesheets/style.css | 52 +++++ 2 files changed, 213 insertions(+), 162 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..8ccf9427d 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,178 @@ + + + + + + + + + + + + + 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.

+ +
+ + + +
+
+ +
+ 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..e984b64c8 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,55 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ +body { + margin: 0; + box-sizing: border-box; +} + +@media (width < 768px) { + .main-menu-ul { + display: none; + } + .hero-section { + background-color: #540B51; + color: #ffffff + } + .main-nav { + display: flex; + justify-content: space-between; + /* margin-left: 10px; + margin-right: 10px; */ + padding: 15px 15px; + } + .main-nav div { + width: 90px; + } + .main-nav div img { + height: auto; + width:100%; + } + .search-btn { + background-color: transparent; + border: none; + margin: 0; + padding: 0; + text-align: inherit; + font: inherit; + border-radius: 0; + margin-right: 20px; + } + + .menu-mobile { + background-color: transparent; + border: none; + margin: 0; + padding: 0; + text-align: inherit; + font: inherit; + border-radius: 0; + appearance: none; + margin-right: 12px; + margin-left: 10px; + } + + } From 90530fff74329a918839f69ffb787588ad126835 Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Sun, 12 Oct 2025 17:24:46 +0200 Subject: [PATCH 2/6] Hero section for mobile done --- starter_code/index.html | 23 ++++++--- starter_code/stylesheets/style.css | 81 +++++++++++++++++++++++++++++- 2 files changed, 95 insertions(+), 9 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 8ccf9427d..faa73bd7c 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -11,6 +11,12 @@ rel="stylesheet" /> + + + @@ -62,23 +68,24 @@ -
-
-

Great teamwork starts with a digital HQ

- -

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

- +
+
+

Great teamwork starts with a digital HQ

+ +

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

+
+
-
+
Slack app screenshot
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index e984b64c8..0ce72cff1 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -12,6 +12,10 @@ body { margin: 0; box-sizing: border-box; } +h1 { + font-family: 'Poppins', sans-serif; + font-weight: 600; +} @media (width < 768px) { .main-menu-ul { @@ -58,5 +62,80 @@ body { margin-right: 12px; margin-left: 10px; } - + .header-hero { + display: flex; + flex-direction: column; + align-items: center; + margin: 10px auto; + } + .title-and-sub { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40px; + } + .title-and-sub div { + text-align: center; + width: 80%; + } + .first-p { + font-family: 'Inter', sans-serif; + + } + .first-span { + color:#ECB12F + } + .hero-image-container img { + width: 600px; + } + .signup-container { + display: flex; + flex-direction: column; + align-items: center; + } + /* .signup-container button { + background-color: transparent; + border: none; + margin: 0; + padding: 0; + text-align: inherit; + font: inherit; + border-radius: 0; + margin-right: 20px; + } */ + .signup-container button:first-child { + background-color: white; + padding: 10px; + color: #540B51; + font-size: 15px; + font-family: 'Inter', sans-serif; + font-weight: 500; + text-transform: uppercase; + width: 385px; + } + .signup-google-container { + background-color: #4285F4; + color: white; + padding: 10px; + font-size: 15px; + font-family: 'Inter', sans-serif; + font-weight: 500; + text-transform: uppercase; + position: relative; + width: 385px; } + .signup-google-container img { + width: 20px; + height: auto; + position: absolute; + left:5px; + top:3px; + bottom: 2px; + background-color: white; + padding: 5px 6px; + border-radius: 2px; + + + } +} + From 2088731ad02a1e21b13cee14e340093d280aca9a Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Sun, 12 Oct 2025 19:01:36 +0200 Subject: [PATCH 3/6] hero and trus companies done --- starter_code/index.html | 6 ++--- starter_code/stylesheets/style.css | 38 ++++++++++++++++++++---------- 2 files changed, 28 insertions(+), 16 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index faa73bd7c..4ea6582d6 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -91,12 +91,12 @@

Great teamwork starts with a digital HQ

-
+

Trusted by companies all over the world

-
+
Airbnb logo - NASA logo + Uber logo Target logo New York Times logo diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 0ce72cff1..122ca2e43 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -16,6 +16,9 @@ h1 { font-family: 'Poppins', sans-serif; font-weight: 600; } +p { + font-family: 'Inter', sans-serif; +} @media (width < 768px) { .main-menu-ul { @@ -93,16 +96,6 @@ h1 { flex-direction: column; align-items: center; } - /* .signup-container button { - background-color: transparent; - border: none; - margin: 0; - padding: 0; - text-align: inherit; - font: inherit; - border-radius: 0; - margin-right: 20px; - } */ .signup-container button:first-child { background-color: white; padding: 10px; @@ -133,9 +126,28 @@ h1 { bottom: 2px; background-color: white; padding: 5px 6px; - border-radius: 2px; - - + border-radius: 2px; } + .pos-hero-section { + display: flex; + flex-direction: column; + align-items: center; + background-color: #F3EAE2; + margin-top: -10px; + padding: 30px 1px; + + } + .pos-hero-imgs { + display: flex; + flex-wrap: wrap; + width: 68%; + max-width: 420px; + justify-content: center; + } + .pos-hero-imgs img { + height:30px; + padding: 10px; + } + } From 9b1efc38de310038a3ee58369301f571679e3360 Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Sun, 12 Oct 2025 19:30:33 +0200 Subject: [PATCH 4/6] slack numbers mobile done --- starter_code/index.html | 40 +++++++++----------------- starter_code/stylesheets/style.css | 46 +++++++++++++++++++++++++++++- 2 files changed, 58 insertions(+), 28 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 4ea6582d6..f9ca8537d 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -104,38 +104,24 @@

Great teamwork starts with a digital HQ

-
+

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* - * -

    -
    • -
+
+

85%

+

of users say Slack has improved communication

+
+
+

86%

+

of users say Slack has improved communication

+
+
+

88%

+

of users say Slack has improved communication

+
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 122ca2e43..1d3bca8b7 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -89,7 +89,7 @@ p { color:#ECB12F } .hero-image-container img { - width: 600px; + width: 500px; } .signup-container { display: flex; @@ -148,6 +148,50 @@ p { height:30px; padding: 10px; } + .slack-numbers { + display:flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + width: 70%; + padding: 20px; + } + .slack-numbers h3 { + width: 80%; + font-size: 28px; + font-weight: 600; + color: #540B51; + font-family: 'Poppins', sans-serif; + text-align: center; + margin-bottom: 5px; + max-width: 270px; + } + .slack-numbers p { + text-align: center; + font-size: 15px; + font-weight: 500; + max-width: 370px; + } + .slack-numbers-div { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1px; + } + .slack-numbers-div p:first-child { + color:#540B51; + font-family: 'Poppins', sans-serif; + font-size: 40px; + font-weight: bold; + margin-bottom: 10px; + } + .slack-numbers-div p:nth-child(2) { + font-weight: bold; + font-size: 13px; + width: 50%; + text-align: center; + margin: 0; + } } From 6ea87dfbe9476a69bba40360415928a8354806de Mon Sep 17 00:00:00 2001 From: Igor Montovani Date: Sun, 12 Oct 2025 20:05:48 +0200 Subject: [PATCH 5/6] first iteration done --- starter_code/index.html | 6 +-- starter_code/stylesheets/style.css | 76 ++++++++++++++++++++++++++++-- 2 files changed, 75 insertions(+), 7 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index f9ca8537d..41f89534e 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -124,7 +124,7 @@

Teams large and small rely on Slack

-
+

Welcome to your new digital HQ

@@ -133,6 +133,7 @@

Welcome to your new digital HQ