Configurando el navbar y otros componentes

TheJonaCode · Sep 24, 2020 · b6113ab · b6113ab
1 parent 0bb9135
commit b6113ab
Show file tree

Hide file tree

Showing 17 changed files with 82 additions and 535 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -4,12 +4,16 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/shared/navbar/navbar.component';
 import { HomeComponent } from './components/home/home.component';
+import { AboutComponent } from './components/about/about.component';
+import { HeroesComponent } from './components/heroes/heroes.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     NavbarComponent,
-    HomeComponent
+    HomeComponent,
+    AboutComponent,
+    HeroesComponent
   ],
   imports: [
     BrowserModule

diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html
@@ -0,0 +1 @@
+<p>about works!</p>
diff --git a/src/app/components/about/about.component.ts b/src/app/components/about/about.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html'
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/heroes/heroes.component.html b/src/app/components/heroes/heroes.component.html
@@ -0,0 +1 @@
+<p>heroes works!</p>
diff --git a/src/app/components/heroes/heroes.component.ts b/src/app/components/heroes/heroes.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styles: [
+  ]
+})
+export class HeroesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -1 +1,8 @@
-<p>home works!</p>
+<div class="jumbotron jumbotron-fluid">
+
+    <div class="container">
+      <h1 class="display-4">Comic App</h1>
+      <p class="lead">Esta es una aplicación de comics.</p>
+    </div>
+
+  </div>
diff --git a/src/app/components/shared/navbar/navbar.component.html b/src/app/components/shared/navbar/navbar.component.html
@@ -1 +1,36 @@
-<p>navbar works!</p>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+
+    <a class="navbar-brand" href="#">
+        <img src="assets/img/A-64.png" width="30" height="30" alt="" loading="lazy">
+      </a>
+
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item active">
+          <a class="nav-link" href="#">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Dropdown
+          </a>
+          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#">Something else here</a>
+          </div>
+        </li>
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+      </form>
+    </div>
+  </nav>
diff --git a/src/assets/img/A-64.png b/src/assets/img/A-64.png
diff --git a/src/assets/img/aquaman.png b/src/assets/img/aquaman.png
diff --git a/src/assets/img/batman.png b/src/assets/img/batman.png
diff --git a/src/assets/img/daredevil.png b/src/assets/img/daredevil.png
diff --git a/src/assets/img/hulk.png b/src/assets/img/hulk.png
diff --git a/src/assets/img/linterna-verde.png b/src/assets/img/linterna-verde.png
diff --git a/src/assets/img/spiderman.png b/src/assets/img/spiderman.png
diff --git a/src/assets/img/wolverine.png b/src/assets/img/wolverine.png
diff --git a/src/favicon.ico b/src/favicon.ico