-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
168 lines (150 loc) · 8.9 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="static/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
window.location = "http://codesign.io/chrome"
</script>
</head>
<body>
<header class="main-header">
<div class="inner">
<div class="group">
<div class="col-50">
<a href="http://www.codesign.io" class="main-logo"><strong class="bold-font">codesign</strong>.io</a>
</div>
<div class="col-50 align-right">
<nav class="main-nav">
<a href="#" class="main-nav-link">About</a>
<a href="#" class="main-nav-link">Jobs</a>
<a href="#" class="main-nav-link">Log in</a>
<a href="#" class="main-nav-link selected">Sign up</a>
</nav>
</div>
</div>
</div>
</header>
<section class="content">
<div class="inner">
<div class="align-center">
<h1 class="bold-font">The simplest way to share and <br /> discuss feedback on web</h1>
<!-- Invited -->
<div class="group hide">
<h1 class="bold-font">You need Chrome Extension</h1>
<h2>to view and discuss feedback from Vad Mikhalyov</h2>
</div>
<!-- How it works -->
<div class="group">
<div class="how-it-works-holder"><img src="static/images/play-icon.png" alt=""> how it works</div>
</div>
<!-- Greetings -->
<div class="hide">
<h1 class="bold-font">It’s all fine, Alexander!</h1>
<h2>Thank you for going through. What’s next?</h2>
<div class="tutorial-holder group">
<div class="col-33">
<img src="static/images/step-1.png" alt="Choose “Add comment”">
<div class="tutorial-label">Choose “Add comment”</div>
</div>
<div class="col-33">
<img src="static/images/step-2.png" alt="Leave your feedback">
<div class="tutorial-label">Leave your feedback</div>
</div>
<div class="col-33">
<img src="static/images/step-3.png" alt="Share live or board link with peers!">
<div class="tutorial-label">Share live or board link with peers!</div>
</div>
</div>
</div>
<!-- Install button -->
<a href="#" class="install-block"><img src="static/images/store-icon.png" alt="Chrome web store"> Install Chrome Extension (free)</a>
<!-- Wrong Browser Message -->
<div class="hide">
<a href="#" class="wrong-browser-block">
<img src="static/images/store-icon.png" alt="Chrome web store">
<span class="wrong-browser-details">Sorry, we provide only Chrome Extension right now.</span>
<br />
Learn more on Chrome Webstore
</a>
<div class="wrong-browser-email hide">
<div class="wrong-browser-label">Be the first to know about other browsers:</div>
<div class="group">
<input type="text" class="wrong-browser-input"><input type="submit" value="Send" class="wrong-browser-button">
<div class="wrong-browser-caption hide">Can't be empty or Wrong email format</div>
</div>
</div>
<div class="wrong-browser-success">
Thank you! We will notify you as soon as possible.
</div>
</div>
<!-- Already installed -->
<a href="#" class="wrong-browser-block hide">
<img src="static/images/store-icon.png" alt="Chrome web store">
<span class="wrong-browser-details">Extension already Installed!</span>
<br />
Learn more on Chrome Webstore
</a>
<!-- Sign up -->
<div class="hide">
<h1 class="bold-font">Extension Installed!</h1>
<h2>Please, sign up to discuss live feedback on web, <br />make screen capture and get unlimited storage</h2>
<a href="#" class="install-block signup-with-facebook-btn"><img src="static/images/fb-btn-icon.png" alt="Sign up with Facebook"> Sign up with Facebook</a>
<div class="signup-other-holder"><a href="#">Google</a> or <a href="#">Email</a></div>
<img src="static/images/arrow.png" alt="" class="arrow-pointer">
</div>
<img src="static/images/browser.png" alt="" class="main-image">
</div>
</div>
</section>
<section class="faq-holder">
<div class="inner">
<!-- <h1 class="bold-font align-center">FAQ</h1> -->
<div class="group">
<div class="faq-block">
<span class="faq-q">What is browser extension?</span>
<p class="faq-a">Browser extension is a little app installed in your Chrome Browser. It enriches your browsing experience with extra features, such as bookmarking to Pocket, notes creation for Evernote or fast files uploading via Dropbox. You can check a lot of interesting extensions in Google Chrome Webstore.</p>
</div>
<div class="faq-block">
<span class="faq-q">What can I do with Codesign extension?</span>
<p class="faq-a">Now there is no need to first make a website screenshot and then manually upload it to Codesign. You can do it instantly with your Codesign extension and get a link to share with your collaborators. Codesign extension also allows you to capture full length screenshots. Now you can choose between leaving feedback on live websites or sharing boards as you used to in our web app.</p>
</div>
<div class="faq-block">
<span class="faq-q">Live and Board sharing. What’s the difference?</span>
<p class="faq-a"><span class="bold-font">Live sharing</span> is when you share a link right to website with your feedback. Only people having Desktop Chrome browser and Codesign Chrome Extension installed can view and discuss your comments. It’s perfect for web pages available on public, but if you are on a web page which is not available to everybody (requires an authorization or is locally hosted), your collaborators probably won’t see what you do. In this case you should use Board sharing</p>
<p class="faq-a"><span class="bold-font">Board sharing</span> is a safe and “solid" way to share your feedback via full-length capture. Technically, youupload a web page as a picture into a Codesign board which already has feedback you added. Regular boards are available to view and discuss on every browser, both desktop and mobile, no need for extension installed.
</p>
</div>
<div class="group">
<div class="col-50">
<div class="faq-block">
<span class="faq-q">Should I pay for something <br /> now or later?</span>
<p class="faq-a">No, Codesign Chrome Extension is absolutely free.</p>
</div>
</div>
<div class="col-50">
<div class="faq-block">
<span class="faq-q">I need this thing for <br /> special needs!</span>
<p class="faq-a">Please, contact us <a href="mailto:[email protected]" class="green-link">[email protected]</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="main-footer">
<div class="inner align-center">
<a href="mailto:[email protected]" class="footer-link">Contact us</a>
<a href="#" class="footer-link">Privacy Policy</a>
<a href="#" class="footer-link">Facebook</a>
<a href="#" class="footer-link">Twitter</a>
<a href="#" class="footer-link">AngelList</a>
</div>
</footer>
</body>
</html>