Skip to content

Commit 3cdc7b4

Browse files
sahil-sagwekar2652sahil-sagwekar2652
authored
Merge pull request #140 from Avdhesh-Varshney/navbar
[GSSoC'23] Added Navbar with styling
2 parents cb11bfa + c85debf commit 3cdc7b4

File tree

3 files changed

+131
-19
lines changed

3 files changed

+131
-19
lines changed

‎css/contributors.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
flex-direction: column;
88
justify-content: center;
99
align-items: center;
10+
text-align: center;
1011
}
1112

1213
.contributors h1 {
@@ -46,8 +47,8 @@
4647
}
4748

4849
.contributor-card img:hover {
49-
width: 78px;
50-
height: 78px;
50+
width: 75px;
51+
height: 75px;
5152
opacity: 1;
5253
}
5354

‎css/style.css

Lines changed: 110 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300&family=Open+Sans:wght@300;400;500;600;700&display=swap');
2+
13
* {
24
padding: 0;
35
margin: 0;
46
box-sizing: border-box;
57
font-family: "Poppins", sans-serif;
8+
text-decoration: none;
69
}
710

811
html {
@@ -17,6 +20,111 @@ html {
1720
}
1821

1922

23+
/* Styling of Navbar */
24+
.navbar {
25+
list-style: none;
26+
z-index: 100;
27+
font-family: 'Josefin Sans', sans-serif;
28+
background: rgba(0, 130, 230, 0.6);
29+
height: 80px;
30+
width: 98%;
31+
position: fixed;
32+
top: 3%;
33+
left: 1%;
34+
transform: translate(-50%, -50%);
35+
animation: moveAnimation 2s ease-in-out infinite alternate;
36+
}
37+
label.logo {
38+
color: white;
39+
font-size: 35px;
40+
line-height: 80px;
41+
padding: 0 70px;
42+
font-weight: bold;
43+
}
44+
.navbar ul {
45+
float: right;
46+
margin-right: 20px;
47+
}
48+
.navbar ul li {
49+
display: inline-block;
50+
line-height: 80px;
51+
margin: 0 5px;
52+
}
53+
.navbar ul li a {
54+
color: white;
55+
font-size: 17px;
56+
text-transform: uppercase;
57+
font-weight: bold;
58+
padding: 7px 13px;
59+
border-radius: 3px;
60+
}
61+
a.active, a:hover {
62+
background: #1b9bff;
63+
transition: 0.5s;
64+
}
65+
.checkbtn {
66+
font-size: 30px;
67+
color: white;
68+
float: right;
69+
line-height: 80px;
70+
margin-right: 40px;
71+
cursor: pointer;
72+
display: none;
73+
}
74+
#check {
75+
display: none;
76+
}
77+
@media (max-width: 1300px) {
78+
label.logo {
79+
font-size: 25px;
80+
padding-left: 25px;
81+
}
82+
.navbar ul li a {
83+
font-size: 16px;
84+
}
85+
}
86+
@media (max-width: 1225px) {
87+
.checkbtn {
88+
display: block;
89+
}
90+
ul {
91+
position: fixed;
92+
width: 100%;
93+
height: 100vh;
94+
background-color: #2c3e50;
95+
top: 80px;
96+
left: -100%;
97+
text-align: center;
98+
transition: all .5s;
99+
}
100+
.navbar ul li {
101+
display: block;
102+
margin: 50px 0;
103+
line-height: 30px;
104+
}
105+
.navbar ul li a {
106+
font-size: 20px;
107+
}
108+
a:hover, a.active {
109+
background: none;
110+
color: #0082e6;
111+
}
112+
#check:checked ~ ul {
113+
left: 0;
114+
}
115+
}
116+
@keyframes moveAnimation {
117+
0% {
118+
transform: translateY(-10px);
119+
}
120+
100% {
121+
transform: translateY(10px);
122+
}
123+
}
124+
125+
/* End styling of navbar */
126+
127+
20128
/* View Port Style */
21129

