Skip to content

Instantly share code, notes, and snippets.

@Johnson1s

Johnson1s/index.html

Created April 3, 2024 02:10
Show Gist options
  • Save Johnson1s/c87a4f5eee1d770dbaf0d2f2f2177635 to your computer and use it in GitHub Desktop.
Save Johnson1s/c87a4f5eee1d770dbaf0d2f2f2177635 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Dashboard | Chart.js
Raw
index.html
<body class="darkmode">
<nav class="main-menu">
<div>
<div class="user-info">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e5a707f4-d5ac-4f30-afd8-4961ae353dbc"
alt="user" />
<p>Mia Taylor</p>
</div>
<ul>
<li class="nav-item active">
<a href="#">
<i class="fa fa-user nav-icon"></i>
<span class="nav-text">Profile</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fa fa-map nav-icon"></i>
<span class="nav-text">Discover</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fa fa-arrow-trend-up nav-icon"></i>
<span class="nav-text">Trending</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fa-solid fa-chart-simple nav-icon"></i>
<span class="nav-text">Analytics</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fa fa-heart nav-icon"></i>
<span class="nav-text">Favorites</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fa-solid fa-pen-to-square nav-icon"></i>
<span class="nav-text">Reviews</span>
</a>
</li>
</ul>
</div>
<ul>
<li class="nav-item">
<a href="#">
<i class="fa fa-gear nav-icon"></i>
<span class="nav-text">Settings</span>
</a>
</li>
<li class="nav-item">
<a href="#">
<i class="fa fa-right-from-bracket nav-icon"></i>
<span class="nav-text">Logout</span>
</a>
</li>
</ul>
</nav>
<section class="content">
<div class="left-content">
<div class="search-and-check">
<form class="search-box">
<input type="text" placeholder="Search event..." />
<i class="bx bx-search"></i>
</form>
<div class="interaction-control-mobile interactions">
<i class="fa-regular fa-envelope notified"></i>
<i class="fa-regular fa-bell notified"></i>
<div class="toggle" onclick="switchTheme()">
<div class="mode-icon moon">
<i class="bx bxs-moon"></i>
</div>
<div class="mode-icon sun hidden">
<i class="bx bxs-sun"></i>
</div>
</div>
</div>
</div>
<div class="header">
<picture class="morning-img hidden">
<img
class="header-mobile"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/b4f4845f-4dc7-4470-b81a-677f46f211c2"
alt="" />
<img
class="header-tablet"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/8add6e87-577d-44cb-a7bb-18f0e4bd2163"
alt="" />
<img
class="header-desktop"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/cce4084a-01a4-428d-961f-935bafe7a6e3"
alt="" />
</picture>
<picture class="night-img">
<img
class="header-mobile"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e349d3c2-ee2c-4982-866e-776236508fc9"
alt="" />
<img
class="header-tablet"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/1266c923-a1d3-441a-bbb6-2dc6663b1f8b"
alt="" />
<img
class="header-desktop"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/91011799-2b47-457d-9e11-65fe38a105d0"
alt="" />
</picture>
</div>
<div class="upcoming-events">
<h1>Upcoming Events</h1>
<div class="event-container">
<div class="card event-card">
<div class="event-header">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/697ef286-1104-4c6c-91d6-0b2a1e04009b"
alt="" />
<p>March 19, 8:00 PM</p>
<i class="bx bx-heart like-btn"></i>
</div>
<div class="event-content">
<h2>Acoustic Serenade Under the Stars</h2>
<p>Skyline Amphitheater</p>
</div>
<div class="event-footer">
<p style="background-color: #e48e2c">Concert</p>
<div class="btn-group">
<button>Buy Ticket</button>
<div class="share">
<button class="share-btn">
<i class="fa-solid fa-share"></i>
</button>
<ul class="popup">
<li>
<a href="#" style="color: rgb(79, 153, 213)"
><i class="bx bxl-twitter"></i
></a>
</li>
<li>
<a href="#" style="color: rgb(34, 173, 34)"
><i class="bx bxl-whatsapp"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card event-card">
<div class="event-header">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/19cc9b1d-0dd6-4e4e-ab5c-1d9efd443953"
alt="" />
<p>March 22, 8:00 PM</p>
<i class="bx bxs-heart like-btn"></i>
</div>
<div class="event-content">
<h2>Latin Rhythms Fusion</h2>
<p>Dance Studio X</p>
</div>
<div class="event-footer">
<p style="background-color: #582bac">Workshop</p>
<div class="btn-group">
<button>Buy Ticket</button>
<div class="share">
<button class="share-btn">
<i class="fa-solid fa-share"></i>
</button>
<ul class="popup">
<li>
<a href="#" style="color: rgb(79, 153, 213)"
><i class="bx bxl-twitter"></i
></a>
</li>
<li>
<a href="#" style="color: rgb(34, 173, 34)"
><i class="bx bxl-whatsapp"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card event-card">
<div class="event-header">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/34203989-4778-4e9a-8537-d42c073a458d"
alt="" />
<p>March 26, 10:00 PM</p>
<i class="bx bx-heart like-btn"></i>
</div>
<div class="event-content">
<h2>Jazz Fusion Night</h2>
<p>Jazz Haven Lounge</p>
</div>
<div class="event-footer">
<p style="background-color: #e48e2c">Concert</p>
<div class="btn-group">
<button>Buy Ticket</button>
<div class="share">
<button class="share-btn">
<i class="fa-solid fa-share"></i>
</button>
<ul class="popup">
<li>
<a href="#" style="color: rgb(79, 153, 213)"
><i class="bx bxl-twitter"></i
></a>
</li>
<li>
<a href="#" style="color: rgb(34, 173, 34)"
><i class="bx bxl-whatsapp"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card event-card">
<div class="event-header">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/3990b1bd-f34d-4fda-bfc9-d807d9e2f0f6"
alt="" />
<p>March 28, 3:00 PM</p>
<i class="bx bx-heart like-btn"></i>
</div>
<div class="event-content">
<h2>Clay Sculpting Class</h2>
<p>Artisan Workshop Space</p>
</div>
<div class="event-footer">
<p style="background-color: #582bac">Workshop</p>
<div class="btn-group">
<button>Buy Ticket</button>
<div class="share">
<button class="share-btn">
<i class="fa-solid fa-share"></i>
</button>
<ul class="popup">
<li>
<a href="#" style="color: rgb(79, 153, 213)"
><i class="bx bxl-twitter"></i
></a>
</li>
<li>
<a href="#" style="color: rgb(34, 173, 34)"
><i class="bx bxl-whatsapp"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card event-card">
<div class="event-header">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/35bab020-129e-4858-9ce7-076f804fdcc5"
alt="" />
<p>April 4, 8:30 PM</p>
<i class="bx bx-heart like-btn"></i>
</div>
<div class="event-content">
<h2>Timeless Tales Revived</h2>
<p>Epoch Theater</p>
</div>
<div class="event-footer">
<p style="background-color: #b31a4d">Theatre</p>
<div class="btn-group">
<button>Buy Ticket</button>
<div class="share">
<button class="share-btn">
<i class="fa-solid fa-share"></i>
</button>
<ul class="popup">
<li>
<a href="#" style="color: rgb(79, 153, 213)"
><i class="bx bxl-twitter"></i
></a>
</li>
<li>
<a href="#" style="color: rgb(34, 173, 34)"
><i class="bx bxl-whatsapp"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card event-card">
<div class="event-header">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/13b71f3a-4fe3-4d95-8f83-1bd5722f5108"
alt="" />
<p>April 5, 6:45 PM</p>
<i class="bx bx-heart like-btn"></i>
</div>
<div class="event-content">
<h2>Abstract Art Class</h2>
<p>Artistic Horizon Studio</p>
</div>
<div class="event-footer">
<p style="background-color: #582bac">Workshop</p>
<div class="btn-group">
<button>Buy Ticket</button>
<div class="share">
<button class="share-btn">
<i class="fa-solid fa-share"></i>
</button>
<ul class="popup">
<li>
<a href="#" style="color: rgb(79, 153, 213)"
><i class="bx bxl-twitter"></i
></a>
</li>
<li>
<a href="#" style="color: rgb(34, 173, 34)"
><i class="bx bxl-whatsapp"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card event-card">
<div class="event-header">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/566017c5-9b68-4b35-a14f-5d04d43fa408"
alt="" />
<p>April 6, 9:00 PM</p>
<i class="bx bxs-heart like-btn"></i>
</div>
<div class="event-content">
<h2>Harry Potter Film Concert Series</h2>
<p>Overture Hall</p>
</div>
<div class="event-footer">
<p style="background-color: #e48e2c">Concert</p>
<div class="btn-group">
<button>Buy Ticket</button>
<div class="share">
<button class="share-btn">
<i class="fa-solid fa-share"></i>
</button>
<ul class="popup">
<li>
<a href="#" style="color: rgb(79, 153, 213)"
><i class="bx bxl-twitter"></i
></a>
</li>
<li>
<a href="#" style="color: rgb(34, 173, 34)"
><i class="bx bxl-whatsapp"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card event-card">
<div class="event-header">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/ab202ffd-b0ee-43ee-befb-870fa509cc17"
alt="" />
<p>Jun 23, 1:30 PM</p>
<i class="bx bx-heart like-btn"></i>
</div>
<div class="event-content">
<h2>Wimbledon Championships - 2024</h2>
<p>Tennis & Croquet Club</p>
</div>
<div class="event-footer">
<p style="background-color: #4a920f">Sport</p>
<div class="btn-group">
<button>Buy Ticket</button>
<div class="share">
<button class="share-btn">
<i class="fa-solid fa-share"></i>
</button>
<ul class="popup">
<li>
<a href="#" style="color: rgb(79, 153, 213)"
><i class="bx bxl-twitter"></i
></a>
</li>
<li>
<a href="#" style="color: rgb(34, 173, 34)"
><i class="bx bxl-whatsapp"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="reviews">
<h1>Past Event Reviews</h1>
<div class="review-container">
<div class="card review-card">
<h2>Metal Sculpture Workshop</h2>
<div class="ratings">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
<i class="bx bx-star"></i>
</div>
<p>
The metal sculpture workshop was a bit tough because shaping the
metal was harder than expected. It would have been better with
simpler instructions on how to mold the material.
</p>
</div>
<div class="card review-card">
<h2>Electro Groove Night</h2>
<div class="ratings">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star-half"></i>
</div>
<p>
The Electro Groove Night was so much fun! The music was awesome,
and everyone had a great time dancing – a fantastic night out
for sure!
</p>
</div>
<div class="card review-card">
<h2>Wimbledon Championships - 2023 (Final)</h2>
<div class="ratings">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
</div>
<p>
Watching the Wimbledon final between Novak Djokovic and Carlos
Alcaraz was so exciting! The intense match and incredible skills
of the players made it a thrilling experience that I'll always
remember.
</p>
</div>
</div>
</div>
</div>
<div class="right-content">
<div class="interaction-control interactions">
<i class="fa-regular fa-envelope notified"></i>
<i class="fa-regular fa-bell notified"></i>
<div class="toggle" onclick="switchTheme()">
<div class="mode-icon moon">
<i class="bx bxs-moon"></i>
</div>
<div class="mode-icon sun hidden">
<i class="bx bxs-sun"></i>
</div>
</div>
</div>
<div class="analytics">
<h1>Analytics</h1>
<div class="analytics-container">
<div class="total-events">
<div class="event-number card">
<h2>Past Events</h2>
<p>20</p>
<i class="bx bx-check-circle"></i>
</div>
<div class="event-number card">
<h2>Upcoming Events</h2>
<p>3</p>
<i class="bx bx-timer"></i>
</div>
</div>
<div class="chart" id="doughnut-chart">
<h2>Distribution of Attended Events</h2>
<canvas id="doughnut"></canvas>
<ul></ul>
</div>
</div>
</div>
<div class="contacts">
<h1>Contacts</h1>
<div class="contacts-container">
<div class="contact-status">
<div class="contact-activity">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e56800db-687d-4d0e-a470-51e37a4431c7"
alt="" />
<p>Matt favored <span>Jazz Fusion Night</span></p>
</div>
<small>1 hour ago</small>
</div>
<div class="contact-status">
<div class="contact-activity">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/fac9f27b-c1ea-4bba-973f-88996322fa2d"
alt="" />
<p>
Bella bought a ticket for
<span>Acoustic Serenade Under the Stars</span>
</p>
</div>
<small>4 hours ago</small>
</div>
<div class="contact-status">
<div class="contact-activity">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/1499d73c-ccc0-41a1-b530-1d629012aebd"
alt="" />
<p>
Lucas bought a ticket for
<span>Wimbledon Championships - 2024</span>
</p>
</div>
<small>1 day ago</small>
</div>
<div class="contact-status">
<div class="contact-activity">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/949768d4-0196-486c-b386-edb47ddd54c2"
alt="" />
<p>
Sophia favored
<span>Clay Sculpting Class</span>
</p>
</div>
<small>1 day ago</small>
</div>
<div class="contact-status">
<div class="contact-activity">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/8a470b8b-b5cf-4189-b36e-f22551997ff4"
alt="" />
<p>
Kate bought a ticket for
<span>Latin Rhythms Fusion</span>
</p>
</div>
<small>3 day ago</small>
</div>
<div class="contact-status">
<div class="contact-activity">
<img
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/7740acc0-3f86-4c28-8a8c-5ae67c343edb"
alt="" />
<p>
Ben favored
<span>Harry Potter Film Concert Series</span>
</p>
</div>
<small>6 day ago</small>
</div>
</div>
</div>
</div>
</section>
</body>
Raw
responsive-dashboard-chart-js.markdown

