Skip to content

M
Moments
Commit 578ededc by Aksa98
Options

modified 7/25/19

parent d3210d93
Showing with 150 additions and 14 deletions
src/app/body/login/login.component.html
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<a (click)="goto('login')"> <button class="sig-btn">Login</button></a> <a (click)="goto('login')"> <button class="sig-btn">Login</button></a>
</div> </div>
<div class="col"> <div class="col">
<a (click)="goto('join')"><button class="siup-btn">Signup</button></a> <a href="join"><button class="siup-btn">Signup</button></a>
</div> </div>
</div> </div>
......
src/app/header/header.component.html
...@@ -11,10 +11,35 @@ ...@@ -11,10 +11,35 @@
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a class="Text-Style1 nav-link" href="#">WRITE A REVIEW</a> <a class="Text-Style1 nav-link" href="#">WRITE A REVIEW</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="Text-Style nav-link brd " >PLANNING TOOLS</a> <a class="Text-Style nav-link brd " (click)=" plansfunc()" >PLANNING TOOLS</a>
<div class="planning_tools_header" *ngIf=" plansShow ">
<div class="row">
<div class="col">
<div class="planning_tools_header_item">
<p>Checklist</p>
</div>
</div>
<div class="col">
<div class="planning_tools_header_item">
<p>Guest List</p>
</div>
</div>
<div class="col">
<div class="planning_tools_header_item">
<p>Budget</p>
</div>
</div>
<div class="col">
<div class="planning_tools_header_item">
<p>Vendors Manager</p>
</div>
</div>
</div>
</div>
</li> </li>
<li class="nav-item linec"> <li class="nav-item linec">
<a class="brd">|</a> <a class="brd">|</a>
...@@ -25,13 +50,54 @@ ...@@ -25,13 +50,54 @@
<li class="nav-item linec"> <li class="nav-item linec">
<a class="brd" >|</a> <a class="brd" >|</a>
</li> </li>
<li class="nav-item"> <li class="nav-item" >
<a class="Text-Style nav-link brd"href="#">VENDORS</a> <a class="Text-Style nav-link brd" (click)="showfunc()" >VENDORS</a>
<div class="vendors_drop " *ngIf=" headerShow ">
<div class="row">
<div class="col">
<div class="vendors_drop_item">
<img src="../../../assets/img/1507722456_56cdf37898bb3bb1b3356fad8831dc1a--on-your-wedding-day-pre-wedding.jpg">
<p>Wedding Photographers</p>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1508740269_marriage-marry-009-256.png">
<p>Wedding DJs</p>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1509360077_images.png">
<p>Wedding Favors & Gifts</p>
</div>
</div>
<div class="col">
<div class="vendors_drop_item">
<img src="../../../assets/img/1507875334_wedding-icon-12670446.jpg">
<p>Wedding Venues</p>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1509359880_under-new-management-marriage-note-foldable-design-with-black-text-and-icon-decoration-classic-black-and-white-funny-wedding-thank-you-cards.jpg">
<p>Wedding Invitations</p>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1509360090_wedding_17-512.png">
<p>Wedding Jewelry</p>
</div>
</div>
<div class="col">
<div class="vendors_drop_item">
<img src="../../../assets/img/1517468986_wedding-planning_318-99774.jpg">
<p>Planning</p>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1509359943_8819003-Illustration-of-a-cook-in-black-and-white-Stock-Vector-chef-cooking-hat.jpg">
<p>Wedding Caterers</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</li> </li>
<li class="nav-item "> <li class="nav-item ">
......
src/app/header/header.component.scss
...@@ -8,6 +8,7 @@ position: fixed; ...@@ -8,6 +8,7 @@ position: fixed;
z-index: 1; z-index: 1;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
height:100px ;
.logo img{ .logo img{
max-width: 240px; max-width: 240px;
} }
...@@ -102,12 +103,75 @@ width: 100%; ...@@ -102,12 +103,75 @@ width: 100%;
font-size: 15px; font-size: 15px;
padding: 10px 12px; padding: 10px 12px;
} }
/*********************vendors drop ********************************************/
.vendors_drop{
position: absolute;
background-color: #fff;
width: 50%;
top: 100px;
left: 410px;
right : 0px;
border: 1px solid violet;
.row{
padding-top: 6px;
padding-left: 6px;
padding-bottom: 6px;
.col{
.vendors_drop_item{
text-align: left;
padding: 10px;
img{
height: 25px;
width: 25px;
}
p{
padding-left: 10px;
display: inline;
font-weight: 400;
font-size: 12px;
color: #a1a1a1;
}
}
}
}
}
/*******************planning tool dropdown********************************/
.planning_tools_header{
position: absolute;
background-color: #fff;
width: 38%;
top: 100px;
left: 410px;
right : 0px;
border: 1px solid violet;
.row{
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
.col{
max-width: fit-content;
.planning_tools_header_item{
text-align: left;
padding: 10px;
p{
display: inline;
font-weight: 400;
font-size: 14px;
color: #a1a1a1;
}
}
}
}
}
} }
} }
} }
} }
\ No newline at end of file
src/app/header/header.component.ts
...@@ -6,11 +6,18 @@ import { Router, ActivatedRoute } from '@angular/router'; ...@@ -6,11 +6,18 @@ import { Router, ActivatedRoute } from '@angular/router';
styleUrls: ['./header.component.scss'] styleUrls: ['./header.component.scss']
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
headerShow = false;
plansShow=false;
constructor(private route: ActivatedRoute, private router: Router) { } constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() { ngOnInit() {
} }
showfunc(){
this.headerShow = !this.headerShow;
}
plansfunc(){
this.plansShow = !this.plansShow;
}
goto(path,data=null){ goto(path,data=null){
this.router.navigateByUrl(path,{queryParams:data}); this.router.navigateByUrl(path,{queryParams:data});
......
src/assets/responsive.scss
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
} }
//navbar scss //navbar scss
nav{ nav{
height: auto !important;
.navbar-collapse{ .navbar-collapse{
......
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