From 67a897415f6a4037deed27874d277a5b99b873ba Mon Sep 17 00:00:00 2001
From: DenisTsymbaliuk <138362539+DenisTsymbaliuk@users.noreply.github.com>
Date: Thu, 16 Nov 2023 20:28:29 +0100
Subject: [PATCH] add hw3

---
 css/styles.css | 182 +++++++++++++++++++++++++++++++-
 index.html     | 278 ++++++++++++++++++++++++++++---------------------
 2 files changed, 337 insertions(+), 123 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 3271d45..ce1234c 100644
--- 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;
 }
diff --git a/index.html b/index.html
index eb56aa2..b77fe24 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css"
+        integrity="sha512-4xo8blKMVCiXpTaLzQSLSw3KFOVPWhm/TRtuPVc4WG6kUgjH6J03IBuG7JZPkcWMxJ5huwaBpOpnwYElP/m6wg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400;500;700&display=swap"
         rel="stylesheet" />
     <link rel="stylesheet" href="./css/styles.css" />
@@ -13,144 +16,181 @@
 </head>
 
 <body>
-    <header>
-        <nav>
-            <a class="logo" href="./index.html">Web<span class="text-logo">Studio</span>
-            </a>
-            <ul>
-                <li class="link-nav">
-                    <a class="logo-link" href="./index.html">Studio</a>
-                </li>
-                <li class="link-nav"><a class="logo-link" href="">Portfolio</a></li>
-                <li class="link-nav"><a class="logo-link" href="">Contacts</a></li>
-            </ul>
-        </nav>
-        <address class="contacts">
-            <ul>
-                <li class="link-contacts">
-                    <a class="link-contacts-menu" href="mailto:info@devstudio.com">info@devstudio.com</a>
-                </li>
-                <li class="link-contacts">
-                    <a class="link-contacts-menu" href="tel:+110001111111">+11 (000) 111-11-11</a>
-                </li>
-            </ul>
-        </address>
+    <header class="header">
+        <div class="container head-cont">
+            <nav class="header-menu">
+                <a class="logo" href="./index.html">Web<span class="text-logo">Studio</span>
+                </a>
+                <ul class="list-nav">
+                    <li class="link-nav">
+                        <a class="logo-link" href="./index.html">Studio</a>
+                    </li>
+                    <li class="link-nav"><a class="logo-link" href="">Portfolio</a></li>
+                    <li class="link-nav"><a class="logo-link" href="">Contacts</a></li>
+                </ul>
+            </nav>
+            <address class="contacts">
+                <ul class="contacts-menu">
+                    <li class="link-contacts">
+                        <a class="link-contacts-menu" href="mailto:info@devstudio.com">info@devstudio.com</a>
+                    </li>
+                    <li class="link-contacts">
+                        <a class="link-contacts-menu" href="tel:+110001111111">+11 (000) 111-11-11</a>
+                    </li>
+                </ul>
+            </address>
+        </div>
     </header>
 
     <main>
         <section class="hero">
-            <h1 class="hero-title">Effective Solutions for Your Business</h1>
-            <button class="hero-button" type="button">Order Service</button>
+            <div class="container">
+                <h1 class="hero-title">
+                    Effective Solutions <br />
+                    for Your Business
+                </h1>
+                <button class="hero-button" type="button">Order Service</button>
+            </div>
         </section>
-        <section>
-            <h2 class="sectoin-title">Benefits</h2>
-            <ul>
-                <li>
-                    <h3 class="list-title">Strategy</h3>
-                    <p class="list-text">
-                        Our goal is to identify the business problem to walk away with the
-                        perfect and creative solution.
-                    </p>
-                </li>
+        <!--Benefits-->
+        <section class="benefits">
+            <div class="container">
+                <h2 class="sectoin-title benefits-item">Benefits</h2>
+                <ul class="benefits-title">
+                    <li class="benefits-title-list">
+                        <h3 class="list-title">Strategy</h3>
+                        <p class="list-text">
+                            Our goal is to identify the business problem to walk away with the
+                            perfect and creative solution.
+                        </p>
+                    </li>
 
