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/menu.png b/starter_code/images/menu.png new file mode 100644 index 0000000..2574592 Binary files /dev/null and b/starter_code/images/menu.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..b36539d 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,20 +1,202 @@ - - - - - - - - - - - Where work happens | Slack - - - - - - - + + + + + + + + + + + + + Where work happens | Slack + + + +
+
+ Slack + list + +
+
+
+
+
+
+
+

Where Work Happens

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui doloremque nihil distinctio, velit incidunt + sed eaque rem ipsa animi nobis aspernatur non fuga impedit harum. Eum, provident repudiandae. Deleniti, + consectetur.

+
+
+ +
+
+ +
+

Already using Slack? Sign in

+ +
+
+ +
+ team work +
+ + + +
+ +
+ +
+
+
+
+

You're in good company

+

Millions of people around the world have already made Slack the place whrer their work happens

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

Try it for free

+

+ Already using Slack? Sign in +

+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ iso-slack +
+
+

Company

+

Careers

+

Blog

+

Press

+

Brand Guidelines

+
+
+

Product

+

Why Slack

+

Enterprise

+

Customer Stories

+

Pricing

+

Security

+
+
+

Resources

+

Download

+

Help Center

+

Guides

+

Partners

+

Eventes

+

Security

+
+
+

Extras

+

Podcast

+

Slack Shop

+

Slack at work

+

Slack Fund

+ +
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index cff873e..1bf9508 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -5,3 +5,221 @@ main-titles dark-grey: #2C303F; paragraph grey: #5b5e6d; nav grey: #5b5e6d; */ +img { + width: 100%; +} + +.main-header { + + color: #5b5e6d; + padding: 1rem; +} + +.elements-main-header { + display: flex; + justify-content: space-between; + align-items: center; + + +} + +.main-header img { + width: 90px; +} + +.main-header .menu-icon { + width: 25px; +} + +.main-header ul { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + +} + +.main-header ul li { + margin-right: .5rem; + +} + +.main-header button { + width: 100%; + padding: .25rem; + border-radius: 3px; + color: #5b5e6d; + background-color: white; + border: 1px solid #5b5e6d; + + +} + +h1, +h2, +h4 { + font-family: serif; + font-weight: bold; +} + +h3 { + color: #5b5e6d; + font-size: 1rem; +} + +p { + font-size: .75rem; +} + +.claim { + padding: .75rem; + border-bottom: 1px solid #dfdfdf; +} + +.claim input { + color: #5b5e6d; + width: 100%; + padding: .5rem; + margin-bottom: .25rem; + +} + +.claim button { + width: 100%; + padding: .5rem; + border-radius: 3px; + color: white; + background-color: #192592; + border: none; + text-transform: uppercase; + +} + +.good-company { + text-align: center; + justify-content: center; + background-color: #F4F3F4; + padding: 2.5rem 0; + +} + +.good-company button { + width: 100%; + padding: .75rem .5rem; + border-radius: 3px; + color: #192592; + border: 1px solid #192592; + background-color: white; + text-transform: uppercase; + font-weight: bold; + margin-bottom: 2rem; +} + + +.sponsors-logo { + background-color: #F4F3F4; + justify-content: center; + +} + +.good-company img { + width: 300px; + border-bottom: 1px solid #dfdfdf; + border-right: 1px solid #dfdfdf; +} + +.try-it { + padding-top: 1rem; + border-bottom: 1px solid #dfdfdf; + text-align: center; +} + +.try-it input { + color: #5b5e6d; + width: 100%; + padding: .5rem; + margin-bottom: .25rem; + + +} + +.try-it button { + width: 100%; + padding: .5rem; + border-radius: 3px; + color: white; + background-color: #192592; + border: none; + text-transform: uppercase; + margin-bottom: 1rem; + +} + +.final-sections { + padding-top: 1rem; +} + +.final-sections img { + width: 120px; +} + +.final-sections h4 { + font-family: sans-serif; + font-size: .75rem; + text-transform: uppercase; + color: #5b5e6d; + +} + +.final-footer { + background-color: #F4F3F4; + padding: 1rem; +} + +.final-footer ul { + list-style: none; + display: flex; + align-items: center; + margin-bottom: none; + + +} + +.final-footer ul li { + margin-right: .25rem; + font-size: .75rem; + font-weight: bold; + text-align: center; +} + +.final-footer .languages { + display: flex; + align-items: center; + justify-content: center; +} + +.final-footer .languages img { + width: 20px; + margin-right: .25rem; +} + +.final-footer .languages p { + margin: 0; +} + +.contact-social-media { + display: flex; + align-items: center; + justify-content: center; +} + +.contact-social-media img { + width: 20px; + margin-right: .2rem; +} + +.centered { + text-align: center; + align-items: center; + +} \ No newline at end of file