Skip to content

BCN 04/19 - Gus #8

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
Gusbe wants to merge 2 commits into
base: master
Choose a base branch
from
Open

BCN 04/19 - Gus #8

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
230efd3
Done first iteration
Gusbe Apr 4, 2019
127b41b
Fixed a repeated id
Gusbe Apr 5, 2019
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
116 changes: 69 additions & 47 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,43 @@
<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 rel="stylesheet" href="./stylesheets/style.css">
<script src="https://use.fontawesome.com/1fb0eb3889.js"></script>
<title>Where work happens | Slack</title>
</head>

<body>


<nav>
<img src="./images/slack-logo.png" alt="slack_logo">
<img src="./images/slack-logo.png" alt="slack_logo" id="logo">
<ul>
<li>Why Slack?</li>
<li>Pricing</li>
<li>About Us</li>
<li>Your Workspaces</li>
</ul>
<div id="menu">
<div class="bar-menu"></div>
<div class="bar-menu"></div>
<div class="bar-menu"></div>
</div>
</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>
<p id="why">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 class="sign-in">Already using Slack? <a href="#">Sign in</a></p>
<img src="./images/home_talking.png" alt="home_work_happening">
</header>


<main>
<div>


<div id="companies">
<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,61 +52,69 @@ <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>
<p>Already using Slack? <a href="">Sign in</a></p>
<div id="pre-footer">
<p id="try">Try it for free</p>
<p class="sign-in">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 id="lists">
<ul>
<li class="header-li">COMPANY</li>
<li>About Us</li>
<li>Careers</li>
<li>Blog</li>
<li>Press</li>
<li>Brand Guidelines</li>
</ul>
<ul>
<li class="header-li">PRODUCT</li>
<li>Why Slack?</li>
<li>Enterprise</li>
<li>Customer Stories</li>
<li>Pricing</li>
<li>Security</li>
</ul>
<ul>
<li class="header-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 class="header-li">EXTRAS</li>
<li>Podcast</li>
<li>Slack Shop</li>
<li>Slack at Work</li>
<li>Slack Fund</li>
</ul>
</div>
</div>
<div>
<div id="links">
<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 id="lang">
<img src="./images/us-flag.png" alt="">
<span>English (US)</span>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<div id="social">
<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>
</div>
</footer>
Expand Down
219 changes: 219 additions & 0 deletions stylesheets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,222 @@ main-titles dark-grey: #2C303F;
paragraph grey: #5b5e6d;
nav grey: #5b5e6d;
*/

/* ---- reset ---- */

@tawebbcn tawebbcn Apr 8, 2019

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset at the top, good


html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

body {
margin: 0 0px;
padding: 0;
display: flex;
flex-direction: column;
}

nav {

@tawebbcn tawebbcn Apr 8, 2019

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This si not reset anymore, maybe you could add a breaking comment to specify that

display: flex;
flex-direction: row;

@tawebbcn tawebbcn Apr 8, 2019

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

By default flex-direction is row

justify-content: space-between;
background-color: white;
border-bottom: lightgrey 1px solid;
position: fixed;
width: 100%;
}

#logo {
height: 50px;
margin: 5px 20px;
}

nav ul{
display: none;
}

#menu {
margin: 10px;
}
.bar-menu {

@tawebbcn tawebbcn Apr 8, 2019

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Try to be consistent with the format. If you put a blank space between the rules, put it all the time

width: 35px;
height: 5px;
background-color: #5b5e6d;
margin: 5px 0;
}

header {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 100px 20px 0px 20px;
}

h1 {
margin-top: 10px;
font-size: 50px;
color: #2C303F;
}

#why{
color: #5b5e6d;
font-size: 18px;
font-family: helvetica;
}

header button, #pre-footer button{
background-color: #192592;
color: white;
font-family: helvetica;
font-size: 15px;
font-weight: bold;
padding: 20px 0;
border-radius: 5px;
margin-top: 25px;
}

#sign-in {
color: #5b5e6d;
font-size: 15px;
font-family: helvetica;
align-self: center;
margin-top: 15px;
}

header img {
width: 100%;
margin-top: 50px;
}

#companies{
display: flex;
flex-direction: column;
justify-content: center;
background-color: #F4F3F4;
margin-top: 100px;
padding-bottom: 40px;
}

#companies h2{
text-align: center;
margin-top: 60px;
margin-bottom: 0px;
font-size: 30px;
}

#companies p{
text-align: center;
color: #5b5e6d;
font-size: 18px;
font-family: helvetica;
padding: 20px;
}

#companies button{
margin: 35px 20px 40px 20px;
background-color: white;
color: #192592;
font-family: helvetica;
font-size: 15px;
font-weight: bold;
padding: 20px 0;
border-radius: 5px;
border-color: #192592;
margin-top: 25px;
}

#companies img {
height: 70px;
align-self: center;
border-bottom: lightgray 1px solid; /********To Improve************/
padding-bottom: 30px;
margin-bottom: 30px;
}

#pre-footer {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20px;
margin-right: 20px;

}

#try {
margin-top: 40px;
margin-bottom: 0px;
font-size: 30px;
font-weight: bold;
text-align: center;
}

#lists {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.header-li{
font-weight: bold;
}

li{
list-style-type: none;
color: #5b5e6d;
font-size: 17px;
font-family: helvetica;
margin: 15px;
width: 150px;
}

#links {
background-color: #F4F3F4;
}

#links ul {
display: flex;
flex-direction: row;

@tawebbcn tawebbcn Apr 8, 2019

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

same here

justify-content: center;
font-weight: bold;
}

#links li {
text-align: center;
}

#lang {
display: flex;
flex-direction: row;
justify-content: center;
}

#lang * {
margin: 5px;
}

#lang span, #lang i{
padding: 5px;
}

#lang img{
height: 30px;
}

#lang span {
color: #5b5e6d;
font-size: 17px;
font-family: helvetica;
font-weight: bold;
}

#social {
display: flex;
flex-direction: row;
justify-content: center;
}

#social i {
margin: 20px 15px;
}