Skip to content

Commit

Permalink
Merge pull request #285 from Asymtode712/Feat
Browse files Browse the repository at this point in the history 
added content in help page
  • Loading branch information
@sanjay-kv
sanjay-kv authored Aug 10, 2024
2 parents 18bc7e3 + f386d8e commit 26a80f2
Show file tree
Hide file tree
Showing 9 changed files with 255 additions and 34 deletions.
Binary file added assets/c1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/c2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/c3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/c4.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/c5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/c6.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/c7.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 99 additions & 11 deletions pages/help.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,33 +59,80 @@
<a href="blog.html" class="navbar-links">Learn</a>
</div>

<h1 style="font-size: 40px;text-align: center;">Help</h1>
<div class="main-container">
<div class="container-help">
<div class="content-block">
<div class="content-block">
<div class="text-section">
<h3 class="main-heading">Scroll into see how to get most out of this website</h3>
<p class="description">Follow the step by step guide to explore more about GitHub.</p>
</div>
<div class="steps-indicator">
<div class="step-line"></div>
<div class="step-dot" data-step=""></div>
<div class="step-dot" data-step=""></div>
<div class="step-dot" data-step=""></div>
<div class="step-box" style="top: -10px;right: calc(50% + 15px);">STEP 01</div>
<div class="step-box" style="top: calc(50% - 10px);left: calc(50% + 15px)">STEP 02</div>
<div class="step-box" style="bottom: -10px;right: calc(50% + 15px);">STEP 03</div>
</div>
</div>
<div class="steps-clone">
<div class="step-block">
<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>
<div class="img-block" style="opacity: 1;"><img src="../assets/c1.png" class="first" loading="lazy" alt="Sign up illustration"></div>
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
<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>
<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">Explore Profiles</div>
<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>
</div>
</div>
</div>
<div class="bg-shadow" style="display: block;"></div>
</div>
</div>
</div>
<div class="step-block">
<div class="scoll-wrap" ><div class="scroll-animate" id="scroll1" ></div><div class="scroll-base"></div></div>
<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>
<div class="img-block" style="opacity: 1;"><img src="../assets/c2.png" loading="lazy" alt="Sign up illustration"></div>
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
<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>
<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>
</div>
<div class="step-block">
<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>
<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>
<div class="img-block" style="opacity: 1;"><img src="../assets/c3.png" loading="lazy" alt="Sign up illustration"></div>
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
<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>
<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>
</div>
<div class="step-block">
<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>
<div class="img-block" style="opacity: 1;"><img src="../assets/c4.png" loading="lazy" alt="Sign up illustration"></div>
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
<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>
</div>
<div class="step-block">
<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>
<div class="img-block" style="opacity: 1;"><img src="../assets/c5.png" loading="lazy" alt="Sign up illustration"></div>
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
<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>
</div>
<div class="step-block">
<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>
<div class="img-block" style="opacity: 1;"><img src="../assets/c6.png" loading="lazy" alt="Sign up illustration"></div>
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
<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>
</div>
<div class="step-block">
<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>
<div class="img-block" style="opacity: 1;"><img src="../assets/c7.png" class="first" loading="lazy" alt="Sign up illustration"></div>
<div class="dot" style="background-color: rgb(0, 108, 208); width: 24px; height: 24px;"></div>
<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>
</div>

</div>
</div>
</div>
</div>


<footer id="Contact" class="footer-2">
Expand Down Expand Up @@ -154,20 +201,57 @@ <h5>
const contentDiv = document.getElementById('scroll2');
contentDiv.style.height='100%'
}
function active2(){
const contentDiv = document.getElementById('scroll3');
contentDiv.style.height='100%'
}
function active3(){
const contentDiv = document.getElementById('scroll4');
contentDiv.style.height='100%'
}
function active4(){
const contentDiv = document.getElementById('scroll5');
contentDiv.style.height='100%'
}
function active5(){
const contentDiv = document.getElementById('scroll6');
contentDiv.style.height='100%'
}

