Created
August 17, 2022 10:36
-
-
Save josecarneiro/cbfb007cc8bc440cb4ff2b5cdb8965d2 to your computer and use it in GitHub Desktop.
lab-css-flexbox-slack proposed solution
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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" | |
/> | |
<link rel="preconnect" href="https://fonts.googleapis.com" /> | |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
<link | |
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Playfair+Display:wght@700&display=swap" | |
rel="stylesheet" | |
/> | |
<!-- link your styles --> | |
<link rel="stylesheet" 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> | |
<span class="burger-icon"></span> | |
</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> | |
<input text="email" placeholder="Email Address" /> | |
<button type="button" name="button" class="button-primary"> | |
GET STARTED | |
</button> | |
<p>Already using Slack? <a href="#">Sign in</a></p> | |
</header> | |
<main> | |
<div> | |
<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 class="button-hollow">DISCOVER WHY</button> | |
<div class="customer-list"> | |
<img src="./images/airbnb-logo.png" alt="" /> | |
<img src="./images/capital-one-logo.png" alt="" /> | |
<img src="./images/harvard-logo.png" alt="" /> | |
<img src="./images/los-angeles-times-logo.png" alt="" /> | |
<img src="./images/oracle-logo.png" alt="" /> | |
<img src="./images/ticketmaster-logo.png" alt="" /> | |
</div> | |
</div> | |
<div> | |
<p>Try it for free</p> | |
<p>Already using Slack? <a href="">Sign in</a></p> | |
<button type="button" name="button" class="button-primary"> | |
GET STARTED | |
</button> | |
</div> | |
</main> | |
<footer> | |
<div> | |
<div class="footer-image-container"> | |
<img src="./images/iso-slack.png" alt="" /> | |
</div> | |
<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> | |
<div> | |
<ul> | |
<li>Status</li> | |
<li>Privacy & Terms</li> | |
<li>Contact Us</li> | |
</ul> | |
<div> | |
<div class="footer-language-selector"> | |
<img src="./images/us-flag.png" alt="American English" /> | |
<span>English (US)</span> | |
<i class="fas fa-chevron-down"></i> | |
</div> | |
<div class="social-icon-container"> | |
<i class="fab fa-twitter"></i> | |
<i class="fab fa-facebook-f"></i> | |
<i class="fab fa-youtube"></i> | |
</div> | |
</div> | |
</div> | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
background-grey: #F4F3F4; | |
button-purple: #192592 | |
main-titles dark-grey: #2C303F; | |
paragraph grey: #5b5e6d; | |
nav grey: #5b5e6d; | |
*/ | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'Noto Sans', sans-serif; | |
color: #5b5e6d; | |
margin: 0; | |
line-height: 1.75; | |
} | |
a { | |
color: #192592; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-family: 'Playfair Display', serif; | |
color: #2c303f; | |
line-height: 1.25; | |
margin-top: 0; | |
} | |
h1 { | |
font-size: 40px; | |
margin-bottom: 8px; | |
} | |
input { | |
font-family: inherit; | |
padding: 16px; | |
border-radius: 4px; | |
border: 1px solid #b3b6c7; | |
} | |
.button-primary, | |
.button-hollow { | |
font-family: inherit; | |
font-weight: bold; | |
padding: 16px; | |
border-radius: 4px; | |
} | |
.button-primary { | |
border: none; | |
background-color: #192592; | |
color: white; | |
} | |
.button-hollow { | |
border: solid 1px #192592; | |
color: #192592; | |
background-color: white; | |
} | |
nav { | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
padding: 16px; | |
background-color: white; | |
box-shadow: 0px 2px 3px 0px #c8cde0; | |
} | |
nav ul { | |
display: none; | |
} | |
nav img { | |
width: 80px; | |
display: block; | |
} | |
header { | |
display: flex; | |
flex-direction: column; | |
gap: 16px; | |
padding: 32px; | |
} | |
header img { | |
order: 1; | |
} | |
main { | |
display: flex; | |
flex-direction: column; | |
padding: 32px; | |
background-color: #f4f3f4; | |
} | |
main > div { | |
display: flex; | |
flex-direction: column; | |
} | |
.customer-list { | |
display: flex; | |
flex-direction: column; | |
} | |
@media (min-width: 767px) { | |
.customer-list { | |
flex-direction: row; | |
flex-wrap: wrap; | |
} | |
.customer-list img { | |
flex-basis: 50%; | |
} | |
.customer-list img:nth-child(2n) { | |
border-left: 1px solid #ebebeb; | |
} | |
} | |
@media (min-width: 900px) { | |
.customer-list { | |
flex-direction: row; | |
flex-wrap: wrap; | |
} | |
.customer-list img { | |
flex-basis: 33%; | |
} | |
.customer-list img:nth-child(2n) { | |
border-left: none; | |
} | |
.customer-list img:nth-child(3n), | |
.customer-list img:nth-child(3n - 1) { | |
border-left: 1px solid #ebebeb; | |
} | |
} | |
main img { | |
padding: 40px 0; | |
height: 120px; | |
object-fit: contain; | |
border-bottom: 1px solid #ebebeb; | |
} | |
footer > div:first-child { | |
display: flex; | |
flex-wrap: wrap; | |
padding: 16px; | |
align-items: flex-start; | |
} | |
footer > div:first-child img { | |
width: 100px; | |
display: block; | |
} | |
.footer-image-container { | |
flex-basis: 100%; | |
} | |
footer > div:first-child ul { | |
list-style: none; | |
padding: 0; | |
margin: 0; | |
flex-basis: 50%; | |
margin-bottom: 16px; | |
} | |
footer > div:first-child ul li { | |
padding: 8px 0; | |
} | |
footer > div:first-child ul li:first-child { | |
font-weight: bold; | |
} | |
@media (min-width: 767px) { | |
footer > div:first-child { | |
flex-wrap: nowrap; | |
} | |
.footer-image-container, | |
footer > div:first-child ul { | |
flex: 1; | |
} | |
} | |
footer > div:last-child { | |
background-color: #f4f3f4; | |
padding: 16px; | |
font-weight: bold; | |
} | |
footer > div:last-child ul { | |
display: flex; | |
justify-content: center; | |
list-style: none; | |
padding: 0; | |
margin: 0; | |
gap: 32px; | |
margin-bottom: 16px; | |
} | |
.footer-language-selector { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
margin-bottom: 16px; | |
} | |
.footer-language-selector img { | |
display: block; | |
width: 32px; | |
margin-right: 16px; | |
} | |
.social-icon-container { | |
display: flex; | |
justify-content: center; | |
gap: 32px; | |
} | |
.burger-icon { | |
display: block; | |
width: 32px; | |
height: 4px; | |
background-color: grey; | |
} | |
.burger-icon::before, | |
.burger-icon::after { | |
content: ''; | |
display: block; | |
width: 32px; | |
height: 4px; | |
background-color: grey; | |
} | |
.burger-icon::before { | |
transform: translateY(-10px); | |
} | |
.burger-icon::after { | |
transform: translateY(6px); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment