Days/Day23/index.html

<html>

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://kit.fontawesome.com/8c1f754ca0.js" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="styles.css">
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>

     <div class="app">
          <div class="header">
               <ul>
                    <li style="padding-left: 50px;">HOME</li>
                    <li>APPS</li>
                    <li>ACCOUNT</li>
                    <li style="white-space: nowrap;">CATEGORIES <span><i class="fa-solid fa-chevron-down"></i></span></li>
                    <li style="display: grid; justify-content: end; padding-right: 50px;"><i class="fa-solid fa-magnifying-glass"></i></li>
               </ul>
          </div>

          <div class="body-container">
               <div class="body-title">Recommended for you</div>
               <span class="body-subtitle">Based on your installs</span>

               <div class="body-container-grid">
                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=12Oqb8rNhNl79S-IMIFTxGSRyYZJ06iIU">
                         <div class="app-title">Microsoft Word</div>
                         <div class="app-company">Microsoft Corporation</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>
                    
                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=1UE4IwVUHQyjayQs_gKglIAj6P0OkVd-z">
                         <div class="app-title">Homeland Security</div>
                         <div class="app-company">U.S Government</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>

                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=1KVLjEpN3-ga4-iSAqGSExV0dcU7E5mzT">
                         <div class="app-title">Microsoft Word</div>
                         <div class="app-company">Microsoft Corporation</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>

                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=16IqQGZ2AHiiG-eF0Duf_BzKGWSDce4Qh">
                         <div class="app-title">Microsoft Word</div>
                         <div class="app-company">Microsoft Corporation</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>

                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=1oHwed65oiL5w-KCuSpFhuQEy-8KXULNO">
                         <div class="app-title">Microsoft Word</div>
                         <div class="app-company">Microsoft Corporation</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>

                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=1N6qV5e2QC-f2ZUVTdBWTBAAGKB_j4Byu">
                         <div class="app-title">Microsoft Word</div>
                         <div class="app-company">Microsoft Corporation</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>

                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=1GNJqS8puBIJ6kJI9pQBsfVY_IgFh-_Qe">
                         <div class="app-title">Microsoft Word</div>
                         <div class="app-company">Microsoft Corporation</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>

                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=1RQCVRoyU-Jnr1jxJiJriea1Y8aD05WpA">
                         <div class="app-title">Microsoft Word</div>
                         <div class="app-company">Microsoft Corporation</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>

                    <!-- APP CARD -->
                    <div class="app-card">
                         <img src="https://drive.google.com/uc?export=view&id=1V7y6566ua6GMoIG51jWhazbwe5vtBaXa">
                         <div class="app-title">Microsoft Word</div>
                         <div class="app-company">Microsoft Corporation</div>
                         <div class="app-rate">
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-solid fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                              <i class="fa-regular fa-star"></i>
                         </div>
                         <div class="app-install">INSTALL APP</div>
                    </div>
               </div>
          </div>
     </div>
</body>

</html>