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 2f593610f..c65a69388 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,211 @@ - - - - - - - - - - - - - - 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

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

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

+
+
+ +
+
+ +
+
+
+
+
+
+
    +
  • Status
    • +
  • Privacy
    • +
  • Terms
    • +
  • Cookie Preferences
    • +
  • Contact Us
    • +
  • Change Region
    • +
  • Download Slack
    • +
-
- -
-

Teams large and small rely on Slack

-

Slack securely scales up to support collaboration at the world’s biggest companies.

- +
-
- -
-

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..d618b9ff0 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,406 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +body { + background-color: #540b51; + margin: 0; + font-family: "Salesforce-Sans", "Segoe UI", "roboto", "Helvetica New", "arial", + "Noto Sans", "sans-serif"; + padding: 0; +} + +ul, +p, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; +} + +.navbar { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 10px; + margin: 2px 30px; +} + +.navbar div img { + display: flex; + width: 100%; + margin: 10px; + flex-direction: row; +} + +.right-icons { + display: flex; +} + +.right-icons button { + all: unset; +} + +#slack-logo { + display: flex; + justify-content: flex-start; + width: 30%; +} + +#search-logo { + display: flex; + justify-content: flex-end; + width: 30%; +} + +#menu-logo { + display: flex; + justify-content: flex-end; + width: 30%; +} + +ul [hidden] { + display: none; +} + +header { + color: white; + justify-content: center; + gap: 2vh; + + > p { + text-align: center; + font-weight: bold; + } + + > p span { + color: #ecb12f; + } +} + +.headerTextContainer { + display: flex; + width: 400px; + flex-wrap: wrap; + + > h1 { + display: flex; + + align-items: center; + flex-wrap: wrap; + font-size: 50px; + + width: auto; + margin: 0; + text-align: center; + } +} + +.freeToTry { + margin-bottom: 8px; +} + +header header button { + display: flex; + flex-direction: column; + /*width: 100%;*/ + text-align: center; +} + +.sign-up { + display: flex; + flex-direction: column; + + margin: 45px 20px; + height: 30px; + align-items: center; + text-transform: uppercase; + justify-content: center; + text-align: center; +} + +.email-button { + display: flex; + align-items: center; + justify-content: center; + color: #540b51; + border-radius: 5px; + line-height: 30px; + padding: 8px; + width: 350px; + text-transform: uppercase; + text-align: center; + margin: 7px 2px; + font-weight: bold; +} + +.google-button { + display: flex; + + align-items: center; + justify-content: center; + flex-direction: row; + background-color: #4285f4; + border-radius: 5px; + width: 350px; + text-transform: uppercase; + margin: 8px 2px; + padding: 8px; + font-weight: bold; + color: white; +} + +.google-button img { + background-color: white; + height: 27px; + width: 27px; + border-radius: 4px; +} + +#hero-product { + margin: 40px 20px 0 20px; + + height: 260px; +} + +#company-logos { + display: block; + width: 100%; + margin-top: 5px; + align-items: center; + background-color: #f3eae2; + padding: 2px 20px; +} + +.firstFourLogos { + display: flex; + justify-content: space-between; /* Center the logos */ + padding: 1px 25px; + width: 100%; +} + +.logo-wrapper { + width: auto; /* Set a specific width for each logo wrapper */ + height: 70px; /* Maintain aspect ratio */ + margin: 0; /* Add spacing between logos */ +} + +.logo-wrapper img { + width: auto; /* Make the image fill the wrapper */ + height: 50px; /* Maintain aspect ratio */ +} + +.secondTwoLogos { + display: flex; + justify-content: space-between; + flex-wrap: nowrap; + flex-direction: row; + padding: 1px 10px; +} + +.logo-wrapper-Two { + width: 100%; + height: 70px; + margin: 0; +} + +.logo-wrapper-Two img { + height: 50px; /* Maintain aspect ratio */ +} + +#company-logos p { + display: block; + width: 100%; + + color: #000000; + text-transform: uppercase; + padding: 10px; +} + +#Team { + display: flex; + flex-direction: column; + align-items: center; + background-color: white; + width: 100%; + padding: 20px 0; +} + +.teamInfo { + align-items: center; + justify-content: center; + text-align: center; +} + +.Stats { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; + justify-content: center; + text-align: center; +} + +.teamInfo h2 { + color: rgb(79, 3, 79); + font-weight: bold; + justify-content: center; + align-items: center; + justify-content: center; + text-align: center; +} + +.teamInfo h4 { + font-weight: bold; +} + +.teamInfo ul { + list-style-type: none; +} + +#Subscribe-message { + display: flex; + background-color: rgb(79, 3, 79); + color: white; + flex-direction: column; + justify-content: center; +} + +.welcometoDigital { + display: flex; + justify-content: center; + margin-top: 15px; +} + +.tryOutButtons { + margin: 30px 2px; + display: flex; + flex-direction: column; + width: 700px; + align-items: center; + text-transform: uppercase; + justify-content: center; + text-align: center; +} + +.tryForFree { + background-color: white; + color: purple; + text-transform: uppercase; + font-weight: bold; + margin: 4px 0; + width: 100%; + height: 30px; +} + +.talkToSales { + background-color: purple; + color: white; + text-transform: uppercase; + font-weight: bold; + margin: 4px 0; + width: 100%; + height: 30px; + border: 1px solid white; +} + +.buttonsWrapper { + width: 60%; +} + +.buttonsWrapperTwo { + width: 60%; +} + +footer { + display: flex; + flex-direction: column; + background-color: white; +} + +.footerTextOptions { + list-style-type: none; + font-weight: bold; + padding: 2px 20px; +} + +.download { + color: rgb(17, 154, 240); +} + +.footerIconOptions { + display: flex; + justify-content: space-between; + list-style-type: none; +} + +@media screen and (768px < width < 1024px) { + header { + background-image: url("../images/background-singup.png"); + background-size: cover; + flex-direction: row; + } + + .headerTextContainer { + width: 66%; + flex-grow: 2; + } + + .headerTextContainer p { + font-size: 1.2em; + } + + header h1 { + font-size: 3em; + text-align: left; + } + + #hero-product { + width: 33%; + } + + .company-logos { + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + gap: 3vw; + } + + .company-logos img { + height: 40px; + } + + .teamInfo ul { + display: flex; + flex-direction: row; + } + + .teamInfo ul li { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: start; + gap: 0; + } + + .teamInfo ul li p { + margin: 0; + text-align: left; + padding: 2px 10px; + } + + .links-nav { + flex-direction: row; + justify-content: space-between; + font-size: 0.8em; + } + + .links-social { + justify-content: flex-start; + gap: 10vw; + } +}