<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shades of Blue Premium</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Poppins', sans-serif;
background: #05070f;
color: #fff;
}
/* PREMIUM SECTION */
.section-blue {
background: #101129;
text-align: center;
padding: 80px 20px;
border-radius: 25px;
max-width: 1200px;
margin: 40px auto;
box-shadow: 0 15px 50px rgba(0,0,0,0.7);
position: relative;
overflow: hidden;
}
/* Glowing gradient overlay behind section */
.section-blue::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, #0051ff, #0affff, #52e8ff, #adffff);
opacity: 0.15;
filter: blur(100px);
z-index: 0;
}
/* Titles */
.section-blue h1 {
font-size: 60px;
margin-bottom: 10px;
position: relative;
z-index: 1;
background: linear-gradient(90deg, #52e8ff, #0affff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-blue h2 {
font-size: 24px;
font-weight: 500;
margin-bottom: 50px;
color: #fff;
position: relative;
z-index: 1;
}
/* Grid */
.section-blue .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
width: 100%;
position: relative;
z-index: 1;
}
/* Card */
.section-blue .card {
position: relative;
padding: 25px;
border-radius: 20px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(255,255,255,0.2);
text-align: left;
transition: all 0.4s ease;
color: #fff;
overflow: visible;
box-shadow: inset 0 0 20px rgba(255,255,255,0.05);
}
/* Left color bar */
.section-blue .card::before {
content: "";
position: absolute;
height: 100%;
width: 6px;
left: 0;
top: 0;
border-radius: 10px;
}
/* Card text */
.section-blue .card h3 {
margin: 0 0 10px;
font-size: 20px;
color: #fff;
}
.section-blue .card span {
float: right;
font-size: 12px;
opacity: 0.8;
color: #fff;
}
.section-blue .card p {
font-size: 14px;
opacity: 0.8;
color: #fff;
}
/* Card hover glow */
.section-blue .card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 50px rgba(0, 150, 255, 0.7), 0 0 20px rgba(0,255,255,0.5) inset;
}
/* Color bars */
.section-blue .blue::before { background: #0051ff; }
.section-blue .navy::before { background: #00087f; }
.section-blue .midnight::before { background: #24157f; }
.section-blue .azure::before { background: #007fff; }
.section-blue .sapphire::before { background: #0f52ba; }
.section-blue .persian::before { background: #243b8d; }
.section-blue .argentina::before { background: #70b8ff; }
.section-blue .cerulean::before { background: #007ba7; }
.section-blue .aqua::before { background: #0affff; }
.section-blue .sky::before { background: #99ccff; }
.section-blue .electric::before { background: #52e8ff; }
.section-blue .celeste::before { background: #adffff; }
</style>
</head>
<body>
<h1>Shades of Blue</h1>
<h2>Psychology Sheet</h2>
<h3>Blue #0051FF</h3>
<p>trust, peace, wisdom, stability</p>
<h3>Navy #00087F</h3>
<p>strength, authority, intelligence</p>
<h3>Midnight #24157F</h3>
<p>mystery, depth, elegance</p>
<h3>Azure #007FFF</h3>
<p>clarity, freedom, serenity, youthfulness</p>
<h3>Sapphire #0F52BA</h3>
<p>truth, nobility, luxury, loyalty</p>
<h3>Persian #243B8D</h3>
<p>confidence, sophistication, ambition</p>
<h3>Argentina #70B8FF</h3>
<p>openness, tranquility, compassion</p>
<h3>Cerulean #007BA7</h3>
<p>inspiration, renewal, clarity, refreshment</p>
<h3>Aqua #0AFFFF</h3>
<p>balance, vibrancy, energy, healing</p>
<h3>Sky #99CCFF</h3>
<p>lightness, calm, aspiration</p>
<h3>Electric #52E8FF</h3>
<p>intensity, innovation, alertness, excitement</p>
<h3>Celeste #ADFFFF</h3>
<p>gentleness, innocence, freshness, calm</p>
</body>
</html>]]>
