Skip to content

Commit ce583a9

Browse files
mdazfar2mdazfar2
authored
Merge pull request #261 from Ayushmaanagarwal1211/main
Responsiveness
2 parents bd1af4c + 8d89d9d commit ce583a9

4 files changed

Lines changed: 228 additions & 125 deletions

File tree

‎Official_Website/about.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ <h1 class="abeezee-regular">Benefits of HelpOps-Hub
128128
</div>
129129
</div>
130130
<div id="scrollToTopBtn" class="scrollToTopBtn" onclick="scrollToTop()">
131-
<img src="scrollToTop.png" alt="Scroll to top">
131+
<img src="scrollToTop.png" class="im" alt="Scroll to top">
132132
</div>
133133
<script src="app.js"></script>
134134

‎Official_Website/faq.html‎

Lines changed: 164 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -17,152 +17,196 @@
1717
<link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap" rel="stylesheet">
1818
<link rel="stylesheet" href="navstyle.css">
1919
<script src="darkmode.js"></script>
20-
20+
<style>
21+
/* Custom CSS for Accordion */
22+
.accordion .card-header {
23+
cursor: pointer;
24+
}
25+
.accordion .card-header .btn {
26+
text-align: left;
27+
width: 100%;
28+
}
29+
.accordion .card-header i {
30+
transition: transform 0.2s;
31+
}
32+
.accordion .collapse.show .card-header i {
33+
transform: rotate(180deg);
34+
}
35+
.accordion .card-body {
36+
animation: fadeIn 0.3s ease-in-out;
37+
}
38+
@keyframes fadeIn {
39+
from { opacity: 0; }
40+
to { opacity: 1; }
41+
}
42+
body{
43+
overflow-y: scroll;
44+
}
45+
.about-button1 {
46+
display: flex;
47+
align-items: center;
48+
color: black;
49+
position: fixed;
50+
bottom: 50px;
51+
right: 50px;
52+
color: #00ccff;
53+
background-color: #00ccff;
54+
box-shadow: 5px 5px 20px #00ccff;
55+
border: none;
56+
padding: 5px 5px;
57+
border-radius: 8px; /* Rounded corners */
58+
font-size: 16px; /* Text size */
59+
cursor: pointer;
60+
text-decoration: none;
61+
transition: 0.5s;
62+
}
63+
.about-button1:hover {
64+
transform: scale(1.2);
65+
/* background-color: white; */
66+
}
67+
.about-button1 a{
68+
text-decoration: none;
69+
}
70+
.nav_item {
71+
text-decoration: none;
72+
}
73+
74+
</style>
2175
</head>
2276
<body>
2377
<header class="header">
24-
2578
<div class="logo">
26-
<a href="./index.html"
27-
><img src="logo.png" alt="HelpOps-Hub Logo"
28-
/></a>
79+
<a href="/"><img src="logo.png" alt="HelpOps-Hub Logo" /></a>
2980
</div>
3081
<div>
31-
32-
<h1>FAQ's</h1>
82+
<h1>FAQ's</h1>
3383
</div>
34-
35-
36-
</header>
37-
<nav class="nav " id="navbar">
38-
39-
40-
84+
</header>
85+
<nav class="nav" id="navbar">
4186
<ul class="nav__list" id="navlinkitems">
42-
<li class="nav__item">
43-
<a href="contributor-index.html" class="fa-solid fa-people-group"></a>
44-
</li>
45-
<li class="nav__item">
46-
<a href="https://github.com/mdazfar2/HelpOps-Hub" target="_blank" class="fab fa-github"></a>
47-
</li>
48-
<li class="nav__item">
49-
<a href="https://www.linkedin.com/company/helpops-hub/" target="_blank" class="fab fa-linkedin"></a>
50-
</li>
51-
<li class="nav__item">
52-
<a href="https://discord.com/invite/UWTrRhqywt" target="_blank" class="fab fa-discord"></a>
53-
</li>
54-
55-
<li class="nav__item">
56-
<a href="javascript:void(0);" class="fas fa-adjust" onclick="toggleTheme()"></a>
57-
</li>
58-
<li><button class="about-button">
59-
60-
<a href="./index.html">
61-
BACK
62-
</a>
63-
</button></li>
64-
<li>
65-
<button class="sponsor-button" onclick="window.location.href='https://github.com/sponsors/mdazfar2'">
66-
<span class="heart">&#10084;</span> Sponsor
67-
</button>
68-
</li>
69-
87+
<li class="nav__item">
88+
<a href="contributor-index.html" class="fa-solid fa-people-group"></a>
89+
</li>
90+
<li class="nav__item">
91+
<a href="https://github.com/mdazfar2/HelpOps-Hub" target="_blank" class="fab fa-github"></a>
92+
</li>
93+
<li class="nav__item">
94+
<a href="https://www.linkedin.com/company/helpops-hub/" target="_blank" class="fab fa-linkedin"></a>
95+
</li>
96+
<li class="nav__item">
97+
<a href="https://discord.com/invite/UWTrRhqywt" target="_blank" class="fab fa-discord"></a>
98+
</li>
99+
<li class="nav__item">
100+
<a href="javascript:void(0);" class="fas fa-adjust" onclick="toggleTheme()"></a>
101+
</li>
102+
<li>
103+
<button class="about-button">
104+
<a href="./index.html"> BACK </a>
105+
</button>
106+
</li>
107+
<li>
108+
<button class="about-button">
109+
<a href="./about.html"> About Us </a>
110+
</button>
111+
</li>
112+
<li>
113+
<button class="sponsor-button" onclick="window.location.href='https://github.com/sponsors/mdazfar2'">
114+
<span class="heart">&#10084;</span> Sponsor
115+
</button>
116+
</li>
70117
</ul>
118+
</nav>
71119

