Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Mental Wellness Partner</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a href="#" class="navbar-brand">PsychosisHelp</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false"
aria-label="toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto mb-lg-0">
<li class="nav-item"><a href="#" class="nav-link">Find a therapist</a></li>
<li class="nav-item mx-lg-4"><a href="#" class="nav-link">Get Help</a></li>
<li class="nav-item"><a href="#" class="nav-link">Magazine</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a href="#" class="nav-link">🌏 IND</a></li>
<li class="nav-item ms-lg-4"><a href="#" class="btn btn-primary">Log In</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container py-4">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 my-4">
<div class="w-100 d-flex flex-column justify-content-center">
<div class="alert alert-primary fs-6 text-start max-width-fit-content" role="alert">
No 1 Mental Health Platform
</div>
<h1 class="h1 w-100 mb-3">Free, Personalized Online Mental Health Care</h1>
<p class="w-100 text-secondary">Start improving your mental health and well-being today.
PsychosisHelp shows you how. Building Power to Build A Mentally Healthy World: Supporting
and Advancing Youth Leadership.</p>
<div class="border d-flex p-2 align-items-center rounded mb-3">
<select class="form-select border-0 me-1 rounded-0 border-end">
<option selected>Therapist</option>
<option value="one">Therapist One</option>
<option value="two">Therapist Two</option>
<option value="three">Therapist Three</option>
</select>
<input type="text" class="form-control border-0 mx-1" placeholder="City, zip code">
<button type="submit" class="btn btn-primary ms-1">Search</button>
</div>
<p class="mb-0 text-secondary d-flex justify-content-between"><span>No account needed</span>
<span>Free to connect</span><span>Online and face to face</span>
</p>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 my-4">
<div class="w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<img src="https://images.unsplash.com/photo-1499171138085-a60c4e752ff7?auto=format&fit=crop"
alt="image 1" class="w-75 rounded">
</div>
</div>
</div>
</div>
<div class="container py-4">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-3 my-4">
<div class="card bg-light-green border-0">
<div class="card-body">
<h5 class="card-title">Individual</h5>
<p class="card-text text-secondary">A process through which clients work one-on-one with a
trained mental health clinician in a safe.</p>
<hr>
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 text-secondary">Explore More</p>
<div
class="bg-dark rounded-circle px-2 pb-1 d-flex justify-content-center align-items-center">
<a href="#" class="text-decoration-none link-light">></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-3 my-4">
<div class="card bg-light-purple border-0">
<div class="card-body">
<h5 class="card-title">Couple</h5>
<p class="card-text text-secondary">Couples therapy for married couples is known as marital
therapy. Individual sessions may be provided separately.</p>
<hr>
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 text-secondary">Explore More</p>
<div
class="bg-dark rounded-circle px-2 pb-1 d-flex justify-content-center align-items-center">
<a href="#" class="text-decoration-none link-light">></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-3 my-4">
<div class="card bg-light-tan border-0">
<div class="card-body">
<h5 class="card-title">Teen</h5>
<p class="card-text text-secondary">With counseling, teens participate in talk therapy in a
safe environment with a mental health professional with the aim.</p>
<hr>
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 text-secondary">Explore More</p>
<div
class="bg-dark rounded-circle px-2 pb-1 d-flex justify-content-center align-items-center">
<a href="#" class="text-decoration-none link-light">></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-3 my-4">
<div class="card bg-light-brown border-0">
<div class="card-body">
<h5 class="card-title">Psychiatry</h5>
<p class="card-text text-secondary">Evaluation and medication management are usually carried
out by psychiatrists or, in many states.</p>
<hr>
<div class="d-flex align-items-center justify-content-between">
<p class="mb-0 text-secondary">Explore More</p>
<div
class="bg-dark rounded-circle px-2 pb-1 d-flex justify-content-center align-items-center">
<a href="#" class="text-decoration-none link-light">></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container py-4">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<h2 class="h2 mb-0">Allow me to explain the functioning process</h2>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<p class="text-secondary mb-0">Our platform is designed to guide you seamlessly through each step,
from the moment you log in to the final outcome. Through intuitive interfaces and user-friendly
interactions, you'll be able to access personalized resources.</p>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<div class="w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<div class="list-group w-100" id="card-list" role="tablist">
<div class="list-group-item list-group-item-action py-3 active" id="card-1-tab"
data-bs-toggle="tab" data-bs-target="#tab-1" type="button" role="tab"
aria-controls="tab-1" aria-selected="true">
<h5>Create a account</h5>
<p class="mb-0 text-secondary">Complete a free online psychological assessment to learn
more about your symptoms.</p>
</div>
<div class="list-group-item list-group-item-action py-3" id="card-2-tab"
data-bs-toggle="tab" data-bs-target="#tab-2" type="button" role="tab"
aria-controls="tab-2" aria-selected="false">
<h5>Assessment</h5>
<p class="mb-0 text-secondary">Receive and review your assessment report via your
personalized dashboard.</p>
</div>
<div class="list-group-item list-group-item-action py-3" id="card-3-tab"
data-bs-toggle="tab" data-bs-target="#tab-3" type="button" role="tab"
aria-controls="tab-3" aria-selected="false">
<h5>Consultation</h5>
<p class="mb-0 text-secondary">Schedule a confidential appointment to speak to a
PsychosisHelp therapist about your results and about treatment options.</p>
</div>
<div class="list-group-item list-group-item-action py-3" id="card-4-tab"
data-bs-toggle="tab" data-bs-target="#tab-4" type="button" role="tab"
aria-controls="tab-4" aria-selected="false">
<h5>Treatment</h5>
<p class="text-secondary">Enroll and start an online treatment course to learn to manage
your symptoms. You can choose to speak to a PsychosisHelp therapist each week to
help guide you through the course.</p>
<p class="mb-0 text-secondary">Or, access teletherapy sessions with a PsychosisHelp
therapist.</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-none d-md-block">
<div class="w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<div class="tab-content" id="tab-content">
<div class="tab-pane fade show active" id="tab-1" role="tabpanel"
aria-labelledby="card-1-tab">
<img src="https://images.unsplash.com/photo-1626381961666-ea7ebcf56a6a?auto=format&fit=crop"
alt="image 2" class="w-100 rounded">
</div>
<div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="card-2-tab">
<img src="https://images.unsplash.com/photo-1634245482527-60ac666a8c9f?auto=format&fit=crop"
alt="image 3" class="w-100 rounded">
</div>
<div class="tab-pane fade" id="tab-3" role="tabpanel" aria-labelledby="card-3-tab">
<img src="https://images.unsplash.com/photo-1698434156091-05773f7a3cb5?auto=format&fit=crop"
alt="image 4" class="w-100 rounded">
</div>
<div class="tab-pane fade" id="tab-4" role="tabpanel" aria-labelledby="card-4-tab">
<img src="https://images.unsplash.com/photo-1551847677-dc82d764e1eb?auto=format&fit=crop"
alt="image 5" class="w-100 rounded">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-light-container">
<div class="container py-4">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<div class="w-100 h-100 d-flex flex-column justify-content-center">
<h2 class="h2 mb-3">Strengthen Mental Health and Wellness</h2>
<p class="text-secondary mb-0">We understand the significance of a balanced and resilient mind,
and we're committed to equipping you with the knowledge and skills to achieve just
that. Through a blend of curated resources, expert guidance, and personalized support.</p>
<ul class="list-group plain-list w-100 my-4">
<li class="list-group-item">
<span class="me-2 bg-primary text-light py-1 px-2 rounded-circle">✓</span>
Guidance you can trust
</li>
<li class="list-group-item">
<span class="me-2 bg-primary text-light py-1 px-2 rounded-circle">✓</span>
Skills for life success
</li>
<li class="list-group-item">
<span class="me-2 bg-primary text-light py-1 px-2 rounded-circle">✓</span>
Strategies to feel better
</li>
</ul>
<div class="w-100">
<button class="btn btn-primary">Try for free</button>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<div class="w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<img src="https://images.unsplash.com/photo-1493836512294-502baa1986e2?auto=format&fit=crop"
alt="image 6" class="w-75 rounded">
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<div class="w-100 h-100 d-flex flex-column justify-content-center align-items-center">
<img src="https://images.unsplash.com/photo-1622566359362-539a508d6af5?auto=format&fit=crop"
alt="image 6" class="w-75 rounded">
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4">
<div class="w-100 h-100 d-flex flex-column justify-content-center">
<h2 class="h2 mb-3">Reasons to Choose PsychosisHelp</h2>
<p class="text-secondary mb-0">PsychosisHelp stands as a beacon of support in the realm of
mental health care, offering a comprehensive suite of resources and personalized assistance.
</p>
<ul class="list-group plain-list w-100 my-4">
<li class="list-group-item">
<span class="me-2 bg-secondary text-light py-1 px-2 rounded-circle">✓</span>
Absolutely Free of Charge
</li>
<li class="list-group-item">
<span class="me-2 bg-secondary text-light py-1 px-2 rounded-circle">✓</span>
Qualified therapists
</li>
<li class="list-group-item">
<span class="me-2 bg-secondary text-light py-1 px-2 rounded-circle">✓</span>
Personalized dashboard
</li>
<li class="list-group-item">
<span class="me-2 bg-secondary text-light py-1 px-2 rounded-circle">✓</span>
Convenient
</li>
</ul>
<div class="w-100">
<button class="btn btn-outline-secondary">Get Started</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-blue">
<div class="container py-4 text-light">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-3">
<div class="w-100 h-100 d-flex flex-column justify-content-center">
<h5>Join our newsletter</h5>
<p class="mb-0">We'll send you a nice letter once per week.</p>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-3">
<div class="w-100 h-100 d-flex justify-content-center align-items-center">
<input type="email" class="form-control bg-transparent text-light"
placeholder="Enter your email">
<button type="submit" class="btn btn-primary ms-2">Subscribe</button>
</div>
</div>
</div>
<hr class="border-light">
<div class="row">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-3">
<h5 class="h5 mb-4">Product</h5>
<ul class="list-group plain-list">
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Overview</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Features</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Solutions</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Tutorials</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Pricing</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Releases</a></em>
</li>
</ul>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-3">
<h5 class="h5 mb-4">Support</h5>
<ul class="list-group plain-list">
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Find a therapist</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Proof policy</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Wellbeing A-Z</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Helplines</a></em>
</li>
</ul>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-3">
<h5 class="h5 mb-4">Company</h5>
<ul class="list-group plain-list">
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">About us</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">The team</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Contact us</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Press</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Careers</a></em>
</li>
</ul>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 my-3">
<h5 class="h5 mb-4">Stay in touch</h5>
<ul class="list-group plain-list">
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Submit Your Story</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Partner With Us</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Who We Are</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Press</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Careers</a></em>
</li>
<li class="list-group-item">
<em><a href="#" class="text-decoration-none link-light">Jobs & Internships</a></em>
</li>
</ul>
</div>
</div>
<hr class="border-light">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-3">
<div class="w-100 h-100 d-md-flex text-center">
<a href="#" class="h4 text-decoration-none link-light">PsychosisHelp</a>
</div>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-3">
<div class="w-100 h-100 d-md-flex text-center justify-content-end">
<p class="mb-0">© <span id="current-year"></span> PsychosisHelp. All rights reserved.</p>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Fredoka", sans-serif;
}
body {
height: 100vh;
width: 100%;
text-align: justify;
}
.max-width-fit-content {
max-width: fit-content;
}
input:focus, input:focus-visible, select:focus, select:focus-visible {
box-shadow: none !important;
outline: none !important;
}
.bg-light-green {
background-color: #e9f5f4;
}
.bg-light-purple {
background-color: #f9f8ff;
}
.bg-light-tan {
background-color: #fffbef;
}
.bg-light-brown {
background-color: #edecee;
}
.list-group-item:first-child, .list-group-item:last-child {
border-radius: 0;
}
.list-group-item {
border: none;
border-left: 4px solid #f2f2f2;
}
.list-group-item.active {
background-color: transparent;
color: initial;
border: none;
border-left: 4px solid #007bff;
}
.list-group-item:hover {
background-color: transparent;
border-left: 4px solid #007bff80;
}
.list-group-item.active:hover {
border-left: 4px solid #007bff;
}
.bg-light-container {
background-color: #fcfcfb;
}
.list-group.plain-list .list-group-item {
background-color: transparent;
border: none;
padding-left: 0;
}
.bg-blue {
background-color: #013583;
}
.bg-blue ::placeholder {
color: #ffffff;
}
.bg-blue input:focus {
border-color: #ffffff;
}Below is the javascript code for this video.
index.js
document.addEventListener("DOMContentLoaded", function () {
const tabButtons = document.querySelectorAll("#card-list .list-group-item");
const tabContents = document.querySelectorAll("#tab-content .tab-pane");
let currentIndex = 0;
let interval;
function switchTab() {
tabButtons.forEach((button, index) => {
button.classList.remove("active");
tabContents[index].classList.remove("show", "active");
});
tabButtons[currentIndex].classList.add("active");
tabContents[currentIndex].classList.add("show", "active");
currentIndex = (currentIndex + 1) % tabButtons.length;
}
function resetInterval() {
clearInterval(interval);
interval = setInterval(switchTab, 2400);
}
tabButtons.forEach((button, index) => {
button.addEventListener("click", () => {
currentIndex = index;
resetInterval();
});
});
interval = setInterval(switchTab, 2400);
const currentYear = document.getElementById("current-year");
currentYear.innerText = new Date().getFullYear();
});Thanks for visiting