🎃🍂 Improve the UI of the website

[choyiny]

Goal

Welcome Hacktoberfest! The goal of this issue is to improve the UI of the website of this project.

Description

Currently the UI is very plain and doesn't have a lot of content. The goal is to create a nicer looking UI possibly with headers and footers and more content!

Be Creative!

For example, you could make the website change background every 10 seconds. Scroll down to see other suggestions.

The new design must not be intrusive with user experience. Eg. No bright red backgrounds.

Ideas (?)

Dont let the below ideas limit your creativity. Multiple designs can be created and a different one can be loaded every time a user enters.

• Dictionary styled definition of full stop. (@conscou)
• Changing background colors (@conscou)
• Kindergarten drawing styled webpage
• Changeable themes and interactive content?
• Implement animation (perhaps animate.css) (@anu0012)
• typed.js implementation (typed.js)
• (!!!!) A very cool parallax.js implementation

It would be amazing for you to comment down below if you are interested in this project!

Contribute?

Please read CONTRIBUTION.MD

[kzisme]

@choyiny Any ideas in-particular?

[constantina-js]

So I'm new to working open source things. I forked the repo and did something super basic, which is to change the background color each time a person visits the page.

I was thinking that we can a dictionary-styled definition of a full stop somewhere on the page as well?

[choyiny]

@kzisme I dont have any solid ideas right now, but I like the idea of @conscou making a dictionary-styled definition of full stop on the page. EDIT: added some descriptions in main thread

@conscou Do you know how to open a pull request? Just venture to this page and click new pull request to get started. Click "Compare across forks" and change your fork as the head fork, and mine as the base.

[constantina-js]

@choyiny yeah I had accidentally closed it and reopened it lol. But I think it should have went through? Again, it was a really basic change and I limited the color choices for now.

[choyiny]

@conscou I have merged it! With regards to your idea of a dictionary styled page, this font seems good for it.

<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">

[constantina-js]

@choyiny Font is perfect! As far as how to show the definition, I'm torn between either having the first full stop in "This is a full stop..." a different color and then the user can hover over it and the definition would appear, or we just have a separate element on the page in which the user clicks it and the definition becomes visible below it.

Thoughts?

[choyiny]

@conscou The page doesn't have much stuff at the moment. I think we should first scrap the CSS framework I've been using and put the text to the center of the webpage. As there is not much content, I think having it all on the webpage is good enough. However, I am fine with both. Maybe I can learn some more javascript along the way.

[anu0012]

what type of content we can add ?

[choyiny]

@anu0012 I have added a bunch of ideas at the very top! We can also discuss some of your ideas here if you have any. I hope this repo can help you expand your knowledge on HTML, CSS and Javascript so feel free to play around.

[anu0012]

@choyiny we can add some animation to the text .

[choyiny]

@anu0012 definitely, make a pull request and see what you can come up with! It will also be great if you guys can spin up github pages for your fork so we can view the result easily.

[alejandro-sg]

Thanks for putting this into Hacktoberfest. I have already forked the repo and ready to get ideas flowing!

[choyiny]

@jasierragarcia Welcome! Feel free to give ideas so I can add it to the main thread!

[calvinrbnspiess]

Hello @choyiny ! I am really interested in creating a design. I already forked the repository, and I want to create an old computer terminal looking design with typewriting effect if you agree with this idea. Full stop.

[choyiny]

@Vailfire good idea! Read CONTRIBUTION.MD and start a PR!

[alejandro-sg]

@choyiny Since one of ideas you guys offered is to change the background color, I think I can work on making the color transition smooth with javascript and I can also work on adding a header and footer!

[kzisme]

I'll take a look at the latest commit/PR tonight or tomorrow and see what I
can add :)

On Oct 2, 2016 2:08 PM, "Juan Sierra" notifications@github.com wrote:

@choyiny https://github.com/choyiny Since one of ideas you guys offered
is to change the background color, I think I can work on making the color
transition smooth with javascript and I can also work on adding a header
and footer!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#1 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADVOunwNOx9hvaZeoJzzXvflxx9eoSWoks5qv_MJgaJpZM4KL61n
.

[choyiny]

@jasierragarcia That sounds great, thanks!
@kzisme Thanks a lot!

[aakashkhatter1296]

@choyiny Should I create a new html file for the style change I wish to add ?

[choyiny]

@aakashkhatter1296 That's correct!

[choyiny]

Moving on to developing in the /js branch.