- → zobaidul kaziex
- → Bootstrap homepage with background color...
Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
Features Added:
Background Gradient: A smooth gradient background using linear-gradient.
Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover.
Button Customization: A custom round button with hover color change.
Animation: The card content animates with a "fade-in-up" effect using keyframe animation.
This bootstrap css example is contributed by zobaidul kaziex, on 05-Sep-2024. Component is made with bootstrap css v.4.6. It is responsive.
Author zobaidul kaziex
More Examples
-
Pricing CardsThree pricing tiers (Basic, Pro, and Enterprise) using Bootstrap's card component.
2 months ago155v.5.3 -
2 months ago891v.4.6 -
2 months ago177v.5.3 -
Features sectionShowcase features with icons
6 months ago167v.4.6 -
2 months ago203v.5.3 -
5 months ago1.2kv.4.6 -
Bootstrap comment box with replyComment form design
2 months ago263v.5.3 -
HTML, CSS, and JavaScript for Multi-layer Dropdown HeaderHTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.
3 weeks ago58v.4.6 -
6 months ago1.2kv.5.3 -
HTML and CSS for Hero SectionExplanation: HTML: Hero Section: Uses a background image with a gradient overlay. Hero Content: Centered with a title, subtitle, and a call-to-action button. CSS: Hero Section Styling: Full viewport height with a gradient overlay for better text readability and a background image. Hero Content Styling: Centered with responsive padding and font sizes. Button Styling: Custom button colors and hover effects. Background Image: Placeholder URL: Replace 'https://via.placeholder.com/1920x1080' with the actual URL of your hero image
3 weeks ago70v.4.6 -
2 months ago171v.4.6
-
Responsive footer using HTML and Bootstrap:HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.
3 weeks ago67v.4.6
Didn't find component you were looking for?
Search from 150+ componenent
