fikrcamp · mkilaas · Apr 2, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/Image/.DS_Store b/Image/.DS_Store
diff --git a/Image/Big-data.jpeg b/Image/Big-data.jpeg
diff --git a/Image/Big.png b/Image/Big.png
diff --git a/Image/Data analysis.jpeg b/Image/Data analysis.jpeg
diff --git a/Image/Data-image.jpeg b/Image/Data-image.jpeg
diff --git a/Image/Facebook.png b/Image/Facebook.png
diff --git a/Image/Icon.jpeg b/Image/Icon.jpeg
diff --git a/Image/LinkedIn.png b/Image/LinkedIn.png
diff --git a/Image/Logo.png b/Image/Logo.png
diff --git a/Image/Twitter.png b/Image/Twitter.png
diff --git a/Image/Youtube.png b/Image/Youtube.png
diff --git a/index.html b/index.html
@@ -4,10 +4,109 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Flexbox-assignment</title>
     <link rel="stylesheet" href="style/style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
   </head>
-  <body>
-    <!-- start here -->
+  <body> <!--1. NAVIGATION PART -->
+    <header class=" navi-bar">
+      <img src="image/Big.png" alt="web-logo" class="logo"/>
+      <ul class="nlist">
+        <li>Home</li>
+        <li>Services</li>
+        <li>Partners</li>
+        <li>About Us</li>
+      </ul>
+
+      <button class="btn">Talk to US </button>
+    </header>
+    <!-- 2,Main part Services-->
+    <div class="services">
+      <h1 class="title1"> Data Analytics Consulting Services </h1>
+     <div class="serv">
+     <img src="image/Big-data.jpeg" alt="Data Analytics" class="dimage"/>
+      <p> Our team helps businesses around the world to use the huge amount of data they collect to extract useful insights from it. We use modern techniques and technologies which apply to the best data analytics consulting services......</p>
+      <button class="btn"> Click to Read More </button>
+      </div>
+
+    </div>
+    <!-- 2.1. Service lists-->
+
+      <h2> Our Service lists </h2>
+      <div class="service-lists">
+      <ul>
+        <li>Statistical Data analysis</li>
+        <li>Reporting Automation</li>
+        <li>Data Integration</li>
+        <li>Data Visualization</li>
+
+      </ul>
+      <img class="data-image" src="image/Data analysis.jpeg" alt="Data Analytics lists"/>
+
+
+    </div>
+    <!-- 2.2, The PROCESS-->
+    <div class="process">
+      <h2> Our Process </h2>
+
+      <div class="process-list">
+       <h4> On-time delivery</h4>
+       <p> Thereby you can be assured of your submission</p>
+
+       <h4> Unlimited Revisions</h4>
+       <p> We offer unlimited revision to the work being committed. Unlike other competitors, we do not charge for the revision.</p>
+
+       <h4> 100% Originality Guarantee</h4>
+        <p>All our writing works are scanned through plagiarism software and ensure that the document is delivered with 95 -100% plagiarism free.</p>
+       <h4> Subject Matter Expertise</h4>
+        <p> We assign expert specific to the subject. Hence you need not worry about the quality of work being delieverd.</p>
+      </div>
+
+    </div>
+      <!-- 2.3. How We Work -->
+      <h2> Our Process </h2>
+      <div class="work">
+         <h4> 1 </h4>
+         <p> Discover Feasibility Study</p>
+
+
+         <h4> 2 </h4>
+         <p> Prepare data for the analysis</p>
+
+
+         <h4> 3 </h4>
+         <p> Statistical data analysis and insights extraction</p>
+
+
+         <h4> 4 </h4>
+         <p> Preparing reports based on extracted insights and knowled sharing</p>
+
+      </div>
+      <div>
+
+
+      </div>
+     <!-- 3. FOOTER PART-->
+    <footer>
+      <div class="footer">
+        <div><img src="image/Big.png" alt="logo" class="logo" /></div>
+      <!-- Add font awesome icons -->
+      <a href="#" class="fa fa-facebook"></a>
+      <a href="#" class="fa fa-twitter"></a>
+      <a href="#" class="fa fa-google"></a>
+       <a href="#" class="fa fa-linkedin"></a>
+        <a href="#" class="fa fa-youtube"></a>  
+
+        <div class="address">
+           <h4>Address</h4>
+          <p>Jigjiga Yar</p>
+          <p>Hargesia, Somaliland</p>
+        </div>
+      </div>
+    </div>
+      <div class="copyright">Copyright &copy;2022</div>
+    </footer>
   </body>
 </html>
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,232 @@
+.{
+    padding:0;
+    margin:0;
+}
+
+body{
+font-family: "Times New Roman", verdana;
+font-size: 18px;
+Background-color: white;
+}
+
+/* HEADING SECTION CSS */
+.logo {
+    height: 100px;
+    width: 100px;
+    border-radius: darkblue;
+    border: darkblue;
+
+}
+.navi-bar { display: flex;
+align-items: center;
+justify-content: space-around;
+background:rgb(217, 231, 236);
+padding: 5px 0px;
+border-bottom: 1px;
+}
+
+.nlist { 
+    display: flex;
+    gap: 110px;
+}
+.nlist li { 
+    list-style-type: none;
+    background:#036ef1;
+    color: white;
+    padding: 8px 8px;
+    border-radius: 5px;
+  }
+
+  .nlist li:hover {
+    cursor: pointer;
+    color: black;
+  }
+
+  .btn {
+      padding: 8px 12px;
+      border: none;
+      background: darkred;
+      color:white;
+      border-radius: 5px;
+
+  }
+  .btn:hover {
+    cursor: pointer;
+    color: black;
+  }
+
+/* Main SECTION CSS */ /* Service Part*/
+
+.serv { display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background: rgb(217, 231, 236);
+    padding: 20px;
+    margin: 0px 20px;
+    border-bottom: 1px;
+    gap:0px;
+    flex-wrap: wrap;
+    }
+
+    .title1 {
+        text-align: center;
+        color:#036ef1;
+        padding: auto;
+       }
+       .dimage{
+           width: 40%;
+           align-items: center;
+       }
+       .serv p { display:flex-end;
+        text-align: justify;
+        padding: 0px 0px;
+        margin: 0px 0px;
+        gap: 0px;
+        width: 50%;
+       font-size: 40px; 
+
+
+       }
+       .serv button {
+         margin: 20px;
+         display: inline-block;
+         text-align: end;
+         gap: 20px;
+
+           color: white;
+
+       }
+       /* SERVICE LISTS PART CSS*/
+       h2 {
+        text-align: center;
+        color:#036ef1;
+
+       }
+       .service-lists { display: flex;
+        align-items: center;
+        justify-content: space-around;
+        background:rgb(217, 231, 236);
+        padding: 5px 0px;
+        border-bottom: 1px;
+        gap: 5px;
+        }
+       .service-lists li { 
+        list-style-type: none;
+        background:#036ef1;
+        color: white;
+        padding: 40px 40px;
+        border-radius: 50%;
+        margin: 20px;
+        flex-wrap:wrap;
+
+      }
+      .data-image { display: flex;
+        width: 50%;
+        align-items: center;
+    }
+      .service-lists li:hover {
+        cursor: pointer;
+        color: black;
+      }
+       /* OUR PROCESS PART*/
+      .process-list { display: flex;
+        align-items: center;
+        justify-content: space-around;
+        background:rgb(217, 231, 236);
+        padding: 40px 0px;
+        margin-left: 20px;
+        border-bottom: 1px;
+        flex-wrap: wrap;
+        }
+/* HOW WE WORK PART*/
+      .work { display: flex;
+        align-items: center;
+        justify-content: space-around;
+        background:rgb(217, 231, 236);
+        padding: 60px 60px;
+        border-bottom: 1px;
+        gap: 5px;
+        flex-direction: row;
+        flex-wrap: wrap;
+        }
+       .work h4{ display: flex;
+        list-style-type: none;
+        background:#036ef1;
+        color: white;
+        font-size: larger;
+        padding: 30px 40px;
+        border-radius: 50%;
+        margin:0px;
+        flex-wrap: wrap;
+       }
+        .work p{ display: flex;
+          flex-direction: column;
+          font-size: 19px;
+        }
+
+
+/* FOOTER PART CSS*/
+       .footer {display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background:#d8d8d8;
+        flex-wrap: wrap;
+
+        }      
+          .fa { 
+            text-align: center;
+            padding: 4px;
+            margin: 4px;
+            font-size: 30px;
+            width: 40px;
+            height: 40px;
+            text-decoration:navajowhite;
+            text-align: center;
+            border-radius: 50%;
+            background-color: lightgreen;
+          }
+
+          .fa:hover {
+              opacity: 0.9;
+          }
+
+          .fa-facebook {
+            background: #3B5998;
+            color: white;
+
+          }
+
+          .fa-twitter {
+            background: #55ACEE;
+            color: white;
+          }
+
+          .fa-google {
+            background: #dd4b39;
+            color: white;
+          }
+
+          .fa-linkedin {
+            background: #007bb5;
+            color: white;
+          }
+
+          .fa-youtube {
+            background: #bb0000;
+            color: white;
+          }
+          .address{
+            flex-direction: column;
+            text-align: center;
+
+          }
+
+      .copyright {
+        text-align: center;
+        border-top: 1px solid #d8d8d8;
+        padding: 20px 0px;
+        margin: 20px 20px;
+        font-size: 12px;
+        font-weight: bold;
+        gap:20px;
+      }