Add files via upload

Phillip-tech · Feb 2, 2024 · dfbcbcb · dfbcbcb
1 parent 518c1e2
commit dfbcbcb
Showing 1 changed file with 399 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,399 @@
+<!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>