diff --git a/index.html b/index.html index 5f1495b..2d54d31 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,10 @@ Company Directory - + +

Company Directory

@@ -17,11 +18,14 @@

Company Directory

+
-
- +
+
+
- + + \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js index 9e811f3..77541b5 100644 --- 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); + }); +} -} \ No newline at end of file +// Call the function +createCompanyCards(companies); \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index e69de29..9bdcd03 100644 --- 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; +} \ No newline at end of file