I did a job with Angular 6 in a company and I did not move anymore. I went back to studying to really learn and started with a project that I got on the internet here . Well, I followed the tutorial completely and when I run the application, the layout breaks, thus:
Shouldbethisway
Ilookedatthecodeanditseemstobecorrect,andIdonotknowifIateany"cap" in it. See the HTML:
<div class="wrapper-header">
<div class="row">
<div class="col-xs-12 col-md-8">
<ul class="menu-header">
<li>Abra sua conta</li>
<li>Investimentos</li>
<li>Planos</li>
</ul>
</div>
<div class="col-xs-12 col-md-4">
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<div class="form-check">
<label class="form-check-label" for="autoSizingCheck2">
<b>Acesse</b> sua conta
</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Digite seu CPF">
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary acessar-conta">Acessar</button>
</div>
</div>
</form>
</div>
</div>
</div>
This is my CSS copied from the Project Author
.wrapper-header {
height: 30vh;
padding: 30px;
background: #dcbc81;
color: #fff;
box-shadow: 0 2px 5px -2px grey;
}
.menu-header li {
display: block;
font-size: 16px;
margin-left: -24px;
padding: 0px;
}
.acessar-conta {
position: relative;
top: 10px;
background-color: #fff;
border: 0;
color: #333;
}
@media screen and (min-width: 600px) {
.wrapper-header {
height: 15vh;
}
.menu-header li {
list-style: none;
display: inline;
position: relative;
margin: 10px;
top: 30px;
font-size: 18px;
}
}
and the project header header
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() {
}
}
What is wrong that I can not see?