<!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.
Bootstrap 5 Full Height Swiper Slider with Smooth Transitions
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
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
