Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#83 dark mode added #91

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

#83 dark mode added #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6788e04
dark mode added
divya-nshi Oct 28, 2022
51d1853
reduced the size of icon
divya-nshi Oct 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 24 additions & 7 deletions courses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ <h1>HTML & CSS Crash Course</h1>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
</div>
<p>HTML and CSS are the rudimentary components of web development. They provide the basic structure to the website, and learning them is too important if you are a beginner.</p>
<p>HTML and CSS are the rudimentary components of web development. They provide the basic
structure to the website, and learning them is too important if you are a beginner.</p>
<p><button class="comman-btn">ENROLL NOW</button></p>
</div>
</div>
Expand All @@ -97,7 +98,8 @@ <h1>Introduction to javascript</h1>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star"></span>
</div>
<p>Javascript is the scripting language too common in most of the web applications. Its layout is simple, and its implementation does not require much time to understand.</p>
<p>Javascript is the scripting language too common in most of the web applications. Its layout
is simple, and its implementation does not require much time to understand.</p>
<p><button class="comman-btn">ENROLL NOW</button></p>
</div>
</div>
Expand All @@ -112,7 +114,9 @@ <h1>Data Structures and Algorithms</h1>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star"></span>
</div>
<p>Data Structures and Algorithms is all about collection of data, data storage and data retrieval in the easy accessibility mode. You can play with various data containers here and implement algorithms on them, irrespecrive of any language barriers. </p>
<p>Data Structures and Algorithms is all about collection of data, data storage and data
retrieval in the easy accessibility mode. You can play with various data containers here and
implement algorithms on them, irrespecrive of any language barriers. </p>
<p><button class="comman-btn">ENROLL NOW</button></p>
</div>
</div>
Expand All @@ -127,7 +131,8 @@ <h1>SOLID Design Principles</h1>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star-fill"></span>
</div>
<p>SOLID is one of the most popular sets of design principles in object-oriented software development. It’s a mnemonic acronym for :
<p>SOLID is one of the most popular sets of design principles in object-oriented software
development. It’s a mnemonic acronym for :
Single Responsibility Principle,
Open/Closed Principle,
Liskov Substitution Principle,
Expand All @@ -148,7 +153,10 @@ <h1>Python For Everybody</h1>
<span class="bi bi-star-fill"></span>
<span class="bi bi-star"></span>
</div>
<p>Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. It supports multiple programming paradigms, including structured, object-oriented and functional programming. </p>
<p>Python is a high-level, general-purpose programming language. Its design philosophy
emphasizes code readability with the use of significant indentation. It supports multiple
programming paradigms, including structured, object-oriented and functional programming.
</p>
<p><button class="comman-btn">ENROLL NOW</button></p>
</div>
</div>
Expand All @@ -163,7 +171,10 @@ <h1>Cloud Computing</h1>
<span class="bi bi-star"></span>
<span class="bi bi-star"></span>
</div>
<p>Cloud computing is the on-demand availability of computer system resources, especially data storage and computing power, without direct active management by the user. Large clouds often have functions distributed over multiple locations, each location being a data center.</p>
<p>Cloud computing is the on-demand availability of computer system resources, especially data
storage and computing power, without direct active management by the user. Large clouds
often have functions distributed over multiple locations, each location being a data center.
</p>
<p><button class="comman-btn">ENROLL NOW</button></p>
</div>
</div>
Expand Down Expand Up @@ -221,7 +232,13 @@ <h1>Cloud Computing</h1>
sideNav.style.right = "-290px";
}
};
if (sessionStorage.getItem("dark")) {
document.body.classList.add("dark-theme");
}
else {
document.body.classList.remove("dark-theme");
}
</script>
</body>

</html>
</html>
Binary file added images/moon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sun.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 22 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
<div id="loader"></div>
<div id="content">
<section id="header">
<img src="images/moon.png" id="icon">
<div class="container">
<a href="index.html"><img src="images/Xypo1.png" class="logo" /></a>
<div class="header-text">
Expand Down Expand Up @@ -233,6 +234,9 @@ <h1>Sign Up to join our<br />Learning community</h1>
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<script type="text/javascript">



