⋮

Levoric Learn

Levoric Learn

Docs Frameworks Tutorials Examples Blogs
Follow Us
Twitter Facebook Instagram GitHub Discord LinkedIn

Help Center | Levoric Learn

About Us Privacy Policy Terms and Condtion
View on GitHub

Download

Download Levoric Learn v2.1.0 for compiled CSS and JavaScript, source code, Tools & Projects, and more for seamless front-end development.

In this article
In this article

  1. Levoric Learn v2.1.0's source files for front-end tools and code, ready for integration into your project. This includes:

    • HTML files
    • CSS files
    • JS files

    Note: While this package provides essential front-end tools and code, it does not include documentation, source files, or optional dependencies like Popper.

    HTML

    Download

    CSS

    Download

    JS

    Download

  2. Levoric Learn HTML Structured

    Download Levoric Learn HTML files to seamlessly integrate accompanying our given CSS and JavaScript, allowing you to customize and embellish your projects effortlessly.

    Copy to clipboard
     
<!DOCTYPE html>
<html lang="en" data-ll-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Comprehensive tutorials on web development including HTML, CSS, JavaScript, and more. Learn with Levoric Learn.">
<meta name="keywords" content="Web Development, Tutorials, HTML, CSS, JavaScript, Levoric Learn">
<title>Front-end tools - Levoric Learn</title>
<link rel="icon" href="/front-end-projects/image/Levoric Learn Logo.png">
<link rel="stylesheet" href="/front-end-projects/download/ll/tools/main.css">
</head>
<body class="ll-body">
<header class="ll-header">
<nav class="ll-nav">
<!-- <a href="/" class="ll-logo"><img src="/image/LL.png" width="30" height="30" alt="Levoric Learn home" class="img-ll-primary"></a> -->
<button class="ll-nav-toggle" aria-label="Toggle navigation">☰</button>
<ul class="ll-nav-list">
<li><a href="#HTML-Intro-ll" class="ll-nav-item">HTML</a></li>
<li><a href="#CSS-Intro-ll" class="ll-nav-item">CSS</a></li>
<li><a href="#JS-Intro-ll" class="ll-nav-item">JavaScript</a></li>
<li><a href="https://levoriclearn.com/docs/Help%20Center/hp.html#LevoricLearn-about" class="ll-nav-item">About Us</a></li>
</ul>
</nav>
</header>

<main class="ll-main">
<section class="ll-tutorials">
<h1 class="ll-tutorials-title">Levoric Learn Tutorials</h1>
<article class="ll-tutorial">
<h2 class="ll-tutorial-title" id="HTML-Intro-ll">Introduction to HTML</h2>
<p class="ll-tutorial-description">
Hyper Text Markup Language or HTML is the most basic tool used in constructing websites. In this tutorial, you’ll get an idea about what HTML is, how it is Structured, the Elements and the Attributes used in HTML.
</p>
<a href="https://levoriclearn.com/docs/HTML5/html.html" class="ll-btn ll-btn-primary">Read More</a>
</article>
<article class="ll-tutorial">
<h2 class="ll-tutorial-title" id="CSS-Intro-ll">Introduction CSS</h2>
<p class="ll-tutorial-description">
CSS is generally applied to web page styling and the arrangement of these pages. Explore how to style HTML elements and achieve nice and elegant, or any other, designs that are responsive to various devices.
</p>
<a href="https://levoriclearn.com/docs/CSS3/css.html" class="ll-btn ll-btn-primary">Read More</a>
</article>
<article class="ll-tutorial">
<h2 class="ll-tutorial-title" id="JS-Intro-ll">JavaScript Basics</h2>
<p class="ll-tutorial-description">
It is a script language used to add interactivity to Web pages and web applications. This is a simple JavaScript tutorial and the content below will teach you the basics of JavaScript programming.
</p>
<a href="https://levoriclearn/docs/JavaScript/js.html" class="ll-btn ll-btn-primary">Read More</a>
</article>
</section>
</main>

<div class="section-ll">
<hr>
<div class="button-container">
<button class="ll-primary-1">Button 1</button>
<button class="ll-primary-2">Button 2</button>
<button class="ll-primary-3">Button 3</button>
<button class="ll-primary-4">Button 4</button>
<button class="ll-primary-5">Button 5</button>
<button class="ll-primary-6">Button 6</button>
<button class="ll-primary-7">Button 7</button>
<button class="ll-primary-8">Button 8</button>
<button class="ll-primary-9">Button 9</button>
<button class="ll-primary-10">Button 10</button>
</div>

<div class="button-container-ll">
<button class="ll-primary-1" onclick="copyText(this)">Copy Button 1</button>
<button class="ll-primary-2" onclick="copyText(this)">Copy Button 2</button>
<button class="ll-primary-3" onclick="copyText(this)">Copy Button 3</button>
<button class="ll-primary-4" onclick="copyText(this)">Copy Button 4</button>
<button class="ll-primary-5" onclick="copyText(this)">Copy Button 5</button>
<button class="ll-primary-6" onclick="copyText(this)">Copy Button 6</button>
<button class="ll-primary-7" onclick="copyText(this)">Copy Button 7</button>
<button class="ll-primary-8" onclick="copyText(this)">Copy Button 8</button>
<button class="ll-primary-9" onclick="copyText(this)">Copy Button 9</button>
<button class="ll-primary-10" onclick="copyText(this)">Copy Button 10</button>
</div>
</div>

<div class="section-2-ll">
<hr>
<div class="grid-container">
<div class="grid-item elements ll-primary" data-element="Apple">Apple</div>
<div class="grid-item elements ll-primary" data-element="Banana">Banana</div>
<div class="grid-item elements ll-primary" data-element="Orange">Orange</div>
<div class="grid-item elements ll-primary" data-element="Mango">Mango</div>
</div>
</div>
<footer class="ll-footer">
<div class="ll-footer-container">
<div class="ll-footer-row">
<div class="ll-footer-col">
<h3 class="ll-footer-title-about">Levoric Learn</h3>
<p class="ll-footer-text-about">Levoric Learn is designed to help you learn web development tutorials and resources.</p>
<p class="ll-footer-text-about">Levoric Learn is an open-source project, and it is licensed under the MIT license License terms and further information can be obtained from the project’s repository on <a href="https://github.com/Levoric-Learn/LevoricLearn" class="anchor-links-ll">Github</a></p>
<p class="ll-footer-text">Currently v2.1.0</p>
</div>
<div class="ll-footer-col">
<h3 class="ll-footer-title">Quick Links</h3>
<ul class="ll-footer-list">
<li><a href="#home" class="ll-footer-link">Home</a></li>
<li><a href="#docs" class="ll-footer-link">Docs</a></li>
<li><a href="#download" class="ll-footer-link">Download</a></li>
<li><a href="#tutorials" class="ll-footer-link">Tutorials</a></li>
</ul>
</div>
<div class="ll-footer-col">
<h3 class="ll-footer-title">Follow Us</h3>
<ul class="ll-footer-social-list">
<li><a href="#facebook" class="ll-footer-social-link">Facebook</a></li>
<li><a href="#twitter" class="ll-footer-social-link">Twitter</a></li>
<li><a href="#instagram" class="ll-footer-social-link">Instagram</a></li>
<li><a href="#linkedin" class="ll-footer-social-link">LinkedIn</a></li>
</ul>
</div>
</div>
<p class="ll-footer-text">©2024</p>
</div>
</footer>
<script src="/front-end-projects/download/ll/tools/scripts.js"></script>
</body>
</html>

  3. Levoric Learn CSS Styles

    Download Levoric Learn CSS files to complement your HTML and JavaScript integration, authorizing you to customize and refine your projects without difficulty.

    Copy to clipboard
     
