Added very simple grid; commit to backkup

atifmmahmud · Dec 5, 2024 · efcc4f8 · efcc4f8
1 parent 29bc57e
commit efcc4f8
Show file tree

Hide file tree

Showing 3 changed files with 178 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Company Directory</title>
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="styles/styles.css">
 </head>
 <body>
+
   <header>
     <h1>Company Directory</h1>
     <input type="text" id="search" placeholder="Search companies..." oninput="filterCompanies()">
@@ -17,11 +18,14 @@ <h1>Company Directory</h1>
       <option value="retail">Retail</option>
     </select>
   </header>
+
   <main>
-    <div class="company-grid" id="companyGrid">
-      <!-- Dynamic content will be added here -->
+    <div class="container">
+        <div class="row" id="companyGrid"></div>
+      </div>
     </div>
   </main>
-  <script src="script.js"></script>
+
+  <script src="scripts/script.js"></script>
 </body>
 </html>
diff --git a/scripts/script.js b/scripts/script.js
@@ -1,7 +1,95 @@
-function renderCompanies() {
+// Array of companies
+const companies = [
+  {
+    name: "TechCorp",
+    logo: "https://via.placeholder.com/100",
+    url: "https://techcorp.com",
+    tags: ["Tech", "Innovation"],
+  },
+  {
+    name: "FinanceHub",
+    logo: "https://via.placeholder.com/100",
+    url: "https://financehub.com",
+    tags: ["Finance", "Banking"],
+  },
+  {
+    name: "RetailWorld",
+    logo: "https://via.placeholder.com/100",
+    url: "https://retailworld.com",
+    tags: ["Retail", "E-commerce"],
+  },
+  {
+    name: "RetailWorld",
+    logo: "https://via.placeholder.com/100",
+    url: "https://retailworld.com",
+    tags: ["Retail", "E-commerce"],
+  },
+  {
+    name: "RetailWorld",
+    logo: "https://via.placeholder.com/100",
+    url: "https://retailworld.com",
+    tags: ["Retail", "E-commerce"],
+  },
+  {
+    name: "RetailWorld",
+    logo: "https://via.placeholder.com/100",
+    url: "https://retailworld.com",
+    tags: ["Retail", "E-commerce"],
+  },
+  {
+    name: "RetailWorld",
+    logo: "https://via.placeholder.com/100",
+    url: "https://retailworld.com",
+    tags: ["Retail", "E-commerce"],
+  },
+];
 
-}
+// Function to create cards
+function createCompanyCards(companies) {
+  const grid = document.getElementById("companyGrid");
+
+  companies.forEach((company) => {
+    // Create column wrapper
+    const col = document.createElement("div");
+    col.className = "col-lg-4"; // Flex column for 3-per-row layout
+
+    // Create card container
+    const card = document.createElement("div");
+    card.className = "company-card";
+
+    // Add logo
+    const logo = document.createElement("img");
+    logo.src = company.logo;
+    logo.alt = `${company.name} Logo`;
+    card.appendChild(logo);
+
+    // Add name
+    const name = document.createElement("h3");
+    name.textContent = company.name;
+    card.appendChild(name);
 
-function filterCompanies() {
+    // Add link
+    const link = document.createElement("a");
+    link.href = company.url;
+    link.target = "_blank";
+    link.textContent = "Visit Website";
+    card.appendChild(link);
+
+    // Add tags
+    company.tags.forEach((tag) => {
+      const tagBubble = document.createElement("span");
+      tagBubble.textContent = tag;
+      tagBubble.className = "tag-bubble";
+      card.appendChild(tagBubble);
+    });
+
+    // Append card to column
+    col.appendChild(card);
+
+    // Append column to grid
+    grid.appendChild(col);
+  });
+}
 
-}
+// Call the function
+createCompanyCards(companies);
diff --git a/styles/styles.css b/styles/styles.css
@@ -0,0 +1,78 @@
+/* Container to center the content */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Row setup */
+.row {
+  display: flex;
+  flex-wrap: wrap; /* Wrap cards to the next row when needed */
+  margin-left: -15px; /* Match card padding for alignment */
+  margin-right: -15px;
+}
+
+/* Column behavior (e.g., col-lg-4) */
+.col-lg-4 {
+  flex: 0 0 33.333%; /* 3 columns per row */
+  max-width: 33.333%; /* Ensure max-width is the same */
+  padding-left: 15px;
+  padding-right: 15px;
+  box-sizing: border-box; /* Include padding in the box size */
+}
+
+.col-lg-12 {
+  flex: 0 0 100%; /* Full width for larger content */
+  max-width: 100%;
+}
+
+/* Company card styling */
+.company-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.company-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+.company-card img {
+  max-width: 100px;
+  margin-bottom: 10px;
+}
+
+.company-card h3 {
+  font-size: 1.2em;
+  margin: 10px 0;
+  color: #333;
+}
+
+.company-card a {
+  display: inline-block;
+  margin-top: 10px;
+  color: #007bff;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.company-card a:hover {
+  text-decoration: underline;
+}
+
+/* Tag bubble styles */
+.tag-bubble {
+  display: inline-block;
+  background-color: #007bff;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 15px;
+  font-size: 0.8em;
+  margin-top: 10px;
+}