diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..85245c9
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5505
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 2bd6da5..216182b 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <title>Our App</title>
-<link rel="stylesheet" href="style/main.css">
+<link rel="stylesheet" href="style.css">
 <meta name="viewport" content="width=width-device, initial-scale=1.0">
   </head>
 <body>
@@ -18,8 +18,9 @@
 
     </div>
     <div class="content-header">
+      
       <h1 id="logo">Our App</h1>
-      <ul>
+      <ul class="nav-bar">
         <li><a href="#">Services</a></li>
         <li><a href="#">Work</a></li>
         <li><a href="#">Contact</a></li>
@@ -33,13 +34,19 @@ <h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tem
   </header>
 
   <!-- main -->
-  <main>
+  <div class="h1-services">
+    
     <h1>Services</h1>
+
+  </div>
+  
+  <main>
+   
     <!-- box of services -->
 
 
     <!-- part 1 -->
-    <div class="part-services">
+    <div class="part-services1">
       <div class="icon">
         <img src="images/icon1.png" alt="device">
       </div>
@@ -54,7 +61,7 @@ <h1>Web desgin</h1>
     </div>
 
     <!-- part 2 -->
-    <div class="part-services">
+    <div class="part-services2">
       <div class="icon">
         <img src="images/icon2.png" alt="device">
       </div>
@@ -69,7 +76,7 @@ <h1>Web desgin</h1>
     </div>
 
     <!-- part 3 -->
-    <div class="part-services">
+    <div class="part-services3">
       <div class="icon">
         <img src="images/icon3.png" alt="device">
       </div>
@@ -85,7 +92,7 @@ <h1>Web desgin</h1>
 
 
     <!-- part 4 -->
-    <div class="part-services">
+    <div class="part-services4">
       <div class="icon">
         <img src="images/icon4.png" alt="device">
       </div>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..27ae3e8
--- /dev/null
+++ b/style.css
@@ -0,0 +1,112 @@
+@media only screen and (max-width: 600px) {
+  #logo {
+    color: rgb(199, 43, 43);
+    padding-left: 8%;
+    font-weight: bold;
+  }
+  header {
+    background-image: url("images/HeaderBackground1920x1280.jpg");
+    height: 780px;
+  }
+
+  ul {
+    list-style-type: none;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 5%;
+  }
+
+  li a {
+    display: block;
+    color: rgb(255, 255, 255);
+    padding: 5px;
+    text-decoration: none;
+    font-size: 20px;
+  }
+
+  /* Change the link color on hover */
+  li a:hover {
+    background-color: gray;
+    color: rgb(17, 77, 73);
+  }
+
+  .introduction {
+    font-family: "Times New Roman", Times, serif;
+    color: white;
+    padding-left: 8%;
+    font-size: 18px;
+    line-height: 1.8;
+  }
+
+  main {
+    text-align: center;
+  }
+  .h1-services {
+    text-align: center;
+  }
+}
+
+@media only screen and (min-width: 600px) {
+  #logo {
+    color: rgb(199, 43, 43);
+    padding-left: 8%;
+    font-weight: bold;
+  }
+
+  header {
+    background-image: url("images/HeaderBackground1920x1280.jpg");
+    height: 670px;
+    width: 1410px;
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  li {
+    float: right;
+  }
+  li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+  }
+  li a:hover {
+    background-color: gray;
+    color: rgb(17, 77, 73);
+  }
+
+  .introduction {
+    font-family: "Times New Roman", Times, serif;
+    color: white;
+    padding-left: 20%;
+    padding-right: 20%;
+    font-size: 25px;
+    line-height: 1.8;
+  }
+
+  main {
+    display: grid;
+    /* grid-template-columns: repeat(3, 1fr);
+      grid-auto-rows: minmax(100px, auto); */
+    gap: 10px;
+    /* grid-template-columns: 20% 20% 20% 20%; */
+    grid-template-columns: repeat(4, 1fr);
+    /* grid-template-rows: 100% 100% 100% 100%; */
+    text-align: center;
+  }
+
+  .part-services {
+    grid-row-start: 2;
+    grid-column-end: 7;
+  }
+  .h1-services {
+    text-align: center;
+  }
+}
