From ff03ffe0e489667138d94bc9acc8d9524604a455 Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Sat, 26 Jul 2025 11:59:53 +0200 Subject: [PATCH 1/4] Sign up buttons done. --- starter_code/index.html | 20 +-- starter_code/stylesheets/style.css | 204 +++++++++++++++++++++++++++++ 2 files changed, 216 insertions(+), 8 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..5df911c6c 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -20,7 +20,9 @@ - + +
+
+

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

+ -
- -
-

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

    +
    • +
+

* Weighted average. Based on 2.707 survey responses from weekly Slack users in the U.S., UK, Australia and Canada with a +- 2% margin of error at 95% CI (August 2020).

+
+ +
+

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 a5c9e3e56..e9e547f77 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,11 +8,12 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ - +@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"); * { box-sizing: border-box; } -body::before { + +/* body::before { content: ""; position: fixed; top: 0; @@ -23,13 +24,14 @@ body::before { background-image: linear-gradient(to right, rgba(255, 0, 0, 0.2) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 0, 0, 0.2) 1px, transparent 1px); background-size: 16px 16px; z-index: 9999; -} +} */ body { margin: 0; padding: 0; + box-sizing: border-box; background-color: pink; - font-family: Arial, Helvetica, sans-serif; + font-family: "Work+Sans", Arial, Helvetica, sans-serif; /* overflow: hidden; */ /* width: 100vh; */ /* max-width: 768px; */ @@ -43,6 +45,17 @@ img { /* border: 1.5px burlywood solid; */ } +h3 { + text-align: center; + font-weight: bolder; + font-size: 1.7rem; + margin: 0.5rem 2rem; +} + +.purple-background { + background-color: #540b51; +} + nav { background-color: #540b51; /* border-bottom: 1px solid white; */ @@ -107,8 +120,9 @@ nav { } header { - background-color: #540b51; display: flex; + background-color: #540b51; + /* display: flex; */ flex-direction: column; align-items: center; padding-top: 2em; @@ -131,6 +145,8 @@ header { color: #ecb12f; font-weight: bold; } + } + } div.sign-up-buttons { @@ -212,3 +228,195 @@ header * { height: 50px; */ } } + +section#companies { + background-color: #f3eae2; + height: auto; + padding: 1.5rem 0; + + p { + text-transform: uppercase; + font-weight: bold; + font-size: 0.8rem; + text-align: center; + } + + div { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 1rem; + box-sizing: border-box; + padding-left: 0; + /* border: 1px solid blue; */ + + img { + object-fit: contain; + height: 2rem; + /* border: 1px black solid; */ + } + + .logo-airbnb { + height: 2.2rem; + } + + .logo-nasa { + height: 3rem; + } + + .logo-target { + height: 2.5rem; + } + } +} + +section#statistics { + text-align: center; + padding: 2.5rem 0; + background-color: white; + + h3, + span { + color: #540b51; + font-weight: bolder; + padding-top: 1rem; + /* padding: 1rem 1.5rem; */ + /* border: 1px black solid; */ + } + + > p { + margin: auto 1rem; + line-height: 1.5; + /* border: 1px black solid; */ + } + + ul { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + list-style: none; + padding-left: 0; + margin-top: 1, 2rem; + /* border: 1px black solid; */ + + li { + margin-top: 0; + /* background-color: rgb(221, 203, 168); */ + + p:first-child { + margin-top: 1.5rem; + font-weight: bolder; + margin-bottom: 0; + padding: 0; + /* background-color: rosybrown; */ + } + + span { + font-size: 2.5rem; + font-weight: 900; + } + + p:last-child { + font-weight: bolder; + line-height: 1.4; + width: 10rem; + margin-top: 0; + /* background-color: orange; */ + } + } + } + .ref-statistics { + color: gray; + font-size: 0.8rem; + } +} + +section.call-to-action { + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + padding: 1rem auto; + color: white; + padding: 2.3rem 1rem; + + h3 { + margin-top: 0; + /* border: 1px white solid; */ + } + + button { + height: 2.4rem; + width: 20rem; + font-weight: bold; + border: 1px white solid; + border-radius: 0.1rem; + color: #540b51; + text-transform: uppercase; + } + + button:last-child { + background-color: #540b51; + color: white; + } +} + +footer { + margin: 0; + padding-top: 2rem; + background-color: white; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 2rem; +} + +footer ul { + font-weight: bold; + font-size: 0.8rem; + list-style: none; + margin: 0; + display: flex; + flex-direction: column; + gap: 1rem; + padding-left: 0; +} + +/* li:last-of-type{ + margin: 0; + color:blue; + } */ + +#socials { + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + list-style: none; +} + +hr { + margin-bottom: 2.4rem; + width: 100%; + background-color: rgba(125, 125, 125, 0.729); + height: 1px; +} + +.fab { + height: 3rem; + width: 3rem; + border: 1px solid white; +} + +footer div small { + /* align-self: center; */ + /* justify-self: center; */ + color: #454245; + height: 100px; + text-align: center; + border: 1px black solid; +} From e30f8c8bbc3fbff8ce44793780e24e7e1bc69494 Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Date: Mon, 28 Jul 2025 00:38:18 +0200 Subject: [PATCH 3/4] iteration 2. First part --- starter_code/stylesheets/style.css | 69 ++++++++++++++++++++++++++++-- 1 file changed, 66 insertions(+), 3 deletions(-) diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index e9e547f77..98bd9f238 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -394,9 +394,12 @@ footer ul { height: 50px; display: flex; flex-direction: row; - justify-content: space-evenly; + justify-content: left; align-items: center; + /* justify-items: center; */ + padding-top: 2rem; list-style: none; + /* border: 1px solid black; */ } hr { @@ -415,8 +418,68 @@ hr { footer div small { /* align-self: center; */ /* justify-self: center; */ - color: #454245; + margin-top: 1rem; + font-size: 0.6rem; + color:gray ; height: 100px; text-align: center; - border: 1px black solid; + + /* border: 1px black solid; */ } + + +@media (min-width: 768px) and (max-width: 1024px) { + + nav{ + height: 4rem; + } + + header{ + height: 60vh; + flex-direction: row; + /* border: 1px solid white; */ + /* position: relative; */ + /* border: 1px solid #4285f4; */ + /* position: relative; */ + + > div{ + max-width: 55%; + /* height: 100%; */ + background-image: url("../images/background-singup.png"); + background-size:cover; + padding-top: 3rem; + /* border:1px white solid; */ + } + + h1{ + text-align: left; + margin-left: 1rem; + font-size: 4rem; + } + + p{ + text-align: left; + margin-left: 1rem; + } + + /* .main-screenshot{ + /* display: none; */ + + } + + + #statistics{ + + ul { + display: flex; + flex-direction: row !important; + /* border: 1px black solid; */ + + li{ + /* border: 1px black solid; */ + + } + } + } + +} \ No newline at end of file From 7656464b32db3dda4c949545c68c8f9c0a65671d Mon Sep 17 00:00:00 2001 From: Alejandra Rodriguez Tibana <30965660+malejaroti@users.noreply.github.com> Date: Mon, 28 Jul 2025 19:09:36 +0200 Subject: [PATCH 4/4] Iteration 2 Small screes imroved --- starter_code/index.html | 30 +---- starter_code/stylesheets/style.css | 192 +++++++++++++++++++++++++---- 2 files changed, 173 insertions(+), 49 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 84c90c1a6..be02be8a5 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -61,7 +61,7 @@
-
+

