Skip to content

Commit c1def90

Browse files
Pankajcoder1Pankajcoder1
committed
dark mode
1 parent 2303fa3 commit c1def90

File tree

4 files changed

+152
-29
lines changed

4 files changed

+152
-29
lines changed

‎css/index.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,13 @@ body
1515
font-weight: 500;
1616
}
1717
/*css for navbar start*/
18+
.navbar
19+
{
20+
position: fixed;
21+
z-index: 10000;
22+
width: 100%;
23+
top: 0px;
24+
}
1825
nav li a
1926
{
2027
font-weight: 700;
@@ -78,8 +85,8 @@ nav li a
7885
}
7986
.about-div .row .col-sm
8087
{
81-
min-height: 600px;
82-
padding-top: 90px;
88+
min-height: 650px;
89+
padding-top: 95px;
8390
margin-right: 0px;
8491
animation-name: about-translate;
8592
animation-duration: 2s;
@@ -172,6 +179,8 @@ nav li a
172179
}*/
173180
.row div img
174181
{
182+
/*background-color: red;*/
183+
/*top: 50px;*/
175184
height: 260px;
176185
width: 250px;
177186
padding: 15px;

‎index.html

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
</head>
2727
<body>
2828
<!-- starting navbar -->
29-
<nav class="navbar navbar-light" id="top">
29+
<nav class="navbar navbar-light navbar-expand-sm" id="top">
3030
<div class="container">
3131
<!-- <h1 class="navbar-brand" style="font-size: 20px;">Pankaj Kumar</h1> -->
3232
<ul class="nav">
@@ -121,13 +121,13 @@
121121
<a href="Resume.pdf" class="nav-link" target="_blank">Resume</a>
122122
</li>
123123
<!-- dark mode system -->
124-
<!-- <li class="nav-item">
124+
<li class="nav-item light" onclick="change_light_mode();">
125125
<a href="#" class="nav-link"><span class="material-icons">mode_night</span></a>
126-
</li> -->
126+
</li>
127127
<!-- light mode -->
128-
<!-- <li class="nav-item" style="display: none;" onclick="change_mode();">
128+
<li class="nav-item dark" style="display: none;" onclick="change_dark_mode();">
129129
<a href="#" class="nav-link"><span class="material-icons">light_mode</span></a>
130-
</li> -->
130+
</li>
131131
</ul>
132132
</div>
133133
</nav>
@@ -172,7 +172,7 @@ <h1 class="text-center section-heading">
172172
<div class="row text-center">
173173
<div class="col-sm-4">
174174
<p>Strengths</p>
175-
<ul>
175+
<ul class="strength_list">
176176
<li>
177177
<p>Algorithms</p>
178178
</li>
@@ -190,7 +190,7 @@ <h1 class="text-center section-heading">
190190
<p>
191191
Programming
192192
</p>
193-
<ul>
193+
<ul class="programming_list">
194194
<li>
195195
<p>C++(Intermediate)</p>
196196
</li>
@@ -219,7 +219,7 @@ <h1 class="text-center section-heading">
219219
<p>
220220
Other Tools and Framework
221221
</p>
222-
<ul>
222+
<ul class="other_list">
223223
<li>
224224
<p>Git</p>
225225
</li>
@@ -404,6 +404,7 @@ <h1 class="text-center section-heading">
404404
</div>
405405
</section>
406406

407+
<!-- connect me section start -->
407408
<section class="connect-me" id="connect-me">
408409
<div class="container">
409410
<div class="text-center">
@@ -413,13 +414,12 @@ <h1 class="text-center section-heading">
413414
</div>
414415
<div class="row justify-content-center">
415416
<ul class="col-4">
416-
<!-- list-group list-group-horizontal -->
417417
<li class="github">
418418
<a href="https://github.com/Pankajcoder1" title="Github account">
419419
<i class="fa fa-github"></i>
420420
</a>
421421
</li>
422-
<li class="col-4">
422+
<li class="col-4 linkedin">
423423
<a href="https://www.linkedin.com/in/pankaj-kumar-795b48198/" title="linkedin account">
424424
<i class="fa fa-linkedin"></i>
425425
</a>
@@ -440,25 +440,12 @@ <h1 class="text-center section-heading">
440440
</footer>
441441
<!-- footer section end -->
442442

443-
<a href="#top" id="top-button" class="top-button btn" onclick="jsfunction()">
443+
<a href="#top" id="top-button" class="top-button btn" onclick="top_button()">
444444
<i class="fa fa-angle-up text-center"></i>
445445
</a>
446446

447-
<script type="text/javascript">
448-
btn=document.getElementById("top-button");
449-
window.onscroll=function()
450-
{
451-
if(document.body.scrollTop>20|| document.documentElement.scrollTop>20)
452-
btn.style.display="block";
453-
else
454-
btn.style.display="none";
455-
};
456-
457-
function jsfunction()
458-
{
459-
document.body.scrollTop=0;
460-
document.documentElement.scrollTop=0;
461-
}
462-
</script>
447+
<!-- js files added here -->
448+
<script type="text/javascript" src="js/change_mode.js"></script>
449+
<script type="text/javascript" src="js/index.js"></script>
463450
</body>
464451
</html>

‎js/change_mode.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
var full_screen=document.getElementsByTagName("body");
2+
3+
4+
function change_light_mode()
5+
{
6+
// js for main section start
7+
full_screen[0].style.backgroundColor="#141414";
8+
document.getElementsByClassName("dark")[0].style.display="block";
9+
document.getElementsByClassName("light")[0].style.display="none";
10+
document.getElementsByClassName("intro")[0].style.color="white";
11+
document.getElementsByClassName("intro")[1].style.color="white";
12+
document.getElementsByClassName("section-heading")[0].style.borderColor="white";
13+
// js section for main section end
14+
15+
// js for skill section start
16+
var list=document.querySelectorAll(".strength_list li p");
17+
for(var i=0;i<list.length;i++)
18+
list[i].style.color="white";
19+
var list=document.querySelectorAll(".programming_list li p");
20+
for(var i=0;i<list.length;i++)
21+
list[i].style.color="white";
22+
var list=document.querySelectorAll(".other_list li p");
23+
for(var i=0;i<list.length;i++)
24+
list[i].style.color="white";
25+
26+
// js for skill section end here
27+
28+
29+
// js for project section start
30+
var list=document.querySelectorAll("tbody tr td");
31+
for(var i=0;i<list.length;i++)
32+
list[i].style.color="white";
33+
34+
// js for project section end here
35+
36+
// js for contact me section start
37+
var list=document.querySelectorAll(".contact div .row");
38+
list[0].style.backgroundColor="#141414";
39+
40+
// js for contact me section end
41+
42+
// js for connect me section start
43+
var github=document.querySelectorAll(".github a i")[0];
44+
github.style.color="white";
45+
var linkedin=document.querySelectorAll(".linkedin a i")[0];
46+
linkedin.style.color="white";
47+
48+
// js for connect me section end
49+
50+
}
51+
52+
53+
function change_dark_mode()
54+
{
55+
// js for main section start
56+
full_screen[0].style.backgroundColor="white";
57+
document.getElementsByClassName("dark")[0].style.display="none";
58+
document.getElementsByClassName("light")[0].style.display="block";
59+
document.getElementsByClassName("intro")[0].style.color="black";
60+
document.getElementsByClassName("intro")[1].style.color="black";
61+
document.getElementsByClassName("section-heading")[0].style.borderColor="rgb(0,0,0,0.5)";
62+
// js section for main section end
63+
64+
// js for skill section start
65+
var list=document.querySelectorAll(".strength_list li p");
66+
for(var i=0;i<list.length;i++)
67+
list[i].style.color="black";
68+
var list=document.querySelectorAll(".programming_list li p");
69+
for(var i=0;i<list.length;i++)
70+
list[i].style.color="black";
71+
var list=document.querySelectorAll(".other_list li p");
72+
for(var i=0;i<list.length;i++)
73+
list[i].style.color="black";
74+
// js for skill section end here
75+
76+
77+
// js for project section start
78+
var list=document.querySelectorAll("tbody tr td");
79+
for(var i=0;i<list.length;i++)
80+
list[i].style.color="black";
81+
82+
// js for contact me section start
83+
var list=document.querySelectorAll(".contact div .row");
84+
list[0].style.backgroundColor="white";
85+
// js for contact me section end
86+
87+
88+
var github=document.querySelectorAll(".github a i")[0];
89+
github.style.color="black";
90+
var linkedin=document.querySelectorAll(".linkedin a i")[0];
91+
linkedin.style.color="black";
92+
$(document).ready(function()
93+
{
94+
$(github).hover(function()
95+
{
96+
$(this).css("color","#7456c6");
97+
},
98+
function()
99+
{
100+
$(this).css("color","black");
101+
});
102+
$(linkedin).hover(function()
103+
{
104+
$(this).css("color","#7456c6");
105+
},
106+
function()
107+
{
108+
$(this).css("color","black");
109+
});
110+
});
111+
112+
// js for connect me section end
113+
}

‎js/index.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
btn=document.getElementById("top-button");
2+
window.onscroll=function()
3+
{
4+
if(document.body.scrollTop>20|| document.documentElement.scrollTop>20)
5+
btn.style.display="block";
6+
else
7+
btn.style.display="none";
8+
};
9+
10+
function top_button()
11+
{
12+
document.body.scrollTop=0;
13+
document.documentElement.scrollTop=0;
14+
}

0 commit comments

Comments
 (0)