Add Services section

company.html

@@ -18,7 +18,7 @@
                 <img src="images/header/logo.svg" alt="Deep Network">
             </a>
             <div class="navigation-links">
-                <a href=""> Services</a>
+                <a href="/services.html"> Services</a>
                 <a href="/company.html"> Company</a>
                 <a href=""> Case Studies</a>
                 <a href=""> Blog</a>
@@ -175,7 +175,7 @@ <h1>Want to join our <span style="color:var(--dark-blue)">team</span>?</h1>
         <nav id="footer-site-map">
             <h1>SITEMAP</h1>
             <a href="/index.html">Home</a>
-            <a href="">Services</a>
+            <a href="/services.html">Services</a>
             <a href="/company.html"> Company</a>
             <a href="">Case Study</a>
             <a href="">Blog</a>

css/common.css

@@ -123,6 +123,13 @@
   margin-left: auto;
 }
 
+.central-item-large {
+  max-width: 1200px;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 .custom-section header{
   color: var(--dark-blue);
 
@@ -283,4 +290,75 @@
 
 .contact-info img{
   margin-right: 10px;
+}
+
+/* Lets Talk */
+#lets-talk-section{
+  position: relative;
+  align-items: center;
+  text-align: center;
+
+  background: linear-gradient(180deg, rgba(7,34,73,0.7), rgba(7,34,73,1));
+
+  color: white;
+
+  padding-top: 350px;
+  margin-top: -150px;
+}
+
+#lets-talk-section::before{
+  position: absolute;
+
+  top: 0;
+
+  width: 100%;
+  height: 300px;
+
+  content: "";
+  z-index: 2;
+  left: 0;
+  background-color: white;
+
+  border-radius: 100% 0% 100% 0% / 0% 0% 100% 100% ;
+}
+
+#lets-talk-section p{
+  color: white;
+
+  margin: 1.5rem 0;
+}
+
+/* Technology */
+#technology-section{
+  display: flex;
+  align-items: center;
+
+  text-align: center;
+
+  position: relative;
+  z-index: 3;
+}
+
+#technology-section .carousel img{
+  margin: 0px 20px ;
+  padding: 20px;
+
+  height: 80px;
+
+  border: 1px solid lightgrey;
+  border-radius: 25px;
+
+  background: linear-gradient(180deg, rgba(153,153,153,0.08), white);
+}
+
+/* Card */
+.card{
+  padding: 40px;
+
+  border-radius: 5%;
+
+  background-color:white;
+  box-shadow: 15px 15px 15px var(--shadow-color);
+
+  text-align: left;
 }

css/company.css

@@ -65,7 +65,13 @@
     height: 104px;
     width: 106px;
 
-    margin-right: 15px;
+    object-fit: cover;
+
+    border: none;
+    background: none;
+
+    margin: 0 15px 0 0;
+    padding: 0;
 }
 
 /* Our team */

css/homepage.css

@@ -86,13 +86,7 @@
     height: 304px;
     width: 454px;
 
-    border-radius: 5%;
     border: 1px solid transparent;
-
-    background-color:white;
-    box-shadow: 15px 15px 15px var(--shadow-color);
-
-    text-align: left;
 }
 
 .services-box:hover{
@@ -120,25 +114,6 @@
     text-decoration: none;
 }
 
-/* Technology */
-#technology-section{
-    align-items: center;
-
-    text-align: center;
-}
-
-.carousel img{
-    margin: 0px 20px ;
-    padding: 20px;
-
-    height: 80px;
-
-    border: 1px solid lightgrey;
-    border-radius: 25px;
-
-    background: linear-gradient(180deg, rgba(153,153,153,0.08), white);
-}
-
 /* Business Model */
 #business-model-section{
     background-color: var(--light-blue);
@@ -261,42 +236,6 @@
     text-decoration: none;
 }
 
