Home page for Ultra Pop
The goal here is to create a landing page for the Toy store ULTRAPOP.
The Page will link to the current web store front, but Eventually the end goal will be to tie into to shopify and make use of the Ultra-Pop domain and sunset current Ultra-pop site.
The Page has links to social media accounts Icons by Font Awesome
Header image and Favicons provided by ANGRYBLUE.
All Images have been converted, and optimized.
Sections include New Arrivals, Brands, Events, Museum, Originals and Store.
Newsletter Sign up sheet used to hoard Email addys.
Footer has address as well as links to initiate phone calls and emails.
Code Louisville info
CSS Features:
- Flex Box. Using Flex box to display in collumns in mobile, and rows on medium and large view ports.
- Custom Font. I know youre feeling that font arent you? yea me too. Its Apfel Grotesk Regular, dont worry I didnt steal it, its provided open source from collletttivo.io and is being front loaded to the site from the repository. No google fonts here.
- Media Queries. At viewports <768px the header image takes up the full width of the screen, the navigation menu is on the left and will hover, sections are styled as buttons, and display in a column> At 768px& 1200px nav displays horizontal sections display as rows, possibly grid by the time you are reading this. the site was built mobile first. now that requirements have been met i will be continueing to style this viewport until the day of submission.
JavaScript Features:
- jQuery. Using jQuery to pull current year in footer
- fontAwesome. Using FA for easy rad Social Media icons. Perfect for the Aspiring dev that hates social media.
- script @ line 101 animates the page when scrolling
- filename.js In the Aptly named "filename.js" you will find a couple of functions. Did that alert trick you? I'm Just playin yall, you cant click away your likeness. The super useful HELLONURSE function prints hello nurse to the console, who doesnt need an Animaniacs reference. The slightly more useful function would be the one that grabs the input from my newsletter field and spits it back out with a DieHard Reference. Total "asshole on elbow" dev here, but eventually if the owner creates a real newsletter, this will be reworked to actually capture data rather than regurgitate it.
Future Plans Plans are to expand each section in the future to have its own html pages: New Arrivals - a page to show new merch. should display at least two images of merch Brands - A page to showcase diffent available brands Museum - A page to shocase Pauls collection of toys Originals - a Page to showcase Resin toys made in house.
Plan to include a youtube video when viewed in a larger viewport, would like to throw some more images at the larger vp as well.
Would like to actually help provide list of emails to the owner of Ultrapop to create a legit newsletter.