So you have accepted the gig and agreed to code a webpage or two for the band. If you haven't got much knowledge of HTML and CSS, not to worry! This is a beginner-friendly task. The resources provided at the end will prove highly beneficial to you in finding your way about.
HTML is a language used to describe the structure of the pages you see on the browser, whereas CSS enables those pages to look beautiful and tidy. Additionally, JavaScript can be used to create dynamically updating content, control multimedia, and animate images! Pretty cool, right?
In this task, your objective is to recreate the following two pages as closely to the design as possible, using purely HTML and CSS.
This is the page users "land" on when they visit the band's website.
This page is a directory of the shop's available items and its prices. If you'd like, you can find the specifics of each item in the template listed here.
- The icons to the right of the navigation bar should be direct the user to an appropriate social link upon clicking.
- The 'Explore Shop' button should link to the Shop page.
- The logo to the left end of the navbar should be mapped to the landing page.
All the assets and images you require for this task can be found in the assets directory. The images you use may be different, but you must stick strictly to the following colour palette:
- Midnight Blue #0B0B21
- Indigo #3345AB
- Turquoise #2BDAE1
- White #FFFFFF
Doesn't it seem redundant that you have to write the exact same HTML code for the navbar on both pages? As developers, we must stick by the D.R.Y rule: Don't Repeat Yourself. Thankfully, it is possible to use javascript to define a reusable HTML component.
Using JavaScript, write a reusable navbar element that can be called in your HTML instead. You may refer to the resources for help.