Dear Vitor Pavanelli,Did you followed every steps carefoully ?To your's global styles.scss file you have to add code below:
.intro-2 {
background: url("https://mdbootstrap.com/img/Photos/Others/img%20(46).jpg")no-repeat center center;
background-size: cover;
}
.top-nav-collapse {
background-color: #ff8a65 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #ff8a65 !important;
}
}
.md-form .prefix {
font-size: 1.5rem;
margin-top: 1rem;
}
h6 {
line-height: 1.7;
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 1150px;
}
}
Then to your's index.html you have to add code below:
<html lang="en" class="full-height">
Then to your's app.component.html you have to add code below:
<header>
<span class="token comment" spellcheck="true"><!--Navbar--></span>
<span class="token tag"><span class="token punctuation"><</span>mdb-navbar <span class="token attr-name">SideClass</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>logo<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>logo navbar-brand waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>strong<span class="token punctuation">></span></span>MDB<span class="token tag"><span class="token punctuation"></</span>strong<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>logo<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>links<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>ul <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>navbar-nav mr-auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item active waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home <span class="token tag"><span class="token punctuation"><</span>span <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sr-only<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>(current)<span class="token tag"><span class="token punctuation"></</span>span<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>li <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-item waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-link<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Profile<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>ul<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>form <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-inline waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control mr-sm-2<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Search<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>form<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>links<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>mdb-navbar<span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--Intro Section--></span>
<span class="token tag"><span class="token punctuation"><</span>section <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>view intro-2 hm-stylish-strong<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>full-bg-img<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container flex-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>d-flex align-items-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row flex-center pt-5 mt-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6 text-center text-md-left mb-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>white-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>h1 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>display-4 wow fadeInLeft<span class="token punctuation">"</span></span> <span class="token attr-name">data-wow-delay</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.3s<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token punctuation"></</span>h1<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>hr <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hr-light wow fadeInLeft<span class="token punctuation">"</span></span> <span class="token attr-name">data-wow-delay</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.3s<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>h6 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wow fadeInLeft<span class="token punctuation">"</span></span> <span class="token attr-name">data-wow-delay</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.3s<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste.<span class="token tag"><span class="token punctuation"></</span>h6<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>br<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn peach-gradient wow fadeInLeft waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">data-wow-delay</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.3s<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>Learn more<span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-6 col-xl-5 offset-xl-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--Form--></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>card wow fadeInRight<span class="token punctuation">"</span></span> <span class="token attr-name">data-wow-delay</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.3s<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>card-body z-depth-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--Header--></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>h3<span class="token punctuation">></span></span>Write to us:<span class="token tag"><span class="token punctuation"></</span>h3<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>hr<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--Body--></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>i <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-user prefix grey-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>i<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form3<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">mdbActive</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>label <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Your name<span class="token tag"><span class="token punctuation"></</span>label<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>i <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-envelope prefix grey-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>i<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form2<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">mdbActive</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>label <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Your email<span class="token tag"><span class="token punctuation"></</span>label<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--Textarea with icon prefix--></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>i <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fa fa-pencil prefix grey-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>i<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>textarea <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form8<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>md-textarea<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>textarea<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>label <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Your message<span class="token tag"><span class="token punctuation"></</span>label<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>button <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn peach-gradient waves-light<span class="token punctuation">"</span></span> <span class="token attr-name">mdbRippleRadius</span><span class="token punctuation">></span></span>Send<span class="token tag"><span class="token punctuation"></</span>button<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>hr<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>fieldset <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>label <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subscribe me to the newsletter<span class="token tag"><span class="token punctuation"></</span>label<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>fieldset<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--/.Form--></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>section<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>header<span class="token punctuation">></span></span>
<span class="token comment" spellcheck="true"><!--Main Navigation--></span>
After all, it should works fine. But if not, please let me know.Best Regards,Damian
DanielNetzer free commented 7 years ago
can you send your app.module.ts file and your package.json?