diff --git a/starter_code/images/facebook.png b/starter_code/images/facebook.png new file mode 100644 index 0000000..3a72823 Binary files /dev/null and b/starter_code/images/facebook.png differ diff --git a/starter_code/images/navicon.png b/starter_code/images/navicon.png new file mode 100644 index 0000000..c20df3f Binary files /dev/null and b/starter_code/images/navicon.png differ diff --git a/starter_code/images/twiter.png b/starter_code/images/twiter.png new file mode 100644 index 0000000..27f7455 Binary files /dev/null and b/starter_code/images/twiter.png differ diff --git a/starter_code/images/youtube.png b/starter_code/images/youtube.png new file mode 100644 index 0000000..ff9fdcb Binary files /dev/null and b/starter_code/images/youtube.png differ diff --git a/starter_code/index.html b/starter_code/index.html index bf06bff..41748c1 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,20 +1,171 @@ - - - - - - - - - - - Where work happens | Slack - - - - - - - + + + + + + + + Where work happens | Slack + + + +
+ + + navicon +
+ +
+
+ +
+

Where Work Happens

+

+ When your team needs to kick of a project, hire a new employee, + deploy some code, review a sales contract, finalize next year's + budget, measure on A/B test, plan your next office opening, and + more, Slack has you covered. +

+ +

Get Started

+

Already using Slack? Sign in.

+
+ +
+ +
+
+
+ +
+
+
+

You're in good company

+

+ Millions of people around the world have already made Slack the place + where theur work happens. +

+ Discover Why +
+ +
+
+ + + + + + +
+
+
+
+ +
+
+
+
+

Try it for free

+

Already using Slack? Sign in.

+
+
+ + Get Started +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index cff873e..78c3d8f 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -1,7 +1,148 @@ /* background-grey: #F4F3F4; -button-purple: #192592 +button-purple: #192592; main-titles dark-grey: #2C303F; paragraph grey: #5b5e6d; nav grey: #5b5e6d; */ + +p { + color: #5b5e6d; +} + +li { + color: #5b5e6d; +} + +img { + width: 100%; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + border-bottom: 1px solid #c6c8d1; +} + +header .logo { + width: 100px; +} + +header .navicon { + width: 30px; +} + +header ul { + display: flex; + font-weight: bold; +} + +header li { + list-style: none; + margin-right: 30px; +} + +.section-top { + margin-top: 20px; + text-align: center; +} + +.section-top h1 { + font-weight: bold; +} + +.section-mid { + background-color: #f4f3f4; + border-bottom: 1px solid #c6c8d1; +} + +.article-top { + text-align: center; + padding: 30px; +} +.article-top h2 { + font-weight: bold; +} + +.article-bottom { + padding: 30px; +} + +.article-bottom img { + border: 1px dotted; + padding: 30px; +} + +.section-bottom { + text-align: center; + padding: 30px; + border-bottom: 1px solid #c6c8d1; +} + +.section-bottom h2 { + font-weight: bold; + display: block; +} + +.footer-top { + align-items: center; + border-bottom: 1px solid #c6c8d1; +} + +footer img { + width: 50px; +} + +footer li { + list-style: none; +} + +.footer-top li:first-child { + font-weight: bolder; +} + +.footer-bottom { + background-color: #f4f3f4; + text-align: center; + font-weight: bold; +} +.footer-bottom img { + width: 20px; +} + +.footer-bottom ul { + display: flex; +} + +.input-box { + margin: 30px 0; +} + +.button-border { + border: 2px solid; + padding: 4px; + color: black; + text-decoration: none; + border-radius: 6px; +} + +.button-blue { + background-color: #192592; + color: white; + padding: 10px; + text-decoration: none; + border-radius: 6px; +} + +.button-white { + background-color: white; + color: #192592; + padding: 10px; + text-decoration: none; + border-radius: 6px; + border: 2px solid; + font-weight: bold; + text-transform: uppercase; +}