Giter Club home page Giter Club logo

ultrapop's Introduction

ULTRAPOP

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.

ultrapop's People

Contributors

myklindle avatar

Watchers

 avatar

Forkers

mattscottbarnes

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.