+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Kitchen
+ Bathroom
+ Utility
+ Bathroom
+ Nursery
+ Bedroom
+
+ Attic
+ Office
+
+
+
+
Browse All
+
+
+
+ Appliance Repair
+ Basement Renovation
+ Bathroom Renovation
+ Carpeting
+ Drywalling
+ Electrical
+ Flooring
+ Foundation
+ Heating and Cooling
+
+
+
+ Insulation
+ Landscaping
+ Painting
+ Plumbing
+ Roofing
+ Siding
+ Tree Services
+ Water Heating
+ Windows and Doors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Sort:
+
+
+ by Radius
+ 5km Radius
+ 10km Radius
+ 20km Radius
+
+
+
+
+ by Price
+ $
+ $$
+ $$$
+
+
+
+
+
+
+ by Reviews
+ 5 Star
+ 4 Star
+ 3 Star
+ 2 Star
+ 1 Star
+
+
+
+
+
+
+
+
+
+
+
+
Innovate Renovations
+
+
+
+
Contractor description: This contractor does landscaping, tree services, foundation lkjsd;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
Contractor description: This contractor does appliance, electric, kitchen, water-heating, utility ;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
Smith & Sons Pvt Ltd
+
+
+
+
Contractor description: This contractor does bathroom, drywall, flooring, electric, painting, plumbing, utility lkjsd;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
Contractor description: This contractor does basement, carpet, drywall, foundation, flooring, insulation, painting, bedroom, office, nursery lkjsd;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
Contractor description: This contractor does: roofing, siding, attic, windows-doors, foundation lkjsd;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
Contractor description: This contractor does: heating-cooling, utility, water-heating, appliance, electric, plumbing ;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
+
Contractor description: This contractor does: office, bedroom, bathroom, nursery, painting, drywall, carpet, flooringlkjsd;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
+
Contractor description: This contractor does: appliance, electric, utility, water-heating, heating-cooling lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
+
Contractor description: this contractor does: landscaping, windows-doors, siding, attic, roofing, tree-service, basement, foundation lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
+
Contractor description: This contractor does: kitchen, plumbing, electric, painting, bathroom, utility lkjsd;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
+
Contractor description: This contractor does: insulation, drywall, painting, flooring, carpeting, bedroom, nursery, office, basement lkjsd;lgfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
+
Contractor description: This contractor does: utility, plumbing, electric, heating-cooling, water-heating gfkjhas;ldgkh;aowirgh;asdhglkasjdf;lkjasd;lfkjhalksdjgl
+ kfjhg;lkjasdfl;kjasd l;kajsdf;lkajsdf o;iasdg;lad jl;akdj f;ladjsk kjshg ;ljadskflakjsdh ;lkjsag ;ljsf hg;lkd jl;ad jkf;ld kjsh;lakd f;lsadjkfl;d jsf;kl jds;lkdjs;sld jsd
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
THE MAP
+
+
+
+
+
+
+
+
+
+
-
diff --git a/browse.js b/browse.js
index e69de29..781a3d3 100644
--- a/browse.js
+++ b/browse.js
@@ -0,0 +1,175 @@
+var cHeader = "Contractor List";
+
+function initializeBrowse(){
+
+}
+
+
+
+function updateCHeader (service){
+ document.getElementById('cHeader').innerHTML = cHeader + ": " + service;
+
+}
+
+function goToResults(){
+ document.getElementById('results').scrollIntoView();
+ }
+
+// possible selection classes
+//all
+//appliance*
+//bathroom*
+//basement*
+//carpet*
+//drywall*
+//electric*
+//flooring*
+//foundation*
+//heating-cooling*
+//insulation*
+//kitchen*
+//landscaping*
+//painting*
+//plumbing*
+//roofing*
+//siding*
+//tree-services*
+//water-heating*
+//windows-doors*
+//utility*
+//bedroom*
+//nursery*
+//office*
+//attic*
+//
+//
+
+
+function filterSelection(c) {
+ var x, i;
+ x = document.getElementsByClassName("all");
+ if (c == "all") c = "";
+ // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
+ for (i = 0; i < x.length; i++) {
+ w3RemoveClass(x[i], "show");
+ w3RemoveClass(x[i], "hide")
+ if (x[i].className.indexOf(c) > -1){
+ w3AddClass(x[i], "show");
+ } else {w3AddClass(x[i], "hide"); }
+ }
+}
+
+ // Show filtered elements
+function w3AddClass(element, name) {
+ var i, arr1, arr2;
+ arr1 = element.className.split(" ");
+ arr2 = name.split(" ");
+ for (i = 0; i < arr2.length; i++) {
+ if (arr1.indexOf(arr2[i]) == -1) {
+ element.className += " " + arr2[i];
+ }
+ }
+}
+
+ // Hide elements that are not selected
+function w3RemoveClass(element, name) {
+ var i, arr1, arr2;
+ arr1 = element.className.split(" ");
+ arr2 = name.split(" ");
+ for (i = 0; i < arr2.length; i++) {
+ while (arr1.indexOf(arr2[i]) > -1) {
+ arr1.splice(arr1.indexOf(arr2[i]), 1);
+ }
+ }
+ element.className = arr1.join(" ");
+ // w3AddClass(element, "hide");
+}
+
+
+
+
+
+function filterSort(type, value){
+ filterSelection(value);
+
+}
+
+
+
+function sortByPrice(value){
+ if(value == "high-low"){
+
+ }else if (value == "low-high"){
+
+ lowToHigh();
+ }else{
+ filterSelection(value);
+ }
+
+}
+
+function toggleMapList(){
+ // list = document.getElementById("clist");
+ // map = document.getElementsByClassName("map");
+
+ // w3RemoveClass(list, "show");
+ // w3AddClass(list, "show");
+ // w3RemoveClass(map, "hide");
+ // w3AddClass(map, "show");
+
+
+ const toggle = document.getElementById("map");
+ toggle.addEventListener('click', toggleMap("map"));
+
+
+ // w3AddClass();
+}
+function toggleMap(i) {
+ const map = document.getElementById(i);
+ map.classList.toggle('show');
+ const list = document.getElementById("clist");
+ w3AddClass(list, "hide");
+ // addToFavourites();
+}
+
+
+
+
+
+function favourite(i) {
+ const heart = document.getElementById(i);
+ heart.addEventListener('click', redHeart(i) );
+}
+
+function redHeart(i) {
+ const heart = document.getElementById(i);
+ heart.classList.toggle('red');
+ // addToFavourites();
+}
+
+function addToFavourites(){
+
+}
+
+function contractorPage(c){
+
+ document.getElementById('c').style.display= "flex";
+}
+
+function closeContractorPage(c){
+ document.getElementById('c').style.display= "none";
+}
+
+function clistingName(i) {
+ const contractor = document.getElementById(i);
+ heart.addEventListener('click', visited(i) );
+}
+function visited(c){
+ const contractor = document.getElementById('c');
+ contractor.classList.toggle('visited');
+}
+
+function contact(i) {
+ var contact = document.getElementById(i);
+ contact.classList.toggle("showPopUp");
+}
diff --git a/browseStyle.css b/browseStyle.css
index 127dc96..aaa887c 100644
--- a/browseStyle.css
+++ b/browseStyle.css
@@ -1,72 +1,402 @@
+body{
+ height: 100%;
+ margin: 0;
+ background-color: aliceblue;
+}
+
-.page {
- background-color: rgb(255, 255, 255);
+ul li{
+ text-indent: 0;
+ padding-left: 0;
+ margin-left: 0;
+ list-style-position: inside;
}
-.doll_list_flex {
- width: 800px;
- height: 400px;
- border: 1px solid;
- /*
- display: grid;
- grid-template-columns: 2fr 1fr;
- height: 100%;
- text-align: center;
- padding-top: 20px;
- */
+.mainpage {
+ font-family: Helvetica, sans-serif;
+ font-size: 13px;
+ font-weight:100;
+ margin-bottom: 40px;
+ align-content: center;
+ height: 100%;
+
+}
+@media screen and (min-width: 900px) {
+ .mainpage {
+ margin-left: 15%;
+ margin-right: 15%;
+ }
+ }
+
+.browse{
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ /* margin: auto; */
+ padding-top: 50px;
+
+
+}
+
+.breadcrumb{
display: flex;
flex-direction: row;
- justify-content: space-between;
+ justify-content:left;
+ /* align-items: flex-start; */
+ text-align: left;
+}
+
+.navDiv {
+ display: flex;
+ margin-bottom: 100px;
+}
+
+
+.service_header, .contractor_list{
+ /* width: 80%;
+ height: 50px;
+ padding-bottom: 15px;
+
+ padding-left: 40px;
+ /* margin: auto; */
+
+ /* background-color:rgb(4, 6, 56);
+ color: white;
+ display: flex;
+ align-items: normal; */
+
+ /* margin-top: 35px; */
+ /* background-color:rgb(4, 6, 56);
+ color: white; */
+ background-color: rgb(4,6,56) ;
+ border: none;
+ /* border-radius: 5px; */
+ /* margin-top: 10px; */
+ /* margin-right: 30%; */
+ width: 100%;
+ /* padding-left: 20px; */
+ padding-right: 15px;
+ margin-bottom: 10px;
+ color: white;
+ display:flex;
+ flex-direction: row;
+ font-weight: lighter;
+ padding-left: 15px;
+ /* padding-top: 2px;
+ padding-bottom: 2px; */
+ /* justify-content: space-between; */
+ /* align-items: start; */
+
+}
+
+.service_header{
+ /* padding-right:10px; */
+ margin-left: 10px;
+ margin-right: -25px;
+}
- margin: auto;
+.doll_and_list {
+ width:100%;
+ padding-top: 20px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-content: center;
+ height: auto;
+
+
}
.dollhouse {
- /*border: 1px solid;*/
+ padding-top: 20px;
+ display: flex;
width: 400px;
height: 400px;
- float:auto;
+ float: left;
+ max-width: 800px;
+}
+
+.doll-buttons {
+ position: absolute;
+
+}
+
+
+
+
+.dollImg {
+ display: flex;
+ height: 65%;
+ margin-left: 20px;
+}
+.doll-kitchen{
+ margin-top: 182px;
+ margin-left: 210px;
+ background-color: transparent;
+ border: none;
+ width: 105px;
+ height: 68px;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ padding-top: 13px;
+ padding-left: 25px;
+ font-size: medium;
+ transition-duration: 0.2s;
+ color:transparent;
+
+}
+
+.doll-kitchen:hover{
+ background-color: rgba(128, 128, 128, 0.5);
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+
+}
- max-width: 800px;
+
+.doll-kitchen :focus {
+ outline-color: transparent;
+ outline-style:solid;
+ box-shadow: 0 0 0 4px #5a01a7;
}
-.serviceList{
- /* border: 1px solid; */
- width: 400px;
- height: 400px;
- max-width: 800px;
+.doll-bathroom{
+ margin-top: 182px;
+ margin-left: 112px;
+ background-color: transparent;
+ border: none;
+ width: 95px;
+ height: 68px;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ padding-top: 23px;
+ padding-left: 13px;
+ font-size: medium;
+ transition-duration: 0.2s;
+ color:transparent;
+}
+
+.doll-bathroom:hover{
+ background-color: rgba(128, 128, 128, 0.5);
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+}
+
+.doll-utility{
+ margin-top: 182px;
+ margin-left: 40px;
+ background-color: transparent;
+ border: none;
+ width: 68px;
+ height: 68px;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ padding-top: 23px;
+ padding-left: 13px;
+ font-size: medium;
+ transition-duration: 0.2s;
+ color:transparent;
+}
+
+.doll-utility:hover{
+ background-color: rgba(128, 128, 128, 0.5);
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+}
+
+.doll-bathroom2{
+ margin-top: 90px;
+ margin-left: 246px;
+ background-color: transparent;
+ border: none;
+ width: 68px;
+ height: 88px;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ padding-top: 40px;
+ padding-left: 6px;
+ font-size: small;
+ transition-duration: 0.2s;
+ color:transparent;
+}
+
+.doll-bathroom2:hover{
+ background-color: rgba(128, 128, 128, 0.5);
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+}
+
+.doll-nursery{
+ margin-top: 108px;
+ margin-left: 146px;
+ background-color: transparent;
+ border: none;
+ width: 95px;
+ height: 70px;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ padding-top: 25px;
+ padding-left: 16px;
+ font-size: medium;
+ transition-duration: 0.2s;
+ color:transparent;
+}
+
+.doll-nursery:hover{
+ background-color: rgba(128, 128, 128, 0.5);
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+}
+
+.doll-bedroom{
+ margin-top: 95px;
+ margin-left: 40px;
+ background-color: transparent;
+ border: none;
+ width: 102px;
+ height: 83px;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ padding-top: 33px;
+ padding-left: 18px;
+ font-size: medium;
+ transition-duration: 0.2s;
+ color:transparent;
+}
+
+.doll-bedroom:hover{
+ background-color: rgba(128, 128, 128, 0.5);
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+}
+
+.doll-attic{
+ background-color: transparent;
+ margin-top: 37px;
+ margin-left: 54px;
+ /* background-color: red; */
+ transform: rotate(-45deg);
+ border-left:58px solid transparent;
+ border-right: 58px solid transparent;
+ border-bottom: transparent;
+ border-top: 58px solid transparent;
+ width: 0;
+ height: 0;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ /* padding-top: 45px;
+ padding-left: 50px; */
+ font-size: medium;
+ transition-duration: 0.2s;
+ color:transparent;
+
+
+}
+.doll-attic:hover{
+
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+ border-top-color: rgba(128, 128, 128, 1);
}
-.list{
- display: flex;
- flex-direction: row;
+.doll-attic-text{
+ margin-top: 33px;
+ margin-left: 70px;
+ background-color: transparent;
+ border: none;
+ /* transform: rotate(-45deg);
+ border-left:58px solid transparent;
+ border-right: 58px solid transparent;
+ border-bottom: transparent;
+ border-top: 58px solid transparent;
+ width: 0;
+ height: 0; */
+
+ display: flex;
+ position: absolute;
+ text-align: center;
+ padding-top: 33px;
+ padding-left: 18px;
+ font-size: medium;
+ transition-duration: 0.2s;
+ color:transparent;
+}
+.doll-attic-text:hover{
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+ border-top-color: rgba(128, 128, 128, 0.5);
}
-.clisting{
- width: 800px;
- height: 400px;
- margin: 40px;
+.doll-office{
+ margin-top: 36px;
+ margin-left: 146px;
+ background-color: transparent;
+ border: none;
+ width: 95px;
+ height: 68px;
+ display: flex;
+ position: absolute;
+ text-align: center;
+ padding-top: 25px;
+ padding-left: 25px;
+ font-size: medium;
+ transition-duration: 0.2s;
+ color:transparent;
}
-.sort{
- width: 600px;
- height: 50px;
- margin: 50px;
+.doll-office:hover{
+ background-color: rgba(128, 128, 128, 0.5);
+ color: rgba(0, 0, 0, 1);
+ font-weight: bold;
+}
+
+
+
+.serviceList{
+
+
+ max-width: 800px;
+ display: flex;
+ flex-direction: column;
+ padding-top: 0px;
+ float: right;
+ margin-left: 100px;
+ font-size: 16px;
+ text-indent: 0;
+
+
}
-.h1List{
- width: 400px;
- height: 50px;
- margin: 20px;
- position: relative;
+.browseAll {
+ margin-left: 40px;
+}
+
+.list{
+ display: flex;
+ flex-direction: row;
+ font-size: 16px;
+ margin-left: -40px;
+}
+
+.slist{
+ display: flex;
+ flex-direction: column;
+ font-size: 16px;
}
.slist.left{
@@ -88,11 +418,784 @@
.item{
padding-bottom: 5px;
+ list-style-type: none;
+ display: table;
+ clear: both;
+ text-indent: 0;
+}
+.item:hover{
+ color:rgb(141,27,5);
+ font-weight: bold;
}
+.results {
+ /* margin: auto; */
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+}
+
+
+.clist{
+ text-indent: 0;
+ list-style-position: inside;
+ width: 100%;
+ margin-left: -20px;
+ padding-right: 20px;
+
+
+}
+
+.clisting{
+ list-style-type: none;
+ display: flex;
+ flex-direction: row;
+ clear: both;
+ margin-top: 20px;
+ margin-bottom: 40px;
+ padding-left: 10px;
+ /* border-radius: 5px; */
+ background-color: rgba(6, 62, 126, 0.212);
+ text-indent: 0;
+ width: 100%;
+ padding-right: 20px;
+ /* padding-bottom: 10px; */
+}
+.clisting1{
+ list-style-type: none;
+ display:flex;
+ flex-direction: row;
+ justify-content: space-between;
+ clear: both;
+ margin-top: 20px;
+ /* margin-bottom: 20px; */
+ /* margin-right: 20px; */
+ padding-left: 10px;
+ padding-right:-10px;
+ /* border-radius: 5px; */
+ background-color: rgba(6, 62, 126, 0.212);
+ text-indent: 0;
+ width: 100%;
+ /* padding-right: 30px; */
+
+}
+.clistingName {
+ /* margin-left: -50px; */
+ /* margin-right: 55%; */
+ display: flex;
+}
+.clistingName:hover {
+ color: rgb(141,27,5);
+}
+#c1 {
+ color:black;
+}
+#c1:hover{
+ color: rgb(141,27,5);
+}
+
+#c1.visited{
+ color:#5a01a7;
+}
+
+.c-info{
+ width: 100%;
+ height: 200px;
+ background-color: transparent;
+ padding-left: 10px;
+ /* padding-bottom: 10px; */
+ margin-right: 10px;
+ margin-bottom: -5px;
+}
+
+.description{
+ display: block;
+ min-height:78px;
+ max-height: 78px;
+}
+
+.listing-img{
+ display: flex;
+ float: left;
+ width: 200px;
+ height: 200px;
+ margin-left: 20px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ /* margin-right:20px; */
+ /* padding-right: 20px; */
+}
+
+.c-listing-buttons{
+ display: flex;
+ flex-direction: row;
+ /* margin-bottom: -20px; */
+ /* align-items: flex-start; */
+ /* justify-content:right; */
+
+}
+
+.listingbuttons{
+ margin-right: 10px;
+}
+
+.important-btns{
+ padding-top: 20px;
+ display: flex;
+ /* justify-content: space-between; */
+ size: 100%;
+}
+.important-btns button{
+ max-width: 100%;
+ color: white;
+ font-weight: bold;
+ height: 35px;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ width: 120px;
+ background-color: #c2452d;
+ font-size: 15px;
+}
+.important-btns button:hover{
+ background-color: white;
+ color: #c2452d;
+ transition: 0.3s;
+}
+.important-btns button:active{
+ background-color: rgb(141, 27, 5);
+ color: white;
+}
+.important-btns button:last-child {
+ margin-right: 0;
+}
+
+
+
+.cIconInfo{
+ /* width: 40%; */
+ display: flex;
+ flex-direction: row;
+ /* justify-content: flex-end; */
+ float:left;
+ margin-right:20px;
+
+
+}
+.price{
+ margin-right: 30px;
+ margin-top: 20px;
+}
+
+.c-rating{
+ /* align-items: self-end; */
+ margin-left: 20px;
+ margin-top: 7px;
+ margin-right: 40px;
+ /* width: 20%; */
+ /* justify-content: right; */
+}
+.c-rating i{
+ color: rgb(255, 123, 0);
+ font-size: 15px;
+ }
+
+ #heart {
+ margin-top: 12px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart1 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart1.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart2 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart2.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart3 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart3.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart4 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart4.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart5 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart5.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart6 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart6.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart7 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart7.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart8 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart8.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart9 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart9.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart10 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart10.red {
+ color: rgb(163, 7, 7);
+ }
+
+ #heart11 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart11.red {
+ color: rgb(163, 7, 7);
+ }
+
+
+
+
+
+.sort{
+ width: 100%;
+ background-color: rgba(6, 62, 126, 0.212);
+ border: none;
+ /* border-radius: 5px; */
+ /* margin-top: 10px; */
+ /* margin-right: 30px; */
+ /* margin-left: 10px; */
+
+ color: black;
+ display:flex;
+ flex-direction: row;
+ justify-content: space-between;
+ /* align-items: start; */
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-left: 20px;
+ padding-right: 10px;
+ margin-bottom:20px;
+
+
+
+}
+
+.sort_options {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ margin-left: 60px;
+ display:flex;
+ flex-direction: row;
+
+ justify-content: flex-start;
+ width: 100%;
+}
+
+.sort-dropdown {
+ margin-left: 10px;
+
+
+
+}
+
+
+.toggle{
+ /* margin-top: 10px; */
+ width: 100%;
+ margin-bottom: 10px;
+ margin-right: 20px;
+ /* padding-right: 20px; */
+ display:flex;
+ flex-direction: row;
+ align-items: flex-end;
+ justify-content: flex-end;
+}
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+ }
+
+ .switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #2196F3;
+ -webkit-transition: .4s;
+ transition: .4s;
+ border-radius: 34px;
+ }
+
+ .slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+ border-radius: 50%;
+ }
+
+ input:checked + .slider {
+ background-color: #2196F3;
+ }
+
+ /* input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+ } */
+
+ input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+ }
+
+ .show {
+ display: flex;
+ }
+ .hide{
+ display: none;
+ }
+
+ .container {
+ overflow: hidden;
+ }
+
+ #map{
+ visibility: hidden;
+ }
+
+ #map.show{
+ visibility: visible;
+ }
+
+ #heart11 {
+ margin-top: 15px;
+ color: grey;
+ font-size: 30px;
+ }
+
+ #heart11.red {
+ color: rgb(163, 7, 7);
+ }
+
+
+ .map{
+
+ }
+ .map .mapContent{
+ visibility: hidden;
+ }
+
+ .map .showMap{
+ visibility: visible;
+ }
+
+ .contact {
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+ /* The actual popup */
+ .contact .popuptext {
+ visibility: hidden;
+ width: 100px;
+ background-color: #555;
+ color: #fff;
+ text-align: center;
+ border-radius: 6px;
+ padding: 8px 0;
+ padding-left: 20px;
+ padding-right: 20px;
+ position: absolute;
+ z-index: 1;
+ bottom: 125%;
+ /* left: 50%; */
+ margin-left: -95px;
+ }
+
+
+
+ /* Toggle this class - hide and show the popup */
+ .contact .showPopUp {
+ visibility: visible;
+ -webkit-animation: fadeIn 1s;
+ animation: fadeIn 1s;
+ }
+
+
+ .sortPriceLowHigh .sortPriceHighLow .sortTopRated .sortHighRating .sortLowRating .sortDistance{
+ visibility: hidden;
+ }
+
+ .sortPriceLowHigh .sortPriceHighLow .sortTopRated .sortHighRating .sortLowRating .sortDistance .showSort{
+ visibility: visible;
+ -webkit-animation: fadeIn 1s;
+ animation: fadeIn 1s;
+ }
+
+
+
+
.quoteButton{
width:50px;
}
+
+
+
+
+/* ******************* . NAV BAR********************* */
+
+/* ------------NAVBAR------------- */
+
+nav{
+ display: flex;
+ width: 100%;
+ background-color: rgba(4, 6, 56, 0.894);
+ position: fixed;
+ justify-content: space-between;
+ box-sizing: border-box;
+ font-family: 'Kanit', sans-serif;
+ text-align: center;
+ padding: 15px 30px;
+}
+
+.website-icon button{
+ font-family: 'Kanit', sans-serif;
+ font-size: 20px;
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ color: azure;
+}
+
+.search-location-bars input{
+ height: 35px;
+ border-radius: 10px;
+ border: solid;
+ max-width: 100%;
+ position: relative;
+}
+
+.search-location-bars input::placeholder{
+ padding-left: 10px;
+}
+
+.search-location-bars button{
+ background-color: transparent;
+ cursor: pointer;
+ border: none;
+ position: absolute;
+ color: azure;
+}
+
+.search-location-bars button i:hover{
+ color: rgb(229, 30, 30);
+ transition: 0.3s;
+}
+
+.login-signup button{
+ position: relative;
+ max-width: 100%;
+ color: white;
+ font-weight: bold;
+ height: 35px;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ width: 120px;
+ background-color: #c2452d;
+}
+.login-signup button:hover{
+ background-color: white;
+ color: #c2452d;
+ transition: 0.3s;
+}
+.login-signup button:active{
+ background-color: rgb(141, 27, 5);
+ color: white;
+}
+
+/* --------------BURGER ---------------- */
+.openbtn{
+ background-color: transparent;
+ border: none;
+ font-size: 30px;
+ cursor: pointer;
+ color: azure;
+}
+
+.burger-links {
+ height: 100%;
+ width: 0;
+ position: fixed;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ background-color: rgb(4, 6, 56);
+ overflow-x: hidden;
+ transition: 0.5s;
+ padding-top: 60px;
+}
+
+.burger-links a{
+ padding: 8px 8px 8px 8px;
+ text-decoration: none;
+ font-size: 25px;
+ color: azure;
+ display: block;
+ transition: 0.3s;
+ width: 100%;
+ font-family: 'Kanit', sans-serif;
+ border: none;
+}
+
+.browse-dropdown-btn, .servicesbtn{
+ padding: 8px 8px 8px 8px;
+ text-decoration: none;
+ font-size: 25px;
+ color: azure;
+ display: block;
+ background-color: rgb(4, 6, 56);
+ transition: 0.3s;
+ width: 100%;
+ font-family: 'Kanit', sans-serif;
+ border: none;
+}
+
+.burger-links a:hover {
+ color:#c2452d;
+ transition: 0.3s;
+}
+
+.burger-links .closebtn {
+ position: absolute;
+ top: 0;
+ right: 25px;
+ font-size: 36px;
+ margin-left: 50px;
+ color: azure;
+}
+
+#main {
+ transition: margin-left .5s;
+}
+
+@media screen and (max-height: 450px) {
+ .burger-links {padding-top: 15px;}
+ .burger-links a {font-size: 18px;}
+}
+
+/* Add an active class to the active dropdown button */
+.active {
+ background-color: #c2452d;
+ transition: 0.3s;
+}
+
+.burger-links .browse-dropdown-btn.active:hover,
+.burger-links .servicesbtn.active:hover {
+ color: black;
+ transition: 0.3s;
+ cursor: pointer;
+}
+
+.burger-links .browse-dropdown-btn:not(.active):hover,
+.burger-links .servicesbtn:not(.active):hover {
+ color: #c2452d;
+ transition: 0.3s;
+ cursor: pointer;
+}
+
+
+.browse-container, .services-container{
+ display: none;
+ cursor: pointer;
+ font-size: 20px;
+ padding-bottom: 50px;
+}
+
+/* Some media queries for responsiveness */
+@media screen and (max-height: 450px) {
+ .burger-links {padding-top: 15px;}
+ .burger-links a {font-size: 18px;}
+}
+
+.nav-header{
+ display: flex;
+}
+
+.review textarea{
+ display: block;
+ width: 100%;
+ margin-bottom: 10px;
+ border-radius: 5px;
+ font-family: Arial;
+ font-size: 15px;
+}
+.message{
+ height: 80px;
+}
+.submit-button {
+ display: block;
+ margin: 0 auto; /* This will center the button horizontally */
+ background-color: #c2452d;
+ color: white;
+ font-weight: bold;
+ height: 35px;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ width: 120px;
+ font-size: 15px;
+ margin-top: 20px; /* Adjust the top margin as needed */
+}
+
+.submit-confirmation{
+ width: 400px;
+ background: aliceblue;
+ border-radius: 6px;
+ top: 50%;
+ left: 50%;
+ position: fixed;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ padding: 0 30px 30px;
+ color: #333;
+ z-index: 1000;
+ visibility: hidden;
+}
+.open-submit-confirmation{
+ visibility: visible;
+}
+
+.submit-confirmation img{
+ width: 100px;
+ margin-top: -50px;
+ border-radius: 50%;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+.submit-confirmation h2{
+ font-family: sans-serif;
+ font-size: 30px;
+ font-weight: bold;
+}
+.submit-confirmation h3{
+ font-family: sans-serif;
+ font-size: 15px;
+ margin: 30px 0 10px;
+}
+.submit-confirmation button{
+ width: 100%;
+ margin-top: 40px;
+ padding: 10px 0;
+ background: rgb(4, 6, 56);
+ color: white;
+ border: 0;
+ outline: none;
+ font-size: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ box-shadow: 0 5px 5px rgba(0,0,0,0.2);
+}
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
+ display: none;
+ z-index: 999; /* Ensure the overlay appears below the popup */
+}
\ No newline at end of file
diff --git a/contractor_home.css b/contractor_home.css
index 3e124c2..24b4063 100644
--- a/contractor_home.css
+++ b/contractor_home.css
@@ -10,6 +10,7 @@ body {
margin-left: 5%;
margin-right: 5%;
margin-bottom: 40px;
+ padding-top: 70px;
}
@media screen and (min-width: 900px) {
@@ -36,6 +37,9 @@ body {
color: rgb(255, 123, 0);
font-size: 15px;
}
+.rating2 {
+ color: grey;
+}
.contractor-images img{
height: 280px;
@@ -66,11 +70,16 @@ body {
padding-right: 10px;
color: black;
}
+.listingbuttons{
+ margin-right: 10px;
+}
+
.important-btns{
padding-top: 20px;
display: flex;
- justify-content: space-between;
+
+ /* justify-content: space-between; */
size: 100%;
}
.important-btns button{
@@ -130,13 +139,13 @@ body {
margin-bottom: 30px;
}
-/* NAVBAR */
+/* ------------NAVBAR------------- */
nav{
display: flex;
width: 100%;
background-color: rgba(4, 6, 56, 0.894);
- position: relative;
+ position: fixed;
justify-content: space-between;
box-sizing: border-box;
font-family: 'Kanit', sans-serif;
@@ -161,6 +170,10 @@ nav{
position: relative;
}
+.search-location-bars input::placeholder{
+ padding-left: 10px;
+}
+
.search-location-bars button{
background-color: transparent;
cursor: pointer;
@@ -196,7 +209,7 @@ nav{
color: white;
}
-/* BURGER */
+/* --------------BURGER ---------------- */
.openbtn{
background-color: transparent;
border: none;
@@ -329,3 +342,61 @@ nav{
font-size: 15px;
margin-top: 20px; /* Adjust the top margin as needed */
}
+
+.submit-confirmation{
+ width: 400px;
+ background: aliceblue;
+ border-radius: 6px;
+ top: 50%;
+ left: 50%;
+ position: fixed;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ padding: 0 30px 30px;
+ color: #333;
+ z-index: 1000;
+ visibility: hidden;
+}
+.open-submit-confirmation{
+ visibility: visible;
+}
+
+.submit-confirmation img{
+ width: 100px;
+ margin-top: -50px;
+ border-radius: 50%;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+.submit-confirmation h2{
+ font-family: sans-serif;
+ font-size: 30px;
+ font-weight: bold;
+}
+.submit-confirmation h3{
+ font-family: sans-serif;
+ font-size: 15px;
+ margin: 30px 0 10px;
+}
+.submit-confirmation button{
+ width: 100%;
+ margin-top: 40px;
+ padding: 10px 0;
+ background: rgb(4, 6, 56);
+ color: white;
+ border: 0;
+ outline: none;
+ font-size: 18px;
+ border-radius: 4px;
+ cursor: pointer;
+ box-shadow: 0 5px 5px rgba(0,0,0,0.2);
+}
+.overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5); /* semi-transparent black */
+ display: none;
+ z-index: 999; /* Ensure the overlay appears below the popup */
+}
\ No newline at end of file
diff --git a/contractor_home.html b/contractor_home.html
index b6054cc..a80ae56 100644
--- a/contractor_home.html
+++ b/contractor_home.html
@@ -17,8 +17,8 @@
×
Home
Feed
@@ -50,18 +50,15 @@
Contractor Pro
-
-
-
+
+
+
-
@@ -86,10 +83,10 @@
Services Provided
Basement Furnishing
+
+
+ 
+
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
Felix
+Very rude +
+Regrettably, the service fell short, displaying an unfortunate level of rudeness. + The staff's lack of courtesy and professionalism left a disappointing impression, diminishing the overall customer experience. + Enhancements in customer service are essential to ensure a more positive and welcoming atmosphere in the future.
+Richa Chaddha
+Very poor job
+While I engaged with Innovative Renovations for a recent project, their pace left much to be desired. + Their idea of efficiency seemed more focused on haste than precision, resulting in a subpar outcome. + Despite their attempts at being helpful, their understanding of the project vision left me questioning their expertise. + Perhaps a more considered approach would benefit both their work and customer satisfaction. + Overall, I would cautiously recommend Innovative Renovations to those with a surplus of patience and a penchant for rework..
+Jane Joe
+Not as bad like what other says
+These are fake reviews! Their work isn't that bad
+Anmol Singh
+Did not clean carpet properly +
+ +