82 lines
2.0 KiB
HTML
82 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cinch Icon - Final</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
background:
|
|
repeating-conic-gradient(#1a1a1a 0% 25%, #222 0% 50%) 50% / 20px 20px;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 32px;
|
|
padding: 40px;
|
|
}
|
|
.icon-wrapper {
|
|
filter: drop-shadow(0 6px 16px rgba(20, 184, 166, 0.3));
|
|
padding: 80px;
|
|
}
|
|
.icon-container {
|
|
width: 512px;
|
|
height: 512px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
clip-path: url(#squircle);
|
|
background: linear-gradient(135deg, #0a1628 0%, #14b8a6 100%);
|
|
}
|
|
.icon-container::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 50%;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(255,255,255,0.15) 0%,
|
|
rgba(255,255,255,0.03) 100%
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
.icon {
|
|
color: #fff;
|
|
font-size: 240px;
|
|
filter: drop-shadow(3px 6px 12px rgba(0,0,0,0.3));
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.label {
|
|
color: #888;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<svg width="0" height="0" style="position:absolute">
|
|
<defs>
|
|
<clipPath id="squircle" clipPathUnits="objectBoundingBox">
|
|
<path d="M 0,0.5 C 0,0.112 0.112,0 0.5,0 0.888,0 1,0.112 1,0.5 1,0.888 0.888,1 0.5,1 0.112,1 0,0.888 0,0.5" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div class="icon-wrapper">
|
|
<div class="icon-container" id="icon-target">
|
|
<i class="fa-solid fa-film icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="label">Cinch - 512x512px</div>
|
|
|
|
</body>
|
|
</html>
|