diff --git a/packages/website/_includes/default.html b/packages/website/_includes/default.html index 0d74251..05b3e32 100644 --- a/packages/website/_includes/default.html +++ b/packages/website/_includes/default.html @@ -1,582 +1,663 @@ + + + + + {% if page.url == '/' %}Web Maker{% else %}{{ title}} - Web Maker{% endif + %} + + + + + + + + + + - - - - {% if page.url == '/' %}Web Maker{% else %}{{ title}} - Web Maker{% endif %} - - - - - - - - - - - - + .say__name { + font-weight: bold; + color: #555; + display: flex; + align-items: center; + } - + .say__name img { + height: 40px; + border-radius: 50%; + margin-right: 10px; + } - - {% if page.fileSlug == '' %} -
-
- -

- Web Maker -

-

A blazing fast & offline web playground in your browser

-
- - Open Web App - -

Recommended: More features. More fun!

- - - Add Chrome extension - -
- + .main-content { + max-width: 1800px; + } + } + + @media screen and (min-width: 3000px) { + html { + font-size: 2.1em; + } + } + + @media (min-width: 751px) { + .homepage-title { + font-size: 4em; + } + + .hero { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 2em; + padding: 3em; + } + + .site-header { + padding: 1.5em; + } + + .logo { + width: 8em; + height: auto; + } + + .screenshot { + height: 35vh; + } + + .web-app-btn:after { + right: -50px; + } + + .web-app-btn:before { + right: -22px; + } + + .social-bar { + display: none; + position: fixed; + top: 30px; + right: 20px; + opacity: 0.5; + } + + .social-bar > a { + display: block; + margin-top: 10px; + } + + .feature-box { + min-width: 400px; + /* width: 80vw; */ + margin: 0 auto; + } + + .feature { + padding: 0.5em 2em; + flex: 1; + flex-basis: 16vw; + padding: 0.5em 2em; + margin: 1em; + } + + .info { + background: white; + box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15); + padding: 2rem; + position: fixed; + will-change: transform; + bottom: 0; + transform: translateY(101%); + width: 70vw; + margin-left: -35vw; + left: 50%; + text-align: left; + font-size: 0.9em; + transition: 0.4s cubic-bezier(0.77, -0.1, 0.13, 0.9); + } + + .info.show { + display: block; + visibility: visible; + transform: translateY(0); + } + + .people-say-top, + .people-say-bottom { + display: flex; + overflow: scroll; + } + + .say { + width: 18vw; + flex-shrink: 0; + padding: 20px; + } + + .say p { + margin: 20px 0 0 0; + } + } + + + + + {% if page.fileSlug == '' %} +
+
+ +

+ Web Maker +

+

+ A blazing fast & offline web playground in your browser +

+
+ + Open Web App + +

Recommended: More features. More fun!

+ + + Add Chrome extension + +
+ +
+ Docs + Blog + Github + Share +
+
+
+ Web Maker working screen +
+
+ {% else %} +
- Docs - Blog - Github - Share +

+ + + Web Maker + +

+
+
+
-
- Web Maker working screen -
-
- {% else %} -
-
-

- - Web Maker - -

-
-
- -
-
- {% endif %} +
+ {{content}} +
-
- {{content}} -
+
+

+ Web Maker needs the following permissions to work with full + capabilities. In words of Chrome extensions: +

-
-

Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:

+

+ Read & change all your data on the websites that you visit + - 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. +

-

- Read & change all your data on the websites that you visit - 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. -

- -

Disclaimer

-

Web Maker - does not track any user specific data. It uses Google Analytics to track aggregated events to - improve user experience - based on what features are used more. If still you want to opt-out of Google Analytics tracking, please visit - https://tools.google.com/dlpage/gaoptout or - you can set up a filter in Adblock Plus or similar ad blocker tools like - AdBlock, uBlock or Adblock Pro.

-
- Close +

Disclaimer

+

+ Web Maker does not track any user specific data. It + uses Google Analytics to track aggregated events to improve user + experience based on what features are used more. If still you want to + opt-out of Google Analytics tracking, please visit + https://tools.google.com/dlpage/gaoptout + or you can set up a filter in Adblock Plus or similar ad blocker tools + like AdBlock, uBlock or Adblock Pro. +

