Commit c9bd67d3 by aksa

Merge branch 'aksa' into 'master'

Aksa See merge request !18
parents 33f61e60 e23b51ba
......@@ -2729,6 +2729,11 @@
"integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
"dev": true
},
"detect-passive-events": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/detect-passive-events/-/detect-passive-events-1.0.4.tgz",
"integrity": "sha1-btR35uW863kHlzXc01d4nTf5qRo="
},
"di": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
......@@ -6413,6 +6418,32 @@
"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
"dev": true
},
"ng5-slider": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/ng5-slider/-/ng5-slider-1.2.4.tgz",
"integrity": "sha512-4EwMNaOwy0p0mjUjRHem6vq4ZIqFMkej66Vmky1PSMb3e9r10tF2m29kS94EDB9y4inYoEf3tVrZ3YXfd7R5ag==",
"requires": {
"detect-passive-events": "^1.0.4",
"rxjs": "^5.5.6",
"rxjs-compat": "^6.5.2",
"tslib": "^1.7.1"
},
"dependencies": {
"rxjs": {
"version": "5.5.12",
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
"integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
"requires": {
"symbol-observable": "1.0.1"
}
},
"symbol-observable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
"integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
}
}
},
"ngx-slick-carousel": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/ngx-slick-carousel/-/ngx-slick-carousel-0.4.4.tgz",
......@@ -8081,6 +8112,11 @@
"tslib": "^1.9.0"
}
},
"rxjs-compat": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.5.2.tgz",
"integrity": "sha512-TRMkTp4FgSxE2HtGvxmgRukh3JqdFM7ejAj1Ti/VdodbPGfWvZR5+KdLKRV9jVDFyu2SknM8RD+PR54KGnoLjg=="
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
......
......@@ -22,6 +22,7 @@
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"jquery": "^3.4.1",
"ng5-slider": "^1.2.4",
"ngx-slick-carousel": "^0.4.4",
"rxjs": "~6.3.3",
"slick-carousel": "^1.8.1",
......
......@@ -7,6 +7,8 @@ import { LoginaccountComponent } from './loginaccount/loginaccount.component';
import { from } from 'rxjs';
import { LoginvendorsComponent } from './loginvendors/loginvendors.component';
import { PaymentComponent } from './payment/payment.component';
import { VenuesComponent } from './venues/venues.component';
import { VendorsListComponent } from './vendors-list/vendors-list.component';
const ModuleRoutes: Routes = [
{
path:'login',component: LoginComponent
......@@ -28,6 +30,12 @@ const ModuleRoutes: Routes = [
},
{
path:'payment',component: PaymentComponent
},
{
path:'venues',component: VenuesComponent
},
{
path:'vendors-list',component: VendorsListComponent
}
];
......
......@@ -8,12 +8,17 @@ import { SlickCarouselModule } from 'ngx-slick-carousel';
import { LoginaccountComponent } from './loginaccount/loginaccount.component';
import { LoginvendorsComponent } from './loginvendors/loginvendors.component';
import { PaymentComponent } from './payment/payment.component';
import { VenuesComponent } from './venues/venues.component';
import { VendorsListComponent } from './vendors-list/vendors-list.component';
import { Ng5SliderModule } from 'ng5-slider';
@NgModule({
declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent],
declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent, VenuesComponent, VendorsListComponent],
imports: [
CommonModule,
moduleRouting,
SlickCarouselModule
SlickCarouselModule,
Ng5SliderModule
]
})
export class BodyModule { }
<div class="m-vendorsList">
<div class="m-vendorsList_page">
<div class="container">
<ul>
<li><a href="#">Messages</a></li>
<li><a href="#">Checklist</a></li>
<li><a href="#">Guest List</a></li>
<li><a href="#">Budget</a></li>
<li><a href="#">Favorite Vendors</a></li>
</ul>
<div class="m-vendorsList_page_input_box">
<div class="input_det input_det1">
<input placeholder="eg, rustic venues, florists, beach wedding">
</div>
<div class="input_det input_det2">
<input placeholder="North Pole, AK">
<div class="m-vendorsList_page_input_box_button">
<i class="fas fa-search"></i>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="m-vendorsList_det">
<div class="container">
<div class="m-vendorsList_refine_rating">
<div class="row">
<div class="col">
<h4>Refine By </h4>
</div>
<div class="col"></div>
<img src="../../../assets/img/avgselect.png">
<div class="col">
<select class="form-control" id="sel1" name="sellist1">
<option>Average Rating</option>
<option>Price Filter</option>
<option>Vendor Name</option>
</select>
</div>
</div>
</div>
<div class="m-vendorsList_dpa">
<div class="row">
<div class="col-md-3">
<div class="dfprav">
<div class="distance">
<p>Distance From</p>
<ng5-slider [(value)]="value" [options]="options">
</ng5-slider>
<input class="input-dfprav">
</div>
<div class="price">
<p>Price</p>
<input class="input-dfprav">
</div>
<div class="Availability">
<p>Availability</p>
<input class="input-dfprav" placeholder="Available Date" >
</div>
</div>
</div>
<div class="col-md-9"></div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
*{
font-family: 'Roboto', sans-serif;
}
.m-vendorsList{
padding-top: 100px;
.m-vendorsList_page{
background-color: #fcfde4;
.container{
ul{
padding-top: 50px;
padding-left: 0px;
li{
list-style: none;
display: inline-block;
margin-right: 50px;
a{
font-weight: 400;
font-size: 16px;
color: #5f5f5f;
}
}
}
.m-vendorsList_page_input_box{
padding-top: 10px;
padding-bottom: 60px;
.input_det{
width: 50%;
display: inline-block;
height: 60px;
background-color: #ffffff;
padding: 10px 10px 10px 10px;
input{
float: left;
width: calc(100% - 40px);
height: 100%;
border-radius: 20px;
border: transparent;
outline: none;
padding-left: 20px;
&::placeholder{
opacity: .5;
}
}
.m-vendorsList_page_input_box_button{
text-align: center;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgb(194, 55, 194);
i{
font-size: 18px;
padding-top: 11px;
color: #e2e2e2;
}
}
}
.input_det1{
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
position: relative;
input{
border-top-right-radius: 0px;
border-bottom-right-radius: 0px ;
border-right: 1px solid #c717c7 ;
width: 100% ;
}
.m-vendorsList_page_input_box_button{
display: none;
}
}
.input_det2{
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
}
}
}
.m-vendorsList_det{
margin: 27px 0 0 0;
.container{
.m-vendorsList_refine_rating{
.row
{
h4{
color: #a8a8a8;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 18px;
margin: 37px 0 0 0;
}
select{
border: none;
border-bottom: 1px solid #9e9e9e;
border-radius: 0px;
text-decoration: none;
width: 50%;
font-size: 16px;
outline: none;
cursor: pointer;
option{
font-size: 16px;
color: #b638b6;
display: block;
line-height: 22px;
padding: 14px 16px;
}
}
img{
height: 22px;
margin-top: 12px;
}
}
}
.m-vendorsList_dpa{
margin-top: 20px;
margin-bottom: 20px;
.row{
.dfprav{
background-color: #f6f5f5;
input{
background: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
width: 90%;
font-size: 15px;
outline: none;
margin-top:15px;
margin-bottom: 15px;
}
.input-dfprav
{
margin-left: 15px;
}
}
}
}
}
}
}
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { VendorsListComponent } from './vendors-list.component';
describe('VendorsListComponent', () => {
let component: VendorsListComponent;
let fixture: ComponentFixture<VendorsListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ VendorsListComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(VendorsListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Options } from 'ng5-slider';
@Component({
selector: 'app-vendors-list',
templateUrl: './vendors-list.component.html',
styleUrls: ['./vendors-list.component.scss']
})
export class VendorsListComponent implements OnInit {
value: number = 123;
options: Options = {
floor: 0,
ceil: 250
};
constructor() { }
ngOnInit() {
}
}
<div class="m-venues">
<div class="m-venues_background_wedding">
<div class="container">
<div class="m-venues_wedding_st">
<h3>
Wedding planning starts here..
</h3>
<p>
We offers reviews, pricing and availability for 21,172 wedding venues.
Search for the best local wedding locations in your area to plan your perfect wedding
</p>
</div>
<div class="m-venues_wedding_margin"></div>
</div>
</div>
<!------------------------------venuse------------------------------------------------------------->
<div class="m-venues_all_halls">
<div class="container">
<div class="row">
<div class="col">
<a>
<img class="venues_halls_img" src="../../../assets/img/museums.jpg">
<p>Museums</p>
</a>
</div>
<div class="col">
<a>
<img class="venues_halls_img" src="../../../assets/img/fams.jpg">
<p>Fams</p>
</a>
</div>
<div class="col">
<a>
<img class="venues_halls_img" src="../../../assets/img/restaurants.jpg">
<p>Restaurants</p>
</a></div>
<div class="col">
<a>
<img class="venues_halls_img" src="../../../assets/img/hotels.jpg">
<p>Hotels</p>
</a></div>
</div>
<div class="row">
<div class="col">
<a>
<img class="venues_halls_img" src="../../../assets/img/bedBreakfasts.jpg">
<p>Bed & Breakfasts</p>
</a></div>
<div class="col">
<a>
<img class="venues_halls_img" src="../../../assets/img/banquetHalls.jpg">
<p>Banquet Halls</p>
</a></div>
<div class="col">
<a>
<img class="venues_halls_img" src="../../../assets/img/seashores.jpg">
<p>Seashores</p>
</a></div>
<div class="col">
<a>
</a></div>
</div>
</div>
</div>
<!-------------------------------why moments------------------------------------------------------>
<div class="m-venues_why_moments">
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="../../../assets/img/1519733657_15.png">
<h5>Find the Best Wedding Vendors</h5>
<hr>
<p>offers the largest directory of local wedding vendors in the U.S. and Canada, along with 3 million wedding reviews. We offer more reviews than all other wedding sites.</p>
</div>
<div class="col-md-3">
<img src="../../../assets/img/1519733657_16.png">
<h5>Find the Best Wedding Vendors</h5>
<hr>
<p>offers the largest directory of local wedding vendors in the U.S. and Canada, along with 3 million wedding reviews. We offer more reviews than all other wedding sites.</p>
</div>
<div class="col-md-3">
<img src="../../../assets/img/1519733657_17.png">
<h5>Find the Best Wedding Vendors</h5>
<hr>
<p>offers the largest directory of local wedding vendors in the U.S. and Canada, along with 3 million wedding reviews. We offer more reviews than all other wedding sites.</p>
</div>
<div class="col-md-3">
<img src="../../../assets/img/1519733657_18.png">
<h5>Find the Best Wedding Vendors</h5>
<hr>
<p>offers the largest directory of local wedding vendors in the U.S. and Canada, along with 3 million wedding reviews. We offer more reviews than all other wedding sites.</p>
</div>
</div>
<div class="row m-venues_moments-head">
<img src="../../../assets/img/22.png">
<h3>WHY MOMENTS?</h3>
<p>With the largest network of local wedding vendors, WeddingWire offers the most comprehensive wedding site out there. You will be able to find the best vendor for your budget and plan your wedding exactly the way you envisioned it. We make it simple to get the pricing, availability, and answers you need from wedding venues and wedding vendors across every town. In addition to the wedding industry’s best and brightest wedding vendors, WeddingWire offers free, easy-to-use wedding planning tools like customizable wedding checklists to keep your tasks in order, wedding websites with over 120 different design templates and a comprehensive wedding registry for all your guests. You can stay on top of all the details while on-the-go with the WeddingWire app, which features a wedding countdown to your big day. Meanwhile, our dedicated team of editors provides you with the very best wedding ideas and curated wedding photos filled with inspiration to help you choose between florists, cakes, photographers and wedding venues when you start planning the details. WeddingWire will help turn your vision into a reality!</p>
</div>
</div>
</div>
</div>
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
*{
font-family: 'Roboto', sans-serif;
}
.m-venues{
padding-top: 100px;
.m-venues_background_wedding{
background: url("../../../assets/img/bannner-back.png");
// background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("../../../assets/img/bannner-back.png");
background-size: inherit;
background-repeat: no-repeat;
}
.container{
width: 70%;
.m-venues_wedding_st{
text-align: center;
padding: 170px 0 0 0;
h3{
color: #ffffff;
font-weight: 400;
font-size: 36px;
margin: 0;
}
p{
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 15px;
padding: 10px 100px;
}
}
.m-venues_wedding_margin{
margin: 0 auto;
border-bottom: 6px solid #c236c2;
width: 245px;
border-radius: 15px;
}
}
/***************************venues hall*********************************************/
.m-venues_all_halls{
margin-top: 26px;
.container{
.row{
.venues_halls_img{
width: 100%;
height: 170px;
object-fit: cover;
}
p{
margin: 0;
color: #646464;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px 0 10px 0;
text-align: left;
}
}
}
}
/***********************why moments********************************/
.m-venues_why_moments{
padding-top: 50px;
.container{
.row{
.col-md-3{
h5{
font-weight: 400;
font-size: 18px;
margin: 10px 0 0 0;
color: #767676;
}
hr{
width: 50px;
border: 1px solid rgb(255, 156, 0);
margin: 16px 0px 16px 0px;
}
p{
font-weight: 400;
font-size: 16px;
color: #626262;
}
}
}
.m-venues_moments-head{
padding-top: 20px;
h3{
padding-left: 15px;
color: #767676;
font-weight: 400;
font-size: 18px;
margin-bottom: 0px;
line-height: 2;
}
p{
font-weight: 400;
font-size: 16px;
color: #a9a9a9;
padding-top: 20px;
padding-bottom: 20px;
}
}
}
}
}
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { VenuesComponent } from './venues.component';
describe('VenuesComponent', () => {
let component: VenuesComponent;
let fixture: ComponentFixture<VenuesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ VenuesComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(VenuesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-venues',
templateUrl: './venues.component.html',
styleUrls: ['./venues.component.scss']
})
export class VenuesComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
......@@ -46,7 +46,7 @@
<a class="brd">|</a>
</li>
<li class="nav-item ">
<a class="Text-Style nav-link " href="#">VENUES</a>
<a class="Text-Style nav-link " href="venues">VENUES</a>
</li>
<li class="nav-item linec">
<a class="brd" >|</a>
......@@ -58,39 +58,39 @@
<div class="col">
<div class="vendors_drop_item">
<img src="../../../assets/img/1507722456_56cdf37898bb3bb1b3356fad8831dc1a--on-your-wedding-day-pre-wedding.jpg">
<a>Wedding Photographers</a>
<a href="vendors-list">Wedding Photographers</a>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1508740269_marriage-marry-009-256.png">
<a>Wedding DJs</a>
<a href="vendors-list">Wedding DJs</a>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1509360077_images.png">
<a>Wedding Favors & Gifts</a>
<a href="vendors-list">Wedding Favors & Gifts</a>
</div>
</div>
<div class="col">
<div class="vendors_drop_item">
<img src="../../../assets/img/1507875334_wedding-icon-12670446.jpg">
<a>Wedding Venues</a>
<a href="vendors-list">Wedding Venues</a>
</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">
<a>Wedding Invitations</a>
<a href="vendors-list">Wedding Invitations</a>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1509360090_wedding_17-512.png">
<a>Wedding Jewelry</a>
<a href="vendors-list">Wedding Jewelry</a>
</div>
</div>
<div class="col">
<div class="vendors_drop_item">
<img src="../../../assets/img/1517468986_wedding-planning_318-99774.jpg">
<a>Planning</a>
<a href="vendors-list">Planning</a>
</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">
<a>Wedding Caterers</a>
<a href="vendors-list">Wedding Caterers</a>
</div>
</div>
</div>
......
......@@ -5,7 +5,7 @@
}
nav{
position: fixed;
z-index: 1;
z-index: 4;
background-color: #fff;
width: 100%;
height:100px ;
......@@ -133,6 +133,8 @@ height:100px ;
font-weight: 400;
font-size: 12px;
color: #a1a1a1;
text-decoration: none;
}
}
}
......@@ -165,6 +167,7 @@ height:100px ;
font-weight: 400;
font-size: 14px;
color: #a1a1a1;
text-decoration: none;
}
}
}
......
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