From ef479952e228d255703adf3b6de33ef0acba7a7d Mon Sep 17 00:00:00 2001 From: Ginelle Temull <89558840+ginellego@users.noreply.github.com> Date: Sun, 26 Nov 2023 01:02:55 +0000 Subject: [PATCH 01/22] add dollhouse --- browse.html | 73 +++++++++++++++++++++++++------------------------ browseStyle.css | 47 +++++++++++++++++++++++++------ 2 files changed, 77 insertions(+), 43 deletions(-) diff --git a/browse.html b/browse.html index ff7d56b..f2e9f8a 100644 --- a/browse.html +++ b/browse.html @@ -11,44 +11,47 @@
-
-
-
-

Services by Space

-
-
-

Service List

-
-
    -
  • 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
    • -
-
+
+
+
+
+

Services by Space

+ +
+
+

Service List

+
+
    +
  • 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
    • +
+
+
-
-

Contractor List

+
+

Contractor List

-
+
diff --git a/browseStyle.css b/browseStyle.css index 127dc96..8621152 100644 --- a/browseStyle.css +++ b/browseStyle.css @@ -1,11 +1,30 @@ - +body{ + height: 100%; + margin: 0; + background-color: aliceblue; +} .page { - background-color: rgb(255, 255, 255); + font-family: Helvetica, sans-serif; + font-size: 13px; + margin-left: 5%; + margin-right: 5%; + margin-bottom: 40px; + +} +@media screen and (min-width: 900px) { + .page { + margin-left: 15%; + margin-right: 15%; + } + } + +.browseCat{ + } .doll_list_flex { width: 800px; height: 400px; - border: 1px solid; + /* display: grid; @@ -18,6 +37,7 @@ display: flex; flex-direction: row; justify-content: space-between; + position: absolute; margin: auto; @@ -28,18 +48,26 @@ /*border: 1px solid;*/ width: 400px; height: 400px; - float:auto; + float: left; max-width: 800px; } +.dollImg { + display: flex; + height: 65%; + margin-left: 20px; +} + .serviceList{ /* border: 1px solid; */ width: 400px; height: 400px; max-width: 800px; + float: right; + } @@ -49,6 +77,10 @@ flex-direction: row; } +.results { + +} + .clisting{ width: 800px; height: 400px; @@ -62,11 +94,10 @@ } -.h1List{ - width: 400px; - height: 50px; +h1{ + margin: 20px; - position: relative; + } .slist.left{ From ccfc2587ca37b53721c6e2b74f2c2f4aea2a47a8 Mon Sep 17 00:00:00 2001 From: Ginelle Temull <89558840+ginellego@users.noreply.github.com> Date: Mon, 27 Nov 2023 04:23:06 +0000 Subject: [PATCH 02/22] browse sort --- browse.html | 107 ++++++++++++++++++++++----------- browseStyle.css | 155 +++++++++++++++++++++++++++++++++--------------- 2 files changed, 179 insertions(+), 83 deletions(-) diff --git a/browse.html b/browse.html index f2e9f8a..4ad2681 100644 --- a/browse.html +++ b/browse.html @@ -11,52 +11,87 @@
-
-
-
+
+
+
+
+

Services by Space

+
+

Service List

+
+
+
-

Services by Space

+ +
+ + +
-

Service List

-
-
    -
  • 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
    • -
+
+
    +
  • 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
    • +
-
-
-

Contractor List

-
-
-
- + +
+
+

Contractor List: [Selected Category]

+ +
+ +
+ +

Sort:

+
+ + + +
+ +
-
diff --git a/browseStyle.css b/browseStyle.css index 8621152..2d1b084 100644 --- a/browseStyle.css +++ b/browseStyle.css @@ -3,56 +3,88 @@ body{ margin: 0; background-color: aliceblue; } -.page { + +h1{ + + +} + +.mainpage { font-family: Helvetica, sans-serif; font-size: 13px; - margin-left: 5%; - margin-right: 5%; + margin-bottom: 40px; + align-content: center; } @media screen and (min-width: 900px) { - .page { + .mainpage { margin-left: 15%; margin-right: 15%; } } -.browseCat{ +.browse{ + align-items: center; + display: flex; + flex-direction: column; + margin: auto; + padding-top: 50px; + } -.doll_list_flex { - width: 800px; - height: 400px; + + +.service_header, .contractor_list{ + width: 900px; + height: 50px; + padding-bottom: 15px; + + padding-left: 40px; + margin: auto; + + background-color:rgb(4, 6, 56); + color: white; + display: flex; + - /* - display: grid; - grid-template-columns: 2fr 1fr; - height: 100%; - text-align: center; + + + +} +.doll_and_list { + padding-top: 20px; - */ - display: flex; flex-direction: row; - justify-content: space-between; - position: absolute; - - margin: auto; + justify-content: center; + align-content: center; + height: 400px; + margin: auto; + } .dollhouse { - /*border: 1px solid;*/ + display: flex; width: 400px; height: 400px; float: left; + max-width: 800px; +} + +.doll-buttons { + position: absolute; - +} - max-width: 800px; +.doll-kitchen button{ + background-color: red; + width: 40px; + height: 60px; + position: absolute; } .dollImg { @@ -62,22 +94,44 @@ body{ } .serviceList{ - /* border: 1px solid; */ - width: 400px; - height: 400px; - max-width: 800px; + + + max-width: 800px; + display: flex; + padding-top: 20px; float: right; - + } .list{ display: flex; flex-direction: row; + font-size: 16px; +} + +.slist.left{ + list-style-type: none; + display: table; + clear:both; + float: left; + position: relative; + +} +.slist.right{ + list-style-type: none; + display: table; + clear: both; + float: right; + position: relative; + } .results { + margin: auto; + display: flex; + flex-direction: column; } @@ -88,35 +142,42 @@ body{ } .sort{ - width: 600px; - height: 50px; - margin: 50px; -} - -h1{ + background-color: rgba(6, 62, 126, 0.212); + border: none; + border-radius: 5px; + margin-top: 10px; + margin-right: 50%; + padding-left: 20px; + padding-right: 10px; + color: black; + display:flex; + flex-direction: row; + align-items: start; - margin: 20px; - + + } -.slist.left{ - list-style-type: none; - display: table; - clear:both; - float: left; - position: relative; +.sort_options { + margin-top: 18px; + margin-left: 60px; + display:flex; + flex-direction: row; + justify-content: space-between; + } -.slist.right{ - list-style-type: none; - display: table; - clear: both; - float: right; - position: relative; + +.sort-dropdown { + padding-left: 10px; + justify-content: space-between; + } + + .item{ padding-bottom: 5px; } From df70f447963a3255f3eb33d0a78beff2b4728ba0 Mon Sep 17 00:00:00 2001 From: Ginelle Temull <89558840+ginellego@users.noreply.github.com> Date: Mon, 27 Nov 2023 05:13:41 +0000 Subject: [PATCH 03/22] dollhouse buttons --- browse.html | 18 ++++- browseStyle.css | 192 +++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 195 insertions(+), 15 deletions(-) diff --git a/browse.html b/browse.html index 4ad2681..20f4d81 100644 --- a/browse.html +++ b/browse.html @@ -14,9 +14,9 @@
-
+

Services by Space

-
+

Service List

@@ -26,7 +26,13 @@

Service List

- + + + + + + +
@@ -90,6 +96,12 @@

Sort:

+
+
+ +
+
+
diff --git a/browseStyle.css b/browseStyle.css index 2d1b084..e55105a 100644 --- a/browseStyle.css +++ b/browseStyle.css @@ -46,6 +46,7 @@ h1{ background-color:rgb(4, 6, 56); color: white; display: flex; + align-items: normal; @@ -55,13 +56,13 @@ h1{ } .doll_and_list { - padding-top: 20px; + padding-top: 100px; display: flex; flex-direction: row; justify-content: center; align-content: center; height: 400px; - margin: auto; + @@ -77,21 +78,185 @@ h1{ .doll-buttons { position: absolute; - -} -.doll-kitchen button{ - background-color: red; - width: 40px; - height: 60px; - position: absolute; } + + .dollImg { display: flex; height: 65%; margin-left: 20px; } +.doll-kitchen{ + margin-top: 182px; + margin-left: 210px; + background-color: red; + border: none; + width: 105px; + height: 68px; + display: flex; + position: absolute; + text-align: center; + padding-top: 23px; + padding-left: 25px; + font-size: medium; + cursor: pointer; +} + +.doll-kitchen button:hover{ + background-color: grey; + color: white; +} +.doll-bathroom{ + margin-top: 182px; + margin-left: 112px; + background-color: red; + border: none; + width: 95px; + height: 68px; + display: flex; + position: absolute; + text-align: center; + padding-top: 23px; + padding-left: 13px; + font-size: medium; +} + +.doll-bathroom button:hover{ + background-color: grey; + color: white; +} + +.doll-utility{ + margin-top: 182px; + margin-left: 40px; + background-color: red; + border: none; + width: 68px; + height: 68px; + display: flex; + position: absolute; + text-align: center; + padding-top: 23px; + padding-left: 13px; + font-size: medium; +} + +.doll-utility button:hover{ + background-color: grey; + color: white; +} + +.doll-bathroom2{ + margin-top: 110px; + margin-left: 246px; + background-color: red; + border: none; + width: 68px; + height: 68px; + display: flex; + position: absolute; + text-align: center; + padding-top: 23px; + padding-left: 6px; + font-size: small; +} + +.doll-bathroom2 button:hover{ + background-color: grey; + color: white; +} + +.doll-nursery{ + margin-top: 108px; + margin-left: 146px; + background-color: red; + border: none; + width: 95px; + height: 70px; + display: flex; + position: absolute; + text-align: center; + padding-top: 25px; + padding-left: 16px; + font-size: medium; +} + +.doll-nursery button:hover{ + background-color: grey; + color: white; +} + +.doll-bedroom{ + margin-top: 95px; + margin-left: 40px; + background-color: red; + border: none; + width: 102px; + height: 83px; + display: flex; + position: absolute; + text-align: center; + padding-top: 33px; + padding-left: 18px; + font-size: medium; +} + +.doll-bedroom button:hover{ + background-color: grey; + color: white; +} + +.doll-attic{ + margin-top: 16px; + margin-left: 50px; + background-color: red; + border: none; + width: 98px; + height: 76px; + display: flex; + position: absolute; + text-align: center; + padding-top: 25px; + padding-left: 30px; + font-size: medium; + + + border: 0 solid red; + width: 90px; + border-bottom-width: 100%; + border-left-width: 100px; + border-left-color: transparent; + +} + +.doll-attic button:hover{ + background-color: grey; + color: white; +} + +.doll-office{ + margin-top: 36px; + margin-left: 146px; + background-color: red; + border: none; + width: 95px; + height: 68px; + display: flex; + position: absolute; + text-align: center; + padding-top: 25px; + padding-left: 25px; + font-size: medium; +} + +.doll-office button:hover{ + background-color: grey; + color: white; +} + + .serviceList{ @@ -100,6 +265,7 @@ h1{ display: flex; padding-top: 20px; float: right; + margin-left: 100px; @@ -135,10 +301,12 @@ h1{ } +.clist{ + +} + .clisting{ - width: 800px; - height: 400px; - margin: 40px; + } .sort{ From cf753a9275eb93e41107ef58020c902580d53ddb Mon Sep 17 00:00:00 2001 From: Ginelle Temull <89558840+ginellego@users.noreply.github.com> Date: Tue, 28 Nov 2023 02:25:18 +0000 Subject: [PATCH 04/22] contractor list --- browse.html | 404 ++++++++++++++++++++++++++++++++++++++++++++++-- browseStyle.css | 357 ++++++++++++++++++++++++++++++++++-------- 2 files changed, 676 insertions(+), 85 deletions(-) diff --git a/browse.html b/browse.html index 20f4d81..7767594 100644 --- a/browse.html +++ b/browse.html @@ -14,10 +14,11 @@
-
-

Services by Space

-
-

Service List

+
+

Services by Space

+
+
+

Service List

@@ -25,14 +26,15 @@

Service List

- - - - - - - - + + + + + + + + +
@@ -75,7 +77,7 @@

Contractor List: [Selected Category]

Sort:

- @@ -87,19 +89,387 @@

Sort:

-
+
+

Map

+ +

List

+
-
- -
+
    +
  • +
    +
    +

    Contractor 1

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 2

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 3

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 4

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 5

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 6

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 7

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 8

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 9

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 10

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 11

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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 12

    +
    +

    Rating: + + + + + +

    +
    +
    +

    Contractor description: 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

    +
    +
    + + + + +
    + +
    +
    + + + +
    • + +
diff --git a/browseStyle.css b/browseStyle.css index e55105a..e4f11fe 100644 --- a/browseStyle.css +++ b/browseStyle.css @@ -7,6 +7,12 @@ body{ h1{ +} +ul li{ + text-indent: 0; + padding-left: 0; + margin-left: 0; + list-style-position: inside; } .mainpage { @@ -15,6 +21,7 @@ h1{ margin-bottom: 40px; align-content: center; + height: 100%; } @media screen and (min-width: 900px) { @@ -28,7 +35,7 @@ h1{ align-items: center; display: flex; flex-direction: column; - margin: auto; + /* margin: auto; */ padding-top: 50px; @@ -36,18 +43,33 @@ h1{ .service_header, .contractor_list{ - width: 900px; + /* width: 80%; height: 50px; padding-bottom: 15px; padding-left: 40px; - margin: auto; + /* margin: auto; */ - background-color:rgb(4, 6, 56); + /* background-color:rgb(4, 6, 56); color: white; display: flex; - align-items: normal; + align-items: normal; */ + + background-color: rgb(4,6,56) ; + border: none; + border-radius: 5px; + /* margin-top: 10px; */ + /* margin-right: 30%; */ + width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-bottom: 10px; + color: white; + display:flex; + flex-direction: row; + /* justify-content: space-between; */ + /* align-items: start; */ @@ -91,27 +113,41 @@ h1{ .doll-kitchen{ margin-top: 182px; margin-left: 210px; - background-color: red; + background-color: transparent; border: none; width: 105px; height: 68px; display: flex; position: absolute; text-align: center; - padding-top: 23px; + padding-top: 13px; padding-left: 25px; font-size: medium; - cursor: pointer; + 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; + + } -.doll-kitchen button:hover{ - background-color: grey; - color: white; + +.doll-kitchen :focus { + outline-color: transparent; + outline-style:solid; + box-shadow: 0 0 0 4px #5a01a7; } + .doll-bathroom{ margin-top: 182px; margin-left: 112px; - background-color: red; + background-color: transparent; border: none; width: 95px; height: 68px; @@ -121,17 +157,20 @@ h1{ padding-top: 23px; padding-left: 13px; font-size: medium; + transition-duration: 0.2s; + color:transparent; } -.doll-bathroom button:hover{ - background-color: grey; - color: white; +.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: red; + background-color: transparent; border: none; width: 68px; height: 68px; @@ -141,37 +180,43 @@ h1{ padding-top: 23px; padding-left: 13px; font-size: medium; + transition-duration: 0.2s; + color:transparent; } -.doll-utility button:hover{ - background-color: grey; - color: white; +.doll-utility:hover{ + background-color: rgba(128, 128, 128, 0.5); + color: rgba(0, 0, 0, 1); + font-weight: bold; } .doll-bathroom2{ - margin-top: 110px; + margin-top: 90px; margin-left: 246px; - background-color: red; + background-color: transparent; border: none; width: 68px; - height: 68px; + height: 88px; display: flex; position: absolute; text-align: center; - padding-top: 23px; + padding-top: 40px; padding-left: 6px; font-size: small; + transition-duration: 0.2s; + color:transparent; } -.doll-bathroom2 button:hover{ - background-color: grey; - color: white; +.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: red; + background-color: transparent; border: none; width: 95px; height: 70px; @@ -181,17 +226,20 @@ h1{ padding-top: 25px; padding-left: 16px; font-size: medium; + transition-duration: 0.2s; + color:transparent; } -.doll-nursery button:hover{ - background-color: grey; - color: white; +.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: red; + background-color: transparent; border: none; width: 102px; height: 83px; @@ -201,45 +249,80 @@ h1{ padding-top: 33px; padding-left: 18px; font-size: medium; + transition-duration: 0.2s; + color:transparent; } -.doll-bedroom button:hover{ - background-color: grey; - color: white; +.doll-bedroom:hover{ + background-color: rgba(128, 128, 128, 0.5); + color: rgba(0, 0, 0, 1); + font-weight: bold; } .doll-attic{ - margin-top: 16px; - margin-left: 50px; - background-color: red; - border: none; - width: 98px; - height: 76px; + 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: 25px; - padding-left: 30px; + /* padding-top: 45px; + padding-left: 50px; */ font-size: medium; + transition-duration: 0.2s; + color:transparent; - border: 0 solid red; - width: 90px; - border-bottom-width: 100%; - border-left-width: 100px; - border-left-color: transparent; } -.doll-attic button:hover{ - background-color: grey; - color: white; +.doll-attic:hover{ + + color: rgba(0, 0, 0, 1); + font-weight: bold; + border-top-color: rgba(128, 128, 128, 1); +} + +.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); } .doll-office{ margin-top: 36px; margin-left: 146px; - background-color: red; + background-color: transparent; border: none; width: 95px; height: 68px; @@ -249,11 +332,14 @@ h1{ padding-top: 25px; padding-left: 25px; font-size: medium; + transition-duration: 0.2s; + color:transparent; } -.doll-office button:hover{ - background-color: grey; - color: white; +.doll-office:hover{ + background-color: rgba(128, 128, 128, 0.5); + color: rgba(0, 0, 0, 1); + font-weight: bold; } @@ -294,61 +380,196 @@ h1{ } +.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; + /* margin: auto; */ display: flex; flex-direction: column; + width: 100%; } + .clist{ + text-indent: 0; + list-style-position: inside; + width: 100%; + } .clisting{ + list-style-type: none; + display: flex; + flex-direction: row; + clear: both; + margin-top: 20px; + margin-bottom: 20px; + padding-left: 10px; + border-radius: 5px; + background-color: rgba(6, 62, 126, 0.212); + text-indent: 0; + width: 100%; +} +.clisting1{ + list-style-type: none; + display: flex; + flex-direction: row; + clear: both; + margin-top: 20px; + border-radius: 5px; + background-color: rgba(6, 62, 126, 0.212); +} +.c-info{ + width: 100%; + background-color: transparent; + padding-left: 10px; + padding-bottom: 10px; } -.sort{ +.listing-img{ + display: flex; + float: left; + width: 200px; + height: 200px; + margin-left: 20px; + border-radius: 5px; +} +.c-listing-buttons{ + display: flex; + flex-direction: row; + /* align-items: flex-start; */ + justify-content:flex-start; + +} + +.c-rating{ + margin-left: 50%; + margin-top: 10px; +} +.c-rating i{ + color: rgb(255, 123, 0); + font-size: 15px; + } + +.sort{ + width: 100%; background-color: rgba(6, 62, 126, 0.212); border: none; border-radius: 5px; - margin-top: 10px; - margin-right: 50%; + /* margin-top: 10px; */ + /* margin-right: 30%; */ padding-left: 20px; - padding-right: 10px; + /* padding-right: 10px; */ color: black; display:flex; flex-direction: row; - align-items: start; + justify-content: space-between; + /* align-items: start; */ } .sort_options { - margin-top: 18px; + margin-top: 10px; + margin-bottom: 10px; margin-left: 60px; display:flex; flex-direction: row; - justify-content: space-between; - + justify-content: flex-start; + width: 100%; } .sort-dropdown { - padding-left: 10px; - justify-content: space-between; + 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: #ccc; + -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); + } + + -.item{ - padding-bottom: 5px; -} From 5abb45712d3012f33bc78d49ebb5f47b47547ad3 Mon Sep 17 00:00:00 2001 From: Ginelle Temull <89558840+ginellego@users.noreply.github.com> Date: Tue, 28 Nov 2023 03:28:58 +0000 Subject: [PATCH 05/22] styling and on click services --- browse.html | 61 ++++++++++++++++++++++++++----------------------- browse.js | 12 ++++++++++ browseStyle.css | 47 +++++++++++++++++++++++++++++++------ 3 files changed, 85 insertions(+), 35 deletions(-) diff --git a/browse.html b/browse.html index 7767594..8fed592 100644 --- a/browse.html +++ b/browse.html @@ -13,6 +13,9 @@
+
+

Main > Browse

+

Services by Space

@@ -26,50 +29,52 @@

Service List

- - - - - - + + + + + + - - + +
- +

Browse All

+
    -
  • Appliance Repair
    • -
  • Basement Renovation
    • -
  • Bathroom Renovation
    • -
  • Carpeting
    • -
  • Drywalling
    • -
  • Electrical
    • -
  • Flooring
    • -
  • Foundation
    • -
  • Heating and Cooling
    • +
  • 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
    • +
  • Insulation
    • +
  • Landscaping
    • +
  • Painting
    • +
  • Plumbing
    • +
  • Roofing
    • +
  • Siding
    • +
  • Tree Services
    • +
  • Water Heating
    • +
  • Windows and Doors
+
-

Contractor List: [Selected Category]

+

Contractor List: [Selected Category]

diff --git a/browse.js b/browse.js index e69de29..003c3ac 100644 --- a/browse.js +++ b/browse.js @@ -0,0 +1,12 @@ +var cHeader = "Contractor List"; + +function initializeBrowse(){ + +} + + + +function updateCHeader (service){ + document.getElementById('cHeader').innerHTML = cHeader + ": " + service; + +} \ No newline at end of file diff --git a/browseStyle.css b/browseStyle.css index e4f11fe..0fcc528 100644 --- a/browseStyle.css +++ b/browseStyle.css @@ -41,6 +41,14 @@ ul li{ } +.breadcrumb{ + display: flex; + flex-direction: row; + justify-content:left; + /* align-items: flex-start; */ + text-align: left; +} + .service_header, .contractor_list{ /* width: 80%; @@ -77,13 +85,13 @@ ul li{ } .doll_and_list { - - padding-top: 100px; + width:100%; + padding-top: 20px; display: flex; flex-direction: row; justify-content: center; align-content: center; - height: 400px; + height: auto; @@ -91,6 +99,7 @@ ul li{ } .dollhouse { + padding-top: 20px; display: flex; width: 400px; height: 400px; @@ -105,6 +114,7 @@ ul li{ + .dollImg { display: flex; height: 65%; @@ -349,18 +359,32 @@ ul li{ max-width: 800px; display: flex; - padding-top: 20px; + flex-direction: column; + padding-top: 0px; float: right; margin-left: 100px; + font-size: 16px; + text-indent: 0; } +.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{ @@ -405,6 +429,8 @@ ul li{ text-indent: 0; list-style-position: inside; width: 100%; + margin-left: -20px; + padding-right: 20px; } @@ -421,6 +447,7 @@ ul li{ background-color: rgba(6, 62, 126, 0.212); text-indent: 0; width: 100%; + padding-right: 30px; } .clisting1{ list-style-type: none; @@ -430,6 +457,7 @@ ul li{ margin-top: 20px; border-radius: 5px; background-color: rgba(6, 62, 126, 0.212); + } .c-info{ @@ -437,6 +465,7 @@ ul li{ background-color: transparent; padding-left: 10px; padding-bottom: 10px; + /* padding-right: 20px; */ } .listing-img{ @@ -445,7 +474,9 @@ ul li{ width: 200px; height: 200px; margin-left: 20px; + margin-top: 10px; border-radius: 5px; + /* padding-right: 20px; */ } .c-listing-buttons{ @@ -459,6 +490,7 @@ ul li{ .c-rating{ margin-left: 50%; margin-top: 10px; + width: 20%; } .c-rating i{ color: rgb(255, 123, 0); @@ -479,6 +511,7 @@ ul li{ flex-direction: row; justify-content: space-between; /* align-items: start; */ + padding: 20px; @@ -534,7 +567,7 @@ ul li{ left: 0; right: 0; bottom: 0; - background-color: #ccc; + background-color: #2196F3; -webkit-transition: .4s; transition: .4s; border-radius: 34px; @@ -557,9 +590,9 @@ ul li{ background-color: #2196F3; } - input:focus + .slider { + /* input:focus + .slider { box-shadow: 0 0 1px #2196F3; - } + } */ input:checked + .slider:before { -webkit-transform: translateX(26px); From 958ab920e9c13b6d12c6469d23b924c79aef6e0e Mon Sep 17 00:00:00 2001 From: Ginelle Temull <89558840+ginellego@users.noreply.github.com> Date: Tue, 28 Nov 2023 03:33:21 +0000 Subject: [PATCH 06/22] add nav bar --- browse.html | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/browse.html b/browse.html index 8fed592..3825803 100644 --- a/browse.html +++ b/browse.html @@ -1,7 +1,9 @@ + + @@ -10,6 +12,59 @@
+ +
From 724a65a114ad9c557dfa1393849aa4cfb12c04de Mon Sep 17 00:00:00 2001 From: Ginelle Temull <89558840+ginellego@users.noreply.github.com> Date: Tue, 28 Nov 2023 03:40:00 +0000 Subject: [PATCH 07/22] style --- browse.html | 2 +- browseStyle.css | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/browse.html b/browse.html index 3825803..f6c8290 100644 --- a/browse.html +++ b/browse.html @@ -233,7 +233,7 @@

Contractor 2

Contractor 3

-

Rating: +

Rating: diff --git a/browseStyle.css b/browseStyle.css index 0fcc528..fa25edb 100644 --- a/browseStyle.css +++ b/browseStyle.css @@ -4,10 +4,7 @@ body{ background-color: aliceblue; } -h1{ - -} ul li{ text-indent: 0; padding-left: 0; @@ -449,7 +446,7 @@ ul li{ width: 100%; padding-right: 30px; } -.clisting1{ +/* .clisting1{ list-style-type: none; display: flex; flex-direction: row; @@ -458,7 +455,7 @@ ul li{ border-radius: 5px; background-color: rgba(6, 62, 126, 0.212); -} +} */ .c-info{ width: 100%; @@ -488,9 +485,11 @@ ul li{ } .c-rating{ - margin-left: 50%; + /* align-items: self-end; */ + margin-left: 30%; margin-top: 10px; width: 20%; + justify-content: right; } .c-rating i{ color: rgb(255, 123, 0); From a39e2b1dc91d493e8d6fb7fdfc2937fc2fa7f1b2 Mon Sep 17 00:00:00 2001 From: Ginelle Temull <89558840+ginellego@users.noreply.github.com> Date: Wed, 29 Nov 2023 03:48:26 +0000 Subject: [PATCH 08/22] add filter for dollhouse/service list on click --- browse.html | 130 ++++++++++++++++++++++++------------------------ browse.js | 93 +++++++++++++++++++++++++++++++++- browseStyle.css | 22 ++++++-- 3 files changed, 176 insertions(+), 69 deletions(-) diff --git a/browse.html b/browse.html index f6c8290..17237b1 100644 --- a/browse.html +++ b/browse.html @@ -81,53 +81,53 @@

Service List

- +
- - - - - - + + + + + + - - + +
-

Browse All

+

Browse All

    -
  • Appliance Repair
    • -
  • Basement Renovation
    • -
  • Bathroom Renovation
    • -
  • Carpeting
    • -
  • Drywalling
    • -
  • Electrical
    • -
  • Flooring
    • -
  • Foundation
    • -
  • Heating and Cooling
    • +
  • 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
    • +
  • Insulation
    • +
  • Landscaping
    • +
  • Painting
    • +
  • Plumbing
    • +
  • Roofing
    • +
  • Siding
    • +
  • Tree Services
    • +
  • Water Heating
    • +
  • Windows and Doors
-
+

Contractor List: [Selected Category]

@@ -168,9 +168,9 @@

Sort: