Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added images/menu-desplegable.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
284 changes: 192 additions & 92 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,100 +2,200 @@
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://use.fontawesome.com/1fb0eb3889.js"></script>
<title>Where work happens | Slack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://use.fontawesome.com/1fb0eb3889.js"></script>
<link rel="stylesheet" href="stylesheets/style.css">
<title>Where work happens | Slack</title>
</head>

<body>
<nav>
<img src="./images/slack-logo.png" alt="slack_logo">
<ul>
<li>Why Slack?</li>
<li>Pricing</li>
<li>About Us</li>
<li>Your Workspaces</li>
</ul>
</nav>
<header>
<img src="./images/home_talking.png" alt="home_work_happening">
<h1>Where Work Happens</h1>
<p>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.</p>
<button type="button" name="button">GET STARTED</button>
<p>Already using Slack? <a href="#">Sign in</a></p>
</header>
<main>
<div>
<h2>You´re in good company</h2>
<p>Millions of people around the world have already made Slack the place where their work happens.</p>
<button>DISCOVER WHY</button>
<img src="./images/airbnb-logo.png" alt="">
<img src="./images/capital-one-logo.png" alt="">
<img src="./images/harvard-logo.png" alt="">
<img src="./images/los-angeles-times-logo.png" alt="">
<img src="./images/oracle-logo.png" alt="">
<img src="./images/ticketmaster-logo.png" alt="">
</div>
<div>
<p>Try it for free</p>
<p>Already using Slack? <a href="">Sign in</a></p>
<button type="button" name="button">GET STARTED</button>
</div>
</main>
<footer>
<div>
<img src="./images/iso-slack.png" alt="">
<ul>
<li>COMPANY</li>
<li>About Us</li>
<li>Careers</li>
<li>Blog</li>
<li>Press</li>
<li>Brand Guidelines</li>
</ul>
<ul>
<li>PRODUCT</li>
<li>Why Slack?</li>
<li>Enterprise</li>
<li>Customer Stories</li>
<li>Pricing</li>
<li>Security</li>
</ul>
<ul>
<li>RESOURCES</li>
<li>Download</li>
<li>Help Center</li>
<li>Guides</li>
<li>Events</li>
<li>App Directory</li>
<li>API</li>
</ul>
<ul>
<li>EXTRAS</li>
<li>Podcast</li>
<li>Slack Shop</li>
<li>Slack at Work</li>
<li>Slack Fund</li>
</ul>
</div>
<div>
<ul>
<li>Status</li>
<li>Privacy & Terms</li>
<li>Contact Us</li>
</ul>
<div>
<img src="./images/us-flag.png" alt="">
<span>English (US)</span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</div>
</div>
</footer>
<nav>
<img src="images/slack-logo.png" alt="Slack logo" class="navbar-logo">
<img src="images/menu-desplegable.png" alt="Menu button" class="navbar-button">
</nav>
<header>
<h1>Whatever work you do, you can do it in Slack</h1>
<p>Slack gives your team the power and alignment you need to do your best work.</p>

