Market-African · Caytomahamed · Jul 1, 2021 · Jul 2, 2021 · Jul 2, 2021
diff --git a/css/main.css b/css/main.css
diff --git a/css/main.css.map b/css/main.css.map
diff --git a/header.png b/header.png
diff --git a/index.html b/index.html
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <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>Home page</title>
-</head>
-<body>
-    HOME PAGE 
-</body>
-</html>

diff --git a/logo.svg b/logo.svg
diff --git a/scss/main.scss b/scss/main.scss
@@ -0,0 +1,121 @@
+
+
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+
+// section
+// header
+
+*{
+    box-sizing: border-box;
+}
+li,a,.btn{
+    text-transform: uppercase;
+    font-size: 13px;
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.56);
+    font-weight: bolder;
+    font-family: 'Roboto', sans-serif;
+}
+.contianer{
+  margin: 0 auto;
+  max-width: 1140px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 25px;
+
+        .logo {
+            width: 100px;
+            cursor: pointer;
+            margin-right: 90px;  
+        }
+
+        .nav {
+
+            margin-right: auto;
+
+            ul{
+                display: flex;
+                  li{
+                      list-style-type: none;
+                       padding: 20px;
+
+
+                       a{   
+                          &.active{
+                             border-bottom: 3px solid;
+                          }
+                       }
+                  }
+            }
+        }
+     .icons {
+         font-size: 15px;
+         margin-right: auto;
+         color: rgba(0, 0, 0, 0.56);
+
+           i{
+            display: inline-block;
+            width: 60px;
+           }
+     }
+     .btn{
+         background:#025467;
+         color:#f3f3f3;
+         padding: 10px 15px;
+         margin-right: auto;
+        border: none;
+         border-radius: 3px;
+         &:hover{
+             background: rgb(30, 84, 131);;
+         }       
+     }
+}