feature section added

assets/png/mycollection/backup.txt

@@ -0,0 +1 @@
+eyJjb2xJZCI6eyJJRCI6MSwibmFtZSI6Ik15IGljb25zIGNvbGxlY3Rpb24iLCJib29rbWFya19pZCI6NDA1ODU4MDEsImNyZWF0ZWQiOjE3MTQzMzkzODIsInVwZGF0ZWQiOjE3MTQzMzk1MzksImFjdGl2ZSI6MSwic291cmNlIjoicmVtb3RlIiwib3JkZXIiOjAsImNvbG9yIjoiMDAwMDAwIiwic3RhdHVzIjoxfSwiY29sQm9va21hcmtJZCI6W3siaWQiOjE3MTQzMzk0MjQzMDQsIm5hbWUiOiJWZWN0b3IiLCJjb2xvciI6IiNYWFhYWFgiLCJwcmVtaXVtIjo0LCJzb3J0IjoxfSx7ImlkIjoxNzE0MzM5NDY3NzEzLCJuYW1lIjoiQ2hhdCIsImNvbG9yIjoiI1hYWFhYWCIsInByZW1pdW0iOjQsInNvcnQiOjJ9LHsiaWQiOjE3MTQzMzk0OTcyODYsIm5hbWUiOiJJbWFjIiwiY29sb3IiOiIjWFhYWFhYIiwicHJlbWl1bSI6NCwic29ydCI6M31dfQ==

index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" href="your_website_domain/css_root/flaticon.css">
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="flaticoncss.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
 </head>
 
@@ -35,6 +36,7 @@ <h3>PageOnes<pan class="redtext">.</pan>
             </div>
         </div>
     </nav>
+
     <section>
         <div class="home section1" id="home-section">
             <div class="container">
@@ -48,6 +50,7 @@ <h1 class="heading">
             </div>
         </div>
     </section>
+
     <section>
         <div class="section pt-0 section-1">
             <div class="container">
@@ -84,6 +87,7 @@ <h1 class="heading">
             </div>
         </div>
     </section>
+
     <section>
         <div class="services section bg-light" id="services-section">
             <div class="container">
@@ -168,6 +172,7 @@ <h3 class="mb-3"><a href="#">Iconography</a></h3>
             </div>
         </div>
     </section>
+
     <section>
         <div class="process section" id="process-section">
             <div class="container">
@@ -227,6 +232,7 @@ <h2 class="heading">Our Clients</h2>
             </div>
         </div>
     </section>
+
     <section>
         <div class="feature section" id="feature-section">
             <div class="container">
@@ -249,11 +255,7 @@ <h2 class="heading">Features</h2>
                     </div>
                 </div>
                 <div class="row g-5 justify-content-center" id="featureBox">
-                    <div class="col-xs-12 col-sm-6 col-md-6 featurebox">
-                        <div class="step feature">
-                            <span><img class="flaticon" src="./assets/png/vector.png" alt=""></span>
-                        </div>
-                    </div>
+
                 </div>
             </div>
         </div>
@@ -275,15 +277,22 @@ <h2 class="heading">Office&Teams</h2>
                                     alt="office Image">
                             </div>
                         </div>
-                        <div class="col-lg-5 aos-animate">
+                        <div class="col-lg-5 ps-lg-5 aos-animate">
                             <div class="mb-4">
-                                <p>
+                                <h3 class="heading mb-2 fw-bold">Our Office</h3>
+                                <p class="mb-4 desc">
                                     <strong class="text-Black">Separated they live in Bookmarksgrove
                                     </strong>
                                     right at the coast of the Semantics, a large language ocean.
-                                    Far far away, behind the word mountains, far from the
-                                    countries Vokalia and Consonantia, there live the blind texts.
-                                </p>
+                                        Far far away, behind the word mountains, far from the
+                                        countries Vokalia and Consonantia, there live the blind texts.
+                                    </p>
+                                    <p class="mb-4 desc">Far far away, behind the word mountains, far from the countries Vokalia and
+                                        Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right
+                                        at the coast of the Semantics, a large language ocean.</p>
+                                    <p class="mb-4 desc">A small river named Duden flows by their place and supplies it with the necessary
+                                        regelialia. It is a paradisematic country, in which roasted parts of sentences fly
+                                        into your mouth.</p>
                             </div>
                         </div>
                     </div>
@@ -292,7 +301,11 @@ <h2 class="heading">Office&Teams</h2>
     </section>
 
 
-
+    <footer class="justify-content-center">
+        <p>All rights Reserved @2024</p>
+        <div> Icons made by <a href="https://www.freepik.com" title="Freepik"> Freepik </a> from <a
+                href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com'</a></div>
+    </footer>
     <script src="https://code.jquery.com/jquery-3.7.1.js"
         integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

script.js

@@ -117,4 +117,55 @@ for (let i=0 ; i<clients.length;i++){
     </div>
   </div>`
 }
-clientBox.innerHTML = clientstr;
+clientBox.innerHTML = clientstr;
+
+
+
+const features = [
+    {
+        featureLogo:'./assets/png/vector.png',
+        featureName:"illustration",
+        featureDescription:"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
+    },
+    {
+        featureLogo:'./assets/png/chat.png',
+        featureName:"24/7 Support",
+        featureDescription:"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
+    },
+    {
+        featureLogo:'./assets/png/setting.png',
+        featureName:"easy to Use",
+        featureDescription:"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
+    },
+    {
+        featureLogo:'./assets/png/imac.png',
+        featureName:"web development",
+        featureDescription:"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
+    },
+    {
+        featureLogo:'./assets/png/send.png',
+        featureName:"intuitive",
+        featureDescription:"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
+    },
+    {
+        featureLogo:'./assets/png/dictionary.png',
+        featureName:"documentaion",
+        featureDescription:"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
+    },
+]
+
+
+const featureBox = document.getElementById('featureBox');
+console.log(featureBox)
+let featurestr='';
+for (let i=0; i<features.length;i++){
+    featurestr+=`<div class="col-xs-12 col-sm-6 col-md-6 col-lg-5 featureb">
+    <div class="step featureBox " id="fetureBox">
+        <span><img class="flaticon ${features[i].featureName}" src="${features[i].featureLogo}" alt=""></span>
+        <h3 id="FeatureName" class="redtext text-capitalize">${features[i].featureName}</h3>
+        <p class="mb-3 font-14" id="clientBoxPara">${features[i].featureDescription}</p>
+    </div>
+</div>`
+}
+
+featureBox.innerHTML = featurestr;

style.css

@@ -152,11 +152,13 @@ section .feature{
     /* display: inline; */
 }
 
+
 section .feature .flaticon{
     height: 80px;
     display: block;
     margin-bottom: 30px;
-    color: #ec1e64;
+}
+section .feature .illustration{
     rotate: -45deg;
 }
 
@@ -169,11 +171,17 @@ section .feature .flaticon{
 
 
 
-
 section .about .officeImage img{
     max-width: 100%;
     height: auto;
 }
+/* section .about h3 {
+    font-size: 28px;
+    font-weight: 700;
+} */
+section .about span {
+    margin-bottom: 10px;
+}
 
 
 
@@ -188,3 +196,14 @@ section .about .officeImage img{
     }
 
     }
+
+
+
+
+footer{
+    font-size: 5px;
+    color: #25283753;
+}
+footer p{
+    font-size: 12px;
+}