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

Jump to bottom

Dark Theme Added #146

Merged
merged 4 commits into from
Jan 23, 2024
Merged

Dark Theme Added #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e816921
Slider add
hars-21 Jan 23, 2024
b6e257d
theme toggle
hars-21 Jan 23, 2024
4276687
Added dark theme
hars-21 Jan 23, 2024
bb9d84b
Button switch
hars-21 Jan 23, 2024
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
196 changes: 196 additions & 0 deletions dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
body {
background-color: black;
color: white;
}

.preloader {
background-color: black;
}

.timeline::after {
background-color: #1c4966;
}

.contain::after {
background-color: black;
border-color: #1c4966;
}

.navbar-mainbg {
background-color: #003366;
}

#navbarSupportedContent ul li a {
color: rgba(0, 0, 0, 0.5);
}

#navbarSupportedContent > ul > li.active > a {
color: whitesmoke;
}

.hori-selector {
background-color: black;
}

.hori-selector .rightSide,
.hori-selector .leftSide {
background-color: black;
}

.hori-selector .rightSide:before,
.hori-selector .leftSide:before {
background-color: #003366;
}

#home {
background: linear-gradient(45deg, black 50%, #003366);
}

#home span {
color: #00c9ff;
}

.icons i:hover {
color: #00c9ff;
}

.fab {
color: white;
}

.btn_resume {
background-color: #1c4966;
color: black;
}

.btn_resume a {
color: white;
}

.btn_resume:hover {
background-color: #2f83ba !important;
}

#about {
background-color: #00172c;
}

.vab-box {
background-color: black;
}

.skill-category h3 {
color: #3dceff;
}

.skill {
background-color: black;
}

.skill span {
color: #042bff;
}

.skills {
background-color: #00172c;
}

.skill i {
color: whitesmoke;
}

#projects {
background-color: #c5cfd6;
}

#project-heading h1 {
color: #0080ff;
}

#projects {
background-color: rgb(5, 0, 27);
}

.project {
background-color: black;
}

.project:hover {
transform: scale(1.05);
background-color: #242323;
}

.project button a {
color: black;
}

.scroll-up-btn {
color: black;
background: #3785b9;
}

h2 {
color: #eff2f3;
}

.exp ul li p {
color: white;
}

.testimonial-section {
background-color: #01022a;
}

#c-img {
border-color: whitesmoke;
}

.faqs,
.feedbacksssection {
background: linear-gradient(
45deg,
#061a40,
#0d3b66,
#061a40,
#0d3b66,
#061a40
);
}

.containerfaqs .tabss {
background-color: black;
}

.containerfaqs .tabss label {
background-color: black;
}

.containerfaqs .tabss:hover label::after {
color: whitesmoke;
}

#faq-head {
color: whitesmoke;
text-decoration-color: wheat;
}

.feedbacksssection h1 span {
color: whitesmoke;
text-decoration-color: wheat;
}

#feed-item {
color: wheat;
}

.footer-section {
background-color: black;
}

.cta-text h4 {
color: whitesmoke;
}

.copyright-area {
background-color: black;
}
88 changes: 53 additions & 35 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="styles.css" id="theme" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<link rel="icon" href="assets/head_icon.png" />
Expand All @@ -43,6 +44,16 @@
<div class="📦"></div>
</div>

<!-- Switch Mode Light&Dark -->

<div id="mode">
<input type="checkbox" id="toggle-mode" />
<label for="toggle-mode" id="slider">
<i class="fa-regular fa-sun iswitch" id="light"></i>
<i class="fa-regular fa-moon iswitch" id="dark"></i>
</label>
</div>

<!-- Scroll-to-top button -->
<div class="scroll-up-btn">
<i class="fas fa-angle-up"></i>
Expand Down Expand Up @@ -117,7 +128,7 @@ <h1>
<div class="icons">
<a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a>
<a href="#" target="_blank"><i class="fab fa-github"></i></a>
<a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank"><i class="fab fa-x-twitter"></i></a>
</div>
<button class="btn_resume">
<a href="assets/Resume.pdf" target="_blank">Resume</a>
Expand Down Expand Up @@ -174,23 +185,37 @@ <h1>
</p>
</div>

