bookmars and final english version

Author: alirezatayebinejad

design 3/index.html

@@ -19,19 +19,19 @@
       <div class="header-container">
         <h1>VIBRACODE</h1>
         <nav>
-          <li><a class="active" href="#">HOME</a></li>
-          <li><a href="#">ABOUT</a></li>
-          <li><a href="#">SERVICES</a></li>
-          <li><a href="#">PRODUCTS</a></li>
-          <li><a href="#">CONTACT</a></li>
+          <li><a class="active" href="#home">HOME</a></li>
+          <li><a href="#about">ABOUT</a></li>
+          <li><a href="#services">SERVICES</a></li>
+          <li><a href="#projects">PROJECTS</a></li>
+          <li><a href="#contact">CONTACT</a></li>
         </nav>
       </div>
     </header>
 
     <main>
       <!-- showcase -->
 
-      <section class="showcase">
+      <section id="home" class="showcase">
         <div class="showcase-content">
           <h2>Building Websites and Mobile Apps For Boosting Your Business</h2>
           <p>
@@ -44,7 +44,7 @@ <h2>Building Websites and Mobile Apps For Boosting Your Business</h2>
 
       <!-- about -->
 
-      <section class="about">
+      <section id="about" class="about">
         <h2 class="about-text">ABOUT US</h2>
         <div class="about-content">
           <div class="picture">
@@ -78,7 +78,7 @@ <h2>SPECIALIZED IN WEB DESIGN AND DEVELOPMENT</h2>
 
       <!-- services -->
 
-      <section>
+      <section id="services">
         <h2 class="services-header">SERVICES</h2>
         <div class="services">
           <div>
@@ -143,7 +143,7 @@ <h3>SEO Services</h3>
 
       <!-- projects -->
 
-      <section>
+      <section id="projects">
         <h2 class="projects-text">PROJECTS</h2>
         <div class="projects">
           <div>
@@ -179,12 +179,18 @@ <h3>Ticket booking</h3>
 
     <footer>
       <!-- contact-->
-      <div class="footer-contact">
+      <div id="contact" class="footer-contact">
         <h2>CONTACT</h2>
         <form action="">
           <input type="email" placeholder="your email" />
           <input type="text" placeholder="subject" />
-          <textarea name="" id="" cols="30" rows="7" placeholder="your message"></textarea>
+          <textarea
+            name=""
+            id=""
+            cols="30"
+            rows="7"
+            placeholder="your message"
+          ></textarea>
           <input type="submit" value="submit" />
         </form>
       </div>

design 3/styles.css

@@ -4,10 +4,17 @@
   margin: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
+  scroll-behavior: smooth;
 }
 
-/* header styles */
-
+/* header styles */ 
+header{
+  background-color: white;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-bottom: 1px solid rgb(177, 177, 177);
+}
 .header-container {
   display: flex;
   width: 75%;
@@ -223,7 +230,7 @@ footer {
   width: 40%;
   margin: auto;
   padding: 20px 40px;
-  
+
   margin-bottom: 0;
 }
 .footer-contact input {
@@ -255,12 +262,12 @@ footer {
   margin: 10px;
 }
 
-footer .downfooter{
+footer .downfooter {
   width: 100%;
   background-color: #d11414;
   height: 50px;
 }
-footer .downfooter p{
+footer .downfooter p {
   color: white;
   line-height: 50px;
   text-align: center;