second commit

index.html

@@ -55,7 +55,7 @@
     </ul>
     <div class="form-container ">
       <form class="d-flex align-items-center d-sm-flex justify-content-sm-between" role="search">
-        <input id="src-input" class="form-control rounded-0 border-0" type="search" placeholder="Search...">
+        <input id="src-input" class="form-control rounded-0 border-0" type="search" placeholder="Search ...">
         <button class="btn" type="submit" style="padding-bottom: 0px;padding-top: 0px;">
           <span class="material-icons">
             search
@@ -67,15 +67,15 @@
 
   <!-- header -->
   <header
-    class="d-flex flex-column d-md-flex flex-md-row-reverse justify-content-md-between align-items-center justify-content-sm-center mx-lg-0 my-lg-0 mt-3  mx-2 my-md-3 mx-md-3">
+    class="d-flex flex-column d-md-flex flex-md-row-reverse justify-content-md-between align-items-center justify-content-sm-center mx-lg-0 my-lg-0 mt-4 mx-0 mt-md-4 mb-md-3 mx-md-3">
     <div class="contact d-flex  flex-column">
       <div class="number d-inline">
-        <span class="material-icons">
+        <span id="phone-img" class="material-icons">
           phone
         </span>
-        800-2345-6789
+        <a class="phone" href="#">800-2345-6789</a>
       </div>
-      <a id="mail" href="#" class="mt-2">globaly@demolink.org</a>
+      <a id="mail" href="#" class="mt-1">globaly@demolink.org</a>
     </div>
     <div class="horizontal-menu d-none d-md-none d-lg-flex ">
       <ul class="nav-ul-hor d-md-flex d-md-row s mb-0">
@@ -93,7 +93,7 @@
     <!-- site navigation-->
 
     <nav class="menu d-flex d-md-none justify-content-center align-items-center w-100 "
-      style=" background-color: white; height: 68px;">
+      style="background-color: white; height: 68px;">
       <div class="container-fluid ">
         <button class="navbar-toggler d-flex justify-content-center align-items-center" type="button"
           data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent"
@@ -167,7 +167,7 @@
     <div class="first-part">
       <div class="textbox mx-md-3 mx-lg-3 mx-0 d-flex flex-column justify-content-start align-items-center">
         <h2 class="h2-first">Full Cycle Business Management</h2>
-        <p style="text-align: center; font-weight: bold;">
+        <p style="text-align: center; padding: 0  30px;">
           Whether your company looks for a financial consulting, investment risks assessments or an interim, HR
           management, we’re ready to provide that for you.We have a proven expertise in any process, that a modern day
           business lives and works through.
@@ -179,7 +179,7 @@
     <!-- second part  -->
 
     <div
-      class="second-part d-flex flex-column align-items-center justify-content-center my-lg-5 my-5 my-md-5 d-md-flex">
+      class="second-part d-flex flex-column align-items-center justify-content-center mx-3 my-lg-0 my-5 my-md-5 d-md-flex">
       <div class="headline-card d-flex flex-column align-items-center justify-content-center pb-3">
         <h4>business management</h4>
         <h2>Services We Offer</h2>
@@ -234,7 +234,7 @@
           <h5>Any company level of expertise, trustworthiness or popularity can be easily checked when it comes to
             proven
             cases… </h5>
-          <p style="text-align: start; font-weight: bold;">
+          <p style="text-align: start;">
             We stockpiled hundreds of successful business consulting operations throughout the 25 years long history
             we’re
             in this business. Here are the best examples of our diligent and efficient advice for small and big
@@ -255,7 +255,7 @@
       </div>
       <div class="row mx-md-3 mx-lg-5">
         <div class="col-md-6 col-lg-4 my-md-0">
-          <div class="card-fourth ">
+          <div class="card-fourth px-md-2 px-lg-3">
             <img class="img" src="assets/images/image41-560x350.jpg" alt="">
             <div class="date-by d-flex flex-row">
               <span class="published">26.07.2016</span>
@@ -270,7 +270,7 @@
           </div>
         </div>
         <div class="col-md-6 col-lg-4">
-          <div class="card-fourth">
+          <div class="card-fourth px-md-2 px-lg-3">
             <img class="img" src="assets/images/image42-560x350.jpg" alt="">
             <div class="date-by d-flex flex-row">
               <span class="published">16.06.2016 </span>