document.addEventListener('DOMContentLoaded', () => {
const contentDiv = document.getElementById('scroll1');
const contentDiv1 = document.getElementById('scroll2');
const contentDiv2 = document.getElementById('scroll3');
const contentDiv3 = document.getElementById('scroll4');
const contentDiv4 = document.getElementById('scroll5');
const contentDiv5 = document.getElementById('scroll6');
contentDiv.style.height='0%'
contentDiv1.style.height='0%'
contentDiv2.style.height='0%'
contentDiv3.style.height='0%'
contentDiv4.style.height='0%'
contentDiv5.style.height='0%'
// Function to call when the content div comes into view
function handleIntersection(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Call your function here
if(entry.target.id=="scroll1"){
active();
}else{
active1()
}else if(entry.target.id=="scroll2"){
active1();
}
else if(entry.target.id=="scroll3"){
active2();
}
else if(entry.target.id=="scroll4"){
active3();
}
else if(entry.target.id=="scroll5"){
active4();
}
else{
active5();
}

// Optionally, stop observing after the first intersection
Expand All @@ -186,6 +270,10 @@ <h5>
// Start observing the target element
observer.observe(contentDiv);
observer.observe(contentDiv1);
observer.observe(contentDiv2);
observer.observe(contentDiv3);
observer.observe(contentDiv4);
observer.observe(contentDiv5);

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

Expand Down
179 changes: 156 additions & 23 deletions styles/help.css
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,116 @@
@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');

.container-help {
position: relative;
display: flex;
width: 100%;
margin-bottom: 10%;
padding-bottom: 0px;
flex-direction: column;
align-items: flex-start;
}
.main-container{
width: 100vw;
display: flex;
justify-content: center;
display: flex;
font-family: "Poppins", sans-serif;
flex-direction: column;
align-items: center;
}
.container-help .content-block {
position: sticky;
top: 0px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}

.content-block {
display: flex;
gap: 200px;
justify-content: center;
align-items: center;
width: 80%;
margin-top: 60px;
margin-bottom: 30px;
background-color: #fff;
height: 450px;
}

body.dark-mode .content-block{
background-color: #333;

}

.main-heading {
font-size: 48px;
font-weight: 500;
color: #121212;
margin-bottom: 20px;
width: 450px;
word-wrap: break-word;
}

body.dark-mode .main-heading{
color: #fff;
}

.description {
font-size: 16px;
font-family: "Poppins", sans-serif;
font-weight: 400;
color: #666;
}

body.dark-mode .description{
color: #c0c0c0;
}

.steps-indicator {
position: relative;
height: 300px;
}

.step-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background-color: #0066cc;
}

body.dark-mode .step-line{
background-color: #c0c0c0;
}

.step-dot {
position: absolute;
left: 50%;
width: 20px;
height: 20px;
background-color: #0066cc;
border-radius: 50%;
transform: translateX(-40%);
}

body.dark-mode .step-dot{
background-color: #c0c0c0;
}

.step-dot::after {
content: attr(data-step);
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
color: #0066cc;
font-weight: bold;
}

.step-dot:nth-child(2) { top: 0; }
.step-dot:nth-child(3) { top: 50%; }
.step-dot:nth-child(4) { bottom: 0; }

.step-box {
position: absolute;
background-color: #fff;
box-shadow: 7px 7px 20px 0 rgba(18, 18, 18, 0.2);
padding: 16px;
border-radius: 16px;
font-size: 12px;
font-weight: 700;
color: #0066cc;
white-space: nowrap;
}

body.dark-mode .step-box{
background-color: #555;
color: #fff;
}

.steps-clone {
position: relative;
display: flex;
Expand Down Expand Up @@ -77,7 +168,9 @@
margin-bottom: 0px;
align-self: center;
order: 2;
}.step-block {
}

.step-block {
position: relative;
display: flex;
width: 100vw !important;
Expand All @@ -88,6 +181,7 @@
align-items: center;
align-content: center;
}

@media only screen and (max-width:700px){
.step-block{
flex-direction: column;
Expand Down Expand Up @@ -124,17 +218,56 @@
z-index: 1;
height: 100%;
}
.img-block{
.img-block {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.img-block img{
width: 350px;
}

.img-block .first{
width: 450px;
}

.content .heading{
font-size: 20px;
}

.scroll-animate {
position: absolute;
top: 0px;
width: 6px;
transition: all 1.5s ease-out;
z-index: 0;
background-color: #3b9cdd !important;
}
}

body.dark-mode .text-block{
background-color: #333;
}

body.dark-mode .text-block .content{
color: #f0f0f0 !important;
}

body.dark-mode .text-block .content a{
color: #3b9cdd;
}

body.dark-mode .scroll-wrap{
border: none !important;
background-color: #fff !important;
}

body.dark-mode .scroll-animate{
border: none !important;
background-color: #c0c0c0 !important;
}

body.dark-mode .dot{
background-color: #c0c0c0 !important;
}

0 comments on commit 26a80f2

Please sign in to comment.