Abstract website help page recreation (Frontend Practice)

A responsive front-end recreation of the Abstract website help page. This is a self-directed challenge from Frontend Practice to improve my layout, design, and vanilla JavaScript skills. Also, because it's fun.

👉 Check out the live site 🍘

📌 About the project

The goal is to recerate the structure, appearance, and behavior of the Abstract website. Specifically, only their help page. This is a pure front-end project: no frameworks, libraries, or build tools. Just pure HTML, CSS, and JavaSript. 🙃

❗This is a personal practice project! all banding, content, and design elements remain the property of Abstract. This clone is for educational, recreational, and non-commercial use only. Images, and text may be replaced with placeholders or free-to-use alternatives.

🍮 Features

• Mobile-first layout
• Responsive design
• Page receration (depends lol)
• Vanilla HTML/CSS/JavaScript only
• Layout, hover states, and interaction mimicry (attempt)

🔧 Tech stack

• HTML5
• CSS3
• JavaScript

No frameworks or tooling (e.g., no React, Tailwind, or Webpack)

📷 Sources

• Frontend Practice challenge site
• The Abstract website
• For images: Pexels and Unsplash
• For the website logo: Boxicons
• For the colored icons: from Prosymbols at Flaticon

⏳ Status

This is completed!

Page structure (HTML)

• Build the header (mobile)
• Build the header (desktop)
• Build the hero(?) banner (the section prior to the main section)
• Build the main content
• Build the footer

Styling (CSS)

• Style the header (mobile)
• Style the header (desktops)
• Style the main content (mobile/desktop)
• Style the footer
• Style the floating 'help' button
• Hover states, animations, etc

Interactivity (JS)

• Header hamburger menu?
• Header search?

Final stuff

• Final code cleanup and commenting
• Deploy the site to Github Pages
• Add the live site link to the top of the README

📝 Disclaimer

This is a fan-made, non-commercial project created for educational and recreational purposes only.
All text content, links, and branding elements in this project are copied from the Abstract website for practice purposes.
All images, icons, and other media are sourced from free-to-use platforms (e.g., Unsplash, Boxicons) or replaced with placeholders.
This project is not affiliated with, endorsed, sponsored, or specifically approved by Abstract, Inc.
All original code in this repository is licensed under the MIT License.