forked from GrapesJS/mjml
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
119 lines (105 loc) · 4.14 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GrapesJS Plugin</title>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="dist/grapesjs-mjml.min.js"></script>
<style>
body, html{ height: 100%; margin: 0;}
.cke_top {
background: #444 !important;
}
.cke_chrome {
border: none !important;
}
.cke_toolgroup {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden">
<mj-container>
<!-- Company Header -->
<mj-section background-color="#f0f0f0">
<mj-column>
<mj-text font-style="italic" font-size="20" color="#626262">
My Company
</mj-text>
</mj-column>
</mj-section>
<!-- Image Header -->
<mj-section background-url="http://1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg" background-size="cover" background-repeat="no-repeat">
<mj-column>
<mj-text align="center" color="#fff" font-size="40" font-family="Helvetica Neue">Slogan here</mj-text>
<mj-button background-color="#F63A4D" href="#">
Promotion
</mj-button>
</mj-column>
</mj-section>
<!-- Intro text -->
<mj-section background-color="#fafafa">
<mj-column width="400">
<mj-text font-style="italic" font-size="20" font-family="Helvetica Neue" color="#626262">My Awesome Text</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget
nulla elit. Nulla aliquet mollis faucibus.
</mj-text>
<mj-button background-color="#F45E43" href="#">Learn more</mj-button>
</mj-column>
</mj-section>
<!-- Side image -->
<mj-section background-color="white">
<mj-column>
<mj-image width="200" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg" />
</mj-column>
<mj-column>
<mj-text font-style="italic" font-size="20" font-family="Helvetica Neue" color="#626262">
Find amazing places
</mj-text>
<mj-text color="#525252">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
</mj-column>
</mj-section>
<!-- Icons -->
<mj-section background-color="#fbfbfb">
<mj-column>
<mj-image width="100" src="http://191n.mj.am/img/191n/3s/x0l.png" />
</mj-column>
<mj-column>
<mj-image width="100" src="http://191n.mj.am/img/191n/3s/x01.png" />
</mj-column>
<mj-column>
<mj-image width="100" src="http://191n.mj.am/img/191n/3s/x0s.png" />
</mj-column>
</mj-section>
<!-- Footer -->
<mj-section background-color="#e7e7e7">
<mj-column>
<mj-button href="#">Hello There!</mj-button>
<mj-social display="facebook twitter" />
</mj-column>
</mj-section>
<!-- Footer -->
</mj-container>
</div>
<script type="text/javascript">
var editor = grapesjs.init({
height: '100%',
noticeOnUnload: 0,
storageManager:{autoload: 0},
container : '#gjs',
fromElement: true,
plugins: ['gjs-mjml'],
pluginsOpts: {
'gjs-mjml': {}
}
});
window.editor = editor;
</script>
<script type="text/javascript" src="./dist/grapesjs-mjml.min.js"></script></body>
</html>