Upload files to "/"
This commit is contained in:
commit
1d2cf1de3f
27
README.md
Normal file
27
README.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# CertifyMaster
|
||||||
|
|
||||||
|
Try it: [CertifyMaster](https://certifymaster.netlify.app/)
|
||||||
|
|
||||||
|
CertifyMaster is an online platform dedicated to providing a curated list of free educational resources, certifications, and training programs across various technologies and fields. Our goal is to help learners and professionals advance their skills, enhance their knowledge, and gain valuable certifications to boost their careers.
|
||||||
|
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Curated List of Resources**: A comprehensive collection of free courses, certifications, and training programs from top providers.
|
||||||
|
- **Collapsible Sections**: Organized content with collapsible sections for easy navigation and a clean interface.
|
||||||
|
- **Filtering System**: Advanced filtering options to help users quickly find relevant resources based on technology, provider, or certification type.
|
||||||
|
- **Search Functionality**: Robust search functionality to locate specific courses or certifications efficiently.
|
||||||
|
- **Up-to-Date Information**: Regular updates to ensure the latest and most relevant resources are available.
|
||||||
|
- **Back to Top Button**: Convenient navigation with a back-to-top button for easy access to the main menu.
|
||||||
|
|
||||||
|
## Footer Information
|
||||||
|
|
||||||
|
This GPA Calculator was created by **Mohammed Nuseirat**. Connect with me on [LinkedIn](https://www.linkedin.com/in/mohammednuseirat/) and [X](https://x.com/MohaNuseirat).
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||||
|
|
||||||
|
CertifyMaster is open-source and available under the MIT License. See the LICENSE file for more details.
|
||||||
|
|
||||||
|
By using CertifyMaster, you are taking a significant step towards enhancing your professional skills and knowledge with access to some of the best free educational resources available online.
|
||||||
135
certifications.js
Normal file
135
certifications.js
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
fetch('data.json')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
// Access the parsed data
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
// Populate General certifications
|
||||||
|
populateCertifications(data.general, '#general', 5);
|
||||||
|
|
||||||
|
// Populate Security certifications
|
||||||
|
populateCertifications(data.security, '#security', 4);
|
||||||
|
|
||||||
|
// Populate Databases certifications
|
||||||
|
populateCertifications(data.databases, '#databases', 4);
|
||||||
|
|
||||||
|
// Populate Project Management certifications
|
||||||
|
populateCertifications(data['project-management'], '#project-management', 4);
|
||||||
|
|
||||||
|
// Populate Marketing certifications
|
||||||
|
populateCertifications(data.marketing, '#marketing', 4);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to populate certifications for a specific section
|
||||||
|
function populateCertifications(certifications, sectionId, columnCount) {
|
||||||
|
const tableBody = document.querySelector(`${sectionId} tbody`);
|
||||||
|
certifications.forEach(certification => {
|
||||||
|
const row = createTableRow(certification, columnCount);
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to create table row
|
||||||
|
function createTableRow(certification, columnCount) {
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
if (columnCount === 5) {
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${certification.technology}</td>
|
||||||
|
<td>${certification.provider}</td>
|
||||||
|
<td>${certification.description}</td>
|
||||||
|
<td><a href="${certification.link}" target="_blank">Link</a></td>
|
||||||
|
<td>${certification.expiration}</td>
|
||||||
|
`;
|
||||||
|
} else if (columnCount === 4) {
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${certification.provider}</td>
|
||||||
|
<td>${certification.description}</td>
|
||||||
|
<td><a href="${certification.link}" target="_blank">Link</a></td>
|
||||||
|
<td>${certification.expiration}</td>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Function to filter certifications based on expiration date
|
||||||
|
function filterByExpiration(section, expiration) {
|
||||||
|
const rows = document.querySelectorAll(`#${section} tbody tr`);
|
||||||
|
rows.forEach(row => {
|
||||||
|
const expirationCell = row.querySelector('td:last-child');
|
||||||
|
const expirationText = expirationCell.textContent.trim();
|
||||||
|
row.style.display = expiration === "" || expirationText.includes(expiration) ? '' : 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Function to filter certifications based on provider name
|
||||||
|
function filterByProvider(section, provider) {
|
||||||
|
const rows = document.querySelectorAll(`#${section} tbody tr`);
|
||||||
|
rows.forEach(row => {
|
||||||
|
const providerCell = row.querySelector('td:nth-child(2)');
|
||||||
|
const providerText = providerCell.textContent.trim().toLowerCase();
|
||||||
|
row.style.display = providerText.includes(provider) ? '' : 'none';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event listeners for filtering options
|
||||||
|
document.querySelectorAll('.filter-options select').forEach(selectElement => {
|
||||||
|
const section = selectElement.id.split('-')[2];
|
||||||
|
selectElement.addEventListener('change', (event) => {
|
||||||
|
const expiration = event.target.value;
|
||||||
|
filterByExpiration(section, expiration);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.filter-options input').forEach(inputElement => {
|
||||||
|
const section = inputElement.id.split('-')[2];
|
||||||
|
inputElement.addEventListener('input', (event) => {
|
||||||
|
const provider = event.target.value.toLowerCase();
|
||||||
|
filterByProvider(section, provider);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Function to toggle the visibility of sections
|
||||||
|
function toggleSection(sectionId) {
|
||||||
|
const section = document.getElementById(sectionId);
|
||||||
|
const sectionBody = section.querySelector('tbody');
|
||||||
|
|
||||||
|
// Toggle the display style
|
||||||
|
sectionBody.style.display = sectionBody.style.display === 'none' ? 'table-row-group' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
// event listeners to the section headers for toggling
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const sectionHeaders = document.querySelectorAll('.section > h2');
|
||||||
|
sectionHeaders.forEach(header => {
|
||||||
|
header.addEventListener('click', () => {
|
||||||
|
const sectionId = header.parentElement.id;
|
||||||
|
toggleSection(sectionId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Call the functions to populate the tables
|
||||||
|
populateCertifications();
|
||||||
148
index.html
Normal file
148
index.html
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>CertifyMaster - Free Courses & Certifications</title>
|
||||||
|
<!-- Link to the external CSS file -->
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<!-- Link to Font Awesome for icons -->
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Header section containing the title and description -->
|
||||||
|
<header class="glass">
|
||||||
|
<h1>CertifyMaster</h1>
|
||||||
|
<p>A curated list of free courses & certifications.<br>By CloudStudyNet, Site created by Mohammed Nuseirat.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Navigation menu -->
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#general">General</a></li>
|
||||||
|
<li><a href="#security">Security</a></li>
|
||||||
|
<li><a href="#databases">Databases</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Main content container -->
|
||||||
|
<div class="container">
|
||||||
|
<!-- General Section -->
|
||||||
|
<section id="general" class="section glass-card">
|
||||||
|
<h2>General <span class="arrow">▼</span></h2>
|
||||||
|
<div class="filter-options">
|
||||||
|
<!-- Filter options for expiration and provider -->
|
||||||
|
<label for="expiration-filter-general">Expiration:</label>
|
||||||
|
<select id="expiration-filter-general">
|
||||||
|
<option value="">All</option>
|
||||||
|
<option value="None">No Expiration</option>
|
||||||
|
<option value="Limited">Limited Expiration</option>
|
||||||
|
<option value="Unknown">Unknown Expiration</option>
|
||||||
|
<option value="Unlimited">Unlimited Expiration</option>
|
||||||
|
</select>
|
||||||
|
<label for="provider-filter-general">Provider:</label>
|
||||||
|
<input type="text" id="provider-filter-general" placeholder="Filter by provider...">
|
||||||
|
</div>
|
||||||
|
<!-- Table to display certification details -->
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Technology</th>
|
||||||
|
<th>Provider</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Link</th>
|
||||||
|
<th>Expiration</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Security Section -->
|
||||||
|
<section id="security" class="section glass-card">
|
||||||
|
<h2>Security <span class="arrow">▼</span></h2>
|
||||||
|
<div class="filter-options">
|
||||||
|
<label for="expiration-filter-security">Expiration:</label>
|
||||||
|
<select id="expiration-filter-security">
|
||||||
|
<option value="">All</option>
|
||||||
|
<option value="None">No Expiration</option>
|
||||||
|
<option value="Limited">Limited Expiration</option>
|
||||||
|
<option value="Unknown">Unknown Expiration</option>
|
||||||
|
<option value="Unlimited">Unlimited Expiration</option>
|
||||||
|
</select>
|
||||||
|
<label for="provider-filter-security">Provider:</label>
|
||||||
|
<input type="text" id="provider-filter-security" placeholder="Filter by provider...">
|
||||||
|
</div>
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Provider</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Link</th>
|
||||||
|
<th>Expiration</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Databases Section -->
|
||||||
|
<section id="databases" class="section glass-card">
|
||||||
|
<h2>Databases <span class="arrow">▼</span></h2>
|
||||||
|
<div class="filter-options">
|
||||||
|
<label for="expiration-filter-databases">Expiration:</label>
|
||||||
|
<select id="expiration-filter-databases">
|
||||||
|
<option value="">All</option>
|
||||||
|
<option value="None">No Expiration</option>
|
||||||
|
<option value="Limited">Limited Expiration</option>
|
||||||
|
<option value="Unknown">Unknown Expiration</option>
|
||||||
|
<option value="Unlimited">Unlimited Expiration</option>
|
||||||
|
</select>
|
||||||
|
<label for="provider-filter-databases">Provider:</label>
|
||||||
|
<input type="text" id="provider-filter-databases" placeholder="Filter by provider...">
|
||||||
|
</div>
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Provider</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Link</th>
|
||||||
|
<th>Expiration</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Back to top link -->
|
||||||
|
<p align="center"><a href="#general"><i class="fas fa-arrow-up"></i> <br></a></p>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="glass">
|
||||||
|
<div class="footer-content">
|
||||||
|
<h3>Devoloped by Mohammed Nuseirat</h3>
|
||||||
|
<ul class="socials">
|
||||||
|
<li><a href="https://www.linkedin.com/in/mohammednuseirat/"><i class="fab fa-linkedin fa-2x"></i></a></li>
|
||||||
|
<li><a href="https://github.com/nuseirat"><i class="fab fa-github fa-2x"></i></a></li>
|
||||||
|
<li><a href="https://nuseirat.github.io/"><i class="fas fa-globe fa-2x"></i></a></li>
|
||||||
|
<li><a href="https://x.com/mohanuseirat"><i class="fa-brands fa-x-twitter fa-2x"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Link to external JavaScript file -->
|
||||||
|
<script src="certifications.js"></script>
|
||||||
|
<!-- Font Awesome kit -->
|
||||||
|
<script src="https://kit.fontawesome.com/86e812f22e.js" crossorigin="anonymous"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
435
styles.css
Normal file
435
styles.css
Normal file
@ -0,0 +1,435 @@
|
|||||||
|
/* General body styling */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
|
background: linear-gradient(135deg, #020617, #1e293b);
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container to prevent touching borders */
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glass effect for containers */
|
||||||
|
.glass {
|
||||||
|
background: #ffffff10;
|
||||||
|
backdrop-filter: blur(15px);
|
||||||
|
-webkit-backdrop-filter: blur(15px);
|
||||||
|
border: 1px solid #ffffff4d;
|
||||||
|
box-shadow: 0 8px 32px #23243325;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glass effect for cards */
|
||||||
|
.glass-card {
|
||||||
|
background: #ffffff0a;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid #ffffff33;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
box-shadow: 0 15px 25px #1819254d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
background: rgba(255, 255, 255, 0.075);
|
||||||
|
box-shadow: 0 20px 45px #1a1a2466;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header styling */
|
||||||
|
header {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
nav {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
font-weight: 500;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section styling */
|
||||||
|
.section {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Description section */
|
||||||
|
.description {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description.expanded {
|
||||||
|
max-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-trigger {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-trigger:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filter section */
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 5px 20px rgba(31, 38, 135, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expiration-filter,
|
||||||
|
.provider-filter {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options label {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: white;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Improved dropdown styling */
|
||||||
|
.filter-options select,
|
||||||
|
.filter-options input {
|
||||||
|
padding: 0.8rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: #252638b3;
|
||||||
|
color: white;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1rem;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 2px 10px rgba(31, 38, 135, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options select option {
|
||||||
|
background-color: #5f6999;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options select:hover,
|
||||||
|
.filter-options input:hover,
|
||||||
|
.filter-options select:focus,
|
||||||
|
.filter-options input:focus {
|
||||||
|
background: #636670cc;
|
||||||
|
box-shadow: 0 5px 20px #1c1e334d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table styling */
|
||||||
|
.table-wrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 12px 15px;
|
||||||
|
text-align: left;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #1f268780;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
background-color: #ffffff1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-name {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-text {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expiration-text {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFD700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 20px 0;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 2rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling for the arrow icon including float, font size, transition effects, and cursor */
|
||||||
|
.arrow {
|
||||||
|
float: right;
|
||||||
|
font-size: 2rem;
|
||||||
|
transition: transform 0.3s, color 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Arrow hover effect for color and rotation */
|
||||||
|
.arrow:hover {
|
||||||
|
color: #fdfdfd;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Responsive styles */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-options select,
|
||||||
|
.filter-options input {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Unique text styles */
|
||||||
|
.provider-name {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #FFD700;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-text {
|
||||||
|
font-style: italic;
|
||||||
|
color: #E0E0E0;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
color: #00FF00;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expiration-text {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FF69B4;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.technology-text {
|
||||||
|
color: #87CEEB;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1rem;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Enhanced mobile styles */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile-optimized table layout */
|
||||||
|
table {
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table thead {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table tr {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
display: block;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
table td {
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
position: relative;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table td:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add labels for mobile view */
|
||||||
|
table td::before {
|
||||||
|
content: attr(data-label);
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #FFD700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.provider-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-text {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
line-height: 1.3;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expiration-text {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.technology-text {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove horizontal scroll */
|
||||||
|
.table-wrapper {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user