Skip to content

Commit 33d5635

Browse files
mdazfar2mdazfar2
authored
Merge pull request #327 from Ayushmaanagarwal1211/main
Front page responsive
2 parents c956440 + 8a44ce3 commit 33d5635

2 files changed

Lines changed: 225 additions & 15 deletions

File tree

‎website2.0/index.html‎

Lines changed: 83 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,39 +18,101 @@
1818
flex-direction: column;
1919
align-items: center;
2020
justify-content: center;
21-
height: 100vh;
21+
overflow-y: scroll;
22+
height: auto;
23+
}
24+
.hamburger div {
25+
width: 25px;
26+
height: 3px;
27+
background-color: #333;
28+
margin: 4px;
29+
transition: 0.4s;
30+
}
31+
@media only screen and (max-width:200px) {
32+
.sponsor-btn{
33+
font-size: 12px !important;
34+
width: 90px !important;
35+
height: 46px !important;
36+
}
37+
.star-button{
38+
font-size: 12px !important;
39+
width: 90px !important;
40+
}
41+
}
42+
@media only screen and (max-width:497px){
43+
h1{
44+
font-size: 40px !important;
45+
}
46+
.main-content{
47+
gap: 30px;
48+
}
49+
}
50+
@media only screen and (max-width:347px){
51+
.logo{
52+
position: relative;
53+
top: 40px;
54+
}
55+
h1{
56+
font-size: 30px !important;
57+
}
58+
.get-started-btn{
59+
position: relative;
60+
}
61+
p{
62+
font-size: 17px !important;
63+
}
2264
}
2365
</style>
66+
2467
</head>
2568
<body>
2669
<header>
2770
<nav>
2871
<a href="index.html">
29-
<div class="logo">
30-
<img src="HelpOps-H Fevicon.png" alt="Logo">
31-
</div>
32-
</a>
72+
<div class="logo">
73+
<img src="HelpOps-H Fevicon.png" alt="Logo">
74+
</div>
75+
</a>
76+
3377
<ul class="nav-links">
3478
<li><a href="index.html">Home</a></li>
3579
<li><a href="#">About</a></li>
3680
<li><a href="contributor.html">Team</a></li>
3781
<li><a href="#">Contact</a></li>
3882
</ul>
83+
3984
<div class="nav-actions">
4085
<a href="https://github.com/sponsors/mdazfar2">
4186
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
4287
</a>
4388
</div>
89+
<div class="hamburger" id="hamburger">
90+
<div></div>
91+
<div></div>
92+
<div></div>
93+
</div>
4494
</nav>
4595
</header>
96+
<ul class="nav-links1" id="navlinks1">
97+
<li><a href="index.html">Home</a></li>
98+
<li><a href="#">About</a></li>
99+
<li><a href="contributor.html">Team</a></li>
100+
<li><a href="#">Contact</a></li>
101+
102+
</ul>
46103
<main>
47104
<div class="main-content">
48-
49-
<button class="star-button">
50-
<i class="star-icon"><i class="fas fa-star"></i></i> <!-- This is a star character -->
51-
Star Us
52-
</button>
53-
105+
<div class="conte">
106+
107+
<button class="star-button">
108+
<i class="star-icon"><i class="fas fa-star"></i></i> <!-- This is a star character -->
109+
Star Us
110+
</button>
111+
<li class="isDisplay">
112+
<a href="https://github.com/sponsors/mdazfar2">
113+
<button class="sponsor-btn">Sponsor <i id="heart" class="fas fa-heart"></i></button>
114+
</a> </li>
115+
</div>
54116
<h1>HelpOps-Hub</h1>
55117
<p>Ensuring You Never Get Stuck In DevOps Again!</p>
56118
<a href="resources.html">
@@ -59,5 +121,15 @@ <h1>HelpOps-Hub</h1>
59121
</div>
60122
</main>
61123
<script src="scripts.js"></script>
124+
<script>
125+
126+
// if(window.innerWidth>800){
127+
// document.getElementById("navlinks1").style.display='none'
128+
// }
129+
document.getElementById('hamburger').addEventListener('click',(e)=>{
130+
let ele=document.getElementById("navlinks1")
131+
document.querySelector('.nav-links1').classList.toggle('active');
132+
})
133+
</script>
62134
</body>
63135
</html>

‎website2.0/styles.css‎

