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
108 changes: 61 additions & 47 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,37 @@
<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 href="https://fonts.googleapis.com/css?family=Heebo:400,700" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="./stylesheets/reset.css"> -->
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you commented out the reset file so the reset isn't taking place.

<link rel="stylesheet" type="text/css" 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 class="nav-parent">
<div class="nav-bar">
<div class="logo">
<img id="nav-logo" src="./images/slack-logo.png" alt="slack_logo">
</div>
<div>
<ul>
<li>Why Slack?</li>
<li>Pricing</li>
<li>About Us</li>
<li>Your Workspaces</li>
</ul>
</div>
</div>
</nav>
<header>
<header class="header container">
<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>
<p id="last-p">Already using Slack? <a href="#">Sign in</a></p>
</header>
<main>
<div>
<div class="clients">
<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>
Expand All @@ -38,47 +47,52 @@ <h2>You´re in good company</h2>
<img src="./images/oracle-logo.png" alt="">
<img src="./images/ticketmaster-logo.png" alt="">
</div>
<div>
<p>Try it for free</p>
<div class="try-free">
<h3>Try it for free</h3>
<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 class="companies">
<div class="mid-logo">
<img src="./images/iso-slack.png" alt="">
</div>
<div class="ul-parent">
<ul>
<li class="li-bold">COMPANY</li>
<li>About Us</li>
<li>Careers</li>
<li>Blog</li>
<li>Press</li>
<li>Brand Guidelines</li>
</ul>
<ul>
<li class="li-bold">PRODUCT</li>
<li>Why Slack?</li>
<li>Enterprise</li>
<li>Customer Stories</li>
<li>Pricing</li>
<li>Security</li>
</ul>
<ul>
<li class="li-bold">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 class="li-bold">EXTRAS</li>
<li>Podcast</li>
<li>Slack Shop</li>
<li>Slack at Work</li>
<li>Slack Fund</li>
</ul>
</div>
</div>
<div>
<ul>
Expand Down
43 changes: 43 additions & 0 deletions stylesheets/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
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;
}
182 changes: 182 additions & 0 deletions stylesheets/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,185 @@ main-titles dark-grey: #2C303F;
paragraph grey: #5b5e6d;
nav grey: #5b5e6d;
*/

/* ITERATION 1 */

/* Extra Small Screen (width < 768px */

body {
margin: 0;
font-family: 'Heebo', sans-serif;
padding: 20px;
}
img {
max-width: 100%;
}

@media (max-width: 768px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need to put all your code inside this @Mediaquery. Just specific things that only are different for that screen size. Please if you have questions regarding how to use media queries let us know.


body {
margin: 0;
font-family: 'Heebo', sans-serif;
padding: 20px;
display: flex;
flex-direction: column;
}

.container {
width: 100%;
}

.nav-bar ul {
/* visibility: hidden; */
display: inline-flex;
list-style: none;
margin: 0;
color: #5b5e6d;
}
.nav-bar ul li {
margin: 0 5px;
}

.nav-parent {
width: 100%;
padding: 0;
height: 70px;
background-color: #fff;
z-index: 1000;
top: 0;
left: 0;
position: fixed;
border-bottom: none;
display: flex;
flex-direction: column;
align-items: center;
}

.nav-bar {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0;
width: 95%;
}
.logo {
line-height: 0;
}

#nav-logo {
height: auto;
width: 100px;
}
.header {
/* display: flex; */
/* padding: 90 10px 0; */
text-align: center;
color: #5b5e6d;
}

.header h1 {
color: #2C303F;
}

.header p {
text-align: left;
padding: 0 20px;
margin-bottom: 25px;
}

#last-p {
text-align: center;
}

.header button, .try-free button {
font-size: 1rem;
font-weight: 700;
border-radius: 5px;
width: 90%;
height: 40px;
padding: 10px;
background-color: #192592;
color: #fff;
text-transform: capitalize;
}

.clients {
width: 100%;
color: #2C303F;
background-color: #F4F3F4;
text-align: center;
}

.clients h2 {
color: #2C303F;
text-align: center;
padding-top: 15px;
}

.clients button {
font-size: 1rem;
font-weight: 700;
border-radius: 5px;
width: 90%;
height: 40px;
padding: 10px;
background-color: #fff;
border: 1px solid #192592;
color: #192592;
text-transform: capitalize;
}

.clients p {
padding: 10px 20px;
text-align: left;

}

.clients img {
display: block;
max-width: 50%;
margin: 50px auto;
padding-bottom: 20px;
}
.try-free, .try-free p {
text-align: center;
color: #5b5e6d;
}

.try-free h3 {
font-weight: 700;
font-size: 1.2em;
color: #2C303F;
}
.companies {
display: flex;
flex-direction: column;
}

.companies ul li {
list-style-type: none;
color: #5b5e6d;
}

.li-bold {
margin: 0 0 10px;
font-weight: 700;
color: #2C303F;
}
.ul-parent {
/* margin-right: 10px; */
display: flex;
flex-direction: row;
Copy link
Collaborator

@tawebbcn tawebbcn Apr 8, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the default value for flex-direction is already row.

/* align-items: flex-start; */
flex-wrap: wrap;
}
.ul-parent ul {
display: flex;
flex-direction: column;
width: 40%;
justify-content: center;
}

}