Bootstrap Cards:

Bootstrap 5 Card Neumorphism Style

Pictures are the inseparable factors in all websites. The websites with images are more attractive and people like to visit these kinds of pages. So, we recommend you add photos and texts to your website to gain more visitors. The Bootstrap 5 Card Neumorphism Style is presented in this post with a beautiful theme. The way of adding photos and texts is also important. This Bootstrap Card Code lets you add images to your page beautifully. By using this code, you can also add text to your website regularly. This HTML Card Code makes your page more organized.

As you see from the following preview, this code is so colorful and each field has a specific color. You can use this Colorful Bootstrap Card on your website in different colors. There is a button at the top of the page that shows three little lines in white color. After clicking on this section, you can see different options like home, link, and other factors. There is also a search box with a white background. There are several cards in this bootstrap with different colors. This Bootstrap Card with Shadow is available in this post and you can use it for your website.

Bootstrap Card Code

Colorful Bootstrap Card

HTML Card Code

Bootstrap Card with Shadow

<!-- This script got from frontendfreecode.com -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" aria-label="navigation">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExample05">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                    <ul class="dropdown-menu" aria-labelledby="dropdown05">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
            <form>
                <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </form>
        </div>
    </div>
</nav>
<main class="container">
    <section id="cards" class="rdneumorphism section py-5">
        <div class="container">
            <div class="row row-cols-1 g-5 py-5">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div class="starter-template text-center py-5 px-3">
                                <h1>Bootstrap 5 Neumorphism Card</h1>
                                <p class="lead">Implementation for Neumorphism style in Bootstrap 5 Card</p>
                                <p>Bootstrap 5.1.3</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-5 py-5">
                <div class="col">
                    <div class="card bg-primary h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Primary</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nobis nulla, ad adipisci architecto reprehenderit quam culpa soluta enim mollitia saepe praesentium alias expedita minus porro neque aut a repellendus!</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-secondary h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Secondary</h4>
                            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim, tempora fugit itaque eveniet eum commodi voluptatum quae. Non dolorum expedita est temporibus provident omnis nisi magni recusandae officiis obcaecati? Quis?</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-success h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Success</h4>
                            <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum error odio incidunt ullam iure tempore iste. Perspiciatis, tempore ut! Ex, facere inventore ad minus sequi itaque sit! Impedit, ad consequatur!</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-info h-100">
                        <div class="card-body">
                            <h4 class="card-title">
                                Card Info
                            </h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quaerat facere asperiores ut. Ipsam quos eligendi aliquid! Consequuntur assumenda facilis consectetur, quas hic laboriosam ea reprehenderit mollitia, porro id qui.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-warning h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Warning</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus eaque omnis sint natus laborum aperiam dolorem earum iste hic quos perferendis quam, dicta doloremque cupiditate molestias odit amet id laboriosam.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-danger h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Danger</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, similique a itaque ut, quis minima sequi veritatis atque voluptas asperiores amet deleniti! Repellendus provident, quis fuga harum temporibus natus? Est.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-light h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Light</h4>
                            <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere animi explicabo laudantium, placeat a odio autem delectus tempora quisquam, magnam iusto corrupti! Provident numquam error consequatur quidem iure! Sed, molestiae.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-dark h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Dark</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi molestiae at voluptas facilis soluta. Consequuntur dolorum vero iure ex minima id aspernatur incidunt ab pariatur praesentium, molestias culpa temporibus nihil?</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main><!-- /.container --><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