22130
.Viewcontainer {
@@ -186,7 +294,7 @@ html {
186294

187295
footer {
188296
margin-top: auto;
189-
background-color: #000;
297+
background-color: rgba(0, 130, 230, 0.75);
190298
padding-top: 40px;
191299
color: #fff;
192300
}
@@ -248,7 +356,7 @@ footer {
248356
}
249357

250358
.footer-bottom{
251-
background: #000;
359+
background: transparent;
252360
padding-top: 20px;
253361
padding-bottom: 30px;
254362
text-align: center;

‎index.html

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,20 @@
1313
</style>
1414
</head>
1515
<body class="bg-gray-100">
16-
<header class="bg-gray-300 py-4">
17-
<div class="container mx-auto px-4">
18-
<h1 class="text-2xl font-semibold text-black">GitHub Automation Scripts 🤖</h1>
19-
<div class="github-link mb-2">
20-
<a class="fg-black" href="https://github.com/sahil-sagwekar2652/GitHub-Automation-scripts" target="_blank" rel="noopener noreferrer">
21-
<i class="fg-black fab fa-github"></i>
22-
GitHub
23-
</a>
24-
</div>
25-
</div>
26-
</header>
16+
<nav class="navbar">
17+
<input type="checkbox" id="check">
18+
<label for="check" class="checkbtn">
19+
<i class="fas fa-bars"></i>
20+
</label>
21+
<label class="logo"><a href="https://github.com/sahil-sagwekar2652/GitHub-Automation-scripts">GitHub Automation Scripts 🤖</a></label>
22+
<ul>
23+
<li><a href="#about">About</a></li>
24+
<li><a href="#contribute">Contribute</a></li>
25+
<li><a href="#install">Installation</a></li>
26+
<li><a href="#contributor">Contributors</a></li>
27+
<li><a href="#contact">Contact</a></li>
28+
</ul>
29+
</nav>
2730

2831
<section class="h-screen bg-blue-900 flex items-center justify-center">
2932
<div class="Viewcontainer mx-auto flex flex-wrap flex-col md:flex-row space-x-0 md:space-x-8">
@@ -47,7 +50,7 @@ <h2 class="text-xl text-white font-semibold mb-4">Tech Stack</h2>
4750
</div>
4851
</section>
4952

50-
<div class="desc-container mx-auto px-4">
53+
<div class="desc-container mx-auto px-4" id="about">
5154
<div class="description-section">
5255
<div class="image-container">
5356
<img src="graphics/repo.jpg" alt="gitrepo-Floating-Image">
@@ -64,7 +67,7 @@ <h2 class="title">GitHub Automation Scripts 🤖</h2>
6467
</div>
6568

6669

67-
<div class="container mx-auto px-4 py-8">
70+
<div class="container mx-auto px-4 py-8" id="contribute">
6871
<div class="contribute-guide">
6972
<h1 class="text-2xl font-semibold">Contributing to GitHub-Automation-Scripts</h1>
7073
<p class="mt-4">First off, thanks for taking the time to contribute! ❤️</p>
@@ -110,7 +113,7 @@ <h2 id="styleguides" class="text-xl font-semibold mt-8">Styleguides</h2>
110113
</body>
111114
</html>
112115

113-
<main class="container mx-auto px-4 py-8">
116+
<main class="container mx-auto px-4 py-8" id="install">
114117
<nav class="mb-8 flex justify-center items-center">
115118
<div class="inline-flex border border-gray-300 rounded">
116119
<button class="py-2 px-4 bg-gray-200 font-semibold focus:outline-none active:bg-gray-300" onclick="openTab(event, 'installation')">Installation</button>
@@ -199,7 +202,7 @@ <h1>Our Valuable Contributors</h1>
199202
<div id="contributor"></div>
200203
</div>
201204

202-
<footer class="py-4">
205+
<footer class="py-4" id="contact">
203206
<div class="container mx-auto px-4 footer-content">
204207
<h3>GITHUB AUTOMATION SCRIPTS 🤖</h3>
205208
<p>Bash and Python scripts to automate your Git & GitHub workflow. Made by using only standard python libraries.</p>

0 commit comments

Comments
 (0)