Merge pull request #25 from CodeWithGroup/feature/branding-hex-codes-fix

Changing hex codes to p tags and set some margin to make it more responsive

Author: codewithgithub

branding.html

@@ -23,44 +23,44 @@ <h2>Colours</h2>
         <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
             <circle cx="25" cy="25" r="25" fill="#1f5237" />
         </svg>
-        <h3 class="colour-label">#1f5237</h3>
+        <p class="colour-label">#1f5237</p>
     </div>
     <div class="col-4 col-md-2 text-center">
         <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
             <circle cx="25" cy="25" r="25" fill="#00793c" />
         </svg>
-        <h3 class="colour-label">#00793c</h3>
+        <p class="colour-label">#00793c</p>
     </div>
     <div class="col-4 col-md-2 text-center">
         <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
             <circle cx="25" cy="25" r="25" fill="#009545" />
         </svg>
-        <h3 class="colour-label">#009545</h3>
+        <p class="colour-label">#009545</p>
     </div>
     <div class="col-4 col-md-2 text-center">
         <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
             <circle cx="25" cy="25" r="25" fill="#00b050" />
         </svg>
-        <h3 class="colour-label">#00b050</h3>
+        <p class="colour-label">#00b050</p>
     </div>
     <div class="w-100 d-none d-md-block"></div>
     <div class="col-4 col-md-2 text-center">
         <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
             <circle cx="25" cy="25" r="25" fill="#a52a2a" />
         </svg>
-        <h3 class="colour-label">#a52a2a</h3>
+        <p class="colour-label">#a52a2a</p>
     </div>
     <div class="col-4 col-md-2 text-center">
         <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
             <circle cx="25" cy="25" r="25" fill="#000000" />
         </svg>
-        <h3 class="colour-label">#000000</h3>
+        <p class="colour-label">#000000</p>
     </div>
     <div class="col-4 col-md-2 text-center">
         <svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
             <circle cx="25" cy="25" r="24" fill="#f8f8f8" stroke="#000" stroke-width="0.5" />
         </svg>
-        <h3 class="colour-label">#f8f8f8</h3>
+        <p class="colour-label">#f8f8f8</p>
     </div>
 </div>
 <br />

css/style.css

@@ -399,6 +399,10 @@ div.event-book-button {
     color: var(--colour-white);
 }
 
+.colour-label{
+    margin-top:0.2em;
+}
+
 /* RESIZING (min-width) */
 
 @media (min-width: 526px) {