<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
margin: 80px auto;
background-color: #a56de6
}
</style>
</head>
<body>
<div class="contain">
<div class="row">
<div class="col-lg-7 p-0 mb-lg-0 mb-3">
<div class="card1 pb-0">
<div class="row pt-3">
<div class="col-lg-4 col-md-6 pb-5">
<div class="d-flex"> <span class="fas fa-tasks px-3 py-1"></span>
<div class="d-flex flex-column">
<p class="fw-bold">Tasks</p>
<p class="text-muted">Customize the way you manage work</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pb-5">
<div class="d-flex"> <span class="far fa-file-alt px-3 py-1"></span>
<div class="d-flex flex-column">
<p class="fw-bold">Docs</p>
<p class="text-muted">Build docus, wiki's & knowledge bases.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pb-5">
<div class="d-flex"> <span class="fas fa-trophy px-3 py-1"></span>
<div class="d-flex flex-column">
<p class="fw-bold">Goals</p>
<p class="text-muted">Monitor and manage your strategy</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pb-5">
<div class="d-flex"> <span class="fas fa-cogs px-3 py-1"></span>
<div class="d-flex flex-column">
<p class="fw-bold">integrations</p>
<p class="text-muted">Connect the platforms you use into one place</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pb-5">
<div class="d-flex"> <span class="fab fa-app-store px-3 py-1"></span>
<div class="d-flex flex-column">
<p class="fw-bold">Apps</p>
<p class="text-muted">Download Click onto any device.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pb-5">
<div class="d-flex"> <span class="fas fa-download px-3 py-1"></span>
<div class="d-flex flex-column">
<p class="fw-bold">Import</p>
<p class="text-muted">Bring any existing projects into ClickUp.</p>
</div>
</div>
</div>
<div class="px-4 mb-3">
<div class="btn btn-primary fw-bold"> SEE ALL FEATURES <span class="fas fa-angle-double-right ps-1"></span> </div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 p-0">
<div class="card2 px-4">
<div class="d-flex justify-content-between align-items-center mb-2">
<p class="fw-bold">Use Cases</p> <span class="btn btn-secondary fw-600 ">SEE MORE <span class="fas fa-angle-double-right ps-1"></span></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Development</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Marketing</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Project Management</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Enterprise</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Remote work</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Sales</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Desgin</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Human Resources</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Finance</span> </div>
</div>
</div>
<div class="col-md-6">
<div class="card shadow-sm">
<div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Business Operations</span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
<script>
document.addEventListener("DOMContentLoaded", function () {
var circle = document.querySelectorAll(".circle")
var color = ["#5E35B1", "#E91E63", "#651FFF", "#EEFF41", "#1DE9B6", "#00897B", "#0091EA", "#E53935", "#E53935", "#00C853"]
for (var i = 0; i < circle.length; i++) { circle[i].style.background=color[i]; } })
</script>
</body>
</html>
.contain {
margin: 20px 25px;
padding: 20px
}
.col-lg-7 .card1 {
overflow: hidden;
border-radius: 0%;
border: 1px solid #ddd;
padding: 10px;
background-color: white
}
.col-lg-5 .card2 {
border: 1px solid #ddd;
background-color: #e8e3fc;
padding: 10px
}
p {
margin: 0
}
.fw-bold {
font-size: 14px
}
.text-muted {
font-size: 12px
}
.fas.fa-tasks {
color: blueviolet
}
.far.fa-file-alt {
color: #4949db
}
.fas.fa-trophy {
color: #fafa00
}
.fas.fa-cogs {
color: palevioletred
}
.fab.fa-app-store {
color: green
}
.fas.fa-download {
color: #5050f0
}
.fas.fa-angle-double-right {
color: #a56de6;
font-size: 12px
}
.card {
background-color: white;
padding: 8px;
margin-bottom: 8.5px
}
.card .fs {
font-size: 12px
}
.card .circle {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block
}
.card:hover {
background-color: #f2f2f2
}
.btn.btn-primary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #8d5ecc;
background-color: #efecf3;
border: none;
outline: none;
box-shadow: none
}
.btn.btn-primary:hover .fas.fa-angle-double-right {
transform: translateX(10px);
transition: transform 0.5s ease
}
.btn.btn-secondary {
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #8b5ec5;
background-color: transparent;
border: none;
outline: none;
box-shadow: none
}
.btn.btn-secondary:hover .fas.fa-angle-double-right {
transform: translateX(10px);
transition: transform 0.5s ease
}
.fw-600 {
font-weight: 600
}
//Doesn't require any JS.
This Bootstrap 5 snippet provides a visually appealing and informative features catalog with use cases. It's a versatile tool for showcasing the capabilities of your product or service, highlighting its benefits and applications across different industries. The catalog is designed to be responsive and customizable, ensuring a seamless user experience across various devices.
Key Features:
- Categorized Features: Organize your features into logical categories, making it easier for users to navigate and find relevant information.
- Clear and Concise Descriptions: Provide concise and informative descriptions for each feature, highlighting its benefits and use cases.
- Visual Representation: Use icons or images to visually represent each feature, enhancing understanding and engagement.
- Use Case Examples: Showcase real-world examples of how your features can be applied in different industries or scenarios.
- Customizable Styling: Easily modify the appearance of the features catalog using Bootstrap's CSS classes to match your website's design and branding.
Implementation:
- Include Bootstrap 5: Ensure you have Bootstrap 5 installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the features catalog, including the container, categories, feature cards, and use case examples.
- Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the catalog, feature cards, and other elements, such as card, card-header, card-body, list-group, and list-group-item.
- Customize as Needed: Modify the Bootstrap classes and HTML structure to customize the appearance and content of the features catalog according to your specific requirements.
Stylish Contact Form with Image in Tailwind CSS
Responsive Registration Form with Image in Tailwind CSS
Bootstrap 5 Payment Method Form Page with Invoice
Modern Pricing Table Design with Bootstrap 4
Responsive Multi-Level Drop-Down Navigation Menu in CSS
Interactive Bottom Navigation Bar Indicator with CSS
Real-time Password Strength Indicator in Bootstrap 5
Responsive Video Card Component for Tailwind CSS
Responsive Feature Highlight Component with Tailwind CSS
Multi-Step Form with International Phone Input and Nice Select
Responsive Review Cards Component with CSS3
Responsive CSS3 Timeline Design With Hover Effects
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
