From da9455f6fd080bd423d1c490368a2054478e02d2 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Sat, 11 May 2019 12:22:26 +0530 Subject: [PATCH] website:make deprecated banner more prominent --- index.html | 2151 ++++++++++++++++++++++++++++------------------------ 1 file changed, 1172 insertions(+), 979 deletions(-) diff --git a/index.html b/index.html index de3b605..26c43b7 100644 --- a/index.html +++ b/index.html @@ -1,539 +1,549 @@ - - - - - Web Maker - A blazing fast & offline web playground - - - - - - - - - - - - - + - - + .say__name img { + height: 40px; + border-radius: 50%; + margin-right: 10px; + } - -
- -

- Web Maker -

-

A blazing fast & offline web playground in your browser

-
- - Open Web App - -

Recommended: More features. More fun!

- - - Add Chrome extension - -
+ .say__handle { + opacity: 0.7; + font-weight: normal; + } + + @media (min-width: 751px) { + .header { + position: fixed; + width: 460px; + left: 0; + } + + body { + padding-left: 460px; + } + + .download-btn { + /* margin: 1rem 0; */ + /* margin: 0 1rem; */ + width: 300px; + } + + .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 { + flex-basis: 50%; + max-width: 50%; + padding: 0.5em 2em; + } + + .info { + display: block; + 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 { + 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; + } + } + -
- Docs - Blog - Github - Share + + + +
+ +

+ 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
-
-
- Web Maker working screen -
- -
-
- -

Works Offline

-

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.

-
-
-

Quick Add Libraries

-

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. -

-
-
-

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. -

-
-
-

Open in Codepen

-

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

-
-
- -
-

♥

-
- -
- -
Chris Coyier
-
-

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! +

Works Offline

+

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

- -
-
- - - - -
- -
Fedor Loenko -
@fedorloenko
-
-
-

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!

- +
+
+

Preprocessor Support

+

+ 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. +

+
+
+

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. +

+
+
+

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. +

+
+
+

Open in Codepen

+

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

+
- +
+

♥

+
+ +
+ +
Chris Coyier
+
+

+ 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!

+ +
+
+ + + + +
+ +
+ Fedor Loenko +
@fedorloenko
+
+
+

+ 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!

+ -
-

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. -

- -

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 + +
+ +
Margaret H
+
+

+ 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: +

- - 🏠 Go to Web Maker 4's new home +

+ 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. +

- +
-
- Follow - @webmakerApp - for updates. Privacy Policy.
+
+ Follow + @webmakerApp + for updates. Privacy Policy. +
- - - - + - - - - + +