Add mock ups to index2.html

index2.html

@@ -143,7 +143,7 @@ <h3 class="padding-bottom"><i class="fa-solid fa-check"></i><span>Web Design</sp
                 </div>
             </div>
         </div>
-        <div class="services section grey">
+        <div class="services section grey padding-top">
             <div class="container-1140">
                 <h2 class="center">What We Do</h2>
                 <hr>
@@ -177,26 +177,27 @@ <h3>Online Learning Websites</h3>
                 </div>
             </div>
         </div>
-        <div class="clients section container-1140">
+        <div class="clients section container-1140 padding-top">
             <h2 class="center">What We've Done</h2>
                 <hr>
             <div class="padding-top center">
                 <div class="row">
-                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p>Tech Diplomacy Academy</p></div>
-                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p>Tech Diplomacy Academy</p></div>
-                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p>Tech Diplomacy Academy</p></div>
-                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p>Tech Diplomacy Academy</p></div>
+                    <div class="col-3"><img src="images/clients/emrys.png" alt="Emrys Technology & Consultancy"><p class="customer">Emrys Technology & Consultancy</p></div>
+                    <div class="col-3"><img src="images/clients/happily-clappily-ever-laughter.png" alt="Happily Clappily Ever Laughter"><p class="customer">Happily Clappily Ever Laughter</p></div>
+                    <div class="col-3"><img src="images/clients/jenup-courses.png" alt="JenUp Courses"><p class="customer">JenUp Courses</p></div>
+                    <div class="col-3"><img src="images/clients/kiko-by-astons-of-london.png" alt="Kiko by Astons of London"><p class="customer">Kiko by Astons of London</p></div>
                 </div>
                 <div class="row">
-                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p>Tech Diplomacy Academy</p></div>
-                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p>Tech Diplomacy Academy</p></div>
-                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p>Tech Diplomacy Academy</p></div>
-                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p>Tech Diplomacy Academy</p></div>
+                    <div class="col-3"><img src="images/clients/lcg-lift-consultancy.png" alt="LCG Lift Consultancy"><p class="customer">LCG Lift Consultancy</p></div>
+                    <div class="col-3"><img src="images/clients/ld-tiling-contractors.png" alt="LD Tiling Contractors"><p class="customer">LD Tiling Contractors</p></div>
+                    <div class="col-3"><img src="images/clients/new-haw-community-centre.png" alt="New Haw Community Centre"><p class="customer">New Haw Community Centre</p></div>
+                    <div class="col-3"><img src="images/clients/tech-diplomacy-academy.jpg" alt="Tech Diplomacy Academy"><p class="customer">Tech Diplomacy Academy</p></div>
                 </div>
             </div>
+            <a class="btn-secondary padding-top" href="https://sybiltec.com/clients/">See All Clients >></a>
         </div>
         <div class="events section">
-            <div class="container-1140">
+            <div class="container-1140 padding-top">
                 <h2 class="center">Why Choose Me as Your Web Designer?</h2>
                 <hr>
                 <div class="row">
@@ -329,11 +330,11 @@ <h2>Blog</h2>
                                 <img src="https://sybiltec.com/images/white-and-blue-analogue-tachometer-gauge.jpg" 
                                 alt="White and blue analogue tachometer gauge"></a>
                             <div class="blog-card-text">                    
-                                <h3>8 Ways to Speed Up Your Windows PC</h3>
+                                <a href="https://sybiltec.com/ways-to-speed-up-your-windows-pc/" class="blog-title">8 Ways to Speed Up Your Windows PC</a>
                                 <p>17 April 2024</p>
                                 <p>Are you suffering from a slow PC? Read our latest post on how to make your computer or laptop run faster.</p>
-                                <div class="padding-bottom padding-top">
-                                    <a class="btn-primary" href="https://sybiltec.com/ways-to-speed-up-your-windows-pc/">Speed Up My PC!</a>   
+                                <div class="padding-top">
+                                    <a class="btn-secondary" href="https://sybiltec.com/ways-to-speed-up-your-windows-pc/">Speed Up My PC! >></a>   
                                 </div>
                             </div>
                         </div>
@@ -342,11 +343,11 @@ <h3>8 Ways to Speed Up Your Windows PC</h3>
                         <div class="blog-card">   
                             <a href="https://sybiltec.com/user-experience-ux/"><img src="https://sybiltec.com/images/white-and-black-laptop-400x209.jpg" alt="White and black laptop"></a>
                                 <div class="blog-card-text">                      
-                                <h3>How to Improve the User Experience of Your Website</h3>
+                                <a href="https://sybiltec.com/user-experience-ux/" class="blog-title">How to Improve the User Experience of Your Website</a>
                                 <p>20 March 2024</p>
                                 <p>Good user experience is paramount to your website's success. Read the article for tips on how to improve your website's UX.</p>
-                                <div class="padding-bottom padding-top">
-                                    <a class="btn-primary" href="https://sybiltec.com/user-experience-ux/">Improve My UX</a>   
+                                <div class="padding-top">
+                                    <a class="btn-secondary" href="https://sybiltec.com/user-experience-ux/">Improve My UX >></a>   
                                 </div>
                             </div>
                         </div>
@@ -356,19 +357,19 @@ <h3>How to Improve the User Experience of Your Website</h3>
                             <a href="https://sybiltec.com/accessible-website-design/"><img src="https://sybiltec.com/images/disabled-parking-350x183.jpg" 
                                 alt="Disabled parking"></a>  
                             <div class="blog-card-text">               
-                                <h3>Accessible Website Design</h3>
+                                <a href="https://sybiltec.com/accessible-website-design/" class="blog-title">Accessible Website Design</a>
                                 <p>10 March 2024</p>
                                 <p>Read the article for an introduction to accessibility and quick tips on how to create a website that caters to users with impairments and disabilities.</p>
-                                <div class="padding-bottom padding-top">
-                                    <a class="btn-primary" href="https://sybiltec.com/accessible-website-design/">Accessible Design</a>   
+                                <div class="padding-top">
+                                    <a class="btn-secondary" href="https://sybiltec.com/accessible-website-design/">Accessible Design >></a>   
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="center padding-bottom padding-top">
-                <a class="btn-primary" href="https://sybiltec.com/blog/">Read All Articles</a>   
+                <a class="btn-secondary" href="https://sybiltec.com/blog/">Read All Articles >></a>   
             </div>
         </div>
         </div>

styles2.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
 * {
     box-sizing: border-box;
 }
@@ -954,4 +955,13 @@ q {font-style: italic;}
 }
 .right-align {
     float: right;
+}
+.customer {
+    font-weight: 700;
+}
+.blog-title {
+    font-weight: 700;
+    font-size: 20px;
+    text-decoration: none;
+    color:#000000;
 }