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

+ 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

+
+

Trusted By Companies All Over The World

-
+
Airbnb logo NASA logo Uber logo @@ -94,86 +116,123 @@

Great teamwork starts with a digital HQ

New York Times logo Spotify logo
+
+
+

Teams large and small rely on Slack

-
-

Teams large and small rely on Slack

-

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

+ + + diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..8251b39bc 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,200 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.navbar { + width: 100%; + padding: 15px 30px; + display: flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + background-color: #540b51; +} + +.nav-logo img { + width: 80px; +} + +.list-div { + display: flex; + gap: 30px; + list-style: none; + margin: 0; + padding: 0; +} + +.list-div a { + text-decoration: none; + color: white; + font-size: 16px; + font-weight: 500; +} + +.navbar > div:last-child { + display: flex; + align-items: center; + gap: 20px; + justify-content: center; +} + +.navbar button { + background: none; + border: none; + cursor: pointer; +} + +.navbar button img { + width: 22px; +} + +.navbar > div:last-child ul { + display: flex; + gap: 20px; + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.li-des { + background-color: black; + color: purple !important; + padding: 5px 10px; + border-radius: 5px; + list-style: none; +} + +.nav-btn-ii { + display: none; +} + +.navbar > div:last-child ul li a { + text-decoration: none; + color: white; + font-size: 16px; +} + +/* header css starts here */ + +.header { + background-image: url(../images/background-singup.png); + background-position: top; + background-repeat: no-repeat; + background-size: cover; + padding-top: 70px; +} +.container { + display: flex; + justify-content: space-around; + align-items: center; + /* min-height: 300px; */ + gap: 30px; +} + +.left-side { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + margin: 0; +} + +.right-side { + display: flex; + justify-content: center; + align-items: center; +} + +.box { + display: flex; + justify-content: center; + align-items: center; +} + +.box h1 { + font-size: 70px; + color: white; +} +.box p { + font-size: 28px; +} + +.box img { + width: 500px; + height: 300px; +} + +.button-down { + width: 30%; + margin-left: 130px; + color: white; + border: none; + padding: 30px 30px; + border-radius: 5px; + font-size: 20px; + cursor: pointer; + display: flex; + flex-direction: column; +} + +.button-down button { + margin: 10px; + padding: 10px 20px; + border-radius: 10px; +} + +.button-d button { + display: flex; + justify-content: center; + gap: 80px; + align-items: center; + width: 95%; + background-color: rgb(78, 87, 213); +} + +.button-d button img { + width: 30px; + background-color: white; + border-radius: 2px; + padding: 0px; + margin-left: -90px; +} + +/* section css starts here */ + +.section-one { + background-color: #f3eae3; +} + +.section-one h3 { + text-align: center; + padding: 40px; + font-size: 30px; +} + +.part-one { + display: flex; + justify-content: center; + align-items: center; + gap: 50px; +} + +.part-one img { + width: 80px; +} + +.section-last h1 { + text-align: center; + padding: 40px; + color: #540b51; +}