-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (153 loc) · 6.64 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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<html>
<head>
<meta charset="UTF-8">
<title>Molly - Your Personal A.I. Designer</title>
<link rel="stylesheet" type="text/css" href="ui/assets/styles/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="Container">
<section>
<div class="logo"><img src="ui/assets/images/logo.svg"></div>
<div class="Team h4">The<br>Grid</div>
<div class="Menu">
<div class="Menu-item h2"><a href="#mixer"><div class="Number">01</div>Site Owners</a></div>
<div class="Menu-item h2"><a href="#tagger"><div class="Number">02</div>Collaborators</a></div>
<div class="Menu-item h2"><a href="#poet"><div class="Number">03</div>Designers</a></div>
<div class="Menu-item h2"><a href="#mason"><div class="Number">04</div>Developers</a></div>
<div class="Menu-item h2"><a href="#curator"><div class="Number">05</div>Support Team</a></div>
<div class="Menu-item h2"><a href="#stylist"><div class="Number">06</div>Marketing Team</a></div>
<div class="Menu-item h2"><a href="#plumber"><div class="Number">07</div>Trainers</a></div>
</div>
</section>
<section>
<div class="Header">
<div class="h1 Title-main red"><div id="The">Molly</div><div id="Composer">Basics</div></div>
<div class="Purpose">
<div class="Label">PURPOSE</div>
<div class="text h2">To remove all friction from the Grid experience.</div>
</div>
<div class="Icons">
<div class="Label">MOLLICON</div>
<div>
<img src="ui/assets/images/molly7.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly1.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly2.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly3.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly4.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly8.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly9.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly10.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly11.png" width="50" alt="">
</div>
<div>
<img src="ui/assets/images/molly12.png" width="50" alt="">
</div>
</div>
</div>
<div class="Modules">
<div class="Module">
<div class="Textual">
<a id="mixer"><div class="Title h2"><div class="Number">01</div>Site Owners</div></a>
<div class="Purpose">
<div class="Label">INTERACTIONS</div>
<div class="text h2">Site owners will interact with Molly more than anyone. First on thegrid.io through signup. Again during onboarding. Then within the apps while creating and managing sites and content. Also, on each of the owner’s live sites, Molly will be available to make contextual layout and design changes. And, when needed, through support.thegrid.io and various chatbots.</div>
</div>
</div>
<div class="Graphical">
<img src="ui/assets/images/x.png">
</div>
</div>
<div class="Module">
<div class="Textual">
<a id="tagger"><div class="Title h2"><div class="Number">02</div>Collaborators</div></a>
<div class="Purpose">
<div class="Label">INTERACTIONS</div>
<div class="text h2">Collaborators will interact with Molly in all the ways a site owner would, minus the signup.</div>
</div>
</div>
<div class="Graphical">
<img src="ui/assets/images/x.png">
</div>
</div>
<div class="Module">
<div class="Textual">
<a id="poet"><div class="Title h2"><div class="Number">03</div>Designers</div></a>
<div class="Purpose">
<div class="Label">INTERACTIONS</div>
<div class="text h2">Until the A.I. is ready to take its own reins, human designers will teach Molly what good design is. This will be done through an automated design guideline creation and training tool as well as through direct programming of layout and style decisions on behalf of the designer.</div>
</div>
</div>
<div class="Graphical">
<img src="ui/assets/images/x.png">
</div>
</div>
<div class="Module">
<div class="Textual">
<a id="mason"><div class="Title h2"><div class="Number">04</div>Developers</div></a>
<div class="Purpose">
<div class="Label">INTERACTIONS</div>
<div class="text h2">.</div>
</div>
</div>
<div class="Graphical">
<img src="ui/assets/images/x.png">
</div>
</div>
<div class="Module">
<div class="Textual">
<a id="curator"><div class="Title h2"><div class="Number">05</div>Support Team</div></a>
<div class="Purpose">
<div class="Label">INTERACTIONS</div>
<div class="text h2">In order for a site owner to get meaningful help on support.thegrid.io, the support team will need to train Molly on how to respond appropriately and where to find pertinent information.</div>
</div>
</div>
<div class="Graphical">
<img src="ui/assets/images/x.png">
</div>
</div>
<div class="Module">
<div class="Textual">
<a id="stylist"><div class="Title h2"><div class="Number">06</div>Marketing Team</div></a>
<div class="Purpose">
<div class="Label">INTERACTIONS</div>
<div class="text h2">The tone of Molly’s interactions will make up a huge piece of The Grid’s brand going forward. The personality of our brand needs to come to life on thegrid.io, the apps, support.thegrid.io and across all marketing.</div>
</div>
</div>
<div class="Graphical">
<img src="ui/assets/images/x.png">
</div>
</div>
<div class="Module">
<div class="Textual">
<a id="plumber"><div class="Title h2"><div class="Number">07</div>Trainers</div></a>
<div class="Purpose">
<div class="Label">INTERACTIONS</div>
<div class="text h2">.</div>
</div>
</div>
<div class="Graphical">
<img src="ui/assets/images/x.png">
</div>
</div>
</section>
</div>
</body>
<script type="text/javascript" src="ui/assets/scripts/script.js"></script>
</html>