This is Sophia and Lucy’s second project for Typography and Interaction Design. We used HTML and CSS to build our website as a response to Daisy Alioto’s article, “Gradients: The Colorful Design Trend Aiming to Soothe These Anxious Times.”
The reading explores what gradients are, popular examples, historical context, modern manifestations, and where we can see them today. Our site was inspired by the “LA sunset” Alioto references in the article, featuring vivid colors and examples throughout the page.
The goal of this site is to be fully responsive across mobile, tablet, and desktop.
Some tools and techniques we used (and want to remember):
- Media queries were set at various sizes to make our layout responsive and seamless on desktop
- Sticky positioning for our headings and gradients
- border-inline-start to create a decorative solid line, as well as a border-image for gradient borders
- Defined CSS variables like --spacing: 3rem;, --color-bl: #222222;, and --color-wh: #f7f7f7; to save time and target specific elements throughout the code
- Display Grid for multi-column layouts in larger sections such as the header and body text
- Flexbox for horizontally stacking navigation items and using the justify-content property to control spacing
- Adjusted line-height for improved readability
- Added color and linear-gradient effects to replicate the gradient themes discussed in the article