Add AmIResponsive image to README.md

k-nadia · Jul 6, 2024 · 8944d3f · 8944d3f
1 parent 074151c
commit 8944d3f
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ Deployed website can be be found here: [Kennet Shopping](https://k-nadia.github.
 <br><br>
 
 <p align="center">
-<img src ="assets/images/am-i-responsive-placeholder-image.JPG" width="auto" height="auto" alt="AmIResponsive placeholder image showing the following viewports: desktop, laptop, tablet, mobile">
+<img src ="assets/images/screenshots/amiresponsive.png" width="auto" height="auto" alt="AmIResponsive placeholder image showing the following viewports: desktop, laptop, tablet, mobile">
 </p>
 
 # Table of Contents
@@ -380,7 +380,7 @@ I realised I needed to specify my style rule to only target icons within the 'co
 ### **Validator Testing**
 
 - HTML - 
-- CSS -
+- CSS - There were no errors found when passing through official (Jigsaw) validator
 
 Google Chrome Dev Tools Lighthouse Testing Results:
 

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,5 +1,3 @@
-
-
 /* UNIVERSAL SELECTOR USED TO OVERRIDE DEFAULT STYLES */
 * {
     padding: 0;
@@ -26,14 +24,6 @@ body {
     font-style: normal;
 }
 
-/* P FONT TEST */
-p {
-    font-family: "Montserrat", sans-serif;
-    font-optical-sizing: auto;
-    font-weight: 400;
-    font-style: normal;
-} 
-
 header, main, footer {
     flex-shrink: 0;
 }
@@ -201,7 +191,7 @@ main {
     padding: 1rem;
 }
 
-section #icon {
+section .icon {
     font-size: 1.6rem;
 }
 
@@ -247,7 +237,6 @@ section #icon {
 
 .container-1 {
     max-width: 1800px;
-    background-color: none;
     margin: 5px;
 }
 
@@ -317,7 +306,6 @@ section #icon {
 }
 
 #accessibility {
-    size: 0.85rem;
     margin: 0.2rem 2rem;
     padding: 0 3rem 6rem 3rem;
 }

diff --git a/assets/images/screenshots/amiresponsive.png b/assets/images/screenshots/amiresponsive.png
diff --git a/index.html b/index.html
@@ -59,21 +59,21 @@ <h1 id="logo" class="barlow-condensed-semibold">
                 <div class="three-equal-columns">
                     <h2><a href="shop.html" aria-label="Go to the Shop page">Shop</a></h2>
                     <ul>
-                        <li><a href="shop.html" aria-label="Go to the Shop page" class="fa-solid fa-bag-shopping" id="icon"></a></i></li>
+                        <li><a href="shop.html" aria-label="Go to the Shop page" class="fa-solid fa-bag-shopping" class="icon"></a></li>
                         <li><p>Experience a variety of shops at Kennet Shopping. From big-brand stores to our unique collection of independent shops, there's something to suit everyone. </p></li>
                     </ul>
                 </div>
                 <div class="three-equal-columns">
                     <h2><a href="visit.html" aria-label="Go to the Visit Us page">Visit</a></h2>
                     <ul>
-                        <li><a href="visit.html" aria-label="Go to the Visit Us page" class="fa-solid fa-location-dot" id="icon"></a></i></li>
-                        <li></li><p>Plan your visit to Kennet Shopping, located in the heart of Newbury, Berkshire. Here you can find information on our facilities, opening hours, travel links and accessibility.</p></li>
+                        <li><a href="visit.html" aria-label="Go to the Visit Us page" class="fa-solid fa-location-dot" class="icon"></a></li>
+                        <li>Plan your visit to Kennet Shopping, located in the heart of Newbury, Berkshire. Here you can find information on our facilities, opening hours, travel links and accessibility.</li>
                     </ul>
                 </div>
                 <div class="three-equal-columns">
                     <h2><a href="contact-us.html" aria-label="Go to the Contact Us page">Contact Us</a></h2>
                     <ul>
-                        <li><a href="contact-us.html" aria-label="Go to the Contact Us page" class="fa-regular fa-envelope" id="icon"></a></i></li>
+                        <li><a href="contact-us.html" aria-label="Go to the Contact Us page" class="fa-regular fa-envelope" id="icon"></a></li>
                         <li><p>We would love to hear your thoughts! Contact us for leasing enquiries, promotional space hire, marketing, events, security, lost property or simply general feedback.</p></li>
                     </ul>
                 </div>
@@ -129,11 +129,11 @@ <h3>LINKS</h3>
                 <div class="footer-column">
                     <h3>FOLLOW US</h3>
                     <div class="social-links">
-                        <a href="https://www.facebook.com/KennetShopping" target="_blank" rel="noopener" aria-label="Visit our Facebook page (opens in a new tab)" <i class="fa-brands fa-facebook-f"></i>
+                        <a href="https://www.facebook.com/KennetShopping" target="_blank" rel="noopener" aria-label="Visit our Facebook page (opens in a new tab)" <i class="fa-brands fa-facebook-f">
                         </a>
-                        <a href="https://www.instagram.com/kennetshopping" target="_blank" rel="noopener" aria-label="Visit our Instagram page (opens in a new tab)" <i class="fa-brands fa-instagram"></i>
+                        <a href="https://www.instagram.com/kennetshopping" target="_blank" rel="noopener" aria-label="Visit our Instagram page (opens in a new tab)" <i class="fa-brands fa-instagram">
                         </a>
-                        <a href="https://twitter.com/kennet_shopping" target="_blank" rel="noopener" aria-label="Visit our X / Twitter page (opens in a new tab)" <i class="fa-brands fa-x-twitter"></i>
+                        <a href="https://twitter.com/kennet_shopping" target="_blank" rel="noopener" aria-label="Visit our X / Twitter page (opens in a new tab)" <i class="fa-brands fa-x-twitter">
                         </a>
                     </div>
                 </div>