Skip to content

Commit b860e21

Browse files
shreyash3087shreyash3087
committed
Added Responsive Abouts Page
1 parent 33d5635 commit b860e21

6 files changed

Lines changed: 398 additions & 3 deletions

File tree

‎website2.0/abouts.css‎

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2+
3+
body {
4+
margin: 0;
5+
font-family: "Arial", sans-serif;
6+
background: linear-gradient(180deg, #fdd86c 8.1%, #ff7d1f 100%);
7+
overflow-x: hidden;
8+
}
9+
.hamburger div {
10+
width: 25px;
11+
height: 3px;
12+
background-color: #333;
13+
margin: 4px;
14+
transition: 0.4s;
15+
}
16+
17+
.isDisplay {
18+
display: none;
19+
}
20+
.active {
21+
animation: animate forwards ease-in 0.2s;
22+
list-style: none;
23+
display: flex;
24+
gap: 20px;
25+
padding: 10px 20px;
26+
background-color: #fdd76b;
27+
flex-direction: column;
28+
align-items: center;
29+
text-decoration: none;
30+
width: 100%;
31+
}
32+
.nav-links1 {
33+
height: 0px;
34+
overflow: hidden;
35+
display: flex;
36+
position: relative;
37+
top: 30px;
38+
flex-direction: column;
39+
justify-content: space-around;
40+
}
41+
@keyframes animate {
42+
from {
43+
height: 0px;
44+
}
45+
to {
46+
height: 270px;
47+
}
48+
}
49+
.hamburger {
50+
display: none;
51+
}
52+
header {
53+
width: 100%;
54+
position: relative;
55+
top: 0;
56+
background-color: transparent;
57+
padding: 10px 0;
58+
}
59+
60+
nav {
61+
display: flex;
62+
justify-content: space-between !important;
63+
flex-wrap: wrap;
64+
justify-content: center;
65+
position: relative;
66+
align-items: center;
67+
width: 90%;
68+
margin: 0 auto;
69+
}
70+
71+
.logo img {
72+
position: relative;
73+
width: 89px;
74+
height: 89px;
75+
top: 10px;
76+
gap: 0px;
77+
opacity: 0px;
78+
}
79+
80+
.nav-links {
81+
list-style: none;
82+
display: flex;
83+
gap: 50px;
84+
margin: 25px;
85+
padding: 10px 20px;
86+
background-color: #fdd86c;
87+
border-radius: 25px;
88+
flex-wrap: wrap;
89+
justify-content: center;
90+
box-shadow: 0 4px 6px #ff7d1f;
91+
}
92+
93+
.nav-links li a {
94+
text-decoration: none;
95+
color: #000;
96+
padding: 10px 15px;
97+
font-size: x-large;
98+
}
99+
.nav-actions {
100+
display: flex;
101+
align-items: center;
102+
gap: 10px;
103+
}
104+
105+
.sponsor-btn {
106+
background: none;
107+
border: none;
108+
cursor: pointer;
109+
font-size: 18px;
110+
}
111+
a {
112+
text-decoration: none;
113+
}
114+
115+
.sponsor-btn {
116+
background-color: whitesmoke;
117+
border: none;
118+
border-radius: 25px;
119+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
120+
color: #000000;
121+
font-size: 24px;
122+
cursor: pointer;
123+
display: flex;
124+
align-items: center;
125+
justify-content: center;
126+
gap: 7px;
127+
transition: transform 0.1s ease;
128+
width: 150px;
129+
padding: 7px 7px;
130+
font-family: cursive;
131+
margin-right: 7px;
132+
}
133+
.sponsor-btn:active {
134+
transform: translateY(1px);
135+
}
136+
#heart {
137+
color: red;
138+
}
139+
.main {
140+
display: flex;
141+
flex-direction: column;
142+
justify-content: center;
143+
align-items: center;
144+
margin-bottom: 2rem;
145+
}
146+
.about_title {
147+
text-align: center;
148+
font-size: 48px !important;
149+
color: black;
150+
font-family: "Poppins", sans-serif;
151+
font-weight: 500;
152+
}
153+
.video {
154+
display: flex;
155+
justify-content: center;
156+
align-items: center;
157+
margin: 2rem 0rem;
158+
width: 100%;
159+
}
160+
161+
.video iframe {
162+
width: 80%;
163+
height: 620px;
164+
border-radius: 30px;
165+
border: none;
166+
}
167+
.start {
168+
width: 80%;
169+
display: flex;
170+
flex-direction: row-reverse;
171+
flex-wrap: wrap;
172+
height: auto;
173+
overflow-x: hidden;
174+
}
175+
.end {
176+
width: 80%;
177+
display: flex;
178+
flex-direction: row;
179+
height: auto;
180+
overflow-x: hidden;
181+
}
182+
.start .img-container {
183+
width: 50%;
184+
display: flex;
185+
justify-content: end;
186+
align-items: center;
187+
}
188+
.end .img-container {
189+
width: 50%;
190+
display: flex;
191+
justify-content: start;
192+
align-items: center;
193+
}
194+
.text-container {
195+
width: 50%;
196+
display: flex;
197+
flex-direction: column;
198+
justify-content: center;
199+
}
200+
.text-title {
201+
font-family: "Poppins", sans-serif;
202+
font-weight: 400;
203+
}
204+
.text-desc {
205+
font-size: larger;
206+
text-align: justify;
207+
}
208+
.end .text-title {
209+
text-align: center;
210+
}
211+
212+
.img-container img {
213+
width: 300px;
214+
transition: transform 0.5s ease;
215+
}
216+
.img-container img:hover {
217+
transform: scale(0.9);
218+
}
219+
220+
@media only screen and (max-width: 987px) {
221+
.nav-links {
222+
display: none !important;
223+
}
224+
225+
.hamburger {
226+
display: block !important;
227+
}
228+
.nav-links1 li a {
229+
text-decoration: none;
230+
color: #000;
231+
padding: 10px 15px;
232+
font-size: x-large;
233+
}
234+
}
235+
236+
@media only screen and (max-width: 790px) {
237+
nav {
238+
gap: 10%;
239+
}
240+
}
241+
242+
@media only screen and (max-width: 329px) {
243+
.hamburger {
244+
width: 100% !important;
245+
}
246+
.hamburger div {
247+
position: relative;
248+
left: 80%;
249+
}
250+
nav {
251+
flex-direction: column-reverse;
252+
}
253+
.isDisplay {
254+
display: block;
255+
}
256+
.nav-actions {
257+
display: none !important;
258+
}
259+
.sponsor-btn {
260+
font-size: 16px !important;
261+
width: 114px !important;
262+
height: 46px !important;
263+
}
264+
}
265+
@media only screen and (max-width: 300px) {
266+
nav {
267+
gap: 2% !important;
268+
}
269+
}
270+
@media only screen and (max-width: 409px) {
271+
nav {
272+
gap: 5% !important;
273+
}
274+
.logo img {
275+
width: 60px !important;
276+
height: 60px !important;
277+
}
278+
}
279+
280+
@media only screen and (max-width: 769px) {
281+
.end {
282+
flex-direction: column;
283+
}
284+
.start {
285+
flex-direction: column;
286+
}
287+
.img-container {
288+
width: 100% !important;
289+
}
290+
.start .img-container {
291+
justify-content: center;
292+
}
293+
.end .img-container {
294+
justify-content: center;
295+
}
296+
.text-container {
297+
width: 100% !important;
298+
}
299+
}

‎website2.0/abouts.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
8+
<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" />
9+
<link rel="stylesheet" href="abouts.css">
10+
<link rel="shortcut icon" href="HelpOps-H Fevicon.png" type="image/x-icon">
11+
</head>
12+
<body>
13+
<header>
14+
<nav>
15+
<a href="index.html">
16+
<div class="logo">
17+
<img src="HelpOps-H Fevicon.png" alt="Logo">
18+
</div>
19+
</a>
20+
21+
<ul class="nav-links">
22+
<li><a href="index.html">Home</a></li>
23+
<li><a href="#">About</a></li>
24+
<li><a href="contributor.html">Team</a></li>
25+
<li><a href="#">Contact</a></li>
26+
</ul>
27+
28+
<div class="nav-actions">
29+
<a href="https://github.com/sponsors/mdazfar2">
30+
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
31+
</a>
32+
</div>
33+
<div class="hamburger" id="hamburger">
34+
<div></div>
35+
<div></div>
36+
<div></div>
37+
</div>
38+
</nav>
39+
</header>
40+
<ul class="nav-links1" id="navlinks1">
41+
<li><a href="index.html">Home</a></li>
42+
<li><a href="#">About</a></li>
43+
<li><a href="contributor.html">Team</a></li>
44+
<li><a href="#">Contact</a></li>
45+
46+
</ul>
47+
<div class="main">
48+
<div class="about_title">About us</div>
49+
<div class="video">
50+
<iframe width="560" height="315" src="https://www.youtube.com/embed/MCCc5mT5Pio?autoplay=1&mute=1&loop=1&playlist=MCCc5mT5Pio" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
51+
</div>
52+
<div class="start">
53+
<div class="img-container">
54+
<img src="./logo.png">
55+
</div>
56+
<div class="text-container">
57+
<h1 class="text-title">What is HelpOps-Hub?</h1>
58+
<p class="text-desc">
59+
HelpOps-Hub is an open-source, community-driven repository meticulously crafted to support and enhance DevOps practices. This platform serves as a comprehensive, centralized resource, offering invaluable tools, guides, and frameworks that empower DevOps professionals and teams. It is designed to optimize workflows, keep practitioners updated with the latest industry tools and trends, and facilitate the effective implementation of best practices. By harnessing the collective expertise of the community, HelpOps-Hub aims to elevate the standards of DevOps operations worldwide.
60+
</p>
61+
</div>
62+
</div>
63+
<div class="end">
64+
<div class="img-container">
65+
<img class="left-img" src="./mission.png">
66+
</div>
67+
<div class="text-container">
68+
<h1 class="text-title">Our Mission</h1>
69+
<p class="text-desc">
70+
Our mission is to establish an all-encompassing resource that significantly empowers DevOps practitioners, enabling them to achieve higher efficiency, reliability, and performance in their operations. We are committed to building a dynamic and ever-evolving repository that mirrors the latest advancements and innovations in DevOps. Driven by the collective knowledge and experience of our community, we aim to continuously update and refine our resources, ensuring they meet the evolving needs of DevOps professionals globally.
71+
</p>
72+
</div>
73+
</div>
74+
<div class="start mb">
75+
<div class="img-container">
76+
<img class="right-img benefit" style="margin-top: 40px;" src="./benefit.png">
77+
</div>
78+
<div class="text-container">
79+
<h1 class="text-title">Benefits of HelpOps-Hub</h1>
80+
<ul class="text-desc">
81+
<li><b>Unified Knowledge Base</b>: Centralizes valuable DevOps resources, making them easily accessible to everyone</li>
82+
<li><b>Enhanced Learning</b>: Supports continuous skill development for DevOps professionals at all levels.</li>
83+
<li><b>Streamlined Practices</b>: Helps teams implement best practices efficiently, reducing errors and improving reliability.</li>
84+
</ul>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<script>
90+
document.getElementById('hamburger').addEventListener('click',(e)=>{
91+
let ele=document.getElementById("navlinks1")
92+
document.querySelector('.nav-links1').classList.toggle('active');
93+
})
94+
</script>
95+
</body>
96+
</html>

‎website2.0/benefit.png‎

16.7 KB
Loading

0 commit comments

Comments
 (0)