-/* Lets Talk */
-#lets-talk-section{
-    position: relative;
-    align-items: center;
-    text-align: center;
-
-    background: linear-gradient(180deg, rgba(7,34,73,0.7), rgba(7,34,73,1));
-
-    color: white;
-
-    padding-top: 350px;
-    margin-top: -150px;
-}
-
-#lets-talk-section::before{
-    position: absolute;
-
-    top: 0;
-
-    width: 100%;
-    height: 300px;
-
-    content: "";
-    z-index: 2;
-    left: 0;
-    background-color: white;
-
-    border-radius: 100% 0% 100% 0% / 0% 0% 100% 100% ;
-}
-
-#lets-talk-section p{
-    color: white;
-
-    margin: 1.5rem 0;
-}
-
 /* Testimonials */
 #testimonials-section{
     align-items: center;

css/services.css

@@ -0,0 +1,94 @@
+@import url("common.css");
+
+/* Services */
+#service-section{
+    display: flex;
+    flex-direction: column;
+}
+
+#main-image{
+    height: 494px;
+
+    object-fit: cover;
+}
+
+#service-section-content{
+    display: grid;
+    grid-template-columns: auto auto;
+
+    padding-top: 5.5rem;
+}
+
+#content-column{
+    padding-top: 0;
+}
+
+.dropdown-item{
+    margin-bottom: 15px;
+}
+
+.dropdown .card{
+    display: flex;
+    flex-direction: row;
+
+    justify-content: space-between;
+    align-items: center;
+}
+
+.dropdown .card header{
+    color: var(--dark-blue);
+    font-size: 25px;
+    font-weight: 500;
+}
+
+.dropdown-toggle{
+    height: 35px;
+    width: 35px;
+
+    object-fit:contain;
+}
+
+
+
+/* Ways of Work  */
+#ways-of-work-section{
+    align-items: center;
+
+    text-align: center;
+
+    background-color: var(--light-blue);
+}
+
+#work-grid{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+
+    gap: 26px;
+}
+
+.work-card{
+    display: grid;
+    grid-template-rows: 50px 1fr;
+    gap:24px;
+
+    height: 395px;
+    width: 382px;
+}
+
+.work-card h1{
+    display: flex;
+    align-items: flex-start;
+
+    margin: 0;
+    padding: 0;
+
+    font-size: 25px;
+    color: var(--dark-blue);
+}
+
+.work-card p{
+    margin: 0;
+    padding: 0;
+
+    font-size: 18px;
+}

index.html

@@ -16,7 +16,7 @@
                     <img src="images/header/logo.svg" alt="Deep Network">
                 </a>
                 <div class="navigation-links">
-                    <a href=""> Services</a>
+                    <a href="/services.html"> Services</a>
                     <a href="/company.html"> Company</a>
                     <a href=""> Case Studies</a>
                     <a href=""> Blog</a>
@@ -75,22 +75,22 @@ <h2>80+</h2>
             <h1>Our areas of expertise</h2>
             <p>From cloud infrastructure and big data, we deliver cutting edge solutions and expert <br>training tailored to your needs.</p>
             <div id="service-grid">
-                <div class="services-box">
+                <div class="services-box card">
                     <h1>Cloud <br>Services</h3>
                     <p>Expert cloud solutions tailored to your needs, backend by certified professionals and proven project success.</p>
                     <a href="">Learn more</a>
                 </div>
-                <div class="services-box">
+                <div class="services-box card">
                     <h1>LLM/AI Solutions <br>and LLMOps</h3>
                     <p>Advanced AI solutions for smarter decisions, automated knowledge management, and a competitive edge with cutting-edge LLM technology.</p>
                     <a href="">Learn more</a>
                 </div>
-                <div class="services-box">
+                <div class="services-box card">
                     <h1>Big Data <br>Analytics Platform</h3>
                     <p>Transform your data into insights with scalable analytics, enabling smarter decisions and real-time analysis.</p>
                     <a href="">Learn more</a>
                 </div>
-                <div class="services-box">
+                <div class="services-box card">
                     <h1>Trainings &<br>Workshops</h3>
                     <p>Expert training designed to enhance your skills and knowledge, led by industry professionals with proven experience.</p>
                     <a href="">Learn more</a>
@@ -219,7 +219,7 @@ <h1>What our clients say <br>about us</h1>
             <nav id="footer-site-map">
                 <h1>SITEMAP</h1>
                 <a href="/index.html">Home</a>
-                <a href="">Services</a>
+                <a href="/services.html">Services</a>
                 <a href="/company.html"> Company</a>
                 <a href="">Case Study</a>
                 <a href="">Blog</a>