Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix minor issues with button alignment, correct typos in error messag… #65

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix minor issues with button alignment, correct typos in error messag… #65

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
233 changes: 156 additions & 77 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,181 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contribute</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
<style>
.btn:hover{
background-color:white;
color:#555555;
border: 1px solid #555555;
transition: ease 0.5s;
}
</style>
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contribute</title>
<link
href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/css/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css"
/>
<style>
.btn:hover {
background-color: white;
color: #555555;
border: 1px solid #555555;
transition: ease 0.5s;
}
</style>
</head>

<body>
<header>
<h2><a class="header" href="index.html">Contribute!</a></h2>
<nav>
<li><a class="header" href="about.html">About</a></li>
<li><a class="header" href="contributors.html">Contributors</a></li>
<li><a class="header" href="https://github.com/GabeNedden/contribute" target="_blank">Github</a></li>
</nav>
<h2><a class="header" href="index.html">Contribute!</a></h2>
<nav>
<ul>
<li><a class="header" href="about.html">About</a></li>
<li><a class="header" href="contributors.html">Contributors</a></li>
<li>
<a
class="header"
href="https://github.com/GabeNedden/contribute"
target="_blank"
>Github</a
>
</li>
</ul>
</nav>
</header>

<section class="hero">
<div class="background-image" style="background-image: url(assets/img/main.jpg);"></div>
<div class="hero-content-area">
<h1>Let's Contribute</h1>
<h3>Learn to Contribute to Open-Source!</h3>
</div>
<div
class="background-image"
style="background-image: url(assets/img/main.jpg)"
></div>
<div class="hero-content-area">
<h1>Let's Contribute</h1>
<h3>Learn to Contribute to Open-Source!</h3>
</div>
</section>

<section class="mission">
<h3 class="title">Our Mission</h3>
<p>To help new developers excited to work on Open-Source projects but <a href="https://github.com/GabeNedden/contribute" target="_blank">need help getting started</a>.</p>
<hr>
<h3 class="title">Our Mission</h3>
<p>
To help new developers excited to work on Open-Source projects but
<a href="https://github.com/GabeNedden/contribute" target="_blank"
>need help getting started</a
>.
</p>
<hr />

<ul class="grid">
<li class="small" style="background-image: url(assets/img/scrumBoard.jpg);"></li>
<li class="large" style="background-image: url(assets/img/computerHands.jpg);"></li>
<li class="large" style="background-image: url(assets/img/gitHub.jpg);"></li>
<li class="small" style="background-image: url(assets/img/computerGraph.jpg);"></li>
</ul>
<ul class="grid">
<li
class="small"
style="background-image: url(assets/img/scrumBoard.jpg)"
></li>
<li
class="large"
style="background-image: url(assets/img/computerHands.jpg)"
></li>
<li
class="large"
style="background-image: url(assets/img/gitHub.jpg)"
></li>
<li
class="small"
style="background-image: url(assets/img/computerGraph.jpg)"
></li>
</ul>
</section>

<section class="gridpanel">
<h3 class="title">Here's how to get started in 4 simple steps!</h3>
<hr>
<h3 class="title">Here's how to get started in 4 simple steps!</h3>
<hr />

<ul class="grid">
<li>
<i class="fas fa-folder-open fa-4x"></i>
<h4>Fork & Clone the repo...</h4>
<p><a href="https://docs.github.com/en/get-started/quickstart/fork-a-repo">Fork the repository</a> by clicking on the fork button on top of the repo. Then <a href="https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository">clone it</a> onto your local machine.</p>
</li>
<li>
<i class="fa fa-id-card fa-4x"></i>
<h4>Make the changes...</h4>
<p>Make your changes in the code, preferably on a new branch. Next commit those changes and push them!</p>
</li>
<li>
<i class="fab fa-github-square fa-4x"></i>
<h4>Make a PR...</h4>
<p>Now finally it's time to make a <a href="https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests">Pull Request</a> and wait for it to be merged.</p>
</li>
<li>
<i class="far fa-thumbs-up fa-4x"></i>
<h4>and Approved!</h4>
<p>Once it is merged you will be able to see your contribution on the main repository. It's time to celebrate your first PR! 🥳</p>
</li>
</ul>
<ul>
<li>
<i class="fas fa-folder-open fa-4x"></i>
<h4>Fork & Clone the repo...</h4>
<p>
<a
href="https://docs.github.com/en/get-started/quickstart/fork-a-repo"
>Fork the repository</a
>
by clicking on the fork button on top of the repo. Then
<a
href="https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository"
>clone it</a
>
onto your local machine.
</p>
</li>
<li>
<i class="fa fa-id-card fa-4x"></i>
<h4>Make the changes...</h4>
<p>
Make your changes in the code, preferably on a new branch. Next
commit those changes and push them!
</p>
</li>
<li>
<i class="fab fa-github-square fa-4x"></i>
<h4>Make a PR...</h4>
<p>
Now finally it's time to make a
<a
href="https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests"
>Pull Request</a
>
and wait for it to be merged.
</p>
</li>
<li>
<i class="far fa-thumbs-up fa-4x"></i>
<h4>and Approved!</h4>
<p>
Once it is merged you will be able to see your contribution on the
main repository. It's time to celebrate your first PR! 🥳
</p>
</li>
</ul>
</section>

<section class="contact">
<h3 class="title">Learn More</h3>
<p>To Learn more about Open Source projects and how to contribute to them...</p>
<hr>
<form>
<a href="https://github.com/GabeNedden/contribute" target="_blank" class="btn header">Check us out on Github</a>
</form>
<h3 class="title">Learn More</h3>
<p>
To Learn more about Open Source projects and how to contribute to
them...
</p>
<hr />
<form>
<a
href="https://github.com/GabeNedden/contribute"
target="_blank"
class="btn header"
>Check us out on Github</a
>
</form>
</section>

<footer>
<p class="footer-date"></p>
<p>Designed by Gabriel Zur Nedden</p>
<p class="footer-date"></p>
<p>Designed by Gabriel Zur Nedden</p>
</footer>

<script>
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

const d = new Date();
var ele = document.getElementsByClassName('footer-date')[0];
ele.innerHTML = monthNames[d.getMonth()] + " " + d.getFullYear();
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];

const d = new Date();
var ele = document.getElementsByClassName("footer-date")[0];
ele.innerHTML = monthNames[d.getMonth()] + " " + d.getFullYear();
</script>
</body>
</html>
</body>
</html>