Welcome to the Cael Anselm Fandom, a dedicated space for Cael Anselm fans to engage and share their passion. This website is a project for the SBA 307: HTML and CSS assignment, designed to test skills in creating an appealing and functional website.
Cael Anselm is a main character of the romance adventure simulation (otome) game : Lovebrush Chronicles, where players roleplay as a university art student who travels to alternative and parallel universes.
The Cael Anselm FanClub Portal features several key pages:
- Home Page: The gateway to the fanclub experience, featuring dynamic content and direct navigation to all site areas.
- Login Page: Allows existing members to access personalized areas of the site.
- Registration Page: For new users to become members by providing their details.
- About Page: Detailed information about the game and interactive media links.
- Gallery Page: A visually rich page showcasing media from past events and official video clips.
- Membership Pricing Page: Outlines various membership tiers with corresponding benefits.
- Have at least three pages. ✓
Six pages have been included in this project including "Home", "Login", "SignUp", "About", "Gallery" and "Membership" pages.
- Use at least ten different HTML tags. ✓
In this project, the HTML structure employs a variety of tags to create a comprehensive and interactive website. For example, <header>,<footer>,<nav>,<h1>,<h2>,<p>,<span> <ul>,<li>,<table>,<form>,<input>,<button>,<label>,<img> and <div> have been employed, which ensures that the website is not only functional but also engaging and well-structured.
- Include at least one table. ✓
Table has been included in "Membership Page" under section Compare plans.
- Include at least two forms. ✓
Forms have been included in "Login Page" and "SignUp Page".
- Include at least one dropdown menu. ✓
Dropdown menu has been include in "About Page" as a dropdown list of all media links.
- Include at least one of each of the following forms of content: ✓
- Text. (Done)
- Images. (Done)
- GIFs. (Done)
- Make use of inline, internal, and external styling. ✓
Inline, internal, and external styling have bee used in this project. Please check styles folder.
- Use five different CSS selectors. ✓
Universal Selector, Type Selectors, Class Selectors, ID Selectors, Descendant Selectors and Pseudo-Classes have been used in this project.
- Use colors that complement each other. ✓
The base color is black for most pages, Text elements are generally styled in white along with some purple color in backgroud to emphasize some content.
- Use Flexbox and/or the Bootstrap Grid. ✓
Bootstrap Grid and Flexbox have been used to have a consistent layout.
- Use at least two CSS animations. ✓
Slidein and Rotate animations have been used in the Home page heading title and footer image rotation when hovering.