bug-fixes and mobile-1

Author: sanli-11

images/SpaceJoy-mobile.jpg

@@ -271,23 +271,23 @@ <h3>Contact Us</h3>
                       <ul class="horizontal-items">
                         <li>
                           <img
-                            id="facebook"
+                            id="fb"
                             src="images/svg/facebook-svgrepo-com.svg"
                             alt="Facebook"
                             width="45px"
                           />
                         </li>
                         <li>
                           <img
-                            id="twitter"
+                            id="tw"
                             src="images/svg/twitter-svgrepo-com.svg"
                             alt="Twitter"
                             width="45px"
                           />
                         </li>
                         <li>
                           <img
-                            id="instagram"
+                            id="ig"
                             src="images/svg/instagram-svgrepo-com.svg"
                             alt="Instagram"
                             width="45px"

index.html

@@ -1,8 +1,8 @@
 const floatingButton = document.querySelector("#floating-button");
 
-const facebook = document.querySelector("#facebook");
-const twitter = document.querySelector("#twitter");
-const instagram = document.querySelector("#instagram");
+const facebookTop = document.querySelector("#facebook");
+const twitterTop = document.querySelector("#twitter");
+const instagramTop = document.querySelector("#instagram");
 
 const allServices = document.querySelector("#view-services");
 const allProjects1 = document.querySelector("#view-projects");
@@ -12,22 +12,26 @@ const address = document.querySelector("#address");
 const email = document.querySelector("#email");
 const phone = document.querySelector("#phone");
 
+const facebookBottom = document.querySelector("#fb");
+const twitterBottom = document.querySelector("#tw");
+const instagramBottom = document.querySelector("#ig");
+
 const submit = document.querySelector("#submit");
 
 floatingButton.addEventListener("click", () => {
   const name = document.querySelector("#name");
   name.focus();
 });
 
-facebook.addEventListener("click", () => {
+facebookTop.addEventListener("click", () => {
   window.open("https://www.facebook.com", "_blank");
 });
 
-twitter.addEventListener("click", () => {
+twitterTop.addEventListener("click", () => {
   window.open("https://www.twitter.com", "_blank");
 });
 
-instagram.addEventListener("click", () => {
+instagramTop.addEventListener("click", () => {
   window.open("https://www.instagram.com", "_blank");
 });
 
@@ -55,6 +59,18 @@ phone.addEventListener("click", () => {
   window.open("tel:+1-888-405-8908", "_blank");
 });
 
+facebookBottom.addEventListener("click", () => {
+  window.open("https://www.facebook.com", "_blank");
+});
+
+twitterBottom.addEventListener("click", () => {
+  window.open("https://www.twitter.com", "_blank");
+});
+
+instagramBottom.addEventListener("click", () => {
+  window.open("https://www.instagram.com", "_blank");
+});
+
 submit.addEventListener("click", () => {
   const name = document.querySelector("#name");
   const email = document.querySelector("#email");

script.js

@@ -12,6 +12,19 @@
     color: white;
     min-width: 680px;
   }
+
+  #floating-button {
+    right: 1.25rem;
+  }
+
+  .background {
+    background-image: url(images/SpaceJoy-mobile.jpg);
+  }
+
+  .header {
+    padding-top: 1.5rem;
+    background-color: #121212;
+  }
 }
 
 body {