index.html

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CodeSpace Pets Instagram 😺</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>

       /* Additional Styles for Enhanced Layout and Responsiveness */

       :root {
           font-size: 10px; /* Set base font size */
       }

       *,
       *::before,
       *::after {
           box-sizing: border-box; /* Include padding and border in the element's total width and height */
       }

       body {
           font-family: "Open Sans", Arial, sans-serif; /* Set default font family */
           min-height: 100vh; /* Ensure a minimum height of the viewport */
           background-color: #fafafa; /* Set background color */
           color: #262626; /* Set text color */
           padding-bottom: 3rem; /* Add bottom padding */
           margin: 0; /* Remove default margin */
       }

       img {
           display: block; /* Make images block-level elements */
       }

       .container {
           max-width: 1200px; /* Set maximum width for the container */
           margin: 0 auto; /* Center the container horizontally */
           padding: 0 20px; /* Add padding to the container */
       }

       header {
           background-color: #fff; /* Set background color for the header */
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
       }

       /* Styles for the profile section */
       .profile {
           display: flex;
           align-items: center;
           padding: 20px 0;
       }

       .profile-image {
           border-radius: 50%; /* Make the profile image round */
           overflow: hidden;
           margin-right: 20px;
           width: 80px;
           height: 80px;
       }

       .profile-image img {
           width: 100%;
           height: 100%;
           object-fit: cover; /* Ensure the image covers the entire container */
       }

       .profile-user-settings {
           flex-grow: 1;
       }

       .profile-user-name {
           font-size: 2rem; /* Set font size for the username */
           margin: 0;
       }

       /* Styles for the profile statistics */
       .profile-stats {
           list-style: none;
           display: flex;
       }

       .profile-stats li {
           margin-right: 20px;
           font-size: 1.2rem;
       }

       .profile-bio {
           margin-top: 20px; /* Add top margin for the bio */
       }

       /* Styles for the image gallery */
       .gallery {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
           gap: 20px;
       }

       .gallery-item {
           position: relative;
           cursor: pointer;
       }

       .gallery-item:hover {
           opacity: 0.8; /* Reduce opacity on hover */
       }

       .gallery-item img {
           width: 100%;
           height: 100%;
           object-fit: cover; /* Ensure images cover the entire container */
       }

       /* Styles for the loading spinner */
       .loader {
           margin: 20px auto; /* Center the loader */
           border: 8px solid #f3f3f3;
           border-top: 8px solid #3498db;
           border-radius: 50%;
           width: 50px;
           height: 50px;
           animation: spin 1s linear infinite;
       }

       @keyframes spin {
           0% { transform: rotate(0deg); }
           100% { transform: rotate(360deg); }
       }
   </style>
</head>

<body>
   <header>
       <div class="container">
           <!-- Profile section -->
           <div class="profile">
               <div class="profile-image">
                   <img src="./images/cat-codespace.png" alt="Profile Image">
               </div>
               <div class="profile-user-settings">
                   <h1 class="profile-user-name">codespace_pets</h1>
                   <button class="btn profile-edit-btn">Edit Profile</button>
                   <button class="btn profile-settings-btn" aria-label="profile settings"><i class="fa fa-cog" aria-hidden="true"></i></button>
               </div>
               <div class="profile-stats">
                   <ul>
                       <li><span class="profile-stat-count">549</span> posts</li>
                       <li><span class="profile-stat-count">45,682</span> followers</li>
                       <li><span class="profile-stat-count">1</span> following</li>
                   </ul>
               </div>
               <div class="profile-bio">
                   <p><span class="profile-real-name">CodeSpace Pets 😺</span> The hangout place for the best pets 🐕🐇🐦</p>
               </div>
           </div>
       </div>
   </header>

   <main>
       <div class="container">

       <div class="gallery">

           <div class="gallery-item" tabindex="0">

               <img src="./images/bailey.PNG" class="gallery-image" alt="">

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 56</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 2</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/startlett.jpg" class="gallery-image" alt="">

               <div class="gallery-item-info">
                

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 89</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 5</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/mr-chomsky.png" class="gallery-image" alt="">

               <div class="gallery-item-type">

                   <span class="visually-hidden">Gallery</span><i class="fa fa-clone" aria-hidden="true"></i>

               </div>

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 42</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 1</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/scarab.png" class="gallery-image" alt="">

               <div class="gallery-item-type">

                   <span class="visually-hidden">Video</span><i class="fa fa-video" aria-hidden="true"></i>

               </div>

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 38</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 0</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/baronnashor.png" class="gallery-image" alt="">

               <div class="gallery-item-type">

                   <span class="visually-hidden">Gallery</span><i class="fa fa-clone" aria-hidden="true"></i>

               </div>

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 47</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 1</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/gabrielle.jpg" class="gallery-image" alt="">

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 94</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 3</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/jarrod.jpg" class="gallery-image" alt="">

               <div class="gallery-item-type">

                   <span class="visually-hidden">Gallery</span><i class="fa fa-clone" aria-hidden="true"></i>

               </div>

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 52</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 4</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/mr_goose.jpg" class="gallery-image" alt="">

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 66</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 2</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/dog-codespace.png" class="gallery-image" alt="">

               <div class="gallery-item-type">

                   <span class="visually-hidden">Gallery</span><i class="fa fa-clone" aria-hidden="true"></i>

               </div>

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 45</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 0</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/forrest.jpg" class="gallery-image" alt="">

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 34</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 1</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/louise.jpg" class="gallery-image" alt="">

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 41</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 0</li>
                   </ul>

               </div>

           </div>

           <div class="gallery-item" tabindex="0">

               <img src="./images/tired.jpg" class="gallery-image" alt="">

               <div class="gallery-item-type">

                   <span class="visually-hidden">Video</span><i class="fa fa-video" aria-hidden="true"></i>

               </div>

               <div class="gallery-item-info">

                   <ul>
                       <li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fa fa-heart" aria-hidden="true"></i> 30</li>
                       <li class="gallery-item-comments"><span class="visually-hidden">Comments:</span><i class="fa fa-comment" aria-hidden="true"></i> 2</li>
                   </ul>

               </div>

           </div>

       </div>
       <!-- End of gallery -->

       <div class="loader"></div>

   </div>
   <!-- End of container -->

   </main>

   <script>
       // Simulating dynamic loading with a setTimeout
       setTimeout(function() {
           document.querySelector('.loader').style.display = 'none'; // Hide the loader after a delay
       }, 2000); // Adjust the time as needed
   </script>
</body>

</html>