var loader;
var delayed = (ms) => setTimeout(function () {
displayContent();
Expand All @@ -250,7 +254,6 @@ <h1>Sign Up to join our<br />Learning community</h1>
loader = document.getElementById('loader');
loadNow();
});

let menubtn = document.getElementById("menubtn");
let sideNav = document.getElementById("sideNav");

Expand All @@ -275,11 +278,28 @@ <h1>Sign Up to join our<br />Learning community</h1>
}

}

viewCourseBtn.onclick = function () {
window.location.href = ("courses.html");
}

var icon = document.getElementById("icon");
icon.onclick = function () {
document.body.classList.toggle("dark-theme");
if (document.body.classList.contains("dark-theme")) {
icon.src = "images/sun.png";
sessionStorage.setItem("dark", true);
}
else {
icon.src = "images/moon.png";
sessionStorage.removeItem("dark");
}
}
if (sessionStorage.getItem("dark")) {
document.body.classList.add("dark-theme");
}
else {
document.body.classList.remove("dark-theme");
}

</script>
</body>
Expand Down
45 changes: 38 additions & 7 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ html {
body {
padding: 0;
margin: 0;
background-color: #ffffff;
background-color: var(--primary-color) !important;
}

button:hover {
Expand Down Expand Up @@ -36,6 +36,30 @@ button:hover {
margin-left: 100px;
}

:root{
/* --primary-color: black;
--seconday-color: white;
--third-color: rgb(209, 207, 207); */
/* black */
--primary-color: white;
--seconday-color: black;
--third-color: black ;
}

.dark-theme{
--primary-color: black;
--seconday-color: white;
--third-color: rgb(209, 207, 207);

}

#icon{
width: 35px;
cursor: pointer;
margin-top: 10px;
margin-left: 20px;
}

.logo {
margin-top: 10px;
width: 190px;
Expand All @@ -49,6 +73,7 @@ button:hover {

h1 {
font-size: 34px;
color: var(--third-color);
}

.square {
Expand All @@ -66,12 +91,14 @@ h1 {
border: 2px solid #567bac;
font-weight: bold;
cursor: pointer;
color: var(--third-color);
}

p {
font-size: 15px;
line-height: 18px;
color: #575757;
/* color: #575757; */
color: var(--third-color);
}

.header-text button {
Expand Down Expand Up @@ -133,7 +160,7 @@ nav ul li {

nav ul li a {
text-decoration: none;
color: #fefbf6;
color: var(--primary-color);
font-size: large;
font-style: italic;
transition: 0.2s ease-in;
Expand Down Expand Up @@ -186,12 +213,14 @@ nav ul li a:hover {
margin: 50px 0 10px;
font-size: 28px;
font-style: italic;
color: var(--third-color);
}

.about-text h3 {
margin: 50px 0 10px;
font-size: 28px;
font-style: italic;
color: var(--third-color);
}

/* features */
Expand Down Expand Up @@ -227,6 +256,7 @@ nav ul li a:hover {
margin-bottom: 15px;
font-size: 20px;
font-weight: 400;
color: var(--third-color);
}

.feature-btn {
Expand Down Expand Up @@ -334,7 +364,7 @@ form input {
z-index: 1;
overflow: visible;
background: rgb(255, 0, 179) url(images/loader.gif) no-repeat center center;
background-color: #ffffffcf;
background-color: var(--primary-color);
background-size: 400px;
}

Expand Down Expand Up @@ -529,6 +559,7 @@ form input {
}
.header-text h1 {
width: 100%;
color: var(--third-color);
}
.header-text p {
width: 40%;
Expand Down Expand Up @@ -631,7 +662,7 @@ form input {
}

.gotopbtn:hover {
color: white;
color: var(--primary-color);
}

/* Responsive Website */
Expand Down Expand Up @@ -790,12 +821,12 @@ form input {
}

::-webkit-scrollbar-track{
background-color: white;
background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb{
background-color: #563bac;
background-clip: content-box;
border: 2px solid transparent;
border-radius: 15px;
}
}