This project is a solution to the QR code component challenge on Frontend Mentor, extended with a custom landing page and a grid layout demonstration.
Functionality
The website serves as a showcase for a QR code card component. It features a central Landing Page that directs users to two distinct implementations:
-
Single Card View: A standalone page displaying the component in isolation, centered on the screen.
-
Grid Layout View: A page displaying multiple instances of the component arranged in a responsive grid structure.
Both views include a navigation button to easily return to the Home screen.
Behavior
-
Responsive: The layout adapts seamlessly to different screen sizes. The grid view specifically shifts from a multi-column layout to a single column on devices with widths smaller than 1000px.
-
Interactive: Elements are engaging with cards and smooth navigation buttons that lift the elements and deepen their shadows, providing responsie feedback.
Look-and-Feel
A clean, modern aesthetic with the "Outfit" typeface and a soothing color palette of Slate Blue and White
.
The interface relies on card-based UI patterns with soft rounded corners and gentle drop shadows, creating a polished and professional appearance.
See the Style Guide for detailed design specifications.
Technologies:
HTML, CSS, and Mermaid.js for diagramming.
The site is automatically deployed to GitHub Pages via the Deploy static site to Pages workflow in .github/workflows/deploy-pages.yml. Pushes to main (or a manual workflow dispatch) publish the current contents of the repository root to Pages.
The Frontend Mentor challenge is to build a QR code component and get it looking as close to the pictures of the following designs:
Figure 1. Desktop QR Code design
Figure 2. Mobile QR Code design.
Figure 1. Desktop QR Code design
Figure 2. Mobile QR Code design.
graph LR
root["QR-Codes"]
%% Files in root
root --> index["index.html"] --> card["card.html"]
root --> index["index.html"] --> grid["grid.html"]
root --> readme["README.md"]
root --> styleguide["style-guide.md"]
root --> changelog["CHANGELOG.md"]
%% Directories
root --> assets["assets"]
root --> images["images"]
%% Assets Structure
assets --> css["css"]
css --> maincss["main.css"]
css --> gridcss["grid.css"]
css --> landingcss["landing.css"]
%% Images
images --> img1["image-qr-code.png"]
images --> img2["favicon-32x32.png"]
images --> img3["favicon-single.svg"]
images --> img4["favicon-grid.svg"]
All the required assets are in the /assets and /images folder. (Images are optimized.)
Use best judgment for displaying JPG files. e.g. font-size, padding and margin.
The style-guide.md contains the color palette and fonts specifications.
