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

Where Work Happens

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas numquam delectus commodi, ullam reiciendis + recusandae fuga, fugiat facere, sit doloribus temporibus voluptates cum officia distinctio atque + consequuntur nam quam quasi.

+ +
+
+ +
+
+

Get started

+
+ + +
+
+
+
+ people talking +
+
+
+
+
+
+
+

You're in good company

+

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

+
+
+

Discover Why

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

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..87a0172 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -5,3 +5,231 @@ main-titles dark-grey: #2C303F; paragraph grey: #5b5e6d; nav grey: #5b5e6d; */ + +.test { + background-color: red; +} + + +img { + width: 100%; +} + +h1, +h2, +h3, +h4 { + color: #2C303F; +} + +p { + color: #5b5e6d; +} + +.menu { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #ccc; + align-items: center; + padding: 10px 30px; +} + +.menu .logo { + width: 150px; +} + +.burguer { + width: 30px; +} + +.menu ul { + display: flex; + margin: 0; + list-style: none; +} + +.menu a { + color: black; + margin-left: 15px; + text-decoration: none; +} + +.workspace { + border: 1px solid black; + padding: 5px; + border-radius: 3px; +} + +.email { + border: 1px solid #5b5e6d; + border-radius: 5px; + padding: 15px; + margin: 10px 3px; + text-align: left; +} + +.getStarted { + background-color: darkblue; + border-radius: 5px; + padding: 15px 25px; + text-align: center; + margin: 10px 3px; +} + +.getStarted a { + text-decoration: none; + text-transform: uppercase; + color: white; +} + +.signIn { + margin-bottom: 5px; + margin-left: 3px; + text-align: left; +} + +.centered { + text-align: center; +} + +.discover { + background-color: #F4F3F4; + padding: 50px 0; +} + +.discoverWhy { + text-decoration: none; + text-transform: uppercase; + border: 1px solid #5b5e6d; + border-radius: 5px; + padding: 10px 25px; + text-align: center; + margin: 10px 3px; +} + +.discover a { + text-decoration: none; + color: #192592; +} + +.discover img { + width: 200px; + padding: 15px; +} + +.slack-ico { + width: 60px; +} + +.footerList ul { + list-style: none; + margin: 0; + padding: 0; + +} + +.footerList li { + padding: 5px; +} + +.footerList a { + text-decoration: none; + color: #5b5e6d; +} + + +.footerList h4 { + text-transform: uppercase; + font-size: 1em; + padding-top: 20px; +} + +.footerList { + padding-top: 30px; +} + +.bottomLine { + border-bottom: 3px solid lightgrey; +} + +.leftLine { + border-left: 3px solid lightgrey; +} + +.rightLine { + border-right: 3px solid lightgrey; +} + +.tryiIt { + padding: 30px 0; +} + +.sponsor { + height: 80px; + +} + +.hero { + padding-top: 40px; +} + +.hero h1 { + font-size: 4em; + font-family: serif; + font-weight: bold; +} + +.language { + background-color: #F4F3F4; + font-weight: bold; + padding: 30px 0; +} + +.languagelist { + display: flex; + justify-content: space-evenly; + list-style: none; +} + +.languagelist li { + padding: 15px +} + +.language a { + text-decoration: none; + color: #5b5e6d; + +} + +.language img { + width: 20px; +} + + +.languageIcons { + display: flex; + justify-content: center; + list-style: none; +} + +.languageIcons li { + padding: 8px +} + +@media screen and (max-width: 768px) { + .people { + width: 80%; + } + + .tryiIt h3, + p { + text-align: center; + + } + + .signIn { + text-align: center + } + + +} \ No newline at end of file