diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..d8bfbfa Binary files /dev/null and b/.DS_Store differ diff --git a/starter_code/.DS_Store b/starter_code/.DS_Store new file mode 100644 index 0000000..10f526f Binary files /dev/null and b/starter_code/.DS_Store differ diff --git a/starter_code/images/.DS_Store b/starter_code/images/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/starter_code/images/.DS_Store differ 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..0dae4e1 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -4,17 +4,223 @@ - - + Where work happens | Slack - - - +
+
+
+
+
+ +
+
+ navicon +
+
+ +
+
+
+
+
+
+
+
+
+
+
+

Where Works Happens

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates numquam sapiente veritatis est consectetur adipisci expedita dolores quibusdam alias magni dolore eum, earum reprehenderit optio. Delectus quasi expedita nemo sit!

+
+
+ +
+
+ +
+

Already using Slack? Sign in.

+
+
+
+
+
+ home talking +
+
+
+
+
+
+
+

You're in good company

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, facere architecto quasi sunt accusamus ullam? Nulla sed quasi aspernatur eos nisi voluptatibus veniam, asperiores molestiae beatae, accusantium voluptas labore quibusdam?

+ +
+
+ airbnb-logo +
+
+ capital-one-logo +
+
+ harvard-logo +
+
+ los-angeles-times-logo +
+
+ oracle-logo +
+
+ ticketmaster-logo +
+
+
+
+
+
+
+
+

Try it for free

+

Already using Slack? Sign in.

+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index cff873e..42660ee 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -5,3 +5,158 @@ main-titles dark-grey: #2C303F; paragraph grey: #5b5e6d; nav grey: #5b5e6d; */ + +body { + margin: 0; +} + +img { + width: 100%; +} + +.header-section { + border-bottom: 1px solid lightgray; +} + +.header-section .slack-logo { + width: 100px; +} + +.header-section .navicon { + width: 30px; +} + +.navigation-menu ul { + display: flex; + justify-content: space-between; + list-style: none; + margin-bottom: 0; +} + +.navigation-menu ul li a { + color: #5b5e6d; + text-decoration: none; +} + +.main-top-section { + margin-top: 70px; +} + +.main-top-section h1 { + color: #2C303F; + font-family: serif; + font-size: 3.5em; + font-weight: 800; +} +.main-top-section p { + color: #5b5e6d; + margin-top: 20px; + margin-bottom: 20px; +} + +.email-input { + border: 1px solid lightgray; + border-radius: 4px; + width: 100%; + padding: 10px; + margin-top: 20px; +} + +.get-button { + background-color: #192592; + color: white; + text-transform: uppercase; + border: 1px solid #192592; + border-radius: 4px; + width: 100%; + padding: 10px; + margin-top: 20px; +} + +.centered-text { + text-align: center; +} + +.centered-text a { + color: #192592; +} + +.main-middle-section { + background-color: #F4F3F4; + text-align: center; +} + +.main-middle-section h2 { + color: #2C303F; + font-family: serif; + font-size: 2em; + font-weight: 800; + padding-top: 40px; +} + +.discover-button { + color: #192592; + text-transform: uppercase; + border: 1px solid #192592; + border-radius: 4px; + width: 100%; + max-width: 500px; + padding: 10px; + margin-top: 20px; +} + +.main-middle-section img { + width: 150px; + margin: 30px; +} + +.main-bottom-section { + text-align: center; + margin: 50px 0; +} + +.main-bottom-section h3 { + color: #2C303F; + font-family: serif; + font-size: 1.5em; + font-weight: 800; +} + +.footer-top-section { + margin-top: 30px; +} + +.footer-top-section .slack-img { + width: 60px; +} + +.footer-top-section h4 { + text-transform: uppercase; + color: #2C303F; +} + +.footer-top-section p { + color: #5b5e6d; + font-size: 0.9em; + font-weight: 400; +} + +.footer-bottom-section { + background-color: #F4F3F4; + padding: 20px 0; +} + +.footer-bottom-section p { + margin-bottom: 0; + color: #5b5e6d; + font-weight: 600; +} + +.footer-bottom-section .flag { + width: 20px; +} + +.footer-bottom-section .social-icon { + width: 20px; + filter: invert(0.40); +} \ No newline at end of file