Skip to content

Commit

Permalink
Merge pull request #146 from Harshil-Gupta21/main
Browse files Browse the repository at this point in the history 
Dark Theme Added
  • Loading branch information
@ayushichoudhary-19
ayushichoudhary-19 committed Jan 23, 2024
2 parents 417fe3d + bb9d84b commit b735606
Show file tree
Hide file tree
Showing 4 changed files with 385 additions and 76 deletions.
196 changes: 196 additions & 0 deletions dark.css
View file
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
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
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

0 comments on commit b735606

Please sign in to comment.