Skip to content

Commit 26a80f2

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #285 from Asymtode712/Feat
added content in help page
2 parents 18bc7e3 + f386d8e commit 26a80f2

File tree

9 files changed

+255
-34
lines changed

9 files changed

+255
-34
lines changed

‎assets/c1.png‎

555 KB
Loading

‎assets/c2.png‎

54.4 KB
Loading

‎assets/c3.png‎

64.3 KB
Loading

‎assets/c4.png‎

58.5 KB
Loading

‎assets/c5.png‎

112 KB
Loading

‎assets/c6.png‎

107 KB
Loading

‎assets/c7.png‎

92.7 KB
Loading

‎pages/help.html‎

Lines changed: 99 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -59,33 +59,80 @@
5959
<a href="blog.html" class="navbar-links">Learn</a>
6060
</div>
6161

62-
<h1 style="font-size: 40px;text-align: center;">Help</h1>
6362
<div class="main-container">
6463
<div class="container-help">
65-
<div class="content-block">
64+
<div class="content-block">
65+
<div class="text-section">
66+
<h3 class="main-heading">Scroll into see how to get most out of this website</h3>
67+
<p class="description">Follow the step by step guide to explore more about GitHub.</p>
68+
</div>
69+
<div class="steps-indicator">
70+
<div class="step-line"></div>
71+
<div class="step-dot" data-step=""></div>
72+
<div class="step-dot" data-step=""></div>
73+
<div class="step-dot" data-step=""></div>
74+
<div class="step-box" style="top: -10px;right: calc(50% + 15px);">STEP 01</div>
75+
<div class="step-box" style="top: calc(50% - 10px);left: calc(50% + 15px)">STEP 02</div>
76+
<div class="step-box" style="bottom: -10px;right: calc(50% + 15px);">STEP 03</div>
77+
</div>
78+
</div>
6679
<div class="steps-clone">
6780
<div class="step-block">
68-
<div class="img-block" style="opacity: 1;"><img src="https://assets.website-files.com/600af88b128ed6334f4b7ef6/600b04a36ffbc054a6c046c6_Sign%20up.svg" loading="lazy" alt="Sign up illustration"></div>
81+
<div class="img-block" style="opacity: 1;"><img src="../assets/c1.png" class="first" loading="lazy" alt="Sign up illustration"></div>
6982
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
70-
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">01</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Open free account</div><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
83+
<div class="content-wrap">
84+
<div class="step-content-block">
85+
<div class="step" style="background-color: rgb(255, 255, 255);">
86+
<div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">01</div>
87+
<div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Explore Profiles</div>
88+
<p>Browse various GitHub profiles that feature creative and well-designed README files. This can provide inspiration for your own profile, you can view their profile by clicking their block, and make sure to leave a star for their readme. Note down few of the elements you like in their profile. You can even use our compare option to <a href="https://recodehive.github.io/awesome-github-profiles/pages/compare.html">compare profiles</a>.</p>
89+
</div>
90+
</div>
91+
</div>
92+
<div class="bg-shadow" style="display: block;"></div>
93+
</div>
94+
</div>
7195
</div>
7296
<div class="step-block">
7397
<div class="scoll-wrap" ><div class="scroll-animate" id="scroll1" ></div><div class="scroll-base"></div></div>
74-
<div class="img-block" style="opacity: 1;"><img src="https://assets.website-files.com/600af88b128ed6334f4b7ef6/600b04a36ffbc054a6c046c6_Sign%20up.svg" loading="lazy" alt="Sign up illustration"></div>
98+
<div class="img-block" style="opacity: 1;"><img src="../assets/c2.png" loading="lazy" alt="Sign up illustration"></div>
7599
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
76-
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">01</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Open free account</div><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
100+
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">02</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Learn & Build</div><p>Now it's your time to build something from the inspiration you got it. Try learning the basic of the github <a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">from here</a>. This includes presise summary of the github learning path from beginner to advanced. Make sure you build an awsome reademe profile by now.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
77101
</div>
78102
<div class="step-block">
79103
<div class="scoll-wrap"><div class="scroll-animate" id="scroll2" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
80-
<div class="img-block" style="opacity: 1;"><img src="https://assets.website-files.com/600af88b128ed6334f4b7ef6/600b04a36ffbc054a6c046c6_Sign%20up.svg" loading="lazy" alt="Sign up illustration"></div>
104+
<div class="img-block" style="opacity: 1;"><img src="../assets/c3.png" loading="lazy" alt="Sign up illustration"></div>
81105
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
82-
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">01</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Open free account</div><p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
106+
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">03</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Add your profile</div><p>Submit your GitHub profile to be listed on the website by clicking on "<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+">Add Your Profile</a>". Follow the provided guidelines to ensure your profile meets the submission criteria. </p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
107+
</div>
108+
<div class="step-block">
109+
<div class="scoll-wrap"><div class="scroll-animate" id="scroll3" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
110+
<div class="img-block" style="opacity: 1;"><img src="../assets/c4.png" loading="lazy" alt="Sign up illustration"></div>
111+
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
112+
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">04</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Join the Organization</div><p>Click on "<a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization">Join the Organization</a>" to become part of the community. This allows you to contribute and engage with others. Get Involved in an inclusive and diverse community. You will enable some github profile features by doing so. </p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
83113
</div>
114+
<div class="step-block">
115+
<div class="scoll-wrap"><div class="scroll-animate" id="scroll4" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
116+
<div class="img-block" style="opacity: 1;"><img src="../assets/c5.png" loading="lazy" alt="Sign up illustration"></div>
117+
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
118+
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">05</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Explore Tools & Events</div><p>This is the place where you can optimize your profile by referring to the video we have created, learning goes to live 1:1 sessions over here: Feel free to explore the new horizon of this area. <a href="https://recodehive.github.io/awesome-github-profiles/pages/events.html">Check it out</a> </p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
119+
</div>
120+
<div class="step-block">
121+
<div class="scoll-wrap"><div class="scroll-animate" id="scroll5" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
122+
<div class="img-block" style="opacity: 1;"><img src="../assets/c6.png" loading="lazy" alt="Sign up illustration"></div>
123+
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
124+
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">06</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Time to Earn More Badges</div><p>Now it's time to earn more GitHub badges by referring to this page, it's quite an easy and long consistent process. Explore this section: <a href="https://recodehive.github.io/awesome-github-profiles/pages/githubbadge.html">Github-Badges</a> </p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
125+
</div>
126+
<div class="step-block">
127+
<div class="scoll-wrap"><div class="scroll-animate" id="scroll6" style="transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg); transform-style: preserve-3d;"></div><div class="scroll-base"></div></div>
128+
<div class="img-block" style="opacity: 1;"><img src="../assets/c7.png" class="first" loading="lazy" alt="Sign up illustration"></div>
129+
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
130+
<div class="content-wrap"><div class="step-content-block"><div class="step" style="background-color: rgb(255, 255, 255);"><div class="text-block"><div class="label" style="color: rgb(0, 108, 208);">07</div><div class="content" style="color: rgb(18, 18, 18);"><div class="heading">Book a consultation</div><p>Book a consultation with me to explore more about GitHub and how to unlock future potential with the GitHub profile you created.</p></div></div></div><div class="bg-shadow" style="display: block;"></div></div></div>
131+
</div>
84132

85133
</div>
86134
</div>
87135
</div>
88-
</div>
89136

90137

91138
<footer id="Contact" class="footer-2">
@@ -154,20 +201,57 @@ <h5>
154201
const contentDiv = document.getElementById('scroll2');
155202
contentDiv.style.height='100%'
156203
}
204+
function active2(){
205+
const contentDiv = document.getElementById('scroll3');
206+
contentDiv.style.height='100%'
207+
}
208+
function active3(){
209+
const contentDiv = document.getElementById('scroll4');
210+
contentDiv.style.height='100%'
211+
}
212+
function active4(){
213+
const contentDiv = document.getElementById('scroll5');
214+
contentDiv.style.height='100%'
215+
}
216+
function active5(){
217+
const contentDiv = document.getElementById('scroll6');
218+
contentDiv.style.height='100%'
219+
}
220+
157221
document.addEventListener('DOMContentLoaded', () => {
158222
const contentDiv = document.getElementById('scroll1');
159223
const contentDiv1 = document.getElementById('scroll2');
224+
const contentDiv2 = document.getElementById('scroll3');
225+
const contentDiv3 = document.getElementById('scroll4');
226+
const contentDiv4 = document.getElementById('scroll5');
227+
const contentDiv5 = document.getElementById('scroll6');
160228
contentDiv.style.height='0%'
161229
contentDiv1.style.height='0%'
230+
contentDiv2.style.height='0%'
231+
contentDiv3.style.height='0%'
232+
contentDiv4.style.height='0%'
233+
contentDiv5.style.height='0%'
162234
// Function to call when the content div comes into view
163235
function handleIntersection(entries, observer) {
164236
entries.forEach(entry => {
165237
if (entry.isIntersecting) {
166238
// Call your function here
167239
if(entry.target.id=="scroll1"){
168240
active();
169-
}else{
170-
active1()
241+
}else if(entry.target.id=="scroll2"){
242+
active1();
243+
}
244+
else if(entry.target.id=="scroll3"){
245+
active2();
246+
}
247+
else if(entry.target.id=="scroll4"){
248+
active3();
249+
}
250+
else if(entry.target.id=="scroll5"){
251+
active4();
252+
}
253+
else{
254+
active5();
171255
}
172256

173257
// Optionally, stop observing after the first intersection
@@ -186,6 +270,10 @@ <h5>
186270
// Start observing the target element
187271
observer.observe(contentDiv);
188272
observer.observe(contentDiv1);
273+
observer.observe(contentDiv2);
274+
observer.observe(contentDiv3);
275+
observer.observe(contentDiv4);
276+
observer.observe(contentDiv5);
189277

190278
// Example function to call when content div is in view
191279

‎styles/help.css‎

Lines changed: 156 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,116 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
13
.container-help {
2-
position: relative;
3-
display: flex;
4-
width: 100%;
5-
margin-bottom: 10%;
6-
padding-bottom: 0px;
7-
flex-direction: column;
8-
align-items: flex-start;
9-
}
10-
.main-container{
11-
width: 100vw;
12-
display: flex;
13-
justify-content: center;
4+
display: flex;
5+
font-family: "Poppins", sans-serif;
6+
flex-direction: column;
7+
align-items: center;
148
}
15-
.container-help .content-block {
16-
position: sticky;
17-
top: 0px;
18-
display: flex;
19-
flex-direction: column;
20-
justify-content: flex-start;
21-
align-items: center;
22-
}
9+
10+
.content-block {
11+
display: flex;
12+
gap: 200px;
13+
justify-content: center;
14+
align-items: center;
15+
width: 80%;
16+
margin-top: 60px;
17+
margin-bottom: 30px;
18+
background-color: #fff;
19+
height: 450px;
20+
}
21+
22+
body.dark-mode .content-block{
23+
background-color: #333;
24+
25+
}
26+
27+
.main-heading {
28+
font-size: 48px;
29+
font-weight: 500;
30+
color: #121212;
31+
margin-bottom: 20px;
32+
width: 450px;
33+
word-wrap: break-word;
34+
}
35+
36+
body.dark-mode .main-heading{
37+
color: #fff;
38+
}
39+
40+
.description {
41+
font-size: 16px;
42+
font-family: "Poppins", sans-serif;
43+
font-weight: 400;
44+
color: #666;
45+
}
46+
47+
body.dark-mode .description{
48+
color: #c0c0c0;
49+
}
50+
51+
.steps-indicator {
52+
position: relative;
53+
height: 300px;
54+
}
55+
56+
.step-line {
57+
position: absolute;
58+
left: 50%;
59+
top: 0;
60+
bottom: 0;
61+
width: 4px;
62+
background-color: #0066cc;
63+
}
64+
65+
body.dark-mode .step-line{
66+
background-color: #c0c0c0;
67+
}
68+
69+
.step-dot {
70+
position: absolute;
71+
left: 50%;
72+
width: 20px;
73+
height: 20px;
74+
background-color: #0066cc;
75+
border-radius: 50%;
76+
transform: translateX(-40%);
77+
}
78+
79+
body.dark-mode .step-dot{
80+
background-color: #c0c0c0;
81+
}
82+
83+
.step-dot::after {
84+
content: attr(data-step);
85+
position: absolute;
86+
left: 30px;
87+
top: 50%;
88+
transform: translateY(-50%);
89+
color: #0066cc;
90+
font-weight: bold;
91+
}
92+
93+
.step-dot:nth-child(2) { top: 0; }
94+
.step-dot:nth-child(3) { top: 50%; }
95+
.step-dot:nth-child(4) { bottom: 0; }
96+
97+
.step-box {
98+
position: absolute;
99+
background-color: #fff;
100+
box-shadow: 7px 7px 20px 0 rgba(18, 18, 18, 0.2);
101+
padding: 16px;
102+
border-radius: 16px;
103+
font-size: 12px;
104+
font-weight: 700;
105+
color: #0066cc;
106+
white-space: nowrap;
107+
}
108+
109+
body.dark-mode .step-box{
110+
background-color: #555;
111+
color: #fff;
112+
}
113+
23114
.steps-clone {
24115
position: relative;
25116
display: flex;
@@ -77,7 +168,9 @@
77168
margin-bottom: 0px;
78169
align-self: center;
79170
order: 2;
80-
}.step-block {
171+
}
172+
173+
.step-block {
81174
position: relative;
82175
display: flex;
83176
width: 100vw !important;
@@ -88,6 +181,7 @@
88181
align-items: center;
89182
align-content: center;
90183
}
184+
91185
@media only screen and (max-width:700px){
92186
.step-block{
93187
flex-direction: column;
@@ -124,17 +218,56 @@
124218
z-index: 1;
125219
height: 100%;
126220
}
127-
.img-block{
221+
.img-block {
128222
width: 50%;
129223
display: flex;
130224
justify-content: center;
131225
align-items: center;
132226
}
227+
228+
.img-block img{
229+
width: 350px;
230+
}
231+
232+
.img-block .first{
233+
width: 450px;
234+
}
235+
236+
.content .heading{
237+
font-size: 20px;
238+
}
239+
133240
.scroll-animate {
134241
position: absolute;
135242
top: 0px;
136243
width: 6px;
137244
transition: all 1.5s ease-out;
138245
z-index: 0;
139246
background-color: #3b9cdd !important;
140-
}
247+
}
248+
249+
body.dark-mode .text-block{
250+
background-color: #333;
251+
}
252+
253+
body.dark-mode .text-block .content{
254+
color: #f0f0f0 !important;
255+
}
256+
257+
body.dark-mode .text-block .content a{
258+
color: #3b9cdd;
259+
}
260+
261+
body.dark-mode .scroll-wrap{
262+
border: none !important;
263+
background-color: #fff !important;
264+
}
265+
266+
body.dark-mode .scroll-animate{
267+
border: none !important;
268+
background-color: #c0c0c0 !important;
269+
}
270+
271+
body.dark-mode .dot{
272+
background-color: #c0c0c0 !important;
273+
}

0 commit comments

Comments
 (0)