wireframes also added to readme file

README.md

@@ -30,13 +30,23 @@ to hear them play in the future.  Social media links are included so you can fin
 
 ## Wireframes
 
-Basic wireframes for this project were created using Balsamiq and you can find a link to the balsamiq project file [here](#)
+Basic wireframes for this project were created using Balsamiq and you can find a link to the balsamiq project file [here](assets/readme/faux_djs_website_wireframes.bmpr)
 
 Here are pictures of the wireframes on their respective devices.
 
-- pics to follow
+### index.html on desktop
 
-# Features
+![index.html](assets/readme/wireframes/index.html.png)
+
+### index.html on tablet
+
+![index.html](assets/readme/wireframes/index.html_tablet.png)
+
+- index.html on mobile
+
+![index.html](assets/readme/wireframes/index.html_mobile.png)
+
+### Features
 
 #### Bootstrap Navbar
 
@@ -155,6 +165,12 @@ Devices emulated are as follows:
 
 ### Google Lighthouse testing documentation in PDF form [here](#)
 
+After commit 28 Google Lighthouse Audit identified that iframes had no titles from embedded soundcloud and spotify code on audio.html.  Added for better accessibility on screenreader.
+
+Also added rel="noopener” to target=“_blank” to  as google lighthouse identified this these cross-origin destinations as unsafe.
+
+Amended this on index.html, dates.html and contact.html also as all social media links included target=“_blank”
+
 ## W3C HTML and CSS validators – to test for any Errors in the code
 
 After commit 27 w3c html code checker returned errors for css being used inline to style width for embedded soundcloud and spotify code on audio.html.  fixed this by using a bespoke class and ameding style.css with the relevant code.

audio.html

@@ -50,7 +50,7 @@
                     <div class="col-md no-gutters faux-audio">
                         <h2>Club Music</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club"/>
-                        <iframe class="audio-links"
+                        <iframe  title="Faux Club Mix Santeria" class="audio-links"
                             height="300"
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
@@ -68,13 +68,13 @@ <h2>Club Music</h2>
                                 font-weight: 100;
                             "
                         >
-                            <a href="https://soundcloud.com/fauxdjs" title="Faux DJs" target="_blank" style="color: #cccccc; text-decoration: none;"></a> ·
-                            <a href="https://soundcloud.com/fauxdjs/santeri-a" title="Santeria" target="_blank" style="color: #cccccc; text-decoration: none;"></a>
+                            <a href="https://soundcloud.com/fauxdjs" title="Faux DJs" target="_blank" rel="noopener" style="color: #cccccc; text-decoration: none;"></a> ·
+                            <a href="https://soundcloud.com/fauxdjs/santeri-a" title="Santeria" target="_blank" rel="noopener" style="color: #cccccc; text-decoration: none;"></a>
                         </div>
 
                         <h2>Club Music</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club"/>
-                        <iframe class="audio-links"
+                        <iframe title="Faux Club Mix Santeria" class="audio-links"
                             height="300"
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
@@ -92,19 +92,19 @@ <h2>Club Music</h2>
                                 font-weight: 100;
                             "
                         >
-                            <a href="https://soundcloud.com/fauxdjs" title="Faux DJs" target="_blank" style="color: #cccccc; text-decoration: none;"></a> ·
-                            <a href="https://soundcloud.com/fauxdjs/santeri-a" title="Santeria" target="_blank" style="color: #cccccc; text-decoration: none;"></a>
+                            <a href="https://soundcloud.com/fauxdjs" title="Faux DJs" target="_blank" rel="noopener" style="color: #cccccc; text-decoration: none;"></a> ·
+                            <a href="https://soundcloud.com/fauxdjs/santeri-a" title="Santeria" target="_blank" rel="noopener" style="color: #cccccc; text-decoration: none;"></a>
                         </div>
 
                         <h2>Club Music - Spotify Playlist</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club"/>
-                        <iframe class="audio-links" src="https://open.spotify.com/embed/playlist/3IpLX1sUcAyrpu9TG9LrpG" height="300" allow="encrypted-media"></iframe>
+                        <iframe  title="Faux Club Music Spotify Playlist" class="audio-links" src="https://open.spotify.com/embed/playlist/3IpLX1sUcAyrpu9TG9LrpG" height="300" allow="encrypted-media"></iframe>
                     </div>
 
                     <div class="col-md no-gutters faux-audio">
                         <h2>Bar Vibes</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds"/>
-                        <iframe class="audio-links"
+                        <iframe  title="Faux Bar Vibes Mix Santeria" class="audio-links"
                             height="300"
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
@@ -122,13 +122,13 @@ <h2>Bar Vibes</h2>
                                 font-weight: 100;
                             "
                         >
-                            <a href="https://soundcloud.com/fauxdjs" title="Faux DJs" target="_blank" style="color: #cccccc; text-decoration: none;"></a> ·
-                            <a href="https://soundcloud.com/fauxdjs/santeri-a" title="Santeria" target="_blank" style="color: #cccccc; text-decoration: none;"></a>
+                            <a href="https://soundcloud.com/fauxdjs" title="Faux DJs" target="_blank" rel="noopener" style="color: #cccccc; text-decoration: none;"></a> ·
+                            <a href="https://soundcloud.com/fauxdjs/santeri-a" title="Santeria" target="_blank" rel="noopener"style="color: #cccccc; text-decoration: none;"></a>
                         </div>
 
                         <h2>Bar Vibes</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds"/>
-                        <iframe class="audio-links"
+                        <iframe  title="Faux Bar Vibes Mix Santeria" class="audio-links"
                             height="300"
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
@@ -146,19 +146,19 @@ <h2>Bar Vibes</h2>
                                 font-weight: 100;
                             "
                         >
-                            <a href="https://soundcloud.com/fauxdjs" title="Faux DJs" target="_blank" style="color: #cccccc; text-decoration: none;"></a> ·
-                            <a href="https://soundcloud.com/fauxdjs/santeri-a" title="Santeria" target="_blank" style="color: #cccccc; text-decoration: none;"></a>
+                            <a href="https://soundcloud.com/fauxdjs" title="Faux DJs" target="_blank" rel="noopener" style="color: #cccccc; text-decoration: none;"></a> ·
+                            <a href="https://soundcloud.com/fauxdjs/santeri-a" title="Santeria" target="_blank" rel="noopener" style="color: #cccccc; text-decoration: none;"></a>
                         </div>
 
                         <h2>Bar Vibes - Spotify Playlist</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds"/>
-                        <iframe class="audio-links" src="https://open.spotify.com/embed/playlist/5M18RVJ7ieNpgNbO42d5yE" height="300" allow="encrypted-media"></iframe>
+                        <iframe  title="Faux Bar Vibes Spotify Playlist" class="audio-links" src="https://open.spotify.com/embed/playlist/5M18RVJ7ieNpgNbO42d5yE" height="300" allow="encrypted-media"></iframe>
                     </div>
 
                     <div class="col-md no-gutters faux-audio">
                         <h2>Faux Edits</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club"/>
-                        <iframe class="audio-links"
+                        <iframe  title="Faux DJs Edits" class="audio-links"
                             height="300"
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/511943853&color=%23545454&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
@@ -176,8 +176,8 @@ <h2>Faux Edits</h2>
                                 font-weight: 100;
                             "
                         >
-                            <a href="https://soundcloud.com/fauxdiscocult" title="FAUX" target="_blank" style="color: #cccccc; text-decoration: none;"></a> ·
-                            <a href="https://soundcloud.com/fauxdiscocult/sets/edits" title="Edits" target="_blank" style="color: #cccccc; text-decoration: none;"></a>
+                            <a href="https://soundcloud.com/fauxdiscocult" title="FAUX" rel="noopener" target="_blank" style="color: #cccccc; text-decoration: none;"></a> ·
+                            <a href="https://soundcloud.com/fauxdiscocult/sets/edits" title="Edits" rel="noopener" target="_blank" style="color: #cccccc; text-decoration: none;"></a>
                         </div>
                     </div>
                 </div>
@@ -190,16 +190,16 @@ <h2>Faux Edits</h2>
             <div class="container-fluid bg-colour fixed-bottom">
                 <div class="row row-cols-4" id="icon-size">
                     <div class="col">
-                        <a href="https://www.facebook.com/FAUXDJS/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
+                        <a href="https://www.facebook.com/FAUXDJS/" target="_blank" rel="noopener"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://www.instagram.com/faux_djs/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
+                        <a href="https://www.instagram.com/faux_djs/" target="_blank" rel="noopener"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
+                        <a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank" rel="noopener"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
+                        <a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank" rel="noopener"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
                     </div>
                 </div>
             </div>

contact.html

@@ -90,16 +90,16 @@ <h2 class="contact-form-heading">Check our Availability for your gig!</h2>
             <div class="container-fluid bg-colour fixed-bottom">
                 <div class="row row-cols-4" id="icon-size">
                     <div class="col">
-                        <a href="https://www.facebook.com/FAUXDJS/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
+                        <a href="https://www.facebook.com/FAUXDJS/" target="_blank" rel="noopener"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://www.instagram.com/faux_djs/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
+                        <a href="https://www.instagram.com/faux_djs/" target="_blank" rel="noopener"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
+                        <a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank" rel="noopener"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
+                        <a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank" rel="noopener"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
                     </div>
                 </div>
             </div>

dates.html

@@ -98,16 +98,16 @@ <h2 id="table-heading">Check out this table to find out where we're playing in t
             <div class="container-fluid bg-colour fixed-bottom">
                 <div class="row row-cols-4" id="icon-size">
                     <div class="col">
-                        <a href="https://www.facebook.com/FAUXDJS/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
+                        <a href="https://www.facebook.com/FAUXDJS/" target="_blank" rel="noopener"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://www.instagram.com/faux_djs/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
+                        <a href="https://www.instagram.com/faux_djs/" target="_blank" rel="noopener"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
+                        <a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank" rel="noopener"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
+                        <a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank" rel="noopener"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
                     </div>
                 </div>
             </div>

index.html

@@ -73,16 +73,16 @@
             <div class="container-fluid bg-colour fixed-bottom">
                 <div class="row row-cols-4" id="icon-size">
                     <div class="col">
-                        <a href="https://www.facebook.com/FAUXDJS/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
+                        <a href="https://www.facebook.com/FAUXDJS/" target="_blank" rel="noopener"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://www.instagram.com/faux_djs/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
+                        <a href="https://www.instagram.com/faux_djs/" target="_blank" rel="noopener"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
+                        <a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank" rel="noopener"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
                     </div>
                     <div class="col">
-                        <a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
+                        <a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank" rel="noopener"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
                     </div>
                 </div>
             </div>