Skip to content

Commit 469d775

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1162 from aslams2020/WelcomeSection
✔️Added Welcome Hero Section To Website!
2 parents 3b7e48f + 6219488 commit 469d775

File tree

2 files changed

+154
-54
lines changed

2 files changed

+154
-54
lines changed

‎Website/index.html‎

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>Machine Learning Repositories</title>
77
<link rel="stylesheet" href="styles.css">
88
<link rel="icon" href="logo.png" type="image/png"> <!-- Added favicon -->
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
910
</head>
1011
<body>
1112
<header>
@@ -31,8 +32,14 @@
3132

3233
<main>
3334
<section class="welcome-section">
34-
<h2>Welcome to the Machine Learning Repositories</h2>
35-
<p>Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
35+
<div class="container">
36+
<div>
37+
<div>
38+
<h1 class="welcome-title">Welcome to <span class="highlight">Machine Learning Repositories</span></h1>
39+
<p class="welcome-description">Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the <span> <a href="https://github.com/recodehive"> RecodeHive </a></span>community.</p>
40+
</div>
41+
</div>
42+
</div>
3643
</section>
3744

3845
<!-- Toggle button for Repository Statistics -->
@@ -41,35 +48,41 @@ <h2>Welcome to the Machine Learning Repositories</h2>
4148
</section>
4249

4350
<!-- Statistics Cards -->
44-
<section id="statistics-cards">
45-
<h2>Repository Statistics</h2>
46-
<div class="stats-grid">
47-
<div class="stat-card">
48-
<h3>Total Stars</h3>
49-
<p id="total-stars">Loading...</p>
50-
</div>
51-
<div class="stat-card">
52-
<h3>Total Forks</h3>
53-
<p id="total-forks">Loading...</p>
54-
</div>
55-
<div class="stat-card">
56-
<h3>Open Issues</h3>
57-
<p id="open-issues">Loading...</p>
58-
</div>
59-
<div class="stat-card">
60-
<h3>License</h3>
61-
<p id="license">Loading...</p>
62-
</div>
63-
<div class="stat-card">
64-
<h3>Repository Size</h3>
65-
<p id="repo-size">Loading...</p>
66-
</div>
67-
<div class="stat-card">
68-
<h3>Most Used Language</h3>
69-
<p id="most-used-language">Loading...</p>
70-
</div>
51+
<section id="statistics-cards">
52+
<h2>Repository Statistics</h2>
53+
<div class="stats-grid">
54+
<div class="stat-card">
55+
<i class="fas fa-star stat-icon"></i>
56+
<h3>Total Stars</h3>
57+
<p id="total-stars">Loading...</p>
7158
</div>
72-
</section>
59+
<div class="stat-card">
60+
<i class="fas fa-code-branch stat-icon"></i>
61+
<h3>Total Forks</h3>
62+
<p id="total-forks">Loading...</p>
63+
</div>
64+
<div class="stat-card">
65+
<i class="fas fa-exclamation-circle stat-icon"></i>
66+
<h3>Open Issues</h3>
67+
<p id="open-issues">Loading...</p>
68+
</div>
69+
<div class="stat-card">
70+
<i class="fas fa-balance-scale stat-icon"></i>
71+
<h3>License</h3>
72+
<p id="license">Loading...</p>
73+
</div>
74+
<div class="stat-card">
75+
<i class="fas fa-database stat-icon"></i>
76+
<h3>Repository Size</h3>
77+
<p id="repo-size">Loading...</p>
78+
</div>
79+
<div class="stat-card">
80+
<i class="fas fa-code stat-icon"></i>
81+
<h3>Most Used Language</h3>
82+
<p id="most-used-language">Loading...</p>
83+
</div>
84+
</div>
85+
</section>
7386

7487
<!-- Languages -->
7588
<section id="languages">

‎Website/styles.css‎

