Commit cee31ad8 authored by earndt's avatar earndt
Browse files

[W8D2] (ArndtED) Adds images to country components

parent 17e629ba
Showing with 258 additions and 6 deletions
+258 -6
<p>account works!</p>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AccountComponent } from './account.component';
describe('AccountComponent', () => {
let component: AccountComponent;
let fixture: ComponentFixture<AccountComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AccountComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AccountComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-account',
templateUrl: './account.component.html',
styleUrls: ['./account.component.css']
})
export class AccountComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { AccountComponent } from './account/account.component';
import { EnglandComponent } from './england/england.component';
import { FranceComponent } from './france/france.component';
import { GreeceComponent } from './greece/greece.component';
import { SpainComponent } from './spain/spain.component';
const routes: Routes = []; const routes: Routes = [
{path:'england', component: EnglandComponent},
{path:'france', component: FranceComponent},
{path:'spain', component: SpainComponent},
{path:'greece', component: GreeceComponent},
{path:'account', component: AccountComponent}
];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
......
.dynamic-container{
margin-top: 35px;
height: calc(100vh-70px);
overflow-y: auto;
overflow-x: hidden;
padding: 50px 20px 20px 50px;
}
\ No newline at end of file
<header></header>
<div class='content' role='main'>
<router-outlet></router-outlet> <div class='dynamic-container col-md-10 col-xl-10'>
<router-outlet></router-outlet>
</div>
</div>
<footer></footer>
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { EnglandComponent } from './england/england.component';
import { FranceComponent } from './france/france.component';
import { SpainComponent } from './spain/spain.component';
import { GreeceComponent } from './greece/greece.component';
import { AccountComponent } from './account/account.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent AppComponent,
HeaderComponent,
FooterComponent,
EnglandComponent,
FranceComponent,
SpainComponent,
GreeceComponent,
AccountComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule AppRoutingModule,
NgbModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
.img{
height: 350px;
width: 350px;
padding-left: 5px;
}
<div class='imgContainer' >
<img class='img' src='/assets/images/england/england-bridge.jpg' />
<img class='img' src='/assets/images/england/england-parliament.jpg' />
<img class='img' src='/assets/images/england/england-stonehedge.jpg' />
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EnglandComponent } from './england.component';
describe('EnglandComponent', () => {
let component: EnglandComponent;
let fixture: ComponentFixture<EnglandComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ EnglandComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(EnglandComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-england',
templateUrl: './england.component.html',
styleUrls: ['./england.component.css']
})
export class EnglandComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
.footer{
height: 5rem;
background: #6fb7f1;
bottom: 0;
right: 0;
left: 0;
position:fixed;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
margin-top: 20px;
/* width:600px; */
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
padding-left: 20px;;
}
\ No newline at end of file
<div class='footer'>
<ul>
<li>About Us</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ FooterComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
.img{
height: 350px;
width: 350px;
padding-left: 5px;
}
\ No newline at end of file
<div class='imgContainer' >
<img class='img' src='/assets/images/france/france-cafe.jpg' />
<img class='img' src='/assets/images/france/france-tower.jpg' />
<img class='img' src='/assets/images/france/france-town.jpg' />
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FranceComponent } from './france.component';
describe('FranceComponent', () => {
let component: FranceComponent;
let fixture: ComponentFixture<FranceComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ FranceComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(FranceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-france',
templateUrl: './france.component.html',
styleUrls: ['./france.component.css']
})
export class FranceComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment