<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>杭州相册</title>
<style>
body{
margin:0;
background:#d3d3d3;
font-family:"Microsoft YaHei",sans-serif;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
/* 最外层背景框 */
.outer{
width:860px;
height:480px;
background:#ccc;
border-radius:20px;
box-shadow:10px 10px 25px rgba(0,0,0,0.3),
-10px -10px 25px rgba(255,255,255,0.8);
display:flex;
justify-content:center;
align-items:center;
}
/* 内框 */
.inner{
width:760px;
height:380px;
background:#f5f5f5;
border-radius:18px;
box-shadow:inset 0 0 25px rgba(0,0,0,0.3);
display:flex;
gap:20px;
padding:20px;
box-sizing:border-box;
}
/* 左侧卡片 */
.left-card{
width:50%;
background:white;
border-radius:18px;
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:20px;
box-sizing:border-box;
position:relative;
display:flex;
}
/* 竖排标题 */
.title{
writing-mode:vertical-rl;
text-orientation:upright;
font-size:56px;
font-weight:700;
margin-right:20px;
line-height:1;
}
/* 彩色字 */
.c1{color:#e63946;} /* 红 */
.c2{color:#1b7f3a;} /* 绿 */
.c3{color:#1e66ff;} /* 蓝 */
.c4{color:#f2b705;} /* 黄 */
/* 右侧竖排景点字 */
.spots{
writing-mode:vertical-rl;
text-orientation:upright;
font-size:20px;
line-height:1.2;
color:#333;
}
/* 右侧卡片 */
.right-card{
width:50%;
background:white;
border-radius:18px;
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:20px;
box-sizing:border-box;
}
.right-card img{
width:100%;
height:100%;
object-fit:cover;
border-radius:10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<!-- 左侧 -->
<div class="left-card">
<div class="title">
<span class="c1">杭</span>
<span class="c2">州</span>
<span class="c3">相</span>
<span class="c4">册</span>
</div>
<div class="spots">
曲苏花雷<br>
院堤港峰<br>
风春观夕<br>
荷晓鱼照
</div>
</div>
<!-- 右侧 -->
<div class="right-card">
<img src="photo.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
