Skip to content

M
Moments
Commit 1ac0dee8 by Aksa98
Options

3:42 7/24/19

parent 64800bb2
Showing with 185 additions and 67 deletions
src/app/header/header.component.html
<nav class="navbar navbar-expand-sm"> <nav class="navbar navbar-expand-sm ">
<div class="container"> <div class="container">
<div class="logo" href="#"><img src="../../assets/img/Moments__logo.png"></div> <div class="logo" ><a href="#"><img src="../../assets/img/Moments__logo.png"></a></div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar"> <span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span>
</button>
<ul class="navbar-nav"> <div class="collapse navbar-collapse" id="collapsibleNavbar">
<li class="nav-item">
<a class="Text-Style1 nav-link" href="#">WRITE A REVIEW</a> <ul class="navbar-nav">
<li class="nav-item">
<a class="Text-Style1 nav-link" href="#">WRITE A REVIEW</a>
</li>
<li class="nav-item">
<a class="Text-Style nav-link brd " >PLANNING TOOLS</a>
</li>
<li class="nav-item linec">
<a class="brd">|</a>
</li> </li>
<li class="nav-item"> <li class="nav-item ">
<a class="Text-Style nav-link brd " href="#">PLANNING TOOLS</a> <a class="Text-Style nav-link brd" href="#">VENUES</a>
</li>
<li class="nav-item linec">
<a class="brd" >|</a>
</li> </li>
<li class="nav-item linec"> <li class="nav-item">
<a class="brd">|</a> <a class="Text-Style nav-link brd"href="#">VENDORS</a>
</li>
</li>
<li class="nav-item "> <li class="nav-item ">
<a class="Text-Style nav-link brd" href="#">VENUES</a> <a class="login nav-link" (click)="goto('login')">LOGIN</a>
</li> </li>
<li class="nav-item linec"> <li class="nav-item ">
<a class="brd" >|</a> <a class="join nav-link" (click)="goto('join')">JOIN</a>
</li>
<li class="nav-item">
<a class="Text-Style nav-link brd" href="#">VENDORS</a>
</li> </li>
</ul>
<li class="nav-item "> </div>
<a class="login nav-link" href="login">LOGIN</a> </div>
</li> </nav>
<li class="nav-item "> \ No newline at end of file
<a class="join nav-link" href="join">JOIN</a>
</li>
</ul>
</div>
</div>
</nav>
\ No newline at end of file
src/app/header/header.component.scss
...@@ -3,12 +3,26 @@ ...@@ -3,12 +3,26 @@
*{ *{
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
nav{
position: fixed;
z-index: 1;
background-color: #fff;
width: 100%;
.logo img{ .logo img{
max-width: 240px; max-width: 240px;
} }
.navbar-toggler{
.navbar-toggler-icon{
background: url("../../assets/img/menu.png");
background-repeat: no-repeat;
background-size: 100%;
width: 39px;
height: 45px;
}
}
.navbar-collapse{ .navbar-collapse{
margin-left: 25px; margin-left: 25px;
ul{ ul{
.linec{ .linec{
margin-top: 17px; margin-top: 17px;
...@@ -21,7 +35,7 @@ ...@@ -21,7 +35,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
cursor: pointer;
} }
...@@ -96,4 +110,4 @@ ...@@ -96,4 +110,4 @@
} }
}
\ No newline at end of file
src/app/header/header.component.ts
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
templateUrl: './header.component.html', templateUrl: './header.component.html',
...@@ -7,9 +7,12 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +7,12 @@ import { Component, OnInit } from '@angular/core';
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
constructor() { } constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() { ngOnInit() {
} }
goto(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
}
} }
src/assets/responsive.scss
...@@ -114,40 +114,66 @@ ...@@ -114,40 +114,66 @@
} }
//navbar scss //navbar scss
nav{ nav{
.navbar-collapse{ .navbar-collapse{
margin-left: 0px !important;
ul{ ul{
flex-direction: row !important; flex-direction: block !important;
width: 300px;
.linec{
display: none;
}
li{ li{
width: 75px !important;
a{ a{
text-align: center !important; text-align: start !important;
}
}
}
.banner2_overlay2{
max-width: 100% !important;
background-size: cover !important;
.b2_over2_Contents{
padding: 20px 0px 20px 0px !important;
.row{
.col{
max-width: 100% !important;
padding-bottom: 15px !important;
}
}
.get_started{
padding-top: 15px !important;
}
.logo_block{
.logo_inline{
padding-left: 10px !important;
width: 150px !important;
}
} }
width: 100% !important;
.Text-Style {
color:blue !important;
margin-right: 25px;
padding: 10px 2px;
}
.Text-Style1 {
color:blue !important;
border: none !important;
width: 100% !important;
&:hover{
background:none !important;
} color:#ffff;
}
}
.join{
color:blue !important;
border: none !important;
margin-left: -8px !important;
width: 4px !important;
&:hover{
background:none !important;
}
}
.login{
margin-left: -9px !important;
color:blue !important;
}
} }
} }
}
} }
...@@ -335,6 +361,73 @@ margin-top: 10px !important; ...@@ -335,6 +361,73 @@ margin-top: 10px !important;
} }
} }
} }
//scss for nav
nav{
.navbar-collapse{
margin-left: 5px !important;
ul{
width: 300px;
.linec{
display: none;
}
li{
width: 75px !important;
.nav-link{
// width: 100% !important;
}
.Text-Style {
color:blue !important;
margin-right: 25px;
padding: 10px 2px;
}
.Text-Style1 {
color:blue !important;
//border: none !important;
width: 100% !important;
&:hover{
// background:none !important;
} color:#ffff;
}
}
.join{
color:blue !important;
// border: none !important;
margin-left: -22px !important;
// width: 4px !important;
width: 59px !important;
height: 44px !important;
padding: 9px 10px !important;
&:hover{
// background:none !important;
}
}
.login{
margin-left: -9px !important;
color:blue !important;
}
}
}
}
} }
/* 05.0 iPads (landscape) ----------- */ /* 05.0 iPads (landscape) ----------- */
......
Markdown is supported
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