diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..39d9297 Binary files /dev/null and b/.DS_Store differ diff --git a/starter_code/images/menu.png b/starter_code/images/menu.png new file mode 100644 index 0000000..003c16d Binary files /dev/null and b/starter_code/images/menu.png differ diff --git a/starter_code/index.html b/starter_code/index.html index 20bbd35..9a56cbe 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,115 +1,225 @@ - - - - - - - - - - - - - Where work happens | Slack - - - - -
- home_work_happening -

Where Work Happens

-

- 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. -

- -

Already using Slack? Sign in

-
-
-
-

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

- -
-
- - - + + + + + + + + + + + + + + + + + Where work happens | Slack + + + + +
+
+
+

+ Where Work
+ Happens +

+

+ 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. +

+
+ + + +
+
+
+ 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 +
+
+ + +
+
+
+
+
+ + + + diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index cff873e..0d89efd 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -1,7 +1,733 @@ -/* -background-grey: #F4F3F4; -button-purple: #192592 -main-titles dark-grey: #2C303F; -paragraph grey: #5b5e6d; -nav grey: #5b5e6d; -*/ +/* +background-grey: #F4F3F4; +button-purple: #192592 +main-titles dark-grey: #2C303F; +paragraph grey: #5b5e6d; +nav grey: #5b5e6d; +*/ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + margin-bottom: 1rem; +} +h1 { + color: #4a5169; + font-size: 2.5rem; + font-family: Inter; +} +h2 { + color: #4a5169; + font-size: 1.5rem; + font-family: Inter; +} +p { + font-family: Inter; + color: #5b5e6d; + text-align: justify; +} +.nav-menu { + display: none; +} + +a { + color: #4049aa; +} +/* .header_actions { + width: 100%; +} */ + +.nav-links { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + + list-style: none; + text-decoration: none; +} +.nav-links > a { + color: #5b5e6d; + text-decoration: none; + cursor: pointer; +} +.nav-links > a:last-child { + border: 2px solid #cdc5cd; + padding: 5px; + border-radius: 5px; +} +.content-area { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 1rem; +} +.main { + width: 100%ยก; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0 auto; +} +.mainsection { + margin: 3rem 0rem; + width: 100%; +} +.mainsection_container { + width: 100%; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + /* padding: 2rem; */ + /* border-radius: 10px; */ +} + +.mainsection_content { + width: 100%; + padding: 2rem 0rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + text-align: center; + background-color: #f4f3f4; +} +.nav { + width: 100%; + position: sticky; + top: 0; + background-color: #fff; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); + border-bottom: 1px solid #e6e7eb; +} +.inner_nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1rem; + width: 100%; +} +.nav-logo { + max-width: 100px; + height: auto; + object-fit: cover; +} + +header { + width: 100%; + /* padding: 0px 10px; */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + gap: 2rem; + margin-top: 1rem; +} + +/* --- */ +.home-image { + max-width: 300px; + height: auto; +} + +.partners > div { + padding: 1rem 2rem; + display: flex; + justify-content: center; + align-items: center; + border-bottom: solid 1px #dddfe7; +} +.partner-img { + max-width: 200px; + min-width: 150px; + height: auto; + flex: 0 1 calc(50% - 3rem); +} + +.email-input { + /* width: 100%; */ + padding: 1.5rem; + border: solid 1px #e6e7eb; + border-radius: 5px; + outline: none; + /* margin-bottom: 10px; */ +} + +header > h1, +p, +button { + margin: 0px; +} + +.primary-btn { + /* width: 100%; */ + padding: 1.5rem; + border-radius: 5px; + border: none; + background-color: #4049aa; + color: white; + font-weight: 700; + letter-spacing: 1px; +} +.secondary-btn { + width: 100%; + padding: 1.5rem; + border-radius: 5px; + border: none; + background-color: #fff; + border: solid 1px #4049aa; + color: #4049aa; + font-weight: 500; + letter-spacing: 1px; +} + +.main_max_container { + max-width: 75%; + display: flex; + flex-direction: column; + gap: 2rem; + margin: 1rem auto; +} + +.signin { + display: block; + position: relative; + top: 5px; + font-weight: 300; +} +.email-input, +.primary-btn { + padding: 1rem; +} + +.partners { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 3rem; +} +.optin_container { + padding: 1rem 0rem; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + border-bottom: 1px solid #e6e7eb; +} + +.optin_text { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} +.optin_form { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 1rem; +} +.header_content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 1rem; +} + +.footer_li { + list-style: none; + color: #5b5e6d; + font-size: 1rem; +} +.footer_info_container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + background-color: #f4f3f4; + width: 100%; +} +.footer_info_content { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 2rem; + gap: 1rem; +} +.footer_info_li { + list-style-type: none; + text-decoration: none; + color: #000000; + font-size: 1rem; +} +.footer_info_container > ul > a { + cursor: pointer; + text-decoration: none; +} +a { + text-decoration: none; +} +.footer_flag { + max-width: 25px; +} +.footer_social_container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.optin_content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 1rem; + width: 100%; + /* padding: 1rem 3rem; */ + padding: 2rem 0rem; + /* max-width: 80%; */ +} +footer { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.footer_container { + display: flex; + flex-direction: row; + justify-content: center; + gap: 1rem; + width: 100%; + padding: 3rem 2rem; + width: 100%; +} +.footer_links { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + width: 100%; +} +.footer_logo_container { + align-self: flex-start; + margin: 0px; + padding: 0px; + justify-content: flex-start; +} +.footer_logo { + max-width: 150px; + height: auto; + object-fit: cover; +} +.footer_ul { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 1rem; +} +.footer_info_ul { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + gap: 1rem; +} +.footer_nation { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + font-weight: 500; +} + +.footer_social { + /* width: 100%; */ + display: flex; + flex-direction: row; + justify-content: spac space-around; + align-items: center; + gap: 1rem; +} +.header_actions { + width: 100%; + position: relative; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-self: flex-start; + gap: 1rem; +} +.signin { + display: block; + position: absolute; + top: 120%; +} +.max_container { + max-width: 1440px; + padding: 1rem 3rem; +} + +/* mobile */ +@media screen and (max-width: 767px) { + .nav-links { + display: none; + } + .nav > ul { + display: none; + } + .nav-menu { + display: inline; + height: 40px; + color: #5b5e6d; + } + .mainsection_container { + margin-top: 1rem; + } + .mainsection { + margin: 3rem 0rem; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + } + .mainsection_title { + font-size: 25px; + /* letter-spacing: 1.5rem; */ + text-align: center; + } + .max_container { + width: 100%; + padding: 0px 1rem; + } + + .main_max_container > p { + text-align: justify; + font-size: 20px; + font-weight: 100; + } + .email-input, + .primary-btn { + width: 100%; + } + .header_actions { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + } + + /* optin */ + .optin_container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + width: 100%; + padding: 1rem 3rem; + } + .optin_text { + align-items: center; + } + .optin_form { + width: 100%; + } + .optin_container > p { + /* font-size: 28px; */ + /* font-weight: 500; */ + text-align: center; + } + + .signin { + top: 100%; + } + .partners { + flex-direction: column; + flex-wrap: nowrap; + width: 110%; + } + .partners > div { + width: 80%; + } + .optin_form { + display: flex; + flex-direction: column; + } + .optin_container { + align-items: center; + } + .optin_content { + flex-direction: column; + } + .partner-img { + max-width: 200px; + width: 100%; + flex: none; + } + .footer_container { + padding: 0rem 1rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + } + .footer_logo_container { + align-self: flex-start; + margin: 0px; + padding: 0px; + } + .footer_logo { + max-width: 100px; + height: auto; + object-fit: cover; + margin: 0px; + padding: 0px; + } + .footer_links { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + gap: 2rem; + } + .footer_ul { + min-height: 300px; + padding: 0rem; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 1rem; + } + + .footer_info_container { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + background-color: #f4f3f4; + padding: 3rem; + gap: 2rem; + /* margin: 2rem 0rem; */ + } + .footer_info_container > ul { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: nowrap; + gap: 1rem; + } + .footer_info_container li { + font-size: 0.8rem; + font-weight: 600; + color: #5b5e6d; + } + + .footer_social_container { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 1rem; + } + .footer_info_content { + flex-direction: column; + } + .footer_nation { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + font-weight: 500; + gap: 1rem; + } + .footer_nation > p { + font-size: 12px; + } + .footer_social { + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; + } +} + +/* Tablet */ + +@media screen and (min-width: 768px) and (max-width: 960px) { + .nav { + width: 100%; + padding: 0px 2rem; + } + .nav > ul { + display: none; + } + .nav-menu { + display: inline; + height: 40px; + color: #5b5e6d; + } + .max_container { + padding: 2rem; + } + .main_max_container { + max-width: 75%; + display: flex; + flex-direction: column; + gap: 2rem; + margin: 2rem auto; + } + .header_actions { + width: 100%; + position: relative; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-self: flex-start; + gap: 1rem; + } + .signin { + display: block; + position: absolute; + top: 120%; + } + /* .email-input { + width: 70%; + } */ + + .partners { + display: grid; + grid-template-columns: 1fr 1fr; + width: 90%; + height: 100%; + margin: 0 auto; + gap: 1px; + align-items: center; + } + + .partners > div { + padding: 1rem 2rem; + display: flex; + height: 100px; + justify-content: center; + align-items: center; + border-bottom: solid 1px #dddfe7; + } + .partners > div:nth-child(odd) { + border-right: solid 1px #dddfe7; + } + .partners img { + max-width: 200px; + object-fit: contain; + } + + .optin_form { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + gap: 1rem; + } + + .footer_info_container { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + .footer_li { + list-style: none; + text-align: left; + } +} + +/* Medium Screen */ +/* Medium screen */ +@media screen and (min-width: 961px) and (max-width: 1025px) { + .nav { + width: 100%; + padding: 0px 3rem; + } + .max_container { + width: 100%; + padding: 2rem 3rem; + } + + .optin_form { + width: 50%; + justify-content: flex-end; + } + .email-input { + width: 60%; + } +} + +/* Larger Screen */ +@media screen and (min-width: 1201px) { + .nav { + /* width: 100%; */ + padding: 0px 5rem; + } + .inner_nav { + max-width: 1440px; + margin: 0 auto; + } + /* .content-area { + max-width: 1440px; + margin: 0 auto; + } */ + + .max_container { + max-width: 1440px; + } + header { + flex-direction: row-reverse; + justify-content: center; + margin: 1rem 0rem; + } + .header-title { + font-size: 5rem; + } + + .mainsection { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + } + + .footer_info_container { + flex-direction: row; + justify-content: center; + align-items: center; + } +}