From 0a220962cef52e9ef538960d65222b1452c31c7a Mon Sep 17 00:00:00 2001 From: Christian Wirsching Date: Tue, 18 Feb 2025 18:02:53 +0100 Subject: [PATCH 1/2] done --- starter_code/index.html | 24 +++--- starter_code/stylesheets/style.css | 115 +++++++++++++++++++++++++++++ 2 files changed, 129 insertions(+), 10 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 2f593610f..d74398fb2 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -18,9 +18,10 @@ + +
-
-

Trusted by companies all over the world

+
+

Trusted by companies all over the world

Airbnb logo diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 59f4a7798..231aeede2 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -8,3 +8,118 @@ paragraph yellow: #ECB12F links blue: #2E71A6 footer links grey: #454245 */ + + + +/* @media screen and (max-width: 768px) { */ + +img { + width: 10px; +} +body, h1, h2, h3, h4 { + font-family: sans-serif; +} + +body { + background-color: #540B51; +} + + +nav { + margin: 15px 10px 20px 10px; + /* width: 100vw; */ + display: flex; + flex-direction: row; + justify-content: space-between; + + +} + +nav div button { + background-color: transparent; + border: none; +} + +.nav-bar-button { + width:30px; +} + +h1{ + text-align: center; + font-size:70px; + color:white +} +.slack-logo { + width:40%; +} + +ul { + display: none; +} + +.button-container { + display: flex; + flex-direction: column; + width: 100%; + align-items: center; +} + +.free-slack { + color:yellow; + font-weight: bold; +} + +header p { + font-size: 1.5em; + text-align: center; + color: white; +} + +.mail-button { + margin: 10px 20px; + width: 90%; + height:50px; + font-size: 1.5em; + color: #540B51; + font-weight: 600; + text-align: center; + border-radius: 10px; + +} +.google-button{ + margin: 10px 20px; + width:90%; + height:50px; + font-size:1.5em; + font-weight:600; + background-color:lightblue; + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 10px; +} + +.google-button img { + height: 90%; + width: auto; +} + +.product-img { + width: 100%; + height: auto; + padding-top: 100px; +} + +.companies { + background-color:#F3EAE2; +} + +#header{ + background-color: #540B51; +} + + +main { + background-color: #F3EAE2; +} +/* } */ \ No newline at end of file From 8323c12e3dab20f0abaf6ed6daa29e59a141222b Mon Sep 17 00:00:00 2001 From: Christian Wirsching Date: Wed, 19 Feb 2025 08:53:00 +0100 Subject: [PATCH 2/2] done --- starter_code/index.html | 16 +++--- starter_code/stylesheets/style.css | 81 ++++++++++++++++++++++++++++-- 2 files changed, 85 insertions(+), 12 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index d74398fb2..98218f358 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -90,18 +90,18 @@

Great teamwork starts with a digital HQ

Trusted by companies all over the world

-
- Airbnb logo - NASA logo - Uber logo - Target logo - New York Times logo - Spotify logo +
+
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.

diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index 231aeede2..cde5f459a 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -13,11 +13,28 @@ footer links grey: #454245 /* @media screen and (max-width: 768px) { */ -img { +/* img { width: 10px; -} -body, h1, h2, h3, h4 { +} */ + +body, h1, h2, h3, h4, h5, p { font-family: sans-serif; + padding: 0; +} + +h2 { + font-size: larger; + text-align: center; + line-height: 2em; + padding-top: 10px; +} + +h3 { + font-size: x-large; + color: #540B51; + font-weight: bold; + text-align: center; + padding-top: 30px; } body { @@ -53,7 +70,7 @@ h1{ width:40%; } -ul { +nav ul { display: none; } @@ -121,5 +138,61 @@ header p { main { background-color: #F3EAE2; + padding:0; + border: none; + width:100vw; +} + +.trusted-img { + display: flex; + flex-direction: row; + justify-content: space-evenly; + flex-wrap: wrap; +} + +.trusted-img div{ + width: calc(30% - 100px); + margin: 10px 50px; + height: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +main img { + width: 100%; + height: auto; +} + +.slack-stats { + background-color: white; +} + +.slack-stats p { + text-align: center; } + +.slack-stats span { + font-size: 5em; + text-align: center; + font-weight: 800; + color:#540B51; ; +} + +.slack-stats ul { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + +} +.slack-stats li { + width: 30%; + list-style-type: none; + text-align: center; + padding-left: 0; + margin-left: 0; +} + /* } */ \ No newline at end of file