diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..be02be8a5 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,170 @@ + + + + - - - - + + - - + + - - - - - 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 is your digital HQ | Slack + + + +
+ -
- Slack app screenshot -
-
+ + + -
-
-

Trusted by companies all over the world

+ +
+
+

Great teamwork starts with a digital HQ

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

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*

    +
    • + +
  • +

    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

+ + + +
+
+ +
- - - - - \ 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..c1d123b38 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,620 @@ 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 { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + 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: "Work+Sans", Arial, Helvetica, sans-serif; + /* overflow: hidden; */ + /* overflow: hidden; */ + /* width: 100vh; */ + /* max-width: 768px; */ + /* overflow-x: hidden; */ +} + +img { + max-width: 100%; + height: auto; + /* display: block; */ + /* 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; */ + width: 100%; + height: 10vh; + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + padding: 0.5em; + z-index: 1000; + + .slack-logo { + padding-left: 1em; + height: 1.5em; + display: flex; + flex: 1; + align-items: center; + /* border: 1px solid white; */ + /* background-color: aqua; */ + } + + .slack-logo img { + /* align-self: flex-start; */ + /* width: 30%; */ + height: 80%; + margin: 0; + /* border: 1px solid red; */ + } + + ul { + display: none; + } + + .navbar-icons { + display: flex; + height: 100%; + /* border: 1px orange solid; */ + /* background-color: pink; */ + + button { + display: flex; + justify-content: center; + align-items: center; + background-color: #540b51; + /* background-color: rgb(169, 157, 182); */ + margin: 0; + width: 3em; + border: none; + /* padding-left: 2em; */ + } + + img { + /* height: 100%; */ + width: 1.4em; + /* margin: auto; */ + /* padding: auto; */ + /* border: 1px solid white; */ + } + } +} + +header { + display: flex; + background-color: #540b51; + /* display: flex; */ + flex-direction: column; + align-items: center; + padding-top: 2em; + + h1 { + color: white; + text-align: center; + margin: auto 1em; + font-size: 2em; + } + + p { + align-self: center; + text-align: center; + color: white; + font-size: 0.9em; + /* margin: auto 3em; */ + + span { + color: #ecb12f; + font-weight: bold; + } + } + + } + + div.sign-up-buttons { + display: flex; + flex-direction: column; + gap: 0.8em; + padding: 20px; + /* background-color: green; */ + + .btn { + height: 3rem; + cursor: pointer; + font-size: 0.8rem; + font-weight: bold; + color: #540b51; + margin: auto 0; + padding: 0.5rem; + text-transform: uppercase; + /* border: red dashed 2px; */ + border: none; + border-radius: 0.2rem; + } + + .btn--google { + background-color: #4285f4; + /* height: 100%; */ + color: white; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; + position: relative; + + .containerImgLogoGoogle { + position: absolute; + left: 0.5rem; + background-color: white; + border-radius: 0.1rem; + height: 3em; + width: 3em; + /* height: 4em; */ + /* width: 3rem; */ + padding: 0.2em; + /* margin-top: 10px; */ + /* margin-top: 1rem; */ + /* margin: 0.5rem; */ + display: flex; + align-items: center; + justify-content: center; + } + .containerImgLogoGoogle img { + /* margin: auto; */ + width: 70%; + /* aspect-ratio: 1 / 1; */ + /* background-color: aqua; */ + /* border: 1px black solid; */ + } + + span { + /* flex: 1; */ + /* justify-self: center; */ + /* margin-left: 6em; */ + /* border: 1px white solid; */ + } + } + } +} + +header * { + /* border: 2px solid aqua; */ +} + +.main-screenshot { + /* width: 100%; */ + + img { + width: 100%; + /* width: 50px; + 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: 1rem, 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: left; + align-items: center; + /* justify-items: center; */ + padding-top: 2rem; + list-style: none; + /* border: 1px solid black; */ +} + +hr { + margin-bottom: 2.4rem; + width: 100%; + background-color: rgba(125, 125, 125, 0.729); + height: 1px; +} + +.fab { + font-size: 2rem; + border: 1px solid white; +} + +footer div small { + /* align-self: center; */ + /* justify-self: center; */ + margin-top: 1rem; + font-size: 0.6rem; + color:gray ; + height: 100px; + text-align: center; + + /* border: 1px black solid; */ +} + +/*-----------------------------------------------------------------*/ +@media ( 768px < width) { + + nav{ + height: 4rem; + } + + header{ + /* height: 80vh; */ + flex-direction: row; + /* position: relative; */ + /* position: relative; */ + overflow-x: hidden; + position: relative; + padding-top: 0; + /* margin-top: 5rem; */ + padding-bottom: 10rem; + /* border: 1px solid white; */ + + .hero{ + background-image: url("../images/background-singup.png"); + background-size:cover; + 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{ + text-align: left; + margin-left: 1rem; + font-size: 4rem; + } + + p{ + text-align: left; + margin-left: 1rem; + } + } + + section#companies{ + height: 11rem; + + p{ + font-size: 1rem; + } + + div{ + margin-top: 1.5rem; + justify-content: space-evenly; + /* border: 1px black solid; */ + + img{ + height: 3rem; + } + + .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; */ +} + +} /*media query small screens*/