diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a..56e834f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,4 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- - + + + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b0f672..117ea2a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,5 +6,5 @@ import { Component } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent { - title = 'app'; + title = 'industria-paisaia'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 926975a..feea01f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,11 +3,19 @@ import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; +import { MenuComponent } from './menu/menu.component'; +import { HeaderComponent } from './header/header.component'; +import { SectionComponent } from './section/section.component'; +import { FooterComponent } from './footer/footer.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + MenuComponent, + HeaderComponent, + SectionComponent, + FooterComponent ], imports: [ BrowserModule diff --git a/src/app/footer/footer.component.css b/src/app/footer/footer.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html new file mode 100644 index 0000000..fd8de31 --- /dev/null +++ b/src/app/footer/footer.component.html @@ -0,0 +1,5 @@ + diff --git a/src/app/footer/footer.component.spec.ts b/src/app/footer/footer.component.spec.ts new file mode 100644 index 0000000..2ca6c45 --- /dev/null +++ b/src/app/footer/footer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FooterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts new file mode 100644 index 0000000..67f1378 --- /dev/null +++ b/src/app/footer/footer.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-footer', + templateUrl: './footer.component.html', + styleUrls: ['./footer.component.css'] +}) +export class FooterComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html new file mode 100644 index 0000000..bb32088 --- /dev/null +++ b/src/app/header/header.component.html @@ -0,0 +1 @@ + diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts new file mode 100644 index 0000000..2d0479d --- /dev/null +++ b/src/app/header/header.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts new file mode 100644 index 0000000..3ee4d0f --- /dev/null +++ b/src/app/header/header.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.css'] +}) +export class HeaderComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/menu/menu.component.css b/src/app/menu/menu.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/menu/menu.component.html b/src/app/menu/menu.component.html new file mode 100644 index 0000000..8c36d58 --- /dev/null +++ b/src/app/menu/menu.component.html @@ -0,0 +1,19 @@ +
+ + + + +
+ EUS | ES +
+
diff --git a/src/app/menu/menu.component.spec.ts b/src/app/menu/menu.component.spec.ts new file mode 100644 index 0000000..beb2d9b --- /dev/null +++ b/src/app/menu/menu.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MenuComponent } from './menu.component'; + +describe('MenuComponent', () => { + let component: MenuComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MenuComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/menu/menu.component.ts b/src/app/menu/menu.component.ts new file mode 100644 index 0000000..af2aede --- /dev/null +++ b/src/app/menu/menu.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-menu', + templateUrl: './menu.component.html', + styleUrls: ['./menu.component.css'] +}) +export class MenuComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/section/section.component.css b/src/app/section/section.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/section/section.component.html b/src/app/section/section.component.html new file mode 100644 index 0000000..8d2502a --- /dev/null +++ b/src/app/section/section.component.html @@ -0,0 +1,11 @@ + diff --git a/src/app/section/section.component.spec.ts b/src/app/section/section.component.spec.ts new file mode 100644 index 0000000..9b59954 --- /dev/null +++ b/src/app/section/section.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SectionComponent } from './section.component'; + +describe('SectionComponent', () => { + let component: SectionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SectionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/section/section.component.ts b/src/app/section/section.component.ts new file mode 100644 index 0000000..0cd3c44 --- /dev/null +++ b/src/app/section/section.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-section', + templateUrl: './section.component.html', + styleUrls: ['./section.component.css'] +}) +export class SectionComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/assets/industria-paisaia.svg b/src/assets/industria-paisaia.svg new file mode 100644 index 0000000..a53e36c --- /dev/null +++ b/src/assets/industria-paisaia.svg @@ -0,0 +1,442 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo.gif b/src/assets/logo.gif new file mode 100644 index 0000000..590f657 Binary files /dev/null and b/src/assets/logo.gif differ diff --git a/src/assets/manteka.eot b/src/assets/manteka.eot new file mode 100644 index 0000000..182db0e Binary files /dev/null and b/src/assets/manteka.eot differ diff --git a/src/assets/manteka.ttf b/src/assets/manteka.ttf new file mode 100644 index 0000000..cb96a87 Binary files /dev/null and b/src/assets/manteka.ttf differ diff --git a/src/assets/manteka.woff b/src/assets/manteka.woff new file mode 100644 index 0000000..7a9ff79 Binary files /dev/null and b/src/assets/manteka.woff differ diff --git a/src/index.html b/src/index.html index e0601be..fdb30ea 100644 --- a/src/index.html +++ b/src/index.html @@ -1,8 +1,8 @@ - + - IndustriaPaisaia + Industria Paisaia | Memoria y paisaje industrial . Irizar diff --git a/src/styles.css b/src/styles.css index 90d4ee0..5e46326 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,128 @@ /* You can add global styles to this file, and also import other style files */ +@import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; +@import url('https://fonts.googleapis.com/css?family=Tinos'); +@import url('https://fonts.googleapis.com/css?family=Raleway'); + +@font-face { + font-family: "Manteka"; + font-style: normal; + font-weight: normal; + src: url('./assets/manteka.woff'); +} + +/* main */ +* { transition:0.2s;} + +body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;} +h1,h2 { font-family: "Manteka", sans-serif;} + +header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;} + +header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;} + +header.section { padding-top:10%;background-attachment: fixed; } +header.section h1 {word-wrap: break-word;} +header.section h1 span {font-size:3em;background-color:#d2e8eb; padding:10px;} +header.section h3 {text-transform:uppercase;font-size:2em;font-weight:400; color:#f7886c; font-family:"Manteka";} + +header.section h1::after {content:'';width:100%;height:100%;position:absolute;background:#f00;} + +a {color:#000;} +a:hover { color:#000; text-decoration:none;} + +header h3 {text-align:left;} + +/* menu */ +div.menu {padding:0px; width:100%; background:#fff; z-index:200; position:fixed; top:0; border-bottom:3px solid #d2e8eb;} +div.menu * {float:left;} +div.menu div.Search {float:right;} +div.menu div.language {float:right;margin:5px;font-size:0.7em;padding-top:1%;} +div.menu div.language span {padding:3px;font-family:"Manteka";cursor:pointer;} +div.Search input {background:none; border:none; border-bottom:2px solid #000;} +div.menu nav ul li {text-transform:uppercase;height:60px;font-family:"Manteka";padding:10px;min-width:10%;cursor:pointer;} +div.menu nav ul li:hover { background-color:#f7886c;} +div.menu nav ul li:active { background-color:#f7886c;color:#fff;} +div.menu nav ul li.active { background-color:#f7886c;color:#fff;} + +div.stick-menu { z-index:200;position:fixed;width:100%;top:0;} + +/* section */ +div.ia-section { min-height:300px;width:100%;background-size:contain; background-repeat:no-repeat; } +div.ia-section div.row div {text-align:center;} +div.ia-section h1, +div.ia-section p {margin-top:50px;padding:20px;} +div.ia-section p { font-size:1.2em;} +div.ia-section h1 span { background-color:#d2e8eb; padding:10px; } +div.ia-section h2 span { background-color:#f7886c; } +div.ia-section:hover { cursor:pointer; } +div.ia-section:active { background: #f7886c; } +div.ia-section:hover div.ia-select { min-height:300px; background:#f7886c; padding:0 !important; } +div.ia-section div.col-md-5, +div.ia-section div.col-md-6 { padding:20px;} + +/*article*/ + +article {padding-top:80px;} +article img {border:3px solid #f7886c;width:100%;margin:20px auto;filter:grayscale(0.8);} +article img:hover {filter:none; box-shadow: -1px 2px 5px 0px rgba(0,0,0,0.7);cursor:pointer;} +article p {font-size:0.9em;} +article h2 span {background:#d2e8eb;padding:10px;} +article h2 {margin-bottom:20px;} + +/* footer */ +footer { min-height:300px; height:100%; background-color:#d2e8eb; padding:20px; color:#000;} +footer div.row { text-align:center; min-height:200px; margin-top:20px;} +footer div.row h2 {margin-bottom:20px;} +footer div.row h2 span {font-weight:400; background-color:#f7886c; padding:5px;} +footer div.row p {font-size:0.9em;padding:5px;} + +footer.single { min-height:100px; height:100%; margin-top:30px; padding:20px; color:#888; background:transparent; font-size:0.8em; text-align:center; background:#fff; font-weight:bold;} + +/*video*/ +.video-container video {width:100%;} + +/* item continaer */ +.item-container {width:27%;margin:15px 15px 25px 15px;float:left;padding:0px; border:0px solid #E12323;trans ition:1s;} +.item-container:hover {transform:translateY(-5px);} +.item-container h3 {font-family:"Manteka";text-transform:uppercase;color:#f7886c; margin-bottom:0; font-size:0.8em; text-align:right;padding:2px;cursor:pointer;} +.item-container h3::after {content:'';} +.item-container h2 {font-size:2em; text-align:center;padding:2px;} +.item-container h2.thumbtitle {position:relative;width:100%;text-align:center;padding-top:15%;} +.item-container .thumbnail-image { transition:2s;padding:5px; min-height:150px;background:#fff; background-size:cover; background-size:120%; } +.item-container .thumbnail-image.last { background:#E12323;color:#fff; } +.item-container .thumbnail-image a, +.item-container .thumbnail-image h2 {color:#000;transition:1s;transform-origin:left;text-align:left;} +.item-container .thumbnail-image:hover { background-position:-10%;cursor:pointer; } +.item-container .thumbnail-image:hover > a, +.item-container .thumbnail-image:hover h2 { opacity:1;transform:rotate(5deg); } +.item-container .thumbnail-image.last h2 { text-align:center; color:#fff;} +.item-container .content {height:150px; overflow:hidden; text-align:left; border-bottom:0px solid #E12323;} +.item-container .content p {margin:auto !important; line-height:1.5em;} + +.item-container.sticky {margin-bottom:0px;} +.item-container.sticky h3 {margin-bottom:0px;} +.item-container.sticky .thumbnail-image {border:0px solid #E12323;} +.item-container.sticky .content { +/*background:#E12323;*/ +/*background:url('square.svg') repeat 2%;*/ +color:#e12323; +padding:0px; +border:0px solid #E12323; +} + + +/* item */ + +header.item { margin-top:50px;height:0;} +.arrow-down { color:#f7886c;font-size:3em; transition:1s;} +.arrow-down:hover { transform:scale(1.5); margin-top:20px;} + +/* barra lateral item / media */ +.info h1 {margin:20px auto;} +.info h1 span {background-color:#d2e8eb;padding:5px;} +.info h2 {color:#f7886c;} +.info ul.filters {list-style:none; margin:0;padding:0;} +.info ul.filters li {cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Manteka";text-align:right;} +.info ul.filters li:hover {border-right:0px;color:#f7886c;} +.info ul.filters li:active {border-right:0px;color:#fff;background-color:#f7886c;} +.info ul.filters li.active {border-right:0px;color:#fff;background-color:#f7886c;}