/*
* Levoric Learn CSS v2.1.0 (https://levoriclearn.com/)
* Copyright 2024-2025 The Authors (https://github.com/Levoric-Learn/LevoricLearn/graphs/contributors)
* Licensed under MIT (https://github.com/Levoric-Learn/LevoricLearn)
*/
:root, [data-ll-theme="light"] {
--ll-body-color: #212529;
--ll-font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--ll-header-color: rgb(86, 41, 252);
--ll-color-white: rgb(255, 255, 255);
--MĀ-WHITE-bg-footer--: rgb(245, 249, 253);
--ll-AQUA-GREEN--color: rgb(0,224,150);
--ll-BRILLIANTWHITE: rgb(229, 237, 255);
--ll-TANGERINECREAM--color: rgb(255,163,140);
--ll-DRIEDLILAC-color: rgb(192,185,255);
--ll-DIGITALYELLOW-color: rgb(255,231,125);
--ll-MOVEMINT-color: rgb(72,255,194);
--ll-JUPITER--ll-color: rgb(226,226,226);
--ll-BLEUCHÂTELBLUE-hover-color-links: rgb(70,144,255);
--ll-FLYINGFISHBLUE--color: rgb(0,75,214);
--ll-ASTERFLOWERBLUE--color: rgb(152,174,214);
--ll-MACAU--color: rgb(39,216,157);
--ll-ROSA--color: rgb(255,137,162);
--ll-DEADLYDEPTHS--color: rgb(20,12,66);
--ll--CHILIPEPPER--color: rgb(171,28,59);
--ll-SZÖLLŐSI-GRAPE-color: rgb(132,45,247);
--ll-TEZCATLIPŌCA-BLUE-ll-color: rgb(80,0,230);
--ll-SZÖLLŐSI-GRAPE-ll-color: rgb(112,36,255);
--ll-BLACK-OAK-color: rgb(79,79,79);
--ll-GRAVELFINT--color: rgb(187,187,187);
--ll-NOBLE-BLACK-color: rgb(34,33,39);
--ll-dark-body-background-color: rgb(31,34,37);
--ll-body-background-color: rgb(255, 255, 255);
--ll-body-color-rgb: 33, 37, 41;
--ll-color-background-color: rgb(32,32,44);
--ll-body-bg: #fff;
--ll-body-bg-rgb: 255, 255, 255;
--ll-emphasis-color: #000;
--ll-emphasis-color-rgb: 0, 0, 0;
--ll-secondary-color: rgba(33,37,41,.75);
--ll-secondary-color-rgb: 33, 37, 41;
--ll-secondary-bg: #fbfcff;
--ll-secondary-bg-rgb: 233, 236, 239;
--ll-tertiary-color: rgba(33,37,41,.5);
--ll-tertiary-color-rgb: 33, 37, 41;
--ll-tertiary-bg: #f8f9fa;
--ll-tertiary-bg-rgb: 248, 249, 250;
--ll-primary-text-emphasis: #052c65;
--ll-secondary-text-emphasis: #2b2f32;
--ll-success-text-emphasis: #0a3622;
--ll-info-text-emphasis: #055160;
--ll-warning-text-emphasis: #664d03;
--ll-danger-text-emphasis: #58151c;
--ll-light-text-emphasis: #495057;
--ll-dark-text-emphasis: #495057;
--ll-primary-bg-subtle: #cfe2ff;
--ll-secondary-bg-subtle: #e2e3e5;
--ll-success-bg-subtle: #d1e7dd;
--ll-info-bg-subtle: #cff4fc;
--ll-warning-bg-subtle: #fff3cd;
--ll-danger-bg-subtle: #f8d7da;
--ll-light-bg-subtle: #fcfcfd;
--ll-link-color: #0d6efd;
--ll-link-hover-color: #591cd3;
--ll-dark-bg-subtle: #ced4da;
--ll-primary-border-subtle: #9ec5fe;
--ll-secondary-border-subtle: #c4c8cb;
--ll-success-border-subtle: #a3cfbb;
--ll-info-border-subtle: #9eeaf9;
--ll-warning-border-subtle: #ffe69c;
--ll-danger-border-subtle: #f1aeb5;
--ll-light-border-subtle: #e4e7ea;
--ll-dark-border-subtle: #a2a9b1;
--btn-background-color: #4e41ff;
--btn-hover-background-color: #591cd3;
--btn-hover-border-color: #5a1cd6
}

* {
box-sizing: border-box;
scroll-behavior: smooth;
}

.ll-body {
font-family: var(--ll-font-primary);
color: var(--ll-body-color);
background-color: var(--ll-body-background-color);
margin: 0
}

.ll-header {
background-color: var(--ll-header-color);
padding: 1rem
}

.ll-nav {
display: flex;
justify-content: space-between;
align-items: center
}


