-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy pathindex.html
More file actions
178 lines (171 loc) · 6.02 KB
/
index.html
File metadata and controls
178 lines (171 loc) · 6.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!-- Slackbox Coded by Nathan Chan-->
<!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 CDN -->
<link
href="https://use.fontawesome.com/releases/v5.0.1/css/all.css"
rel="stylesheet"
/>
0
<!-- link your styles -->
<link rel="stylesheet" href="./stylesheets/style.css" />
<title>Where work happens | Slack</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
const hamburger = document.querySelector('.hamburger');
const navItems = document.querySelector('.nav-items');
const body = document.body;
hamburger.addEventListener('click', function() {
navItems.classList.toggle('show');
body.classList.toggle('menu-open');
});
});
</script>
</head>
<body>
<nav class="navbar">
<img class="slack-logo" src="./images/slack-logo.png" alt="slack_logo" />
<div class="hamburger">☰</div>
<ul class="nav-items">
<li>Why Slack?</li>
<li>Pricing</li>
<li>About Us</li>
<li class="workspace-link">Your Workspaces</li>
</ul>
</nav>
<header class="header-section">
<div class="container-1">
<img class="home-talking-full-width" src="./images/home_talking.png" alt="home_work_happening" />
</div>
<div class="container-2">
<h1 class="where-work-happens-text">Where Work Happens</h1>
<p class="slack-quote">
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>
<div class="input-button-container">
<input type="email" class="email-input" placeholder="Email address">
<button class="button-class" type="button" name="button">GET STARTED</button>
</div>
<p class="already-using-slack">Already using Slack? <a href="#">Sign in</a>.</p>
<img class="home-talking" src="./images/home_talking.png" alt="home_work_happening" />
</div>
</header>
<main>
<div class="grey-section">
<h2 class="h2-quote">You're in good company</h2>
<p class="good-company-description">
Millions of people around the world have already made Slack the place
where their work happens.
</p>
<button>DISCOVER WHY</button>
<div class="logo-section">
<div class="logo-container">
<div class="logo-section-container">
<img class="logo" src="./images/airbnb-logo.png" alt="AirBNB Logo" />
</div>
<div class="logo-section-container">
<img class="logo" src="./images/capital-one-logo.png" alt="Capital One Logo" />
</div>
<div class="logo-section-container">
<img class="logo" src="./images/harvard-logo.png" alt="Harvard Logo" />
</div>
<div class="logo-section-container">
<img class="logo" src="./images/los-angeles-times-logo.png" alt="LA Times Logo" />
</div>
<div class="logo-section-container"><img class="logo" src="./images/oracle-logo.png" alt="Oracle Logo" />
</div>
<div class="logo-section-container">
<img class="logo" src="./images/ticketmaster-logo.png" alt="Ticketmaster Logo" />
</div>
</div>
</div>
</div>
</div>
<div class="bottom-section">
<div class="left-column">
<h2 class="h2-quote">Try it for free</h2>
<p class="already-using-slack-2">Already using Slack? <a class="sign-in" href="#">Sign in</a>.</p>
</div>
<div class="right-column">
<input type="email" class="email-input" placeholder="Email address">
<button type="button" class="button-class" name="button">GET STARTED</button>
</div>
</div>
</main>
<footer class="footer">
<img class="iso-slack" src="./images/iso-slack.png" alt="Slack logo" />
<div class="footer-grid">
<div class="footer-column">
<ul class="company-links">
<li class="footer-heading">COMPANY</li>
<li>About Us</li>
<li>Careers</li>
<li>Blog</li>
<li>Press</li>
<li>Brand Guidelines</li>
</ul>
</div>
<div class="footer-column">
<ul class="product-links">
<li class="footer-heading">PRODUCT</li>
<li>Why Slack?</li>
<li>Enterprise</li>
<li>Customer Stories</li>
<li>Pricing</li>
<li>Security</li>
</ul>
</div>
<div class="footer-column">
<ul class="resources-links">
<li class="footer-heading">RESOURCES</li>
<li>Download</li>
<li>Help Center</li>
<li>Guides</li>
<li>Events</li>
<li>App Directory</li>
<li>API</li>
</ul>
</div>
<div class="footer-column">
<ul class="extras-links">
<li class="footer-heading">EXTRAS</li>
<li>Podcast</li>
<li>Slack Shop</li>
<li>Slack at Work</li>
<li>Slack Fund</li>
</ul>
</div>
</div>
</footer>
<div class="subfooter">
<div class="subfooter-left">
<ul>
<li>Status</li>
<li>Privacy & Terms</li>
<li>Contact Us</li>
</ul>
</div>
<div class="subfooter-right">
<div class="language-selector">
<img src="./images/us-flag.png" alt="US Flag" />
<span>English (US)</span>
<i class="fas fa-chevron-down"></i>
</div>
<div class="social-icons">
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>