Intial nav-bar setup

prertik · prertik · commit af654e74d95e · 2021-11-01T21:14:35.000+05:45
Signed-off-by: Pratik Karki &lt;predatoramigo@gmail.com&gt;
diff --git a/css/style.css b/css/style.css
@@ -2,6 +2,16 @@ html {
 	font: 16px/1 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+body {
+	padding-top: 56px;
+  }
+  
+section {
+	padding-top: 5rem;
+	padding-bottom: 5rem;
+}
+  
+
 li a {
 	font-size: .875em;
 }
@@ -118,9 +128,9 @@ nav {
 	padding: 0 1.3em;
 }
 
-nav h1 {
+/* nav h1 {
 	float: left;
-}
+} */
 
 nav ul,
 footer a {
diff --git a/index.html b/index.html
@@ -6,24 +6,32 @@
 		<title>Git for Windows</title>
 		<meta name="description" content="We bring the awesome Git VCS to Windows">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<!-- Bootstrap CSS-->
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
-		<link rel="stylesheet" href="css/pack.css">
+		<!-- Custom Stylesheet -->
 		<link rel="shortcut icon" href="favicon.ico">
+		<link rel="stylesheet" href="css/style.css">
 		<!--[if lt IE 9]>
 		<script src="js/html5shiv.js"></script>
 		<script src="js/respond.js"></script>
 		<![endif]-->
 	</head>
 	<body>
-		<header>
-			<nav class="content">
-				<a href="index.html"><h1 class="gittext lowercase">Git<span>for Windows</span></h1></a>
-				<div class="version"><a href="https://github.com/git-for-windows/git/releases/tag/v2.33.1.windows.1" title="Version 2.33.1 was published on Wed, 13 Oct 2021 23:42:20 UTC">Version 2.33.1</a></div>
-				<ul class="list-unstyled">
-					<li><a style="font-weight:bold" href="https://github.com/git-for-windows/git/wiki/FAQ" target="_blank">FAQ</a></li>
-					<li><a href="https://github.com/git-for-windows/git" target="_blank">Repository</a></li>
-					<li><a href="https://groups.google.com/group/git-for-windows" target="_blank">Mailing List</a></li>
+		<!-- navbar -->
+			<nav class="navbar navbar-light navbar-expand-lg fixed-top shadow-sm bg-white">
+				<a href="index.html" class="navbar-brand"><h1 class="gittext lowercase">Git<span>for Windows</span></h1></a>
+				<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
+				<div id="navbarSupportedContent" class="collapse navbar-collapse">
+				<ul class="navbar-nav ml-auto">
+					<li class="nav-item"><a style="font-weight:bold" href="https://github.com/git-for-windows/git/wiki/FAQ" target="_blank" class="nav-link">FAQ</a></li>
+					<li class="nav-item"><a href="https://github.com/git-for-windows/git" target="_blank" class="nav-link">Repository</a></li>
+					<li class="nav-item"><a href="https://groups.google.com/group/git-for-windows" target="_blank" class="nav-link">Mailing List</a></li>
 				</ul>
+				<div class="navbar-text ml-lg-3">
+					<a href="https://github.com/git-for-windows/git/releases/latest" class="btn btn-primary text-white shadow" target="_blank">Download</a>
+				  </div>
+				</div>
 			</nav>
 			<section class="content feature">
 				<div class="imagerollover">
@@ -40,7 +48,6 @@ <h2>We bring the awesome <span class="gittext">Git</span> SCM to Windows</h2>
 					</div>
 				</article>
 			</section>
-		</header>
 		<section class="details">
 			<article>
 				<h2>Tools &amp; Features</h2>
