From 1bc55a18944994c1b2eef47f2feca225ac325b8a Mon Sep 17 00:00:00 2001 From: alina <7upseska7@gmail.com> Date: Tue, 3 Oct 2023 01:38:32 +0200 Subject: [PATCH] code added --- starter_code/index.html | 206 ++++++++++--------- starter_code/stylesheets/style.css | 309 ++++++++++++++++++++++++++++- 2 files changed, 409 insertions(+), 106 deletions(-) diff --git a/starter_code/index.html b/starter_code/index.html index 20bbd35..fbe64dd 100644 --- a/starter_code/index.html +++ b/starter_code/index.html @@ -1,115 +1,123 @@ - - - - - - + + + + - - - 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. + + + 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.

- -

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

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

Already using Slack? Sign in

+

Try it for free

-
- + + + \ No newline at end of file diff --git a/starter_code/stylesheets/style.css b/starter_code/stylesheets/style.css index cff873e..8788306 100644 --- a/starter_code/stylesheets/style.css +++ b/starter_code/stylesheets/style.css @@ -1,7 +1,302 @@ -/* -background-grey: #F4F3F4; -button-purple: #192592 -main-titles dark-grey: #2C303F; -paragraph grey: #5b5e6d; -nav grey: #5b5e6d; -*/ +* { + font-family: Verdana, Geneva, Tahoma, sans-serif; + margin: 0; + padding: 0; + +} + +:root { + --background-grey: #F4F3F4; + --button-purple: #192592 --main-titles: #2C303F; + --paragraph-grey: #5b5e6d; + --nav-grey: #5b5e6d; + --btn-main: #2f3f9e; +} + +/*reset*/ + +body, +p, +a, +ul, +li { + text-decoration: none; +} + +li { + list-style: none; +} + +.navigation, +.allLis, +.pBlack, +.clients, +.info, +.subFooter { + display: flex; + justify-content: center; +} + +header, +main, +footer { + padding: 40px 30px; +} + +h1, +h2, +.clients { + font-weight: 700; + margin: 40px 0; +} + +p { + font-size: 18px; + padding: 10px 0; +} + +.navigation { + margin: 0 40px; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.allLis { + flex-direction: row; + align-items: center; + color: var(--paragraph-grey); + text-align: center; +} + +.logo { + width: 120px; +} + +.talkingPng { + width: 100%; + margin-bottom: 40px; +} + +.btn1, +.btn2 { + border-radius: 5px; + text-transform: uppercase; + padding: 15px 25px; + background: var(--btn-main); + color: #fff; + border: none; + display: inline-block; + margin: 30px 0; +} + +.btn2 { + background: #fff; + border: 1px solid var(--btn-main); + color: var(--btn-main); +} + +.footerInfo { + width: 50%; +} + +.greyStyle { + color: var(--paragraph-grey); + margin: 20px 0; +} + +.pBlack { + color: #000; + justify-content: center; +} + +.liBold { + font-weight: 700; +} + +.greyBg { + background: var(--background-grey) +} + +.clients { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.clientsItem { + width: 30%; + padding: 25px 0; +} + +.info { + flex-direction: column; +} + +.menuHidden { + display: none; +} + +.minilogo { + width: 170px; +} + +.footerwrap { + flex-wrap: wrap; + display: flex; + flex-direction: column; +} + +.footerCol { + display: flex; + flex-wrap: wrap; + flex-direction: column; + margin-bottom: 30px 0; +} + +.footer { + display: flex; + flex-wrap: wrap; + width: 100%; + justify-content: center; + flex-direction: column; + align-items: center; + margin-top: 40px; +} + +.footer>ul { + display: flex; + justify-content: space-between; + width: 100%; +} + +.subFooter { + display: flex; + flex-direction: column; + align-items: center; + margin: 20px 0; +} + + +@media screen and (min-width: 767px) and (max-width:960px) { + h1 { + font-size: 44px; + } + + .btn1, + .btn2 { + margin: 30px auto; + } + + + .clients { + flex-wrap: wrap; + flex-direction: row; + } + + .clientsItem { + margin: 0 70px; + width: 25%; + } + + .footer { + flex-wrap: nowrap; + flex-direction: row; + justify-content: space-between; + } + + .footer>ul { + width: 40%; + } + + footer { + background: #fff; + } + + .subFooter { + flex-direction: row; + } + + .subFooter>img { + width: 10%; + } + + .footerwrap { + flex-direction: column; + } + + .footerCol { + flex-direction: row; + } + + .dtsize { + margin: 0 20px; + } +} + + +@media screen and (min-width:961px) { + h1 { + font-size: 50px; + } + + .burger { + display: none; + } + + .btn1, + .btn2 { + margin: 30px auto; + } + + .menuHidden { + display: flex; + justify-content: space-evenly; + width: 50%; + } + + .clients { + flex-direction: row; + flex-wrap: wrap; + } + + + .clientsItem { + margin: 0 70px; + width: 15%; + } + + .footerwrap { + flex-wrap: wrap; + flex-direction: row; + justify-content: space-evenly; + } + + .footer { + flex-wrap: nowrap; + flex-direction: row; + justify-content: space-between; + } + + .footerCol { + flex-direction: row; + flex-wrap: nowrap; + } + + .footer>ul { + width: 40%; + } + + .subFooter { + flex-direction: row; + } + + .minilogo { + width: 120px; + height: 120px; + } + + .subFooter>img { + width: 10%; + } +} \ No newline at end of file