diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..56e240636 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,196 @@ + + + + + + + + + + + + + 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 +
+ + © 2022 Slack Technologies, LLC, a Salesforce company. All rights + reserved. Various trademarks held by their respective owners. +
- -
- -
-

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 + + + diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..442d094b1 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,611 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +/* STYLES */ + +/* Fonts */ +body { + font-family: "Poppins", sans-serif; + background-color: #540b51; + color: #000000; + font-size: 16px; + line-height: 1.5; + width: 100vw; + overflow-x: hidden; + line-height: normal; + align-items: center; +} + +/* Basic styles */ +* { + box-sizing: border-box; +} +body { + text-align: center; + padding: 0; + margin: 0; + width: 100vw; +} +ul { + list-style: none; + padding: 0; +} +small { + color: #7c7c7c; +} +.btn { + background-color: #540b51; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 3px; + font-size: 1em; + font-weight: bold; + text-decoration: none; + margin-top: 15px; + text-transform: uppercase; + height: 50px; + width: 95%; +} +.btn-white { + border-color: #540b51; + background-color: white; + color: #540b51; +} +.btn-purple { + border: solid 2px white; +} +.btn-blue { + background-color: #4285f4; + color: white; + display: flex; +} +.padding-container { + padding: 0 3% 0 3%; +} + +/* Font sizes */ +h1 { + font-size: 4em; + font-weight: 600; + color: white; + line-height: 1em; +} +h3 { + font-size: 2em; + font-weight: 600; + margin-top: 10px; + margin-bottom: 10px; +} +sup { + font-size: 0.75em; + vertical-align: top; + position: relative; + top: 0.2em; + line-height: 1; +} + +/*NAVIGATION*/ + +nav { + background-color: #540b51; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 3% 0 3%; + height: 80px; +} +.slack-logo { + display: flex; + height: 2em; +} +.nav-links { + display: none; + flex-direction: row; +} +.nav-links ul { + list-style: none; +} +.nav-right { + display: flex; + width: calc(100vw / 7); + max-width: 300px; + justify-content: space-around; + align-items: center; +} +.nav-right button { + background-color: #540b51; + border-style: none; + border: none; +} +.nav-cta { + display: none; +} + +/*HEADER - HERO*/ +header { + background-color: #540b51; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.signups { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.btn-google { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} +.google-logo { + position: absolute; + left: 1em; + display: flex; + align-items: center; +} +.google-logo img { + height: 24px; + width: auto; + background-color: white; +} +.btn-google span { + margin-right: auto; + flex-grow: 1; +} +.hero-image { + width: 100%; + height: 50vh; + overflow: hidden; + padding: 0; +} +.hero-image > img { + height: 110%; + width: auto; + object-fit: cover; + transform: translate(-35px, 40px); +} +.hero-container p { + color: white; + font-weight: 500; +} +.orange { + color: #ecb12f; + font-weight: 600; +} +/*MAIN SECTION*/ +main { + padding: 0; +} +.customer-logos { + background-color: #f3eae2; + padding-top: 2em; + padding-bottom: 2em; + display: flex; + justify-content: center; +} +.logos-spacing-container { + width: 95%; +} +.customer-logos p { + text-transform: uppercase; + font-weight: 600; +} +.logos-container { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} +.logos-container img { + display: flex; + max-width: calc(100% / 4); + max-height: 50px; + margin: 10px; +} +.pitch { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: white; + padding: 3em 3% 3em 3%; +} +.pitch h3 { + color: #540b51; +} +.pitch-text { + line-height: 1.5em; +} +.stats li { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin: 0 1em; +} +.stat-number { + color: #540b51; + font-size: xxx-large; + font-weight: 600; + margin-bottom: 0; + margin-top: 0.3em; + padding-bottom: 0.1em; + line-height: 1; +} +.stat-text { + font-weight: bold; + margin-top: 0; + line-height: 1.1em; + width: 60%; +} +.cta { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-bottom: 3em; + padding-top: 2em; +} +.cta h3 { + color: white; + width: 90%; +} + +/*FOOTER*/ +footer { + background-color: white; + padding: 20px 3% 2em 3%; +} +.footer-links { + display: flex; + flex-direction: column; + align-items: flex-start; + font-weight: bold; + line-height: 3em; +} +.footer-links li:nth-last-child(2) { + display: flex; + align-items: center; + gap: 0.5em; +} +.footer-links li:last-child { + display: flex; + align-items: center; + color: #2e71a6; + gap: 0.5em; +} +.line-before-footer { + border: #f4f3f4 solid 1.5px; +} +.socials-container { + height: 50px; + display: flex; + align-items: center; + justify-content: center; +} +.social-links { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + font-size: 1.5em; +} +.disclaimer { + color: #7c7c7c; +} + +@media screen and (min-width: 769px) and (max-width: 1024px) { + /* Fonts */ + body { + font-family: "Poppins", sans-serif; + background-color: #540b51; + color: #000000; + font-size: 16px; + line-height: 1.5; + width: 100vw; + overflow-x: hidden; + line-height: normal; + align-items: center; + } + + /* Basic styles */ + * { + box-sizing: border-box; + } + body { + text-align: center; + padding: 0; + margin: 0; + width: 100vw; + } + ul { + list-style: none; + padding: 0; + } + small { + color: #7c7c7c; + } + .btn { + background-color: #540b51; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 3px; + font-size: 1em; + font-weight: bold; + text-decoration: none; + margin-top: 15px; + text-transform: uppercase; + height: 50px; + width: 100%; + } + .btn-white { + border-color: #540b51; + background-color: white; + color: #540b51; + } + .btn-purple { + border: solid 2px white; + } + .btn-blue { + background-color: #4285f4; + color: white; + display: flex; + } + .padding-container { + padding: 0 3% 0 3%; + } + + /* Font sizes */ + h1 { + font-size: 4em; + font-weight: 600; + color: white; + line-height: 1.2em; + text-align: left; + width: 65%; + } + h3 { + font-size: 2em; + font-weight: 600; + margin-top: 10px; + margin-bottom: 10px; + } + + /*NAVIGATION*/ + + nav { + background-color: #540b51; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 3% 0 3%; + height: 80px; + } + .slack-logo { + display: flex; + height: 2em; + } + .nav-links { + display: none; + flex-direction: row; + } + .nav-links ul { + list-style: none; + } + .nav-right { + display: flex; + width: calc(100vw / 7); + justify-content: space-around; + align-items: center; + } + .nav-right button { + background-color: #540b51; + border-style: none; + border: none; + } + .nav-cta { + display: none; + } + + /*HEADER - HERO*/ + header { + background-color: #540b51; + width: 100vw; + height: 95vh; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + padding-bottom: 2em; + } + .hero-container { + padding-left: 3%; + padding-right: 3%; + } + .signups { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 90%; + } + .btn-google { + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + .google-logo { + position: absolute; + left: 1em; + display: flex; + align-items: center; + } + .google-logo img { + height: 24px; + width: auto; + background-color: white; + } + .btn-google span { + margin-right: auto; + flex-grow: 1; + } + .hero-image { + width: 70%; + height: 40vh; + overflow: hidden; + padding: 0; + } + .hero-image > img { + height: 100%; + width: auto; + object-fit: cover; + transform: translate(0px); + } + .hero-container p { + color: white; + font-weight: 500; + text-align: left; + width: 65%; + } + .orange { + color: #ecb12f; + font-weight: 600; + } + /*MAIN SECTION*/ + main { + padding: 0; + } + .customer-logos { + background-color: #f3eae2; + padding-top: 2em; + padding-bottom: 2em; + display: flex; + justify-content: center; + } + .logos-spacing-container { + width: 95%; + } + .customer-logos p { + text-transform: uppercase; + font-weight: 600; + } + .logos-container { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: nowrap; + } + .logos-container img { + display: flex; + max-width: calc(100% / 6); + max-height: 50px; + margin: 10px; + } + .pitch { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + background-color: white; + padding: 3em 3% 3em 3%; + } + .pitch h3 { + color: #540b51; + } + .pitch-text { + line-height: 1.5em; + } + .stats { + display: flex; + flex-direction: row; + justify-content: center; + } + .stats li { + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + margin: 0 1em; + } + .stat-number { + color: #540b51; + font-size: xxx-large; + font-weight: 600; + margin-bottom: 0; + margin-top: 0.3em; + padding-bottom: 0.1em; + line-height: 1; + } + .stat-text { + font-weight: bold; + margin-top: 0; + line-height: 1.3em; + width: 90%; + text-align: left; + } + .cta { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 2em 3% 3em 3%; + } + .cta h3 { + color: white; + width: 90%; + } + + /*FOOTER*/ + footer { + background-color: white; + padding: 20px 3% 2em 3%; + } + .footer-links { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + font-weight: bold; + line-height: 2em; + font-size: 0.8em; + } + .footer-links li:nth-last-child(2) { + display: flex; + align-items: center; + gap: 0.5em; + } + .footer-links li:last-child { + display: flex; + align-items: center; + color: #2e71a6; + gap: 0.5em; + } + .line-before-footer { + border: #f4f3f4 solid 1.5px; + } + .socials-container { + height: 50px; + display: flex; + align-items: center; + justify-content: center; + } + .social-links { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + font-size: 1.5em; + } + .disclaimer { + color: #7c7c7c; + } +}