Lines changed: 142 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,142 @@
99
justify-content: center;
1010
/* height: 100vh; */
1111
/* } */
12+
@media only screen and (max-width:987px){
13+
.nav-links{
14+
display: none !important;
15+
}
16+
17+
.hamburger{
18+
display: block !important;
19+
}
20+
/* nav{
21+
gap: 30%;
22+
} */
23+
.nav-links1 li a {
24+
text-decoration: none;
25+
color: #000;
26+
padding: 10px 15px;
27+
font-size: x-large;
28+
29+
}
30+
}
31+
.isDisplay{
32+
display: none;
33+
}
34+
.active{
35+
animation: animate forwards ease-in 0.2s;
36+
list-style: none;
37+
display: flex;
38+
gap: 20px;
39+
padding: 10px 20px;
40+
background-color: #fdd76b;
41+
flex-direction: column;
42+
align-items: center;
43+
text-decoration: none;
44+
45+
/* box-shadow: 0 4px 6px #FF7D1F; */
46+
width: 100%;
47+
}
48+
@media only screen and (max-width:790px) {
49+
nav{
50+
gap: 10%;
51+
}
52+
}
53+
54+
55+
@media only screen and (max-width:329px){
56+
.hamburger{
57+
width: 100% !important;
58+
59+
}
60+
.hamburger div{
61+
position: relative;
62+
left: 80%;
63+
}
64+
nav{
65+
flex-direction: column-reverse;
66+
}
67+
.isDisplay{
68+
display: block;
69+
}
70+
.conte{
71+
display: flex;
72+
width: 100%;
73+
justify-content: space-around;
74+
}
75+
76+
.nav-actions{
77+
78+
display: none !important;
79+
}
80+
.sponsor-btn{
81+
font-size: 16px !important;
82+
width: 114px !important;
83+
height: 46px !important;
84+
}
85+
.star-button{
86+
font-size: 16px !important;
87+
width: 114px !important ;
88+
}
89+
}
90+
@media only screen and (max-width:300px) {
91+
92+
93+
nav{
94+
gap: 2% !important;
95+
}
96+
}
97+
@media only screen and (max-width:409px) {
98+
nav{
99+
gap: 5% !important;
100+
}
101+
102+
.logo img{
103+
width: 60px !important;
104+
height: 60px !important;
105+
}
106+
/* @keyframes animate {
107+
from{
108+
height: 0px;
109+
}to{
110+
height: 300px ;
111+
}
112+
} */
113+
}
12114

115+
.nav-links1{
116+
height: 0px ;
117+
overflow: hidden;
118+
display: flex;
119+
position: relative;
120+
top: 30px;
121+
flex-direction: column;
122+
justify-content: space-around;
123+
}
124+
@keyframes animate {
125+
from{
126+
height: 0px;
127+
}to{
128+
height: 270px ;
129+
}
130+
}
131+
.hamburger{
132+
display: none;
133+
}
13134
header {
14135
width: 100%;
15-
position: absolute;
136+
position: relative;
16137
top: 0;
17138
background-color: transparent;
18139
padding: 10px 0;
19140
}
20141

21142
nav {
22143
display: flex;
23-
justify-content: space-between;
144+
justify-content: space-between !important;
145+
flex-wrap: wrap;
146+
justify-content: center;
147+
position: relative;
24148
align-items: center;
25149
width: 90%;
26150
margin: 0 auto;
@@ -33,7 +157,6 @@ nav {
33157
width: 89px;
34158
height: 89px;
35159
top: 10px;
36-
left: 80px;
37160
gap: 0px;
38161
opacity: 0px;
39162

@@ -48,7 +171,8 @@ opacity: 0px;
48171
padding: 10px 20px;
49172
background-color: #FDD86C;
50173
border-radius: 25px;
51-
174+
flex-wrap: wrap;
175+
justify-content: center;
52176
box-shadow: 0 4px 6px #FF7D1F;
53177
}
54178

@@ -106,6 +230,20 @@ a{
106230
#heart{
107231
color: red;
108232
}
233+
@media only screen and (max-width:592px){
234+
h1{
235+
font-size: 60px !important;
236+
}
237+
}
238+
@media only screen and (max-width:332px){
239+
h1{
240+
font-size: 40px !important;
241+
}
242+
}
243+
main{
244+
height: auto ;
245+
min-height: 84vh !important;
246+
}
109247

110248
.main-content {
111249
text-align: center;

0 commit comments

Comments
 (0)