unclebay143/charts.css

## charts.css
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
  margin: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #0b0d60;
  --app-white: #ffffff;
  --bar-chart-bg: #3a0ca3;
  --line-chart-bg: #560bad;
  --pie-chart-bg: #7209b7;
}

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.3;
  font-family: 'Ubuntu';
  background-color: var(--pie-chart-bg);
}

header {
  padding: 0.9rem;
  background-color: var(--primary-color);
  height: 100vh;
}

/* FIX THE NAVBAR ACROSS ALL SECTIONS */
nav {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-links.read-guide {
  opacity: 1;
  font-size: 22px;
  margin-bottom: 0.6rem;
  text-decoration-line: unset;
  opacity: 0.7;
}

.nav-links.read-guide:hover {
  opacity: 0.9;
}

.nav-right {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.nav-links {
  padding: 0.5rem;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  font-size: 1.1em;
  font-weight: 600;
  transition: 0.5s;
  text-decoration-line: underline;
  text-underline-offset: 10px;
}

.nav-links:hover {
  opacity: 1;
  text-underline-offset: 12px;
}

/* HERO SECTION */

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}

.hero-text {
  color: #fff;
  font-size: 48px;
  line-height: 1.5;
}

/* CHART SECTION */

.chart-section {
  height: 100vh;
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chart-wrapper {
  width: 95%;
  background-color: white;
}

.chart-heading {
  font-size: 38px;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--app-white);
  opacity: 0.8;
}

.chart-section.bar-chart {
  background-color: var(--bar-chart-bg);
}

.chart-section.line-chart {
  background-color: var(--line-chart-bg);
}

.chart-section.pie-chart {
  background-color: var(--pie-chart-bg);
}

/* FOOTER */
footer {
  text-align: center;
  color: var(--app-white);
  padding: 2rem;
  font-size: 12px;
  opacity: 0.8;
}

footer span {
  font-weight: 900;
}

@media (min-width: 900px) {
  header {
    padding: 1rem 0.9rem;
  }

  nav {
    padding: 0 2rem;
    flex-direction: row;
  }

  .nav-links.read-guide {
    margin-bottom: 1rem;
  }

  .nav-right {
    width: 40%;
  }

  /* HERO SECTION */
  .hero {
    height: 80vh;
  }

  .hero-text {
    font-size: 48px;
    line-height: 1.6;
  }

  /* CHART SECTION */
  .chart-wrapper {
    width: 55vw;
  }

  .chart-heading {
    font-size: 48px;
  }
}

## charts.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./chart.css">
    <title>Getting Started with chart.js</title>
</head>

<body>

    <!-- HEADER SECTION -->
    <header>
        <!-- NAVBAR SECTION -->
        <nav>
            <a href="" class="nav-links read-guide">Read Guide</a>
            <div class="nav-right">
                <a href="#bar-chart" class="nav-links">Bar Chart</a>
                <a href="#line-chart" class="nav-links">Line Chart</a>
                <a href="#pie-chart" class="nav-links">Pie Chart</a>
            </div>
        </nav>
        <!-- HERO SECTION -->
        <section class="hero">
            <h1 class="hero-text">Getting Started with Chart.js <br /> (DEMO)</h1>
        </section>
    </header>

    <main>

        <!-- BAR CHART SECTION -->
        <section class="chart-section bar-chart" id="bar-chart">
            <h2 class="chart-heading">Bar Chart</h2>
            <div class="chart-wrapper">
                <!-- chart canva -->
                <canvas id="js-bar-chart"></canvas>
            </div>
        </section>

        <!-- LINE CHART SECTION -->
        <section class="chart-section line-chart" id="line-chart">
            <h2 class="chart-heading">Line Chart</h2>
            <div class="chart-wrapper">
                <!-- chart canva -->
                <canvas id="js-line-chart"></canvas>
            </div>
        </section>

        <!-- PIE CHART SECTION -->
        <section class="chart-section pie-chart" id="pie-chart">
            <h2 class="chart-heading">Pie Chart</h2>
            <div class="chart-wrapper">
                <!-- chart canva -->
                <canvas id="js-pie-chart"></canvas>
            </div>
        </section>
    </main>

    <footer>
        <h2>Design with 🧡 by <span>UNCLEBIGBAY</span></h2>
    </footer>


    <!-- Chart.js Script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"
        integrity="sha512-GMGzUEevhWh8Tc/njS0bDpwgxdCJLQBWG3Z2Ct+JGOpVnEmjvNx6ts4v6A2XJf1HOrtOsfhv3hBKpK9kE5z8AQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- Bar Chart Script -->
    <script src="./bar-chart.js"></script>
    <!-- Line Chart Script -->
    <script src="./line-chart.js"></script>
    <!-- Pie Chart Script -->
    <script src="./pie-chart.js"></script>
</body>

</html>
	@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

	* {
	margin: 0;
	box-sizing: border-box;
	}

	:root {
	--primary-color: #0b0d60;
	--app-white: #ffffff;
	--bar-chart-bg: #3a0ca3;
	--line-chart-bg: #560bad;
	--pie-chart-bg: #7209b7;
	}

	html {
	scroll-behavior: smooth;
	}

	body {
	line-height: 1.3;
	font-family: 'Ubuntu';
	background-color: var(--pie-chart-bg);
	}

	header {
	padding: 0.9rem;
	background-color: var(--primary-color);
	height: 100vh;
	}

	/* FIX THE NAVBAR ACROSS ALL SECTIONS */
	nav {
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 9;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}

	.nav-links.read-guide {
	opacity: 1;
	font-size: 22px;
	margin-bottom: 0.6rem;
	text-decoration-line: unset;
	opacity: 0.7;
	}

	.nav-links.read-guide:hover {
	opacity: 0.9;
	}

	.nav-right {
	display: flex;
	justify-content: space-between;
	width: 100%;
	}

	.nav-links {
	padding: 0.5rem;
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
	font-size: 1.1em;
	font-weight: 600;
	transition: 0.5s;
	text-decoration-line: underline;
	text-underline-offset: 10px;
	}

	.nav-links:hover {
	opacity: 1;
	text-underline-offset: 12px;
	}

	/* HERO SECTION */

	.hero {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	text-align: center;
	}

	.hero-text {
	color: #fff;
	font-size: 48px;
	line-height: 1.5;
	}

	/* CHART SECTION */

	.chart-section {
	height: 100vh;
	padding-top: 70px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}

	.chart-wrapper {
	width: 95%;
	background-color: white;
	}

	.chart-heading {
	font-size: 38px;
	text-align: center;
	margin-bottom: 2rem;
	color: var(--app-white);
	opacity: 0.8;
	}

	.chart-section.bar-chart {
	background-color: var(--bar-chart-bg);
	}

	.chart-section.line-chart {
	background-color: var(--line-chart-bg);
	}

	.chart-section.pie-chart {
	background-color: var(--pie-chart-bg);
	}

	/* FOOTER */
	footer {
	text-align: center;
	color: var(--app-white);
	padding: 2rem;
	font-size: 12px;
	opacity: 0.8;
	}

	footer span {
	font-weight: 900;
	}

	@media (min-width: 900px) {
	header {
	padding: 1rem 0.9rem;
	}

	nav {
	padding: 0 2rem;
	flex-direction: row;
	}

	.nav-links.read-guide {
	margin-bottom: 1rem;
	}

	.nav-right {
	width: 40%;
	}

	/* HERO SECTION */
	.hero {
	height: 80vh;
	}

	.hero-text {
	font-size: 48px;
	line-height: 1.6;
	}

	/* CHART SECTION */
	.chart-wrapper {
	width: 55vw;
	}

	.chart-heading {
	font-size: 48px;
	}
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./chart.css">
	<title>Getting Started with chart.js</title>
	</head>

	<body>

	<!-- HEADER SECTION -->
	<header>
	<!-- NAVBAR SECTION -->
	<nav>
	<a href="" class="nav-links read-guide">Read Guide</a>
	<div class="nav-right">
	<a href="#bar-chart" class="nav-links">Bar Chart</a>
	<a href="#line-chart" class="nav-links">Line Chart</a>
	<a href="#pie-chart" class="nav-links">Pie Chart</a>
	</div>
	</nav>
	<!-- HERO SECTION -->
	<section class="hero">
	<h1 class="hero-text">Getting Started with Chart.js <br /> (DEMO)</h1>
	</section>
	</header>

	<main>

	<!-- BAR CHART SECTION -->
	<section class="chart-section bar-chart" id="bar-chart">
	<h2 class="chart-heading">Bar Chart</h2>
	<div class="chart-wrapper">
	<!-- chart canva -->
	<canvas id="js-bar-chart"></canvas>
	</div>
	</section>

	<!-- LINE CHART SECTION -->
	<section class="chart-section line-chart" id="line-chart">
	<h2 class="chart-heading">Line Chart</h2>
	<div class="chart-wrapper">
	<!-- chart canva -->
	<canvas id="js-line-chart"></canvas>
	</div>
	</section>

	<!-- PIE CHART SECTION -->
	<section class="chart-section pie-chart" id="pie-chart">
	<h2 class="chart-heading">Pie Chart</h2>
	<div class="chart-wrapper">
	<!-- chart canva -->
	<canvas id="js-pie-chart"></canvas>
	</div>
	</section>
	</main>

	<footer>
	<h2>Design with 🧡 by <span>UNCLEBIGBAY</span></h2>
	</footer>


	<!-- Chart.js Script -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"
	integrity="sha512-GMGzUEevhWh8Tc/njS0bDpwgxdCJLQBWG3Z2Ct+JGOpVnEmjvNx6ts4v6A2XJf1HOrtOsfhv3hBKpK9kE5z8AQ=="
	crossorigin="anonymous" referrerpolicy="no-referrer"></script>

	<!-- Bar Chart Script -->
	<script src="./bar-chart.js"></script>
	<!-- Line Chart Script -->
	<script src="./line-chart.js"></script>
	<!-- Pie Chart Script -->
	<script src="./pie-chart.js"></script>
	</body>

	</html>