add hw3

DenisTsymbaliuk · Nov 16, 2023 · 67a8974 · 67a8974
1 parent 98252b7
commit 67a8974
Show file tree

Hide file tree

Showing 2 changed files with 337 additions and 123 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,3 +1,26 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ul {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.container {
+  width: 1158px;
+  max-width: 1440px;
+  padding: 0 15px;
+  margin: 0;
+}
 body {
   font-family: Roboto, sans-serif;
   background-color: #fff;
@@ -11,6 +34,60 @@ a {
 li {
   list-style-type: none;
 }
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+.header {
+  display: flex;
+  border-bottom: 1px solid #e7e9fc;
+}
+.head-cont {
+  display: flex;
+}
+.header-menu {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.contacts {
+  display: flex;
+  gap: 40px;
+  padding: 24px 0;
+  justify-content: flex-end;
+  margin: auto;
+}
+.contacts-menu {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 40px;
+  justify-content: flex-end;
+}
+.link-contacts-menu {
+  display: flex;
+  justify-content: flex-end;
+}
+.header-menu li {
+  display: inline-block;
+  margin-right: 10px;
+}
+.list-nav li {
+  display: inline-block;
+  margin-right: 10px;
+}
 
 /*Logo Style*/
 .logo {
@@ -22,10 +99,13 @@ li {
   line-height: 1.17;
   letter-spacing: 0.03em;
   text-transform: uppercase;
+  margin-right: 76px;
+  padding: 24px 0;
 }
 
 .logo-link {
   color: #2e2f42;
+  padding: 24px 0;
 }
 
 .logo-link:hover,
@@ -44,6 +124,13 @@ li {
 }
 
 /*Nav Style*/
+.list-nav {
+  display: flex;
+  gap: 40px;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 .link-nav {
   color: #2e2f42;
   font-family: Roboto;
@@ -52,6 +139,7 @@ li {
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: 0.02em;
+  padding: 24px 0;
 }
 
 .link-nav:hover,
@@ -69,6 +157,8 @@ li {
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: 0.02em;
+  display: flex;
+  gap: 40px;
 }
 
 .link-contacts:hover,
@@ -94,6 +184,7 @@ li {
 /*Hero*/
 .hero {
   background-color: #2e2f42;
+  padding: 188px 0;
 }
 
 .hero-title {
@@ -104,10 +195,12 @@ li {
   font-weight: 700;
   line-height: 1.07;
   letter-spacing: 0.02em;
+  margin: 0 auto;
+  margin-bottom: 48px;
+  max-width: 496px;
 }
 
 .hero-button {
-  cursor: pointer;
   background-color: #4d5ae5;
   color: #fff;
   font-family: "Roboto", sans-serif;
@@ -116,14 +209,44 @@ li {
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: 0.04em;
+  display: block;
+  min-width: 169px;
+  height: 56px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin: 0 auto;
 }
 
 .hero-button:hover,
 .hero-button:focus {
   background-color: #404bbf;
+  cursor: pointer;
 }
 
-/*Our positive qualities*/
+/*Benefits*/
+.benefits {
+  padding: 120px 0;
+}
+.benefits-item {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+.benefits-title {
+  display: flex;
+  gap: 24px;
+}
+.benefits-title-list {
+  width: calc((100%-72px) / 4);
+}
 .sectoin-title {
   color: #2e2f42;
   text-align: center;
@@ -144,6 +267,7 @@ li {
   font-weight: 500;
   line-height: 1.2;
   letter-spacing: 0.02em;
+  margin-bottom: 8px;
 }
 
 .list-text {
@@ -159,17 +283,64 @@ li {
 /*Our Team*/
 .our-team {
   background-color: #f4f4fd;
+  padding: 120px 0;
+}
+.sectoin-title-team {
+  margin-bottom: 72px;
+}
+.title-our-team {
+  display: flex;
+  gap: 24px;
+}
+.our-team-it {
+  width: calc((100% - 72px) / 4);
+  border-radius: 0px 0px 4px 4px;
+}
+.title-container {
+  padding: 32px 0;
+}
+.list-team-container {
+  text-align: center;
+  margin-bottom: 8px;
+}
+.list-text-container {
+  text-align: center;
 }
-
 .list-our-team {
   background-color: #ffffff;
 }
+/*Our Portfolio*/
+.our-portfolio {
+  padding: 120px 0 120px 0;
+}
+.sectoin-title-portfolio {
+  margin-bottom: 72px;
+}
+.title-portfolio {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 24px;
+  row-gap: 48px;
+}
+.list-portfolio {
+  width: calc((100% - 48px) / 3);
+}
+.portfilio-container {
+  padding: 32px 16px;
+  border: 1px solid #e7e9fc;
+  border-top: none;
+  margin-bottom: 8px;
+}
 
 /*Footer*/
 .end {
   background-color: #2e2f42;
+  padding: 100px 0;
+}
+.logo-cont {
+  display: inline-block;
+  margin-bottom: 16px;
 }
-
 .end-logo {
   color: #f4f4fd;
   font-family: "Raleway", sans-serif;
@@ -178,6 +349,8 @@ li {
   line-height: 1.17;
   letter-spacing: 0.03em;
   text-transform: uppercase;
+  display: inline-block;
+  margin-bottom: 16px;
 }
 
 .end-text {
@@ -188,4 +361,5 @@ li {
   font-weight: 400;
   line-height: 1.5;
   letter-spacing: 0.02em;
+  max-width: 264px;
 }