<form action="" method="post" class="header-form">
<input type="text" name="nombre" placeholder="Your work email" class="form-placeholder">
<input type="submit" value="TRY FOR FREE" class="btn">
</form>
<footer>
<p class="parraf-link">Already using Slack? <a href="#0">Sign in</a></p>
</footer>
</header>
<main>
<section>
<header>
<h3>Put collaborations at your fingertips</h3>
</header>
<article>
<h4><i></i>Organize conversations</h4>
<img src="" alt="functional description">
</article>
<article>
<h4><i></i>Share files and documents</h4>
<img src="" alt="functional description">
</article>
<article>
<h4><i></i>Find everything in the archive</h4>
<img src="" alt="functional description">
</article>
<article>
<h4><i></i>Integrate your tools</h4>
<img src="" alt="functional description">
</article>
<article>
<h4><i></i>Talk it out face-to-face</h4>
<img src="" alt="functional description">
</article>
<footer>
<a href="#0">See the demo -></a>
</footer>
</section>
<section>
<header>
<h3>Efficient teamwork for every enterprise</h3>
<p>Big companies save time with Slack by securely collaborating across teams, departments, offices and countries.</p>
<a href="#0">Slack for enterprise -></a>
</header>
<img src="" alt="functional description">
</section>
<section>
<header>
<h3>You’re in good company</h3>
<p>Teams of every size, shape and kind have already made Slack the place where their work happens.</p>
<a href="#0">View all customers stories -></a>
</header>
<section>
<article>
<img src="" alt="">
<a href="#0"><img src="" alt="business logo"></a>
<p>Connecting teams to support 50 million customers around the world</p>
<a href="#0">-></a>
</article>
<article>
<img src="" alt="">
<a href="#0"><img src="" alt="business logo"></a>
<p>Mission-critical sales work at Lyft Business</p>
<a href="#0">-></a>
</article>
<article>
<img src="" alt="">
<a href="#0"><img src="" alt="business logo"></a>
<p>eCommerce platform deploys super bot to enable glitch-free purchases</p>
<a href="#0">-></a>
</article>
<article>
<img src="" alt="">
<a href="#0"><img src="" alt="business logo"></a>
<p>Two companies elevate customer service with Shared Channels in Slack</p>
<a href="#0">-></a>
</article>
</section>
<footer>
<img src="" alt="business logo">
<img src="" alt="business logo">
<img src="" alt="business logo">
<img src="" alt="business logo">
<img src="" alt="business logo">
<img src="" alt="business logo">
</footer>
</section>
<section>
<header>
<h3>Get more out of Slack</h3>
</header>
<article>
<img src="" alt="">
<p>Blog</p>
<h4>Today is a god day</h4>
<a href="#0">READ STORY -></a>
</article>
<article>
<p src="" alt="">
<p>Tip</p>
<h4>Synce your Slack status with your Outlook Calendar</h4>
<a href="#0">LEARN MORE -></a>
</article>
<article>
<img src="" alt="">
<p>Blog</p>
<h4>In case you missed it: drafts, dark mode and sending emails to Slack</h4>
<a href="#0">LEARN MORE -></a>
</article>
</section>
<section>
<h3>Say hello to the collaboration hub</h3>
<button>TRY SLACK FOR FREE</button>
</section>
</main>
<footer>
<section>
<img src="" alt="Slack logo">
<section>
<h4>PRODUCT</h4>
<ul>
<li><a href="#0">Why Slack?</a></li>
<li><a href="#0">Enterprise</a></li>
<li><a href="#0">Security</a></li>
<li><a href="#0">custumer Stories</a></li>
<li><a href="#0">Pricing</a></li>
<li><a href="#0">Slack demo</a></li>
</ul>
</section>
<section>
<h4>SLACK FOR TEAMS</h4>
<ul>
<li><a href="#0">Engineering</a></li>
<li><a href="#0">IT</a></li>
<li><a href="#0">Custumer Support</a></li>
<li><a href="#0">Sales</a></li>
<li><a href="#0">Marketing</a></li>
<li><a href="#0">Project Management</a></li>
<li><a href="#0">Human Resources</a></li>
</ul>
</section>
<section>
<h4>RESOURCES</h4>
<ul>
<li><a href="#0">Download Slack</a></li>
<li><a href="#0">eBooks & Reports</a></li>
<li><a href="#0">App Directory</a></li>
<li><a href="#0">API</a></li>
<li><a href="#0">Help center</a></li>
<li><a href="#0">Slack tips</a></li>
<li><a href="#0">Partners</a></li>
</ul>
</section>
<section>
<h4>COMPANY</h4>
<ul>
<li><a href="#0">About us</a></li>
<li><a href="#0">Leadership</a></li>
<li><a href="#0">Blog</a></li>
<li><a href="#0">News</a></li>
<li><a href="#0">Media Kit</a></li>
<li><a href="#0">Careers</a></li>
</ul>
</section>
</section>
<nav>
<ul>
<li><a href="#0">Status</a></li>
<li><a href="#0">Privacy & Terms</a></li>
<li><a href="#0">Contact us</a></li>
<li><a href="#0"><i></i>Change Region</a></li>
<li><a href="#0"><i></i></a></li>
<li><a href="#0"><i></i></a></li>
<li><a href="#0"><i></i></a></li>
<li><a href="#0"><i></i></a></li>
</ul>
</nav>
</footer>
</body>

</html>
</html>
Loading