Creando la página de contacto para PlatziSquare

Este fue mi avance.

Hola!! Comparto como me quedó!!

En contacto.component.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<div id="fondo">
    <div class="card opacity">
        <div class="d-flex flex-row">
            <div class="p-2"><a routerLink="/lugares">Lugares</a></div>
            <div class="p-2">/ Contacto</div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-4  offset-md-1 opacity esp">
                <h2 class="d-flex justify-content-center">¡Escríbanos!</h2>
                <label>Nombre</label>
                <input type="text" class="form-control">
                <br>
                <label>Correo</label>
                <input type="email" class="form-control">
                <br>
                <label>Mensaje</label>
                <textarea class="form-control"></textarea>
                <hr>
                <div class="d-flex justify-content-center">
                    <a class="btn btn-primary">Enviar</a>
                    <a class="btn btn-secondary">Cancelar</a>  
                </div>
                
            </div>
            <div class="col-md-4 offset-md-2 opacity esp">
                <p class="d-flex justify-content-center"><i class="fas fa-globe fa-4x"></i></p>
                <h2 class="d-flex justify-content-center">Contacto</h2>
                <p class="d-flex justify-content-center">Nelson Celis</p>
                <p class="d-flex justify-content-center">Ingeniero en Automatización</p>
                <p class="d-flex justify-content-center"><i class="fas fa-phone"><span> +56 9 8878 5755</span></i></p>
                <p class="d-flex justify-content-center"><i class="fas fa-map-marker-alt"><span> Santiago, Chile</span></i></p>
            </div>
        </div>
        
    </div>
</div>

En contacto.component.css

#fondo{
	background-image: url(../../images/fondo.jpg);
	background-position: 50% 50%;
    background-size:cover;
    height: 100vh;
    font-family: Arial;
}

.opacity{
    background-color:rgb(240,248,255,0.7);
}

.esp{
    margin-top: 20px;
    padding: 20px;
}

.btn{
    margin: 5px;
}

span{
    font-family: Arial;
    font-weight: normal;
}

Me gusta como quedó.

Solo comparto!

contacto.component.html

<ng-container appBodyBackground>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a routerLink="/lugares">Lugares</a></li>
        <li class="breadcrumb-item">Contacto</li>
    </ol>
</nav>


<div class="container rounded">
    <div class="row">

        <div class="col-md-8">
            <p><img src="../../../assets/logo-platzisquare.png" class="img-fluid mx-auto d-block mt-5" alt="Logo de PlatziSquare!"></p>
        </div>

        <div class="col-md-4">
            <label class="font-weight-bold" for="nombre">Me llamo:</label>
            <input type="text" class="form-control" id="nombre">
            <label class="font-weight-bold" for="correo">Mi correo electrónico es:</label>
            <input type="email" class="form-control" id="correo">
            <label class="font-weight-bold" for="mensaje">Mensaje para PlatziSquare!:</label>
            <textarea name="mensaje" class="form-control" id="mensaje" rows="4"></textarea>
            <hr>
            <button class="btn btn-primary" >Enviar</button>
            <button routerLink="/lugares" class="btn btn-light ml-1">Cancelar</button>
            <hr>
            <div class="card">
                <agm-map [latitude]="20.6737883" [longitude]="-103.3704326" [zoom]="12">
                    <agm-marker [latitude]="20.6737883" [longitude]="-103.3704326"></agm-marker>
                </agm-map>
                <div class="card-body">
                    <h5 class="card-title">Visitanos en:</h5>
                    <p class="card-text">
                        Av. Importante #1234, Piso 9, int. 63 <br>
                        Cuidad, Estado<br>
                        
                    </p>
                </div>
                <div class="card-footer">
                    <small class="text-muted">
                        <img src="../../assets/icons/baseline_call_black_18dp.png" alt="Número telefónico de PlatziSquare"> (12) 1234-5678 <br>
                        <img src="../../assets/icons/baseline_email_black_18dp.png" alt="Email de PlatziSquare"> [email protected]
                    </small>
                </div>
            </div>
            <p></p>
        </div>

    </div>
</div>
</ng-container>

body-background.directive.ts

import { Directive, AfterViewInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[appBodyBackground]'
})

export class BodyBackgroundDirective implements AfterViewInit, OnDestroy{

  bodyElement: HTMLBodyElement;

  constructor() { 
    this.bodyElement =  document.getElementsByTagName('body')[0];
  }

  ngAfterViewInit() {
    this.bodyElement.classList.add('body-bg');
  }

  ngOnDestroy() {
    this.bodyElement.classList.remove('body-bg');
  }

}

Execelente el contenido de este curso pese a que estamos en angular 7 muchas cosas siguen siendo prácticas

Tambien puedes crear el componente por consola:

ng generate component contacto

![](

Reto:

hola buenos días, no me muestra la pagina de contacto?

Un Diseño Sencillo
https://prnt.sc/o7kfph

Si quisiera cambiar/migrar de bootstrap a material design es sencillo solo con cambiar nombres de las las clases en el html? Veo que material es más complicado de implementar porque las importaciones vienen en el typescript.

Este es mi diseño, me gusta el minimalismo

En que parte le doy me gusta al video? Jaja

Reto:

Buenas, hay una cosa que no he entendido:
¿Que parámetros tiene que recibir el constructor de un componente?, es que siguiendo la sección de routers, por error le añadí un constructor vacío y no me lo reconoció como componente

Gracias 😃

![](