72-
</nav>
73-
74-
<div class="container mt-5">
120+
<div class="container mt-5">
75121

76-
<div class="accordion" id="accordionExample">
77-
<div class="card">
78-
<div class="card-header" id="headingOne">
79-
<h5 class="mb-0 collapse-heading">
80-
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
81-
1. What is HelpOps-Hub? <i class="fas fa-chevron-down float-right"></i>
82-
</button>
83-
</h5>
84-
</div>
85-
86-
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
87-
<div class="card-body abeezee-regular">
88-
HelpOps-Hub is the ultimate destination for seamless DevOps support. This innovative platform is designed to eliminate roadblocks and streamline your DevOps processes. With expert solutions, comprehensive resources, and a dedicated support team, HelpOps-Hub ensures that you can focus on what you do best—delivering exceptional software. Whether you're a seasoned DevOps professional or just starting, HelpOps-Hub is your go-to partner for achieving operational excellence and driving success. Experience hassle-free DevOps with HelpOps-Hub!
122+
<div class="accordion" id="accordionExample">
123+
<div class="card">
124+
<div class="card-header" id="headingOne">
125+
<h5 class="mb-0">
126+
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
127+
1. What is HelpOps-Hub? <i class="fas fa-chevron-down float-right"></i>
128+
</button>
129+
</h5>
89130
</div>
90-
</div>
91-
</div>
92-
<div class="card">
93-
<div class="card-header" id="headingTwo">
94-
<h5 class="mb-0 collapse-heading">
95-
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
96-
2. How can I use HelpOps-Hub? <i class="fas fa-chevron-down float-right"></i>
97-
</button>
98-
</h5>
99-
</div>
100-
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
101-
<div class="card-body abeezee-regular">
102-
Using HelpOps-Hub is easy and intuitive. Start by visiting the platform to explore a wide array of DevOps resources and solutions. Navigate through the to find expert articles, troubleshooting guides, and best practices tailored to your needs. Engage with the community, ask questions, and get personalized support from experienced professionals. Additionally, you can provide feedback and rate your experience to help improve the platform. Embrace a smoother DevOps journey with HelpOps-Hub!
103-
131+
132+
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
133+
<div class="card-body abeezee-regular">
134+
HelpOps-Hub is the ultimate destination for seamless DevOps support. This innovative platform is designed to eliminate roadblocks and streamline your DevOps processes. With expert solutions, comprehensive resources, and a dedicated support team, HelpOps-Hub ensures that you can focus on what you do best—delivering exceptional software. Whether you're a seasoned DevOps professional or just starting, HelpOps-Hub is your go-to partner for achieving operational excellence and driving success. Experience hassle-free DevOps with HelpOps-Hub!
135+
</div>
104136
</div>
105137
</div>
106-
</div>
107-
<div class="card">
108-
<div class="card-header" id="headingThree">
109-
<h5 class="mb-0 collapse-heading">
110-
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
111-
3. Is there a cost associated with using HelpOps-Hub?
112-
<i class="fas fa-chevron-down float-right"></i>
113-
</button>
114-
</h5>
115-
</div>
116-
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
117-
<div class="card-body abeezee-regular">
118-
The best part about HelpOps-Hub is that it's completely free to use! This incredible platform offers a wealth of resources, tools, and community support without any cost, making it accessible to everyone from beginners to seasoned professionals. Dive into a world of DevOps knowledge and elevate your skills without spending a dime. Explore all the amazing features and join the community at HelpOps-Hub.
138+
<div class="card">
139+
<div class="card-header" id="headingTwo">
140+
<h5 class="mb-0">
141+
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
142+
2. How can I use HelpOps-Hub? <i class="fas fa-chevron-down float-right"></i>
143+
</button>
144+
</h5>
145+
</div>
146+
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
147+
<div class="card-body abeezee-regular">
148+
Using HelpOps-Hub is easy and intuitive. Start by visiting the platform to explore a wide array of DevOps resources and solutions. Navigate through the to find expert articles, troubleshooting guides, and best practices tailored to your needs. Engage with the community, ask questions, and get personalized support from experienced professionals. Additionally, you can provide feedback and rate your experience to help improve the platform. Embrace a smoother DevOps journey with HelpOps-Hub!
149+
150+
</div>
119151
</div>
120152
</div>
121-
</div>
122-
<div class="card">
123-
<div class="card-header" id="headingFour">
124-
<h5 class="mb-0 collapse-heading">
125-
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
126-
4. How can I contribute to HelpOps-Hub?
127-
<i class="fas fa-chevron-down float-right"></i>
128-
</button>
129-
</h5>
130-
</div>
131-
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
132-
<div class="card-body abeezee-regular">
133-
Contributing to HelpOps-Hub is a rewarding way to support the DevOps community. You can share your expertise by submitting insightful articles, developing useful tools, answering frequently asked questions, and providing valuable feedback to enhance the platform. Each contribution helps build a more robust resource hub, empowering others in their DevOps journey. Dive in and make a difference at HelpOps-Hub, where your input can inspire and guide fellow professionals.Just go to Github repository Find Valuable Issues , raise issues and then Raise Pr . </div>
153+
<div class="card">
154+
<div class="card-header" id="headingThree">
155+
<h5 class="mb-0">
156+
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
157+
3. Is there a cost associated with using HelpOps-Hub?
158+
<i class="fas fa-chevron-down float-right"></i>
159+
</button>
160+
</h5>
161+
</div>
162+
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
163+
<div class="card-body abeezee-regular">
164+
The best part about HelpOps-Hub is that it's completely free to use! This incredible platform offers a wealth of resources, tools, and community support without any cost, making it accessible to everyone from beginners to seasoned professionals. Dive into a world of DevOps knowledge and elevate your skills without spending a dime. Explore all the amazing features and join the community at HelpOps-Hub.
165+
</div>
166+
</div>
134167
</div>
135-
</div>
136-
<div class="card">
137-
<div class="card-header" id="headingFive">
138-
<h5 class="mb-0 collapse-heading">
139-
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
140-
5. Who can benefit from HelpOps-Hub?
141-
<i class="fas fa-chevron-down float-right"></i>
142-
</button>
143-
</h5>
168+
<div class="card">
169+
<div class="card-header" id="headingFour">
170+
<h5 class="mb-0">
171+
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
172+
4. How can I contribute to HelpOps-Hub?
173+
<i class="fas fa-chevron-down float-right"></i>
174+
</button>
175+
</h5>
176+
</div>
177+
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
178+
<div class="card-body abeezee-regular">
179+
Contributing to HelpOps-Hub is a rewarding way to support the DevOps community. You can share your expertise by submitting insightful articles, developing useful tools, answering frequently asked questions, and providing valuable feedback to enhance the platform. Each contribution helps build a more robust resource hub, empowering others in their DevOps journey. Dive in and make a difference at HelpOps-Hub, where your input can inspire and guide fellow professionals.Just go to Github repository Find Valuable Issues , raise issues and then Raise Pr . </div>
180+
</div>
144181
</div>
145-
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
146-
<div class="card-body abeezee-regular">
147-
HelpOps-Hub is a goldmine for anyone immersed in the DevOps ecosystem. DevOps engineers will find tools and resources to streamline their workflows, while beginners can tap into a wealth of knowledge to kickstart their journey. Project managers can use the platform to understand and implement DevOps best practices, and companies can enhance their team’s efficiency with community-driven insights. Whether you're a seasoned professional or just starting out, HelpOps-Hub is your go-to resource for mastering the art of DevOps. Explore more at HelpOps-Hub.
148-
149-
150-
151-
182+
<div class="card">
183+
<div class="card-header" id="headingFive">
184+
<h5 class="mb-0">
185+
<button class="btn abeezee-regular" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
186+
5. Who can benefit from HelpOps-Hub?
187+
<i class="fas fa-chevron-down float-right"></i>
188+
</button>
189+
</h5>
190+
</div>
191+
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
192+
<div class="card-body abeezee-regular">
193+
HelpOps-Hub is a goldmine for anyone immersed in the DevOps ecosystem. DevOps engineers will find tools and resources to streamline their workflows, while beginners can tap into a wealth of knowledge to kickstart their journey. Project managers can use the platform to understand and implement DevOps best practices, and companies can enhance their team’s efficiency with community-driven insights. Whether you're a seasoned professional or just starting out, HelpOps-Hub is your go-to resource for mastering the art of DevOps. Explore more at HelpOps-Hub.
194+
195+
196+
197+
198+
</div>
152199
</div>
153200
</div>
154201
</div>
155202
</div>
156-
</div>
157-
<button class="about-button1">
158-
<a href="./about.html"> About Us </a>
159-
</button>
160-
<div id="scrollToTopBtn" class="scrollToTopBtn_FAQ" onclick="scrollToTop() "><img src="scrollToTop.png"></div>
203+
204+
<div id="scrollToTopBtn" class="scrollToTopBtn_FAQ" onclick="scrollToTop() "><img src="scrollToTop.png" class="im"></div>
161205
<script src="app.js"></script>
162206
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
163207
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
164208
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
165-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
209+
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
166210

167211
</body>
168212
</html>

‎Official_Website/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ <h1>HelpOps-Hub</h1>
4646
<a href="./faq.html"> FAQ's </a>
4747
</button>
4848
</li>
49+
<li>
50+
<button class="about-button">
51+
<a href="./about.html"> About Us </a>
52+
</button>
53+
</li>
4954
<li>
5055
<button class="sponsor-button" onclick="window.location.href='https://github.com/sponsors/mdazfar2'">
5156
<span class="heart">&#10084;</span> Sponsor

0 commit comments

Comments
 (0)