43 lines
2.2 KiB
HTML
43 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>世耀科技品牌稿</title>
|
|
<style>
|
|
:root { --ink: #172033; --blue: #2563eb; --cyan: #06b6d4; }
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; color: var(--ink); background: #f3f5f7; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
|
|
header { max-width: 1000px; margin: auto; padding: 32px 24px 20px; }
|
|
h1 { font-size: 22px; font-weight: 600; margin: 0; }
|
|
main { max-width: 1000px; margin: auto; padding: 0 24px 40px; }
|
|
section { padding: 36px 24px; border-bottom: 1px solid #e2e8f0; background: #fff; }
|
|
.dark { background: #172033; }
|
|
.logo { display: block; width: min(100%, 640px); height: auto; margin: auto; }
|
|
.icons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 32px; }
|
|
.icons img { display: block; }
|
|
footer { display: flex; flex-wrap: wrap; gap: 20px; padding: 24px 0; font-size: 14px; }
|
|
a { color: var(--blue); text-underline-offset: 4px; }
|
|
@media (max-width: 480px) { section { padding: 28px 4px; } header, main { padding-left: 16px; padding-right: 16px; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header><h1>世耀科技</h1></header>
|
|
<main>
|
|
<section><img class="logo" src="shiytech-logo.svg" alt="世耀科技彩色标志" width="640" height="160"></section>
|
|
<section class="icons">
|
|
<img src="shiytech-icon.svg" alt="独立图标" width="128" height="128">
|
|
<img src="shiytech-icon.svg" alt="64像素图标" width="64" height="64">
|
|
<img src="shiytech-icon.svg" alt="32像素图标" width="32" height="32">
|
|
</section>
|
|
<section><img class="logo" src="shiytech-logo-black.svg" alt="黑色标志" width="640" height="160"></section>
|
|
<section class="dark"><img class="logo" src="shiytech-logo-white.svg" alt="白色标志" width="640" height="160"></section>
|
|
<footer>
|
|
<a href="shiytech-logo.svg" download>彩色横版 SVG</a>
|
|
<a href="shiytech-icon.svg" download>独立图标 SVG</a>
|
|
<a href="shiytech-logo-black.svg" download>黑色 SVG</a>
|
|
<a href="shiytech-logo-white.svg" download>白色 SVG</a>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html> |