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..afaf487 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,20 +1,191 @@ - - - - - - - - - - - Where work happens | Slack - - - - - - - + + + + + + + + + + + + + + + + Where work happens | Slack + + + +
+
+ + + +
+
+ +
+
+
+
+
+
+

Where work happens

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis corporis perspiciatis cupiditate! + Totam + laudantium tempora facere consectetur!

+
+ +
+ +
+
+
+
+ home_talking +
+ + +
+
+
+ +
+
+

You are in a good company

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

+
+
+

Discover why

+
+
+ +
+ +
+ +
+
+
airbnb-logo
+
capital-one-logo
+
harvard-logo
+
los-angeles-times-logo
+
ticketmaster-logo
+
oracle-logo
+
+
+ +
+
+
+
+
+
Try it for free
+

Already using Slack?

+ Sign in +
+
+
+ +
+
+

Get started

+
+
+
+
+ +
+
+
slack-logo
+
+
+
+
Company
+

About us

+

Careers

+

Blog

+

Press

+

Brand Guidelines

+
+
+
Product
+

Why Slack?

+

Enterprise

+

Customer Stories

+

Pricing

+

Security

+
+
+
Resources
+

Downloads

+

Help Center

+

Guides

+

Partners

+

Events

+

App Directory

+

API

+
+
+
Extra
+

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..1a23f1a 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -5,3 +5,185 @@ main-titles dark-grey: #2C303F; paragraph grey: #5b5e6d; nav grey: #5b5e6d; */ + +img { + width: 100% +} + + +/*Navigation menue styles*/ +.nav-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: #5b5e6d 1px solid; + margin-bottom: 30px; +} + +.nav-bar .slack-logo { + width: 20%; +} + +.nav-bar .navicon { + width: 40px; +} + +.nav-bar ul { + list-style: none; + display: flex; +} + +.nav-bar li { + padding: 0 10px; +} + +/*First section styles*/ +.description, +.first-cta h2, +.first-cta p { + margin: 20px auto +} + +h1, +h2 { + font-family: serif; + font-weight: 700; + +} + +h1 { + line-height: 0.8em; + margin: 30px 0; + font-size: 3.8em; +} + +.email { + border: solid 1px #d0d1d5; + border-radius: 5px; + padding: 10px; + color: #5b5e6d; +} + +.first-cta, +.login { + text-align: center; + margin-bottom: 30px; +} + +.get-started, +.button { + text-transform: uppercase; + text-decoration: none; + text-align: center; + font-weight: 600; + padding: 10px; + border-radius: 5px; + +} + +.get-started { + background-color: #192592; + color: white; + display: block; + margin-bottom: 15px; +} + +.button { + color: #192592; + border: solid 2px #192592; +} + +/*Logos section*/ + +.logos, +.footer-nav { + background-color: #F4F3F4; + text-align: center; +} + +.logos img { + width: 70%; + padding: 50px; +} + +.second-cta { + padding: 30px; + border-bottom: 1px solid #8d8e90; + align-items: center; + text-align: center; + + +} + +.cta-section { + margin-bottom: 20px; + ; +} + +.cta-section p { + display: inline; + +} + +.site-map { + margin: 30px; +} + +.site-map a { + text-decoration: none; + color: #5b5e6d +} + +.site-map img { + width: 30%; + margin-bottom: 20px; +} + + +/*Footer navigation panel*/ + +.footer-nav ul, +.language, +.rss-icons { + list-style: none; + display: flex; + justify-content: center; + padding: 10px; +} + +.footer-nav a, +.language { + margin: 0 20px; + text-decoration: none; + font-weight: bold; + color: #5b5e6d +} + +.flag, +.icon { + width: 40px; + margin: 0 10px; +} + +.rss-icons img { + width: 30px; + opacity: 0.5; +} + +@media screen and (min-width: 575px) { + .second-cta { + text-align: left + } + + h1 { + font-size: 4.2em; + } + +} + +@media screen and (min-width: 770px) { + .login { + text-align: left; + } +} \ No newline at end of file