Skip to content

Commit ebf8bd0

Browse files
matowdevmatowdev
committed
[LES-1.2/st-compl] basic-rules-email-layout
Init introduction to email layout, according example. Worth noting: - moments linked to the XHTML specification (in particular, about self-closing tags). core: B-4 / WL-AL
1 parent a54cafd commit ebf8bd0

File tree

2 files changed

+236
-0
lines changed
  • core-courses/4-web-layout-advanced-level/1-html-email-layout/1-2-basic-rules-email-layout

2 files changed

+236
-0
lines changed

‎core-courses/4-web-layout-advanced-level/1-html-email-layout/1-2-basic-rules-email-layout/index.html‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
<!DOCTYPE html
2+
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3+
<html xmlns="http://www.w3.org/1999/xhtml">
4+
5+
<!--
6+
7+
1. <!DOCTYPE html PUBLIC ...> — это декларация типа документа (Document Type Declaration, или DOCTYPE), которая указывает браузеру, какой стандарт HTML используется в документе.
8+
9+
2. -//W3C//DTD XHTML 1.0 Transitional//EN — указывает, что документ использует спецификацию XHTML 1.0 Transitional от W3C.
10+
11+
3. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd — это путь к DTD (Document Type Definition), который определяет правила разметки для XHTML 1.0 Transitional.
12+
13+
4. <html xmlns="http://www.w3.org/1999/xhtml"> — атрибут xmlns задаёт пространство имён, чтобы браузеры знали, что этот документ использует спецификацию XHTML.
14+
15+
-->
16+
17+
<!--
18+
19+
В спецификации XHTML все элементы должны быть самозакрывающимися, если они не имеют содержимого. Это относится ко всем таким тегам, как:
20+
21+
<br /> — перенос строки.
22+
<img /> — изображение.
23+
<hr /> — горизонтальная линия.
24+
<input /> — поле ввода.
25+
26+
-->
27+
28+
<head>
29+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
30+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
31+
<title>Html email template</title>
32+
33+
<style>
34+
body {
35+
width: 100% !important;
36+
-webkit-text-size-adjust: 100%;
37+
-ms-text-size-adjust: 100%;
38+
margin: 0;
39+
padding: 0;
40+
line-height: 100%;
41+
}
42+
43+
[style*="Tahoma"] {
44+
font-family: 'Tahoma', arial, sans-serif !important;
45+
}
46+
47+
img {
48+
outline: none;
49+
text-decoration: none;
50+
border: none;
51+
-ms-interpolation-mode: bicubic;
52+
max-width: 100% !important;
53+
margin: 0;
54+
padding: 0;
55+
display: block;
56+
}
57+
58+
table td {
59+
border-collapse: collapse;
60+
}
61+
62+
table {
63+
border-collapse: collapse;
64+
mso-table-lspace: 0pt;
65+
mso-table-rspace: 0pt;
66+
}
67+
68+
/* mso-table-lspace и mso-table-rspace — это нестандартные CSS-свойства, применяемые только в почтовых клиентах Microsoft Outlook. Они помогают обнулить отступы слева и справа от таблиц, чтобы избежать проблем с отображением макета. */
69+
70+
h1,
71+
h2,
72+
h3,
73+
p {
74+
margin: 0;
75+
}
76+
77+
.pt-48 {
78+
padding-top: 48px;
79+
}
80+
81+
.pb-32 {
82+
padding-bottom: 32px;
83+
}
84+
85+
.pb-48 {
86+
padding-bottom: 48px;
87+
}
88+
89+
.pb-24 {
90+
padding-bottom: 24px;
91+
}
92+
93+
.pb-16 {
94+
padding-bottom: 16px;
95+
}
96+
97+
.pb-56 {
98+
padding-bottom: 56px;
99+
}
100+
101+
.mini-text {
102+
font-size: 12px;
103+
line-height: 18px;
104+
color: #949494;
105+
}
106+
107+
.mini-text a {
108+
color: #1890FF;
109+
text-decoration: none;
110+
}
111+
112+
a[href] {
113+
color: #1890FF;
114+
text-decoration: none;
115+
}
116+
117+
.title h2 {
118+
line-height: 24px;
119+
}
120+
121+
.desc p {
122+
line-height: 20px;
123+
}
124+
125+
@media (max-width: 700px) {
126+
.table-680 {
127+
width: 280px !important;
128+
}
129+
130+
.table-560 {
131+
width: 240px !important;
132+
}
133+
}
134+
</style>
135+
</head>
136+
137+
<body style="margin: 0; padding: 0;" bgcolor="#fff">
138+
<div style="font-size: 0px; color: #fff; opacity: 0; visibility: hidden; width: 0; height: 0; display: none">Тестовое
139+
письмо</div>
140+
141+
<table cellpadding="0" cellspacing="0" class="table-680" width="680" bgcolor="#fafafa" align="center">
142+
<tr>
143+
<td>
144+
<table class="table-680" cellpadding="0" cellspacing="0" width="680">
145+
<tr>
146+
<td align="center" class="center">
147+
<table width="560" class="table-560" cellpadding="0" cellspacing="0">
148+
<tr>
149+
<td class="logo pt-48 pb-32" align="center">
150+
<img src="http://work.maxgraph.ru/mail/logotype.png" alt="Логотип" />
151+
</td>
152+
</tr>
153+
<tr>
154+
<td align="center" class="text pb-48">
155+
<p style="font-family: Tahoma, Geneva, Verdana, sans-serif;">Hi Sam! Here’s your weekly updates</p>
156+
</td>
157+
</tr>
158+
<tr>
159+
<td align="center" class="item pb-48">
160+
<table class="item-table table-560" width="560" cellpadding="0" cellspacing="0">
161+
<tr>
162+
<td class="image pb-24">
163+
<img src="http://work.maxgraph.ru/mail/pic-1.png" alt="article-image" />
164+
</td>
165+
</tr>
166+
<tr>
167+
<td class="title pb-16">
168+
<h2 style="font-family: Tahoma, Geneva, Verdana, sans-serif;">Here Are the Best Sneakers of
169+
2019</h2>
170+
</td>
171+
</tr>
172+
<tr>
173+
<td class="desc">
174+
<p style="font-family: Tahoma, Geneva, Verdana, sans-serif;">We’re still quite early into the
175+
year, but it’s never too soon to highlight our picks for the best sneakers of the year, so
176+
far.</p>
177+
</td>
178+
</tr>
179+
</table>
180+
</td>
181+
</tr>
182+
<tr>
183+
<td align="center" class="item pb-56">
184+
<table class="item-table table-560" width="560" cellpadding="0" cellspacing="0">
185+
<tr>
186+
<td class="image pb-24">
187+
<img src="http://work.maxgraph.ru/mail/pic-2.png" alt="article-image" />
188+
</td>
189+
</tr>
190+
<tr>
191+
<td class="title pb-16">
192+
<h2 style="font-family: Tahoma, Geneva, Verdana, sans-serif;">8 Drops You Don't Want to Miss
193+
This Week</h2>
194+
</td>
195+
</tr>
196+
<tr>
197+
<td class="desc">
198+
<p style="font-family: Tahoma, Geneva, Verdana, sans-serif;">
199+
Supreme Fall 2019 Collection Week 2, Palace Fall 2019 Collection Week 5, Travis Scott: Look
200+
Mum I Can Fly Customizable Merch and more.</p>
201+
</td>
202+
</tr>
203+
</table>
204+
</td>
205+
</tr>
206+
<tr>
207+
<td class="pb-48">
208+
<p class="mini-text pb-16" style="font-family: Tahoma, Geneva, Verdana, sans-serif;">This email was
209+
sent to you as a registered member of prfctfit.com. To update your emails preferences <a
210+
href="#">click here.</a><br /> Use of the service and website is subject to our <a
211+
href="#">Terms of Use</a> and <a href="#">Privacy Statement.</a>
212+
</p>
213+
<p class="mini-text" style="font-family: Tahoma, Geneva, Verdana, sans-serif;">© 2019 PRFCT FIT. All
214+
rights reserved</p>
215+
</td>
216+
</tr>
217+
</table>
218+
</td>
219+
</tr>
220+
</table>
221+
</td>
222+
</tr>
223+
</table>
224+
225+
</body>
226+
227+
</html>

‎core-courses/4-web-layout-advanced-level/1-html-email-layout/1-2-basic-rules-email-layout/notes.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# On the topic: "Html email layout"
2+
3+
### Video-lesson:
4+
5+
[1.2. Basic rules of email layout.](https://go.skillbox.ru/profession/profession-fullstack-js/weblayout-advanced/videolesson/844a1171-6dd9-4b03-a303-69f503395d2b)
6+
7+
### A few words:
8+
9+
email layout - inline styles, without JS..

0 commit comments

Comments
 (0)