added contexts and style to /service/index.html

about/index.html

@@ -36,16 +36,16 @@
             </div>
 
             <div id="text-container">
-                <h1 class="text-title"> Prashant Shrestha </h1>
-                <span class="small-text"><h4> |Digital,Traditional Artist | Frontend developer |<br>| IT student | </span></h4> 
+              <h1 class="text-title"> Prashant Shrestha </h1>
+              <span class="small-text"><h4> |Digital,Traditional Artist | Frontend developer |<br>| IT student | </span></h4> 
 
-                <section id="about-me-text">
+              <section id="about-me-text">
 
-                    I'm Prashant Shrestha,a freelance Illustrator and Frontend developer based in Dharan,Nepal, currently pursuing bachulor's degree
-                    Information Technology. My style is a colorful blend of anime and realism. I maintain uniqueness in each piece
-                    by finding different middle grounds and various other factors.  
+                I'm Prashant Shrestha,a freelance Illustrator and Frontend developer based in Dharan,Nepal, currently pursuing bachulor's degree
+                Information Technology. My style is a colorful blend of anime and realism. I maintain uniqueness in each piece
+                by finding different middle grounds and various other factors.  
 
-                  </section>
+              </section>
             </div>
 
         </div>

index.html

@@ -32,7 +32,7 @@
 
     <section id="img-sec">
 
-      <img src="./images/CartoonizingFaces.png" alt="CartoonizingFaces.pn" class="display-img">
+      <img src="./images/CartoonizingFaces.png" alt="CartoonizingFaces.pn" class="display-img"> 
       <img src="./images/Sketch.png" alt="Sketch.png" class="display-img">
       <img src="./images/FireGirl.png" alt="FireGirl.png" class="display-img">
       <img src="./images/Nezuko.png" alt="Nezuko.png" class="display-img">
@@ -74,7 +74,7 @@ <h1 class="text-title"> PROJECTS </h1>
 
         <a href="./eternaldance/index.html">
           <div class="project-img-container">
-            <div class="fade"></div>
+            <div class="fade"></div> 
             <span class="overlay-text">Eternal Dance</span>
              <img src="./images/EternalDance.png" alt="EternalDance.png" class="project-img">
           </div>

service/index.html

@@ -27,7 +27,49 @@
 
 
   <main>
-
+
+    <section id="main-text-section">
+      <div id="title-container">
+        <h1 id="text-title"> Services </h1>
+      </div>
+
+      <div id="text-para-container">
+        <p id="text-para">
+          As a newcommer to the field of art and design, I currently offer limited range of services. However, I am
+          continually expanding my offerings. If a service is not listed below, please feel free to request it. While I will
+          strive to meet all the expectations, please do understand that some services may still be in development phase.
+        </p>
+      </div>
+    </section>
+
+
+    <section id="img-section">
+
+      <div id="img-container">
+
+        <a href="">
+
+          <div id="service-image-container-fade">
+            <div id="fade"></div>
+            <span class="overlay-text"> Illustrations </span>
+            <img src="./images/comms_1.png" alt="" class="service-img">
+          </div>
+
+        </a>
+
+
+        <a href="">
+
+          <div id="service-image-container-fade">
+            <div id="fade"></div>
+            <span class="overlay-text"> Portraits </span>
+            <img src="./images/CommsBenison.png" alt="" class="service-img">
+          </div>
+
+        </a>
+      </div>
+
+    </section>
 
   </main>
 

service/service-style.css

@@ -12,6 +12,7 @@ body{
 
 a{
     text-decoration: none;
+    color: black;
 }
 
 /* navbar */
@@ -62,16 +63,109 @@ ul{
 /* ============================ */
 /* End of Header */
 
+/* Beginning of main */
 
+main{
+    display: grid;
+    justify-content: center;
+    justify-items: center;
+}
+
+#main-text-section{
+    display: grid;
+    justify-items: center;
+    margin: 20px 0px 20px 0px;
+}
+
+#title-container{
+    display: grid;
+    justify-content: center;
+    align-items: center;
+}
+
+#text-title{
+    margin: 0;
+    padding: 0;
+    font-size: 3rem;
+    color: rgb(146, 69, 69);
+}
+
+#text-para-container{
+    width: 800px;
+    height: auto;
+    font-size: 1.2rem;
+    color: rgb(177, 94, 94);
+}
+
+/* Image Section */
+
+#img-container{
+    display: grid;
+    justify-items: center;
+    border: 1px solid red;
+    grid-template-columns: repeat(2,1fr);
+    gap: 10px;
+    width: 740px;
+    margin: 20px 0px 20px 0px;
+}
+
+#service-image-container-fade{
+    position: relative;
+    display: grid;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+}
 
 
+#fade{
+    position: absolute;
+    background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),transparent);
+    width: 350px;
+    height: 400px;
+    opacity: 1;
+    visibility: visible;
+    transition: visibility 0.3s ease , opacity 0.3s;
+}
 
+#service-image-container-fade:hover #fade{
+    visibility: hidden;
+    opacity: 0;
+}
+
+.overlay-text{
+    position: absolute;
+    color: white;
+    font-weight: bold;
+    font-size: 2rem;
+    margin-top: 100%;
+    word-spacing: 10px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
 
+#service-image-container-fade:hover .overlay-text{
+    margin-top: 0px;
+    opacity: 1;
+    visibility: visible;
+}
+
+
+.service-img{
+    width: 350px;
+    height: 400px;
+    object-fit: cover;
+    border-radius: 10px;
+}
 
 
 
 
+/* End of Image Section */
 
+/* ================================= */
+/* End of Main */
 
 /* footer */