-                <li>
-                    <h3 class="list-title">Punctuality</h3>
-                    <p class="list-text">
-                        Bring the key message to the brand's audience for the best price
-                        within the shortest possible time.
-                    </p>
-                </li>
+                    <li class="benefits-title-list">
+                        <h3 class="list-title">Punctuality</h3>
+                        <p class="list-text">
+                            Bring the key message to the brand's audience for the best price
+                            within the shortest possible time.
+                        </p>
+                    </li>
 
-                <li>
-                    <h3 class="list-title">Diligence</h3>
-                    <p class="list-text">
-                        Research and confirm brands that present the strongest digital
-                        growth opportunities and minimize risk.
-                    </p>
-                </li>
+                    <li class="benefits-title-list">
+                        <h3 class="list-title">Diligence</h3>
+                        <p class="list-text">
+                            Research and confirm brands that present the strongest digital
+                            growth opportunities and minimize risk.
+                        </p>
+                    </li>
 
-                <li>
-                    <h3 class="list-title">Technologies</h3>
-                    <p class="list-text">
-                        Design practice focused on digital experiences. We bring forth a
-                        deep passion for problem-solving.
-                    </p>
-                </li>
-            </ul>
+                    <li class="benefits-title-list">
+                        <h3 class="list-title">Technologies</h3>
+                        <p class="list-text">
+                            Design practice focused on digital experiences. We bring forth a
+                            deep passion for problem-solving.
+                        </p>
+                    </li>
+                </ul>
+            </div>
         </section>
 
         <!--Our Team-->
         <section class="our-team">
-            <h2 class="sectoin-title">Our Team</h2>
-            <ul>
-                <li class="list-our-team">
-                    <img src="./images/images(1).jpg" alt="Mark Guerrero" width="264" />
-                    <h3 class="list-title">Mark Guerrero</h3>
-                    <p class="list-text">Product Designer</p>
-                </li>
+            <div class="container">
+                <h2 class="sectoin-title-team">Our Team</h2>
+                <ul class="title-our-team">
+                    <li class="list-our-team our-team-it" style="display: inline">
+                        <img src="./images/images(1).jpg" alt="Mark Guerrero" width="264" />
+                        <div class="title-container">
+                            <h3 class="list-title list-team-container">Mark Guerrero</h3>
+                            <p class="list-text list-text-container">Product Designer</p>
+                        </div>
+                    </li>
 
-                <li class="list-our-team">
-                    <img src="./images/images(2).jpg" alt="Tom Ford" width="264" />
-                    <h3 class="list-title">Tom Ford</h3>
-                    <p class="list-text">Frontend Developer</p>
-                </li>
+                    <li class="list-our-team our-team-it" style="display: inline">
+                        <img src="./images/images(2).jpg" alt="Tom Ford" width="264" />
+                        <div class="title-container">
+                            <h3 class="list-title list-team-container">Tom Ford</h3>
+                            <p class="list-text list-text-container">Frontend Developer</p>
+                        </div>
+                    </li>
 
-                <li class="list-our-team">
-                    <img src="./images/images(3).jpg" alt="Camila Garcia" width="264" />
-                    <h3 class="list-title">Camila Garcia</h3>
-                    <p class="list-text">Marketing</p>
-                </li>
+                    <li class="list-our-team our-team-it" style="display: inline">
+                        <img src="./images/images(3).jpg" alt="Camila Garcia" width="264" />
+                        <div class="title-container">
+                            <h3 class="list-title list-team-container">Camila Garcia</h3>
+                            <p class="list-text list-text-container">Marketing</p>
+                        </div>
+                    </li>
 
-                <li class="list-our-team">
-                    <img src="./images/images(4).jpg" alt="Daniel Wilson" width="264" />
-                    <h3 class="list-title">Daniel Wilson</h3>
-                    <p class="list-text">UI Designer</p>
-                </li>
-            </ul>
+                    <li class="list-our-team our-team-it" style="display: inline">
+                        <img src="./images/images(4).jpg" alt="Daniel Wilson" width="264" />
+                        <div class="title-container">
+                            <h3 class="list-title list-team-container">Daniel Wilson</h3>
+                            <p class="list-text list-text-container">UI Designer</p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
         </section>
