149 lines
6.3 KiB
HTML
149 lines
6.3 KiB
HTML
|
<!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>
|