GuidoSchenone/security-notice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HELLO

Browse Source
This commit is contained in:
GuidoSchenone
2025-12-17 12:31:36 -03:00
parent 4bf577b701
commit c9236797b7
12 changed files with 381 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Data Encryption.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
Deception.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
EnterpriseFuzzing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
Incident Response (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
Incident Response.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
Malware Detection.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
OSINT.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
Privacy & Compliance.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
Responsible Disclosure.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
SecurityAudits.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
cypsec-logo-white-transparent.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

560
index.html
View File

@@ -3,50 +3,113 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CypSec Security - Interactive Cards</title> <title>CypSec Security Center</title>
<script src="https://cdn.tailwindcss.com "></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css ">
<style> <style>
* { :root {
margin: 0; --cyp-dark: #0a0a0a;
padding: 0; --cyp-card: #1a1a1a;
box-sizing: border-box; --cyp-border: #27272a;
--cyp-blue: #0066ff;
--cyp-purple: #6366f1;
--cyp-glow: 0 0 20px rgba(0, 102, 255, .35);
} }
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--cyp-dark);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #e5e5e5;
min-height: 100vh; font-family: 'Inter', system-ui, sans-serif;
padding: 20px; margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden;
} }
.container { /* Navigation - from No Tracking Cookies page */
max-width: 1200px; nav {
margin: 0 auto; border-bottom: 1px solid #374151;
background: #000000;
} }
.header { /* Hero Section - combined aesthetic - PRESERVED EXACTLY */
text-align: center; .hero-section {
margin-bottom: 50px; position: relative;
color: white; padding: 6rem 0;
overflow: hidden;
} }
.header h1 { .hero-bg-glow {
font-size: 3rem; position: absolute;
margin-bottom: 10px; inset: 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); opacity: 0.2;
pointer-events: none;
z-index: -1;
} }
.header p { .hero-bg-glow::before {
font-size: 1.2rem; content: '';
opacity: 0.9; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24rem;
height: 24rem;
background: linear-gradient(to right, #a855f7, #3b82f6);
border-radius: 9999px;
filter: blur(100px);
}
/* Grid pattern from original security center */
.grid-pattern {
position: absolute;
inset: 0;
opacity: 0.1;
background-image:
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
z-index: -1;
}
/* Divider lines from security center */
.header-divider {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin-top: 2rem;
}
.divider-line {
height: 2px;
background: linear-gradient(to right, #3b82f6, #8b5cf6);
border-radius: 9999px;
}
.divider-line:first-child { width: 10rem; }
.divider-line:nth-child(2) { width: 0.75rem; }
.divider-line:last-child { width: 0.25rem; }
/* FIXED: Cards Section - Properly centered */
.cards-section {
padding: 5rem 0;
width: 100%;
display: flex;
justify-content: center;
} }
.cards-grid { .cards-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px; gap: 2.5rem;
margin-bottom: 50px; max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 1.5rem;
} }
/* FIXED: Flip card base styles */
.flip-card { .flip-card {
background-color: transparent; background-color: transparent;
width: 100%; width: 100%;
@@ -60,7 +123,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
transition: transform 0.8s; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d; transform-style: preserve-3d;
} }
@@ -68,148 +131,212 @@
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.flip-card-front, .flip-card-back { /* FIXED: Front card - clean and full-size */
.flip-card-front {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 20px; border-radius: 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.3); border: none;
overflow: hidden; overflow: hidden;
} background: transparent;
.flip-card-front {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
color: #333;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20px; transition: all 0.3s ease;
}
.flip-card-back {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
transform: rotateY(180deg);
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
} }
/* FIXED: Full-size image styling */
.card-image { .card-image {
width: 150px; width: 100%;
height: 150px; height: 100%;
object-fit: contain; object-fit: cover;
margin-bottom: 20px; border-radius: 0;
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2)); display: block;
} }
.card-title { /* FIXED: Black background for flipped cards instead of grey */
font-size: 1.8rem; .flip-card-back {
font-weight: bold; position: absolute;
margin-bottom: 10px; width: 100%;
color: #2c3e50; height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 1rem;
border: 1px solid #374151;
overflow: hidden;
background: #000000 !important; /* BLACK background instead of grey gradient */
transform: rotateY(180deg);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
/* OPTIONAL: Enhance text visibility on black background */
.card-content h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: #ffffff;
border-bottom: 2px solid #3b82f6;
padding-bottom: 0.5rem;
}
.card-content ul {
list-style: none;
padding: 0;
}
.card-content li {
margin-bottom: 0.75rem;
padding-left: 1.5rem;
position: relative;
font-size: 0.95rem;
line-height: 1.6;
color: #e2e8f0;
}
.card-content li:before {
content: "✓";
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
}
.card-content p {
margin-bottom: 1rem;
line-height: 1.6;
font-size: 0.95rem;
color: #e2e8f0;
}
.contact-form {
background: rgba(59, 130, 246, 0.1);
backdrop-filter: blur(10px);
padding: 1rem;
border-radius: 0.5rem;
margin-top: 1rem;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.contact-form p {
margin: 0;
font-size: 0.9rem;
color: #cbd5e1;
}
.contact-form a {
color: #60a5fa;
text-decoration: none;
font-weight: 600;
}
.contact-form a:hover {
color: #3b82f6;
}
/* FIXED: Hover effects */
.flip-card:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
} }
.card-subtitle { .flip-card:hover .flip-card-front {
font-size: 1rem; box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
color: #7f8c8d;
text-align: center;
} }
.card-content h3 { /* FIXED: Responsive Design */
font-size: 1.5rem;
margin-bottom: 20px;
color: #ecf0f1;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
.card-content ul {
list-style: none;
padding: 0;
}
.card-content li {
margin-bottom: 12px;
padding-left: 25px;
position: relative;
font-size: 0.95rem;
line-height: 1.5;
}
.card-content li:before {
content: "✓";
position: absolute;
left: 0;
color: #27ae60;
font-weight: bold;
font-size: 1.1rem;
}
.card-content p {
margin-bottom: 15px;
line-height: 1.6;
font-size: 0.95rem;
}
.contact-form {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 20px;
border-radius: 15px;
margin-top: 20px;
}
.contact-form p {
margin: 0;
font-size: 1rem;
}
.contact-form a {
color: #3498db;
text-decoration: none;
font-weight: bold;
}
.contact-form a:hover {
text-decoration: underline;
}
/* Responsive Design */
@media (max-width: 768px) { @media (max-width: 768px) {
.header h1 { .header-title {
font-size: 2rem; font-size: 2rem;
} }
.header p { .header-subtitle {
font-size: 1rem; font-size: 1rem;
} }
.cards-grid { .cards-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 20px; gap: 1.5rem;
padding: 0 1rem;
} }
.flip-card { .flip-card {
height: 350px; height: 350px;
} }
.card-image {
width: 120px;
height: 120px;
}
.card-title {
font-size: 1.5rem;
}
} }
/* ADD THESE STYLES TO YOUR EXISTING CSS - ONLY AFFECTS CARD BOXES */
/* Animation for page load */ /* FIXED: Front card with rounded edges and hover frame */
.flip-card-front {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 1rem; /* ADD rounded edges */
border: 1px solid transparent; /* ADD transparent border */
overflow: hidden;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
/* FIXED: Full-size image with rounded edges */
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1rem; /* MATCH card's rounded edges */
display: block;
}
/* FIXED: White frame on hover */
.flip-card:hover .flip-card-front {
border-color: #ffffff; /* WHITE frame on hover */
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); /* Subtle white glow */
transform: scale(1.02); /* Slight scale effect */
}
/* FIXED: Back card keeps rounded edges */
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 1rem; /* KEEP rounded edges */
border: 1px solid #374151;
overflow: hidden;
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
transform: rotateY(180deg);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
/* FIXED: Smooth hover transition for main card */
.flip-card {
transition: transform 0.3s ease;
}
.flip-card:hover {
transform: translateY(-5px);
}
/* FIXED: Animation for page load */
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {
opacity: 0; opacity: 0;
@@ -234,24 +361,98 @@
.flip-card:nth-child(7) { animation-delay: 0.7s; } .flip-card:nth-child(7) { animation-delay: 0.7s; }
.flip-card:nth-child(8) { animation-delay: 0.8s; } .flip-card:nth-child(8) { animation-delay: 0.8s; }
.flip-card:nth-child(9) { animation-delay: 0.9s; } .flip-card:nth-child(9) { animation-delay: 0.9s; }
.flip-card:nth-child(10) { animation-delay: 1.0s; }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <!-- --------------- NAV --------------- -->
<div class="header"> <nav>
<h1>CypSec Security Center</h1> <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<p>Click on any card to explore our security measures and programs</p> <div class="flex justify-center items-center h-16">
<img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-7 w-auto mr-2">
<span class="text-2xl font-mono text-white">CypSec</span>
</div>
</div> </div>
</nav>
<!-- --------------- HERO --------------- -->
<section class="hero-section">
<div class="hero-bg-glow"></div>
<div class="grid-pattern"></div>
<div class="container mx-auto px-6 text-center relative z-10">
<h1 class="text-4xl lg:text-6xl font-semibold leading-tight">
Security <span class="text-blue-500">Notice</span>
</h1>
<p class="text-lg mt-6 max-w-2xl mx-auto text-gray-300">
Featuring CypSec's security measurements and security programs.
</p>
<div class="header-divider">
<div class="divider-line"></div>
<div class="divider-line"></div>
<div class="divider-line"></div>
</div>
</div>
</section>
<!-- ADD THIS SECTION between hero-section and cards-section -->
<section class="security-intro">
<div class="intro-banner">
<span class="intro-text">
Security at CypSec — We implement layered security programs, continuous monitoring, and industry-grade controls to protect our platform, data, and users at every level.
<a href="#cards-section" class="intro-link">Click&nbsp;on&nbsp;topics&nbsp;>>&nbsp;</a>
</span>
</div>
</section>
<style>
/* ADD THESE STYLES — full-width banner, short height, plain left-to-right text */
.security-intro {
width: 100%;
padding: 0.75rem 0; /* short height */
background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(99, 102, 241, 0.1));
border-top: 1px solid rgba(99, 102, 241, 0.2);
border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}
.intro-banner {
max-width: 100%;
padding: 0 1.5rem;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
}
.intro-text {
display: inline-block;
font-size: 0.8125rem; /* small, plain */
color: #cbd5e1;
line-height: 1.3;
animation: banner-scroll 30s linear infinite;
}
.intro-link {
color: #60a5fa;
text-decoration: none;
margin-left: 0.25rem;
}
.intro-link:hover {
color: #3b82f6;
}
/* continuous left-to-right scroll */
@keyframes banner-scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
<!-- Cards Section - FIXED CENTERING -->
<section class="cards-section">
<div class="cards-grid"> <div class="cards-grid">
<!-- All your card content here exactly as it was -->
<!-- Responsible Disclosure --> <!-- Responsible Disclosure -->
<div class="flip-card" onclick="flipCard(this)"> <div class="flip-card" onclick="flipCard(this)">
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="Responsible Disclosure.png" alt="Responsible Disclosure" class="card-image"> <img src="Responsible Disclosure.png" alt="Responsible Disclosure" class="card-image">
<h2 class="card-title">Responsible Disclosure</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -270,8 +471,6 @@
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="SecurityAudits.png" alt="Security Audits" class="card-image"> <img src="SecurityAudits.png" alt="Security Audits" class="card-image">
<h2 class="card-title">Security Audits</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -292,8 +491,6 @@
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="Data Encryption.png" alt="Data Encryption" class="card-image"> <img src="Data Encryption.png" alt="Data Encryption" class="card-image">
<h2 class="card-title">Data Encryption</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -314,8 +511,6 @@
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="Incident Response.png" alt="Incident Response" class="card-image"> <img src="Incident Response.png" alt="Incident Response" class="card-image">
<h2 class="card-title">Incident Response</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -336,8 +531,6 @@
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="Privacy & Compliance.png" alt="Privacy & Compliance" class="card-image"> <img src="Privacy & Compliance.png" alt="Privacy & Compliance" class="card-image">
<h2 class="card-title">Privacy & Compliance</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -358,8 +551,6 @@
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="OSINT.png" alt="OSINT & Threat Intelligence" class="card-image"> <img src="OSINT.png" alt="OSINT & Threat Intelligence" class="card-image">
<h2 class="card-title">OSINT & Threat Intelligence</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -380,8 +571,6 @@
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="Deception.png" alt="Active Defense & Cyber Deception" class="card-image"> <img src="Deception.png" alt="Active Defense & Cyber Deception" class="card-image">
<h2 class="card-title">Active Defense & Cyber Deception</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -402,8 +591,6 @@
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="EnterpriseFuzzing.png" alt="Enterprise Fuzzing" class="card-image"> <img src="EnterpriseFuzzing.png" alt="Enterprise Fuzzing" class="card-image">
<h2 class="card-title">Enterprise Fuzzing</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -424,8 +611,6 @@
<div class="flip-card-inner"> <div class="flip-card-inner">
<div class="flip-card-front"> <div class="flip-card-front">
<img src="Malware Detection.png" alt="Malware Detection & Analysis" class="card-image"> <img src="Malware Detection.png" alt="Malware Detection & Analysis" class="card-image">
<h2 class="card-title">Malware Detection & Analysis</h2>
<p class="card-subtitle">Click to learn more</p>
</div> </div>
<div class="flip-card-back"> <div class="flip-card-back">
<div class="card-content"> <div class="card-content">
@@ -440,31 +625,49 @@
</div> </div>
</div> </div>
</div> </div>
<div class="p-2 w-full sm:mx-auto">
<div>
<div class="flex items-center">
<a href="/" class="flex">
<picture>
<source srcset="cypsec-logo-white-transparent.webp" media="(prefers-color-scheme: dark)">
<img class="h-10" src="cypsec-logo-white-transparent.webp" alt="CypSec Logo">
</picture>
</a>
</div>
<!-- Additional Incident Response (2) --> <p class="text-lg text-gray-900 dark:text-white leading-relaxed mt-5">Engineering sovereign cybersecurity that protects, adapts, and sustains critical digital infrastructures.</p>
<div class="flip-card" onclick="flipCard(this)">
<div class="flip-card-inner"> <p class="text-base text-gray-900 dark:text-white leading-snug mt-8">Contact</p>
<div class="flip-card-front">
<img src="Incident Response (2).png" alt="Incident Response Team" class="card-image"> <ul>
<h2 class="card-title">Incident Response Team</h2> <li class="text-base text-gray-900 dark:text-white leading-snug mt-1">
<p class="card-subtitle">Click to learn more</p> <a href="mailto:contact@cypsec.de">contact@cypsec.de</a>
</div> </li>
<div class="flip-card-back"> <li class="text-base text-gray-900 dark:text-white leading-snug">
<div class="card-content"> <a href="https://linkedin.com/company/cypsec-group">LinkedIn</a>
<h3>Incident Response Team</h3> </li>
<p>Our dedicated team ensures rapid response to security incidents with comprehensive monitoring and automated mitigation systems.</p> </ul>
<ul>
<li>24/7 Security Operations Center</li>
<li>Automated threat detection</li>
<li>Real-time incident tracking</li>
<li>Comprehensive post-incident analysis</li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
</div>
</section>
<hr class="my-6 border-gray-200 dark:border-gray-700">
<div class="flex sm:flex-row justify-evenly mb-4">
<div class="hidden sm:flex justify-left mt-2">
<a href="/downloads" class="mx-2 text-sm text-gray-500 transition-colors duration-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="LinkedIn">
<span class="mx-2 text-base text-gray-900 dark:text-white leading-snug sm:mx-6">Downloads</span>
</a>
</div>
<div class="flex justify-center mt-2">
<p class="mx-2 text-base text-gray-900 dark:text-white leading-snug sm:mx-6">© 2025 CypSec</p>
</div>
<div class="hidden sm:flex justify-left mt-2">
<a href="/security-notice" class="mx-2 text-sm text-gray-500 transition-colors duration-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="CypInvest">
<span class="mx-2 text-base text-gray-900 dark:text-white leading-snug sm:mx-6">Security</span>
</a>
</div>
</div> </div>
</div>
<script> <script>
function flipCard(card) { function flipCard(card) {
@@ -527,6 +730,7 @@
document.querySelectorAll('.flip-card').forEach(card => { document.querySelectorAll('.flip-card').forEach(card => {
observer.observe(card); observer.observe(card);
}); });
</script> </script>
</body> </body>
</html> </html>