/* LL Logo Tutorials if required */

/* .ll-logo {
color: var(--ll-color-white);
text-decoration: none;
font-size: 1.5rem;
font-weight: bold
} */

.ll-nav-list {
list-style: none;
display: flex;
margin: 0;
padding: 0
}

.ll-nav-item {
margin-left: 1rem;
color: var(--ll-color-white);
text-decoration: none
}

.ll-nav-item:hover {
color: var(--ll-BLEUCHÂTELBLUE-hover-color-links)
}

.ll-main {
padding: 2rem
}

.ll-tutorials {
max-width: 800px;
margin: 0 auto
}

.ll-tutorials-title {
font-size: 2rem;
margin-bottom: 1rem
}

.ll-tutorial {
background-color: var(--ll-secondary-bg);
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
border: 1px solid var(--ll-dark-border-subtle)
}

.ll-tutorial-title {
font-size: 1.5rem;
margin-bottom: 0.5rem
}

.ll-tutorial-description {
margin-bottom: 0.5rem
}

.ll-btn {
display: inline-block;
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
text-decoration: none;
color: var(--ll-color-white);
cursor: pointer
}

.ll-btn-primary {
background-color: var(--ll-header-color)
}

.ll-btn-primary:hover {
background-color: var(--ll-link-hover-color)
}

.ll-footer {
background-color: var(--MĀ-WHITE-bg-footer--);
padding: 2rem;
text-align: center
}

.ll-footer-container {
max-width: 1200px;
margin: 0 auto
}

.ll-footer-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between
}

.ll-footer-col {
flex: 1;
margin: 1rem;
min-width: 200px
}

.ll-footer-title {
font-size: 1.25rem;
margin-bottom: 0.5rem
}

.ll-footer-text {
margin-bottom: 0.5rem
}

.ll-footer-list {
list-style: none;
padding: 0;
margin: 0
}

.ll-footer-link {
text-decoration: none;
color: var(--ll-link-color);
display: block;
margin-bottom: 0.5rem
}

.ll-footer-link:hover {
color: var(--ll-BLEUCHÂTELBLUE-hover-color-links)
}

.ll-footer-social-list {
list-style: none;
padding: 0;
margin: 0;
display: block;
justify-content: center
}

.ll-footer-social-link {
margin: 0 0.5rem;
text-decoration: none;
color: var(--ll-link-color)
}

.ll-footer-social-link:hover {
color: var(--ll-BLEUCHÂTELBLUE-hover-color-links)
}

.section-ll {
margin: 2em 0
}

.button-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px
}
.button-container-ll {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
margin: 2em
}

.button-container-ll button {
padding: 10px 20px;
border: 1px solid transparent;
cursor: pointer;
color: var(--ll-color-white);
border-radius: 5px;
background-color: var(--btn-background-color);
transition: background-color 0.3s ease, border-color 0.3s ease
}

.button-container-ll button:hover {
background-color: var(--btn-hover-background-color);
border-color: var(--btn-hover-border-color)
}


.button-container button {
padding: 10px 20px;
border: 1px solid transparent;
cursor: pointer;
color: var(--ll-color-white);
border-radius: 5px;
background-color: var(--btn-background-color);
transition: background-color 0.3s ease, border-color 0.3s ease
}

.button-container button:hover {
background-color: var(--btn-hover-background-color);
border-color: var(--btn-hover-border-color)
}
/* Tooltip has issue so we will fixed it in next update */
.tooltip {
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: var(--ll-color-white);
padding: 5px 10px;
border-radius: 3px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease
}

.button-container button:hover .tooltip {
opacity: 1
}
.section-4-ll {
margin: 2em 0
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 1em
}

.grid-item {
padding: 5em;
border: 1px solid var(--ll-dark-border-subtle);
text-align: center
}

/* LL Primary styles use it */
.ll-primary {
background-color: var(--ll-BRILLIANTWHITE)
}
.ll-footer-text-about, .ll-footer-title-about {
text-align: left;
}
.anchor-links-ll {
color: var(--ll-link-color)
}

