Skip to content

M
Moments
Commit c7e6cc67 by abraham
Options

Merge branch 'master' into abraham

parents 556abe2a 033de085
Showing with 1326 additions and 50 deletions
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",
......@@ -7740,6 +7781,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",
......@@ -7751,6 +7793,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",
......@@ -7761,7 +7804,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
}
}
},
......@@ -7770,6 +7814,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"
......@@ -7780,6 +7825,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"
......@@ -7790,6 +7836,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"
}
......@@ -9123,6 +9170,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"
}
......@@ -10462,6 +10510,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"
}
......
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",
......
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]
......
src/app/body/aboutservice/aboutservice.component.html 0 → 100644
<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
src/app/body/aboutservice/aboutservice.component.scss 0 → 100644
@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
src/app/body/aboutservice/aboutservice.component.spec.ts 0 → 100644
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();
});
});
src/app/body/aboutservice/aboutservice.component.ts 0 → 100644
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});
}
}
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
}
];
......
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 { }
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>
......
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;
}
}*/
}
}
}
}
}
......
src/app/body/vendors-list/vendors-list.component.ts
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});
}
}
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>
......
src/app/body/venues/venues.component.ts
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});
}
}
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>
......
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>
......
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