Skip to content

done #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
natekhchan wants to merge 2 commits into
base: master
Choose a base branch
from
Open

done #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07dc2e1
done
natekhchan Jul 21, 2024
4ec9300
done
natekhchan Jul 21, 2024
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
0 starter_code/images/Slack.ico → images/Slack.ico
View file
Open in desktop
File renamed without changes.
0 starter_code/images/airbnb-logo.png → images/airbnb-logo.png
View file
Open in desktop
File renamed without changes
0 starter_code/images/capital-one-logo.png → images/capital-one-logo.png
View file
Open in desktop
File renamed without changes
0 starter_code/images/harvard-logo.png → images/harvard-logo.png
View file
Open in desktop
File renamed without changes
0 starter_code/images/home_talking.png → images/home_talking.png
View file
Open in desktop
File renamed without changes
0 starter_code/images/iso-slack.png → images/iso-slack.png
View file
Open in desktop
File renamed without changes
0 ...er_code/images/los-angeles-times-logo.png → images/los-angeles-times-logo.png
View file
Open in desktop
File renamed without changes
0 starter_code/images/oracle-logo.png → images/oracle-logo.png
View file
Open in desktop
File renamed without changes
0 starter_code/images/slack-logo.png → images/slack-logo.png
View file
Open in desktop
File renamed without changes
0 starter_code/images/ticketmaster-logo.png → images/ticketmaster-logo.png
View file
Open in desktop
File renamed without changes
0 starter_code/images/us-flag.png → images/us-flag.png
View file
Open in desktop
File renamed without changes
178 changes: 178 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,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>
178 changes: 178 additions & 0 deletions index.html.bak.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,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>
Loading