Social Media Web application
MANICKA VASAN
![MANICKA VASAN]()
MANICKA VASAN
Serving Notice - LWD: May 17 | 5+ Years of Experience, 4+ years in RPA development with UiPath, SQL, .NET, Python, AA360, and Power Automate. Good experience in building custom ML solutions in DU, OCR & Predictions.
Source Code:
Using Bootstrap 5.0 - Sample social media webapplication Front end design .
Copy and paste the code.
<!DOCTYPE html
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="theme-color" content="#0d6efd;">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>(Username) - Home</title>
? ? <link rel="stylesheet" >
? ? <link rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
? ? <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
? ? <style>
? ? ? body{
? ? ? ? overflow-y: scroll;
? ? ? ? background-color: rgba(245, 222, 179, 0.699);
? ? ? }
? ? ? ? /* width */
::-webkit-scrollbar {
? width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
? background:transparent;?
}
?
/* Handle */
::-webkit-scrollbar-thumb {
? background:transparent
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
? background :transparent;?
}
? ? </style>
? </head>
<body>
? ? ?
? <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
? ? <div class="container-fluid">
? ? ? ??
? ? ? <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
? ? ? ? <span class="navbar-toggler-icon"></span>
? ? ? </button>
? ? ? <div class="collapse navbar-collapse" id="navbarSupportedContent">
? ? ? ? <ul class="navbar-nav me-auto mb-2 mb-lg-0">
? ? ? ? ? <li class="nav-item dropdown">
? ? ? ? ? ? <a class="nav-link dropdown-toggle active" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
? ? ? ? ? ? ? <img src="i.jfif" style="width: 30px;height: 30px;border-radius: 50%;">
? ? ? ? ? ? </a>
? ? ? ? ? ? <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
? ? ? ? ? ? ? <li><a class="dropdown-item" href="#">Profile</a></li>
? ? ? ? ? ? ? <li><a class="dropdown-item" href="#">Activity</a></li>
? ? ? ? ? ? ? <li><hr class="dropdown-divider"></li>
? ? ? ? ? ? ? <li><a class="dropdown-item text-danger" href="#">Sign out</a></li>
? ? ? ? ? ? ? <li><a class="dropdown-item text-danger" href="#">Delete account</a></li>
? ? ? ? ? ? </ul>
? ? ? ? ? </li>
? ? ? ??
? ? ? ? ? <li class="nav-item">
? ? ? ? ? ? <a class="nav-link active"? href="#">
? ? ? ? ? ? ? <button type="button" class="btn btn-primary position-relative">
? ? ? ? ? ? ? ? <i class="fa fa-line-chart"></i> Trending
? ? ? ? ? ? ? ? <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
? ? ? ? ? ? ? ? ? <span class="visually-hidden">New alerts</span>
? ? ? ? ? ? ? ? </span>
? ? ? ? ? ? ? </button>
? ? ? ? ? ? ? </a>
? ? ? ? ? </li>
? ? ? ? ? <li class="nav-item">
? ? ? ? ? ? <a class="nav-link" href="#">
? ? ? ? ? ? ? <button type="button" class="btn btn-primary position-relative">
? ? ? ? ? ? ? ? <i class="fa fa-envelope"></i> Mailbox
? ? ? ? ? ? ? ? <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
? ? ? ? ? ? ? ? ? 45+
? ? ? ? ? ? ? ? ? <span class="visually-hidden">unread messages</span>
? ? ? ? ? ? ? ? </span>
? ? ? ? ? ? ? </button>? ? ? ? ? ? ??
? ? ? ? ? ? </a>
? ? ? ? ? </li>
? ? ? ? ? <li class="nav-item dropdown">
? ? ? ? ? ? <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
? ? ? ? ? ? ? <button type="button" class="btn btn-primary position-relative">
? ? ? ? ? ? ? <i class="fa fa-filter"></i> Filter
? ? ? ? ? ? ? </button>
? ? ? ? ? ? </a>
? ? ? ? ? ? <div class="dropdown-menu dropdown-menu-light border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
? ? ? ? ? ? ? <form class="p-2 mb-2 bg-light border-bottom border-dark">
? ? ? ? ? ? ? ? <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
? ? ? ? ? ? ? </form>
? ? ? ? ? ? ? <ul class="list-unstyled mb-0">
? ? ? ? ? ? ? ? <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
? ? ? ? ? ? ? ? ? <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
? ? ? ? ? ? ? ? ? Action
? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
? ? ? ? ? ? ? ? ? <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
? ? ? ? ? ? ? ? ? Another action
? ? ? ? ? ? ? ? </a></li>
? ? ? ? ? ? ? ? <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
? ? ? ? ? ? ? ? ? <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
? ? ? ? ? ? ? ? ? Something else here
? ? ? ? ? ? ? ? </a></li>
? ? ? ? ? ? ? ? <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
? ? ? ? ? ? ? ? ? <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
? ? ? ? ? ? ? ? ? Separated link
? ? ? ? ? ? ? ? </a></li>
? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? ??
? ? ? ? ? </li>
? ? ? ? ??
? ? ? ? ??
? ? ? ? </ul>
? ? ? ? <form class="d-flex">
? ? ? ? ? <input class="form-control me-2" type="search" placeholder="Find Modals" aria-label="Search">
? ? ? ? </form>
? ? ? ? <a class="navbar-brand" href="#">Glamour Hunt</a>
? ? ? </div>
? ? </div>
? </nav>
? ??
<!------------------------------------------------>
<div class="container" style="margin-top: 100px;">
? ??
? ?<div class="row">
? ? ?<div class="col-md-3">
? ? ? ?<div class="card shadow">
? ? ? ? <img src="2.jpg" class="card-img-top" alt="...">
? ? ? ? <img src="i.jfif" class="rounded-circle m-3" style="width: 80px;height: 80px;position: absolute;top: 55px; padding: auto;">
? ? ? ? ? <div class="card-body mt-1">
? ? ? ? ? ? <div class="p-2">
? ? ? ? ? ? ? <h5 class="mt-3 text-end mb-3">Manickavasan K</h5>
? ? ? ? ? ? ? <hr>
? ? ? ? ? ? ? <div class="my-4 text-center">
? ? ? ? ? ? ? ? <span class="display-4">34 </span><span class="fw-bold text-primary">Million</span>
? ? ? ? ? ? ? ? <p>Your Profile Views</p>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <div class="my-2 d-flex justify-content-between">
? ? ? ? ? ? ? ? <h6>Likes: 46</h6>
? ? ? ? ? ? ? ? <h6>Followers: 67</h6>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <hr>
? ? ? ? ? ? ? <div class="text-center p-2">
? ? ? ? ? ? ? <button type="submit" class="btn btn-info me-2" style="box-shadow: none;"><i class="fa fa-twitter"></i></button>
? ? ? ? ? ? ? <button type="submit" class="btn btn-primary me-2" style="box-shadow: none;"><i class="fa fa-facebook"></i></button>
? ? ? ? ? ? ? <button type="submit" class="btn btn-danger me-2" style="box-shadow: none;"><i class="fa fa-instagram"></i></button>
? ? ? ? ? ? ? </div>
? ? ? ??
? ? ? ? ? ? </div>
? ? ? ? ? ? <small class="p-1 text-muted">Coimbatore,IN</small>
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ?<p class="text-center p-2 text-muted" style="font-size: 10px;">Help Center - About - Community Guidelines - Privacy Policy - User Agreement
? ? ? ? - Copyright Policy?
? ? ? </p>
? ? ? <p class="text-center">GlamerHunt Corporation ? 2021</p>
? ? ?</div>
? ? ?<div class="col-md-6" >
? ? ? ?<div style="overflow-y: auto;overflow-x: hidden;height: 600px;">
? ? ? <div class="card shadow" style="background-image: url('i.jfif');background-size: cover;background-repeat: no-repeat;">
? ? ? ? <div class="card-header">
? ? ? ? ? <div class="d-flex justify-content-between">
? ? ? ? ? ? <h5 class="text-light my-1">Manickavasan K</h5>
? ? ? ? ? ? <button type="submit" class="btn btn-outline-light"
? ? ? ? ? ? data-bs-toggle="tooltip" data-bs-placement="top" title="Follow this Profile"
? ? ? ? ? ? >Follow <i class="fa fa-plus"></i></button>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="card-body" style="height: 400px;">
? ? ? ? ??
? ? ? ? ? ??
? ? ? ? </div>
? ? ? ? <div class="card-footer">
? ? ? ? ? <div class="d-flex justify-content-between">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? <button type="submit" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Likes"><i class="fa fa-heart"></i></button>
? ? ? ? ? ? ? <button type="submit" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Comments"><i class="fa fa-comment"></i></button>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? <button type="submit" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy Image link"><i class="fa fa-clone"></i></button>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? ? ?
? ? ? ? </div>
? ? ? </div>? ? ? ?
? ? ??
? ? ? <div class="card shadow mt-5" >
? ? ? ? <div class="card-header">
? ? ? ? ? <div class="d-flex justify-content-between">
? ? ? ? ? ? <h5 class="text-dark my-1">Manickavasan K</h5>
? ? ? ? ? ? <button type="submit" class="btn btn-outline-dark" disabled
? ? ? ? ? ? data-bs-toggle="tooltip" data-bs-placement="top" title="You already Followed"
? ? ? ? ? ? >Followed</button>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="card-body" style="height: 400px;">
? ? ? ? ? <iframe width="510" height="360" src="https://www.youtube.com/embed/sQEgklEwhSo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
? ? ? ? </div>
? ? ? ? <div class="card-footer">
? ? ? ? ? <div class="d-flex justify-content-between">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? <button type="submit" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Like"><i class="fa fa-heart"></i></button>
? ? ? ? ? ? ? <button type="submit" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Comments"><i class="fa fa-comment"></i></button>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? <button type="submit" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy Image link"><i class="fa fa-clone"></i></button>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? ? ?
? ? ? ? </div>
? ? ? </div>?
? ? ?</div>
? ? </div>
? ? <div class="col-md-3 ">
? ? ? <div class="card shadow">
? ? ? ? <div class="card-body">
? ? ? ? ? <div class="fw-bold">Recent Events<hr></div>
? ? ? ? ? <div class="h-25">
? ? ? ? ? ? <ul class="list-group list-group-flush">
? ? ? ? ? ? ? <li class="list-group-item d-flex justify-content-between align-items-start">
? ? ? ? ? ? ? ? <div class="ms-2 me-auto">
? ? ? ? ? ? ? ? ? <div class="fw-bold">Subheading</div>
? ? ? ? ? ? ? ? ? <small class="text-muted">12 hours ago</small>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <img src="i.jfif" class="rounded" style="width: 40px;height: 40px;">
? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? <li class="list-group-item d-flex justify-content-between align-items-start">
? ? ? ? ? ? ? ? <div class="ms-2 me-auto">
? ? ? ? ? ? ? ? ? <div class="fw-bold">Subheading</div>
? ? ? ? ? ? ? ? ? <small class="text-muted">12 hours ago</small>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <img src="i.jfif" class="rounded" style="width: 40px;height: 40px;">
? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? <li class="list-group-item d-flex justify-content-between align-items-start">
? ? ? ? ? ? ? ? <div class="ms-2 me-auto">
? ? ? ? ? ? ? ? ? <div class="fw-bold">Subheading</div>
? ? ? ? ? ? ? ? ? <small class="text-muted">12 hours ago</small>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <img src="i.jfif" class="rounded" style="width: 40px;height: 40px;">
? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? <li class="list-group-item d-flex justify-content-between align-items-start">
? ? ? ? ? ? ? ? <div class="ms-2 me-auto">
? ? ? ? ? ? ? ? ? <div class="fw-bold">Subheading</div>
? ? ? ? ? ? ? ? ? <small class="text-muted">12 hours ago</small>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <img src="i.jfif" class="rounded" style="width: 40px;height: 40px;">
? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
? ? ? ? ? </div>
? ? ? ? ? ??
? ? ? ? </div>
? ? ? </div>? ? ? ?
? ? </div>
? ?</div>
</div>
?<!---------------Footer----------------->?
?<footer class="bd-footer py-5 mt-5 bg-light">
? <div class="container py-5">
? ? <div class="row">
? ? ? <div class="col-lg-3 mb-3">
? ? ? ? <a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
? ? ? ? ? <span class="fs-5">Glamour Hunt .Corp</span>
? ? ? ? </a>
? ? ? ? <ul class="list-unstyled small text-muted">
? ? ? ? ? <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.1/about/team/">Glamour team</a> with the help of <a >our contributors</a>.</li>
? ? ? ? ? <li class="mb-2">Code licensed <a target="_blank" rel="license noopener">MIT</a>, docs <a target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
? ? ? ? ? <li class="mb-2">Currently v5.1.3.</li>
? ? ? ? </ul>
? ? ? </div>
? ? ? <div class="col-6 col-lg-2 offset-lg-1 mb-3">
? ? ? ? <h5>Links</h5>
? ? ? ? <ul class="list-unstyled">
? ? ? ? ? <li class="mb-2"><a href="/" class="text-primary text-decoration-none">Home</a></li>
? ? ? ? ? <li class="mb-2"><a href="/docs/5.1/" class="text-primary text-decoration-none">Docs</a></li>
? ? ? ? ? <li class="mb-2"><a href="/docs/5.1/examples/" class="text-primary text-decoration-none">Examples</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Themes</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Blog</a></li>
? ? ? ? </ul>
? ? ? </div>
? ? ? <div class="col-6 col-lg-2 mb-3">
? ? ? ? <h5>Guides</h5>
? ? ? ? <ul class="list-unstyled">
? ? ? ? ? <li class="mb-2"><a href="/docs/5.1/getting-started/" class="text-primary text-decoration-none">Getting started</a></li>
? ? ? ? ? <li class="mb-2"><a href="/docs/5.1/examples/starter-template/" class="text-primary text-decoration-none">Starter template</a></li>
? ? ? ? ? <li class="mb-2"><a href="/docs/5.1/getting-started/webpack/" class="text-primary text-decoration-none">Webpack</a></li>
? ? ? ? ? <li class="mb-2"><a href="/docs/5.1/getting-started/parcel/" class="text-primary text-decoration-none">Parcel</a></li>
? ? ? ? </ul>
? ? ? </div>
? ? ? <div class="col-6 col-lg-2 mb-3">
? ? ? ? <h5>Projects</h5>
? ? ? ? <ul class="list-unstyled">
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Album</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Designs</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Icons</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">RFS</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">npm starter</a></li>
? ? ? ? </ul>
? ? ? </div>
? ? ? <div class="col-6 col-lg-2 mb-3">
? ? ? ? <h5>Community</h5>
? ? ? ? <ul class="list-unstyled">
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Issues</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Discussions</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Corporate sponsors</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Open Collective</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Slack</a></li>
? ? ? ? ? <li class="mb-2"><a class="text-primary text-decoration-none">Stack Overflow</a></li>
? ? ? ? </ul>
? ? ? </div>
? ? </div>
? </div>
</footer>
<!------------------------------------------------>
? ? ? <script>
? ? ? ? ? var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
? return new bootstrap.Tooltip(tooltipTriggerEl)
})
? ? ? </script>
</body>
</html>>