.anchor-links-ll:hover {
color: var(--ll-BLEUCHÂTELBLUE-hover-color-links)
}
@media only screen and (max-width: 492px) {
.grid-container {
display: block;
grid-template-columns: repeat(2, 1fr);
margin: 1em
}

.grid-item {
padding: 4em;
border: 1px solid var(--ll-dark-border-subtle);
text-align: center
}
}

@media only screen and (max-width: 792px) {
.ll-nav-list {
display: none;
flex-direction: column;
width: 100%;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
max-height: 0;
overflow: hidden;
opacity: 0
}

.ll-nav-list.active {
display: flex;
max-height: 500px;
opacity: 1
}

.ll-nav-item {
margin: 0.5rem 0
}

.ll-footer-row {
flex-direction: column;
align-items: center
}

.ll-footer-col {
margin: 1rem 0
}

.ll-nav {
flex-direction: column;
align-items: flex-start
}

.ll-logo {
margin-bottom: 1rem
}

.ll-nav-toggle {
display: block;
background: none;
border: none;
font-size: 1.5rem;
color: var(--ll-color-white);
cursor: pointer;
margin-left: auto
}

.ll-footer {
padding: 1rem;
}

.ll-footer-social-list {
flex-direction: column
}

.ll-footer-social-link {
margin: 0.5rem 0
}
}

/* LL Toggle button for navigation use it*/
.ll-nav-toggle {
display: none
}

@media (max-width: 792px) {
.ll-nav-toggle {
display: block !important
}
}

/* LL CSS for small devices (992px and below) */
@media (max-width: 385px) {
.ll-nav-list {
display: none;
flex-direction: column;
width: 100%;
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
max-height: 0;
overflow: hidden;
opacity: 0
}

.ll-nav-list.active {
display: flex;
max-height: 500px;
opacity: 1
}

.ll-nav-item {
margin: 0.5rem 0
}

.ll-footer-row {
flex-direction: column;
align-items: center
}

.ll-footer-col {
margin: 1rem 0
}

.ll-nav {
flex-direction: column;
align-items: flex-start
}

/* LL Logo Tutorials if required */

/* .ll-logo {
margin-bottom: 1rem
} */

.ll-nav-toggle {
display: block;
background: none;
border: none;
font-size: 1.5rem;
color: var(--ll-color-white);
cursor: pointer;
margin-left: auto
}

.ll-footer {
padding: 1rem
}

.ll-footer-social-list {
flex-direction: column
}

.ll-footer-social-link {
margin: 0.5rem 0
}
}

/* LL Toggle button for navigation use it */
.ll-nav-toggle {
display: none
}

  4. Levoric Learn JS Scripts

    Download Levoric Learn - JavaScript files to include dynamic functionality to your site projects. Integrate seamlessly following CSS and HTML for improved customization and performance.

    Copy to clipboard
     
/*
* Levoric Learn JS v2.1.0 (https://levoriclearn.com/)
* Copyright 2024-2025 The Authors (https://github.com/Levoric-Learn/LevoricLearn/graphs/contributors)
* Licensed under MIT (https://github.com/Levoric-Learn/LevoricLearn)
*/
document.querySelector('.ll-nav-toggle').addEventListener('click', function() {
const navList = document.querySelector('.ll-nav-list');
navList.classList.toggle('active');
if (navList.classList.contains('active')) {
navList.style.maxHeight = navList.scrollHeight + "px";
} else {
navList.style.maxHeight = "0";
}
});

function copyText(button) {
const textToCopy = button.textContent.trim().replace('Copy ', '');
navigator.clipboard.writeText(textToCopy)
.then(() => {
console.log('Text copied to clipboard:', textToCopy);
showTooltip(button);
})
.catch(err => {
console.error('Failed to copy text:', err);
});
}

function showTooltip(button) {
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.textContent = 'Copied!';
button.appendChild(tooltip);

setTimeout(() => {
tooltip.remove();
}, 1500);
}

Community

Stay up-to-date on the development of Levoric Learn and reach out to the community with these helpful resources.

Join Levoric Learn Community to stay ahead in your learning journey and keep up with the latest trends, insights, and developments in your field of interest. Our community is designed to foster collaboration, knowledge sharing, and continuous growth among enthusiasts, learners, and experts alike.

You can follow & Ask Question at levoriclearn @Twitter