-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (135 loc) · 12.3 KB
/
index.html
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TemplateOne</title>
<meta name="description" content="TemplateOne">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/bd38be0c7a.js" crossorigin="anonymous" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;"></script>
<style>
.social-icons a:hover{text-decoration:none;cursor:pointer}
.btn.btn-border-underline::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background-color:rgb(17, 100, 142);transition:transform 300ms ease-in-out;transform:scaleX(0)}
.btn.btn-border-underline:hover::before{transform:scaleX(1)}
.btn.btn-border-underline:focus::before{transform:scaleX(1)}
</style>
<style type="text/css">
@media only screen and (max-width:768px){
.container{
width:600px !important;
}
@media only screen and (max-width: 468px) {
.container {
width: 468px!important;
}
table {
max-width: 468px;
width: 468px;
}
body {
max-width: 468px;
}
header {
width: 468px;
}
footer {
max-width: 468px;
}
.social-icons {
max-width: 85%;
}
hr {
width: 85%;
}
.bottom-footer {
max-width: 85%;
}
}
}
</style>
</head>
<body style='margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;font-family:"serif";font-size:16px;color:#333;background-color:#fff;'>
<header class="header-wrapper" style='margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;background:url("http://via.placeholder.com/600x200");background-color:#fff;width:100%;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;height:200px;display:block;'>
<h1 style='margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;font-family:"serif";z-index:2;position:relative;text-align:center;align-items:center;top:50%;'>Showcase your product</h1>
</header>
<section class="container" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;width:600px;margin:0 auto;overflow:hidden;padding:0 2rem;">
<div class="top-wrapper" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;display:flex;flex-direction:column;justify-content:space-between;margin:1rem 0rem;">
<img src="http://via.placeholder.com/600x200" alt="" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;padding-bottom:1rem;padding-top:1rem;border-radius:3px;max-width:600px;height:200px;">
<h1 style='margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;font-family:"serif";'>Feature the star of your collection first.</h1>
<p style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">To get started, replace the image above with a striking product photo to catch people's attention.
Then, describe what makes your product unique, useful, or gift-worthy. Be sure to highlight the main features, and let people know where it's available.
</p>
<button class="btn btn-border-underline" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;margin:1rem;background-color:#00a7e1;font-weight:600;color:#fff;padding:0.5em 1em;border:none;border-radius:3px;outline:none;position:relative;cursor:pointer;width:10rem;margin-left:auto;margin-right:auto;font-size:1rem;height:3rem;">Start Shopping</button>
</div>
</section>
<div class="middle-bg" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;background-color:rgba(218, 218, 218, 0.2);padding:1.5rem 0rem;">
<section class="container" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;width:600px;margin:0 auto;overflow:hidden;padding:0 2rem;">
<div class="middle-wrapper" style="padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;display:flex;flex-direction:column;justify-content:space-between;margin:1rem 0rem;margin:0;">
<table style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;border-spacing:0.2rem 0rem;width:100%;max-width:100%;text-align:left;margin-left:auto;margin-right:auto;display:inline-block;vertical-align:top;">
<tr style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<td style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;"><img src="http://via.placeholder.com/264x194" alt="" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;width:250px;height:194px;border-radius:3px;"></td>
<td style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;"><img src="http://via.placeholder.com/264x194" alt="" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;width:250px;height:194px;border-radius:3px;"></td>
</tr>
<tr style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<th style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<h1 style='margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;font-family:"serif";'>Related Products</h1>
</th>
<th style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<h1 style='margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;font-family:"serif";'>Showcase Products</h1>
</th>
</tr>
<tr style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<td style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<p style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">This is a good place to tell people about any
current promotions at your store.</p>
</td>
<td style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<p style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">This space is to mention any products that pair well with the main product.
</p>
</td>
</tr>
<tr style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<td style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;"><a href="#" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">Click Here To Learn More<i class="fas fa-angle-double-right" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;padding-left:0.3rem;"></i></a></td>
<td style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;"><a href="#" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">Click Here To Learn More<i class="fas fa-angle-double-right" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;padding-left:0.3rem;"></i></a></td>
</tr>
</table>
</div>
</section>
</div>
<section class="container" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;width:600px;margin:0 auto;overflow:hidden;padding:0 2rem;">
<div class="lower-wrapper" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;display:flex;flex-direction:column;justify-content:space-between;margin:1rem 0rem;padding-bottom:1.5rem;">
<h1 style='margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;font-family:"serif";'>Feature the star of your collection first.</h1>
<p style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">To get started, replace the image above with a striking product photo to catch people's attention.
Then, describe what makes your product unique, useful, or gift-worthy. Be sure to highlight the main features, and let people know where it's available.
</p>
</div>
</section>
<section style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<div class="footer-wrapper" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;background-color:#011627;padding:2rem;color:white;text-align:center;">
<footer style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<div class="container" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;width:600px;margin:0 auto;overflow:hidden;padding:0 2rem;">
<div class="text-footer" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
<div class="social-icons" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;display:flex;justify-content:space-between;margin:0rem 1rem 2rem 1rem;">
<a href="#" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;text-decoration:none;cursor:pointer;color:#fff;"> <i class="fas fa-link" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;justify-content:center;align-items:center;margin:1rem 1.5rem;font-size:25pt;"></i></a>
<a href="#" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;text-decoration:none;cursor:pointer;color:#fff;"> <i class="fab fa-instagram-square" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;justify-content:center;align-items:center;margin:1rem 1.5rem;font-size:25pt;"></i></a>
<a href="#" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;text-decoration:none;cursor:pointer;color:#fff;"> <i class="fab fa-facebook-square" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;justify-content:center;align-items:center;margin:1rem 1.5rem;font-size:25pt;"></i> </a>
<a href="#" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;text-decoration:none;cursor:pointer;color:#fff;"> <i class="fab fa-twitter-square" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;justify-content:center;align-items:center;margin:1rem 1.5rem;font-size:25pt;"></i> </a>
</div>
<hr style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;color:aliceblue;">
<p style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">Copyright © <i style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">Current Year Your Company</i>, All right's reserved</p>
<p style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;"><i style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">You are receiving this email because you opted in via our website. </i></p>
<h5 style='margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;font-family:"serif";'>Our Mailing Address is:</h5>
<p style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">Your Company, Inc.
<br style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
1355 Market Street, Suite 900
<br style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">
San Francisco, CA 94103
</p>
<p style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;"><a href="#" style="margin:0;padding:0;box-sizing:border-box;line-height:1.6;letter-spacing:0;">Unsubscribe from this list</a></p>
</div>
</div>
</footer>
</div>
</section>
</body>
</html>