<section id="about">
<div id="xp">
<div class="vab-box" data-aos="flip-left" data-aos-easing="ease-out-cubic">
<div class="num-box" id="inc">26</div>
<div class="text-box">Projects Created</div>
</div>
<div class="vab-box" data-aos="flip-left" data-aos-delay="500" data-aos-easing="ease-out-cubic">
<div class="num-box" id="speed">25000</div>
<div class="text-box">Lines of Code Written</div>
</div>
<div class="vab-box" data-aos="flip-left" data-aos-delay="1000" data-aos-easing="ease-out-cubic">
<div class="num-box" id="tick">14</div>
<div class="text-box">Hackathons Participated</div>
</div>
<div id="xp">
<div
class="vab-box"
data-aos="flip-left"
data-aos-easing="ease-out-cubic"
>
<div class="num-box" id="inc">26</div>
<div class="text-box">Projects Created</div>
</div>
<div
class="vab-box"
data-aos="flip-left"
data-aos-delay="500"
data-aos-easing="ease-out-cubic"
>
<div class="num-box" id="speed">25000</div>
<div class="text-box">Lines of Code Written</div>
</div>
<div
class="vab-box"
data-aos="flip-left"
data-aos-delay="1000"
data-aos-easing="ease-out-cubic"
>
<div class="num-box" id="tick">14</div>
<div class="text-box">Hackathons Participated</div>
</div>
</section>

</div>
</div>
</section>

<!-- Skills section -->
<section id="skill_section" class="skills">
<div class="container">
Expand Down Expand Up @@ -338,13 +363,13 @@ <h3>Project 1</h3>
<div class="project" data-aos="fade-right">
<h3>Project 2</h3>
<p>
Built a full-stack web app with Node.js and MongoDB, featuring
user authentication and third-party API integration for enhanced
Built a full-stack web app with Node.js, featuring user
authentication and third-party API integration for enhanced
functionality.
</p>
<p>
<strong>Skills and Tools:</strong> HTML, CSS, JavaScript,
Node.js
Node.js, MongoDB
</p>
<div class="buttons">
<button>
Expand Down Expand Up @@ -397,13 +422,13 @@ <h3>Project 3</h3>
<div class="project" data-aos="fade-left">
<h3>Project 4</h3>
<p>
Built a mobile-responsive website using React.js. Integrated
state management for a seamless user interface and employed
RESTful API communication.
Social networking app for sharing multimedia content. Features
include user profiles, posts, comments, and real-time
notifications.
</p>
<p>
<strong>Skills and Tools:</strong> HTML, CSS, JavaScript,
React.js
Angular, Flask, MySQL
</p>
<div class="buttons">
<button>
Expand Down Expand Up @@ -684,14 +709,7 @@ <h2 id="certificate-heading">Certificates</h2>
</div>

<h1>
<span
style="
text-decoration: underline;
text-decoration-color: #3252a8;
color: #3252a8;
"
>Frequently Asked Questions?</span
>
<span id="faq-head">Frequently Asked Questions?</span>
</h1>

<div class="tabss" data-aos="zoom-in">
Expand Down Expand Up @@ -734,7 +752,7 @@ <h3>What are my hobbies?</h3>
<h1><span class="feedback-title">Feedback</span></h1>
<div class="contact-right">
<form class="feedback-form" name="submit-to-google-sheet">
<h4 style="color: #3252a8; font-weight: 600">Your Name</h4>
<h4 id="feed-item">Your Name</h4>
<p>
<textarea
type="text"
Expand All @@ -744,7 +762,7 @@ <h4 style="color: #3252a8; font-weight: 600">Your Name</h4>
data-aos="zoom-in"
></textarea>
</p>
<h4 style="color: #3252a8; font-weight: 600">Your Email</h4>
<h4 id="feed-item">Your Email</h4>
<p>
<textarea
type="email"
Expand All @@ -754,7 +772,7 @@ <h4 style="color: #3252a8; font-weight: 600">Your Email</h4>
data-aos="zoom-in"
></textarea>
</p>
<h4 style="color: #3252a8; font-weight: 600">Feedback</h4>
<h4 id="feed-item">Feedback</h4>
<p>
<textarea
name="Message"
Expand Down
23 changes: 23 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,3 +300,26 @@ function changeContent() {
window.addEventListener("load", () => {
setInterval(changeContent, 7000);
});

// ------ Toggle Mode --------

let modeBtn = document.getElementById("slider");

function toggleMode() {
let theme = document.getElementById("theme");
const isLight = theme.getAttribute("href") === "styles.css";

if (isLight) {
theme.setAttribute("href", "dark.css");
} else {
theme.setAttribute("href", "styles.css");
}
}

modeBtn.addEventListener("click", () => {
toggleMode();
document.querySelector(".preloader").style.display = "";
setTimeout(function () {
document.querySelector(".preloader").style.display = "none";
}, 2000);
});
Loading