compiling everything together

GovanDBT · Dec 15, 2023 · 3ec8a17 · 3ec8a17
1 parent 940a0b8
commit 3ec8a17
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 104 deletions.
diff --git a/components/clients.html b/components/clients.html
@@ -0,0 +1,11 @@
+<section class="block client-block container">
+    <h2 data-aos="fade-up" class="subheading">Clients</h2>
+    <div class="block-secondary">
+        <i class="fa-brands fa-windows client-logo"></i>
+        <i class="fa-brands fa-shopify client-logo"></i>
+        <i class="fa-brands fa-amazon client-logo"></i>
+        <i class="fa-brands fa-vk client-logo"></i>
+        <i class="fa-brands fa-unsplash client-logo"></i>
+        <i class="fa-brands fa-weebly client-logo"></i>
+    </div>
+</section>
diff --git a/components/testimonial.html b/components/testimonial.html
@@ -0,0 +1,59 @@
+<section class="block testimonial-block container">
+    <!-- Slider main container -->
+    <div class="testimonial-swiper swiper">
+        <!-- Additional required wrapper -->
+        <div class="swiper-wrapper">
+            <!-- Slides -->
+            <div class="swiper-slide">
+                <blockquote class="testimonial">
+                    <img class="testimonial-img" src="images/woman.webp" alt="">
+                    <div class="testimonial-body">
+                        <h2 class="testimonial-name">Julian Goitsemang</h2>
+                        <p class="testimonial-desc">Really enjoyed my experience working together to help me build a
+                            portfolio for my business and I have to appreciate the time, quality and beautiful designs
+                            he put into presenting my business, Thank You.</p>
+                        <footer>
+                            <p class="occupation">Business Owner - Julian Nails and Care</p>
+                        </footer>
+                    </div>
+                </blockquote>
+            </div>
+
+            <div class="swiper-slide">
+                <blockquote class="testimonial">
+                    <img class="testimonial-img" src="images/woman.webp" alt="">
+                    <div class="testimonial-body">
+                        <h2 class="testimonial-name">Julian Goitsemang</h2>
+                        <p class="testimonial-desc">Really enjoyed my experience working together to help me build a
+                            portfolio for
+                            my business and I have to appreciate the time, quality and beautiful designs he put into
+                            presenting my
+                            business, Thank You.</p>
+                        <footer>
+                            <p class="occupation">Business Owner - Julian Nails and Care</p>
+                        </footer>
+                    </div>
+                </blockquote>
+            </div>
+
+            <div class="swiper-slide">
+                <blockquote class="testimonial">
+                    <img class="testimonial-img" src="images/woman.webp" alt="">
+                    <div class="testimonial-body">
+                        <h2 class="testimonial-name">Julian Goitsemang</h2>
+                        <p class="testimonial-desc">Really enjoyed my experience working together to help me build a
+                            portfolio for
+                            my business and I have to appreciate the time, quality and beautiful designs he put into
+                            presenting my
+                            business, Thank You.</p>
+                        <footer>
+                            <p class="occupation">Business Owner - Julian Nails and Care</p>
+                        </footer>
+                    </div>
+                </blockquote>
+            </div>
+        </div>
+        <!-- If we need pagination -->
+        <div class="swiper-pagination"></div>
+    </div>
+</section>
diff --git a/css/style.css b/css/style.css
@@ -41,7 +41,7 @@ h1,
 h2,
 h3,
 h4 {
-    font-family: Poppins;
+    font-family: Poppins, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     color: var(--heading-color);
     margin-bottom: 0.8rem;
     line-height: 1.1;
@@ -52,11 +52,11 @@ h1 {
 }
 
 h2 {
-    font-size: 4rem;
+    font-size: 3.5rem;
 }
 
 h3 {
-    font-size: 3.5rem;
+    font-size: 4rem;
 }
 
 h4 {
@@ -79,11 +79,11 @@ h4 {
     }
 
     h2 {
-        font-size: 5.5rem;
+        font-size: 3.2rem;
     }
 
     h3 {
-        font-size: 3.2rem;
+        font-size: 5.5rem;
     }
 
     h4 {
@@ -122,7 +122,7 @@ a:link {
 /* Buttons */
 
 .btn {
-    font-family: Poppins;
+    font-family: Poppins, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     text-transform: capitalize;
     text-decoration: none;
     border-radius: 40px;
@@ -147,6 +147,7 @@ a:link {
 .btn-primary {
     background: var(--primary-color);
     color: #fff;
+    transition: all .3s ease;
 }
 
 .btn-secondary {
@@ -240,7 +241,7 @@ a:link {
 .nav-list li a {
     color: var(--heading-color);
     transition: color .3s ease;
-    font-family: Poppins;
+    font-family: Poppins, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-size: 1.8rem;
     font-weight: 300;
     letter-spacing: -0.36px;
@@ -381,7 +382,7 @@ a:link {
 .callout-content p {
     color: var(--primary-color);
     font-size: 1.5rem;
-    font-family: Poppins;
+    font-family: Poppins, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-weight: 700;
 }
 
@@ -728,7 +729,7 @@ a.btn-callout {
 .footer-heading {
     color: var(--accent-color);
     font-size: 2.5rem;
-    font-family: Poppins;
+    font-family: Poppins, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-weight: 700;
     width: 100%;
     text-align: center;
@@ -1161,7 +1162,7 @@ progress[value]::-moz-progress-bar {
 
 .badge {
     font-size: 1.2rem;
-    font-family: Poppins;
+    font-family: Poppins, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-weight: 700;
     background: #ccc;
     color: #fff;
@@ -1225,7 +1226,7 @@ a.btn-card {
     outline: 5px solid var(--accent-color);
     line-height: normal;
     font-size: 1.5rem;
-    font-family: Poppins, Arial, Helvetica, sans-serif;
+    font-family: Poppins, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 
 .ribbon::before {

diff --git a/index.html b/index.html
@@ -37,7 +37,7 @@
                             <li><a href="index.html" class="highlighter">about</a></li>
                             <li><a href="pages/resume.html">resume</a></li>
                             <li><a href="pages/portfolio.html">portfolio</a></li>
-                            <li><a href="#">blog</a></li>
+                            <li><a href="https://thembidev.hashnode.dev/" target="_blank">blog</a></li>
                             <li><a href="pages/contact.html">contact</a></li>
                         </ul>
                     </div>
@@ -65,7 +65,7 @@ <h1 class="title" data-aos="fade-in" data-aos-duration="3000">Let me bring <br>
     </section>
     <!--What I do section-->
     <section class="block feature-block container">
-        <h3 class="subheading">What i do</h3>
+        <h2 class="subheading">What i do</h2>
 
         <article class="feature-content grid grid-1x2">
             <div class="svg-feature-image" data-aos="fade-up">
@@ -75,7 +75,7 @@ <h3 class="subheading">What i do</h3>
             </div>
             <div class="feature-body" data-aos="fade-down">
                 <h1 class="feature-number one">1</h1>
-                <h2 class="feature-title">Craft with intelligence</h2>
+                <h3 class="feature-title">Craft with intelligence</h3>
                 <p>Integrates AI tools like Kroma and Relume, effortlessly generating content, frameworks, and vibrant color palettes for a visually aesthetic designs</p>
             </div>
         </article>
@@ -88,7 +88,7 @@ <h2 class="feature-title">Craft with intelligence</h2>
             </div>
             <div class="feature-body" data-aos="fade-down">
                 <h1 class="feature-number">2</h1>
-                <h2 class="feature-title">Design Alchemy</h2>
+                <h3 class="feature-title">Design Alchemy</h3>
                 <p>Employs creative precision of Figma, Photo-shop, and Illustrator to craft visually stunning and user-centric designs</p>
             </div>
         </article>
@@ -101,7 +101,7 @@ <h2 class="feature-title">Design Alchemy</h2>
             </div>
             <div class="feature-body" data-aos="fade-down">
                 <h1 class="feature-number">3</h1>
-                <h2 class="feature-title">Architecture the web</h2>
+                <h3 class="feature-title">Architecture the web</h3>
                 <p>Transforming code into seamless experiences by leverages programming languages to craft innovative websites and apps</p>
             </div>
         </article>
@@ -114,14 +114,14 @@ <h2 class="feature-title">Architecture the web</h2>
             </div>
             <div class="feature-body" data-aos="fade-down">
                 <h1 class="feature-number">4</h1>
-                <h2 class="feature-title">Continuous care</h2>
+                <h3 class="feature-title">Continuous care</h3>
                 <p>Ensuring optimal functionality by employing precision in ongoing maintenance to keep websites running smoothly</p>
             </div>
         </article>
     </section>
     <!--Designs -->
     <section class="block block-secondary design-block container">
-        <h3 data-aos="fade-up" class="subheading">My Designs</h3>
+        <h2 data-aos="fade-up" class="subheading">My Designs</h2>
         <!-- Slider main container -->
         <div class="design-swiper swiper">
             <!-- Additional required wrapper -->
@@ -166,70 +166,14 @@ <h3 data-aos="fade-up" class="subheading">My Designs</h3>
         </div>
     </section>
     <!--Testimonials-->
-    <section class="block testimonial-block container">
-        <!-- Slider main container -->
-        <div class="testimonial-swiper swiper">
-            <!-- Additional required wrapper -->
-            <div class="swiper-wrapper">
-                <!-- Slides -->
-                <div class="swiper-slide">
-                    <div class="testimonial">
-                        <img class="testimonial-img" src="images/woman.webp" alt="">
-                        <div class="testimonial-body">
-                            <h3 class="testimonial-name">Julian Goitsemang</h3>
-                            <p class="testimonial-desc">Really enjoyed my experience working together to help me build a portfolio for my business and I have to appreciate the time, quality and beautiful designs he put into presenting my business, Thank You.</p>
-                            <p class="occupation">Business Owner - Julian Nails and Care</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="swiper-slide">
-                    <div class="testimonial">
-                        <img class="testimonial-img" src="images/woman.webp" alt="">
-                        <div class="testimonial-body">
-                            <h3 class="testimonial-name">Julian Goitsemang</h3>
-                            <p class="testimonial-desc">Really enjoyed my experience working together to help me build a portfolio for
-                                my business and I have to appreciate the time, quality and beautiful designs he put into presenting my
-                                business, Thank You.</p>
-                            <p class="occupation">Business Owner - Julian Nails and Care</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="swiper-slide">
-                    <div class="testimonial">
-                        <img class="testimonial-img" src="images/woman.webp" alt="">
-                        <div class="testimonial-body">
-                            <h3 class="testimonial-name">Julian Goitsemang</h3>
-                            <p class="testimonial-desc">Really enjoyed my experience working together to help me build a portfolio for
-                                my business and I have to appreciate the time, quality and beautiful designs he put into presenting my
-                                business, Thank You.</p>
-                            <p class="occupation">Business Owner - Julian Nails and Care</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- If we need pagination -->
-            <div class="swiper-pagination"></div>
-        </div>
-    </section>
+
     <!--clients section-->
-    <section class="block client-block container">
-        <h3 data-aos="fade-up" class="subheading">Clients</h3>
-        <div class="block-secondary">
-            <i class="fa-brands fa-windows client-logo"></i>
-            <i class="fa-brands fa-shopify client-logo"></i>
-            <i class="fa-brands fa-amazon client-logo"></i>
-            <i class="fa-brands fa-vk client-logo"></i>
-            <i class="fa-brands fa-unsplash client-logo"></i>
-            <i class="fa-brands fa-weebly client-logo"></i>
-        </div>
-    </section>
+
     <!--Blog callout section-->
     <section class="block blog-block block-accent">
         <div class="container blog-body">
-            <h3 data-aos="flip-up" class="blog-heading">Check out my blog where I talk about my work and experience</h3>
-            <a data-aos="flip-up" href="#" class="btn btn-primary btn-blog">Blog</a>
+            <h2 data-aos="flip-up" class="blog-heading">Check out my blog where I talk about my work and experience</h2>
+            <a data-aos="flip-up" href="https://thembidev.hashnode.dev/" target="_blank" class="btn btn-primary btn-blog">Blog</a>
         </div>
     </section>
     <!--footer-->

diff --git a/js/main.js b/js/main.js
@@ -102,7 +102,7 @@ const swiper2 = new Swiper('.testimonial-swiper', {
   // Optional parameters
   loop: true,
   autoplay: {
-   delay: 8000,
+   delay: 9000,
   },
 
   // If we need pagination

diff --git a/pages/contact.html b/pages/contact.html
@@ -42,7 +42,7 @@
                         <li><a href="../index.html">about</a></li>
                         <li><a href="resume.html">resume</a></li>
                         <li><a href="portfolio.html">portfolio</a></li>
-                        <li><a href="#">blog</a></li>
+                        <li><a href="https://thembidev.hashnode.dev/" target="_blank">blog</a></li>
                         <li><a href="contact.html" class="highlighter">contact</a></li>
                     </ul>
                 </div>
@@ -79,7 +79,7 @@
     </section>
     <!-- contact form-->
     <section class="contact-forms container">
-        <h3 class="contact-form-header">Contact form</h3>
+        <h2 class="contact-form-header">Contact form</h2>
         <form class="form">
             <!-- onsubmit="sendEmail(); reset(); return false;" -->
             <div class="form-group">