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..b8f277e48 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,216 @@ + + + + + + + + + + + + + Slack is your digital HQ | Slack + + + + + + +
- 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. +

+ +
- - -
-

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

+ + +
+ +
+

Welcome to your new digital HQ

+
+ + +
+
+
+ + + + diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..b6f23aaed 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,484 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +html, +body { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Mulish", Arial, Helvetica, sans-serif; + background-color: #540b51; + font-size: 16px; +} +p { + color: black; +} + +img { + width: 100%; +} + +h1 { + font-weight: 700; + font-size: 2.5em; +} + +.navbar { + display: flex; + justify-content: space-between; + padding: 8px 16px; +} + +.navbar-logo img { + object-fit: contain; + width: 100%; + max-width: 140px; +} + +.navbar-logo-menus { + display: none; +} +.navbar-button { + display: flex; +} +.navbar-button button { + display: flex; + justify-content: center; + align-items: center; + border: none; + background: none; + border: none; +} + +.header { + display: flex; + flex-direction: column; + text-align: center; +} + +.header h1, +.header p { + text-align: center; +} + +.header .screenshot img { + max-width: 800px; +} + +.header h1 { + color: white; +} + +.header p { + padding-bottom: 20px; + color: white; +} +.changeColor { + color: #ecb12f; +} + +.hidden-menu { + display: none; +} +.signup-button-container { + display: flex; + flex-direction: row; + gap: 15px; + align-items: center; + flex-direction: column; +} +.email-button { + width: 20rem; + height: 50px; + padding: 0 20px; + font-size: 14px; + font-weight: bold; + text-transform: uppercase; + border-radius: 6px; + white-space: nowrap; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + border: none; + cursor: pointer; +} + +.email-button { + background-color: white; + color: #4b0055; +} + +.email-button { + background-color: #4285f4; + color: white; + position: relative; + justify-content: center; +} +.email-button:first-child { + background-color: white; + color: #4b0055; + border: none; +} + +.google-btn { + background-color: #4285f4; + color: white; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + position: relative; +} + +.google-logo { + height: 20px; + width: 20px; + background-color: white; + border-radius: 3px; + padding: 2px; + position: absolute; + left: 20px; +} + +.google-text { + margin: 0 auto; +} + +.header > div:last-child { + max-width: 100%; + overflow: hidden; +} + +.screenshot { + margin-top: 50px; +} +.slack-app-screenshot { + width: 100%; + height: 60%; + margin: 0 auto; + object-fit: contain; + padding: 20px; +} + +.img-section { + text-align: center; + background-color: #f3eae2; + padding: 2rem; +} + +.img-section > p { + font-weight: bold; + font-size: 0.7rem; + margin-bottom: 2rem; + color: black; +} + +.logo-grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 2rem; + max-width: 700px; + margin: 2rem auto; +} + +.trusted-img { + height: 30px; + object-fit: contain; + width: 100px; + flex: 0 0 10%; + text-align: center; +} + +.text-section { + display: flex; + flex-direction: column; + background-color: white; + align-items: center; + justify-content: center; +} + +.text-section h3 { + font-size: x-large; + margin-bottom: 0px; +} + +.text-section p { + text-align: center; +} + +.text-section li:nth-child(2) { + margin: 0px; +} + +.purple { + color: #540b51; + font-size: x-large; + font-weight: bold; +} + +.text-section ul > li { + list-style: none; + margin: 0px; +} + +.text-list { + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 50px; + margin-bottom: 50px; +} + +.text-sub-list { + display: flex; + flex-direction: column; + align-items: center; +} +.text-sub-list p { + margin: 0px; + width: 50%; +} +.text-sub-list p:nth-child(2) { + text-align: center; + font-weight: bold; +} + +.purple { + color: #540b51; + font-size: 3rem; + font-weight: bold; +} + +.digital-HQ { + width: 100%; + text-align: center; +} +.digital-HQ h3 { + font-size: 2rem; + color: white; +} + +.digital-HQ .btn-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; +} + +.digital-HQ button { + background: none; + color: white; + border: 2px solid white; + height: 40px; + width: 60%; + width: 90%; + font-size: 14px; + font-weight: bold; +} +.digital-HQ button:hover { + background: white; + color: #540b51; +} + +footer { + padding-top: 10px; + padding-left: 20px; + margin-top: 40px; + background: white; +} +footer li { + list-style: none; + font-weight: 200; + font-weight: bold; +} +footer ul { + margin-top: 20px; + padding: 10px; + gap: 30px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.link { + display: flex; + gap: 20px; +} +.link img { + object-fit: contain; + width: auto; +} + +.small-line { + width: 600px; + height: 2px; + background-color: rgb(244, 240, 240); + border: none; + margin-top: 30px; +} +.foot-section { + display: flex; + background: white; + flex-direction: column; +} +.icon-class { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0px 10px; + gap: 60px; +} +.foot-note { + background: white; + text-align: left; + color: #454245; + margin-bottom: 20px; + padding-left: 10px; + font-size: small; +} + +/* 👉 the css is easier to read if you add the media queries after each element, instead of all at once. But it's a personal choice, both work the same way */ +@media screen and (min-width: 768px) { + .header { + flex-direction: row; + padding: 15px; + } + .header h1, + .header p { + text-align: left; + } + + .header > div { + display: flex; + flex-direction: column; + align-items: center; + } + + .header .screenshot img { + margin-top: auto; + margin-bottom: auto; + width: 100%; + } + .header div:first-of-type { + justify-content: center; + text-align: left; + align-items: flex-start; + } + .text-list { + display: flex; + flex-direction: row; + gap: 20px; + margin-top: 50px; + margin-bottom: 50px; + } + .digital-HQ button { + background: none; + color: white; + border: 2px solid white; + height: 40px; + width: 60%; + width: 60%; + font-size: 14px; + font-weight: bold; + } + footer ul { + margin-top: 20px; + padding: 10px; + gap: 20px; + display: flex; + flex-direction: row; + justify-content: space-between; + } + footer li { + list-style: none; + font-weight: 100; + font-size: small; + font-weight: bold; + } + .icon-class { + display: flex; + flex-direction: row; + justify-content: flex-start; + padding: 0px 10px; + gap: 60px; + } +} +@media screen and (min-width: 1440px) { + .header .screenshot img { + margin-top: auto; + margin-bottom: auto; + } + .header h1 { + font-size: 4rem; + } + .menu-img img { + display: none; + } + .navbar-logo { + display: flex; + } + .navbar-logo-menus { + display: flex; + gap: 10px; + justify-items: center; + align-items: center; + } + .navbar-logo-menus li { + list-style: none; + font-weight: 200; + font-weight: bold; + } + .navbar-logo-menus li a { + text-decoration: none; + color: #f3eae2; + } + .digital-HQ .btn-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 20px; + } + .digital-HQ button { + background: none; + color: white; + border: 2px solid white; + height: 40px; + width: 10%; + font-size: 14px; + font-weight: bold; + } + .hidden-menu { + display: flex; + gap: 20px; + justify-content: center; + align-items: center; + } + .hidden-menu li { + list-style: none; + font-weight: 100; + font-weight: bold; + } + .hidden-menu li a { + text-decoration: none; + color: #f3eae2; + } + .hidden-menu li:nth-child(2) a { + display: inline-block; + background-color: white; + color: #4b0055; + padding: 8px 16px; + border-radius: 4px; + text-decoration: none; + font-weight: bold; + border: 1px solid #4b0055; + } +}