+
+ Close +
-
- -
- - - - - - - - - - - -
+
- {% include footer.html %} + {% include footer.html %} - - - - + - } - - - - - - - + + diff --git a/packages/website/images/testimonials/aa.jpg b/packages/website/images/testimonials/aa.jpg new file mode 100644 index 0000000..7bfcd7d Binary files /dev/null and b/packages/website/images/testimonials/aa.jpg differ diff --git a/packages/website/images/testimonials/ca.png b/packages/website/images/testimonials/ca.png new file mode 100644 index 0000000..dede3c5 Binary files /dev/null and b/packages/website/images/testimonials/ca.png differ diff --git a/packages/website/images/testimonials/cc.jpg b/packages/website/images/testimonials/cc.jpg new file mode 100644 index 0000000..a98eeb0 Binary files /dev/null and b/packages/website/images/testimonials/cc.jpg differ diff --git a/packages/website/images/testimonials/nv.jpg b/packages/website/images/testimonials/nv.jpg new file mode 100644 index 0000000..5f41325 Binary files /dev/null and b/packages/website/images/testimonials/nv.jpg differ diff --git a/packages/website/images/testimonials/rd.jpg b/packages/website/images/testimonials/rd.jpg new file mode 100644 index 0000000..7a7e247 Binary files /dev/null and b/packages/website/images/testimonials/rd.jpg differ diff --git a/packages/website/images/testimonials/sitepoint.jpg b/packages/website/images/testimonials/sitepoint.jpg new file mode 100644 index 0000000..dfd6961 Binary files /dev/null and b/packages/website/images/testimonials/sitepoint.jpg differ diff --git a/packages/website/images/testimonials/sitepoint.png b/packages/website/images/testimonials/sitepoint.png new file mode 100644 index 0000000..dede3c5 Binary files /dev/null and b/packages/website/images/testimonials/sitepoint.png differ diff --git a/packages/website/index.html b/packages/website/index.html index 7de9b8d..4e53029 100644 --- a/packages/website/index.html +++ b/packages/website/index.html @@ -10,178 +10,269 @@ layout: default.html -->

Works Offline

-

Lives completely in your browser. There is no network involved, so it opens and shows previews instantly.

+

+ Lives completely in your browser. There is no network involved, so it + opens and shows previews instantly. +

Preprocessor Support

-

Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or TypeScript - you get it all.

+

+ Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or + TypeScript - you get it all. +

Quick Add Libraries

-

Drop in any library from the available list or put a URL of any other library you wish to add. +

+ Drop in any library from the available list or put a URL of any other + library you wish to add.

Multiple Layouts

-

Get exact same layout in front of you, that you last saved the creation in. Plus, a full screen layout to see - your work - in actual browser window. +

+ Get exact same layout in front of you, that you last saved the creation + in. Plus, a full screen layout to see your work in actual browser window.

Files Mode

-

Get a complete local-like environment where you can code in files instead of 3 separate panes. +

+ Get a complete local-like environment where you can code in files instead + of 3 separate panes.

Preview screenshot capture

-

Feel like taking a screenshot of your awesome creation, just hit the Capture button to get a beautiful - screenshot - of - your result. +

+ Feel like taking a screenshot of your awesome creation, just hit the + Capture button to get a beautiful screenshot of your result.

Open in Codepen

-

Done with your creation and want to share it with the world? One click and have your work open in CodePen. +

+ Done with your creation and want to share it with the world? One click and + have your work open in CodePen.

And much more awesomeness!

-

It doesn't stop there. There is JavaScript console, integrated Prettier support, command palette and more! +

+ It doesn't stop there. There is JavaScript console, integrated Prettier + support, command palette and more!

-

♥ from all - around

+

+ ♥ from all around +

- +
- +
Chris Coyier
-

If you're looking for a CodePen-like offline editor, and use Chrome, check out Web-Maker by Kushagra Gour.

+

+ If you're looking for a CodePen-like offline editor, and use Chrome, + check out Web-Maker by Kushagra Gour. +

-
-
- +
- +
Joacim Nilsson

This is something I will be using alot. Thank you! :D

 - +
- +
Oksana Borukh
-

It's fantastic! I'm glad I've discovered it! Thanks! -

+

It's fantastic! I'm glad I've discovered it! Thanks!
-
-
-
- +
- -
Fedor Loenko + +
+ Fedor Loenko
@fedorloenko
-

Great Chrome extension via @chinchang457. I need offline CodePen from time to time.

+

+ Great Chrome extension via @chinchang457. I need offline CodePen from + time to time. +

- +
- +
Steve Lack

Thanks for creating this. What a great tool for productivity!

 - +
- +
Margaret H
-

Decided to use it to work on my latest project, it's pretty awesome! Thank you for making this!

+

+ Decided to use it to work on my latest project, it's pretty awesome! + Thank you for making this! +

-
-

Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:

+

+ Web Maker needs the following permissions to work with full capabilities. In + words of Chrome extensions: +

- Read & change all your data on the websites that you visit - 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. + Read & change all your data on the websites that you visit + - 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.

Disclaimer

-

Web Maker - does not track any user specific data. It uses Google Analytics to track aggregated events to - improve user experience - based on what features are used more. If still you want to opt-out of Google Analytics tracking, please visit - https://tools.google.com/dlpage/gaoptout or - you can set up a filter in Adblock Plus or similar ad blocker tools like - AdBlock, uBlock or Adblock Pro.

+

+ Web Maker does not track any user specific data. It uses + Google Analytics to track aggregated events to improve user experience based + on what features are used more. If still you want to opt-out of Google + Analytics tracking, please visit + https://tools.google.com/dlpage/gaoptout + or you can set up a filter in Adblock Plus or similar ad blocker tools like + AdBlock, uBlock or Adblock Pro. +

-