Responsive Dashboard | Chart.js

In this responsive dashboard, there's the doughnut chart made with Chart.js. It shows the participation rate visually and the number of events by hovering the mouse over the chart.

You can switch between light and dark mode for whatever suits your vibe! Upcoming event cards include like and share buttons. While clicking on the share button, there is a mini popup that contains social media icons. And when you click the like button, you'll see a pulse animation.

Note: This project can be accessible but it is not meant for unlimited use. Please, do not use it in profit-making platforms and projects without permission.

The other responsive dashboards:

  1. https://codepen.io/ecemgo/pen/MWxjXeq
  2. https://codepen.io/ecemgo/pen/YzBZjjb

A Pen by Ecem Gokdogan on CodePen.

License.

Raw
script.js
//! Active Navbar Item
const navItems = document.querySelectorAll(".nav-item");
navItems.forEach((navItem, i) => {
navItem.addEventListener("click", () => {
navItems.forEach((item, j) => {
item.className = "nav-item";
});
navItem.className = "nav-item active";
});
});
//! Light/Dark Mode
const moonIcon = document.querySelector(".moon");
const sunIcon = document.querySelector(".sun");
const nightImage = document.querySelector(".night-img");
const morningImage = document.querySelector(".morning-img");
const toggle = document.querySelector(".toggle");
function switchTheme() {
document.body.classList.toggle("darkmode");
if (document.body.classList.contains("darkmode")) {
sunIcon.classList.remove("hidden");
moonIcon.classList.add("hidden");
morningImage.classList.add("hidden");
nightImage.classList.remove("hidden");
localStorage.setItem("theme", "dark");
} else {
sunIcon.classList.add("hidden");
moonIcon.classList.remove("hidden");
morningImage.classList.remove("hidden");
nightImage.classList.add("hidden");
localStorage.setItem("theme", "light");
}
}
//! Share Button Popup
const sharebtns = document.querySelectorAll(".share-btn");
sharebtns.forEach((btn) => {
btn.addEventListener("click", (event) => {
const popup = btn.closest(".event-footer").querySelector(".popup");
btn.classList.toggle("active");
popup.classList.toggle("active");
event.stopPropagation();
});
});
document.addEventListener("click", (event) => {
const popups = document.querySelectorAll(".popup");
popups.forEach((popup) => {
if (popup.classList.contains("active") && !popup.contains(event.target)) {
popup.classList.remove("active");
const shareBtn = popup
.closest(".event-footer")
.querySelector(".share-btn");
shareBtn.classList.remove("active");
}
});
});
//! Like Buttons
const likeBtns = document.querySelectorAll(".like-btn");
likeBtns.forEach((likeBtn) => {
likeBtn.addEventListener("click", () => {
if (likeBtn.classList.contains("bxs-heart")) {
likeBtn.classList.remove("bxs-heart");
likeBtn.classList.add("bx-heart");
likeBtn.classList.remove("bounce-in");
} else {
likeBtn.classList.add("bxs-heart");
likeBtn.classList.remove("bx-heart");
likeBtn.classList.add("bounce-in");
}
});
});
//! Chart JS
const chartData = {
labels: ["Workshop", "Theater", "Concert", "Sport"],
data: [40, 15, 25, 20],
};
const chart = document.getElementById("doughnut");
const eventList = document.querySelector(".chart ul");
new Chart(chart, {
type: "doughnut",
data: {
labels: ["Workshop", "Theater", "Concert", "Sport"],
datasets: [
{
label: "# of Events",
data: [8, 3, 5, 4],
backgroundColor: ["#582bac", "#b31a4d", "#e48e2c", "#4a920f"],
offset: 10,
hoverOffset: 8,
hoverBorderColor: "#9a999b",
borderWidth: 1,
},
],
},
options: {
responsive: true,
plugins: {
legend: {
display: true,
labels: {
color: "#8b8a96",
font: {
size: 12,
weight: 600,
},
},
},
},
layout: {
padding: {
bottom: 10,
},
},
},
});
function population() {
chartData.labels.forEach((label, i) => {
let eachEvent = document.createElement("li");
eachEvent.innerHTML = `${label}: <span class="percentage">${chartData.data[i]}%</span> `;
eventList.appendChild(eachEvent);
});
}
population();
Raw
scripts
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
Raw
style.css
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&family=Roboto:wght@300;400;500;700&display=swap");
:root {
--bg-body: rgb(245, 247, 255);
--primary-color: rgb(42, 51, 65);
--primary-hover-color: rgb(158, 161, 166);
--scrollbar-color: rgba(131, 135, 193, 0.4);
--card-bg-color: rgba(230, 231, 247, 0.1);
--pop-bg-color: rgb(245, 247, 255, 0.9);
--star-color: #ddcc14;
--border-color: rgba(131, 135, 193, 0.4);
--shadow-color: rgba(0, 0, 0, 0.05);
--accent-color: rgb(194, 33, 105);
}
.darkmode {
--bg-body: rgb(6, 5, 40);
--primary-color: rgb(248, 248, 248);
--primary-hover-color: rgb(159, 159, 159);
--scrollbar-color: rgba(44, 49, 88, 0.7);
--card-bg-color: rgb(24, 26, 50);
--star-color: #a1d31a;
--border-color: rgba(189, 192, 234, 0.4);
--shadow-color: rgba(208, 195, 226, 0.13);
--accent-color: rgb(185, 129, 250);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
font-family: "Nunito", sans-serif;
}
nav {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
ul,
ul li {
outline: 0;
list-style: none;
}
ul li a {
text-decoration: none;
}
img {
width: 100%;
}
h1 {
font-size: clamp(1rem, 4vw, 1.2rem);
}
h2 {
font-size: clamp(0.9rem, 4vw, 1rem);
}
body {
position: relative;
background: var(--bg-body);
overflow: hidden;
}
/* MAIN MENU */
.main-menu {
position: fixed;
top: 0;
left: 0;
width: 180px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid var(--border-color);
padding: 12px 0 10px;
overflow: hidden;
font-family: inherit;
}
.user-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.user-info img {
max-width: 160px;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 50%;
padding: 20px;
}
.user-info p {
color: var(--primary-color);
font-size: clamp(0.8rem, 3vw, 1rem);
font-weight: 500;
text-align: center;
line-height: 1.3;
margin: -15px 0 30px;
}
.nav-item {
display: block;
}
.nav-item a {
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 1rem;
padding: 12px 0;
margin: 0 8px;
border-radius: 5px;
}
.nav-item.active a {
background: rgba(106, 109, 155, 0.4);
text-decoration: none;
box-shadow: 0px 1px 4px var(--shadow-color);
}
.nav-icon {
width: 40px;
height: 20px;
font-size: 1.1rem;
}
.nav-text {
display: block;
width: 70px;
height: 20px;
letter-spacing: 0;
}
/* CONTENT */
.content {
position: absolute;
top: 0;
left: 180px;
right: 0;
min-height: 100vh;
display: grid;
grid-template-columns: 75% 25%;
}
.card {
background-color: var(--card-bg-color);
border-radius: 8px;
border: 2px solid rgba(169, 150, 253, 0.5);
box-shadow: 0px 4px 5px 0px var(--shadow-color),
0px 1px 8px 0px var(--shadow-color), 0px 2px 4px -1px var(--shadow-color);
}
/* LEFT CONTENT */
.left-content {
padding: 25px 20px 40px;
color: var(--primary-color);
height: 100vh;
overflow: auto;
}
/* SEARCH */
.search-box {
position: relative;
display: flex;
}
.search-box input {
width: 80%;
height: 40px;
background: var(--card-bg-color);
color: var(--primary-color);
outline: 2px solid var(--border-color);
border: 0;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.6px;
padding: 8px 30px 8px 15px;
margin: 0 auto;
}
.search-box input[type="text"]::placeholder {
color: var(--primary-color);
opacity: 0.5;
font-weight: 400;
}
.search-box i {
position: absolute;
right: 11%;
top: 25%;
font-size: 1.3rem;
color: var(--primary-color);
cursor: pointer;
}
/* HEADER */
.header {
margin: 0 auto;
width: 100%;
}
.header-mobile,
.header-tablet {
display: none;
}
.header-desktop {
display: block;
}
/* UPCOMING EVENTS */
.upcoming-events h1 {
margin: 16px 0 10px;
}
.event-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
padding: 14px 0 20px;
}
.event-card {
display: grid;
grid-auto-flow: dense;
grid-template-rows: 2fr 0.8fr 0.5fr;
padding: 8px;
}
/* Event Header */
.event-header {
position: relative;
height: 180px;
margin-bottom: 8px;
}
.event-header img {
position: relative;
inset: 0;
width: 100%;
height: 180px;
border-radius: 6px;
border: 2px solid rgba(125, 125, 137, 0.5);
object-fit: cover;
}
.event-header p {
position: absolute;
right: 4px;
bottom: 4px;
font-size: 0.8rem;
color: rgb(240, 248, 255);
background-color: rgba(17, 16, 45, 0.6);
padding: 4px 6px;
border-radius: 3px;
box-shadow: 0 8px 20px rgba(74, 72, 72, 0.1);
}
.bx-heart,
.bxs-heart {
position: absolute;
right: 10px;
top: 10px;
font-size: 1.4rem;
color: rgb(240, 248, 255);
background-color: rgba(17, 16, 45, 0.6);
padding: 4px;
border-radius: 50%;
box-shadow: 0 8px 20px rgba(74, 72, 72, 0.1);
cursor: pointer;
}
.bounce-in {
animation: pulse 0.8s 1 ease-in-out alternate;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
/* Event Content */
.event-content {
display: grid;
grid-auto-flow: dense;
grid-template-rows: 2fr 1fr;
padding: 6px 6px 12px;
}
.event-content h2 {
margin-bottom: 6px;
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@supports (-webkit-line-clamp: 2) {
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.event-content p {
font-size: clamp(0.8rem, 4vw, 0.9rem);
opacity: 0.8;
}
/* Event Footer */
.event-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 4px;
}
.event-footer p {
color: rgb(240, 248, 255);
font-size: clamp(0.6rem, 3vw, 0.8rem);
font-weight: 600;
letter-spacing: 1px;
padding: 6px 10px;
border-radius: 50px;
}
.btn-group {
display: inline-flex;
}
.event-footer button {
background-color: rgb(51, 108, 215);
color: rgb(240, 248, 255);
padding: 5px 10px;
outline: 0;
border: 2px solid rgb(51, 108, 215);
border-radius: 4px;
font-size: clamp(0.6rem, 3vw, 0.8rem);
font-weight: 500;
margin-left: 3px;
transition: all 0.4s ease-in-out;
cursor: pointer;
}
.event-footer button:hover {
background-color: rgb(90, 139, 231);
border: 2px solid rgb(151, 177, 226);
}
/* Share Button Popup */
.share {
position: relative;
}
.popup {
position: absolute;
display: flex;
justify-content: space-around;
align-items: center;
top: -45px;
left: -15px;
min-width: 70px;
padding: 5px 8px 3px;
border-radius: 10px;
background-color: var(--pop-bg-color);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: translateY(50px) scale(0);
-webkit-transform: translateY(50px) scale(0);
transition: 0.4s ease-in-out;
-webkit-transition: 0.4s ease-in-out;
cursor: auto;
}
.popup.active {
opacity: 1;
transform: translateY(0) scale(1);
-webkit-transform: translateY(0) scale(1);
}
.popup::after {
content: "";
position: absolute;
height: 10px;
width: 20px;
background-color: var(--pop-bg-color);
clip-path: polygon(100% 0, 0 0, 50% 100%);
-webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
transform: translate(0px, 20px);
-webkit-transform: translate(0px, 20px);
}
.popup li a i {
font-size: 1.4rem;
}
/* REVIEWS */
.reviews h1 {
margin: 60px 0 20px;
}
.review-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.review-card {
padding: 20px;
}
.review-card h2 {
margin-bottom: 8px;
}
.review-card p {
margin-top: 10px;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@supports (-webkit-line-clamp: 3) {
overflow: hidden;
text-overflow: ellipsis;
white-space: initial;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
.ratings i {
color: var(--star-color);
font-size: 1.15rem;
}
/* RIGHT CONTENT */
.right-content {
display: flex;
flex-direction: column;
border-left: 1px solid var(--border-color);
padding: 25px 20px;
color: var(--primary-color);
height: 100vh;
overflow: auto;
}
/* INTERACTION CONTROL */
.interaction-control-mobile {
display: none;
}
.interaction-control {
display: flex;
margin-bottom: 15px;
}
.interactions {
justify-content: flex-end;
align-items: center;
gap: 25px;
}
.interactions i {
font-size: 1.25rem;
color: var(--primary-color);
user-select: none;
}
.notified {
position: relative;
}
.notified::after {
content: "";
position: absolute;
top: -3px;
right: -1px;
background-color: rgb(211, 17, 43);
width: 10px;
aspect-ratio: 1/1;
border-radius: 50%;
}
.fa-envelope::after {
right: -4px;
background-color: rgb(48, 153, 36);
}
/* Light/Dark Mode */
.mode-icon i {
color: var(--primary-color);
transform: translateY(2px);
transition: all 0.2s linear;
cursor: pointer;
}
.mode-icon i:hover {
color: var(--primary-hover-color);
}
.hidden {
display: none;
}
/* ANALYTICS */
.analytics h1 {
margin-bottom: 24px;
}
/* Total Events */
.total-events {
display: flex;
flex-direction: row;
gap: 10px;
}
.event-number {
position: relative;
display: grid;
grid-auto-flow: dense;
grid-template-rows: 1fr 0.5fr;
width: 100%;
padding: 10px;
}
.event-number p {
font-size: clamp(1.5rem, 4vw, 2rem);
color: var(--accent-color);
}
.event-number i {
position: absolute;
right: 8px;
bottom: 6px;
font-size: 2.5rem;
}
/* Chart */
.chart {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: var(--card-bg-color);
border-radius: 8px;
border: 2px solid rgba(169, 150, 253, 0.5);
box-shadow: 0 7px 25px var(--shadow-color);
padding: 20px 15px;
margin: 20px 0;
}
.chart h2 {
text-align: center;
margin-bottom: 10px;
}
.chart ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
list-style: none;
margin: 10px 0;
}
.chart ul li {
font-size: 0.8rem;
font-weight: 500;
background-color: var(--card-bg-color);
border: 2px solid var(--border-color);
border-radius: 6px;
padding: 6px;
box-shadow: 0px 2px 3px 0px var(--shadow-color),
0px 1px 4px 0px var(--shadow-color), 0px 2px 1px -1px var(--shadow-color);
}
.chart .percentage {
font-weight: 700;
color: var(--accent-color);
}
/* CONTACTS */
.contacts h1 {
margin: 20px 0;
}
.contact-status {
display: flex;
flex-direction: column;
padding: 5px 0;
border-bottom: 2px solid var(--border-color);
margin-bottom: 15px;
}
.contact-status:last-child {
border-bottom: unset;
}
.contact-activity {
display: flex;
align-items: center;
column-gap: 14px;
}
.contact-activity img {
max-width: 45px;
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
}
.contact-activity p {
font-size: 0.9rem;
line-height: 1.5;
padding-right: 10px;
}
.contact-activity p span {
font-weight: 700;
color: var(--accent-color);
margin-left: 2px;
cursor: pointer;
}
.contact-activity p span:hover {
text-decoration: underline;
text-decoration-color: var(--accent-color);
text-decoration-thickness: 1.5px;
}
.contact-status small {
font-size: 0.8rem;
opacity: 0.5;
margin-left: auto;
}
/* SCROLLBAR STYLE */
.left-content::-webkit-scrollbar,
.right-content::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 8px;
}
.left-content::-webkit-scrollbar-track,
.right-content::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
border-radius: 0;
}
.left-content::-webkit-scrollbar-thumb,
.right-content::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-color);
border-radius: 40px;
}
/* MEDIA QUERIES */
@media (max-width: 1500px) {
.main-menu {
width: 100px;
}
.user-info img {
padding: 12px;
}
.user-info p {
line-height: 1.1;
margin: -5px 0 30px;
}
.nav-icon {
text-align: center;
transform: translateY(2px);
}
.nav-text {
display: none;
}
.content {
left: 100px;
grid-template-columns: 70% 30%;
}
}
@media (max-width: 1120px) {
.content {
grid-template-columns: 65% 35%;
}
.event-number i {
font-size: 2.2rem;
}
}
@media (max-width: 1120px) {
.search-box input {
width: 100%;
}
.search-box i {
right: 2%;
}
}
@media (max-width: 980px) {
.content {
grid-template-columns: 60% 40%;
}
.header-mobile,
.header-desktop {
display: none;
}
.header-tablet {
display: block;
}
.chart {
padding: 20px 10px;
}
}
@media (max-width: 840px) {
.content {
grid-template-columns: 55% 45%;
}
.event-number i {
font-size: 2rem;
}
}
@media (max-width: 825px) {
.left-content {
padding: 25px 20px 20px;
}
.review-container {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
@media (max-width: 760px) {
body {
overflow: auto;
}
.main-menu {
width: 70px;
}
.user-info img {
max-width: 80px;
}
.user-info p {
line-height: 1.1;
margin: -10px 0 30px;
}
.nav-item a {
padding: 8px 0;
}
.content {
left: 70px;
grid-template-columns: 100%;
grid-template-areas:
"leftContent"
"rightContent";
overflow: auto;
}
.left-content {
grid-area: leftContent;
height: auto;
overflow: unset;
}
.header-mobile,
.header-tablet {
display: none;
}
.header-desktop {
display: block;
}
.review-container {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.right-content {
grid-area: rightContent;
border-left: unset;
height: auto;
overflow: unset;
}
.chart {
width: 50%;
margin: 20px auto;
}
.search-and-check {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 20px;
}
.search-box {
flex-grow: 1;
}
.interaction-control {
display: none;
}
.interaction-control-mobile {
display: inline-flex;
}
.interactions {
gap: 15px;
}
}
@media (max-width: 650px) {
.chart {
width: 65%;
}
}
@media (max-width: 610px) {
.header-mobile,
.header-desktop {
display: none;
}
.header-tablet {
display: block;
}
}
@media (max-width: 550px) {
.user-info {
padding: 3px;
}
.header img {
aspect-ratio: 4/2;
height: 100%;
}
.chart {
width: 80%;
}
.search-and-check {
gap: 20px;
}
.interactions {
gap: 10px;
}
.interactions i {
font-size: 1.1rem;
}
.mode-icon i {
font-size: 1.4rem;
}
}
@media (max-width: 450px) {
.header-tablet,
.header-desktop {
display: none;
}
.header-mobile {
display: block;
}
.bx-heart,
.bxs-heart {
font-size: 1.2rem;
}
.review-container {
gap: 20px;
}
.search-box input {
height: 30px;
font-size: 0.8rem;
padding: 8px 30px 8px 10px;
}
.search-box i {
top: 20%;
font-size: 1.1rem;
}
}
@media (max-width: 400px) {
.main-menu {
width: 60px;
}
.user-info {
padding: 0;
}
.nav-icon {
font-size: 0.9rem;
}
.content {
left: 60px;
}
.review-container {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.chart {
width: 100%;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment