Skip to content

FT Levi #2

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
LeviMilli wants to merge 1 commit into
base: master
Choose a base branch
from
Open

FT Levi #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"livePreview.defaultPreviewPath": "c:\\Users\\Tiltlord\\root\\Week1\\Day5\\lab-css-flexbox-slack\\starter_code\\index.html"
}
93 changes: 60 additions & 33 deletions starter_code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,74 +12,96 @@
/>

<!-- link your styles -->
<link rel="stylesheet" href="./stylesheets/style.css" />
<link rel="stylesheet" href= "stylesheets/style.css" />
<title>Where work happens | Slack</title>
</head>

<div class="entire">
<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>
<div class="navbar space" >
<img src="./images/slack-logo.png" alt="slack_logo" class="slack space" />
<div class="dropdown">
<button class="dropbtn space">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Why Slack?</a>
<a href="#">Pricing</a>
<a href="#">About Us</a>
<a href="#">Your Workspaces</a>
</div>
</div>
</div>

</nav>
<div class="entire-rest">
<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>
<button type="button" name="button">GET STARTED</button>
<p>Already using Slack? <a href="#">Sign in</a></p>
<p class="pbutton">Already using Slack? <a href="#">Sign in</a></p>
<div class="split">
<button type="button" name="button" class="started">GET STARTED</button>
<img src="./images/home_talking.png" alt="home_work_happening" class="center-pic"/>
</div>



</header>
<main>
<div>
<main>
<div class="gray">

<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>
<img src="./images/airbnb-logo.png" alt="" />
<img src="./images/capital-one-logo.png" alt="" />
<button class="discover">DISCOVER WHY</button>
<div class="logo-contain">
<img src="./images/airbnb-logo.png" alt="" class="size"/>
<img src="./images/capital-one-logo.png" alt="" class="size"/>
<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="" />
<img src="./images/los-angeles-times-logo.png" alt="" class="size"/>
<img src="./images/oracle-logo.png" alt="" class="size"/>
<img src="./images/ticketmaster-logo.png" alt="" class="size"/>
</div>
<div>
<p>Try it for free</p>
<p>Already using Slack? <a href="">Sign in</a></p>
<button type="button" name="button">GET STARTED</button>

</div>
<div class="logo-contain">
<p class="pbutton">Try it for free</p>
<p class="pbutton">Already using Slack? <a href="">Sign in</a></p>
<button type="button" name="button" class="started">GET STARTED</button>
</div>
</main>
<footer>
<div>
<img src="./images/iso-slack.png" alt="" />
<img src="./images/iso-slack.png" alt="" />
<div class="bottom">

<div class="firstBottom">
<ul>
<li>COMPANY</li>
<li><b>COMPANY</b></li>
<li>About Us</li>
<li>Careers</li>
<li>Blog</li>
<li>Press</li>
<li>Brand Guidelines</li>
</ul>
<ul>
<li>PRODUCT</li>
<li><b>PRODUCT</b></li>
<li>Why Slack?</li>
<li>Enterprise</li>
<li>Customer Stories</li>
<li>Pricing</li>
<li>Security</li>
</ul>


<ul>
<li>RESOURCES</li>
<li><b>RESOURCES</b></li>
<li>Download</li>
<li>Help Center</li>
<li>Guides</li>
Expand All @@ -88,21 +110,24 @@ <h2>You're in good company</h2>
<li>API</li>
</ul>
<ul>
<li>EXTRAS</li>
<li><b>EXTRAS</b></li>
<li>Podcast</li>
<li>Slack Shop</li>
<li>Slack at Work</li>
<li>Slack Fund</li>
</ul>

</div>
<div>
<ul>
<div class="status">
<ul class="statusone">
<li>Status</li>
<li>Privacy & Terms</li>
<li>Contact Us</li>
</ul>
<div>
<img src="./images/us-flag.png" alt="" />
</div>
<div class="imgdiv">
<img src="./images/us-flag.png" alt="" class="flag"/>
<span>English (US)</span>
<i class="fas fa-chevron-down"></i>
<i class="fab fa-twitter"></i>
Expand All @@ -112,4 +137,6 @@ <h2>You're in good company</h2>
</div>
</footer>
</body>
</div>
</div>
</html>
206 changes: 206 additions & 0 deletions starter_code/stylesheets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,213 @@
.entire {
display: flex;
flex-direction: column;

}

/*
background-grey: #F4F3F4;
button-purple: #192592
main-titles dark-grey: #2C303F;
paragraph grey: #5b5e6d;
nav grey: #5b5e6d;
*/



.navbar {
overflow: hidden;
font-family: Arial;
display: flex;
justify-content: space-between;
border-bottom: 4px solid lightgray;
}


.navbar a {
float: left;
font-size: 40px;
color: white;
text-align: center;

text-decoration: none;
}


.dropdown {
float: right;
overflow: hidden;
}


.dropdown .dropbtn {
font-size: 40px;
border: none;
outline: none;
color: black;
padding: 30px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}


.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}


.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}


.dropdown-content a {
float: none;
color: black;
padding: 35px 25px 0 0;
text-decoration: none;
display: block;
text-align: left;
}


.dropdown-content a:hover {
background-color: #ddd;
}


.dropdown:hover .dropdown-content {
display: block;
}

.slack {
height: 100px;
}

.space {
padding: 15px 200px;
}

.dropbtn {
padding: 20px;
}

h1 {
font-size: 70px;
}

p {
font-size: 20px;
}

.entire-rest {
margin: 10px 40px;
align-items: center;
display: flex;
flex-direction: column;
}

.logo-contain {
display: flex;
flex-direction: column;
align-items: center;

}

.size {
height: 100px;
width: auto;

}

.pbutton {
text-align: center;
}

.center-pic {
align-items: center;
width: 900px;
margin-top: 30px;
}

h2 {
font-size: 60px;
}

.started {
height: 100px;
width: 700px;
background-color: #4048aa;
color: white;
font-size: 30px;
border-radius: 10px;
}


.split {
display: flex;
flex-direction: column;
align-items: center;
}

.discover {
height: 100px;
width: 700px;

color: #4048aa;;
font-size: 30px;
border-radius: 10px;
}

.gray {
background-color: gray;
display: flex;



}

.bottom {
display: flex;
flex-direction: column;
}

li {
margin: 20px;
}

.status {
display: flex;
justify-content: center;
}

.statusone > li {
display: inline-block;
justify-content: center;
}





.firstBottom > ul > li {
list-style: none;
display: flex;
flex-wrap: wrap;
width: 100px;
}


.imgdiv {
display: flex;

}

.flag {
margin: auto;
}