Git Product home page Git Product logo

banner's Introduction

Build Status GitHub release repo size license contributions welcome Website Donate

banner Banner

๐Ÿšฉ A simple and clean banner generator by Liyas Thomas


banner banner

Features โœจ

โค๏ธ Lightweight and minimal: Crafted with minimalistic UI design

๐Ÿ”Œ Real-time demo: WYSIWYG (what you see is what you get) banner editor

โšก Make it your own: Customize everything!

๐Ÿค– AI: Generate combination colors for background and foreground

โœจ Choose custom colors: Randomize or choose your own colors

๐Ÿš€ Save: Download generated banner to disk


Demo

https://liyasthomas.github.io/banner

  1. Give a heading
  2. Customize everything!
  3. Download banner

You're done!


Built with

  • Chromium - Thanks for being so fast!
  • HTML - For the web framework
  • CSS - For styling components
  • JavaScript - For magic!

Contributing

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.


Continuous Integration

We use Travis CI for continuous integration. Check out our Travis CI Status.


Versioning

This project is developed by Liyas Thomas using the Semantic Versioning specification. For the versions available, see the releases on this repository.


Change log

See the CHANGELOG file for details.


Authors

Lead Developers

Thanks

See the list of contributors who participated in this project.


License

This project is licensed under the MIT License - see the LICENSE file for details.


Acknowledgments

  • Hat tip to anyone who's code was used
  • Inspirations:

banner's People

Contributors

liyasthomas avatar mskian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

banner's Issues

Background blur

I would really like an option in the right hand side which lets me blur the background image that I've uploaded but not the text.
2

[Bug]

Describe the bug
Editing the title text of the banner does not work on iOS safari.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the app on iOS safari
  2. Click on the title
  3. Attempt to edit the text
  4. Nothing happens

Expected behavior
A cursor should be shown and the text should be editable.

Screenshots
If applicable, add screenshots to help explain your problem.

Tablet/Phone

  • OS: iOS
  • Browser: safari
  • Version: 12.4 (Beta)
  • Device: iPad 6th generation

A thin white line appears when the banner is downloaded.

A thin white line appears when the banner is downloaded.
When I download a banner a thin white line appears in at the bottom of it.
Maybe its picking up some default background css I am not sure. This is much prominent on the darker shade of background colours.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'https://liyasthomas.github.io/banner/'
  2. Click on 'Randomize' or make your custom banner from the available options.
  3. Click on 'Download'
  4. Open the image from the downloaded location and you'll notice the line on the bottom.

Expected behavior
The background colour selected during customizing or using the 'Randomize' button should cover the banner background completely.

Screenshots
banner (1)
banner (3)

Desktop :

  • OS: Linux Ubuntu 20.04
  • Browser Chrome Version 91.0.4472.77

Extension causing final image to have Circle.

Describe the bug
Circle Dot in the downloaded banner image while using Grammarly extension.

To Reproduce
Steps to reproduce the behavior:

  1. Grammarly chrome extension installed. https://chrome.google.com/webstore/detail/grammarly-grammar-checker/kbfnbcaeplbcioakkpcpgfkobkghlhen
  2. Go to https://liyasthomas.github.io/banner/
  3. Create any banner/random
  4. Click on download
  5. See error

Expected behavior
See a green circle in the place where the Grammarly extension was present in the final downloaded image.

Screenshots
image
Banner.png
banner (3)

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Version: 105.0.5195.102

[bug]: Entered text not displaying on downloaded image

Describe the bug
Entered text not displaying on the downloaded image.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'https://liyasthomas.github.io/banner/'
  2. Click on 'edit me' and enter something
  3. click on the 'Download' button
  4. Open the downloaded image
  5. See error

Expected behavior
The entered text should be displayed on the image.

Screenshots
banner (4)

Desktop (please complete the following information):

  • OS: [Linux]
  • Browser [Brave]
  • Version [1.32.113]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.