edited: added soundcloud icon and made responsive on phones

dot4msc · dot4msc · commit 1bd293e5f45e · 2025-09-08T17:09:28.000-06:00
diff --git a/css/index.css b/css/index.css
@@ -81,6 +81,10 @@ html {
 #x-icon {
   width: 20%;
 }
+#soundcloud-icon {
+  width: 20%;
+  margin-bottom: 40px;
+}
 
 @media only screen and (max-width: 768px) {
   .hero {
@@ -116,4 +120,8 @@ html {
     margin: 20px;
   }
   
+  #soundcloud-icon {
+    width: 20%;
+    margin-bottom: 25px;
+  }
 }
diff --git a/img/SOUNDCLOUD_ICON.png b/img/SOUNDCLOUD_ICON.png
diff --git a/index.html b/index.html
@@ -21,6 +21,7 @@ <h2 class="about-header">About</h2>
         <a href="https://www.instagram.com/dot4music"><img id="instagram-icon"class="social-icon" src="./img/IG_ICON.png"/></a>
         <a href="https://www.x.com/dot4music"><img id="x-icon" class="social-icon" src="./img/X_ICON.png"/></a>
         <a href="https://www.tiktok.com/@dot4musiic"><img id="tiktok-icon" class="social-icon" src="./img/TIKTOK_ICON.png"/></a>
+        <a href="https://www.soundcloud.com/dot4music"><img id="soundcloud-icon" class="social-icon" src="./img/SOUNDCLOUD_ICON.png"/></a>
       </div>
     </div>
   </div>

Original file line number	Diff line number	Diff line change
`@@ -81,6 +81,10 @@ html {`
`81`	`81`	`#x-icon {`
`82`	`82`	`width: 20%;`
`83`	`83`	`}`
	`84`	`+#soundcloud-icon {`
	`85`	`+ width: 20%;`
	`86`	`+ margin-bottom: 40px;`
	`87`	`+}`
`84`	`88`
`85`	`89`	`@media only screen and (max-width: 768px) {`
`86`	`90`	`.hero {`
`@@ -116,4 +120,8 @@ html {`
`116`	`120`	`margin: 20px;`
`117`	`121`	`}`
`118`	`122`
	`123`	`+ #soundcloud-icon {`
	`124`	`+ width: 20%;`
	`125`	`+ margin-bottom: 25px;`
	`126`	`+ }`
`119`	`127`	`}`