diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..5008ddfcf Binary files /dev/null and b/.DS_Store differ diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 000000000..5008ddfcf Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/header-background.png b/images/header-background.png new file mode 100644 index 000000000..cfb67803c Binary files /dev/null and b/images/header-background.png differ diff --git a/index.html b/index.html index 8300a1607..b60573d8f 100644 --- a/index.html +++ b/index.html @@ -5,97 +5,263 @@ + - Where work happens | Slack + Where work happens / Slack - -
- home_work_happening -

Where Work Happens

-

When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered.

- -

Already using Slack? Sign in

+
+ + Slack Menu
-
-
-

You´re in good company

-

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

- - - - - - - -
-
-

Try it for free

-

Already using Slack? Sign in

- -
-
- + + +
+

+ Try Slack for free +
+ + + + + diff --git a/stylesheets/style.css b/stylesheets/style.css index cff873eb2..ee33e2b9a 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1,7 +1,202 @@ -/* -background-grey: #F4F3F4; -button-purple: #192592 -main-titles dark-grey: #2C303F; -paragraph grey: #5b5e6d; -nav grey: #5b5e6d; -*/ +/* ---- reset ---- */ + +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + +body { /* el body debería ser como una hoja en blanco, sin padding ni margin, eso se aplica a los elementos que van dentro */ + padding: 0; + margin:0; + color: #111; + font-family: Helvetica Neue,Helvetica,"Segoe UI",Tahoma,Arial,sans-serif; + font-size: 16px; +} + + +/* ---- typography ---- */ + + + +h1 { + font-size: 46px; + margin-bottom:15px; + margin-top:0; + word-spacing: -5px; +} + +h2 { + font-size: 30px; + margin-bottom: 65px; +} + +h3 { + font-size: 20px +} + +p { + font-size: 17px; + color: rgb(69, 69, 69); + margin: 0 auto; + line-height: 22px; + +} + +ul { + list-style: none; +} + +.expand-link { + color: rgb(25,101,161); + text-decoration: none; + font-weight: 600; + +} + +footer { + font-size: 14px; + + +} + +footer p { + font-size: 14px; + font-weight: 500; + text-align: center; +} + +footer ul { + color: rgb(105,105,105); + line-height: 40px; + text-decoration: none; +} + +.bottom-footer{ + background-color: rgb(253, 70, 70); + +} + +/* ---- layout ---- */ + +.header-top { + height:70px; + position:sticky; + position: -webkit-sticky; + top:0; + background-color: white; + padding:20px 30px; + +} + +#site-footer { + color: white; + padding: 60px 0; + background: #111; +} + +#site-main { + margin-bottom: 60px; +} + +.container { + margin: 0 20px; +} + +section { + margin-bottom: 20px; + padding-left: 30px; + padding-right: 30px; +} + +.section1 { + padding-top:50px; + padding-bottom:50px; +} +.section1 p{ +margin-bottom:20px; +} + +.section2{ + +} + +.section2 p{ + margin-bottom:15px; +} + + +.signin-text{ + font-size:13px; +} + +.signin-text a{ + color:#1264a3; +} + +@media (min-width: 768px) { + .container { + max-width: 728px; + margin: 0 auto; + } +} + + + + +/* ---- components ---- */ + +.btn{ + width: 100%; + height:60px; + text-transform:uppercase; + border-radius:5px; + font-size:16px; + border: none; +} + +.button-top { + background-color: #611f69; + color: #fff; + margin-bottom:15px; +} + +.button-footer { + color: #611f69; + background-color: #fff; +} + +img { + /* width: 100%; */ + border: 0; + max-width: 100%; + height: auto; +} + +svg { + margin-left: 20px; + +} + +.slack-logo { + width: 110px; +} + +.burger { + float:right; +} + +.header-signup input { + width:100%; + height:60px; + padding:10px; + border-radius:5px; + border:1px solid #979797; + box-sizing: border-box; + margin-bottom:5px; + font-weight: 700; +} + +/* ---- section ---- */ +