Skip to content

Commit e6ba4a8

Browse files
mdazfar2mdazfar2
authored
Merge pull request #314 from pandeyji711/Update_web
Feat:New design for resourse page
2 parents 308f93b + fc7a458 commit e6ba4a8

9 files changed

Lines changed: 721 additions & 13 deletions

File tree

‎Update_website/contributor.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,31 @@ body {
200200
font-size: 40px;
201201
gap: 60px;
202202
}
203-
203+
.sponsor-btn {
204+
background-color: whitesmoke;
205+
border: none;
206+
border-radius: 25px; /* Rounded corners */
207+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Drop shadow effect */
208+
color: #000000; /* Black text color */
209+
font-size: 24px;
210+
cursor: pointer;
211+
display: flex;
212+
align-items: center;
213+
justify-content: center;
214+
gap: 7px; /* Space between icon and text */
215+
transition: transform 0.1s ease; /* Smooth click effect */
216+
width: 150px;
217+
padding: 7px 7px ;
218+
font-family:cursive;
219+
margin-right: 7px;
220+
221+
}
222+
a{
223+
text-decoration: none;
224+
}
225+
.sponsor-btn:active{
226+
transform:translateY(1px) ;
227+
}
204228

205229

206230
#social-links a i {

‎Update_website/contributor.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>HelpOps-Hub</title>
7+
<link rel="shortcut icon" href="HelpOps-H Fevicon.png" type="image/x-icon">
78
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
89
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnH/PRVV+ejsK+y4J0F5QKdKqz2xk5+6RzSyZjNzkRcbEXfz6/Rk+6RD7Vh+x2DlJ2CgWNLcA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
910
<link rel="stylesheet" href="nav.css">
@@ -12,7 +13,9 @@
1213
<link rel="stylesheet" href="skeleton.css">
1314
<link rel="stylesheet" href="banner.css">
1415

15-
16+
<style>
17+
18+
</style>
1619

1720

1821
</head>
@@ -21,7 +24,7 @@
2124
<nav>
2225
<a href="index.html">
2326
<div class="logo">
24-
<img src="logo.png" alt="Logo">
27+
<img src="HelpOps-H Fevicon.png" alt="Logo">
2528
</div>
2629
</a>
2730
<ul class="nav-links">
@@ -31,8 +34,11 @@
3134
<li><a href="#">Contact</a></li>
3235
</ul>
3336
<div class="nav-actions">
37+
<a href="https://github.com/sponsors/mdazfar2">
3438
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
35-
</div>
39+
</a>
40+
</div>
41+
3642
</nav>
3743
</header>
3844
<div id="ourteam">Our Team</div>

