diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..7a244141f 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,179 +1,216 @@ + + + + + + + + + + + + + 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 +
+
+ +
+

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..0f129d332 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,108 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +body { + background-color: #540b51; + font-family: "Inter"; + color: #fff; + text-align: center; +} + +.navbar-btns { + color: #fff; +} + +#menu-btn { + position: absolute; + top: 5px; + right: 2%; +} + +#search-btn { + position: absolute; + top: 5px; + right: 7%; +} + +h1 { + color: #fff; + font-weight: 500; +} + +#free-to-try { + color: #ecb12f; +} + +.signup-btn { + width: 95vw; + height: 50px; + border: none; + background-color: #fff; + color: #540b51; + font-weight: 600; + text-transform: uppercase; + margin: 5px; + border-radius: 5px; + text-align: center; +} + +#signup-with-google { + display: flex; + flex-direction: row; + background-color: #4285f4; + color: #fff; + justify-content: center; +} + +#google-signup-logo { + height: 40px; + width: 40px; + background-color: #fff; + border-radius: 3px; + position: relative; + left: -262px; + top: 4px; +} + +#testimonials { + width: 100vw; + display: flex; + flex-direction: column; + background-color: #f3eae2; + color: #191817; + text-transform: uppercase; +} + +.big-number { + font-size: 3em; +} + +@media screen and (max-width: 768px) { + #nav-bar { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 10px; + } + + #slacklogo { + max-width: 10vw; + } + + #nav-links { + display: none; + } +} + +/* image sizes reduced for easier use */ + +.large-img { + max-width: 50vw; +} + +.large-logos { + max-width: 20vw; + max-height: 50px; +} +