danvics/debrid-services-comparison
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance header and footer design; update navigation links and descriptions

Browse source 
- Added a blurred background to the header for improved aesthetics.
- Introduced a logo wrapper with glow effect and separated logo text into primary and secondary spans.
- Updated navigation links to include text spans for better accessibility.
- Revamped hero section text for clarity and conciseness.
- Simplified section descriptions throughout the document for better readability.
- Enhanced footer with new logo design, tagline, and statistics icons.
- Updated quick links and resources in the footer with icons for visual appeal.
- Improved copyright and last updated information styling in the footer.
This commit is contained in:
fynks 2025-10-11 11:25:59 +05:00
parent b70a908985
commit 350e1367d9
2 changed files with 809 additions and 395 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

920
dist/css/styles.css vendored
View file

File diff suppressed because it is too large Load diff

284
dist/index.html vendored
View file

@ -273,41 +273,70 @@
<a class="skip-link" href="#main-content">Skip to main content</a> <a class="skip-link" href="#main-content">Skip to main content</a>
<div class="page-wrapper"> <div class="page-wrapper">
<header class="site-header"> <header class="site-header">
<div class="header-blur-bg"></div>
<div class="container"> <div class="container">
<div class="header-content"> <div class="header-content">
<a href="/" class="site-title"> <a href="/" class="site-title">
<svg class="logo-icon" role="img" aria-label="Debrid Comparison Logo"> <div class="logo-wrapper">
<use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" /> <svg class="logo-icon" role="img" aria-label="Debrid Comparison Logo">
</svg> <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
Debrid Compare </svg>
<div class="logo-glow"></div>
</div>
<span class="logo-text">
<span class="logo-primary">Debrid</span>
<span class="logo-secondary">Compare</span>
</span>
</a> </a>
<nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true" <nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true"
role="navigation"> role="navigation">
<a href="#what-are-debrid-services" class="nav-link">Intro</a> <a href="#what-are-debrid-services" class="nav-link">
<a href="#debrid-pricing-comparison" class="nav-link">Pricing</a> <span class="nav-link-text">Intro</span>
<a href="#supported-file-hosts" class="nav-link">Hosts</a> </a>
<a href="#compare-debrid-services" class="nav-link">Compare</a> <a href="#debrid-pricing-comparison" class="nav-link">
<a href="#adult-content-file-hosts" class="nav-link">Adult Hosts</a> <span class="nav-link-text">Pricing</span>
<a href="#refund-policies-legal" class="nav-link">Policies</a> </a>
<a href="#debrid-speed-test" class="nav-link">Speed Test</a> <a href="#supported-file-hosts" class="nav-link">
<a href="#service-status-monitoring" class="nav-link">Status</a> <span class="nav-link-text">Hosts</span>
<a href="#debrid-resources-tools" class="nav-link">Resources</a> </a>
<a href="#compare-debrid-services" class="nav-link">
<span class="nav-link-text">Compare</span>
</a>
<a href="#adult-content-file-hosts" class="nav-link">
<span class="nav-link-text">Adult Hosts</span>
</a>
<a href="#refund-policies-legal" class="nav-link">
<span class="nav-link-text">Policies</span>
</a>
<a href="#debrid-speed-test" class="nav-link">
<span class="nav-link-text">Speed Test</span>
</a>
<a href="#service-status-monitoring" class="nav-link">
<span class="nav-link-text">Status</span>
</a>
<a href="#debrid-resources-tools" class="nav-link">
<span class="nav-link-text">Resources</span>
</a>
</nav> </nav>
<div class="header-actions"> <div class="header-actions">
<button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode"
type="button"> type="button">
<svg class="sun-icon" role="img" aria-hidden="true"> <div class="theme-toggle-inner">
<use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" /> <svg class="sun-icon" role="img" aria-hidden="true">
</svg> <use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" />
<svg class="moon-icon" role="img" aria-hidden="true"> </svg>
<use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" /> <svg class="moon-icon" role="img" aria-hidden="true">
</svg> <use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</div>
</button> </button>
<button class="nav-toggle" id="navToggle" aria-label="Open navigation menu" <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
aria-controls="primary-navigation" aria-expanded="false" type="button"> aria-controls="primary-navigation" aria-expanded="false" type="button">
<span class="nav-toggle-bar"></span> <span class="nav-toggle-icon">
<span class="nav-toggle-bar"></span> <span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span> <span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
</span>
</button> </button>
</div> </div>
</div> </div>
@ -324,8 +353,8 @@
Compare Premium <span class="gradient-text">Debrid Services</span> Compare Premium <span class="gradient-text">Debrid Services</span>
</h1> </h1>
<p class="hero-description"> <p class="hero-description">
A community-driven, up-to-date comparison of premium debrid and multi-hoster services: pricing, 400+ file host support, Compare pricing, features, and 400+ file hosts across 9 premium debrid services.
refund policies, speed tests, and real-time performance monitoring. Find the perfect multi-hoster for your needs.
</p> </p>
<div class="hero-actions"> <div class="hero-actions">
<a href="#debrid-pricing-comparison" class="btn btn-primary">View Pricing</a> <a href="#debrid-pricing-comparison" class="btn btn-primary">View Pricing</a>
@ -352,8 +381,7 @@
<div class="section-header"> <div class="section-header">
<h2 id="what-title" class="section-title">What are Debrid Services? Premium Link Generators Explained</h2> <h2 id="what-title" class="section-title">What are Debrid Services? Premium Link Generators Explained</h2>
<p class="section-description"> <p class="section-description">
Debrid services (also known as premium link generators or multi-hosters) act as a high‑speed intermediary: they Debrid services fetch files from any supported host and serve you fast, ad-free direct links for streaming or downloading.
fetch files from any supported host, then serve you a fast, ad‑free direct link for streaming or downloading.
</p> </p>
<div class="meta-chips" aria-label="Key traits"> <div class="meta-chips" aria-label="Key traits">
<span class="chip">Premium link generator</span> <span class="chip">Premium link generator</span>
@ -420,7 +448,7 @@
<div class="content-container"> <div class="content-container">
<div class="section-header"> <div class="section-header">
<h2 id="pricing-title" class="section-title">Debrid Service Pricing Comparison 2025</h2> <h2 id="pricing-title" class="section-title">Debrid Service Pricing Comparison 2025</h2>
<p class="section-description">Compare subscription plans and costs across all major debrid services - from free trials to yearly plans <p class="section-description">Compare subscription costs across all major debrid services.
</p> </p>
</div> </div>
@ -597,11 +625,9 @@
<div class="content-container"> <div class="content-container">
<div class="section-header"> <div class="section-header">
<h2 id="hosts-title" class="section-title">Supported File Hosts - 400+ Services Compared</h2> <h2 id="hosts-title" class="section-title">Supported File Hosts - 400+ Services Compared</h2>
<p class="section-description">Browse and search through 400+ supported file hosting services including Mega, Rapidgator, Uptobox, and more <p class="section-description">Browse 400+ supported file hosting services.
</p> </p>
</div> </div> <div class="search-section">
<div class="search-section">
<form class="search-container" role="search" aria-label="Search file hosts" <form class="search-container" role="search" aria-label="Search file hosts"
onsubmit="return false"> onsubmit="return false">
<svg class="search-icon" role="img" aria-hidden="true"> <svg class="search-icon" role="img" aria-hidden="true">
@ -636,7 +662,7 @@
<div class="content-container"> <div class="content-container">
<div class="section-header"> <div class="section-header">
<h2 id="compare-title" class="section-title">Compare Debrid Services Side-by-Side</h2> <h2 id="compare-title" class="section-title">Compare Debrid Services Side-by-Side</h2>
<p class="section-description">Select two debrid services to see a detailed side-by-side comparison of features, pricing, and host support <p class="section-description">See a detailed side-by-side comparison of any two services.
</p> </p>
</div> </div>
@ -683,9 +709,7 @@
<div class="section-header"> <div class="section-header">
<h2 id="adult-hosts-title" class="section-title">Adult Content File Hosts Support</h2> <h2 id="adult-hosts-title" class="section-title">Adult Content File Hosts Support</h2>
<p class="section-description"> <p class="section-description">
Support for adult content varies significantly across debrid services. Compare which platforms Compare which debrid services support major adult file hosts.
actively support major adult file hosts, while others exclude them entirely due to
policy or legal considerations.
</p> </p>
</div> </div>
@ -728,8 +752,7 @@
<div class="section-header"> <div class="section-header">
<h2 id="policies-title" class="section-title">Refund Policies, Terms of Service & Legal Information</h2> <h2 id="policies-title" class="section-title">Refund Policies, Terms of Service & Legal Information</h2>
<p class="section-description"> <p class="section-description">
Official Terms of Service, Privacy Policies, Refund Policies, and Support pages for each debrid provider. Refund eligibility Review terms, privacy policies, and refund options for each service.
varies widely; always verify before purchase.
</p> </p>
</div> </div>
@ -838,8 +861,7 @@
<div class="section-header"> <div class="section-header">
<h2 id="speed-title" class="section-title">Debrid Service Speed Test & Performance</h2> <h2 id="speed-title" class="section-title">Debrid Service Speed Test & Performance</h2>
<p class="section-description"> <p class="section-description">
Test download speeds for debrid services. Actual speeds vary by location, time of day, host performance, and server load. Test before Test download speeds for each service. Results vary by location and server load.
committing to a long-term plan.
</p> </p>
</div> </div>
@ -985,8 +1007,7 @@
<div class="section-header"> <div class="section-header">
<h2 id="notes-title" class="section-title">Important Information & Disclaimers</h2> <h2 id="notes-title" class="section-title">Important Information & Disclaimers</h2>
<p class="section-description"> <p class="section-description">
This project aims to provide accurate and up-to-date information about debrid services, but the debrid service Information is updated regularly but debrid services change frequently. Verify details on official sites.
landscape is dynamic and constantly changing.
</p> </p>
</div> </div>
@ -1073,8 +1094,7 @@
<div class="content-container"> <div class="content-container">
<div class="section-header"> <div class="section-header">
<h2 id="resources-title" class="section-title">Debrid Resources, Tools & Community</h2> <h2 id="resources-title" class="section-title">Debrid Resources, Tools & Community</h2>
<p class="section-description">Enhance your debrid experience with these trusted tools, <p class="section-description">Discover browser extensions, tools, guides, and communities to enhance your debrid experience.</p>
browser extensions, guides, and active communities</p>
</div> </div>
<div class="resources-categories enhanced-resources"> <div class="resources-categories enhanced-resources">
@ -1210,36 +1230,93 @@
<!-- Footer --> <!-- Footer -->
<footer class="site-footer" role="contentinfo"> <footer class="site-footer" role="contentinfo">
<div class="footer-grid-bg"></div>
<div class="container"> <div class="container">
<div class="content-container"> <div class="content-container">
<div class="footer-content improved"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section footer-brand-section">
<div class="footer-brand"> <div class="footer-brand">
<svg class="footer-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" <div class="footer-logo-wrapper">
stroke-width="2"> <svg class="footer-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor"
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /> stroke-width="2">
</svg> <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
<h4>Debrid Compare</h4> </svg>
<div class="footer-logo-glow"></div>
</div>
<div class="footer-brand-text">
<h4>Debrid Compare</h4>
<p class="footer-tagline">Your Ultimate Comparison Hub</p>
</div>
</div> </div>
<p class="footer-description"> <p class="footer-description">
A comprehensive, community-driven comparison of premium debrid services. A comprehensive, community-driven comparison of premium debrid services.
Compare pricing, features, and host support to find the best service for your needs. Compare pricing, features, and host support to find the best service for your needs.
</p> </p>
<div class="footer-stats"> <div class="footer-stats">
<span class="footer-stat">9 Services</span> <div class="footer-stat">
<span class="footer-stat">400+ Hosts</span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<span>9 Services</span>
</div>
<div class="footer-stat">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg>
<span>400+ Hosts</span>
</div>
</div> </div>
</div> </div>
<div class="footer-section"> <div class="footer-section">
<h5>Quick Links</h5> <h5>Quick Links</h5>
<ul class="footer-links"> <ul class="footer-links">
<li><a href="#debrid-pricing-comparison">Pricing Comparison</a></li> <li><a href="#debrid-pricing-comparison">
<li><a href="#supported-file-hosts">File Hosts</a></li> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<li><a href="#compare-debrid-services">Compare Services</a></li> <circle cx="12" cy="12" r="10"></circle>
<li><a href="#refund-policies-legal">Policies & Legal</a></li> <polyline points="12 6 12 12 16 14"></polyline>
<li><a href="#debrid-speed-test">Speed Tests</a></li> </svg>
<li><a href="#service-status-monitoring">Service Status</a></li> Pricing Comparison
</a></li>
<li><a href="#supported-file-hosts">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
<polyline points="13 2 13 9 20 9"></polyline>
</svg>
File Hosts
</a></li>
<li><a href="#compare-debrid-services">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
</svg>
Compare Services
</a></li>
<li><a href="#refund-policies-legal">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
Policies & Legal
</a></li>
<li><a href="#debrid-speed-test">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M23 12a11.05 11.05 0 0 0-22 0zm-5 7a3 3 0 0 1-6 0z"></path>
</svg>
Speed Tests
</a></li>
<li><a href="#service-status-monitoring">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
Service Status
</a></li>
</ul> </ul>
</div> </div>
@ -1247,13 +1324,46 @@
<h5>Resources</h5> <h5>Resources</h5>
<ul class="footer-links"> <ul class="footer-links">
<li><a href="https://github.com/debridmediamanager/awesome-debrid" target="_blank" <li><a href="https://github.com/debridmediamanager/awesome-debrid" target="_blank"
rel="noopener noreferrer">Awesome Debrid</a></li> rel="noopener noreferrer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
Awesome Debrid
</a></li>
<li><a href="https://github.com/debridmediamanager/debrid-media-manager" target="_blank" <li><a href="https://github.com/debridmediamanager/debrid-media-manager" target="_blank"
rel="noopener noreferrer">DMM Tool</a></li> rel="noopener noreferrer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="12" y1="8" x2="12" y2="16"></line>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
DMM Tool
</a></li>
<li><a href="https://github.com/rogerfar/rdt-client" target="_blank" <li><a href="https://github.com/rogerfar/rdt-client" target="_blank"
rel="noopener noreferrer">RDT Client</a></li> rel="noopener noreferrer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
RDT Client
</a></li>
<li><a href="https://github.com/g0ldyy/comet" target="_blank" <li><a href="https://github.com/g0ldyy/comet" target="_blank"
rel="noopener noreferrer">Comet Addon</a></li> rel="noopener noreferrer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
Comet Addon
</a></li>
</ul> </ul>
</div> </div>
@ -1261,11 +1371,31 @@
<h5>Project</h5> <h5>Project</h5>
<ul class="footer-links"> <ul class="footer-links">
<li><a href="https://github.com/fynks/debrid-services-comparison" target="_blank" <li><a href="https://github.com/fynks/debrid-services-comparison" target="_blank"
rel="noopener noreferrer">Source Code</a></li> rel="noopener noreferrer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
Source Code
</a></li>
<li><a href="https://github.com/fynks/debrid-services-comparison/issues" target="_blank" <li><a href="https://github.com/fynks/debrid-services-comparison/issues" target="_blank"
rel="noopener noreferrer">Report Issues</a></li> rel="noopener noreferrer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
Report Issues
</a></li>
<li><a href="https://github.com/fynks/debrid-services-comparison/blob/main/CONTRIBUTING.md" <li><a href="https://github.com/fynks/debrid-services-comparison/blob/main/CONTRIBUTING.md"
target="_blank" rel="noopener noreferrer">Contribute</a></li> target="_blank" rel="noopener noreferrer">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="8.5" cy="7" r="4"></circle>
<line x1="20" y1="8" x2="20" y2="14"></line>
<line x1="23" y1="11" x2="17" y2="11"></line>
</svg>
Contribute
</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -1273,16 +1403,24 @@
<div class="footer-bottom"> <div class="footer-bottom">
<div class="footer-bottom-content"> <div class="footer-bottom-content">
<div class="footer-left"> <div class="footer-left">
<p>&copy; 2025 Debrid Services Comparison. <span class="made-with">Made with ❤️</span> <p class="footer-copyright">
by <a href="https://github.com/fynks" target="_blank" &copy; 2025 <strong>Debrid Services Comparison</strong>.
rel="noopener noreferrer">Fynks</a></p> <span class="made-with">Made with <span class="heart-icon">❤️</span></span>
<p class="footer-disclaimer">This is an independent, open-source project not affiliated by <a href="https://github.com/fynks" target="_blank" rel="noopener noreferrer">Fynks</a>
with any debrid service.</p> </p>
<p class="footer-disclaimer">
This is an independent, open-source project not affiliated with any debrid service.
</p>
</div> </div>
<div class="footer-right"> <div class="footer-right">
<div class="footer-meta"> <div class="footer-meta">
<span class="last-updated">Last updated: <time datetime="2025-09-16">September 16, <span class="last-updated">
2025</time></span> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<time datetime="2025-09-16">Sep 16, 2025</time>
</span>
<a href="https://github.com/fynks/debrid-services-comparison" target="_blank" <a href="https://github.com/fynks/debrid-services-comparison" target="_blank"
rel="noopener noreferrer" class="github-link" rel="noopener noreferrer" class="github-link"
aria-label="View source on GitHub"> aria-label="View source on GitHub">