Skip to content

Instantly share code, notes, and snippets.

@1travelintexan

1travelintexan/index.html

Created March 29, 2023 15:51
Show Gist options
  • Save 1travelintexan/291f709026bd742eda91da63086ec9a1 to your computer and use it in GitHub Desktop.
Save 1travelintexan/291f709026bd742eda91da63086ec9a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<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" />
<!-- link the Font Awesome stylesheet - CDN -->
<link
href="https://use.fontawesome.com/releases/v5.0.1/css/all.css"
rel="stylesheet"
/>
<!-- link your styles -->
<link rel="stylesheet" href="./stylesheets/style.css" />
<link rel="icon" type="image/x-icon" href="./images/slack-icon.png" />
<title>Slack is your digital HQ | Slack</title>
</head>
<body>
<nav>
<div>
<img src="./images/slack-logo.png" alt="Slack logo" id="slack-logo" />
<ul id="nav-links">
<li>
<a href="#">Product</a>
</li>
<li>
<a href="#">Solutions</a>
</li>
<li>
<a href="#">Resources</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
</ul>
</div>
<div>
<button>
<img src="./images/icon-search.png" alt="Search icon" class="navs" />
</button>
<button>
<img src="./images/icon-menu.png" alt="Menu icon" class="navs" />
</button>
</div>
<ul hidden>
<li>
<a href="#">Sign in</a>
</li>
<li>
<a href="#">Try for free</a>
</li>
</ul>
</div>
</nav>
<header>
<div>
<h1>Great teamwork starts with a digital HQ</h1>
<p id="slack-banner"><span class="yellow">Slack is free to try</span> for as long as you'd like.</p>
<div class="signup-btn-div">
<button>Sign up with email</button>
<button class="google-btn">
<img src="./images/logo-google.png" alt="Google logo" />
<span>Sign up with Google</span>
</button>
</div>
</div>
<div>
<img src="./images/hero-product-ui.png" alt="Slack app screenshot" class="big-img" />
</div>
</header>
<main>
<section>
<p>Trusted by companies all over the world</p>
<div>
<img src="./images/logo-airbnb.png" alt="Airbnb logo" class="small-img"/>
<img src="./images/logo-nasa.png" alt="NASA logo" class="small-img" />
<img src="./images/logo-uber.png" alt="Uber logo" class="small-img" />
<img src="./images/logo-target.png" alt="Target logo" class="small-img"/>
<img src="./images/logo-nyt.png" alt="New York Times logo" class="small-img"/>
<img src="./images/logo-spotify.png" alt="Spotify logo" />
</div>
</section>
<section>
<div>
<img src="./images/connectedness-mobile.png" alt="connectedness" class="big-img"/>
</div>
<div>
<h2>Bring your team together</h2>
<p>
At the heart of Slack are channels: organized spaces for everyone
and everything you need for work. In channels, it's easier to
connect across departments, offices, time zones and even other
companies.
</p>
<a href="#">
<span>Learn more about channels</span>
</a>
</div>
</section>
<section>
<div>
<h2>Choose how you want to work</h2>
<p>
In Slack, you’ve got all the flexibility to work when, where and how
it’s best for you. You can easily chat, send audio and video clips,
or hop on a huddle to talk things out live.
</p>
<a href="#">
<span>Learn more about flexible communication</span>
</a>
</div>
<div>
<img src="./images/flexibility-mobile.png" alt="flexibility" />
</div>
</section>
<section>
<div>
<img src="./images/speed-mobile.png" alt="speed" />
</div>
<div>
<h2>Move faster with your tools in one place</h2>
<p>
With your other work apps connected to Slack, you can work faster by
switching tabs less. And with powerful tools like Workflow Builder,
you can automate away routine tasks.
</p>
<a href="#">
<span>Learn more about the Slack platform</span>
</a>
</div>
</section>
<section>
<h3>Teams large and small rely on Slack</h3>
<p>
Slack securely scales up to support collaboration at the world’s
biggest companies.
</p>
<div>
<button>Meet Slack for enterprise</button>
<button>Talk to sales</button>
</div>
<ul>
<li>
<p><span>85%</span></p>
<p>
of users say Slack has improved communication
<sup>*</sup>
</p>
</li>
<li>
<p><span>86%</span></p>
<p>
feel their ability to work remotely has improved has improved
<sup>*</sup>
</p>
</li>
<li>
<p><span>88%</span></p>
<p>
feel more connected to their teams*
<sup>*</sup>
</p>
</li>
</ul>
</section>
<section>
<h3>Welcome to your new digital HQ</h3>
<button>Try for free</button>
<button>Talk to sales</button>
</section>
</main>
<footer>
<img src="./images/iso-slack.png" alt="Slack logo" />
<div>
<ul>
<li>WHY SLACK?</li>
<li>Slack vs. Email</li>
<li>Channels</li>
<li>Engagement</li>
<li>Scale</li>
<li>Watch the Demo</li>
</ul>
<ul>
<li>PRODUCT</li>
<li>Features</li>
<li>Integrations</li>
<li>Enterprise</li>
<li>Solutions</li>
<li>Releases</li>
</ul>
<ul>
<li>PRICING</li>
<li>Plans</li>
<li>Paid vs. Free</li>
</ul>
<ul>
<li>COMPANY</li>
<li>About Us</li>
<li>Leadership</li>
<li>Investor Relations</li>
<li>News</li>
<li>Media Kit</li>
<li>Careers</li>
</ul>
</div>
<ul>
<li>Status</li>
<li>Privacy</li>
<li>Terms</li>
<li>Cookie Preferences</li>
<li>Contact Us</li>
<li>Change Region</li>
<li>Download Slack</li>
</ul>
<hr />
<ul>
<li>
<i class="fab fa-twitter"></i>
</li>
<li>
<i class="fab fa-facebook"></i>
</li>
<li>
<i class="fab fa-youtube"></i>
</li>
<li>
<i class="fab fa-linkedin"></i>
</li>
</ul>
<div>
<small>
&copy; 2022 Slack Technologies, LLC, a Salesforce company. All rights
reserved. Various trademarks held by their respective owners.
</small>
</div>
</footer>
</body>
</html>
Raw
style.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
background purple: #540B51
background ivory: #F3EAE2
button blue: #4285F4
titles black: #191817
paragraph black: #000000
paragraph yellow: #ECB12F
links blue: #2E71A6
footer links grey: #454245
*/
body {
background-color: #540b51;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.small-img {
width: 50px;
}
#nav-links {
display: none;
}
#slack-logo {
height: 4rem;
}
nav {
display: flex;
width: 100vw;
align-items: center;
justify-content: space-between;
padding: 20px;
}
img {
max-width: 80vw;
}
header {
color: white;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
h1 {
font-size: 5rem;
}
.yellow {
color: rgb(231, 231, 22);
}
#slack-banner {
font-size: 2rem;
}
.google-btn img {
height: 3rem;
background-color: white;
align-self: flex-start;
margin-right: auto;
}
.google-btn {
background-color: #4285f4;
color: aliceblue;
display: flex;
align-items: center;
justify-content: center;
}
.signup-btn-div {
display: flex;
flex-direction: column;
}
.signup-btn-div button {
height: 3.5rem;
width: 80vw;
margin: 10px;
font-size: 1.5rem;
text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
#nav-links {
display: flex;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment