Skip to content

Commit 5fc708d

Browse files
ShubhamYadav7063ShubhamYadav7063
committed
added logo, fixed dark mode issue, navbar, cards alignment and text
1 parent cbac931 commit 5fc708d

6 files changed

Lines changed: 273 additions & 207 deletions

File tree

‎.DS_Store‎

6 KB
Binary file not shown.

‎assets/.DS_Store‎

6 KB
Binary file not shown.

‎assets/blueQuote.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎dark.js‎

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,49 @@
11

2-
let darkMode=false;
3-
var dark=document.getElementById("dark");
4-
var moon=document.getElementById("moon");
5-
var sun=document.getElementById("sun");
6-
var nav=document.getElementById("nav");
7-
var body=document.getElementById("body");
8-
9-
dark.addEventListener('click',handleCLick)
10-
11-
function handleCLick(){
12-
if(darkMode===false){
13-
darkMode=true;
14-
moon.style.visibility="hidden";
15-
sun.style.visibility="visible";
16-
dark.style.backgroundColor="white";
17-
18-
body.style.backgroundColor="#414758"
19-
nav.style.backgroundColor="#28292e"
20-
// console.log(nav);
21-
}
22-
else{
23-
darkMode=false;
24-
dark.style.backgroundColor="#2e2f30";
25-
body.style.backgroundColor="#eee"
26-
sun.style.visibility="hidden";
27-
moon.style.visibility="visible";
28-
nav.style.backgroundColor="#dcdee6";
29-
30-
}
31-
32-
33-
// console.log(darkMode);
34-
}
2+
let darkMode = false;
3+
var dark = document.getElementById("dark");
4+
var moon = document.getElementById("moon");
5+
var sun = document.getElementById("sun");
6+
var nav = document.getElementById("nav");
7+
var body = document.getElementById("body");
358

9+
dark.addEventListener('click', handleCLick)
3610

11+
function handleCLick() {
12+
if (darkMode === false) {
13+
darkMode = true;
14+
moon.style.visibility = "hidden";
15+
sun.style.visibility = "visible";
16+
dark.style.backgroundColor = "white";
17+
body.style.backgroundColor = "#414758"
18+
nav.style.backgroundColor = "#28292e"
19+
}
20+
else {
21+
darkMode = false;
22+
dark.style.backgroundColor = "#2e2f30";
23+
body.style.backgroundColor = "#eee"
24+
sun.style.visibility = "hidden";
25+
moon.style.visibility = "visible";
26+
nav.style.backgroundColor = "#dcdee6";
3727

28+
}
29+
}
3830
// function handleClick(){
3931
// darkMode=true
4032
// console.log(darkMode)
41-
// }
33+
// }
34+
35+
// Code for sticky navbar
36+
window.onscroll = function() {myNav()};
37+
38+
var navbar = document.getElementById("nav");
39+
40+
var sticky = navbar.offsetTop;
41+
42+
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
43+
function myNav() {
44+
if (window.pageYOffset >= sticky) {
45+
navbar.classList.add("sticky")
46+
} else {
47+
navbar.classList.remove("sticky");
48+
}
49+
}

‎index.html‎

