Skip to content

Commit

Permalink
Restructured and renamed the files
Browse files Browse the repository at this point in the history
Restructured and renamed the files for better understanding
  • Loading branch information
madhurimarawat authored Jul 27, 2024
1 parent 739e65c commit 659243b
Show file tree
Hide file tree
Showing 5 changed files with 547 additions and 233 deletions.
90 changes: 52 additions & 38 deletions About.html
Original file line number Diff line number Diff line change
@@ -1,32 +1,20 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Toolkit</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
h3 {
text-align: center;
color: #007bff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
</style>
<link href="css/about.css" rel="stylesheet">
</head>

<body>

<nav class="navbar navbar-expand-lg bg-primary">
<a>
<img src="GitHub Logo.png" height="50" width = "70">
<img src="GitHub Logo.png" height="50" width="70">
</a>
<div class="container-fluid">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
Expand All @@ -36,12 +24,12 @@
<li class="nav-item">
<a class="nav-link" href="About.html">GitHub Toolkit</a>
</li>

</ul>

</div>
</nav>

<br>
<h3>GitHub Toolkit</h3>
<br>
Expand All @@ -53,9 +41,10 @@ <h3>GitHub Toolkit</h3>
<div class="card-body">
<h5 class="card-title">GitHub</h5>
<br>
<img src="GitHub Logo.png" class="card-img-top" height = "140" alt = "GitHub Image">
<img src="GitHub Logo.png" class="card-img-top" height="140" alt="GitHub Image">
<br><br>
<p class="card-text">GitHub is a web-based platform for version control using Git. It facilitates collaborative software development and project management.</p>
<p class="card-text">GitHub is a web-based platform for version control using Git. It
facilitates collaborative software development and project management.</p>
</div>
</div>
</div>
Expand All @@ -64,17 +53,23 @@ <h5 class="card-title">GitHub</h5>
<div class="card-body">
<br>
<h5 class="card-title">Profile</h5>
<img src="https://miro.medium.com/v2/resize:fit:564/1*Erk4NawQOHkf4wSN7JmB_A.jpeg" height = "140" class="card-img-top" alt="Profile Image">
<br><br><p class="card-text">A GitHub profile displays a user's repositories, contributions, and activity. It serves as a resume for showcasing skills and projects.</p>
<img src="https://miro.medium.com/v2/resize:fit:564/1*Erk4NawQOHkf4wSN7JmB_A.jpeg" height="140"
class="card-img-top" alt="Profile Image">
<br><br>
<p class="card-text">A GitHub profile displays a user's repositories, contributions, and
activity. It serves as a resume for showcasing skills and projects.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Followers</h5><br>
<img src="https://static.vecteezy.com/system/resources/previews/000/362/906/original/vector-a-leader-giving-inspiration-and-motivation-to-his-followers.jpg" height = "140" class="card-img-top" alt="Followers Image">
<br><br><p class="card-text">Followers on GitHub are users who follow another user to stay updated on their activities, new repositories, projects, and contributions.</p>
<img src="https://static.vecteezy.com/system/resources/previews/000/362/906/original/vector-a-leader-giving-inspiration-and-motivation-to-his-followers.jpg"
height="140" class="card-img-top" alt="Followers Image">
<br><br>
<p class="card-text">Followers on GitHub are users who follow another user to stay updated on
their activities, new repositories, projects, and contributions.</p>
</div>
</div>
</div>
Expand All @@ -84,26 +79,35 @@ <h5 class="card-title">Followers</h5><br>
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Repository</h5><br>
<img src="https://clipart-library.com/data_images/308974.jpg" height = "140" class="card-img-top" alt="Repository Image">
<br><br><p class="card-text">A GitHub repository is a storage space for version-controlled files and project resources. It supports collaborative development and sharing.</p>
<img src="https://clipart-library.com/data_images/308974.jpg" height="140" class="card-img-top"
alt="Repository Image">
<br><br>
<p class="card-text">A GitHub repository is a storage space for version-controlled files and
project resources. It supports collaborative development and sharing.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Topics</h5><br>
<img src="https://larpbook.com/wp-content/uploads/2016/01/fotolia_80733213_subscription_monthly_m-e1451762140487.jpg" class="card-img-top" alt="Topics Image">
<br><br><p class="card-text">GitHub Topics categorize repositories and are also used for search. They enable users to explore and discover projects based on specific themes or interests.</p>
<img src="https://larpbook.com/wp-content/uploads/2016/01/fotolia_80733213_subscription_monthly_m-e1451762140487.jpg"
class="card-img-top" alt="Topics Image">
<br><br>
<p class="card-text">GitHub Topics categorize repositories and are also used for search. They
enable users to explore and discover projects based on specific themes or interests.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Stars</h5><br>
<img src="https://tse2.mm.bing.net/th?id=OIP.ZLP8TyamI4AVVkzrUtTAKAHaHe&pid=15.1" height="140" class="card-img-top" alt="Stars Image">
<br><br> <p class="card-text">Stars on GitHub let users bookmark repositories they find interesting or useful, showing appreciation for a project's work and contributions.</p>
<img src="https://tse2.mm.bing.net/th?id=OIP.ZLP8TyamI4AVVkzrUtTAKAHaHe&pid=15.1" height="140"
class="card-img-top" alt="Stars Image">
<br><br>
<p class="card-text">Stars on GitHub let users bookmark repositories they find interesting or
useful, showing appreciation for a project's work and contributions.</p>
</div>
</div>
</div>
Expand All @@ -113,26 +117,35 @@ <h5 class="card-title">Stars</h5><br>
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">License</h5><br>
<img src="https://th.bing.com/th/id/OIP.u66OX6JtGlPpkKSMvmk1LQHaHa?rs=1&pid=ImgDetMain" height="140" class="card-img-top" alt="License Image">
<br><br> <p class="card-text">A GitHub repository license specifies the terms under which the project's code can be used, modified, and shared, ensuring clear rights and obligations.</p>
<img src="https://th.bing.com/th/id/OIP.u66OX6JtGlPpkKSMvmk1LQHaHa?rs=1&pid=ImgDetMain"
height="140" class="card-img-top" alt="License Image">
<br><br>
<p class="card-text">A GitHub repository license specifies the terms under which the project's
code can be used, modified, and shared, ensuring clear rights and obligations.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Issues</h5><br>
<img src="http://www.clker.com/cliparts/z/k/H/x/m/c/topic-list-md.png" height="140" class="card-img-top" alt="Issues Image">
<br><br> <p class="card-text">Issues on GitHub track bugs, enhancements, and tasks. They facilitate collaboration by allowing users to discuss and manage the development process.</p>
<img src="http://www.clker.com/cliparts/z/k/H/x/m/c/topic-list-md.png" height="140"
class="card-img-top" alt="Issues Image">
<br><br>
<p class="card-text">Issues on GitHub track bugs, enhancements, and tasks. They facilitate
collaboration by allowing users to discuss and manage the development process.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<div class="card-body">
<h5 class="card-title">Pull Requests</h5><br>
<img src="https://logodix.com/logo/2202291.jpg" height="140" class="card-img-top" alt="Pull Requests Image">
<br><br><p class="card-text">Pull requests on GitHub let users propose changes to a repository. They enable code review and discussion before changes are merged into the main project.</p>
<img src="https://logodix.com/logo/2202291.jpg" height="140" class="card-img-top"
alt="Pull Requests Image">
<br><br>
<p class="card-text">Pull requests on GitHub let users propose changes to a repository. They
enable code review and discussion before changes are merged into the main project.</p>
</div>
</div>
</div>
Expand All @@ -143,4 +156,5 @@ <h5 class="card-title">Pull Requests</h5><br>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

</html>
15 changes: 15 additions & 0 deletions css/about.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

h3 {
text-align: center;
color: #007bff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
151 changes: 151 additions & 0 deletions css/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
display: flex;
flex-direction: column;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

h2,
h3 {
text-align: center;
color: #007bff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.user-info-card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
display: none;
align-items: center;
max-width: 600px;
margin: 0 auto;
}

.user-info-card img {
border-radius: 50%;
max-width: 150px;
height: auto;
margin-right: 20px;
}

.user-details {
flex-grow: 1;
text-align: center;
/* Center align user details */
}

.form-control {
width: 200px;
margin: 0 auto;
display: block;
}

.repo-card {
display: flex;
flex-direction: column;
height: 100%;
border-top: 1px solid #ccc;
padding-top: 10px;
}

.repo-card .card-body {
flex: 1;
display: flex;
flex-direction: column;
}

.repo-description {
margin-top: auto;
padding: 1rem;
background-color: #d0ebff;
border: 1px solid #74c0fc;
border-radius: 0.25rem;
}

.repo-link {
text-align: center;
margin-top: auto;
}

.repo-link a {
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: #ffffff;
border-radius: 4px;
text-decoration: none;
}

.repo-link a:hover {
text-decoration: none;
background-color: #0056b3;
color: #ffffff;
}

.pagination {
justify-content: center;
margin-top: 20px;
}

.loader-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin-bottom: 20px;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

.repo-card .card-title {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
/* Adding shadow effect to repo name */
color: #007bff;
/* Adjust color to match existing theme */
}

.topic-button {
background-color: #ffc107;
/* Yellow background color */
color: #212529;
border: none;
margin: 2px;
box-shadow: 0 2px 4px rgba(255, 193, 7, 0.5);
/* Shadow effect for topics button */
}

.topic-button:hover {
background-color: #ffb400;
/* Darker yellow on hover */
color: #212529;
}

.centered-td {
text-align: center;
vertical-align: middle;
}
Loading

0 comments on commit 659243b

Please sign in to comment.