Fix footer and navbar

idiliev18 · Jul 15, 2021 · 9b8baf0 · 9b8baf0
1 parent c8644d7
commit 9b8baf0
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 22 deletions.
diff --git a/design/style.css b/design/style.css
@@ -263,7 +263,7 @@ tbody, tr, th, td
       color: #666;
       position: relative;
 
-      clip-path: polygon(0 80%, 100% 24%, 100% 75vh, 0% 100%);
+      clip-path: polygon(0 46%, 100% 6%, 100% 100%, 0% 100%);
 
     }
 

diff --git a/internship-client/angular.json b/internship-client/angular.json
@@ -30,9 +30,11 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
-            "scripts": []
+            "scripts": ["node_modules/jquery/dist/jquery.min.js",
+                "node_modules/bootstrap/dist/js/bootstrap.min.js"]
           },
           "configurations": {
             "production": {

diff --git a/internship-client/package-lock.json b/internship-client/package-lock.json
diff --git a/internship-client/package.json b/internship-client/package.json
@@ -22,7 +22,10 @@
     "@angular/platform-browser": "~12.1.1",
     "@angular/platform-browser-dynamic": "~12.1.1",
     "@angular/router": "~12.1.1",
+    "bootstrap": "^5.0.2",
+    "jquery": "^3.6.0",
     "json-server": "^0.16.3",
+    "popper.js": "^1.16.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"

diff --git a/internship-client/src/app/components/footer/footer.component.css b/internship-client/src/app/components/footer/footer.component.css
@@ -1,19 +1,25 @@
+p{
+    font-size: 1.25em;
+    padding: 0 0 40px 0;
+
+  }
+
 footer {
     text-align: center;
     background: #444;
     margin-top: 10px;
-    padding-top: 50px;
-    padding-bottom: 20px;
+    padding-top: 10px;
+    padding-bottom: 70px;
 
     }
 
     .footer{
-      padding-top: 300px;
-      height: 50vh;
+      padding-top: 500px;
+      height: 30vh;
       color: #666;
-      position: relative;
+      position: static;
 
-      clip-path: polygon(0 80%, 100% 24%, 100% 75vh, 0% 100%);
+      clip-path: polygon(0 83%, 100% 53%, 100% 100%, 0% 100%);
 
     }
 

diff --git a/internship-client/src/app/components/navigation/navigation.component.html b/internship-client/src/app/components/navigation/navigation.component.html
@@ -1,13 +1,18 @@
-<nav>
-    <ul>
-        <li>
-            <a routerLink="/">Home</a>
-        </li>
-        <li>
-            <a routerLink="/table-css">Responsive Table - CSS</a>
-        </li>
-        <li>
-            <a routerLink="/table-flex">Responsive Table - Flex-Layoult</a>
-        </li>
-    </ul>
-</nav>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
+      <a class="navbar-brand" linkRouter="/">GinkoBiloba</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" routerLink="/table-css">Table - CSS</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link disabled"    >Table - Bootstrap</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
diff --git a/internship-client/src/styles.css b/internship-client/src/styles.css
@@ -1,3 +1,4 @@
+
 *{
     font-family: 'Roboto Slab', serif;
 }