FanPage

• 

  Hashira gallery

• 

  Home/Preface off

• 

  Demon Moonlight

• 

  Arcs

Inspiration

We used HTML5 for structure and CSS3 for styling and interactivity. Key features include CSS keyframe animations for the nebula background, Flexbox and CSS Grid for layout, and transforms with transitions for smooth hover effects.

What it does

We used HTML5 for structure and CSS3 for styling and interactivity. Key features include CSS keyframe animations for the nebula background, Flexbox and CSS Grid for layout, and transforms with transitions for smooth hover effects.

How we built it

Creating complex animations and interactivity without JavaScript was difficult. Ensuring responsiveness across devices and optimizing performance for intricate CSS animations posed significant challenges.

Challenges we ran into

We successfully created an engaging, JavaScript-free interactive experience with a polished cosmic aesthetic. The innovative use of :target for navigation and responsive design across all devices are key achievements.

Accomplishments that we're proud of

We successfully created an engaging, JavaScript-free interactive experience with a polished cosmic aesthetic. The innovative use of :target for navigation and responsive design across all devices are key achievements

What we learned

We gained expertise in advanced CSS techniques like keyframes, transforms, and pseudo-classes. We also learned to optimize animations for performance and ensure accessibility in a visually complex project.

What's next for FanPage

Future plans include enhancing accessibility with better contrast and keyboard navigation, adding more celestial bodies, and experimenting with CSS variables for dynamic theming.

Built With

• css
• html