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

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..ac9fea34c 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,258 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ +body { + margin: 0; + box-sizing: border-box; +} +h1 { + font-family: 'Poppins', sans-serif; + font-weight: 600; +} +p { + font-family: 'Inter', sans-serif; +} + +@media (width < 768px) { + .main-menu-ul { + display: none; + } + .hero-section { + background-color: #540B51; + color: #ffffff + } + .main-nav { + display: flex; + justify-content: space-between; + /* margin-left: 10px; + margin-right: 10px; */ + padding: 15px 15px; + } + .main-nav div { + width: 90px; + } + .main-nav div img { + height: auto; + width:100%; + } + .search-btn { + background-color: transparent; + border: none; + margin: 0; + padding: 0; + text-align: inherit; + font: inherit; + border-radius: 0; + margin-right: 20px; + } + + .menu-mobile { + background-color: transparent; + border: none; + margin: 0; + padding: 0; + text-align: inherit; + font: inherit; + border-radius: 0; + appearance: none; + margin-right: 12px; + margin-left: 10px; + } + .header-hero { + display: flex; + flex-direction: column; + align-items: center; + margin: 10px auto; + } + .title-and-sub { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40px; + } + .title-and-sub div { + text-align: center; + width: 80%; + } + .first-p { + font-family: 'Inter', sans-serif; + + } + .first-span { + color:#ECB12F + } + .hero-image-container img { + width: 400px; + } + .signup-container { + display: flex; + flex-direction: column; + align-items: center; + } + .signup-container button:first-child { + background-color: white; + padding: 12px; + color: #540B51; + font-size: 15px; + font-family: 'Inter', sans-serif; + font-weight: 500; + text-transform: uppercase; + width: 360px; + border:none; + margin-bottom: 10px; + border-radius: 5px; + } + .signup-google-container { + background-color: #4285F4; + color: white; + padding: 12px; + font-size: 15px; + font-family: 'Inter', sans-serif; + font-weight: 500; + text-transform: uppercase; + position: relative; + width: 360px; + border: none; + border-radius: 5px; + } + .signup-google-container img { + width: 20px; + height: auto; + position: absolute; + left:5px; + top:3px; + bottom: 2px; + background-color: white; + padding: 5px 6px; + border-radius: 2px; + } + .pos-hero-section { + display: flex; + flex-direction: column; + align-items: center; + background-color: #F3EAE2; + margin-top: -10px; + padding: 30px 1px; + + } + .pos-hero-imgs { + display: flex; + flex-wrap: wrap; + width: 68%; + max-width: 420px; + justify-content: center; + } + .pos-hero-imgs img { + height:30px; + padding: 10px; + } + .slack-numbers { + display:flex; + flex-direction: column; + align-items: center; + margin: 0 auto; + width: 70%; + padding: 20px; + } + .slack-numbers h3 { + width: 80%; + font-size: 28px; + font-weight: 600; + color: #540B51; + font-family: 'Poppins', sans-serif; + text-align: center; + margin-bottom: 5px; + max-width: 270px; + } + .slack-numbers p { + text-align: center; + font-size: 15px; + font-weight: 500; + max-width: 370px; + } + .slack-numbers-div { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 1px; + } + .slack-numbers-div p:first-child { + color:#540B51; + font-family: 'Poppins', sans-serif; + font-size: 40px; + font-weight: bold; + margin-bottom: 10px; + } + .slack-numbers-div p:nth-child(2) { + font-weight: bold; + font-size: 13px; + width: 50%; + text-align: center; + margin: 0; + } + .main-cta { + display: flex; + flex-direction: column; + align-items: center; + background-color: #540B51; + padding: 20px 0; + } + .main-cta h3 { + color:white; + font-size: 25px; + font-weight: 600; + font-family: 'Poppins', sans-serif; + text-align: center; + width: 50%; + } + .main-cta button { + background-color: white; + padding: 10px; + color: #540B51; + font-size: 15px; + font-family: 'Inter', sans-serif; + font-weight: 500; + text-transform: uppercase; + width: 350px; + margin-bottom: 10px; + border:none; + } + .main-cta button:nth-child(3){ + background-color: #540B51; + color: white; + border: solid 1px white; + } + footer { + margin: 0 auto; + width: 80%; + } + footer hr { + width: 80%; + } + footer ul { + list-style: none; + display: flex; + flex-direction: column; + align-items: flex-start; + } + footer ul li { + margin-bottom: 10px; + font-weight: 600; + font-size: 12px; + } + footer ul:nth-child(3){ + display:flex; + flex-direction: row; + justify-content: space-between; + } + footer ul:nth-child(3) li { + font-size: 15px; + } + .copyright-text { + margin: 20px auto; + text-align: center; + color: #454245; + } + +} +