second commit

.editorconfig

@@ -3,8 +3,8 @@ root = true
 
 [*]
 charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 8
 insert_final_newline = true
 trim_trailing_whitespace = true
 

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { EspectaculosComponent } from './espectaculos/espectaculos.component';
+import { MainComponent } from './main/main.component';
 
-
-const routes: Routes = [];
+const routes: Routes = [
+	{ path: '', component : MainComponent },
+	{ path: 'espectaculos', component: EspectaculosComponent }
+];
+/* { path: '**', component: PageNotFoundComponent } */
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.component.ts

 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+	selector: 'app-root',
+	templateUrl: './app.component.html',
+	styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'ComprarEntradas';
+	title = 'TicketTech';
 }

src/app/app.module.ts

@@ -3,16 +3,24 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { EspectaculosComponent } from './espectaculos/espectaculos.component';
+import { FooterBarComponent } from './footer-bar/footer-bar.component';
+import { MainComponent } from './main/main.component';
+import { NavBarComponent } from './nav-bar/nav-bar.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+	declarations: [
+		AppComponent,
+		EspectaculosComponent,
+		FooterBarComponent,
+		MainComponent,
+		NavBarComponent
+	],
+	imports: [
+		BrowserModule,
+		AppRoutingModule
+	],
+	providers: [],
+	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/espectaculos/espectaculos.component.css

+

src/app/espectaculos/espectaculos.component.html

+<p>espectaculos works!</p>

src/app/espectaculos/espectaculos.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EspectaculosComponent } from './espectaculos.component';
+
+describe('EspectaculosComponent', () => {
+	let component: EspectaculosComponent;
+	let fixture: ComponentFixture<EspectaculosComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [EspectaculosComponent]
+		})
+			.compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(EspectaculosComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/espectaculos/espectaculos.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'espectaculos',
+	templateUrl: './espectaculos.component.html',
+	styleUrls: ['./espectaculos.component.css']
+})
+export class EspectaculosComponent implements OnInit {
+
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+}

src/app/footer-bar/footer-bar.component.html

+<p>footer-bar works!</p>

src/app/footer-bar/footer-bar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterBarComponent } from './footer-bar.component';
+
+describe('FooterBarComponent', () => {
+  let component: FooterBarComponent;
+  let fixture: ComponentFixture<FooterBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/footer-bar/footer-bar.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'footer-bar',
+  templateUrl: './footer-bar.component.html',
+  styleUrls: ['./footer-bar.component.css']
+})
+export class FooterBarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/main/main.component.html

+<p>main works!</p>

src/app/main/main.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/main.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.css']
+})
+export class MainComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/nav-bar/nav-bar.component.css

+.Navbar {
+	padding: 0% 2% 0% 2%;
+	height: 100%;
+	background-color: black;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+}
+
+.NavText {
+	color: white;
+	float: right;
+}
+
+.NavLogo {
+	float: left;
+	width: 20%;
+}
+
+.NavSearchContainer {
+	margin-left: 20%;
+	width: 35%;
+	justify-content: center;
+	display: flex;
+	justify-content: space-between;
+}
+
+.NavInput {
+	margin-right: 10%;
+	height: 40%;
+	width: 90%;
+	float: right;
+	padding: 6px;
+	border: none;
+	font-size: 17px;
+	border-radius: 10px;
+
+}

src/app/nav-bar/nav-bar.component.html

+<div class="Navbar">
+
+	<a href="/" style="height: auto;">
+		<img class="NavLogo" src="assets/images/LogoProv2.png" style="height: auto; width: 300px;">
+	</a>
+	<div class="NavSearchContainer">
+		<input class="NavInput" type="text" placeholder="Search..." style="outline: none;">
+		<a href="">
+			<i class="fas fa-search fa-2x " style="color:white;
+                                                     "></i>
+		</a>
+	</div>
+	<a href="">
+		<i class="fas fa-user-circle fa-3x" style="color:white;
+                                                 "></i>
+	</a>
+</div>

src/app/nav-bar/nav-bar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavBarComponent } from './nav-bar.component';
+
+describe('NavBarComponent', () => {
+  let component: NavBarComponent;
+  let fixture: ComponentFixture<NavBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/nav-bar/nav-bar.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.css']
+})
+export class NavBarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>ComprarEntradas</title>
+  <title>TickeTech</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+body {
+	margin: 0;
+	padding: 0;
+}