https://github.com/candytale55/res-jake-elwood
🕶️ A three-page demo site built with JavaScript and Vite. Fully responsive for mobile and widescreen, using CSS Grid for layout. Presents a fictional marketing agency and demonstrates basic front-end structure, layout, and styling.
https://github.com/candytale55/res-jake-elwood
css-grid css-grid-layout javascript learning-exercise responsive-design scrimba scrimba-frontend vanilla-javascript vite
Last synced: about 2 months ago
JSON representation
🕶️ A three-page demo site built with JavaScript and Vite. Fully responsive for mobile and widescreen, using CSS Grid for layout. Presents a fictional marketing agency and demonstrates basic front-end structure, layout, and styling.
- Host: GitHub
- URL: https://github.com/candytale55/res-jake-elwood
- Owner: candytale55
- Created: 2025-11-24T19:49:12.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-11-27T07:40:21.000Z (7 months ago)
- Last Synced: 2025-11-30T01:31:17.042Z (7 months ago)
- Topics: css-grid, css-grid-layout, javascript, learning-exercise, responsive-design, scrimba, scrimba-frontend, vanilla-javascript, vite
- Language: HTML
- Homepage:
- Size: 483 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: agents.md
Awesome Lists containing this project
README
# Jake & Elwood Agency
A responsive multi-page website for a creative agency, built with mobile-first design principles.
## Project Description
This project showcases a modern, responsive website with clean typography and a bold color scheme. The site features multiple pages including a homepage, about page, and contact page, all optimized for mobile, tablet, and desktop viewports.
## Features
- **Mobile-first responsive design**
- **Custom CSS variables** for consistent theming
- **Semantic HTML5** structure
- **Modular CSS** organization
- **Accessible** design patterns
## Project Structure
```
res-jake-elwood/
├── index.html # Homepage
├── about.html # About page
├── contact.html # Contact page
├── src/
│ ├── css/
│ │ ├── variables.css # CSS custom properties
│ │ └── style.css # Main stylesheet
│ ├── js/
│ │ └── main.js # JavaScript functionality
│ └── images/ # Image assets
├── docs/
│ ├── text files/ # Content documentation
│ └── wireframes/ # Design references
└── README.md
```
## Technologies Used
- HTML5
- CSS3 (Custom Properties, Flexbox, Grid)
- JavaScript (ES6+)
- Google Fonts (Montserrat)
- Font Awesome 7.0.1 (Icon Library via CDN)
## Color Palette
- **Primary:** White (#FFFFFF)
- **Secondary:** Black (#000000)
- **Accent:** Yellow (#FFE600)
- **Dark Gray:** #404040
- **Light Gray:** #EBEBEB
## Typography
- **Font Family:** Montserrat, sans-serif
- **Font Weights:** 300 (Light), 400 (Normal), 700 (Bold)
- **Base Size:** 16px
## Development Guidelines
This project follows specific development conventions documented in `agents.md`, including:
- Mobile-first CSS approach (baseline: 375px)
- Semantic class naming conventions
- Comprehensive inline comments for learning
- Section-based code organization
## External Resources
- **Google Fonts:** [Montserrat](https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap)
- **Font Awesome:** [v7.0.1 via CDN](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css)
- Icon Library: https://fontawesome.com/
- CDN Provider: https://cdnjs.com/libraries/font-awesome
## Links and References
- Figma design: [Jake & Elwood](https://xd.adobe.com/spec/f255d364-6d5e-4aaf-7703-6f8d0a398281-8464/grid/)
- Based on a tutorial in Scrimba's [_Learn Responsive Web Design_](https://scrimba.com/learn-responsive-web-design-c029)