@@ -286,7 +286,7 @@
           </div>
         </div>
         <div class="col-md-6 col-lg-4">
-          <div class="card-fourth">
+          <div class="card-fourth  px-md-2 px-lg-3">
             <img class="img" src="assets/images/image43-560x350.jpg" alt="">
             <div class="date-by d-flex flex-row">
               <span class="published">17.05.2016</span>
@@ -301,7 +301,6 @@
               list.
               But actually, is it the best decision? </div>
           </div>
-          <!-- </div> -->
         </div>
       </div>
       <input class="view-more" type="submit" value="view all">
@@ -309,7 +308,7 @@
 
     <!-- fifth-part -->
 
-    <div class="fifth-part pb-md-5 pt-md-3 py-lg-3">
+    <div class="fifth-part pb-5 pb-md-5 pt-md-3 py-lg-3">
       <div class="headline-card-5 d-flex flex-column align-items-center justify-content-center pb-3">
         <h4>thanks to our business tips</h4>
         <h2>You’ll improve your performance!</h2>
@@ -349,7 +348,7 @@
             <div class="profile">
               <img src="assets/images/test1_03.webp" alt="">
             </div>
-            <div class="profile-text ml-lg-5">
+            <div class="profile-text ml-lg-5 px-lg-5">
               <p>The investment company I own once signed up for Globaly consultations. That happened back in 1993.
                 Since
                 then, we’ve been showing a steady year-by-year growth for 23 years long, in big part thanks to timely
@@ -364,7 +363,7 @@
             <div class="profile">
               <img src="assets/images/test2_03.png" alt="">
             </div>
-            <div class="profile-text ml-lg-5">
+            <div class="profile-text ml-lg-5 px-lg-5">
               <p>As an FMCG company, we always faced a tough competition in our field of market. It gotten only worse
                 since
                 the Great Recession hit us in 2008. But with efficient advice by this renown company, we were able to
@@ -380,7 +379,7 @@
     <!-- seventh-part -->
 
     <div class="seventh-part d-flex flex-column justify-content-center align-items-center">
-      <div class="textbox7 mx-5 pb-3">
+      <div class="textbox7 mx-3 pb-3">
         <h3>As we’re managing the aspects of your business,</h3>
         <h2>Your revenue continues to grow.</h2>
       </div>

style/_fifth-part.scss

@@ -21,10 +21,11 @@
             line-height: 1.38462;
             font-family: Merriweather;
             letter-spacing: 0px;
-            text-align: inherit;
+            text-align: center;
             color: #ffffff;
             margin-top: 40px;
             word-wrap: break-word;
+            padding: 0 50px;
         }
 
         h2 {
@@ -35,7 +36,7 @@
             line-height: 1.36957;
             font-family: Merriweather, serif;
             letter-spacing: 0px;
-            text-align: inherit;
+            text-align: center;
         }
     }
 
@@ -57,6 +58,7 @@
             font-family: Merriweather;
             font-size: 22px;
             line-height: 2.3em;
+            font-weight: 300;
         }
     }
 }

style/_first-part.scss

@@ -1,7 +1,7 @@
 @import '_variables';
 
 .first-part {
-    min-height: 85vh;
+    min-height: 65vh;
     background-image: url('/assets/images/image36.jpg');
     background-size: cover;
     color: white;
@@ -19,21 +19,21 @@
         padding: 0 39px;
         font-family: Merriweather;
         font-weight: 600;
-        padding: 18px 39px;
+        padding: 0 39px 18px 39px;
         letter-spacing: 0px;
         font-size: 36px;
+        line-height: 1em;
     }
 
     p {
         font-family: MerriweatherSans, sans-serif;
         font-style: normal;
         font-size: 18px !important;
-        padding: 0 23.4px;
+        padding: 0 24.4px;
         letter-spacing: 0px;
         line-height: 1.4em !important;
         margin-bottom: 30px;
         word-wrap: break-word;
-
     }
 
 }
@@ -56,11 +56,12 @@
 
 @media only screen and (min-width: 768px){
     .first-part {
-        min-height: 60vh;
+        min-height: 53vh;
 
     }
     .h2-first {
         font-size: 46px !important;
+        margin-top: 30px;
     }
 
 }
