add Certificate

Assets/Css/style.css

@@ -529,105 +529,6 @@ img {
   color: #5b0888;
 }
 
-/* services  */
-.services-container {
-  gap: 1.5rem;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.services-content {
-  position: relative;
-  background-color: var(--container-color);
-  padding: 3.5rem 0.5rem 1.25rem 1.5rem;
-  border-radius: 0.25rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-  transition: 0.3s;
-}
-
-.services-content:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-.services-icon {
-  display: block;
-  font-size: 1.5rem;
-  color: var(--first-color);
-  margin-bottom: var(--margin-bottom-0-1);
-}
-
-.services-title {
-  font-size: var(--h3-font-size);
-  margin-bottom: var(--margin-bottom-0-1);
-  font-weight: var(--font-medium);
-}
-
-.services-button {
-  cursor: pointer;
-  font-size: var(--small-font-size);
-}
-
-.services-button:hover .button-icon {
-  transform: translateX(0.25rem);
-}
-
-.services-box {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1rem;
-  z-index: var(--z-model);
-  opacity: 0;
-  visibility: hidden;
-  transition: 0.3s;
-}
-
-.services-box-content {
-  position: relative;
-  background-color: var(--container-color);
-  padding: 1.5rem;
-  border-radius: 0.5rem;
-}
-
-.services-box-services {
-  row-gap: 1rem;
-}
-
-.services-box-list {
-  display: flex;
-}
-
-.services-box-title {
-  font-size: var(--h3-font-size);
-  font-weight: var(--font-medium);
-  margin-bottom: var(--margin-bottom-0-1-5);
-}
-
-.services-box-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  font-size: 1.5rem;
-  color: var(--first-color);
-  cursor: pointer;
-}
-
-.services-list-icon {
-  color: var(--first-color);
-  margin-top: 0.25rem;
-  margin-right: var(--margin-bottom-0-25);
-}
-
-.active-box {
-  opacity: 1;
-  visibility: visible;
-}
-
 /* projects  */
 .portfolio-container {
   overflow: initial;

index.html

@@ -189,6 +189,35 @@ <h2 class="section-title">Skills</h2>
         </div>
       </section>
 
+      <section class="portfolio section" id="Certificate">
+        <h2 class="section-title">Certificate</h2>
+        <span class="section-subtitle">What do I get</span>
+
+        <div class="portfolio-container container swiper-container">
+          <div class="swiper-wrapper">
+            <!-- project1  -->
+            <div class="portfolio-content grid swiper-slide">
+              <img src="Assets/E-Certificat/1.png" alt="" class="portfolio-img" />
+              <img src="Assets/E-Certificat/2-1.png" alt="" class="portfolio-img" />
+            </div>
+            <!-- project2  -->
+            <div class="portfolio-content grid swiper-slide">
+              <img src="Assets/E-Certificat/3.jpeg" alt="" class="portfolio-img" />
+              <img src="Assets/E-Certificat/4-1.png" alt="" class="portfolio-img" />
+            </div>
+          </div>
+          <div class="swiper-angles">
+            <div class="swiper-button-next">
+              <i class="fa-solid fa-angle-right swiper-icon"></i>
+            </div>
+            <div class="swiper-button-prev">
+              <i class="fa-solid fa-angle-left swiper-icon"></i>
+            </div>
+          </div>
+          <div class="swiper-pagination"></div>
+        </div>
+      </section>
+
       <!-- qualification -->
       <section class="qualification section">
         <h2 class="section-title">Qualification</h2>
@@ -293,173 +322,8 @@ <h3 class="qualification-title">WEB DEVELOPER</h3>
         </div>
       </section>
 
-      <section class="services section" id="Certificate">
-        <h2 class="section-title">Services</h2>
-        <span class="section-subtitle">What I offer</span>
-
-        <div class="services-container container grid">
-          <!-- service 1  -->
-          <div class="services-content">
-            <div>
-              <i class="fa-solid fa-code services-icon"></i>
-
-              <h3 class="services-title">
-                Frontend <br />
-                Developer
-              </h3>
-            </div>
-            <span
-              class="button button-flex button-small button-link services-button"
-            >
-              View more
-              <i class="fa-solid fa-arrow-right button-icon"></i>
-            </span>
-
-            <div class="services-box">
-              <div class="services-box-content">
-                <h4 class="services-box-title">
-                  Frontend <br />
-                  Developer
-                </h4>
-                <i class="fa-solid fa-xmark services-box-close"></i>
-
-                <ul class="services-box-services grid">
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Responsive Web Design</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Interactive User Interfaces</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>SEO-Friendly Implementations</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Accessibility and UX Enhancement</p>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <!-- service 2  -->
-          <div class="services-content">
-            <div>
-              <i class="fa-brands fa-uikit services-icon"></i>
-              <h3 class="services-title">
-                Ui/Ux <br />
-                Designer
-              </h3>
-            </div>
-            <span
-              class="button button-flex button-small button-link services-button"
-            >
-              View more
-              <i class="fa-solid fa-arrow-right button-icon"></i>
-            </span>
-
-            <div class="services-box">
-              <div class="services-box-content">
-                <h4 class="services-box-title">
-                  Ui/Ux <br />
-                  Designer
-                </h4>
-                <i class="fa-solid fa-xmark services-box-close"></i>
-
-                <ul class="services-box-services grid">
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Intuitive User Interface Design</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Responsive and Mobile-First Design</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Seamless User Experience Optimization</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Accessibility and Usability Enhancements</p>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <!-- service 3  -->
-          <div class="services-content">
-            <div>
-              <i class="fa-solid fa-hashtag services-icon"></i>
-              <h3 class="services-title">
-                Content<br />
-                Creation
-              </h3>
-            </div>
-            <span
-              class="button button-flex button-small button-link services-button"
-            >
-              View more
-              <i class="fa-solid fa-arrow-right button-icon"></i>
-            </span>
-
-            <div class="services-box">
-              <div class="services-box-content">
-                <h4 class="services-box-title">
-                  Content <br />
-                  Creation
-                </h4>
-                <i class="fa-solid fa-xmark services-box-close"></i>
-
-                <ul class="services-box-services grid">
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Engaging Visual Content</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Social Media Management</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Content Strategy Consulting</p>
-                  </li>
-                  <li class="services-box-list">
-                    <i
-                      class="fa-regular fa-circle-check services-list-icon"
-                    ></i>
-                    <p>Brand Development and Growth</p>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+
+
 
       <!-- portfolio -->
       <section class="portfolio section" id="portfolio">