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

Enhance SEO and accessibility in index.html #208

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

Enhance SEO and accessibility in index.html #208

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
223 changes: 90 additions & 133 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,160 +2,116 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" initial-scale="" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="A simple project to help first-time contributors participate in open source." />
<meta name="keywords" content="open source, beginner project, contributions" />
<title>Simple Contribution</title>
//I added a website logo....
<link rel="shortcut icon" href="./image/logo_cap.png" type="image/x-icon">
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" href="style/banner.css" />
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.6/css/unicons.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>

<body>
<nav class="navbar">
<div class="navbar-innner-parent">
<img
src="./image/design-files/logo/simple-contribution.svg"
class="navbar-logo-1"
alt="Simple Contribution Logo"
/>
<img
src="./image/design-files/logo/icon-menu.svg"
id="navbar-menu-icon-1"
alt="MENU Icone"
/>
<div class="navbar-link-list">
<div id="navbar-link-list-container">
<div>
<a href="#discription-title-id"
><i class="uil-users-alt navbar-mobile-icon"></i> Meet Our Contributors</a
>
</div>
<div>
<a
href="https://github.com/amyyalex/simple-contribution?tab=readme-ov-file#simple-contribution"
target="_blank"
><i class="uil-question-circle navbar-mobile-icon"></i> About Our Community</a
>
<header>
<nav class="navbar" aria-label="Main Navigation">
<div class="navbar-inner-parent">
<img src="./image/design-files/logo/simple-contribution.svg" class="navbar-logo-1" alt="Simple Contribution Logo" />
<img src="./image/design-files/logo/icon-menu.svg" id="navbar-menu-icon-1" alt="Menu Icon" />
<div class="navbar-link-list">
<div id="navbar-link-list-container">
<div>
<a href="#discription-title-id"><i class="uil-users-alt navbar-mobile-icon"></i> Meet Our Contributors</a>
</div>
<div>
<a href="https://github.com/amyyalex/simple-contribution?tab=readme-ov-file#simple-contribution" target="_blank"><i class="uil-question-circle navbar-mobile-icon"></i> About Our Community</a>
</div>
<div>
<a href="https://discord.gg/JhCdztuAcm" target="_blank"><i class="uil-user-plus navbar-mobile-icon"></i> Join Our Community</a>
</div>
</div>
<div>
<a href="https://discord.gg/JhCdztuAcm" target="_blank"
><i class="uil-user-plus navbar-mobile-icon"></i> Join Our Community</a
>
<div class="navbar-space-evenly-on-mobile" id="navbar-social-media-container">
<a href="https://github.com/amyyalex/simple-contribution" target="_blank"><i class="uil uil-github" id="github-icon"></i></a>
</div>
<div class="navbar-space-evenly-on-mobile" id="google_translate_element"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
}
</script>
</div>

<div class="navbar-space-evenly-on-mobile" id="navbar-social-media-container">
<a href="https://github.com/amyyalex/simple-contribution" target="_blank"
><i class="uil uil-github" id="github-icon"></i
></a>
</div>
<div class="navbar-space-evenly-on-mobile" id="google_translate_element"></div>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{ pageLanguage: 'en' },
'google_translate_element'
);
}
</script>
</div>
</div>
</nav>
<section>
<div class="banner">
<div class="box" id="boxContainer"></div>
<h1>HI CONTRIBUTORS!</h1>
<p>
This is a simple project that will not only help you contribute to your first open source
project, but will also guide you through the entire process,<span
>so whether this is your first time contributing or you're looking for a project to
contribute to, this project is for you!</span
>
</p>
<a href="https://discord.gg/JhCdztuAcm" target="_blank" class="button">
<span class="button_lg">
<span class="button_sl"></span>
<span class="button_text">Join a Community</span>
</span>
</a>
</div>
</section>
<section class="home-content">
<div class="discription-title" id="discription-title-id">
<div class="detail-title">
<h2>Add your Contribution!</h2>
</nav>
</header>
<main>
<section>
<div class="banner">
<div class="box" id="boxContainer"></div>
<h1>HI CONTRIBUTORS!</h1>
<p>
Add your different social media platform and get other contributors to see your work and
follow you!
This is a simple project that will not only help you contribute to your first open source
project, but will also guide you through the entire process,<span>so whether this is your first time contributing or you're looking for a project to contribute to, this project is for you!</span>
</p>
<a href="https://discord.gg/JhCdztuAcm" target="_blank" class="button">
<span class="button_lg">
<span class="button_sl"></span>
<span class="button_text">Join a Community</span>
</span>
</a>
</div>
<div class="search-section">
<div class="search-form">
<input
type="text"
placeholder="Insert a name"
name="search"
id="search"
class="search-input"
/>
<i class="uil uil-search-alt"></i>
</section>
<section class="home-content">
<div class="description-title" id="description-title-id">
<div class="detail-title">
<h2>Add your Contribution!</h2>
<p>Add your different social media platform and get other contributors to see your work and follow you!</p>
</div>
<div class="search-section">
<div class="search-form">
<input type="text" placeholder="Insert a name" name="search" id="search" class="search-input" />
<i class="uil uil-search-alt"></i>
</div>
</div>
</div>
</div>
<!-- Template for contributor cards -->
<template id="contributor-card">
<div class="card" data-aos="fade-up">
<div class="card-details">
<h1></h1>
<h5></h5>
<p></p>
<!-- Template for contributor cards -->
<template id="contributor-card">
<div class="card" data-aos="fade-up">
<div class="card-details">
<h1></h1>
<h5></h5>
<p></p>
</div>
<div class="social-icon">
<!-- Social icons -->
</div>
<p class="connect">Let's Connect!</p>
</div>
<div class="social-icon">
<!-- Social icons will be added here -->
</template>
<!-- END OF TEMPLATE-->
<div class="cards"></div>
<!-- Template for pagination -->
<template id="pages">
<div class="page-details">
<p class=""></p>
</div>
</template>
<!-- END OF TEMPLATE -->
<div class="pagination"></div>
</section>
<section>
<div class="contribute" data-aos="fade-up" data-aos-delay="300">
<div class="contribute-container">
<h1>Thanks for your Contribution</h1>
<hr class="line" />
<p>I appreciate you for contributing and being part of this amazing project, I hope you feel proud of yourself.<br />Don't forget to leave a star⭐! Thank you❤️</p>
<a href="https://github.com/amyyalex/simple-contribution" class="click-button1" target="_blank">Contribute here</a>
</div>
<p class="connect">Let's Connect!</p>
</div>
</template>
<!-- END OF TEMPLATE-->
<div class="cards"></div>
<!-- Template for pagination -->
<template id="pages">
<div class="page-details">
<p class=""></p>
</div>
</template>
<!-- END OF TEMPLATE -->
<div class="pagination"></div>
</section>

<section>
<div class="contribute" data-aos="fade-up" data-aos-delay="300">
<div class="contribute-container">
<h1>Thanks for your Contribution</h1>
<hr class="line" />
<p>
I appreciate you for contributing and being part of this amazing project, I hope you
feel proud of yourself.
<br />
Don't forget to leave a star⭐!
Thank you❤️
</p>
<a
href="https://github.com/amyyalex/simple-contribution"
class="click-button1"
target="_blank"
>
Contribute here
</a>
</div>
</div>
</section>

</section>
</main>
<footer id="footer">
<div class="copyright">Copyright &copy; Designed by Simple Contribution 2024</div>
</footer>
Expand All @@ -167,3 +123,4 @@ <h1>Thanks for your Contribution</h1>
</script>
</body>
</html>