Skip to content

Commit 58f5324

Browse files
vinayakgavariyavinayakgavariya
authored
Merge pull request #13 from ShubhamYadav7063/shubham
added logo, fixed dark mode issue, navbar, cards alignment and text
2 parents 01d6431 + df56b6e commit 58f5324

6 files changed

Lines changed: 273 additions & 196 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 & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -11,77 +11,93 @@
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>
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>
85101
</div>
86102
<div class="grid-item">
87103
<div class="card">
@@ -103,70 +119,95 @@ <h3>Srishti Majumder</h3>
103119
<button class="card-btn">Click Here</button>
104120
</div>
105121
</div>
106-
</div>
107-
<div class="grid-item">
108-
<div class="card">
109-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
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 grows
114-
</p>
115-
<h3>by insert your name here</h3>
116-
<button class="card-btn">Click Here</button>
122+
<div class="grid-item">
123+
<div class="card">
124+
<img
125+
class="card-img"
126+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
127+
alt="Maldives"
128+
/>
129+
<div class="card-content">
130+
<h1 class="card-header">👀( insert your fav emoji)</h1>
131+
<p class="card-text">
132+
When you focus on you YOU grow. When you focus on shit SHIT
133+
grows
134+
</p>
135+
<h3>by insert your name here</h3>
136+
<button class="card-btn">Click Here</button>
137+
</div>
117138
</div>
118139
</div>
119-
</div>
120-
<div class="grid-item">
121-
<div class="card">
122-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
123-
<div class="card-content">
124-
<h1 class="card-header">👀( insert your fav emoji)</h1>
125-
<p class="card-text">
126-
When you focus on you YOU grow. When you focus on shit SHIT grows
127-
</p>
128-
<h3>by insert your name here</h3>
129-
<button class="card-btn">Click Here</button>
140+
<div class="grid-item">
141+
<div class="card">
142+
<img
143+
class="card-img"
144+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
145+
alt="Maldives"
146+
/>
147+
<div class="card-content">
148+
<h1 class="card-header">👀( insert your fav emoji)</h1>
149+
<p class="card-text">
150+
When you focus on you YOU grow. When you focus on shit SHIT
151+
grows
152+
</p>
153+
<h3>by insert your name here</h3>
154+
<button class="card-btn">Click Here</button>
155+
</div>
130156
</div>
131157
</div>
132-
</div>
133-
<div class="grid-item">
134-
<div class="card">
135-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
136-
<div class="card-content">
137-
<h1 class="card-header">👀( insert your fav emoji)</h1>
138-
<p class="card-text">
139-
When you focus on you YOU grow. When you focus on shit SHIT grows
140-
</p>
141-
<h3>by insert your name here</h3>
142-
<button class="card-btn">Click Here</button>
158+
<div class="grid-item">
159+
<div class="card">
160+
<img
161+
class="card-img"
162+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
163+
alt="Maldives"
164+
/>
165+
<div class="card-content">
166+
<h1 class="card-header">👀( insert your fav emoji)</h1>
167+
<p class="card-text">
168+
When you focus on you YOU grow. When you focus on shit SHIT
169+
grows
170+
</p>
171+
<h3>by insert your name here</h3>
172+
<button class="card-btn">Click Here</button>
173+
</div>
143174
</div>
144175
</div>
145-
</div>
146-
<div class="grid-item">
147-
<div class="card">
148-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
149-
<div class="card-content">
150-
<h1 class="card-header">👀( insert your fav emoji)</h1>
151-
<p class="card-text">
152-
When you focus on you YOU grow. When you focus on shit SHIT grows
153-
</p>
154-
<h3>by insert your name here</h3>
155-
<button class="card-btn">Click Here</button>
176+
<div class="grid-item">
177+
<div class="card">
178+
<img
179+
class="card-img"
180+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
181+
alt="Maldives"
182+
/>
183+
<div class="card-content">
184+
<h1 class="card-header">👀( insert your fav emoji)</h1>
185+
<p class="card-text">
186+
When you focus on you YOU grow. When you focus on shit SHIT
187+
grows
188+
</p>
189+
<h3>by insert your name here</h3>
190+
<button class="card-btn">Click Here</button>
191+
</div>
156192
</div>
157193
</div>
158-
</div>
159-
<div class="grid-item">
160-
<div class="card">
161-
<img class="card-img" src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg" alt="Maldives" />
162-
<div class="card-content">
163-
<h1 class="card-header">👀( insert your fav emoji)</h1>
194+
<div class="grid-item">
195+
<div class="card">
196+
<img
197+
class="card-img"
198+
src="https://www.adweek.com/wp-content/uploads/files/blogs/just-do-it-hed-2013.jpg"
199+
alt="Maldives"
200+
/>
201+
<div class="card-content">
202+
<h1 class="card-header">👀( insert your fav emoji)</h1>
164203
<p class="card-text">
165-
When you focus on you YOU grow. When you focus on shit SHIT grows
204+
When you focus on you YOU grow. When you focus on shit SHIT
205+
grows
166206
</p>
167-
168-
<h3>by insert your name here</h3>
169-
<button class="card-btn">Click Here</button>
207+
208+
<h3>by insert your name here</h3>
209+
<button class="card-btn">Click Here</button>
210+
</div>
170211
</div>
171212
</div>
172213
</div>

0 commit comments

Comments
 (0)