made navbar and other pages

BibekRai44 · Jun 6, 2023 · 262c54c · 262c54c
1 parent 83e1425
commit 262c54c
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 7 deletions.
diff --git a/about-us.html b/about-us.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <link rel="icon" type="image/png" href="images/logo/logo-white.png">
+
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Harvest Nepal">
+    <meta name="author" content="Bibek Rai">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <title>Harvest Nepal | Delivering Agriculture Solutions  </title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+    <nav class="navbar navbar-dark bg-primary">
+        <a href="index.html">
+            <h1>Harvest Nepal</h1>
+          </a>
+
+        <ul>
+            <li><a href="about-us.html">About us</a></li>
+            <li><a href="#">Crop</a></li>
+            <li><a href="#">Fertilizer</a></li>
+        </ul>
+    </nav>
+    <section class="core-value py-5">
+        <div class="container py-md-4">
+            <h3 class="heading mb-sm-5 mb-4 text-center"> About Us</h3>
+            <div class="row core-grids">
+                <div class="col-lg-6 core-left">
+                    <img src="images/about-us.jpg" class="img-fluid" alt="" />
+                </div>
+                <div class="col-lg-6 core-right">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/images/about-us.jpg b/images/about-us.jpg
diff --git a/index.html b/index.html
@@ -14,9 +14,16 @@
     <title>Harvest Nepal | Delivering Agriculture Solutions  </title>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
-<body>
-    <h1>Harvest Nepal</h1>
-    <p>Delivering Agriculture Solutions</p>
+<body class="index-body">
+    <nav class="navbar navbar-dark bg-primary">
+        <h1>Harvest Nepal</h1>
+        <ul>
+            <li><a href="about-us.html">About us</a></li>
+            <li><a href="#">Crop</a></li>
+            <li><a href="#">Fertilizer</a></li>
+        </ul>
+    </nav>
+
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

diff --git a/style.css b/style.css
@@ -1,9 +1,67 @@
-body {
+.index-body {
     background-image: url("images/farming.jpg");
     background-repeat: no-repeat;
     background-size: cover;
-}
+  }
 h1{
-    color: darkblue;
+    color : white;
 
-}
+}
+.container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.crop-box, .fertilizer-box {
+    background-color: #f2f2f2;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 20px;
+    margin-bottom: 20px;
+.img{
+    height: 20px;
+    width: 20px;
+}
+}
+h1{
+    color: white;
+}
+h2{
+    color:#333;
+}
+
+p {
+    color: #666;
+}
+/* Navbar styles */
+nav {
+    background-color: #333;
+    color: #fff;
+    padding: 10px;
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex; /* Add this line to make the links display in a row */
+}
+
+nav ul li {
+    display: inline;
+    margin-right: 10px; /* Add some spacing between the links */
+}
+
+nav ul li:last-child {
+    margin-right: 0; /* Remove the right margin from the last link */
+}
+
+nav ul li a {
+    color: #fff;
+    padding: 10px;
+    text-decoration: none;
+}
+
+
+