‎Update_website/index.html‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,26 @@
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnH/PRVV+ejsK+y4J0F5QKdKqz2xk5+6RzSyZjNzkRcbEXfz6/Rk+6RD7Vh+x2DlJ2CgWNLcA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
99
<link rel="stylesheet" href="styles.css">
1010
<link rel="shortcut icon" href="HelpOps-H Fevicon.png" type="image/x-icon">
11-
11+
<style>
12+
body {
13+
margin: 0;
14+
font-family: 'Arial', sans-serif;
15+
background: linear-gradient(180deg, #FDD86C 8.1%, #FF7D1F 100%);
16+
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
height: 100vh;
22+
}
23+
</style>
1224
</head>
1325
<body>
1426
<header>
1527
<nav>
1628
<a href="index.html">
1729
<div class="logo">
18-
<img src="logo.png" alt="Logo">
30+
<img src="HelpOps-H Fevicon.png" alt="Logo">
1931
</div>
2032
</a>
2133
<ul class="nav-links">
@@ -25,19 +37,25 @@
2537
<li><a href="#">Contact</a></li>
2638
</ul>
2739
<div class="nav-actions">
28-
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
40+
<a href="https://github.com/sponsors/mdazfar2">
41+
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
42+
</a>
2943
</div>
3044
</nav>
3145
</header>
3246
<main>
3347
<div class="main-content">
48+
3449
<button class="star-button">
3550
<i class="star-icon"><i class="fas fa-star"></i></i> <!-- This is a star character -->
3651
Star Us
3752
</button>
53+
3854
<h1>HelpOps-Hub</h1>
3955
<p>Ensuring You Never Get Stuck In DevOps Again!</p>
56+
<a href="resources.html">
4057
<button class="get-started-btn">Get started</button>
58+
</a>
4159
</div>
4260
</main>
4361
<script src="scripts.js"></script>

‎Update_website/resources.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
#maincontainer {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
height: 700px;
6+
}
7+
#folders-container {
8+
display: flex;
9+
flex-wrap: wrap;
10+
justify-content: center;
11+
margin: auto;
12+
/* justify-content: space-between; Distribute cards evenly */
13+
}
14+
.heading{
15+
margin-top: 150px;
16+
font-family: cursive;
17+
/* font-size: xx-large; */
18+
margin-bottom: 20px;
19+
}
20+
.heading h1{
21+
font-family: cursive;
22+
font-size: 24px;
23+
}
24+
/* Individual folder card */
25+
.folder-card {
26+
flex: 0 0 calc(25% - 20px); /* Four cards per row (adjust margin as needed) */
27+
margin: 10px;
28+
justify-content: center;
29+
padding: 1.5rem;
30+
background: #0000000D;
31+
border-radius: 30px ;
32+
opacity: 0px;
33+
34+
border: 1px solid #ddd;
35+
/* border-radius: 5px; */
36+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
37+
cursor: pointer;
38+
transition: background-color 0.3s ease;
39+
}
40+
41+
.folder-card:hover {
42+
box-shadow: 5px 5px 20px #00ccff;
43+
transform: scale(1.03);
44+
transition: 0.5s;
45+
border-radius: 1.5rem;
46+
/* font-family: cursive; */
47+
font-size: 0.9rem;
48+
}
49+
50+
/* Heading for folder name */
51+
.folder-card h3 {
52+
font-size: 18px;
53+
margin-bottom: 8px;
54+
}
55+
/* Search Icon styling */
56+
#search {
57+
display: inline-block;
58+
font-size: 24px;
59+
/* margin-right: 20px; */
60+
cursor: pointer;
61+
}
62+
63+
/* Toggle Switch styling */
64+
.toggle-switch {
65+
position: relative;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
flex-direction: row;
70+
width: 50px;
71+
gap: 200px;
72+
height: 24px;
73+
}
74+
75+
.toggle-switch input {
76+
opacity: 0;
77+
width: 0;
78+
height: 0;
79+
}
80+
81+
.switch {
82+
position: absolute;
83+
cursor: pointer;
84+
top: 0;
85+
left: 0;
86+
right: 0;
87+
bottom: 0;
88+
background-color: #ccc;
89+
transition: 0.4s;
90+
border-radius: 24px;
91+
}
92+
93+
.switch:before {
94+
position: absolute;
95+
content: "";
96+
height: 16px;
97+
width: 16px;
98+
left: 4px;
99+
bottom: 4px;
100+
background-color: white;
101+
transition: 0.4s;
102+
border-radius: 50%;
103+
}
104+
105+
input:checked + .switch {
106+
background-color: #2196F3;
107+
}
108+
109+
input:checked + .switch:before {
110+
transform: translateX(26px);
111+
}

‎Update_website/resources.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>HelpOps-Hub</title>
7+
<link rel="shortcut icon" href="HelpOps-H Fevicon.png" type="image/x-icon">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnH/PRVV+ejsK+y4J0F5QKdKqz2xk5+6RzSyZjNzkRcbEXfz6/Rk+6RD7Vh+x2DlJ2CgWNLcA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10+
<link rel="stylesheet" href="styles.css">
11+
<link rel="shortcut icon" href="HelpOps-H Fevicon.png" type="image/x-icon">
12+
<link rel="stylesheet" href="square.css">
13+
<link rel="stylesheet" href="resources.css">
14+
<style>
15+
body {
16+
margin: 0;
17+
font-family: 'Arial', sans-serif;
18+
background: linear-gradient(180deg, #FDD86C 8.1%, #FF7D1F 100%);
19+
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
/* height: 100vh; */
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<header>
30+
<nav>
31+
<a href="index.html">
32+
<div class="logo">
33+
<img src="HelpOps-H Fevicon.png" alt="Logo">
34+
</div>
35+
</a>
36+
<ul class="nav-links">
37+
<li><a href="index.html">Home</a></li>
38+
<li><a href="#">About</a></li>
39+
<li><a href="contributor.html">Team</a></li>
40+
<li><a href="#">Contact</a></li>
41+
</ul>
42+
<!-- <div id="search"><i class="fa fa-search"></i></div> -->
43+
<div class="toggle-switch">
44+
<div id="search"><i class="fa fa-search"></i></div>
45+
<input type="checkbox" id="toggle" />
46+
<label for="toggle" class="switch"></label>
47+
</div>
48+
49+
<!-- <div class="nav-actions">
50+
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
51+
</div> -->
52+
</nav>
53+
</header>
54+
<div class="heading"><h1>Resources</h1></div>
55+
<div id="maincontainer">
56+
<div id="loading">
57+
<div class="📦"></div>
58+
<div class="📦"></div>
59+
<div class="📦"></div>
60+
<div class="📦"></div>
61+
<div class="📦"></div>
62+
</div>
63+
</div>
64+
<div id="folders-container"></div>
65+
<script src="resources.js"></script>
66+
</body>
67+
</html>

0 commit comments

Comments
 (0)