-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.mjml
154 lines (139 loc) · 8.42 KB
/
index.mjml
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<mjml>
<mj-head>
<mj-attributes>
<mj-accordion border="none" padding="1px" />
<mj-accordion-element icon-wrapped-url="./images/wrappedIcon.png" icon-unwrapped-url="./images/unwrappedIcon.png" icon-height="24px" icon-width="24px" />
<mj-accordion-title font-family="Helvetica" background-color="#FFFEED" color="#049B9C" padding="15px" font-size="18px" />
<mj-accordion-text font-family="Helvetica" background-color="#FFFEED" padding="15px" color="#38548F" font-size="14px" />
</mj-attributes>
</mj-head>
<mj-body background-color="#F8F8F6">
<!-- logo section -->
<mj-section>
<mj-column>
<mj-image width="300px" src="./images/logoVarOne.png" alt="Company logo"></mj-image>
</mj-column>
</mj-section>
<!-- hero header section -->
<mj-section background-color="#FFFEED">
<mj-column>
<mj-image align="left" width="300px" src="./images/bannerImage.png" alt="Image of company founder"></mj-image>
</mj-column>
<mj-column>
<mj-text font-weight="bold" font-size="20px" color="#049B9C" font-family="helvetica">New Ethical Marketing Training Available! </mj-text>
<mj-text font-size="15px" color="#38548F" font-family="helvetica">This brand new Digitally.ethical training guides you through all the important topics you need to be on top of as a small business owner. Start your journey towards becoming the change in your industry today.<br><br>
PRICE: £250 per participant </mj-text>
<mj-button href="#" width="230px" height="25px" align="left" font-weight="bold" background-color="#049B9C" border-radius="10px" font-family="helvetica" font-size="15px">Get Access to The Training Today</mj-button>
</mj-column>
</mj-section>
<!-- features section -->
<mj-section>
<!-- feature 1 -->
<mj-column>
<mj-image width="170px" src="./images/highlightOne.png" alt="Training highlight:"></mj-image>
<mj-text font-weight="bold" align="center" font-size="16px" color="#049B9C" font-family="helvetica">Self-Paced Video Training</mj-text>
<mj-text align="left" font-size="13px" color="#38548F" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</mj-text>
</mj-column>
<!-- feature 2 -->
<mj-column>
<mj-image width="170px" src="./images/highlightTwo.png" alt="Training highlight:"></mj-image>
<mj-text font-weight="bold" align="center" font-size="16px" color="#049B9C" font-family="helvetica">Practical Workbook</mj-text>
<mj-text align="left" font-size="13px" color="#38548F" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</mj-text>
</mj-column>
<!-- feature 3 -->
<mj-column>
<mj-image width="170px" src="./images/highlightThree.png" alt="Training highlight:"></mj-image>
<mj-text font-weight="bold" align="center" font-size="16px" color="#049B9C" font-family="helvetica"> Weekly Email Support</mj-text>
<mj-text align="left" font-size="13px" color="#38548F" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</mj-text>
</mj-column>
</mj-section>
<!-- special offer strip -->
<mj-section background-color="#049B9C" padding-bottom="0px" padding-top="0px">
<mj-column>
<mj-text align="center" font-size="16px" color="white">
<p>✨Get a bonus Power Hour (worth £135) when you book your training <span style="font-weight: bold; color: #FFFEED">by 1 December 2023</span>✨</p>
</mj-text>
</mj-column>
</mj-section>
<!-- Accordion FAQ -->
<mj-section padding="20px" background-color="#F8F8F6">
<!-- left column - image and title -->
<mj-column width="40%">
<mj-image width="170px" src="./images/faqPhoto.png" alt="Training highlight:"></mj-image>
<mj-text font-weight="bold" align="center" font-size="16px" color="#049B9C" font-family="helvetica">Frequently Asked Questions</mj-text>
</mj-column>
<!-- right column - accordion with questions and answers -->
<mj-column width="60%" background-color="#dededd">
<mj-accordion>
<mj-accordion-element>
<mj-accordion-title>Who is this training for?</mj-accordion-title>
<mj-accordion-text>
<span style="line-height:20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</mj-accordion-text>
</mj-accordion-element>
<mj-accordion-element>
<mj-accordion-title>What can I expect after booking the training?</mj-accordion-title>
<mj-accordion-text>
<span style="line-height:20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</mj-accordion-text>
</mj-accordion-element>
<mj-accordion-element>
<mj-accordion-title>Are there any live sessions included?</mj-accordion-title>
<mj-accordion-text>
<span style="line-height:20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</mj-accordion-text>
</mj-accordion-element>
<mj-accordion-element>
<mj-accordion-title>How does the weekly email support work?</mj-accordion-title>
<mj-accordion-text>
<span style="line-height:20px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</span>
</mj-accordion-text>
</mj-accordion-element>
</mj-accordion>
</mj-column>
</mj-section>
<!-- CTA buttons -->
<mj-section padding-bottom="20px" padding-top="0px">
<mj-column width="50%">
<mj-button href="#" width="230px" height="25px" align="center" color="#38548F" font-weight="bold" background-color="#FFE582" border-radius="10px" font-family="helvetica" font-size="15px">Book Your Training</mj-button>
</mj-column>
<mj-column width="50%">
<mj-button href="#" width="230px" height="25px" align="center" color="#38548F" font-weight="bold" background-color="#FFE582" border-radius="10px" font-family="helvetica" font-size="15px">Get In Touch</mj-button>
</mj-column>
</mj-section>
<!-- Divider -->
<mj-divider border-color="#38548F" border-width="1px" border-style="dashed" padding-left="20px" padding-right="20px" padding-bottom="0px" padding-top="0"></mj-divider>
<!-- footer - social links -->
<mj-section>
<mj-column width="100%">
<mj-text align="center" font-weight="bold" font-size="16px" color="#049B9C" font-family="helvetica">Let's stay in touch... </mj-text>
</mj-column>
<mj-column>
<mj-social font-size="15px" icon-size="30px" mode="horizontal">
<mj-social-element name="linkedin" href="https://www.linkedin.com/in/alexandraasanache/">
</mj-social-element>
<mj-social-element name="instagram" href="https://www.instagram.com/digitallyalex/">
</mj-social-element>
<mj-social-element name="web" href="https://www.digitallyalex.com/">
</mj-social-element>
</mj-social>
</mj-column>
</mj-section>
<!-- footer - unsubscribe -->
<mj-section padding="10px 0 20px 0">
<mj-column>
<mj-text align="center" color="#9B9B9B" font-size="12px">
<a href="#" style="color: #9B9B9B;">Unsubscribe</a> from this newsletter<br>
<a href="https://www.digitallyalex.com" style="color: #9B9B9B; text-decoration:none;">2023 made by digitallyalex.com</a></mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>