@@ -74,8 +75,8 @@
 
         .textbox{
             p{
-                margin-left: 380px;
+                margin-left: 400px;
-                margin-right: 380px;
+                margin-right: 400px;
                 line-height: 1.6em !important;
             }
         }

style/_form.scss

@@ -66,6 +66,7 @@
 
     .form-container-bot{
         position: relative;
+        width: 382px;
         
     }
 
@@ -84,7 +85,7 @@
     }
 
     .form-container-bot{
-        width: 700px;
+        width: 700px !important;
     }
 }
 

style/_fourth-part.scss

@@ -8,7 +8,7 @@
     .card-fourth{
         margin-top: auto;
         margin-bottom: 30px;
-        padding: 0px 3px 8px 3px;
+        padding: 0px 0px 8px 0px;
         border: none;
     }
     h4 {
@@ -74,8 +74,9 @@
         font-size: 20px ;
         color: #333333 !important;
         line-height: 1.3em !important;
-        padding-right: 10px;
         margin-bottom: 20px;
+        font-weight: 500 !important;
+        box-sizing: border-box;
 
     }
     .post-text{
@@ -95,6 +96,13 @@
     .fourth-part{
         margin-left: 20px;
         margin-right: 20px;
+
+        .card-fourth{
+            h2 {
+                font-size: 26px;
+        
+            }
+        }
     }
 }
 

style/_menu.scss

@@ -48,7 +48,7 @@ span {
     text-transform: uppercase;
     display: block;
     border-bottom: 1px solid #e0e0e8;
-    width: 400px;
+    width: 412px;
     height: 50px;
     background-color: white;
 }

style/_nav.scss