Lines changed: 152 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -11,154 +11,184 @@
1111
<body id="body">
1212
<div class="navbar" id="nav">
1313
<div class="leftNav">
14-
<h1 class="logo"> Blue-Quote</h1>
14+
<a href="#"><img class="logo" src="assets/blueQuote.svg" /></a>
1515
</div>
1616
<div class="right">
17-
<div class="box" id="dark" >
18-
<div class="moon" id="moon">
19-
<img src="./assets/Moon.png" class="dark-mode">
20-
<h4 class="dark-text">Night</h4>
17+
<div class="box" id="dark">
18+
<div class="moon" id="moon">
19+
<img src="./assets/Moon.png" class="dark-mode" />
20+
<h4 class="dark-text">Dark Mode</h4>
2121
</div>
2222
<div class="sun" id="sun">
23-
<h4 class="light-text">Day</h4>
24-
<img src="./assets/Sun.png" class="light-mode">
23+
<h4 class="light-text">Light Mode</h4>
24+
<img src="./assets/Sun.png" class="light-mode" />
2525
</div>
2626
</div>
27-
28-
2927
</div>
3028
</div>
31-
<div class="main">
32-
<h1 class="title">Blue-Quote</h1>
33-
34-
<h3 class="subtitle">The quotes which can blue your mind.</h3>
35-
36-
</div>
37-
38-
<div class="grid">
39-
<div class="grid-item">
40-
<div class="card">
41-
42-
<img class="card-img" src="https://imageproxy.ifunny.co/crop:x-20,resize:640x,quality:90x75/images/519280f60d8d843822f7b2ae99729ecf65a15e4c70e63c720e5869ab26142725_1.jpg" alt="Rome" />
43-
<div class="card-content">
44-
<h1 class="card-header">🏹</h1>
45-
<p class="card-text">
46-
When you focus on you YOU grow. When you focus on shit SHIT grows
47-
</p>
48-
<h3>by anonymous</h3>
49-
<button class="card-btn">Click Here</button>
29+
<div class="container">
30+
<!-- <div class="main">
31+
<h1 class="title">blueQuote</h1>
32+
<h3 class="subtitle">The quotes which can blue your mind.</h3>
33+
</div> -->
34+
35+
<div class="grid">
36+
<div class="grid-item">
37+
<div class="card">
38+
<img
39+
class="card-img"
40+
src="https://imageproxy.ifunny.co/crop:x-20,resize:640x,quality:90x75/images/519280f60d8d843822f7b2ae99729ecf65a15e4c70e63c720e5869ab26142725_1.jpg"
41+
alt="Rome"
42+
/>
43+
<!-- <img class = "card-img" src="/assets/blueQuote.svg" alt=""> -->
44+
<div class="card-content">
45+
<h1 class="card-header">🏹</h1>
46+
<p class="card-text">
47+
When you focus on you YOU grow. When you focus on shit SHIT
48+
grows
49+
</p>
50+
<h3>by anonymous</h3>
51+
<button class="card-btn">Click Here</button>
52+
</div>
5053
</div>
5154
</div>
52-
</div>
53-
<div class="grid-item">
54-
<div class="card">
55-
<img
56-
class="card-img"
57-
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
58-
alt="Grand Canyon"
59-
/>
60-
<div class="card-content">
61-
<h1 class="card-header">👀</h1>
62-
<p class="card-text">
63-
Just Do It.
64-
</p>
65-
<h3>not by pious</h3>
66-
<button class="card-btn">Click Here</button>
55+
<div class="grid-item">
56+
<div class="card">
57+
<img
58+
class="card-img"
59+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
60+
alt="Grand Canyon"
61+
/>
62+
<div class="card-content">
63+
<h1 class="card-header">👀</h1>
64+
<p class="card-text">Just Do It.</p>
65+
<h3>not by pious</h3>
66+
<button class="card-btn">Click Here</button>
67+
</div>
6768
</div>
6869
</div>
69-
</div>
70-
<div class="grid-item">
71-
<div class="card">
72-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
73-
<div class="card-content">
74-
<h1 class="card-header">💩</h1>
75-
76-
<button class="card-btn">Life is shit if you don't flush.</button>
77-
<h1 class="card-header">👀( insert your fav emoji)</h1>
78-
<p class="card-text">
79-
When you focus on you YOU grow. When you focus on shit SHIT grows
80-
</p>
81-
<h3>Gaurav Kumar</h3>
82-
<button class="card-btn">Click Here</button>
70+
71+
<div class="grid-item">
72+
<div class="card">
73+
<img
74+
class="card-img"
75+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
76+
alt="Maldives"
77+
/>
78+
<div class="card-content">
79+
<h1 class="card-header">💩</h1>
80+
<p class="card-text">Life is shit if you don't flush.</p>
81+
<h3>Gaurav Kumar</h3>
82+
<button class="card-btn">Click Here</button>
83+
</div>
8384
</div>
8485
</div>
85-
</div>
86-
<div class="grid-item">
87-
<div class="card">
88-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
89-
<div class="card-content">
90-
<h1 class="card-header">👀( insert your fav emoji)</h1>
91-
<p class="card-text">
92-
When you focus on you YOU grow. When you focus on shit SHIT grows
93-
</p>
94-
<h3>by insert your name here</h3>
95-
<button class="card-btn">Click Here</button>
86+
<div class="grid-item">
87+
<div class="card">
88+
<img
89+
class="card-img"
90+
src="https://cdn.pixabay.com/photo/2017/05/24/07/58/australia-2339797_1280.jpg"
91+
alt="Maldives"
92+
/>
93+
<div class="card-content">
94+
<h1 class="card-header">✨</h1>
95+
<p class="card-text">
96+
Don’t just sit there. Do something. The answers will follow.
97+
</p>
98+
<h3>by Shubham Yadav</h3>
99+
<button class="card-btn">Click Here</button>
100+
</div>
96101
</div>
97102
</div>
98-
</div>
99-
<div class="grid-item">
100-
<div class="card">
101-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
102-
<div class="card-content">
103-
<h1 class="card-header">👀( insert your fav emoji)</h1>
104-
<p class="card-text">
105-
When you focus on you YOU grow. When you focus on shit SHIT grows
106-
</p>
107-
<h3>by insert your name here</h3>
108-
<button class="card-btn">Click Here</button>
103+
<div class="grid-item">
104+
<div class="card">
105+
<img
106+
class="card-img"
107+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
108+
alt="Maldives"
109+
/>
110+
<div class="card-content">
111+
<h1 class="card-header">👀( insert your fav emoji)</h1>
112+
<p class="card-text">
113+
When you focus on you YOU grow. When you focus on shit SHIT
114+
grows
115+
</p>
116+
<h3>by insert your name here</h3>
117+
<button class="card-btn">Click Here</button>
118+
</div>
109119
</div>
110120
</div>
111-
</div>
112-
<div class="grid-item">
113-
<div class="card">
114-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
115-
<div class="card-content">
116-
<h1 class="card-header">👀( insert your fav emoji)</h1>
117-
<p class="card-text">
118-
When you focus on you YOU grow. When you focus on shit SHIT grows
119-
</p>
120-
<h3>by insert your name here</h3>
121-
<button class="card-btn">Click Here</button>
121+
<div class="grid-item">
122+
<div class="card">
123+
<img
124+
class="card-img"
125+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
126+
alt="Maldives"
127+
/>
128+
<div class="card-content">
129+
<h1 class="card-header">👀( insert your fav emoji)</h1>
130+
<p class="card-text">
131+
When you focus on you YOU grow. When you focus on shit SHIT
132+
grows
133+
</p>
134+
<h3>by insert your name here</h3>
135+
<button class="card-btn">Click Here</button>
136+
</div>
122137
</div>
123138
</div>
124-
</div>
125-
<div class="grid-item">
126-
<div class="card">
127-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
128-
<div class="card-content">
129-
<h1 class="card-header">👀( insert your fav emoji)</h1>
130-
<p class="card-text">
131-
When you focus on you YOU grow. When you focus on shit SHIT grows
132-
</p>
133-
<h3>by insert your name here</h3>
134-
<button class="card-btn">Click Here</button>
139+
<div class="grid-item">
140+
<div class="card">
141+
<img
142+
class="card-img"
143+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
144+
alt="Maldives"
145+
/>
146+
<div class="card-content">
147+
<h1 class="card-header">👀( insert your fav emoji)</h1>
148+
<p class="card-text">
149+
When you focus on you YOU grow. When you focus on shit SHIT
150+
grows
151+
</p>
152+
<h3>by insert your name here</h3>
153+
<button class="card-btn">Click Here</button>
154+
</div>
135155
</div>
136156
</div>
137-
</div>
138-
<div class="grid-item">
139-
<div class="card">
140-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
141-
<div class="card-content">
142-
<h1 class="card-header">👀( insert your fav emoji)</h1>
143-
<p class="card-text">
144-
When you focus on you YOU grow. When you focus on shit SHIT grows
145-
</p>
146-
<h3>by insert your name here</h3>
147-
<button class="card-btn">Click Here</button>
157+
<div class="grid-item">
158+
<div class="card">
159+
<img
160+
class="card-img"
161+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
162+
alt="Maldives"
163+
/>
164+
<div class="card-content">
165+
<h1 class="card-header">👀( insert your fav emoji)</h1>
166+
<p class="card-text">
167+
When you focus on you YOU grow. When you focus on shit SHIT
168+
grows
169+
</p>
170+
<h3>by insert your name here</h3>
171+
<button class="card-btn">Click Here</button>
172+
</div>
148173
</div>
149174
</div>
150-
</div>
151-
<div class="grid-item">
152-
<div class="card">
153-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
154-
<div class="card-content">
155-
<h1 class="card-header">👀( insert your fav emoji)</h1>
175+
<div class="grid-item">
176+
<div class="card">
177+
<img
178+
class="card-img"
179+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
180+
alt="Maldives"
181+
/>
182+
<div class="card-content">
183+
<h1 class="card-header">👀( insert your fav emoji)</h1>
156184
<p class="card-text">
157-
When you focus on you YOU grow. When you focus on shit SHIT grows
185+
When you focus on you YOU grow. When you focus on shit SHIT
186+
grows
158187
</p>
159-
160-
<h3>by insert your name here</h3>
161-
<button class="card-btn">Click Here</button>
188+
189+
<h3>by insert your name here</h3>
190+
<button class="card-btn">Click Here</button>
191+
</div>
162192
</div>
163193
</div>
164194
</div>

0 commit comments

Comments
 (0)