Test

# 8-Bit Blog - Retro Style Static Website

A static HTML, CSS, and JavaScript blog website with a retro 8-bit style design. This project can be used as-is or converted into a Blogger template.

## Project Structure

```
blogger-template/
├── index.html          # Main page with blog posts list
├── post.html           # Template for individual blog posts
├── css/
│   └── style.css       # Main stylesheet with retro 8-bit styling
├── js/
│   └── main.js         # JavaScript functionality
├── assets/             # Directory for images and other assets
└── template.xml        # Blogger template version
```

## Features

### Design Elements
- Pixelated fonts using 'Press Start 2P' from Google Fonts
- 8-bit color palette with limited colors
- Pixel art icons and decorations
- Chunky borders and buttons
- Retro game-inspired UI elements
- Custom 8-bit cursor

### Website Structure
- Responsive layout that works on all devices
- Blog post listing on the home page
- Individual post page template
- Sidebar with widgets (About, Categories, Recent Posts)
- Navigation menu
- Footer with social links

### Interactive Elements
- Hover and click animations for buttons
- Loading effects
- Random glitch effects
- Konami code easter egg (↑↑↓↓←→←→BA)

## How to Use

### As a Static Website
1. Download or clone the repository
2. Open `index.html` in your browser to view the home page
3. Click on "READ MORE" to view the post page
4. Modify the HTML files to add your own content

### Converting to Blogger Template
The `template.xml` file contains a Blogger-compatible version of the website. To use it:

1. Log in to your Blogger account
2. Go to "Theme" in the left sidebar
3. Click on the dropdown menu (▼) next to "Customize"
4. Select "Edit HTML"
5. Delete all existing code
6. Copy and paste the entire content of `template.xml`
7. Click "Save"

## Customization

### Colors
The color scheme can be modified in the CSS variables at the top of `style.css`:

```css
:root {
    --color-bg: #0f0f1b;
    --color-primary: #ff004d;
    --color-secondary: #00e756;
    --color-accent: #fff024;
    --color-text: #fff1e8;
    --color-dark: #1d2b53;
    --color-light: #7e2553;
    --color-border: #83769c;
}
```

### Fonts
The website uses 'Press Start 2P' from Google Fonts. You can change this by:

1. Updating the Google Fonts link in the `<head>` section
2. Modifying the font-family in the CSS

### Adding Content
- To add new blog posts, duplicate the post structure in `index.html` and create new post pages based on `post.html`
- For the Blogger version, you can add posts through the Blogger interface

## Credits

- Font: [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) from Google Fonts
- Inspiration: Classic 8-bit video games and pixel art

## License

This project is available for personal and commercial use.

Home

0 Comments: