Anonymous

Profile Dashboard Component - Copy this Html, Bootstrap Component to your project

<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Profile-Page</title>--<link-href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"-rel="stylesheet"-integrity="sha384-2CnUliAI6kZc5YkGTHQC2MPKyjZpYb5AaHyrF2K3RTZQUuDxWlTxV4XhcaJJAfgA"-crossorigin="anonymous">-<link-rel="stylesheet"-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">-<link-rel="stylesheet"-href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">-<link-rel="stylesheet"-href="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.css">-<link-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"-rel="stylesheet">-<link-rel="preload"-as="image"-fetchpriority="high"-href="https://static.vecteezy.com/system/resources/previews/045/595/627/non_2x/welcome-sign-letters-with-confetti-background-celebration-greeting-holiday-illustration-photo.jpg"-imagesrcset="https://static.vecteezy.com/system/resources/previews/045/595/627/non_2x/welcome-sign-letters-with-confetti-background-celebration-greeting-holiday-illustration-photo.jpg-1469w,-https://static.vecteezy.com/system/resources/previews/045/595/627/large_2x/welcome-sign-letters-with-confetti-background-celebration-greeting-holiday-illustration-photo.jpg-2939w"-imagesizes="(max-width:-600px)-100vw,-(max-width:-1100px)-calc(100vw---60px),-(max-width:-1480px)-calc(100vw---420px),-(max-width:-1745px)-calc(100vw---500px),-calc(100vw---620px)">-<style>-.card-stats-{-min-height:-150px;-margin-bottom:-1rem;-}-.card-stats-.card-body-{-padding:-1rem;-}-.card-stats-.card-title-{-font-size:-1.25rem;-margin-bottom:-0.5rem;-}-.card-stats-.card-text-{-font-size:-2rem;-font-weight:-bold;-}-.card-stats-.card-footer-{-padding:-0.5rem-1rem;-background-color:-#f8f9fa;-}-.editable-link-{-color:-lightgoldenrodyellow;-font-family:-'Arial',-sans-serif;-font-weight:-bold;-text-shadow:-2px-2px-4px-#000000;-}-</style>-</head>-<body>-<main>--<section-class="bg-shape-bg-dark">-<div-class="container">-<div-class="row">-<div-class="col-12">-<div-class="pt-lg-8-pb-lg-12-pt-5-pb-0-mb-16">-<h1-class="h2-text-white-mb-0">Profile</h1>-</div>-</div>-</div>-</div>-</section>---<section-class="pb-12-mt-lg-n18-mt-n10">-<div-class="container">-<div-class="row">-<div-class="col-lg-3-col-md-4-col-12">--<nav-class="navbar-navbar-expand-md-navbar-light-dashboard-nav-mb-3-mb-lg-0">-<a-class="d-xl-none-d-lg-none-d-md-none-text-inherit-fw-bold"-href="#">Menu</a>-<button-class="navbar-toggler-d-md-none-icon-shape-icon-sm-rounded-bg-primary-text-light"-type="button"-data-bs-toggle="collapse"-data-bs-target="#navbarNavDropdown"-aria-controls="navbarNavDropdown"-aria-expanded="false"-aria-label="Toggle-navigation"->-<span-class="fas-fa-bars"></span>-</button>-<div-class="collapse-navbar-collapse"-id="navbarNavDropdown">-<div-class="navbar-nav-flex-column-w-100">-<div-class="border-bottom-py-4-p-md-4-d-flex-justify-content-between-text-reset">-<div-class="d-flex-align-items-center">-<img-src="<?php-echo-base_url();?>assets/portal/images/user.png"-class="rounded-circle-avatar-lg"-/>-<div-class="ms-3-lh-1">-<h5-class="mb-1">-<?php-echo-$fan_details[0]->fan_fname;-?>-</h5>-</div>-</div>-</div>-<div-class="py-4-p-md-4">-<span-class="heading">Account</span>-<ul-class="list-unstyled-mb-4-mt-2">-<li-class="nav-item">-<a-href="<?php-echo-base_url();?>Fan/Profile"-class="nav-link">Profile</a>-</li>-<li-class="nav-item">-<a-class="nav-link"-href="<?php-echo-base_url();?>Fan/MyProfile">My-Profile</a>-</li>-<li-class="nav-item">-<a-class="nav-link"-href="<?php-echo-base_url();?>Fan/Orders">Orders</a>-</li>-<li-class="nav-item">-<a-class="nav-link"-href="<?php-echo-base_url();?>Fan/BrandEnquires">Brand-Enquires</a>-</li>-<li-class="nav-item">-<a-class="nav-link"-href="<?php-echo-base_url();?>Fan/Endorsement">Endorsement</a>-</li>-</ul>-<span-class="heading-border-top-pt-4-d-block">Billing</span>-<ul-class="list-unstyled-mb-0">-<li-class="nav-item">-<a-class="nav-link"-href="<?php-echo-base_url();?>Fan/PaymentHistory">Payment-History</a>-</li>-</ul>-<hr>-<a-href="<?php-echo-base_url();?>Auth/changepassword"-class="btn-btn-outline-primary-btn-sm"><i-class="bi-bi-door-open-fill"></i>-Change-Password</a>-<hr>-<a-href="<?php-echo-base_url();?>Auth/Logout"-class="btn-btn-outline-primary-btn-sm"><i-class="bi-bi-door-open-fill"></i>-Logout</a>-</div>-</div>-</div>-</nav>-</div>-<div-class="col-lg-9-col-md-8-col-12">-<div-class="card-rounded-3-mb-4">--<div-class="card-header-text-center-p-5"-style="background-image:-url('https://static.vecteezy.com/system/resources/previews/048/106/479/non_2x/words-welcome-written-on-wooden-cubes-blocks-on-table-with-bokeh-light-background-and-copy-space-business-welcome-and-support-concept-free-photo.jpg');-background-size:-cover;">-<div-class="mb-3">--<h2-class="mb-0-editable-link">-Welcome-<?php-echo-$fan_details[0]->fan_fname;-?>-<a-href="<?php-echo-base_url();?>Fan/EditProfile"-class="text-lightgoldenrodyellow">-<i-class="fas-fa-edit"></i>-</a>-</h2>-</div>-</div>--<div-class="card-body">-<div-class="row">--<div-class="col-md-6-col-lg-4-mb-3">-<div-class="card-text-center-bg-light-shadow-card-stats">-<div-class="card-body">-<h5-class="card-title">Orders</h5>-<p-class="card-text"><?php-echo-$order_count;-?></p>-</div>-<div-class="card-footer">-<a-href="<?=-base_url('Fan/Orders')-?>"-class="btn-btn-primary-btn-sm">View-Orders</a>-</div>-</div>-</div>---</div>-</div>-</div>-</div>-</div>-</div>-</section>--</main>--<script-src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"-integrity="sha384-w76A6eEB7lL6pUm4Mw+4LUVzPHI74IyXgIxVJLALb/xjoBsnAwWv0Ibxk3i0iJe4"-crossorigin="anonymous"></script>-<script-src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-<script-src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>-<script-src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>-<script-src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>-</body>-</html>had-bootstrap-for-this

Prompt

About

Profile Dashboard Component - A user-friendly interface showcasing orders, profile editing, and account management, built with HTML and B. Copy code today!

Profile Dashboard Component - Copy this Html, Bootstrap Component to your project

About

Tags

Share