Files
SkyArtShop/website/public/logo-preview.html

130 lines
3.3 KiB
HTML
Raw Permalink Normal View History

2026-01-18 02:22:05 -06:00
<!DOCTYPE html>
<html>
<head>
<title>Cat Logo Preview</title>
2026-01-19 01:17:43 -06:00
<link rel="icon" type="image/png" href="/favicon.png" />
2026-01-18 02:22:05 -06:00
<style>
body {
font-family: "Inter", sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 20px;
}
.container {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 600px;
}
h1 {
color: #2d3436;
margin-bottom: 10px;
}
p {
color: #636e72;
margin-bottom: 30px;
}
.logo-display {
display: flex;
gap: 40px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 30px 0;
}
.logo-box {
padding: 30px;
background: #f8f9fa;
border-radius: 15px;
transition: transform 0.3s ease;
}
.logo-box:hover {
transform: scale(1.05);
}
.logo-box img {
display: block;
}
.size-label {
margin-top: 15px;
font-size: 14px;
color: #636e72;
font-weight: 500;
}
.info {
background: #fec6df;
padding: 20px;
border-radius: 10px;
margin-top: 30px;
}
.info h3 {
color: #c239b3;
margin-top: 0;
}
.info code {
background: white;
padding: 2px 8px;
border-radius: 4px;
color: #c239b3;
font-family: "Courier New", monospace;
}
</style>
</head>
<body>
<div class="container">
<h1>🐱 Sky Art Shop Cat Logo</h1>
<p>Your creative companion logo is ready!</p>
<div class="logo-display">
<div class="logo-box">
<img
src="/assets/images/logo/cat-logo.svg"
width="100"
height="100"
alt="Cat Logo - Large"
/>
<div class="size-label">Large (100px)</div>
</div>
<div class="logo-box">
<img
src="/assets/images/logo/cat-logo.svg"
width="60"
height="60"
alt="Cat Logo - Medium"
/>
<div class="size-label">Medium (60px)</div>
</div>
<div class="logo-box">
<img
src="/assets/images/logo/cat-logo.svg"
width="40"
height="40"
alt="Cat Logo - Small"
/>
<div class="size-label">Small (40px)</div>
</div>
</div>
<div class="info">
<h3>✨ Logo Applied to About Page</h3>
<p style="color: #2d3436; margin: 10px 0">
The cat logo now appears next to "Our Story" section on the About
page!
</p>
<p style="color: #636e72; font-size: 14px; margin: 5px 0">
Location: <code>/assets/images/logo/cat-logo.svg</code>
</p>
<p style="color: #636e72; font-size: 14px; margin: 5px 0">
<strong>View it:</strong>
<a href="/about" style="color: #c239b3">Go to About Page →</a>
</p>
</div>
</div>
</body>
</html>