-        <section>
-            <h2 class="sectoin-title">Our Portfolio</h2>
-            <ul>
-                <li>
-                    <img src="./images/img.jpg" alt="img" width="360" height="300" />
-                    <h3 class="list-title">Banking App</h3>
-                    <p class="list-text">App</p>
-                </li>
-                <li>
-                    <img src="./images/img1.jpg" alt="img1" width="360" height="300" />
-                    <h3 class="list-title">Cashless Payment</h3>
-                    <p class="list-text">Marketing</p>
-                </li>
-                <li>
-                    <img src="./images/img2.jpg" alt="img2" width="360" height="300" />
-                    <h3 class="list-title">Meditation App</h3>
-                    <p class="list-text">App</p>
-                </li>
-                <li>
-                    <img src="./images/img3.jpg" alt="img3" width="360" height="300" />
-                    <h3 class="list-title">Taxi Service</h3>
-                    <p class="list-text">Marketing</p>
-                </li>
-                <li>
-                    <img src="./images/img4.jpg" alt="img4" width="360" height="300" />
-                    <h3 class="list-title">Screen Illustrations</h3>
-                    <p class="list-text">Design</p>
-                </li>
-                <li>
-                    <img src="./images/img5.jpg" alt="img5" width="360" height="300" />
-                    <h3 class="list-title">Online Courses</h3>
-                    <p class="list-text">Marketing</p>
-                </li>
-            </ul>
+        <!--Our Portfolio-->
+        <section class="our-portfolio">
+            <div class="container">
+                <h2 class="sectoin-title sectoin-title-portfolio">Our Portfolio</h2>
+                <ul class="title-portfolio">
+                    <li class="list-portfolio">
+                        <img src="./images/img.jpg" alt="img" width="360" height="300" />
+                        <div class="portfilio-container">
+                            <h3 class="list-title">Banking App</h3>
+                            <p class="list-text">App</p>
+                        </div>
+                    </li>
+                    <li class="list-portfolio">
+                        <img src="./images/img1.jpg" alt="img1" width="360" height="300" />
+                        <div class="portfilio-container">
+                            <h3 class="list-title">Cashless Payment</h3>
+                            <p class="list-text">Marketing</p>
+                        </div>
+                    </li>
+                    <li class="list-portfolio">
+                        <img src="./images/img2.jpg" alt="img2" width="360" height="300" />
+                        <div class="portfilio-container">
+                            <h3 class="list-title">Meditation App</h3>
+                            <p class="list-text">App</p>
+                        </div>
+                    </li>
+                    <li class="list-portfolio">
+                        <img src="./images/img3.jpg" alt="img3" width="360" height="300" />
+                        <div class="portfilio-container">
+                            <h3 class="list-title">Taxi Service</h3>
+                            <p class="list-text">Marketing</p>
+                        </div>
+                    </li>
+                    <li class="list-portfolio">
+                        <img src="./images/img4.jpg" alt="img4" width="360" height="300" />
+                        <div class="portfilio-container">
+                            <h3 class="list-title">Screen Illustrations</h3>
+                            <p class="list-text">Design</p>
+                        </div>
+                    </li>
+                    <li class="list-portfolio">
+                        <img src="./images/img5.jpg" alt="img5" width="360" height="300" />
+                        <div class="portfilio-container">
+                            <h3 class="list-title">Online Courses</h3>
+                            <p class="list-text">Marketing</p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
         </section>
     </main>
     <footer class="end">
-        <a class="logo" href="./index.html">Web<span class="end-logo">Studio</span>
-        </a>
-        <p class="end-text">
-            Increase the flow of customers and sales for your business with digital
-            marketing & growth solutions.
-        </p>
+        <div class="container">
+            <a class="logo logo-cont" href="./index.html">Web<span class="end-logo">Studio</span>
+            </a>
+            <p class="end-text">
+                Increase the flow of customers and sales for your business with digital
+                marketing & growth solutions.
+            </p>
+        </div>
     </footer>
 </body>