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_480.png b/starter_code/images/menu_480.png new file mode 100644 index 0000000..00f8276 Binary files /dev/null and b/starter_code/images/menu_480.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..e912768 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,20 +1,187 @@ - - - - - - - - - - - Where work happens | Slack - - - - - - - + + + + + + + + + + + + + + Where work happens | Slack + + + + +
+ + Slack slack-logo + + + navicon + + +
+ +
+
+
+
+
+ +
+
+
+

Where Work Happens

+

+ bcyvbwygevcbwygveuhbvh

+
+ + +
+

Are you using slack?

+ +
+
+
+ +
+ + +
+
+

You are in good company

+

fb3uygvfci3cvbiyugevcfgy

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

Try it for free

+

Already using Slack

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

Company

+

About us

+

Carrers

+

Blog

+

Press

+

Brand Guidelliness

+ +
+
+

Product

+

Why slack?

+

Enterprise

+

Customer Stories

+

Princing

+

Security

+
+
+

Resources

+

Download

+

Help center

+

Guides

+

Parthers

+

Events

+

App Directory

+

Api

+
+
+

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..bf0cbaf 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -5,3 +5,165 @@ main-titles dark-grey: #2C303F; paragraph grey: #5b5e6d; nav grey: #5b5e6d; */ + +img { + width: 100% +} + +.menu { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-bottom: 1px solid; +} + +.menu img { + width: 100px; +} + +.slackicon { + width: 30px; +} + +.ul.begin { + display: flex; + list-style: none; + gap: 20px; + justify-content: space-between; +} + +.hero { + padding: 30px 20px; + justify-content: center; + align-items: center; + +} + +.hero.h1 { + font-size: 4em; + padding-bottom: 20px; + color: grey; + justify-content: center; + +} + +.p.paragrafirst { + justify-content: center; +} + +.form { + padding: 10px; +} + +.star { + background-color: blue; + text-transform: uppercase; + padding: 15px; + font-size: 1em; +} + +.subhero.h2 { + text-align: center; + font-size: 2em; + color: black; +} + +. .emailbutton { + background-color: blue; + text-transform: uppercase; + padding: 15px; +} + +.threehero { + display: flex; + justify-content: space-between; + align-items: center; +} + + +.threehero img { + width: 30px; +} + +.fourhero { + padding: 30px 20px; + + +} + +.footer { + display: flex; + background-color: gray; + +} + +.img twitter { + width: 100px; +} + +.facebook img { + width: 100px; +} + +.youtube { + width: 100px; +} + +.container { + align-items: center; + justify-content: center; + width: 100%; + margin: auto; + padding: auto; +} + + +.subhero { + padding: 30px 20px; + justify-content: center; + align-content: center; + margin: auto; + +} + + +.fiveheroe { + padding: 30px 20px; + width: 30px; +} + + + + + +@media screen and (min-width: 768px) { + h1 { + font-size: 64px; + padding-bottom: 20px; + } + + h3 { + text-align: left; + } +} + + + +@media screen and (min-width: 768px) { + + .start, + .emailbuttom { + width: max-content; + padding: 15px 25px; + } + + .email.emailbuttom { + margin: auto; + } + + input { + width: 400px; + margin: 0 20px 0 0; + } +} \ No newline at end of file