Lines changed: 111 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* Ensure full height of the body and remove margin/padding */
2-
html, body {
2+
html,
3+
body {
34
height: 100%;
45
margin: 0;
56
padding: 0;
@@ -13,7 +14,7 @@ body {
1314
}
1415

1516
header {
16-
background-color: #333;
17+
background-color: #333;
1718
padding: 10px 20px;
1819
}
1920

@@ -26,7 +27,8 @@ header {
2627
.logo-container {
2728
display: flex;
2829
align-items: center;
29-
margin-right: 20px; /* Adds space between logo and links */
30+
margin-right: 20px;
31+
/* Adds space between logo and links */
3032
}
3133

3234
.brand-name {
@@ -38,34 +40,66 @@ header {
3840
.nav-links {
3941
list-style: none;
4042
display: flex;
41-
flex-grow: 1; /* Makes the nav links take up available space */
42-
justify-content: flex-end; /* Align links to the left */
43-
gap: 50px; /* Adds space between each link */
43+
flex-grow: 1;
44+
/* Makes the nav links take up available space */
45+
justify-content: flex-end;
46+
/* Align links to the left */
47+
gap: 50px;
48+
/* Adds space between each link */
4449
margin-left: 20px;
45-
right: 10px; /* Adjust this value for the gap between logo and links */
50+
right: 10px;
51+
/* Adjust this value for the gap between logo and links */
4652
}
4753

4854
.nav-links a {
4955
text-decoration: none;
5056
color: #f1f1f1;
5157
font-weight: bold;
52-
white-space: nowrap; /* Prevents wrapping of links */
58+
white-space: nowrap;
59+
/* Prevents wrapping of links */
5360
}
5461

55-
.nav-links a:hover{
62+
.nav-links a:hover {
5663
text-decoration: underline;
5764
}
5865

5966
main {
6067
padding: 20px;
61-
flex: 1; /* Makes main content take up the remaining space */
68+
flex: 1;
69+
/* Makes main content take up the remaining space */
6270
}
6371

72+
6473
.welcome-section {
6574
text-align: center;
6675
margin-bottom: 30px;
6776
}
6877

78+
.welcome-title {
79+
font-size: 37px;
80+
}
81+
82+
.welcome-description {
83+
font-size : 22px;
84+
width:60%;
85+
margin: auto;
86+
}
87+
88+
.welcome-description a {
89+
text-decoration: none;
90+
color: black;
91+
font-weight: 600;
92+
}
93+
94+
.welcome-description a:hover {
95+
text-decoration: underline;
96+
cursor: pointer;
97+
}
98+
.highlight {
99+
color: rgb(3, 3, 122);
100+
text-shadow: rgb(183, 189, 248) 1px 0 10px;
101+
}
102+
69103
h2 {
70104
font-size: 2em;
71105
margin-bottom: 20px;
@@ -81,7 +115,8 @@ button#toggle-stats {
81115
margin: 0 auto 20px auto;
82116
padding: 10px 20px;
83117
font-size: 1.1em;
84-
background-color: #1a1a5e; /* Dark blue button */
118+
background-color: #1a1a5e;
119+
/* Dark blue button */
85120
color: #f1f1f1;
86121
border: none;
87122
cursor: pointer;
@@ -95,7 +130,6 @@ button#toggle-stats:hover {
95130
#statistics-cards {
96131
display: none;
97132
text-align: center;
98-
color: black;
99133
}
100134

101135
.stats-grid {
@@ -106,19 +140,65 @@ button#toggle-stats:hover {
106140
}
107141

108142
.stat-card {
109-
background-color: white;
143+
background-color: #050066;
144+
/* background: linear-gradient(130deg, #473eed, #04004c); */
110145
padding: 20px;
111146
border-radius: 8px;
112147
width: 150px;
113148
text-align: center;
114149
margin-bottom: 20px;
150+
color: #fff;
151+
text-shadow: 1px 1px 2px rgb(0, 10, 150), 0 0 1em rgb(34, 174, 255), 0 0 0.5em rgb(0, 221, 255);
152+
transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
115153
}
116154

155+
.stat-card:hover {
156+
/* background-color: #1a1d29; */
157+
background: linear-gradient(135deg, #090293, #040054);
158+
/* background: linear-gradient(135deg, #473eed, #04004c); */
159+
transform: scale(1.05);
160+
text-shadow: 1px 1px 2px rgb(233, 0, 202), 0 0 1em rgb(34, 174, 255), 0 0 0.5em rgb(0, 221, 255);
161+
cursor: pointer;
162+
}
163+
164+
117165
.stat-card h3 {
118166
font-size: 1.2em;
119167
margin-bottom: 10px;
120168
}
121169

170+
.stat-card p {
171+
font-size: 18px;
172+
color: rgb(243, 206, 1);
173+
text-shadow: none;
174+
font-weight: 500;
175+
}
176+
177+
.stat-icon {
178+
font-size: 2.7em;
179+
margin-bottom: 10px;
180+
color: rgb(255, 255, 255);
181+
text-shadow: none;
182+
transition: all 0.3s ease-in-out;
183+
}
184+
185+
186+
.stat-card:hover h3 {
187+
color: #ffffff;
188+
}
189+
.stat-card:hover p {
190+
color: yellow;
191+
font-weight: 500;
192+
193+
}
194+
195+
.stat-card:hover .stat-icon
196+
{
197+
color: white;
198+
text-shadow: 1px 1px 2px rgb(233, 0, 202), 0 0 1em rgb(34, 174, 255), 0 0 0.5em rgb(0, 221, 255);
199+
color: rgb(255, 213, 98);
200+
201+
}
122202
#languages {
123203
text-align: center;
124204
margin-bottom: 30px;
@@ -129,25 +209,30 @@ button#toggle-stats:hover {
129209
padding: 0;
130210
display: inline-block;
131211
text-align: center;
132-
column-count: 4; /* Adjust this value to increase or decrease the number of columns */
133-
column-gap: 40px; /* Space between columns */
212+
column-count: 4;
213+
/* Adjust this value to increase or decrease the number of columns */
214+
column-gap: 40px;
215+
/* Space between columns */
134216
}
135217

136218
#language-list li {
137219
margin: 10px 0;
138-
text-align: left; /* Align text to the left within each column */
220+
text-align: left;
221+
/* Align text to the left within each column */
139222
}
140223

141224

142225
/* Footer stays at the bottom */
143226
.footer {
144-
background-color: #121245; /* Dark blue for footer */
227+
background-color: #121245;
228+
/* Dark blue for footer */
145229
color: #f1f1f1;
146230
padding: 20px;
147231
text-align: center;
148232
margin-top: auto;
149233
}
150-
#footer-link{
234+
235+
#footer-link {
151236
color: white
152237
}
153238

@@ -156,15 +241,17 @@ button#toggle-languages {
156241
margin: 20px auto;
157242
padding: 10px 20px;
158243
font-size: 1.1em;
159-
background-color: #1a1a5e; /* Dark blue button */
244+
background-color: #1a1a5e;
245+
/* Dark blue button */
160246
color: #f1f1f1;
161247
border: none;
162248
cursor: pointer;
163249
transition: background-color 0.3s ease;
164250
}
165251

166252
button#toggle-languages:hover {
167-
background-color: #2a2a7e; /* Lighter blue on hover */
253+
background-color: #2a2a7e;
254+
/* Lighter blue on hover */
168255
}
169256

170257
#repo-list {
@@ -189,7 +276,7 @@ button#toggle-languages:hover {
189276
border: 1px solid #ddd;
190277
border-radius: 8px;
191278
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
192-
flex: 1 1 calc(33.333% - 20px);
279+
flex: 1 1 calc(33.333% - 20px);
193280
max-width: calc(33.333% - 20px);
194281
padding: 20px;
195282
box-sizing: border-box;
@@ -234,8 +321,8 @@ button#toggle-languages:hover {
234321
font-size: 0.875rem;
235322
}
236323

237-
.card .btn-view-repo:hover{
238-
background-color:#2a2a7e;
324+
.card .btn-view-repo:hover {
325+
background-color: #2a2a7e;
239326
}
240327

241328

@@ -248,7 +335,7 @@ button#toggle-languages:hover {
248335

249336
@media (max-width: 480px) {
250337
.card {
251-
flex: 1 1 100%;
338+
flex: 1 1 100%;
252339
max-width: 100%;
253340
}
254341
}

0 commit comments

Comments
 (0)