Skull & Crown Trading Co.

Overview

For this project, I recreated the Skull & Crown Trading Co. website using Bootstrap 5 as part of the E36: Your Choice with Bootstrap 5 experience for ICS 314. The goal was to design a visually appealing and responsive homepage inspired by a real local brand while applying Bootstrap’s components, grid system, and color utilities.

Features

Responsive Navbar: Built with Bootstrap’s navbar component that adjusts across screen sizes.
Hero Banner and Sections: Used container, row, and col classes to align content and images dynamically.
Brand Integration: Incorporated Skull & Crown’s gold logo and black theme to maintain the store’s authentic aesthetic.
Typography and Colors: Applied Bootstrap’s color palette (text-light, bg-dark) to create contrast and highlight sections.

Reflection

This project helped me understand how Bootstrap 5 simplifies layout management and ensures consistency across different viewports. At first, I struggled with text visibility and background contrast, but after experimenting with Bootstrap’s color utilities and custom CSS, I achieved a clean design that matched the brand identity.

Screenshot

Skull & Crown Trading Co. Project Screenshot Figure 1: Homepage design featuring the Skull & Crown Trading Co. logo and Bootstrap 5 layout.

AI Usage: I used ChatGPT to help refine the project description and formatting, but all Bootstrap code and design decisions were my own.