Great teamwork starts with a digital HQ

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

@@ -109,19 +109,15 @@

Teams large and small rely on Slack

  • 86%

    -

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

    +

    feel their ability to work remotely has improved*

  • 88%

    -

    - feel more connected to their teams* -

    +

    feel more connected to their teams*

    • -

    * Weighted average. Based on 2.707 survey responses from weekly Slack users in the U.S., UK, Australia and Canada with a +- 2% margin of error at 95% CI (August 2020).

    +

    * Weighted average. Based on 2.707 survey responses from weekly Slack users in the U.S., UK, Australia and Canada with a +- 2% margin of error at 95% CI (August 2020).

    @@ -132,7 +128,6 @@

    Welcome to your new digital HQ

    -
    @@ -167,21 +162,8 @@

    Welcome to your new digital HQ

    diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 98bd9f238..c1d123b38 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -33,6 +33,7 @@ body { background-color: pink; font-family: "Work+Sans", Arial, Helvetica, sans-serif; /* overflow: hidden; */ + /* overflow: hidden; */ /* width: 100vh; */ /* max-width: 768px; */ /* overflow-x: hidden; */ @@ -298,7 +299,7 @@ section#statistics { align-items: center; list-style: none; padding-left: 0; - margin-top: 1, 2rem; + margin-top: 1rem, 2rem; /* border: 1px black solid; */ li { @@ -410,8 +411,7 @@ hr { } .fab { - height: 3rem; - width: 3rem; + font-size: 2rem; border: 1px solid white; } @@ -427,28 +427,67 @@ footer div small { /* border: 1px black solid; */ } - -@media (min-width: 768px) and (max-width: 1024px) { +/*-----------------------------------------------------------------*/ +@media ( 768px < width) { nav{ height: 4rem; } header{ - height: 60vh; + /* height: 80vh; */ flex-direction: row; - /* border: 1px solid white; */ /* position: relative; */ - /* border: 1px solid #4285f4; */ /* position: relative; */ + overflow-x: hidden; + position: relative; + padding-top: 0; + /* margin-top: 5rem; */ + padding-bottom: 10rem; + /* border: 1px solid white; */ - > div{ - max-width: 55%; - /* height: 100%; */ + .hero{ background-image: url("../images/background-singup.png"); background-size:cover; - padding-top: 3rem; - /* border:1px white solid; */ + max-width: 70%; + margin-top: 0; + /* border: 2px blue solid; */ + + h1{ + margin-top: 2rem; + font-size: 7rem; + } + + p{ + font-size: 2rem; + width: 70%; + } + + div.sign-up-buttons{ + gap: 1rem; + .btn{ + font-size: 1rem; + width: 100%; + height: 4rem; + } + } + } + + .main-screenshot { + /* overflow: hidden; */ + padding: 3rem; + position: absolute; + height: 480px; + right: -39%; + top: 20%; + /* border: 2px yellow solid; */ + + img{ + object-fit: contain; + height: 100%; + /* position: absolute; */ + border: 1px border white; + } } h1{ @@ -461,25 +500,128 @@ footer div small { text-align: left; margin-left: 1rem; } + } - /* .main-screenshot{ - /* display: none; */ + section#companies{ + height: 11rem; + p{ + font-size: 1rem; } + div{ + margin-top: 1.5rem; + justify-content: space-evenly; + /* border: 1px black solid; */ - #statistics{ + img{ + height: 3rem; + } - ul { - display: flex; - flex-direction: row !important; - /* border: 1px black solid; */ - - li{ - /* border: 1px black solid; */ - + .logo-target, .logo-nasa{ + height: 3.5rem; + } + } + } + + section#statistics{ + padding: 4rem; + /* background-color: orange; */ + + h3{ + font-size: 2rem; + /* margin-top: 2rem; */ + margin-bottom: 1.5rem; + } + + p:first-of-type { + font-size: 1.3rem; + font-weight: 600; + margin-bottom: 2rem; + } + } + + section#statistics ul { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + /* border: 1px black solid; */ + + li{ + text-align: left; + + p:last-child{ + width: 10rem; + } + + span{ + font-size: 3.5rem; + font-weight: 600; + } + } + + li:nth-child(2){ + + p:last-child{ + width: 12rem; + } + } + + li:nth-child(3){ + + p:last-child{ + width: 11rem; } } } + .ref-statistics{ + display: none; + } + +section.call-to-action{ + padding: 2rem; + + h3{ + font-size: 2.5rem; + } + + button{ + width: 70vw; + height: 3rem; + } +} + +footer{ + display: flex; + flex-direction: column; + margin-bottom: 0; + height: auto; + /* border: 1px solid black; */ +} + +footer ul { + flex-direction: row; + justify-content: space-evenly; + padding: 0.5rem; + /* border: 1px solid black; */ +} + +#socials{ + width: 45vw; + justify-content: space-evenly; + align-items: center; + /* margin-left: 2rem; */ + margin-bottom: 3rem; + /* border: 1px solid black; */ +} + +footer div small { + font-size: 0.9rem; + /* margin-left: 3rem; */ + padding: 1.8rem; + + /* border: 1px solid black; */ +} -} \ No newline at end of file +} /*media query small screens*/