diff --git a/angular.json b/angular.json
index 58359f6..63588a9 100644
--- a/angular.json
+++ b/angular.json
@@ -29,9 +29,11 @@
"styles": [
"src/styles.scss",
"src/assets/responsive.scss",
-
+
+
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/slick-carousel/slick/slick.scss",
+ "node_modules/font-awesome/css/font-awesome.css",
"node_modules/slick-carousel/slick/slick-theme.scss"
],
"scripts": [
diff --git a/package-lock.json b/package-lock.json
index 80322b0..5aa1555 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -997,6 +997,11 @@
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"dev": true
},
+ "angular-font-awesome": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/angular-font-awesome/-/angular-font-awesome-3.1.2.tgz",
+ "integrity": "sha1-k3hzJhLY6MceDXwvqg+t3H+Fjsk="
+ },
"ansi-colors": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -1066,6 +1071,7 @@
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
"dev": true,
+ "optional": true,
"requires": {
"delegates": "^1.0.0",
"readable-stream": "^2.0.6"
@@ -2282,7 +2288,8 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"constants-browserify": {
"version": "1.0.0",
@@ -2681,7 +2688,8 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"depd": {
"version": "1.1.2",
@@ -3501,6 +3509,11 @@
}
}
},
+ "font-awesome": {
+ "version": "4.7.0",
+ "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+ "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+ },
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -3631,7 +3644,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"aproba": {
"version": "1.2.0",
@@ -3652,12 +3666,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3672,17 +3688,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3799,7 +3818,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -3811,6 +3831,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3825,6 +3846,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -3832,12 +3854,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@@ -3856,6 +3880,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3936,7 +3961,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -3948,6 +3974,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -4033,7 +4060,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -4069,6 +4097,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4088,6 +4117,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -4131,12 +4161,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
@@ -4145,6 +4177,7 @@
"resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
"integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
"dev": true,
+ "optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"inherits": "~2.0.0",
@@ -4157,6 +4190,7 @@
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"dev": true,
+ "optional": true,
"requires": {
"aproba": "^1.0.3",
"console-control-strings": "^1.0.0",
@@ -4194,7 +4228,8 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
"integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"get-stream": {
"version": "3.0.0",
@@ -4374,7 +4409,8 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"has-value": {
"version": "1.0.0",
@@ -5113,7 +5149,8 @@
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
"integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"is-windows": {
"version": "1.0.2",
@@ -5746,6 +5783,7 @@
"resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"dev": true,
+ "optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"parse-json": "^2.2.0",
@@ -5758,7 +5796,8 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
@@ -6031,7 +6070,8 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
- "dev": true
+ "dev": true,
+ "optional": true
},
"map-visit": {
"version": "1.0.0",
@@ -6700,6 +6740,7 @@
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
"dev": true,
+ "optional": true,
"requires": {
"are-we-there-yet": "~1.1.2",
"console-control-strings": "~1.1.0",
@@ -7735,6 +7776,7 @@
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
"integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
"dev": true,
+ "optional": true,
"requires": {
"load-json-file": "^1.0.0",
"normalize-package-data": "^2.3.2",
@@ -7746,6 +7788,7 @@
"resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
"integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
"dev": true,
+ "optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"pify": "^2.0.0",
@@ -7756,7 +7799,8 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
- "dev": true
+ "dev": true,
+ "optional": true
}
}
},
@@ -7765,6 +7809,7 @@
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
"integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
"dev": true,
+ "optional": true,
"requires": {
"find-up": "^1.0.0",
"read-pkg": "^1.0.0"
@@ -7775,6 +7820,7 @@
"resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
"integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
"dev": true,
+ "optional": true,
"requires": {
"path-exists": "^2.0.0",
"pinkie-promise": "^2.0.0"
@@ -7785,6 +7831,7 @@
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
"integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
"dev": true,
+ "optional": true,
"requires": {
"pinkie-promise": "^2.0.0"
}
@@ -9118,6 +9165,7 @@
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
"integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
"dev": true,
+ "optional": true,
"requires": {
"is-utf8": "^0.2.0"
}
@@ -10457,6 +10505,7 @@
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
"dev": true,
+ "optional": true,
"requires": {
"string-width": "^1.0.2 || 2"
}
diff --git a/package.json b/package.json
index 85a9e09..ee9b4d0 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,10 @@
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
+ "angular-font-awesome": "^3.1.2",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
+ "font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"ng5-slider": "^1.2.4",
"ngx-slick-carousel": "^0.4.4",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index aeee6da..febce68 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import{ BodyModule } from './body/body.module';
import { FooterComponent } from './footer/footer.component';
+
@NgModule({
declarations: [
AppComponent,
@@ -16,6 +17,7 @@ import { FooterComponent } from './footer/footer.component';
BrowserModule,
AppRoutingModule,
BodyModule
+
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/body/aboutservice/aboutservice.component.html b/src/app/body/aboutservice/aboutservice.component.html
new file mode 100644
index 0000000..d9927ab
--- /dev/null
+++ b/src/app/body/aboutservice/aboutservice.component.html
@@ -0,0 +1,344 @@
+<div class="m_aboutservice">
+ <div class="m_aboutservice_listmenu">
+ <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_aboutservice_listmenu_input_box">
+ <div class="input_det input_det1">
+ <input placeholder="Find Vendors">
+
+ </div>
+ <div class="input_det input_det2">
+ <input placeholder="North Pole, AK">
+ <div class="m_aboutservice_listmenu_input_box_button">
+ <i class="fas fa-search"></i>
+ </div>
+
+ </div>
+ <div class="clear"></div>
+ </div>
+ </div>
+ </div>
+ <div class="m_aboutservice_favname">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-2 m_abt_img">
+ <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" >
+ </div>
+ <div class="col-md-10 m_abt_reve">
+ <h4>Catie Bartlett Photography</h4>
+ <div class="row">
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p>2 Reviews, 54645, Bangalore, india</p>
+ </div>
+
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="m_aboutservice_slide">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-9">
+
+
+
+ <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
+ </ol>
+ <div class="carousel-inner" role="listbox">
+ <!-- Slide One - Set the background image for this slide in the line below -->
+ <div class="carousel-item active" style="background-image: url('../../../assets/img/1516275470_1-royal-enfield-interceptor-650-images-side-profile-2.jpg')">
+
+ </div>
+ <!-- Slide Two - Set the background image for this slide in the line below -->
+ <div class="carousel-item" style="background-image: url('../../../assets/img/1516273620_1-Species_Great_White_Shark_WWF_Carlos_Aguilera.jpg')">
+
+ </div>
+ <!-- Slide Three - Set the background image for this slide in the line below -->
+ <div class="carousel-item" style="background-image: url('../../../assets/img/1516273775_1-20141204_JWA2712tiger-web.jpg')">
+
+ </div>
+ <div class="carousel-item" style="background-image: url('../../../assets/img/1516275470_1-royal-enfield-interceptor-650-images-side-profile-2.jpg')">
+
+ </div>
+ <div class="carousel-item" style="background-image: url('../../../assets/img/1516273403_1-LA+Galaxy+vs+San+Jose+Earthquakes+nX6apMVNHACx.jpg')">
+
+ </div>
+ <div class="carousel-item" style="background-image: url('../../../assets/img/1516276015_1-4730691-fish-images.jpg')">
+
+ </div>
+ </div>
+
+ </div>
+ <div class="m_color_rev">
+ <div class="row">
+ <div class="col">
+ <div class="row">
+ <div class="col cls_img"><img src="../../../assets/img/80.png"></div>
+ <div class="col cls_txt">
+ <div class="m_color_reve_cnt">
+ <h1>2 Review</h1>
+ <h6>4/5.0</h6>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="row">
+ <div class="col cls_img"><img src="../../../assets/img/82.png"></div>
+ <div class="col cls_txt">
+ <div class="m_color_reve_cnt">
+ <h1>₦2500</h1>
+ <h6>Most Popular Price</h6>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="row">
+ <div class="col cls_img"><img src="../../../assets/img/83.png"></div>
+ <div class="col cls_txt">
+ <div class="m_color_reve_cnt">
+ <h1>Availability</h1>
+ <h6>Contact for Availability</h6>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+
+
+
+ <div class="m_abt_slidetab">
+
+
+ <div class="m_abt_tab">
+ <ul class="nav nav-pills" role="tablist">
+ <li class="nav-item">
+ <a class="nav-link active" data-toggle="pill" href="#about">About</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" data-toggle="pill" href="#reviews">Reviews</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" data-toggle="pill" href="#photos">Photos</a>
+ </li>
+
+ </ul>
+ <div class="tab-content">
+ <div id="about" class="container tab-pane active">
+ <div class="m_abt_about">
+ <h3>About Catie Bartlett Photography</h3>
+ <p>My name is Catie Bartlett, and I am a professional portrait and wedding photographer located in Alaska,
+ and also accepting weddings all over the world!</p>
+ <a>Read More </a>
+ </div>
+ </div>
+ <div id="reviews" class="container tab-pane fade"><br>
+ <div class="m_abt_review_main">
+ <h3 class="review_cnt_head">Review for Catie Bartlett Photography
+ </h3>
+ <div class="review_cnt_btn">
+ <button class="btn_write_review">Write a Review</button>
+ </div>
+ <div class="row m_abt_write_row">
+ <div class="col">
+ <div class="m_abt_w_review_fstclm">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <h1 class="m_abt_wr_h">4</h1>
+ <h6 class="m_abt_wr_txt">OUT OF 5.0</h6>
+ </div>
+ </div>
+ <!-------------------quality service----------------------------------->
+ <div class="col">
+ <div class="m_abt_wr_img"><img src="../../../assets/img/79.png"></div>
+ <div class="m_abt_wr_h_txt"><h2>Quality of Service</h2></div>
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <div class="m_abt_wr_h_txt"><p>4</p></div>
+ <div class="m_abt_wr_img"><img src="../../../assets/img/85.png"></div>
+ <div class="m_abt_wr_h_txt"><h2>Value</h2></div>
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <div class="m_abt_wr_h_txt"><p>4</p></div>
+ </div>
+ <!---------------------Responsiveness colum--------->
+ <div class="col">
+ <div class="m_abt_wr_img"><img src="../../../assets/img/79.png"></div>
+ <div class="m_abt_wr_h_txt"><h2>Responsiveness</h2></div>
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <div class="m_abt_wr_h_txt"><p>4</p></div>
+ <div class="m_abt_wr_img"><img src="../../../assets/img/86.png"></div>
+ <div class="m_abt_wr_h_txt"><h2>Flexibility</h2></div>
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <div class="m_abt_wr_h_txt"><p>4</p></div>
+ </div>
+ <div class="col">
+ <div class="m_abt_wr_img"><img src="../../../assets/img/81.png"></div>
+ <div class="m_abt_wr_h_txt"><h2>Professional</h2></div>
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <div class="m_abt_wr_h_txt"><p>4</p></div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div id="photos" class="container tab-pane fade"><br>
+ <div class="tb_pht">
+ <h3>Photos</h3>
+ <div class="row">
+ <div class="col-md-4"><img src="../../../assets/img/1516275470_1-royal-enfield-interceptor-650-images-side-profile-2.jpg"></div>
+ <div class="col-md-4"><img src="../../../assets/img/1516273620_1-Species_Great_White_Shark_WWF_Carlos_Aguilera.jpg"></div>
+ <div class="col-md-4"><img src="../../../assets/img/1516273775_1-20141204_JWA2712tiger-web.jpg"></div>
+ </div>
+ <div class="row upper_row">
+ <div class="col-md-4"><img src="../../../assets/img/1516275470_1-royal-enfield-interceptor-650-images-side-profile-2.jpg"></div>
+ <div class="col-md-4"><img src="../../../assets/img/1516273403_1-LA+Galaxy+vs+San+Jose+Earthquakes+nX6apMVNHACx.jpg"></div>
+ <div class="col-md-4"><img src="../../../assets/img/1516276015_1-4730691-fish-images.jpg"></div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+
+
+ </div>
+ </div>
+ <div class="col-md-3">
+ <div class="m_abt_msgvendors">
+ <img src="../../../assets/img/77.png">
+ <div class=" m_abt_msg_header">
+
+ <h3>Message Vendor</h3>
+ <hr>
+ </div>
+ <div class="m_abt_msg_input">
+ <input type="text" placeholder="First Name">
+ <input type="text" placeholder="Last Name">
+ <input type="email" placeholder="Email">
+ <input tabindex="text" placeholder="Date">
+ <textarea class="txt_mt"placeholder="Write your message........."></textarea>
+ <div class="m_abt_btn">
+ <button class="abt_btn_m">Request Pricing</button>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+</div>
+
+
+
+</div>
\ No newline at end of file
diff --git a/src/app/body/aboutservice/aboutservice.component.scss b/src/app/body/aboutservice/aboutservice.component.scss
new file mode 100644
index 0000000..1481298
--- /dev/null
+++ b/src/app/body/aboutservice/aboutservice.component.scss
@@ -0,0 +1,435 @@
+@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_aboutservice{
+ padding-top: 100px;
+ padding-bottom: 50px;
+ .m_aboutservice_listmenu{
+ 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_aboutservice_listmenu_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_aboutservice_listmenu_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_aboutservice_favname{
+ margin-top: 10px;
+ .container{
+ .row{
+ .m_abt_img{
+ width: 50%;
+ height: 50%;
+ }
+ img{
+ width: 120px;
+ height: 120px;
+ border-radius: 50%;
+ }
+ .m_abt_reve{
+ h4{
+ margin: 0;
+ color: #4c4c4c;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 600;
+ font-size: 18px
+
+ }
+ p{
+ margin-bottom: 0px;
+ vertical-align: middle;
+ padding-left: 30px;
+ display: inline-block;
+ }
+ .fav_hr_m{
+
+ }
+/************rat*****************/
+
+ .fav{
+ width: 50%;
+ height: 50%;
+ .fav_img{
+ width: 5%;
+ height: 48%;
+ }
+ }
+ }
+
+
+ }
+ }
+ }
+ .m_aboutservice_slide{
+ margin-top: 20px;
+ .row
+ {
+ .m_abt_msgvendors{
+ background: #f0f0f0;
+
+ padding: 15px;
+ margin-bottom: 5px;
+ .m_abt_msg_header{
+ float: right;
+ margin-top: 11px;
+ margin-right: 49px;
+ h3{
+ font-family: 'Roboto', sans-serif;
+ font-weight: 600;
+ font-size: 18px;
+ color: #616161;
+ margin: 0;
+ }
+ hr{
+ border-bottom: 3px solid #f339f3;
+ width: 28px;
+ border-radius: 13px;
+ margin-top: 0px;
+ margin-top: 4px;
+ }
+ }
+ .m_abt_msg_input{
+ input{
+ background-color: transparent;
+ border: none;
+ border-bottom: 1px solid #9e9e9e;
+ border-radius: 0;
+ outline: none;
+ height: 3rem;
+ width: 100%;
+ font-size: 1rem;
+ margin: 0 0 20px 0;
+ padding: 0;
+ outline: none;
+ ::placeholder{
+ color: #5f5f5f;
+ }
+ }
+ textarea{
+ width: 100%;
+ height: 3rem;
+ height: 100px;
+ background-color: transparent;
+ resize: none;
+ outline: none;
+ ::placeholder{
+ color: #5f5f5f;
+ }
+ }
+ .m_abt_btn{
+
+ .abt_btn_m{
+ background: #ff9c00 ;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 300;
+ font-size: 18px;
+ color: #fff;
+ border-radius: 30px;
+ margin: 20px 0;
+ outline: none;
+ border: 1px solid #ff9c00;
+ height:37px;
+ width: 100%;
+
+ }
+ }
+ }
+ }
+
+ .m_abt_slidetab{
+ margin-top: 10px;
+ .m_abt_tab {
+ li{
+
+ a{
+ font-weight: 400;
+ font-size: 16px;
+ color: #616161;
+ float: left;
+ margin: 0 15px 0 0;
+ cursor: pointer;
+ }
+ }
+ h3{
+ font-weight: 600;
+ font-size: 18px;
+ color: #616161;
+ margin-top:10px;
+ }
+ p{
+
+ font-weight: 400;
+ font-size: 15px;
+ color: #9e9d9d;
+ text-align: justify;
+ margin: 0;
+ margin-bottom: 15px;
+ }
+ a{
+ font-family: 'Roboto', sans-serif;
+ font-weight: 600;
+ font-size: 16px;
+ color: #616161;
+ margin-top: 20px;
+ cursor: pointer;
+ }
+ .m_abt_review_main{
+ .review_cnt_head{
+ display: contents;
+ margin: 0;
+ color: #4c4c4c;
+
+ font-weight: 600;
+ font-size: 20px;
+ }
+ .review_cnt_btn{
+ display: contents;
+ text-align: end;
+ .btn_write_review{
+ color: #e5a213;
+ font-weight: 400;
+ font-size: 16px;
+ border: 1px solid #e5a213;
+ padding: 10px 15px;
+ border-radius: 30px;
+ background: transparent;
+ float: right;
+ outline: none;
+
+ }
+ }
+ .m_abt_w_review_fstclm{
+ background: #e9e9e9;
+ padding: 18px;
+ .m_abt_wr_h{
+ text-align: center;
+ color: #464646;
+ font-weight: 600;
+ font-size: 80px;
+
+ }
+ .m_abt_wr_txt{
+ text-align: center;
+ color: #4b4a4a;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 400;
+ font-size: 20px;
+ padding: 0 0 20px 0;
+ }
+ }
+ .m_abt_wr_h_txt{
+ width: 128px;
+ h2{
+ color: #7d7d7d;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 600;
+ font-size: 16px;
+ margin: 5px 0;
+ }
+
+ }
+ .m_abt_write_row{
+ margin-top: 36px;
+ }
+ }
+
+ .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+ border: 1px solid #333;
+ border-radius: 50px;
+ background: transparent;
+ }
+ .tb_pht{
+ img{
+ width: 254px;
+ height: 237px;
+
+ }
+ .upper_row{
+ margin-top: 20px;
+ }
+ }
+ }
+ }/*
+ .slick-slide {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ li.slick-active button:before {
+ color: red;
+ opacity: 0.75;
+ }
+
+ .slick-dots {
+ bottom: 15px;
+ .slick-dots li button::before{
+ color: red;
+ }
+ .slick-dots li button{
+ color:whitesmoke;
+ }
+ }
+ }
+ .carousel-inner > .item > img,
+ .carousel-inner > .item > a > img {
+ width: 100%;
+ margin: auto;
+ }
+ .container {width: 980px !important;}*/
+ .carousel-item {
+ height: 72vh;
+ min-height: 350px;
+ background: no-repeat center center scroll;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+ .m_color_rev{
+ background: #c237c2;
+ height: 80px;
+ .row{
+ .cls_img{
+ text-align: center;
+ }
+ .cls_txt{
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ img{
+ margin: 18px 0 0 0;
+ }
+ .m_color_reve_cnt{
+ margin-left: -40px;
+ h1{
+ color: #fff;
+
+ font-weight: 400;
+ font-size: 18px;
+ margin: 18px 0 0 0;
+ }
+ h6{
+ font-weight: 400;
+ font-size: 14px;
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
+ }
+ .rat_box{
+
+ overflow: auto;
+/* line-height: 1; */
+vertical-align: middle;
+display: inline-block;
+ /****** Style Star Rating Widget *****/
+
+ .rating {
+ border: none;
+ float: left;
+ width: 143px;
+ }
+
+ .rating > input { display: none; }
+ .rating > label:before {
+ margin: 5px;
+ font-size: 1.25em;
+ font-family: FontAwesome;
+ display: inline-block;
+ content: "\f005";
+ }
+
+ .rating > .half:before {
+ content: "\f089";
+ position: absolute;
+ }
+
+ .rating > label {
+ color: #ddd;
+ float: right;
+ margin-bottom: 0px;
+ }
+
+ /***** CSS Magic to Highlight Stars on Hover *****/
+
+ .rating > input:checked ~ label, /* show gold star when clicked */
+ .rating:not(:checked) > label:hover, /* hover current star */
+ .rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
+
+ .rating > input:checked + label:hover, /* hover current star when changing rating */
+ .rating > input:checked ~ label:hover,
+ .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+ .rating > input:checked ~ label:hover ~ label { color: #FFED85; }
+ }
+
+}
\ No newline at end of file
diff --git a/src/app/body/aboutservice/aboutservice.component.spec.ts b/src/app/body/aboutservice/aboutservice.component.spec.ts
new file mode 100644
index 0000000..93d03ae
--- /dev/null
+++ b/src/app/body/aboutservice/aboutservice.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutserviceComponent } from './aboutservice.component';
+
+describe('AboutserviceComponent', () => {
+ let component: AboutserviceComponent;
+ let fixture: ComponentFixture<AboutserviceComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AboutserviceComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AboutserviceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/body/aboutservice/aboutservice.component.ts b/src/app/body/aboutservice/aboutservice.component.ts
new file mode 100644
index 0000000..44e9d63
--- /dev/null
+++ b/src/app/body/aboutservice/aboutservice.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+@Component({
+ selector: 'app-aboutservice',
+ templateUrl: './aboutservice.component.html',
+ styleUrls: ['./aboutservice.component.scss']
+})
+export class AboutserviceComponent implements OnInit {
+
+ constructor(private route: ActivatedRoute, private router: Router) { }
+
+ ngOnInit() {
+ }
+/*slideConfig = {"slidesToShow": 1, "slidesToScroll": 1,"arrow": false,"dots":true,"autoplay":false,"autoplaySpeed":2000};*/
+ goto(path,data=null){
+
+ this.router.navigateByUrl(path,{queryParams:data});
+ }
+
+
+}
diff --git a/src/app/body/body-routing.module.ts b/src/app/body/body-routing.module.ts
index 7e9a2a9..a2a9de5 100644
--- a/src/app/body/body-routing.module.ts
+++ b/src/app/body/body-routing.module.ts
@@ -10,6 +10,7 @@ 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 { AboutserviceComponent } from './aboutservice/aboutservice.component';
const ModuleRoutes: Routes = [
{
path:'login',component: LoginComponent
@@ -40,6 +41,9 @@ const ModuleRoutes: Routes = [
},
{
path:'vendors-list',component: VendorsListComponent
+ },
+ {
+ path:'aboutservice',component: AboutserviceComponent
}
];
diff --git a/src/app/body/body.module.ts b/src/app/body/body.module.ts
index 8420292..ab38ee0 100644
--- a/src/app/body/body.module.ts
+++ b/src/app/body/body.module.ts
@@ -12,16 +12,18 @@ import { PlanningComponent } from './planning/planning.component';
import { VenuesComponent } from './venues/venues.component';
import { VendorsListComponent } from './vendors-list/vendors-list.component';
import { Ng5SliderModule } from 'ng5-slider';
-
+import { AboutserviceComponent } from './aboutservice/aboutservice.component';
+import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
- declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent, VenuesComponent, VendorsListComponent,PlanningComponent],
+ declarations: [LoginComponent, JoinComponent, HomeComponent, LoginaccountComponent, LoginvendorsComponent, PaymentComponent, VenuesComponent, VendorsListComponent,PlanningComponent, AboutserviceComponent],
imports: [
CommonModule,
moduleRouting,
SlickCarouselModule,
- Ng5SliderModule
+ Ng5SliderModule,
+ AngularFontAwesomeModule
]
})
export class BodyModule { }
diff --git a/src/app/body/vendors-list/vendors-list.component.html b/src/app/body/vendors-list/vendors-list.component.html
index 1b822ae..1b76b6b 100644
--- a/src/app/body/vendors-list/vendors-list.component.html
+++ b/src/app/body/vendors-list/vendors-list.component.html
@@ -16,7 +16,7 @@
<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>
+ <i class="fas fa-search"></i>
</div>
</div>
@@ -50,14 +50,16 @@
<div class="dfprav">
<div class="distance">
<p>Distance From</p>
- <ng5-slider [(value)]="value" [options]="options">
+ <ng5-slider [(value)]=" dist" [options]="count">
</ng5-slider>
<input class="input-dfprav">
</div>
<div class="price">
<p>Price</p>
-
+ <ng5-slider [(value)]=" pricevalue" [options]="rate">
+
+ </ng5-slider>
<input class="input-dfprav">
</div>
<div class="Availability">
@@ -67,7 +69,266 @@
</div>
</div>
</div>
- <div class="col-md-9"></div>
+ <div class="col-md-9">
+ <div class="m_vendors_left_rev">
+ <div class="row">
+ <div class="col">
+ <div class="tab_img">
+ <a (click)="goto('aboutservice')"> <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse"></a>
+ <h4>Chugach Peaks Photography</h4>
+ </div>
+ <div class="m_rate_cnt">
+ <div class="row">
+ <div class="col">
+ <h3>324235,Bangalore,india</h3>
+ <p>Most Popular Price: Rs :2000</p>
+ </div>
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p class="rev_m">2 Reviews</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="tab_img">
+ <a (click)="goto('aboutservice')"> <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse"></a>
+ <h4>Chugach Peaks Photography</h4>
+ </div>
+ <div class="m_rate_cnt">
+ <div class="row">
+ <div class="col">
+ <h3>324235,Bangalore,india</h3>
+ <p>Most Popular Price: Rs :2000</p>
+ </div>
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p class="rev_m">2 Reviews</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <div class="tab_img">
+ <a (click)="goto('aboutservice')"> <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse"></a>
+ <h4>Chugach Peaks Photography</h4>
+ </div>
+ <div class="m_rate_cnt">
+ <div class="row">
+ <div class="col">
+ <h3>324235,Bangalore,india</h3>
+ <p>Most Popular Price: Rs :2000</p>
+ </div>
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p class="rev_m">2 Reviews</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="tab_img">
+ <a (click)="goto('aboutservice')"> <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse"></a>
+ <h4>Chugach Peaks Photography</h4>
+ </div>
+ <div class="m_rate_cnt">
+ <div class="row">
+ <div class="col">
+ <h3>324235,Bangalore,india</h3>
+ <p>Most Popular Price: Rs :2000</p>
+ </div>
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p class="rev_m">2 Reviews</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <div class="tab_img">
+ <a (click)="goto('aboutservice')"> <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse"></a>
+ <h4>Chugach Peaks Photography</h4>
+ </div>
+ <div class="m_rate_cnt">
+ <div class="row">
+ <div class="col">
+ <h3>324235,Bangalore,india</h3>
+ <p>Most Popular Price: Rs :2000</p>
+ </div>
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p class="rev_m">2 Reviews</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="tab_img">
+ <a (click)="goto('aboutservice')"> <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse"></a>
+ <h4>Chugach Peaks Photography</h4>
+ </div>
+ <div class="m_rate_cnt">
+ <div class="row">
+ <div class="col">
+ <h3>324235,Bangalore,india</h3>
+ <p>Most Popular Price: Rs :2000</p>
+ </div>
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p class="rev_m">2 Reviews</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <div class="tab_img">
+ <a (click)="goto('aboutservice')"> <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse"></a>
+ <h4>Chugach Peaks Photography</h4>
+ </div>
+ <div class="m_rate_cnt">
+ <div class="row">
+ <div class="col">
+ <h3>324235,Bangalore,india</h3>
+ <p>Most Popular Price: Rs :2000</p>
+ </div>
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p class="rev_m">2 Reviews</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col">
+ <div class="tab_img">
+ <a (click)="goto('aboutservice')"> <img src="../../../assets/img/1510895324_440x440_1473986765-3c1b197105b0747a-CBP_9725.jpg" alt="horse"></a>
+ <h4>Chugach Peaks Photography</h4>
+ </div>
+ <div class="m_rate_cnt">
+ <div class="row">
+ <div class="col">
+ <h3>324235,Bangalore,india</h3>
+ <p>Most Popular Price: Rs :2000</p>
+ </div>
+ <div class="col">
+ <div class="rat_box">
+ <fieldset class="rating">
+ <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+ <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+ <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+ <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+ <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+ <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+ <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+ <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+ <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+ <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+ </fieldset>
+ </div>
+ <p class="rev_m">2 Reviews</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/body/vendors-list/vendors-list.component.scss b/src/app/body/vendors-list/vendors-list.component.scss
index d5edca7..4a2a09f 100644
--- a/src/app/body/vendors-list/vendors-list.component.scss
+++ b/src/app/body/vendors-list/vendors-list.component.scss
@@ -105,7 +105,7 @@
outline: none;
cursor: pointer;
option{
- font-size: 16px;
+ font-size: 14px;
color: #b638b6;
display: block;
line-height: 22px;
@@ -136,13 +136,129 @@
margin-bottom: 15px;
}
+ p{
+ padding: 18px;
+ }
.input-dfprav
{
margin-left: 15px;
}
-
+ .ng5-slider{
+ width: 90%;
+ margin: 35px 15px 15px;
+ .ng5-slider-span {
+ .ng5-slider-bubble {
+ font-size: 12px;
+ .ng5-slider-limit {
+ .ng5-slider-floor{
+ display: none;
+ }
+ }
+ }
+ }
+ }
+
+ }
+ .m_vendors_left_rev{
+ .tab_img{
+ // height: 100%;
+ // width: 100%;
+ img{
+ max-width: 100%;
+ height: 235px;
+ }
+ h4{
+ color: #4c4c4c;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 600;
+ font-size: 16px;
+ margin: 5px 0;
+ }
+ }
+ .m_rate_cnt{
+ h3{
+ color: #848484;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 400;
+ font-size: 15px;
+ margin: 5px 0;
+ }
+ p{
+ font-size: 13px;
+ color: #848484;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 400;
+ margin: 0 0 15px 0;
+ }
+ .rev_m{
+ font-size: 14px;
+ color: #b0b0b0;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 400;
+ position: relative;
+ bottom: 8px;
+ margin-left: 9px;
+ }
+ }
+ .rat_box{
+ overflow: auto;
+ /****** Style Star Rating Widget *****/
+
+ .rating {
+ border: none;
+ float: left;
+ }
+
+ .rating > input { display: none; }
+ .rating > label:before {
+ margin: 5px;
+ font-size: 1.25em;
+ font-family: FontAwesome;
+ display: inline-block;
+ content: "\f005";
+ }
+
+ .rating > .half:before {
+ content: "\f089";
+ position: absolute;
+ }
+
+ .rating > label {
+ color: #ddd;
+ float: right;
+ margin-bottom: 0px;
+ }
+
+ /***** CSS Magic to Highlight Stars on Hover *****/
+
+ .rating > input:checked ~ label, /* show gold star when clicked */
+ .rating:not(:checked) > label:hover, /* hover current star */
+ .rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
+
+ .rating > input:checked + label:hover, /* hover current star when changing rating */
+ .rating > input:checked ~ label:hover,
+ .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+ .rating > input:checked ~ label:hover ~ label { color: #FFED85; }
+ }
+ /* .rat_cont{
+ p{
+ font-weight: 400;
+ font-size: 15px;
+ color: #b0b0b0;
+ margin-bottom: 0px;
+ padding-bottom: 5px;
+ }
+ h4{
+ font-weight: 400;
+ font-size: 16px;
+ color: #646464;
+ margin-bottom: 0px;
+ padding-bottom: 5px;
+ }
+ }*/
}
}
+
}
}
}
diff --git a/src/app/body/vendors-list/vendors-list.component.ts b/src/app/body/vendors-list/vendors-list.component.ts
index a8a52e6..5b3c9a8 100644
--- a/src/app/body/vendors-list/vendors-list.component.ts
+++ b/src/app/body/vendors-list/vendors-list.component.ts
@@ -1,20 +1,29 @@
import { Component, OnInit } from '@angular/core';
import { Options } from 'ng5-slider';
+import { Router, ActivatedRoute } from '@angular/router';
@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 = {
+ dist: number = 50;
+ count: Options = {
floor: 0,
- ceil: 250
+ ceil: 100
+ };
+ pricevalue: number = 5000;
+ rate: Options = {
+ floor: 0,
+ ceil: 10000
};
- constructor() { }
+ constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
}
-
+ goto(path,data=null){
+
+ this.router.navigateByUrl(path,{queryParams:data});
+ }
}
diff --git a/src/app/body/venues/venues.component.html b/src/app/body/venues/venues.component.html
index 5de2566..52e2b33 100644
--- a/src/app/body/venues/venues.component.html
+++ b/src/app/body/venues/venues.component.html
@@ -20,42 +20,42 @@
<div class="container">
<div class="row">
<div class="col">
- <a>
+ <a (click)="goto('vendors-list')">
<img class="venues_halls_img" src="../../../assets/img/museums.jpg">
<p>Museums</p>
</a>
</div>
<div class="col">
- <a>
+ <a (click)="goto('vendors-list')">
<img class="venues_halls_img" src="../../../assets/img/fams.jpg">
<p>Fams</p>
</a>
</div>
<div class="col">
- <a>
+ <a (click)="goto('vendors-list')">
<img class="venues_halls_img" src="../../../assets/img/restaurants.jpg">
<p>Restaurants</p>
</a></div>
<div class="col">
- <a>
+ <a (click)="goto('vendors-list')">
<img class="venues_halls_img" src="../../../assets/img/hotels.jpg">
<p>Hotels</p>
</a></div>
</div>
<div class="row">
<div class="col">
- <a>
+ <a (click)="goto('vendors-list')">
<img class="venues_halls_img" src="../../../assets/img/bedBreakfasts.jpg">
<p>Bed & Breakfasts</p>
</a></div>
<div class="col">
- <a>
+ <a (click)="goto('vendors-list')">
<img class="venues_halls_img" src="../../../assets/img/banquetHalls.jpg">
<p>Banquet Halls</p>
</a></div>
<div class="col">
- <a>
+ <a (click)="goto('vendors-list')">
<img class="venues_halls_img" src="../../../assets/img/seashores.jpg">
<p>Seashores</p>
</a></div>
diff --git a/src/app/body/venues/venues.component.ts b/src/app/body/venues/venues.component.ts
index 21a94f7..84c39b1 100644
--- a/src/app/body/venues/venues.component.ts
+++ b/src/app/body/venues/venues.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
-
+import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-venues',
templateUrl: './venues.component.html',
@@ -7,9 +7,12 @@ import { Component, OnInit } from '@angular/core';
})
export class VenuesComponent implements OnInit {
- constructor() { }
+ constructor(private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
}
-
+ goto(path,data=null){
+
+ this.router.navigateByUrl(path,{queryParams:data});
+ }
}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 3897532..771caa9 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -58,29 +58,29 @@
<div class="col">
<div class="vendors_drop_item">
<img src="../../../assets/img/1507722456_56cdf37898bb3bb1b3356fad8831dc1a--on-your-wedding-day-pre-wedding.jpg">
- <a href="vendors-list">Wedding Photographers</a>
+ <a (click)="goto('vendors-list')">Wedding Photographers</a>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1508740269_marriage-marry-009-256.png">
- <a href="vendors-list">Wedding DJs</a>
+ <a (click)="goto('vendors-list')">Wedding DJs</a>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1509360077_images.png">
- <a href="vendors-list">Wedding Favors & Gifts</a>
+ <a (click)="goto('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 href="vendors-list">Wedding Venues</a>
+ <a (click)="goto('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 href="vendors-list">Wedding Invitations</a>
+ <a (click)="goto('vendors-list')">Wedding Invitations</a>
</div>
<div class="vendors_drop_item">
<img src="../../../assets/img/1509360090_wedding_17-512.png">
- <a href="vendors-list">Wedding Jewelry</a>
+ <a (click)="goto('vendors-list')">Wedding Jewelry</a>
</div>
</div>
<div class="col">
@@ -90,7 +90,7 @@
</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 href="vendors-list">Wedding Caterers</a>
+ <a (click)="goto('vendors-list')">Wedding Caterers</a>
</div>
</div>
</div>
diff --git a/src/assets/img/1516273403_1-LA+Galaxy+vs+San+Jose+Earthquakes+nX6apMVNHACx.jpg b/src/assets/img/1516273403_1-LA+Galaxy+vs+San+Jose+Earthquakes+nX6apMVNHACx.jpg
new file mode 100644
index 0000000..e57766e
Binary files /dev/null and b/src/assets/img/1516273403_1-LA+Galaxy+vs+San+Jose+Earthquakes+nX6apMVNHACx.jpg differ
diff --git a/src/assets/img/1516273620_1-Species_Great_White_Shark_WWF_Carlos_Aguilera.jpg b/src/assets/img/1516273620_1-Species_Great_White_Shark_WWF_Carlos_Aguilera.jpg
new file mode 100644
index 0000000..e2d0bc7
Binary files /dev/null and b/src/assets/img/1516273620_1-Species_Great_White_Shark_WWF_Carlos_Aguilera.jpg differ
diff --git a/src/assets/img/1516273775_1-20141204_JWA2712tiger-web.jpg b/src/assets/img/1516273775_1-20141204_JWA2712tiger-web.jpg
new file mode 100644
index 0000000..55dae40
Binary files /dev/null and b/src/assets/img/1516273775_1-20141204_JWA2712tiger-web.jpg differ
diff --git a/src/assets/img/1516275470_1-royal-enfield-interceptor-650-images-side-profile-2.jpg b/src/assets/img/1516275470_1-royal-enfield-interceptor-650-images-side-profile-2.jpg
new file mode 100644
index 0000000..074726a
Binary files /dev/null and b/src/assets/img/1516275470_1-royal-enfield-interceptor-650-images-side-profile-2.jpg differ
diff --git a/src/assets/img/1516276015_1-4730691-fish-images.jpg b/src/assets/img/1516276015_1-4730691-fish-images.jpg
new file mode 100644
index 0000000..9a39c65
Binary files /dev/null and b/src/assets/img/1516276015_1-4730691-fish-images.jpg differ
diff --git a/src/assets/img/75.png b/src/assets/img/75.png
new file mode 100644
index 0000000..45aa15d
Binary files /dev/null and b/src/assets/img/75.png differ
diff --git a/src/assets/img/76.png b/src/assets/img/76.png
new file mode 100644
index 0000000..59eaf45
Binary files /dev/null and b/src/assets/img/76.png differ
diff --git a/src/assets/img/77.png b/src/assets/img/77.png
new file mode 100644
index 0000000..a5f375f
Binary files /dev/null and b/src/assets/img/77.png differ
diff --git a/src/assets/img/79.png b/src/assets/img/79.png
new file mode 100644
index 0000000..f37b007
Binary files /dev/null and b/src/assets/img/79.png differ
diff --git a/src/assets/img/80.png b/src/assets/img/80.png
new file mode 100644
index 0000000..9d0a541
Binary files /dev/null and b/src/assets/img/80.png differ
diff --git a/src/assets/img/81.png b/src/assets/img/81.png
new file mode 100644
index 0000000..1249ab7
Binary files /dev/null and b/src/assets/img/81.png differ
diff --git a/src/assets/img/82.png b/src/assets/img/82.png
new file mode 100644
index 0000000..9ffea35
Binary files /dev/null and b/src/assets/img/82.png differ
diff --git a/src/assets/img/83.png b/src/assets/img/83.png
new file mode 100644
index 0000000..4563a2f
Binary files /dev/null and b/src/assets/img/83.png differ
diff --git a/src/assets/img/84.png b/src/assets/img/84.png
new file mode 100644
index 0000000..a6bd60f
Binary files /dev/null and b/src/assets/img/84.png differ
diff --git a/src/assets/img/85.png b/src/assets/img/85.png
new file mode 100644
index 0000000..e23618c
Binary files /dev/null and b/src/assets/img/85.png differ
diff --git a/src/assets/img/86.png b/src/assets/img/86.png
new file mode 100644
index 0000000..a593950
Binary files /dev/null and b/src/assets/img/86.png differ
diff --git a/src/assets/img/star-on.png b/src/assets/img/star-on.png
new file mode 100644
index 0000000..975fe7f
Binary files /dev/null and b/src/assets/img/star-on.png differ
diff --git a/src/index.html b/src/index.html
index da375a9..efe84e5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,6 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/d37b6e51ed.js"></script>
<link rel="icon" type="image/x-icon" href="./assets/img/Moments__tinylogo.png">
+
</head>
<body>
<app-root></app-root>