Modern Bootstrap 5 Login Interface 🔐✨

📝 Overview

Modern Bootstrap 5 Login Interface is a clean, responsive web component developed as part of a technical coding challenge (Challenge Day 3, Fase 0, Week 1). This project demonstrates the power of the Bootstrap 5 framework combined with custom CSS to create a professional, user-centric sign-in experience.

The project focuses on mastering layout positioning (Centering), form components, and custom branding integrations.

---

✨ Key Features

• 📱 Fully Responsive Design: Seamlessly adapt to Desktop, Tablet, and Mobile views using the Bootstrap grid system.
• ✨ Floating Labels: Implementation of modern form-floating labels for a cleaner and more interactive input experience.
• 🟣 Custom Branding: Integrated a unique purple CSS-based logo ("B") to demonstrate custom branding capabilities alongside a CSS framework.
• 🎯 Vertical & Horizontal Centering: Advanced use of Flexbox and Bootstrap utility classes to perfectly center components in the viewport.
• ✅ Form Accessibility: Proper use of semantic HTML5 tags and labels for better accessibility.

---

🛠️ Technical Implementation

• Framework: Bootstrap 5.3 (CDN Implementation)
• Language: HTML5 & CSS3
• Custom Styling:
  • Full-Height Flexbox: Custom CSS applied to the body for precise component positioning.
  • Logo Design: Custom-crafted logo utilizing border-radius: 30% and high-contrast color palettes.
  • Form Optimization: Targeted CSS for input focus states and border refinements.

---

📁 Repository Structure

.
├── login-page.html  # Main HTML5 structure with Bootstrap integration
└── style.css        # Custom CSS refinements and brand styling

---

🚀 How to Run locally

1. Clone the Repository

   git clone https://github.com/ftryyln/belajarbootstrap.git

2. Open the Project
   • Simply open login-page.html in any modern web browser to view the interface.

---

Mastering the fundamentals of Modern Web Design. 🚀✨