135 lines
2.5 KiB
HTML
135 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<style>
|
||
html { background: #ffffff; }
|
||
body {
|
||
width: 720pt;
|
||
height: 405pt;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: #F5F1E8;
|
||
font-family: Arial, sans-serif;
|
||
display: flex;
|
||
}
|
||
|
||
.slide-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
/* Title */
|
||
.title {
|
||
position: absolute;
|
||
top: 50pt;
|
||
left: 80pt;
|
||
right: 80pt;
|
||
text-align: center;
|
||
}
|
||
|
||
.title h2 {
|
||
font-family: Georgia, serif;
|
||
font-size: 38pt;
|
||
color: #6B2C3E;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Three agenda items */
|
||
.agenda-container {
|
||
position: absolute;
|
||
top: 99pt;
|
||
left: 100pt;
|
||
right: 100pt;
|
||
bottom: 91pt;
|
||
}
|
||
|
||
.agenda-item {
|
||
background: #ffffff;
|
||
border-left: 4pt solid #B8974F;
|
||
padding: 14pt 20pt;
|
||
margin-bottom: 16pt;
|
||
border-radius: 6pt;
|
||
}
|
||
|
||
.agenda-item .icon {
|
||
font-size: 24pt;
|
||
display: inline-block;
|
||
margin-right: 12pt;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.agenda-item .icon p {
|
||
margin: 0;
|
||
padding: 0;
|
||
display: inline;
|
||
}
|
||
|
||
.agenda-item .number {
|
||
display: inline-block;
|
||
width: 32pt;
|
||
height: 32pt;
|
||
background: #6B2C3E;
|
||
color: #F5F1E8;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 32pt;
|
||
font-size: 16pt;
|
||
font-weight: bold;
|
||
margin-right: 12pt;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.agenda-item .title-text {
|
||
font-size: 18pt;
|
||
color: #6B2C3E;
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.agenda-item .desc {
|
||
font-size: 14pt;
|
||
color: #4A5568;
|
||
margin-top: 8pt;
|
||
margin-left: 56pt;
|
||
}
|
||
|
||
.agenda-item .desc p {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide-content">
|
||
<div class="title">
|
||
<h2>今天，我们一起做三件事</h2>
|
||
</div>
|
||
|
||
<div class="agenda-container">
|
||
<div class="agenda-item">
|
||
<span class="icon"><p>🌟</p></span>
|
||
<span class="number">1</span>
|
||
<span class="title-text">感恩与榜样</span>
|
||
<div class="desc"><p>我们的模范家长</p></div>
|
||
</div>
|
||
|
||
<div class="agenda-item">
|
||
<span class="icon"><p>⚡</p></span>
|
||
<span class="number">2</span>
|
||
<span class="title-text">行动起来</span>
|
||
<div class="desc"><p>电子产品与AI：现在就行动</p></div>
|
||
</div>
|
||
|
||
<div class="agenda-item">
|
||
<span class="icon"><p>🎯</p></span>
|
||
<span class="number">3</span>
|
||
<span class="title-text">期中冲刺</span>
|
||
<div class="desc"><p>未来一周，一起冲刺</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|