1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-09 08:02:24 +02:00

fix testimonials

This commit is contained in:
Kushagra Gour
2019-03-15 13:12:42 +05:30
parent c00541dbcf
commit efb057221b
9 changed files with 744 additions and 572 deletions

View File

@ -1,28 +1,40 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>
<title>{% if page.url == '/' %}Web Maker{% else %}{{ title}} - Web Maker{% endif %}</title> {% if page.url == '/' %}Web Maker{% else %}{{ title}} - Web Maker{% endif
<meta property="og:title" content="Web Maker"> %}
<meta name="viewport" content="width=device-width"> </title>
<meta name="description" content="A blazing fast & offline web playground"> <meta property="og:title" content="Web Maker" />
<meta property="og:description" content="A blazing fast & offline web playground"> <meta name="viewport" content="width=device-width" />
<meta property="og:image" content="https://webmaker.app/ss1.png"> <meta
name="description"
content="A blazing fast & offline web playground"
/>
<meta
property="og:description"
content="A blazing fast & offline web playground"
/>
<meta property="og:image" content="https://webmaker.app/ss1.png" />
<link rel="image_src" href="/images/ss1.png?v3.0.0" /> <link rel="image_src" href="/images/ss1.png?v3.0.0" />
<meta name="twitter:image" content="https://webmakerapp.com/ss1.png" /> <meta name="twitter:image" content="https://webmakerapp.com/ss1.png" />
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image" />
<link rel="icon" href="/images/icon-128.png"> <link rel="icon" href="/images/icon-128.png" />
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/lkfkkhfhhdkiemehlpkgjeojomhpccnh"> <link
rel="chrome-webstore-item"
href="https://chrome.google.com/webstore/detail/lkfkkhfhhdkiemehlpkgjeojomhpccnh"
/>
<style type="text/css"> <style type="text/css">
html { html {
font-size: 1.2em; font-size: 1.2em;
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: white; background: white;
min-height: 100vh; min-height: 100vh;
line-height: 1.4; line-height: 1.4;
@ -104,7 +116,7 @@
} }
a { a {
color: #1A5A7A; color: #1a5a7a;
} }
.hero a { .hero a {
@ -148,7 +160,6 @@
text-decoration: none; text-decoration: none;
} }
.download-btn.disabled { .download-btn.disabled {
filter: grayscale(50); filter: grayscale(50);
} }
@ -165,7 +176,7 @@
transform: rotate(-10deg); transform: rotate(-10deg);
} }
.btn>img { .btn > img {
vertical-align: middle; vertical-align: middle;
margin-right: 10px; margin-right: 10px;
} }
@ -183,7 +194,7 @@
.site-header__logo { .site-header__logo {
width: 50px; width: 50px;
height: 20px height: 20px;
} }
.site-footer { .site-footer {
@ -206,7 +217,7 @@
transition: 0.25s ease; transition: 0.25s ease;
} }
.social-bar>a { .social-bar > a {
margin-left: 10px; margin-left: 10px;
} }
@ -259,7 +270,6 @@
align-items: flex-start; align-items: flex-start;
} }
.say { .say {
color: inherit; color: inherit;
padding: 10px 20px; padding: 10px 20px;
@ -271,6 +281,7 @@
background: #f8f8f8; background: #f8f8f8;
text-align: left; text-align: left;
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05);
text-decoration: none;
} }
.say:hover { .say:hover {
@ -295,8 +306,8 @@
} }
.say__handle { .say__handle {
opacity: 0.7; color: #515151;
font-weight: normal; font-weight: 400;
} }
@media screen and (min-width: 2000px) { @media screen and (min-width: 2000px) {
@ -357,7 +368,7 @@
opacity: 0.5; opacity: 0.5;
} }
.social-bar>a { .social-bar > a {
display: block; display: block;
margin-top: 10px; margin-top: 10px;
} }
@ -414,12 +425,10 @@
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
} }
</style> </style>
</head>
</head> <body>
<body>
{% if page.fileSlug == '' %} {% if page.fileSlug == '' %}
<div class="hero"> <div class="hero">
<header class="header"> <header class="header">
@ -429,34 +438,56 @@
<h1 class="homepage-title"> <h1 class="homepage-title">
Web Maker Web Maker
</h1> </h1>
<h2 style="margin-bottom:0.4em;">A blazing fast & offline web playground in your browser</h2> <h2 style="margin-bottom:0.4em;">
A blazing fast & offline web playground in your browser
</h2>
<div style="margin-top: 30px;" id="cta" class="mb-2"> <div style="margin-top: 30px;" id="cta" class="mb-2">
<a class="btn download-btn web-app-btn" href="/app/"> <a class="btn download-btn web-app-btn" href="/app/">
<span>Open Web App</span> <span>Open Web App</span>
</a> </a>
<p style="margin-top:3px;">Recommended: More features. More fun!</p> <p style="margin-top:3px;">Recommended: More features. More fun!</p>
<a class="btn download-btn js-chrome-btn" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh"> <a
<img src="images/chrome-logo.png" height="40" alt=""> class="btn download-btn js-chrome-btn"
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh"
>
<img src="images/chrome-logo.png" height="40" alt="" />
<span>Add Chrome extension</span> <span>Add Chrome extension</span>
</a> </a>
</div> </div>
<script> <script>
if (navigator.userAgent.indexOf('Chrome') === -1 || navigator.userAgent.match(/android/i)) { if (
navigator.userAgent.indexOf('Chrome') === -1 ||
navigator.userAgent.match(/android/i)
) {
document.querySelector('.js-chrome-btn').classList.add('disabled'); document.querySelector('.js-chrome-btn').classList.add('disabled');
document.querySelector('.js-chrome-btn').setAttribute('data-hint', 'Check back on Google Chrome browser') document
.querySelector('.js-chrome-btn')
.setAttribute('data-hint', 'Check back on Google Chrome browser');
} }
</script> </script>
<div> <div>
<a href="/docs" class="">Docs</a> <a href="/docs" class="">Docs</a>
<a href="https://medium.com/web-maker/" class="ml-1">Blog</a> <a href="https://medium.com/web-maker/" class="ml-1">Blog</a>
<a href="https://github.com/chinchang/web-maker/" class="ml-1">Github</a> <a href="https://github.com/chinchang/web-maker/" class="ml-1"
<a class="hint--top-right ml-1" data-hint="Share on Twitter" href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp" >Github</a
target="_blank" class="tweet-link">Share</a> >
<a
class="hint--top-right ml-1"
data-hint="Share on Twitter"
href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp"
target="_blank"
class="tweet-link"
>Share</a
>
</div> </div>
</header> </header>
<div style="margin-top:30px;"> <div style="margin-top:30px;">
<img class="screenshot" src="images/ss1.png?v3.0.0beta" height="" alt="Web Maker working screen"> <img
class="screenshot"
src="images/ss1.png?v3.0.0beta"
height=""
alt="Web Maker working screen"
/>
</div> </div>
</div> </div>
{% else %} {% else %}
@ -466,7 +497,8 @@
<a href="/"> <a href="/">
<svg class="site-header__logo"> <svg class="site-header__logo">
<use xlink:href="#logo"></use> <use xlink:href="#logo"></use>
</svg> Web Maker </svg>
Web Maker
</a> </a>
</h2> </h2>
</div> </div>
@ -474,10 +506,17 @@
<nav> <nav>
<a href="/docs" class="">Docs</a> <a href="/docs" class="">Docs</a>
<a href="https://medium.com/web-maker/" class="ml-1">Blog</a> <a href="https://medium.com/web-maker/" class="ml-1">Blog</a>
<a href="https://github.com/chinchang/web-maker/" class="ml-1">Github</a> <a href="https://github.com/chinchang/web-maker/" class="ml-1"
<a class="hint--top-right ml-1" data-hint="Share on Twitter" href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp" >Github</a
target="_blank" class="tweet-link">Share</a> >
<a
class="hint--top-right ml-1"
data-hint="Share on Twitter"
href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp"
target="_blank"
class="tweet-link"
>Share</a
>
</nav> </nav>
</div> </div>
</header> </header>
@ -488,41 +527,63 @@
</main> </main>
<div id="info" class="info"> <div id="info" class="info">
<p>Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:</p> <p>
Web Maker needs the following permissions to work with full
capabilities. In words of Chrome extensions:
</p>
<p> <p>
<strong>Read & change all your data on the websites that you visit</strong> - Worry not. This is just required for <strong
the new tab >Read & change all your data on the websites that you visit</strong
replacement feature where Web Maker shows up only if the new tab url is chrome://newtab/. Nothing is read, stored or >
changed. - Worry not. This is just required for the new tab replacement feature
where Web Maker shows up only if the new tab url is chrome://newtab/.
Nothing is read, stored or changed.
</p> </p>
<h3>Disclaimer</h3> <h3>Disclaimer</h3>
<p>Web Maker <p>
<strong>does not track</strong> any user specific data. It uses Google Analytics to track aggregated events to Web Maker <strong>does not track</strong> any user specific data. It
improve user experience uses Google Analytics to track aggregated events to improve user
based on what features are used more. If still you want to opt-out of Google Analytics tracking, please visit experience based on what features are used more. If still you want to
<a href="https://tools.google.com/dlpage/gaoptout" target="_blank">https://tools.google.com/dlpage/gaoptout</a> or opt-out of Google Analytics tracking, please visit
you can set up a filter in Adblock Plus or similar ad blocker tools like <a href="https://tools.google.com/dlpage/gaoptout" target="_blank"
AdBlock, uBlock or Adblock Pro.</p> >https://tools.google.com/dlpage/gaoptout</a
>
or you can set up a filter in Adblock Plus or similar ad blocker tools
like AdBlock, uBlock or Adblock Pro.
</p>
<div style="text-align: center;"> <div style="text-align: center;">
<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a> <a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
</div> </div>
</div> </div>
<div class="social-bar"> <div class="social-bar">
<a class="hint--bottom-left" data-hint="I am on Github" href="https://github.com/chinchang/web-maker/" target="_blank" <a
class="tweet-lin"> class="hint--bottom-left"
data-hint="I am on Github"
href="https://github.com/chinchang/web-maker/"
target="_blank"
class="tweet-lin"
>
<svg viewBox="0 0 16 16" style="width:32px;height:32px;fill:#666;"> <svg viewBox="0 0 16 16" style="width:32px;height:32px;fill:#666;">
<path d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"></path> <path
d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"
></path>
</svg> </svg>
</a> </a>
<a class="hint--bottom-left" data-hint="Share on Twitter" href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp" <a
target="_blank" class="tweet-link"> class="hint--bottom-left"
data-hint="Share on Twitter"
href="https://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground!&via=webmakerApp&related=webmakerApp"
target="_blank"
class="tweet-link"
>
<svg viewBox="0 0 16 16" style="width:32px;height:32px;fill:#55ACEE;"> <svg viewBox="0 0 16 16" style="width:32px;height:32px;fill:#55ACEE;">
<path d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809 <path
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z" /> d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"
/>
</svg> </svg>
</a> </a>
<!--<a class="hint--bottom-left" data-hint="Featured on ProductHunt" href="https://www.producthunt.com/tech/web-maker-2-0" target="_blank"> <!--<a class="hint--bottom-left" data-hint="Featured on ProductHunt" href="https://www.producthunt.com/tech/web-maker-2-0" target="_blank">
@ -534,49 +595,69 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="logo" viewBox="-145 -2 372 175"> <symbol id="logo" viewBox="-145 -2 372 175">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-145.000000, -1.000000)"> <g
<polygon id="Path-1" fill="#FF4600" points="31 0 232 0 132 173.310547"></polygon> stroke="none"
<polygon id="Path-1" fill="#FF6C00" points="0 0 201 0 101 173.310547"></polygon> stroke-width="1"
<polygon id="Path-1" fill="#FF6C00" transform="translate(271.500000, 86.500000) scale(1, -1) translate(-271.500000, -86.500000) " fill="none"
points="171 0 372 0 272 173.310547"></polygon> fill-rule="evenodd"
<polygon id="Path-1" fill="#FF4600" transform="translate(241.500000, 86.500000) scale(1, -1) translate(-241.500000, -86.500000) " transform="translate(-145.000000, -1.000000)"
points="141 0 342 0 242 173.310547"></polygon> >
<polygon
id="Path-1"
fill="#FF4600"
points="31 0 232 0 132 173.310547"
></polygon>
<polygon
id="Path-1"
fill="#FF6C00"
points="0 0 201 0 101 173.310547"
></polygon>
<polygon
id="Path-1"
fill="#FF6C00"
transform="translate(271.500000, 86.500000) scale(1, -1) translate(-271.500000, -86.500000) "
points="171 0 372 0 272 173.310547"
></polygon>
<polygon
id="Path-1"
fill="#FF4600"
transform="translate(241.500000, 86.500000) scale(1, -1) translate(-241.500000, -86.500000) "
points="141 0 342 0 242 173.310547"
></polygon>
</g> </g>
</symbol> </symbol>
</svg> </svg>
<script type="text/javascript"> <script type="text/javascript">
if (location.host.indexOf('localhost') === -1) { if (location.host.indexOf('localhost') === -1) {
var _gaq = _gaq || []; var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-87786708-1']); _gaq.push(['_setAccount', 'UA-87786708-1']);
_gaq.push(['_trackPageview']); _gaq.push(['_trackPageview']);
(function () { (function() {
var ga = document.createElement('script'); var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.type = 'text/javascript';
ga.async = true; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; ga.src =
('https:' == document.location.protocol
? 'https://ssl'
: 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s); s.parentNode.insertBefore(ga, s);
})(); })();
} }
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
window.$crisp = []; window.$crisp = [];
window.CRISP_WEBSITE_ID = "c00b07b9-42da-45dd-87b0-e614bf7fb240"; window.CRISP_WEBSITE_ID = 'c00b07b9-42da-45dd-87b0-e614bf7fb240';
(function () { (function() {
d = document; d = document;
s = d.createElement("script"); s = d.createElement('script');
s.src = "https://client.crisp.chat/l.js"; s.src = 'https://client.crisp.chat/l.js';
s.async = 1; s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s); d.getElementsByTagName('head')[0].appendChild(s);
})(); })();
</script> </script>
<link rel="stylesheet" href="{{ '/css/hint.css' | url }}"> <link rel="stylesheet" href="{{ '/css/hint.css' | url }}" />
</body> </body>
</html> </html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -10,178 +10,269 @@ layout: default.html
<path d="M2.28,3L1,4.27L2.47,5.74C2.04,6 1.61,6.29 1.2,6.6L3,9C3.53,8.6 4.08,8.25 4.66,7.93L6.89,10.16C6.15,10.5 5.44,10.91 4.8,11.4L6.6,13.8C7.38,13.22 8.26,12.77 9.2,12.47L11.75,15C10.5,15.07 9.34,15.5 8.4,16.2L12,21L14.46,17.73L17.74,21L19,19.72M12,3C9.85,3 7.8,3.38 5.9,4.07L8.29,6.47C9.5,6.16 10.72,6 12,6C15.38,6 18.5,7.11 21,9L22.8,6.6C19.79,4.34 16.06,3 12,3M12,9C11.62,9 11.25,9 10.88,9.05L14.07,12.25C15.29,12.53 16.43,13.07 17.4,13.8L19.2,11.4C17.2,9.89 14.7,9 12,9Z" /> <path d="M2.28,3L1,4.27L2.47,5.74C2.04,6 1.61,6.29 1.2,6.6L3,9C3.53,8.6 4.08,8.25 4.66,7.93L6.89,10.16C6.15,10.5 5.44,10.91 4.8,11.4L6.6,13.8C7.38,13.22 8.26,12.77 9.2,12.47L11.75,15C10.5,15.07 9.34,15.5 8.4,16.2L12,21L14.46,17.73L17.74,21L19,19.72M12,3C9.85,3 7.8,3.38 5.9,4.07L8.29,6.47C9.5,6.16 10.72,6 12,6C15.38,6 18.5,7.11 21,9L22.8,6.6C19.79,4.34 16.06,3 12,3M12,9C11.62,9 11.25,9 10.88,9.05L14.07,12.25C15.29,12.53 16.43,13.07 17.4,13.8L19.2,11.4C17.2,9.89 14.7,9 12,9Z" />
</svg> --> </svg> -->
<h3 class="feature__title">Works Offline</h3> <h3 class="feature__title">Works Offline</h3>
<p>Lives completely in your browser. There is no network involved, so it opens and shows previews instantly.</p> <p>
Lives completely in your browser. There is no network involved, so it
opens and shows previews instantly.
</p>
</div> </div>
<div class="feature"> <div class="feature">
<h3 class="feature__title">Preprocessor Support</h3> <h3 class="feature__title">Preprocessor Support</h3>
<p>Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or TypeScript - you get it all.</p> <p>
Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or
TypeScript - you get it all.
</p>
</div> </div>
<div class="feature"> <div class="feature">
<h3 class="feature__title">Quick Add Libraries</h3> <h3 class="feature__title">Quick Add Libraries</h3>
<p>Drop in any library from the available list or put a URL of any other library you wish to add. <p>
Drop in any library from the available list or put a URL of any other
library you wish to add.
</p> </p>
</div> </div>
<div class="feature"> <div class="feature">
<h3 class="feature__title">Multiple Layouts</h3> <h3 class="feature__title">Multiple Layouts</h3>
<p>Get exact same layout in front of you, that you last saved the creation in. Plus, a full screen layout to see <p>
your work Get exact same layout in front of you, that you last saved the creation
in actual browser window. in. Plus, a full screen layout to see your work in actual browser window.
</p> </p>
</div> </div>
<div class="feature"> <div class="feature">
<h3 class="feature__title">Files Mode</h3> <h3 class="feature__title">Files Mode</h3>
<p>Get a complete local-like environment where you can code in files instead of 3 separate panes. <p>
Get a complete local-like environment where you can code in files instead
of 3 separate panes.
</p> </p>
</div> </div>
<div class="feature"> <div class="feature">
<h3 class="feature__title">Preview screenshot capture</h3> <h3 class="feature__title">Preview screenshot capture</h3>
<p>Feel like taking a screenshot of your awesome creation, just hit the Capture button to get a beautiful <p>
screenshot Feel like taking a screenshot of your awesome creation, just hit the
of Capture button to get a beautiful screenshot of your result.
your result.
</p> </p>
</div> </div>
<div class="feature"> <div class="feature">
<h3 class="feature__title">Open in Codepen</h3> <h3 class="feature__title">Open in Codepen</h3>
<p>Done with your creation and want to share it with the world? One click and have your work open in CodePen. <p>
Done with your creation and want to share it with the world? One click and
have your work open in CodePen.
</p> </p>
</div> </div>
<div class="feature"> <div class="feature">
<h3 class="feature__title">And much more awesomeness!</h3> <h3 class="feature__title">And much more awesomeness!</h3>
<p>It doesn't stop there. There is JavaScript console, integrated Prettier support, command palette and more! <p>
It doesn't stop there. There is JavaScript console, integrated Prettier
support, command palette and more!
</p> </p>
</div> </div>
</div> </div>
<div class="people-say"> <div class="people-say">
<h2 style="font-size: 2em;" class="ta-c" aria-label="Love from all around"><span style="color:red;"></span> from all <h2 style="font-size: 2em;" class="ta-c" aria-label="Love from all around">
around</h2> <span style="color:red;"></span> from all around
</h2>
<div class="people-say-top"> <div class="people-say-top">
<a target="_blank" href="https://blog.codepen.io/2017/01/19/web-maker/" class="say"> <a
target="_blank"
href="https://blog.codepen.io/2017/01/19/web-maker/"
class="say"
>
<div class="say__name"> <div class="say__name">
<img src="https://pbs.twimg.com/profile_images/883049860332609537/IsUISvAq_400x400.jpg" alt=""> <img src="/images/testimonials/cc.jpg" alt="" />
<div>Chris Coyier</div> <div>Chris Coyier</div>
</div> </div>
<p>If you're looking for a CodePen-like offline editor, and use Chrome, check out Web-Maker by Kushagra Gour.</p> <p>
If you're looking for a CodePen-like offline editor, and use Chrome,
check out Web-Maker by Kushagra Gour.
</p>
</a> </a>
<a target="_blank" href="https://twitter.com/Ryan_Random/status/832242636970930177" class="say say--twitter"> <a
target="_blank"
href="https://twitter.com/Ryan_Random/status/832242636970930177"
class="say say--twitter"
>
<div class="say__name"> <div class="say__name">
<img src="https://pbs.twimg.com/profile_images/777487197532401665/hsnFGGH2_bigger.jpg" alt=""> <img src="/images/testimonials/rd.jpg" alt="" />
<div>Ryan Davidson <div>
Ryan Davidson
<div class="say__handle">@Ryan_Random</div> <div class="say__handle">@Ryan_Random</div>
</div> </div>
</div> </div>
<p>Really enjoying using Web Maker - super fast offline web playground.</p> <p>
Really enjoying using Web Maker - super fast offline web playground.
</p>
</a> </a>
<a target="_blank" href="https://twitter.com/NashVail/status/831126444486975489" class="say say--twitter"> <a
target="_blank"
href="https://twitter.com/NashVail/status/831126444486975489"
class="say say--twitter"
>
<div class="say__name"> <div class="say__name">
<img src="https://pbs.twimg.com/profile_images/798582099691212800/15i7-mX-_400x400.jpg" alt=""> <img src="/images/testimonials/nv.jpg" alt="" />
<div>Nishant Verma <div>
Nishant Verma
<div class="say__handle">@NashVail</div> <div class="say__handle">@NashVail</div>
</div> </div>
</div> </div>
<p>Finding awesome pens on @CodePen and recreating them in @webmakerApp is my new hobby</p> <p>
Finding awesome pens on @CodePen and recreating them in @webmakerApp is
my new hobby
</p>
</a> </a>
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" <a
class="say"> target="_blank"
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
class="say"
>
<div class="say__name"> <div class="say__name">
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECLSb76_ywaCj7gEiC3ZjYXJkX3Bob3RvKigyMTBmZjI0YjYxM2VkZWZiNmYyNTkwZjEwN2RlNjBlYjRkOTE2YmJlMAHafGv-p112HZJ-KreQxPF8-yn0EQ" <img
alt=""> src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECLSb76_ywaCj7gEiC3ZjYXJkX3Bob3RvKigyMTBmZjI0YjYxM2VkZWZiNmYyNTkwZjEwN2RlNjBlYjRkOTE2YmJlMAHafGv-p112HZJ-KreQxPF8-yn0EQ"
alt=""
/>
<div>Joacim Nilsson</div> <div>Joacim Nilsson</div>
</div> </div>
<p>This is something I will be using alot. Thank you! :D</p> <p>This is something I will be using alot. Thank you! :D</p>
</a> </a>
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" <a
class="say"> target="_blank"
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
class="say"
>
<div class="say__name"> <div class="say__name">
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCK_Jvffnu_2AXSILdmNhcmRfcGhvdG8qKDk3Njg3NDE2NjI1YThmNDgyMDk4OWM3MTBiMTMxNmUzOWQwZGNhMWEwAbe0xm_6UPdrZFAaScMLUOpKFfHP" <img
alt=""> src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCK_Jvffnu_2AXSILdmNhcmRfcGhvdG8qKDk3Njg3NDE2NjI1YThmNDgyMDk4OWM3MTBiMTMxNmUzOWQwZGNhMWEwAbe0xm_6UPdrZFAaScMLUOpKFfHP"
alt=""
/>
<div>Oksana Borukh</div> <div>Oksana Borukh</div>
</div> </div>
<p>It's fantastic! I'm glad I've discovered it! Thanks! <p>It's fantastic! I'm glad I've discovered it! Thanks!</p>
</p>
</a> </a>
</div> </div>
<div class="people-say-bottom"> <div class="people-say-bottom">
<a target="_blank" href="https://twitter.com/labnol/status/816576061622235136" class="say say--twitter"> <a
target="_blank"
href="https://twitter.com/labnol/status/816576061622235136"
class="say say--twitter"
>
<div class="say__name"> <div class="say__name">
<img src="https://pbs.twimg.com/profile_images/905692103883104256/J0feWkQe_normal.jpg" alt=""> <img src="/images/testimonials/aa.jpg" alt="" />
<div>Amit Agarwal <div>
Amit Agarwal
<div class="say__handle">@labnol</div> <div class="say__handle">@labnol</div>
</div> </div>
</div> </div>
<p>This is like having your own copy of Codepen that also works offline.</p> <p>
This is like having your own copy of Codepen that also works offline.
</p>
</a> </a>
<a target="_blank" href="https://twitter.com/Armstrong/status/832191260026888197" class="say say--twitter"> <a
target="_blank"
href="https://twitter.com/Armstrong/status/832191260026888197"
class="say say--twitter"
>
<div class="say__name"> <div class="say__name">
<img src="https://pbs.twimg.com/profile_images/974909553/Screen_shot_2010-06-09_at_19.14.22_bigger.png" alt=""> <img src="/images/testimonials/ca.png" alt="" />
<div>Chris Armstrong <div>
Chris Armstrong
<div class="say__handle">@Armstrong</div> <div class="say__handle">@Armstrong</div>
</div> </div>
</div> </div>
<p>@webmakerApp looks like a good offline alternative to @CodePen.</p> <p>@webmakerApp looks like a good offline alternative to @CodePen.</p>
</a> </a>
<a target="_blank" href="https://twitter.com/sitepointdotcom/status/832987050597085184" class="say say--twitter"> <a
target="_blank"
href="https://twitter.com/sitepointdotcom/status/832987050597085184"
class="say say--twitter"
>
<div class="say__name"> <div class="say__name">
<img src="https://pbs.twimg.com/profile_images/851318206807420928/etT-R3rp_bigger.jpg" alt=""> <img src="/images/testimonials/sitepoint.jpg" alt="" />
<div>SitePoint <div>
SitePoint
<div class="say__handle">@sitepointdotcom</div> <div class="say__handle">@sitepointdotcom</div>
</div> </div>
</div> </div>
<p>Meet Web Maker, an Offline, Browser-based CodePen Alternative.</p> <p>Meet Web Maker, an Offline, Browser-based CodePen Alternative.</p>
</a> </a>
<a target="_blank" href="https://twitter.com/fedorloenko/status/835186942354534400" class="say"> <a
target="_blank"
href="https://twitter.com/fedorloenko/status/835186942354534400"
class="say"
>
<div class="say__name"> <div class="say__name">
<img src="https://pbs.twimg.com/profile_images/947822663061393408/zhC3vxBL_bigger.jpg" alt=""> <img
<div>Fedor Loenko src="https://pbs.twimg.com/profile_images/947822663061393408/zhC3vxBL_bigger.jpg"
alt=""
/>
<div>
Fedor Loenko
<div class="say__handle">@fedorloenko</div> <div class="say__handle">@fedorloenko</div>
</div> </div>
</div> </div>
<p>Great Chrome extension via @chinchang457. I need offline CodePen from time to time.</p> <p>
Great Chrome extension via @chinchang457. I need offline CodePen from
time to time.
</p>
</a> </a>
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" <a
class="say"> target="_blank"
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
class="say"
>
<div class="say__name"> <div class="say__name">
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCNn44MXB2a_DZSILdmNhcmRfcGhvdG8qKDM2YTNiMDhkYzEyMmVkY2IyZjM2YzY0NTAzNTdjMWU5YWVhM2JmM2MwAc4a1i_Vddj6AIdGg9rpk_xdMePf" <img
alt=""> src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCNn44MXB2a_DZSILdmNhcmRfcGhvdG8qKDM2YTNiMDhkYzEyMmVkY2IyZjM2YzY0NTAzNTdjMWU5YWVhM2JmM2MwAc4a1i_Vddj6AIdGg9rpk_xdMePf"
alt=""
/>
<div>Steve Lack</div> <div>Steve Lack</div>
</div> </div>
<p>Thanks for creating this. What a great tool for productivity!</p> <p>Thanks for creating this. What a great tool for productivity!</p>
</a> </a>
<a target="_blank" href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews" <a
class="say"> target="_blank"
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
class="say"
>
<div class="say__name"> <div class="say__name">
<img src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECOrDgpLHt4jwzwEiC3ZjYXJkX3Bob3RvKig2ZWNkNGM4MmM0MDY2ZmFkMDUzZmE3MGY4MWE3NWM5OTIzZjA4MGRlMAEmU4uVE7yiEAzp6wGGR7B3MMjErg" <img
alt=""> src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECOrDgpLHt4jwzwEiC3ZjYXJkX3Bob3RvKig2ZWNkNGM4MmM0MDY2ZmFkMDUzZmE3MGY4MWE3NWM5OTIzZjA4MGRlMAEmU4uVE7yiEAzp6wGGR7B3MMjErg"
alt=""
/>
<div>Margaret H</div> <div>Margaret H</div>
</div> </div>
<p>Decided to use it to work on my latest project, it's pretty awesome! Thank you for making this!</p> <p>
Decided to use it to work on my latest project, it's pretty awesome!
Thank you for making this!
</p>
</a> </a>
</div> </div>
</div> </div>
<div id="info" class="info"> <div id="info" class="info">
<p>Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:</p> <p>
Web Maker needs the following permissions to work with full capabilities. In
words of Chrome extensions:
</p>
<p> <p>
<strong>Read & change all your data on the websites that you visit</strong> - Worry not. This is just required for <strong>Read & change all your data on the websites that you visit</strong>
the new tab - Worry not. This is just required for the new tab replacement feature where
replacement feature where Web Maker shows up only if the new tab url is chrome://newtab/. Nothing is read, stored or Web Maker shows up only if the new tab url is chrome://newtab/. Nothing is
changed. read, stored or changed.
</p> </p>
<h3>Disclaimer</h3> <h3>Disclaimer</h3>
<p>Web Maker <p>
<strong>does not track</strong> any user specific data. It uses Google Analytics to track aggregated events to Web Maker <strong>does not track</strong> any user specific data. It uses
improve user experience Google Analytics to track aggregated events to improve user experience based
based on what features are used more. If still you want to opt-out of Google Analytics tracking, please visit on what features are used more. If still you want to opt-out of Google
<a href="https://tools.google.com/dlpage/gaoptout" target="_blank">https://tools.google.com/dlpage/gaoptout</a> or Analytics tracking, please visit
you can set up a filter in Adblock Plus or similar ad blocker tools like <a href="https://tools.google.com/dlpage/gaoptout" target="_blank"
AdBlock, uBlock or Adblock Pro.</p> >https://tools.google.com/dlpage/gaoptout</a
>
or you can set up a filter in Adblock Plus or similar ad blocker tools like
AdBlock, uBlock or Adblock Pro.
</p>
<div style="text-align: center;"> <div style="text-align: center;">
<a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a> <a class="btn" href="javascript:void(0)" onclick="closeInfo()">Close</a>
</div> </div>
</div> </div>