From 229b787d2a369239092e4823f8a4846a59d2031c Mon Sep 17 00:00:00 2001 From: Levi Milli <107660704+LeviMilli@users.noreply.github.com> Date: Sun, 4 Sep 2022 20:49:19 -0700 Subject: [PATCH] kinda done --- .vscode/settings.json | 3 + starter_code/index.html | 93 ++++++++----- starter_code/stylesheets/style.css | 206 +++++++++++++++++++++++++++++ 3 files changed, 269 insertions(+), 33 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..2a9997f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "livePreview.defaultPreviewPath": "c:\\Users\\Tiltlord\\root\\Week1\\Day5\\lab-css-flexbox-slack\\starter_code\\index.html" +} \ No newline at end of file diff --git a/starter_code/index.html b/starter_code/index.html index 20bbd35..dc8fef9 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -12,22 +12,30 @@ /> - + Where work happens | Slack - +
+
- home_work_happening

Where Work Happens

When your team needs to kick off a project, hire a new employee, deploy @@ -35,35 +43,47 @@

Where Work Happens

an A/B test, plan your next office opening, and more, Slack has you covered.

- -

Already using Slack? Sign in

+

Already using Slack? Sign in

+
+ + home_work_happening +
+ + +
-
-
+
+
+

You're in good company

Millions of people around the world have already made Slack the place where their work happens.

- - - + +
+ + - - - + + +
-
-

Try it for free

-

Already using Slack? Sign in

- + +
+
+

Try it for free

+

Already using Slack? Sign in

+
+
+
diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index cff873e..42f0f09 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -1,3 +1,9 @@ +.entire { + display: flex; + flex-direction: column; + +} + /* background-grey: #F4F3F4; button-purple: #192592 @@ -5,3 +11,203 @@ 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; + }