fikrcamp · Maajidmh · Nov 1, 2022
diff --git a/about.html b/about.html
@@ -4,10 +4,67 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/your-path-to-fontawesome/css/v5-font-face.css" rel="stylesheet" />
     <title>About page</title>
-    <link rel="stylesheet" href="style/style.css" />
+    <link rel="stylesheet" href="style/main.css" />
   </head>
   <body>
-    <!-- start here -->
+    <div class="section">
+      <div class="class=container">
+        <div class="tittle">
+          <h1>About US</h1>
+        </div>
+        <div class="content">
+          <h3> We'r full stack developer mastered HTML AND CSS</h3>
+            <p>professionalls who develops a software application's client and server side. 
+            <p>I apply a wide range of coding skills and help other programmers solve problems. 
+            <p>as a Full-stack developedirr I also test and debug software and optimize the code.</p>
+            <div class="button">
+              <a href="">Read more</a>
+            </div>
+            <h2 style="text-align:center">Our Team</h2>
+            <div class="row">
+              <div class="column">
+                <div class="card">
+                  <img src="/images/isma.jpeg" alt="Ismail" style="width:100%">
+                  <div class="container">
+                    <h2>Ismail Farah</h2>
+                    <p class="title">CEO & Founder</p>
+                    <p> A professional Data Analyst.</p>
+                    <p>caadilfarah@gmail.com.</p>
+                    <p><button class="button">Contact</button></p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="column">
+                <div class="card">
+                  <img src="/images/khalid.jpeg" alt="Khalid" style="width:100%">
+                  <div class="container">
+                    <h2>Khalid Awmuse</h2>
+                    <p class="title">Coordinator of E&M</p>
+                    <p>specializes of E&M, Research and Data Analayst</p>
+                    <p>Khalidawmuse@gmail.com</p>
+                    <p><button class="button">Contact</button></p>
+                  </div>
+                </div>
+              </div>
+
+              <div class="column">
+                <div class="card">
+                  <img src="/images/ilyas.jpeg" alt="Ilyas" style="width:100%">
+                  <div class="container">
+                    <h2>Ilyas Mohamed</h2>
+                    <p class="title"> A Senior Communication Specialist</p>
+                    <p>a dynamic and broad role 
+                    <p>which provides support and coordination across all areas of communication .</p>
+                    <p>ilyo.zaan@gmail.com.</p>
+                    <p><button class="button">Contact</button></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+
   </body>
 </html>
diff --git a/home.html b/home.html
@@ -4,10 +4,31 @@
     <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>Trading Floor</title>
     <link rel="stylesheet" href="style/style.css" />
   </head>
   <body>
-    <!-- start here -->
+    <div class="banner">
+      <div class="navbar">
+        <img src="/images/logo.jpg" class="=logo">
+        <ul>
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Trading</a></li>
+          <li><a href="#">Stocks</a></li>
+          <li><a href="#">Crypto</a></li>
+          <li><a href="#">Forex</a></li>
+        </ul>
+      </div>
+      <div class="content">
+        <h1>Trade with us</h1>
+        <p>Subscribe Easy tutorials Youtube Channel to watch more videos, <br>press the bell icon to get latest updates.</p>
+        <div>
+          <button type="button"><span></span>WATCH MORE</button>
+          <button type="button"><span></span>SUBSCRIBE</button>
+        </div>
+
+
+
+      </div>
   </body>
 </html>
diff --git a/images/back.jpg b/images/back.jpg
diff --git a/images/ilyas.jpeg b/images/ilyas.jpeg
diff --git a/images/isma.jpeg b/images/isma.jpeg
diff --git a/images/khalid.jpeg b/images/khalid.jpeg
diff --git a/images/logo.jfif b/images/logo.jfif
diff --git a/images/logo.jpg b/images/logo.jpg
diff --git a/images/pic.jfif b/images/pic.jfif
diff --git a/style/main.css b/style/main.css
@@ -0,0 +1,88 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    margin: 0;
+  }
+
+  html {
+    box-sizing: border-box;
+  }
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+
+  .column {
+    float: left;
+    width: 33.3%;
+    margin-bottom: 16px;
+    padding: 0 8px;
+  }
+
+  .card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    margin: 8px;
+  }
+
+  .about-section {
+    padding: 50px;
+    text-align: center;
+    background-color: #474e5d;
+    color: white;
+  }
+
+  .container {
+    padding: 0 16px;
+  }
+
+  .container::after, .row::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+
+  .title {
+    color: grey;
+  }
+
+  .button {
+    border: none;
+    outline: 0;
+    display: inline-block;
+    padding: 8px;
+    color: white;
+    background-color: #000;
+    text-align: center;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  .button:hover {
+    background-color: #555;
+  }
+
+  @media screen and (max-width: 650px) {
+    .column {
+      width: 100%;
+      display: block;
+    }
+  }
+h1 {
+    display: flex;
+    justify-content: center;
+
+
+}
+h3{
+    display: flex;
+    justify-content: center;
+
+}
+
+p{
+    display: flex;
+    justify-content: center;
+    font-weight: 200;
+    font-style: italic;
+    padding-left: 0%;
+    margin-top: 0%;
+}
diff --git a/style/style.css b/style/style.css
@@ -0,0 +1,107 @@
+*{
+    margin: 0;
+    padding:0;
+    font-family: sans-serifdar;
+}
+.banner{
+    width: 100;
+    height: 100vh;
+    background-image: url(/images/back.jpg);
+    background-size: cover;
+    background-position: center;
+}
+.navbar{
+    width: 85%;
+    margin: auto;
+    padding: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.logo{
+    width: 500px;
+    cursor: pointer;
+    margin: center;
+    display: flex;
+    justify-content: center;
+}
+.navbar ul li{
+    list-style: none;
+    display: inline-block;
+    margin: 0 20px;
+    position: relative;
+
+}
+.navbar ul li{
+    text-decoration: none;
+    color: darkblue;
+    text-transform: uppercase;
+}
+.navbar ul li::after{
+    content: '';
+    height: 3px;
+    background: #009688;
+    position: absolute;
+    left: 0;
+    bottom: -10px;
+    transition: 0.5s;
+
+}
+.navbar ul li:hover::after{
+    width: 100%;
+
+}
+.content{
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translatey(-50%);
+    text-align: center;
+    color: lightcoral;
+
+}
+
+.content h1{
+    margin-top: 80px;
+    font-size: 70px;
+}
+
+.content p{
+    margin: 20px auto;
+    font-weight: 100;
+    line-height: 25px;
+}
+button{
+    width: 200px;.
+    padding: 15px 0;
+    text-align:center;
+    margin: 20px 10px;
+    border-radius:25px;
+    font-weight:bold;
+    border:2px solid #009688;
+    background: transparent;
+    color: dark-blue;
+    cursor: pointer;
+    position:relative;
+    overflow: hidden;
+}
+
+span{
+    background:red;
+    height:100%;
+    width:0;
+    border: radius 25px;
+    position: absolute;
+    left:0;
+    bottom: 0;
+    z-index: -1;
+    transition: 0.5s;
+}
+
+button:hover span{
+    width: 100%;
+}
+
+button:hover{
+    border: none;
+}