StillHammer
2c143ec907
- Card #20: Les 3 Premières Secondes (first impression technique) - Card #21: Validation Interne vs Externe (critical mindset shift) - Card #22: Curiosité Sincère vs Être Intéressant (communication) - Card #23: Needy vs Magnétique (behavioral patterns) Update card count: 19 → 23 active cards 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
175 lines
3.1 KiB
HTML
175 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
width: 960px;
|
|
height: 540px;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide {
|
|
width: 960px;
|
|
height: 540px;
|
|
position: relative;
|
|
font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-primary { background: #6B2C3E; }
|
|
.bg-warm { background: #F5F1E8; }
|
|
.bg-celebration { background: #E8B4B8; }
|
|
|
|
.title-main {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
width: 90%;
|
|
}
|
|
|
|
.title-main h1 {
|
|
font-size: 48px;
|
|
color: #F5F1E8;
|
|
margin-bottom: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.title-main .subtitle {
|
|
font-size: 24px;
|
|
color: #E8B4B8;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.title-main .class-info {
|
|
font-size: 20px;
|
|
color: #B8974F;
|
|
margin-top: 15px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.content-slide {
|
|
padding: 50px 70px 60px 70px;
|
|
}
|
|
|
|
.content-slide h2 {
|
|
font-size: 32px;
|
|
color: #6B2C3E;
|
|
margin-bottom: 25px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.content-slide p {
|
|
font-size: 20px;
|
|
line-height: 1.8;
|
|
color: #2C1810;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.content-slide ul {
|
|
margin-left: 40px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.content-slide li {
|
|
font-size: 18px;
|
|
line-height: 1.8;
|
|
color: #2C1810;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.quote-box {
|
|
background: white;
|
|
padding: 25px 30px;
|
|
margin: 25px 0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.quote-box p {
|
|
font-size: 22px;
|
|
color: #6B2C3E;
|
|
font-style: italic;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.number-highlight {
|
|
display: inline-block;
|
|
background: #B8974F;
|
|
color: white;
|
|
padding: 5px 15px;
|
|
border-radius: 20px;
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.decoration-top {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: #B8974F40;
|
|
opacity: 0.3;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.decoration-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: #E8B4B840;
|
|
opacity: 0.3;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.v-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
padding: 0 60px;
|
|
}
|
|
|
|
.section-title {
|
|
background: #6B2C3E;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.section-title h2 {
|
|
font-size: 48px;
|
|
color: #F5F1E8;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
padding: 0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="slide bg-celebration">
|
|
<div class="content-slide">
|
|
<h2>💬 同学祝福时刻</h2>
|
|
<p style="margin-top: 30px; font-size: 22px; text-align: center;">
|
|
有哪位同学想要送上<br>
|
|
你的祝福或者才艺表演？
|
|
</p>
|
|
<p style="text-align: center; margin-top: 50px; font-size: 20px; color: #6B2C3E;">
|
|
🎤 舞台交给你们！🎤
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |