Writings.dev — Static Webpage

A responsive, animated, dark-themed static webpage inspired by a curated developer articles portal. Built with HTML and CSS only.

Overview

This project recreates a clean, modern landing and listing page for developer articles featuring:

• Header with brand and navigation
• Hero section with a logo, title, and subtitle
• Category pills bar with hover/active styles
• Responsive article card grid with images, titles, excerpts, and metadata
• Pagination
• Footer with badges/links

No JavaScript frameworks or build steps are required.

Project Structure

./
├── index.html         # Main HTML page
├── styles.css         # All styling, variables, responsiveness, and animations
├── public/            # Static assets (images, logos)
│   ├── Logo.png
│   ├── image_1.png
│   ├── image_2.png
│   ├── image_3.png
│   ├── image_4.png
│   ├── image_5.png
│   ├── image_6.png
│   ├── image_7.png
│   ├── image_8.png
│   └── image_9.png
└── README.md          # This file

Getting Started

• Open index.html directly in your browser.
• Alternatively, serve the folder with any static server (optional), e.g. VSCode Live Server.

Technologies

• HTML5
• CSS3 (modern layout with CSS Grid and Flexbox)

Key Features

• Dark theme with CSS variables for easy theming
• Responsive grid: 3 columns → 2 columns → 1 column (breakpoints at 1000px and 640px)
• Smooth micro-interactions: link underline slide, card lift, image zoom, pill hover, floating hero logo
• Accessible markup: semantic tags, alt on images, reduced decorative elements marked as non-essential

Styling Details

All styling lives in styles.css. Highlights:

• CSS variables in :root for colors and spacing:

  :root{
    --bg: #21262e;
    --panel: #2a313a;
    --elev: #333b46;
    --text: #e6e9ef;
    --muted: #a4adbb;
    --brand: #f88379;   /* coral accent */
    --brand-2: #7aa2ff; /* secondary accent */
    --ring: rgba(122,162,255,.35);
    --radius: 16px;
    --spacing: 22px;
  }

• Typography:
  • Headline uses Prata (serif) for a distinctive hero title.
  • UI text uses Poppins (primary) with Inter as a fallback for system feel.
  • Fonts are loaded via Google Fonts in index.html.
• Layout:
  • .grid uses CSS Grid for the article cards.
  • .card uses Flexbox (display: flex; flex-direction: column;) so .media sits on top and .card-body expands using flex: 1.
• Animations/Transitions:
  • .hero-logo has a gentle float keyframe animation.
  • Links and cards use transition for smooth hover effects.

Assets

All images and the logo are expected inside public/:

• public/Logo.png — displayed in the hero section.
• public/image_1.png … public/image_9.png — card thumbnails.

You can replace any of these with your own. Keep similar aspect ratios for best results.

How to Customize

• Colors: edit variables in :root within styles.css.
• Typography: change or remove Google Fonts link in index.html and adjust font-family stacks in styles.css.
• Spacing and radii: tweak --spacing and --radius.
• Grid density: change .grid { grid-template-columns: ... } and gap.
• Card image height: update .media img { height: 170px; }.
• Category list: modify the pill links inside index.html under the #categories section.

Common Q&A

• Why didn’t height: 100% work on .card-body?
  • Percentage heights require a definite height on the parent. Here, the parent .card is content-sized, so height: 100% causes the body to compete with the image and expand the card. The fix: make .card a flex column container and give .card-body flex: 1.

Accessibility Notes

• Buttons/links have discernible text.
• Images include alt text. Replace placeholder text with descriptive copy.
• Color contrast is tuned for dark backgrounds; test with your content.

Future Enhancements (Ideas)

• Real pagination behavior (JavaScript or server-side)
• Category filtering and active state persistence
• Article detail pages
• Light/dark theme toggle (CSS variables + small JS)
• Prefers-reduced-motion adjustments

License

This project is provided as-is for learning and demonstration. You may use and adapt it for your own projects. Ensure you have rights to any images you include.