-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Expand file tree
/
Copy pathindex.html
More file actions
74 lines (71 loc) · 6.19 KB
/
Copy pathindex.html
File metadata and controls
74 lines (71 loc) · 6.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Colorlib Email Templates — Gallery</title>
<style>
:root { color-scheme: light dark; }
body { font-family: -apple-system, system-ui, sans-serif; margin: 0; padding: 32px; background: #f5f5f5; color: #222; }
h1 { margin: 0 0 8px; font-weight: 700; }
.lede { color: #666; margin: 0 0 28px; }
.section-h { font-size: 14px; font-weight: 600; color: #666; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 32px; }
.grid:last-of-type { margin-bottom: 0; }
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.card a { display: block; padding: 20px; color: inherit; text-decoration: none; }
.num { font-size: 32px; font-weight: 700; color: #999; margin-bottom: 4px; }
.title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.meta { font-size: 13px; color: #777; }
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #e0e0e0; }
.card { background: #2a2a2a; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.num { color: #666; }
.meta { color: #999; }
.section-h { color: #999; }
}
</style>
</head>
<body>
<h1>Colorlib Email Templates</h1>
<p class="lede">28 responsive HTML email templates, built with MJML.</p>
<h2 class="section-h">Colorlib classic · 1–20</h2>
<div class="grid">
<div class="card"><a href="1/index.html"><div class="num">01</div><div class="title">RestoBar</div><div class="meta">Restaurant · orange</div></a></div>
<div class="card"><a href="2/index.html"><div class="num">02</div><div class="title">Corporate</div><div class="meta">Agency · blue</div></a></div>
<div class="card"><a href="3/index.html"><div class="num">03</div><div class="title">Agency</div><div class="meta">Portfolio · blue</div></a></div>
<div class="card"><a href="4/index.html"><div class="num">04</div><div class="title">Stories</div><div class="meta">Blog · blue</div></a></div>
<div class="card"><a href="5/index.html"><div class="num">05</div><div class="title">Travel</div><div class="meta">Travel agency · red</div></a></div>
<div class="card"><a href="6/index.html"><div class="num">06</div><div class="title">Shopping</div><div class="meta">Women's fashion · pink</div></a></div>
<div class="card"><a href="7/index.html"><div class="num">07</div><div class="title">Winter</div><div class="meta">Newsletter · blue</div></a></div>
<div class="card"><a href="8/index.html"><div class="num">08</div><div class="title">Elise</div><div class="meta">Fashion sale · pink</div></a></div>
<div class="card"><a href="9/index.html"><div class="num">09</div><div class="title">Photography</div><div class="meta">Gallery · magenta</div></a></div>
<div class="card"><a href="10/index.html"><div class="num">10</div><div class="title">e-Verify</div><div class="meta">Email verification · teal</div></a></div>
<div class="card"><a href="11/index.html"><div class="num">11</div><div class="title">Friend request</div><div class="meta">Social notification · teal</div></a></div>
<div class="card"><a href="12/index.html"><div class="num">12</div><div class="title">Shop</div><div class="meta">Cart reminder · teal</div></a></div>
<div class="card"><a href="13/index.html"><div class="num">13</div><div class="title">Capture</div><div class="meta">Photo follow · blue</div></a></div>
<div class="card"><a href="14/index.html"><div class="num">14</div><div class="title">Business</div><div class="meta">Template builder · yellow</div></a></div>
<div class="card"><a href="15/index.html"><div class="num">15</div><div class="title">Clutch</div><div class="meta">Portfolio · cyan</div></a></div>
<div class="card"><a href="16/index.html"><div class="num">16</div><div class="title">Fitness</div><div class="meta">Gym · red</div></a></div>
<div class="card"><a href="17/index.html"><div class="num">17</div><div class="title">Real Estate</div><div class="meta">Property · orange</div></a></div>
<div class="card"><a href="18/index.html"><div class="num">18</div><div class="title">Minimart</div><div class="meta">Exclusive offers · red</div></a></div>
<div class="card"><a href="19/index.html"><div class="num">19</div><div class="title">Ministries</div><div class="meta">Church · green</div></a></div>
<div class="card"><a href="20/index.html"><div class="num">20</div><div class="title">Eventos</div><div class="meta">Dev conference · orange</div></a></div>
</div>
<h2 class="section-h">Modern minimal · 21–24</h2>
<div class="grid">
<div class="card"><a href="21/index.html"><div class="num">21</div><div class="title">Lume</div><div class="meta">SaaS welcome / onboarding</div></a></div>
<div class="card"><a href="22/index.html"><div class="num">22</div><div class="title">Northbound</div><div class="meta">Order receipt</div></a></div>
<div class="card"><a href="23/index.html"><div class="num">23</div><div class="title">Strata</div><div class="meta">Password reset / security</div></a></div>
<div class="card"><a href="24/index.html"><div class="num">24</div><div class="title">Brief</div><div class="meta">Editorial newsletter</div></a></div>
</div>
<h2 class="section-h">Designed minimal · 25–28</h2>
<div class="grid">
<div class="card"><a href="25/index.html"><div class="num">25</div><div class="title">Loop</div><div class="meta">Product launch · violet</div></a></div>
<div class="card"><a href="26/index.html"><div class="num">26</div><div class="title">Signal</div><div class="meta">Webinar invite · blue</div></a></div>
<div class="card"><a href="27/index.html"><div class="num">27</div><div class="title">Verge</div><div class="meta">Winback · terracotta</div></a></div>
<div class="card"><a href="28/index.html"><div class="num">28</div><div class="title">Pulse</div><div class="meta">Dark-mode newsletter · cyan</div></a></div>
</div>
</body>
</html>