@@ -2,7 +2,8 @@
 
 
 form{
-    width: 336px;
+    width: 380px;
+    height: 40px ;
 }
 
 .socials-ul{
@@ -18,6 +19,7 @@ nav {
 
 .navbar {
     padding: 0 !important;
+    height: 40px ;
 }
 
 .form-container {
@@ -31,6 +33,7 @@ nav {
     color: $lightblue;
     width: 30px;
     height: 30px;
+    
 }
 
 .btn span:hover {
@@ -49,25 +52,35 @@ input {
 
 #src-input {
     background-color: #4a4e55;
-    padding: 0;
+    padding-left: 20px;
 }
 
 input::placeholder {
     color: white !important;
 }
 
-.number {
+.phone{
+    color: #333333;
     font-family: $numberfont;
     font-weight: 900;
+    font-size: 15px;
+    letter-spacing: .04em;
     font-style: normal;
     cursor: pointer;
+    text-decoration: none;
 }
 
-.number:hover {
+.phone:hover{
     color: $lightblue;
     transition: 0.5s;
+    text-decoration: none;
 
 }
+#phone-img{
+    width: 22px;
+    height: 33px;
+}
+
 
 #mail:hover {
     color: #333333;
@@ -84,7 +97,7 @@ input::placeholder {
 
 @media only screen and (min-width: 768px) {
     form {
-        width: 250px !important;
+        width: 229px !important;
         background-color: #4a4e55;
         padding-left: 34px;
         padding-right: 15px;        
@@ -96,9 +109,12 @@ input::placeholder {
     }
     .navbar{
         background-color: #30343c;
-        height: 60px;
+        height: 50px;
         
     }
+    #src-input {
+        padding-left: 0px;
+    }
     #socials{
         height: 28px !important;
         width: 28px !important;
@@ -122,6 +138,7 @@ input::placeholder {
         font-style: normal;
         text-transform: uppercase;
         list-style-type: none;
+        padding-left: 16px !important;
         
 
         .navs{
@@ -139,6 +156,9 @@ input::placeholder {
 }
 
 @media only screen and (min-width: 992px) {
+    .navbar{
+        height: 60px;
+    }
     form{
         margin-left: 55px;
         margin-right: 72px;

style/_second-part.scss

@@ -102,7 +102,7 @@
 
     .second-part {
 
-
+        padding-top: 70px;
         padding-bottom: 120px;
 
         .card{
@@ -112,7 +112,7 @@
             }
 
             p {
-                padding: 0 40px ;
+                padding: 0 30px ;
             }
         }
 

style/_sixth-part.scss

@@ -39,7 +39,7 @@
         }
     }
 
-    padding: 30px 0 70px 0;
+    padding: 30px 0 80px 0;
 }
 
 
@@ -48,6 +48,10 @@
         .profile-card{
             margin: 0;
         }
+        padding: 50px 0 100px 0;
+        .profile-text{
+            margin-bottom: 20px;
+        }
     }
 }
 @media only screen and (min-width:992px) {

style/_third-part.scss

@@ -21,11 +21,14 @@
 
         h5{
             font-family: Merriweather;
-            font-size: 24px;
+            font-size: 23px;
             margin-top: 15px;
             margin-bottom: 17px;
             font-weight: 300;
             line-height: 1.5;
+            word-wrap: break-word;
+            box-sizing: border-box;
+            letter-spacing: 0px;
         }
 
         p{

style/style.css

@@ -11,7 +11,8 @@
   src: url("../assets/fonts/Merriweather-Regular.ttf") format("truetype");
 }
 form {
-  width: 336px;
+  width: 380px;
+  height: 40px;
 }
 
 .socials-ul {
@@ -26,6 +27,7 @@ nav {
 
 .navbar {
   padding: 0 !important;
+  height: 40px;
 }
 
 .form-container {
@@ -54,7 +56,7 @@ input {
 
 #src-input {
   background-color: #4a4e55;
-  padding: 0;
+  padding-left: 20px;
 }
 
 input::-moz-placeholder {
@@ -65,16 +67,26 @@ input::placeholder {
   color: white !important;
 }
 
-.number {
+.phone {
+  color: #333333;
   font-family: "Lato";
   font-weight: 900;
+  font-size: 15px;
+  letter-spacing: 0.04em;
   font-style: normal;
   cursor: pointer;
+  text-decoration: none;
 }
 
-.number:hover {
+.phone:hover {
   color: #15c1c6;
   transition: 0.5s;
+  text-decoration: none;
+}
+
+#phone-img {
+  width: 22px;
+  height: 33px;
 }
 
 #mail:hover {
@@ -91,7 +103,7 @@ input::placeholder {
 
 @media only screen and (min-width: 768px) {
   form {
-    width: 250px !important;
+    width: 229px !important;
     background-color: #4a4e55;
     padding-left: 34px;
     padding-right: 15px;
@@ -102,7 +114,10 @@ input::placeholder {
   }
   .navbar {
     background-color: #30343c;
-    height: 60px;
+    height: 50px;
+  }
+  #src-input {
+    padding-left: 0px;
   }
   #socials {
     height: 28px !important;
@@ -124,6 +139,7 @@ input::placeholder {
     font-style: normal;
     text-transform: uppercase;
     list-style-type: none;
+    padding-left: 16px !important;
   }
   .nav-ul-hor .navs {
     padding: 1rem;
@@ -135,6 +151,9 @@ input::placeholder {
   }
 }
 @media only screen and (min-width: 992px) {
+  .navbar {
+    height: 60px;
+  }
   form {
     margin-left: 55px;
     margin-right: 72px;
@@ -207,7 +226,7 @@ span {
   text-transform: uppercase;
   display: block;
   border-bottom: 1px solid #e0e0e8;
-  width: 400px;
+  width: 412px;
   height: 50px;
   background-color: white;
 }
@@ -278,7 +297,7 @@ span {
   src: url("../assets/fonts/Merriweather-Regular.ttf") format("truetype");
 }
 .first-part {
-  min-height: 85vh;
+  min-height: 65vh;
   background-image: url("/assets/images/image36.jpg");
   background-size: cover;
   color: white;
@@ -295,15 +314,16 @@ span {
   padding: 0 39px;
   font-family: Merriweather;
   font-weight: 600;
-  padding: 18px 39px;
+  padding: 0 39px 18px 39px;
   letter-spacing: 0px;
   font-size: 36px;
+  line-height: 1em;
 }
 .textbox p {
   font-family: MerriweatherSans, sans-serif;
   font-style: normal;
   font-size: 18px !important;
-  padding: 0 23.4px;
+  padding: 0 24.4px;
   letter-spacing: 0px;
   line-height: 1.4em !important;
   margin-bottom: 30px;
@@ -334,10 +354,11 @@ span {
 
 @media only screen and (min-width: 768px) {
   .first-part {
-    min-height: 60vh;
+    min-height: 53vh;
   }
   .h2-first {
     font-size: 46px !important;
+    margin-top: 30px;
   }
 }
 @media only screen and (min-width: 992px) {
@@ -347,8 +368,8 @@ span {
     justify-content: center;
   }
   .first-part .textbox p {
-    margin-left: 380px;
+    margin-left: 400px;
-    margin-right: 380px;
+    margin-right: 400px;
     line-height: 1.6em !important;
   }
   .h2-first {
@@ -447,6 +468,7 @@ span {
 }
 @media only screen and (min-width: 992px) {
   .second-part {
+    padding-top: 70px;
     padding-bottom: 120px;
   }
   .second-part .card {
@@ -456,7 +478,7 @@ span {
     font-size: 21px;
   }
   .second-part .card p {
-    padding: 0 40px;
+    padding: 0 30px;
   }
   .second-part h2 {
     font-size: 48px;
@@ -487,11 +509,14 @@ span {
 }
 .third-part .textbox3 h5 {
   font-family: Merriweather;
-  font-size: 24px;
+  font-size: 23px;
   margin-top: 15px;
   margin-bottom: 17px;
   font-weight: 300;
   line-height: 1.5;
+  word-wrap: break-word;
+  box-sizing: border-box;
+  letter-spacing: 0px;
 }
 .third-part .textbox3 p {
   line-height: 1.4375;
@@ -541,7 +566,7 @@ span {
 .fourth-part .card-fourth {
   margin-top: auto;
   margin-bottom: 30px;
-  padding: 0px 3px 8px 3px;
+  padding: 0px 0px 8px 0px;
   border: none;
 }
 .fourth-part h4 {
@@ -597,8 +622,9 @@ span {
   font-size: 20px;
   color: #333333 !important;
   line-height: 1.3em !important;
-  padding-right: 10px;
   margin-bottom: 20px;
+  font-weight: 500 !important;
+  box-sizing: border-box;
 }
 .fourth-part .post-text {
   text-align: left;
@@ -617,6 +643,9 @@ span {
     margin-left: 20px;
     margin-right: 20px;
   }
+  .fourth-part .card-fourth h2 {
+    font-size: 26px;
+  }
 }
 @media only screen and (min-width: 992px) {
   .fourth-part {
@@ -656,10 +685,11 @@ span {
   line-height: 1.38462;
   font-family: Merriweather;
   letter-spacing: 0px;
-  text-align: inherit;
+  text-align: center;
   color: #ffffff;
   margin-top: 40px;
   word-wrap: break-word;
+  padding: 0 50px;
 }
 .fifth-part .headline-card-5 h2 {
   text-align: center !important;
@@ -669,7 +699,7 @@ span {
   line-height: 1.36957;
   font-family: Merriweather, serif;
   letter-spacing: 0px;
-  text-align: inherit;
+  text-align: center;
 }
 .fifth-part .numbers-container .numbers {
   text-align: center;
@@ -687,6 +717,7 @@ span {
   font-family: Merriweather;
   font-size: 22px;
   line-height: 2.3em;
+  font-weight: 300;
 }
 
 @media only screen and (min-width: 768px) {
@@ -718,7 +749,7 @@ span {
   }
 }
 .sixth-part {
-  padding: 30px 0 70px 0;
+  padding: 30px 0 80px 0;
 }
 .sixth-part .headline-card h4 {
   font-family: Merriweather;
@@ -752,9 +783,15 @@ span {
 }
 
 @media only screen and (min-width: 768px) {
+  .sixth-part {
+    padding: 50px 0 100px 0;
+  }
   .sixth-part .profile-card {
     margin: 0;
   }
+  .sixth-part .profile-text {
+    margin-bottom: 20px;
+  }
 }
 @media only screen and (min-width: 992px) {
   .sixth-part .headline-card h2 {
@@ -880,6 +917,7 @@ span {
 }
 .form .form-container-bot {
   position: relative;
+  width: 382px;
 }
 
 @media only screen and (min-width: 768px) {
@@ -890,7 +928,7 @@ span {
     margin-bottom: 0px !important;
   }
   .form-container-bot {
-    width: 700px;
+    width: 700px !important;
   }
 }
 @media only screen and (min-width: 992px) {