.rdneumorphism .card {
	border-radius: 15px;
	background: linear-gradient(145deg, #c1c1c1, white);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #bababa, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #dfdfdf;
}
.rdneumorphism .card.bg-primary {
	background: #a5c9fe;
	border-radius: 15px;
	background: linear-gradient(145deg, #e1edff, #68a5fe);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #599bfe, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #a3c8fe;
}
.rdneumorphism .card.bg-primary .card-title {
	color: #408cfd;
}
.rdneumorphism .card.bg-secondary {
	background: #bcc1c6;
	border-radius: 15px;
	background: linear-gradient(145deg, #dde0e2, #9ca3a9);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #939ba2, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #bcc1c5;
}
.rdneumorphism .card.bg-secondary .card-title {
	color: #868e96;
}
.rdneumorphism .card.bg-success {
	background: #59e0a1;
	border-radius: 15px;
	background: linear-gradient(145deg, #8ceabe, #27d484);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #25c87c, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #57e0a1;
}
.rdneumorphism .card.bg-success .card-title {
	color: #21b26f;
}
.rdneumorphism .card.bg-info {
	background: #9ceafa;
	border-radius: 15px;
	background: linear-gradient(145deg, #d6f6fd, #62def7);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #54dbf6, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #9beafa;
}
.rdneumorphism .card.bg-info .card-title {
	color: #3cd5f4;
}
.rdneumorphism .card.bg-warning {
	background: #ffe7a0;
	border-radius: 15px;
	background: linear-gradient(145deg, #fff7dd, #ffd863);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #ffd454, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #ffe79e;
}
.rdneumorphism .card.bg-warning .card-title {
	color: #ffce3a;
}
.rdneumorphism .card.bg-danger {
	background: #f3b7bd;
	border-radius: 15px;
	background: linear-gradient(145deg, #fceced, #ea838d);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #e77681, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #f2b6bc;
}
.rdneumorphism .card.bg-danger .card-title {
	color: #e4606d;
}
.rdneumorphism .card.bg-light {
	background: white;
	border-radius: 15px;
	background: linear-gradient(145deg, white, #dbe0e6);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #d2d9df, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #fefefe;
}
.rdneumorphism .card.bg-light .card-title {
	color: white;
}
.rdneumorphism .card.bg-dark {
	background: #65727e;
	border-radius: 15px;
	background: linear-gradient(145deg, #84909c, #4a535c);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #434b53, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #65717d;
}
.rdneumorphism .card.bg-dark .card-title {
	color: #383f45;
}
html {
	font-size: 15px;
}
body {
	background: #e0e0e0;
	color: #444;
	font-family: "Open Sans", sans-serif;
	padding-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
	color: #fafafa;
	font-weight: 600;
	text-transform: uppercase;
	text-shadow: -1px -1px 3px rgba(128, 128, 128, 0.5), 2px 2px 4px rgba(255, 255, 255, 0.3);
}
h1 {
	font-size: 2rem;
}
h2 {
	font-size: 1.75rem;
}
h3 {
	font-size: 1.5rem;
}
h4 {
	font-size: 1.25rem;
}
h5 {
	font-size: 1.125rem;
}
h6 {
	font-size: 1rem;
}
main {
	min-height: 200vh;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
.rdneumorphism .card {
	border-radius: 15px;
	background: linear-gradient(145deg, #c1c1c1, white);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #bababa, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #dfdfdf;
}
.rdneumorphism .card.bg-primary {
	background: #a5c9fe;
	border-radius: 15px;
	background: linear-gradient(145deg, #e1edff, #68a5fe);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #599bfe, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #a3c8fe;
}
.rdneumorphism .card.bg-primary .card-title {
	color: #408cfd;
}
.rdneumorphism .card.bg-secondary {
	background: #bcc1c6;
	border-radius: 15px;
	background: linear-gradient(145deg, #dde0e2, #9ca3a9);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #939ba2, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #bcc1c5;
}
.rdneumorphism .card.bg-secondary .card-title {
	color: #868e96;
}
.rdneumorphism .card.bg-success {
	background: #59e0a1;
	border-radius: 15px;
	background: linear-gradient(145deg, #8ceabe, #27d484);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #25c87c, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #57e0a1;
}
.rdneumorphism .card.bg-success .card-title {
	color: #21b26f;
}
.rdneumorphism .card.bg-info {
	background: #9ceafa;
	border-radius: 15px;
	background: linear-gradient(145deg, #d6f6fd, #62def7);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #54dbf6, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #9beafa;
}
.rdneumorphism .card.bg-info .card-title {
	color: #3cd5f4;
}
.rdneumorphism .card.bg-warning {
	background: #ffe7a0;
	border-radius: 15px;
	background: linear-gradient(145deg, #fff7dd, #ffd863);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #ffd454, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #ffe79e;
}
.rdneumorphism .card.bg-warning .card-title {
	color: #ffce3a;
}
.rdneumorphism .card.bg-danger {
	background: #f3b7bd;
	border-radius: 15px;
	background: linear-gradient(145deg, #fceced, #ea838d);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #e77681, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #f2b6bc;
}
.rdneumorphism .card.bg-danger .card-title {
	color: #e4606d;
}
.rdneumorphism .card.bg-light {
	background: white;
	border-radius: 15px;
	background: linear-gradient(145deg, white, #dbe0e6);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #d2d9df, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #fefefe;
}
.rdneumorphism .card.bg-light .card-title {
	color: white;
}
.rdneumorphism .card.bg-dark {
	background: #65727e;
	border-radius: 15px;
	background: linear-gradient(145deg, #84909c, #4a535c);
	border: none;
	box-shadow: -4px -4px 6px rgba(255, 255, 255, 0.5), 4px 4px 6px #434b53, inset -4px -4px 12px rgba(255, 255, 255, 0.1), inset 4px 4px 12px #65717d;
}
.rdneumorphism .card.bg-dark .card-title {
	color: #383f45;
}
html {
	font-size: 15px;
}
body {
	background: #e0e0e0;
	color: #444;
	font-family: "Open Sans", sans-serif;
	padding-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
	color: #fafafa;
	font-weight: 600;
	text-transform: uppercase;
	text-shadow: -1px -1px 3px rgba(128, 128, 128, 0.5), 2px 2px 4px rgba(255, 255, 255, 0.3);
}
h1 {
	font-size: 2rem;
}
h2 {
	font-size: 1.75rem;
}
h3 {
	font-size: 1.5rem;
}
h4 {
	font-size: 1.25rem;
}
h5 {
	font-size: 1.125rem;
}
h6 {
	font-size: 1rem;
}
main {
	min-height: 200vh;
}
</style>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" aria-label="navigation">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExample05">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                    <ul class="dropdown-menu" aria-labelledby="dropdown05">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
            <form>
                <input class="form-control" type="text" placeholder="Search" aria-label="Search">
            </form>
        </div>
    </div>
</nav>
<main class="container">
    <section id="cards" class="rdneumorphism section py-5">
        <div class="container">
            <div class="row row-cols-1 g-5 py-5">
                <div class="col">
                    <div class="card">
                        <div class="card-body">
                            <div class="starter-template text-center py-5 px-3">
                                <h1>Bootstrap 5 Neumorphism Card</h1>
                                <p class="lead">Implementation for Neumorphism style in Bootstrap 5 Card</p>
                                <p>Bootstrap 5.1.3</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-5 py-5">
                <div class="col">
                    <div class="card bg-primary h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Primary</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus nobis nulla, ad adipisci architecto reprehenderit quam culpa soluta enim mollitia saepe praesentium alias expedita minus porro neque aut a repellendus!</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-secondary h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Secondary</h4>
                            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim, tempora fugit itaque eveniet eum commodi voluptatum quae. Non dolorum expedita est temporibus provident omnis nisi magni recusandae officiis obcaecati? Quis?</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-success h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Success</h4>
                            <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum error odio incidunt ullam iure tempore iste. Perspiciatis, tempore ut! Ex, facere inventore ad minus sequi itaque sit! Impedit, ad consequatur!</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-info h-100">
                        <div class="card-body">
                            <h4 class="card-title">
                                Card Info
                            </h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quaerat facere asperiores ut. Ipsam quos eligendi aliquid! Consequuntur assumenda facilis consectetur, quas hic laboriosam ea reprehenderit mollitia, porro id qui.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-warning h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Warning</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus eaque omnis sint natus laborum aperiam dolorem earum iste hic quos perferendis quam, dicta doloremque cupiditate molestias odit amet id laboriosam.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-danger h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Danger</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, similique a itaque ut, quis minima sequi veritatis atque voluptas asperiores amet deleniti! Repellendus provident, quis fuga harum temporibus natus? Est.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-light h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Light</h4>
                            <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere animi explicabo laudantium, placeat a odio autem delectus tempora quisquam, magnam iusto corrupti! Provident numquam error consequatur quidem iure! Sed, molestiae.</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card bg-dark h-100">
                        <div class="card-body">
                            <h4 class="card-title">Card Dark</h4>
                            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi molestiae at voluptas facilis soluta. Consequuntur dolorum vero iure ex minima id aspernatur incidunt ab pariatur praesentium, molestias culpa temporibus nihil?</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main><!-- /.container --><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS