WinterWonderland.github.io

Inspiration and What It Does

Wanting to do a little more than just create a website on Christmas, this website was made to include a little more than just information! We have a selection of fun Holiday themed games to get you in the spirit, as well as opportunities to give back to the community during this festive season!

How we built it

Winter Wonderland was built using HTML(to build layout), CSS(to style elements), and Javascript(for interactivity)!

Challenges we ran into

Some of the challenges we ran into:

• Working out the animations. This was my second time working with scroll based animations, so it took a while to get used to creating these animations (especially the timeline one). Making the timeline ending dynamic (for any screen height and width) was difficult
• Programming the games from scratch! It took a while to get all the visual aspects perfect to create a fun User Experience!
• Creating the search and filters and making the html webpage more dynamic. All the different activities are filtered dynamically.

Accomplishments that we're proud of

• The Countdown Timer
• The Selection of Games in the Games Section (How many of the Trivia Questions can you get right?) –especially the Wordle
• The Animations (My favorite is the Timeline one!)
• The search and filter bars in the Activities page (How many activities have you tried?)
• Creating a favicon, this was the first time I was doing it!

What we learned

I learned to synthesize my code so it is as efficient! For example I learned to do this:
.parent:hover .child { /*changes that need to be made */ }

Versus creating an eventListener for the parent element to change the child.

What's next for Winterland!

Why stop at one game when you can have more? Winter Wonderland is hoping to be able to add more games to this website! Currently a Winter themed memory game is in the works, but I would love to hear any suggestions you may have on holiday related games.

##Citations

• All Images are royalty-free (from Pixabay) or Taken By the Creator(Me!)
• History.com was used to create the information on the Timeline on the Second Web Page
• External links from this website are not the property of the web designer(Me!)

Colors and Fonts

Colors	Hex
Dark Blue	#4184cc
Medium Blue	#8DDBF2
Very Light Blue	#e9f5f9
Brown	#865A3F
Brown(Transparent)	#865A3F44
Black	#000000
White	#FFFFFF

Fonts
Mountains of Christmas
Henny Penny
Arial

##Try It Out:

https://404found2.github.io/WinterWonderland.github.io/