javascript-done

index.html

@@ -282,15 +282,24 @@ <h1 class="profile-user-name">codespace_pets</h1>
 
 		</div>
 		<!-- End of gallery -->
-
-		<div class="loader"></div>
+		<div class="loading-circle"></div>
+
+		<script>
+			// JavaScript for the loading circle
+			window.addEventListener('scroll', function() {
+				const loadingCircle = document.querySelector('.loading-circle');
+				if (window.scrollY > 100) {
+					loadingCircle.style.display = 'block';
+				} else {
+					loadingCircle.style.display = 'none';
+				}
+			});
+		</script>
 
 	</div>
 	<!-- End of container -->
 
 </main>
-
-
 </body>
 </html>
 

index.js

@@ -0,0 +1,9 @@
+// JavaScript for the loading circle
+window.addEventListener('scroll', function() {
+    const loadingCircle = document.querySelector('.loading-circle');
+    if (window.scrollY > 100) {
+        loadingCircle.style.display = 'block';
+    } else {
+        loadingCircle.style.display = 'none';
+    }
+});

styles.css

@@ -1,23 +1,220 @@
 /* Base Styles */
-
-:root {
-    font-size: 10px;
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #fafafa;
 }
 
-*,
-*::before,
-*::after {
+.container {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 20px;
     box-sizing: border-box;
 }
 
-body {
-    font-family: "Open Sans", Arial, sans-serif;
-    min-height: 100vh;
-    background-color: #fafafa;
+header {
+    background-color: #fff;
+    border-bottom: 1px solid #dbdbdb;
+    padding: 20px 0;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+}
+
+.profile {
+    display: flex;
+    align-items: center;
+}
+
+.profile-image img {
+    border-radius: 50%;
+    width: 150px;
+    height: 150px;
+    border: 5px solid #304d30; /* Dark green circle around the picture */
+}
+
+.profile-info {
+    margin-left: 20px;
+}
+
+.profile-info h1 {
+    margin: 0;
+}
+
+.profile-user-settings {
+    display: flex;
+    align-items: center;
+}
+
+.profile-user-settings button {
+    margin-right: 10px;
+    border: 1px solid #dbdbdb;
+    padding: 5px 15px;
+    border-radius: 3px;
+    background-color: transparent;
+    color: #262626;
+    cursor: pointer;
+}
+
+.profile-stats {
+    margin-top: 10px;
+}
+
+.profile-stats p {
+    margin: 0;
+    font-size: 14px;
     color: #262626;
-    padding-bottom: 3rem;
 }
 
-img {
-    display: block;
+.profile-stat-count {
+    font-weight: bold;
+}
+
+.profile-bio {
+    margin-top: 10px;
+}
+
+.profile-bio p {
+    margin: 0;
+    font-size: 14px;
+    color: #333;
+}
+
+.profile-bio span {
+    font-weight: bold;
+}
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin-top: 20px;
+}
+
+.gallery-item {
+    position: relative;
+    overflow: hidden;
+    border-radius: 5px;
+    cursor: pointer;
 }
+
+.gallery-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.2s;
+}
+
+.gallery-item:hover img {
+    transform: scale(1.1);
+}
+
+.gallery-item-info {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.gallery-item-info ul {
+    display: flex;
+    list-style-type: none;
+    padding: 0;
+}
+
+.gallery-item-info li {
+    margin-right: 10px;
+}
+
+.fa-heart,
+.fa-comment {
+    margin-right: 5px;
+}
+
+.loader {
+    text-align: center;
+    margin-top: 20px;
+    display: none;
+}
+
+/* Instagram-like loading circle */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-circle {
+    border: 5px solid #ebeeeb; /* Light gray border */
+    border-top: 5px solid #405e3a; /* Blue border for animation */
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 2s linear infinite;
+    position: fixed;
+    bottom: 20px; /* Bottom position */
+    left: 50%;
+    transform: translateX(-50%); /* Center horizontally */
+    z-index: 999;
+    display: none; /* Hidden by default */
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 0 10px; /* Adjust the padding for smaller screens */
+    }
+
+    .profile-image img {
+        width: 100px; /* Adjust the width for smaller screens */
+        height: 100px; /* Adjust the height for smaller screens */
+    }
+
+    .profile-user-settings button {
+        margin-top: 10px; /* Adjust the margin for smaller screens */
+    }
+
+    .profile-bio {
+        font-size: 14px; /* Adjust the font size for smaller screens */
+    }
+
+    .gallery {
+        grid-template-columns: repeat(2, 1fr); /* Adjust the number of columns for smaller screens */
+        grid-gap: 10px; /* Adjust the gap between items for smaller screens */
+    }
+
+    .gallery-item-info {
+        padding: 5px; /* Adjust the padding for smaller screens */
+    }
+
+    .gallery-item-info li {
+        margin-right: 5px;
+    }
+
+    .fa-heart,
+    .fa-comment {
+        margin-right: 3px;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        max-width: 360px; /* Adjust the max-width for smaller screens */
+    }
+
+    .gallery {
+        grid-template-columns: 1fr; /* Adjust the number of columns for smaller screens */
+    }
+
+    .profile-stats {
+        display: none; /* Hide the stats on smaller screens */
+    }
+
+    .profile-bio {
+        display: none; /* Hide the bio on smaller screens */
+    }
+}