diff --git a/HTML:CSS/Assets/Favicon/favicon.ico b/HTML:CSS/Assets/Favicon/favicon.ico new file mode 100644 index 0000000..a4c364b Binary files /dev/null and b/HTML:CSS/Assets/Favicon/favicon.ico differ diff --git a/HTML:CSS/Assets/SVGs/account.svg b/HTML:CSS/Assets/SVGs/account.svg index 3136b8f..3f9cbec 100755 --- a/HTML:CSS/Assets/SVGs/account.svg +++ b/HTML:CSS/Assets/SVGs/account.svg @@ -1 +1 @@ -account \ No newline at end of file +account diff --git a/HTML:CSS/Assets/SVGs/contact.svg b/HTML:CSS/Assets/SVGs/contact.svg index 239194d..2162fe5 100755 --- a/HTML:CSS/Assets/SVGs/contact.svg +++ b/HTML:CSS/Assets/SVGs/contact.svg @@ -1 +1 @@ -contact \ No newline at end of file +contact diff --git a/HTML:CSS/Assets/SVGs/contact0.svg b/HTML:CSS/Assets/SVGs/contact0.svg new file mode 100644 index 0000000..6810ab6 --- /dev/null +++ b/HTML:CSS/Assets/SVGs/contact0.svg @@ -0,0 +1 @@ +contact diff --git a/HTML:CSS/Assets/SVGs/contact1.svg b/HTML:CSS/Assets/SVGs/contact1.svg new file mode 100644 index 0000000..3991820 --- /dev/null +++ b/HTML:CSS/Assets/SVGs/contact1.svg @@ -0,0 +1 @@ +contact diff --git a/HTML:CSS/Assets/SVGs/enewsletter.svg b/HTML:CSS/Assets/SVGs/enewsletter.svg index aa5eac3..a94a881 100755 --- a/HTML:CSS/Assets/SVGs/enewsletter.svg +++ b/HTML:CSS/Assets/SVGs/enewsletter.svg @@ -1 +1 @@ -enewsletter \ No newline at end of file +enewsletter diff --git a/HTML:CSS/Assets/SVGs/equal-housing.svg b/HTML:CSS/Assets/SVGs/equal-housing.svg index f8292db..fc8dc03 100755 --- a/HTML:CSS/Assets/SVGs/equal-housing.svg +++ b/HTML:CSS/Assets/SVGs/equal-housing.svg @@ -1 +1 @@ -equal-housing \ No newline at end of file +equal-housing diff --git a/HTML:CSS/Assets/SVGs/facebook.svg b/HTML:CSS/Assets/SVGs/facebook.svg index 9408981..9c6cf96 100755 --- a/HTML:CSS/Assets/SVGs/facebook.svg +++ b/HTML:CSS/Assets/SVGs/facebook.svg @@ -1 +1 @@ -facebook \ No newline at end of file +facebook diff --git a/HTML:CSS/Assets/SVGs/facebook0.svg b/HTML:CSS/Assets/SVGs/facebook0.svg new file mode 100644 index 0000000..6de18d8 --- /dev/null +++ b/HTML:CSS/Assets/SVGs/facebook0.svg @@ -0,0 +1 @@ +facebook diff --git a/HTML:CSS/Assets/SVGs/instagram.svg b/HTML:CSS/Assets/SVGs/instagram.svg index 77afe49..4fd5542 100755 --- a/HTML:CSS/Assets/SVGs/instagram.svg +++ b/HTML:CSS/Assets/SVGs/instagram.svg @@ -1 +1 @@ -instagram-01 \ No newline at end of file +instagram-01 diff --git a/HTML:CSS/Assets/SVGs/instagram0.svg b/HTML:CSS/Assets/SVGs/instagram0.svg new file mode 100644 index 0000000..7f4c687 --- /dev/null +++ b/HTML:CSS/Assets/SVGs/instagram0.svg @@ -0,0 +1 @@ +instagram-01 diff --git a/HTML:CSS/Assets/SVGs/linkedin.svg b/HTML:CSS/Assets/SVGs/linkedin.svg index a367cb6..cf0c369 100755 --- a/HTML:CSS/Assets/SVGs/linkedin.svg +++ b/HTML:CSS/Assets/SVGs/linkedin.svg @@ -1 +1 @@ -linkedin \ No newline at end of file +linkedin diff --git a/HTML:CSS/Assets/SVGs/linkedin0.svg b/HTML:CSS/Assets/SVGs/linkedin0.svg new file mode 100644 index 0000000..f8e8de5 --- /dev/null +++ b/HTML:CSS/Assets/SVGs/linkedin0.svg @@ -0,0 +1 @@ +linkedin diff --git a/HTML:CSS/Assets/SVGs/office.svg b/HTML:CSS/Assets/SVGs/office.svg index 5d96198..d6d6619 100755 --- a/HTML:CSS/Assets/SVGs/office.svg +++ b/HTML:CSS/Assets/SVGs/office.svg @@ -1 +1 @@ -office \ No newline at end of file +office diff --git a/HTML:CSS/Assets/SVGs/realtor.svg b/HTML:CSS/Assets/SVGs/realtor.svg index abed2f0..38fab2a 100755 --- a/HTML:CSS/Assets/SVGs/realtor.svg +++ b/HTML:CSS/Assets/SVGs/realtor.svg @@ -1 +1 @@ -realtor \ No newline at end of file +realtor diff --git a/HTML:CSS/Assets/SVGs/search.svg b/HTML:CSS/Assets/SVGs/search.svg index 0791b79..9ad381d 100755 --- a/HTML:CSS/Assets/SVGs/search.svg +++ b/HTML:CSS/Assets/SVGs/search.svg @@ -1 +1 @@ -search \ No newline at end of file +search diff --git a/HTML:CSS/Assets/SVGs/twitter.svg b/HTML:CSS/Assets/SVGs/twitter.svg index 8ae19bd..d11d5be 100755 --- a/HTML:CSS/Assets/SVGs/twitter.svg +++ b/HTML:CSS/Assets/SVGs/twitter.svg @@ -1 +1 @@ -twitter \ No newline at end of file +twitter diff --git a/HTML:CSS/Assets/SVGs/twitter0.svg b/HTML:CSS/Assets/SVGs/twitter0.svg new file mode 100644 index 0000000..f3bb6f3 --- /dev/null +++ b/HTML:CSS/Assets/SVGs/twitter0.svg @@ -0,0 +1 @@ +twitter diff --git a/HTML:CSS/Assets/SVGs/website.svg b/HTML:CSS/Assets/SVGs/website.svg index 7eba2a0..429bf13 100755 --- a/HTML:CSS/Assets/SVGs/website.svg +++ b/HTML:CSS/Assets/SVGs/website.svg @@ -1 +1 @@ -website \ No newline at end of file +website diff --git a/HTML:CSS/Assets/SVGs/youtube.svg b/HTML:CSS/Assets/SVGs/youtube.svg index 56e5774..9ac958b 100755 --- a/HTML:CSS/Assets/SVGs/youtube.svg +++ b/HTML:CSS/Assets/SVGs/youtube.svg @@ -1 +1 @@ -youtube \ No newline at end of file +youtube diff --git a/HTML:CSS/Assets/SVGs/youtube0.svg b/HTML:CSS/Assets/SVGs/youtube0.svg new file mode 100644 index 0000000..9c71423 --- /dev/null +++ b/HTML:CSS/Assets/SVGs/youtube0.svg @@ -0,0 +1 @@ +youtube diff --git a/HTML:CSS/css/style.css b/HTML:CSS/css/style.css new file mode 100644 index 0000000..6f10991 --- /dev/null +++ b/HTML:CSS/css/style.css @@ -0,0 +1,426 @@ +html, body { + font-family: 'Lato', sans-serif; + font-size: 14px; +} + +.tenLogo { + width: 20%; +} + +.eighty { + width: 80%; +} + +.no-bullet, .menu { + list-style: none; +} + +.search-bar { + width: 100%; + background: #AAAAAA; + padding-top: 5px; + padding-bottom: 5px; +} + +.teal { + background: #2C99A4; +} + +.realtor-background { + background: #EEEEEE; +} + +#input-form { + margin: 0; +} + +#search-button, .menu, .menu a { + margin: auto; + color: white; +} + + #search-text { + color: white; + padding: initial; + margin-left: 25%; + } + +.search { + display: flex; + justify-content: center; + width: 100%; + padding: 0; +} + +.phone, .address { + font-size: 18px; + letter-spacing: .05em; +} + +.menu, .site-links { + text-decoration: underline; + color: white; +} + +#contact-button { + font-size: 18px; + letter-spacing: .05em; + font-weight: 500; +} + +.hundred { + width: 100%; + margin: auto; +} + +#realtor-image { + display: inline-block; + max-width: 100%; + height: auto; + padding: 0; +} + +#sara { + padding: 0; +} + +button, .phone, .address, .copyright { + color: white; +} + +.sm { + margin-top: 10px; +} + +.social { + display: flex; + justify-content: space-between; + padding: 0; + margin-top: 10px; + margin-bottom: 10px; +} + +.social2 { + display: flex; + justify-content: space-between; +} + +button { + width: 100%; +} + +.phone img { + margin-right: 5px; +} + +.info-container { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.info-row { + margin-top: 15px; +} + +.info-row h1 { + color: #323232; +} + +.info-row p { + color: #858585; +} + +.additional-info-container { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + padding: 0; +} + +.list-holder ul li, .site-links { + font-size: 18px; +} + +.copyright { + font-size: 16px; +} + +.realtor-equal img { + margin-left: 1rem; + margin-right: 1rem; +} + +.info-list { + height: 100%; + width: auto; + margin: 10px 10px 10px 0; +} + +.list-holder ul { + padding: 0; +} + +.list-unstyled { + color: #5C5C5C; +} + +.list-unstyled a { + color: #2C99A5; +} + +.nav-link { + color: #aaa !important; +} + +.full-nav { + font-size: 18px; + font-weight: 600; + letter-spacing: .1em; +} + +.nav-link.active { + color: #2C99A5 !important; + border: none; + border-bottom: 2px solid #2C99A5 !important; +} + +.dropdown-toggle { + color: #2C99A5 !important; + display: flex; + justify-content: space-between; + border: 1px solid #aaa; + padding-left: 15px; + padding-right: 5px; +} + +.dropdown { + margin-top: 25px; + padding: 0; +} + +.dropdown-toggle::after { + display: none; +} + +.tab-pane div { + margin: auto; + padding: 0; +} + +.dropdown-menu { + width: 100%; +} + +#lang-and-certs { + margin-top: 0; +} + +.tab-pane h4, .tab-writing { + margin-top: 25px !important; +} + +.current-tab { + font-size: 18px; +} + +.site-links { + font-size: 14px; + padding-left: 10px; + padding-right: 10px; + text-align: right; +} + +#site-link, .copyright, .realtor-equal { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +#site-link { + margin-bottom: 13px; +} + +.copyright { + margin-bottom: 10px; +} + +.realtor-equal, .social2 { + margin-bottom: 0; +} + +.phone, .address { + margin-bottom: .5rem; +} + +.no-padding { + padding-left: 0; + padding-right: 0; +} + +.logo-holder { + padding-left: 0; + padding-right: 0; +} + +.right-menu { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +.centerXY, .logo-holder { + display: flex; + flex-direction: column; + justify-content: center; +} + +.centerXY { + align-items: center; +} + +.centerXY div{ + color: #5c5c5c; +} + +#header { + padding-left: 15px; +} + +.bottom-40 { + margin-bottom: 40px; +} + +#fluid-header { + padding-left: 5em; + padding-right: 0em; +} + +.right-menu-icons { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +.right-menu-list { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +.full-height { + height: 100%; + width: auto; +} + +.full-height li { + margin-left: 30px; +} + +.fa-bars { + height: 16px; + width: 16px; +} + +.side-items { + margin-left: 3em; + color: black !important; +} + +picture img { + height: auto; + width: 100%; +} + +@media (max-width: 575px) { + .realtor-info, .additional-info { + padding: 0; } } + +@media (max-width: 575px) { + #search-text, .menu, .xs-hide { + display: none; } } + +@media (max-width: 575px) { + .search { + padding-left: 0; } } + +@media (min-width: 768px) { + #header { + display: none; } } + +@media (max-width: 767px) { + #empty, #empty1, #empty2, #fluid-header { + display: none; } } + +@media (max-width: 767px) { + .list-unstyled { + font-size: 14px!important; } } + +@media (max-width: 991px) { + .menu { + font-size: 12px!important; } } + +@media (min-width: 576px) { + #search-button, .xs-show { + display: none; } } + +@media (max-width: 576px) { + #site-link { + padding: 0; + display: flex; + justify-content: space-between; } +} + +@media (max-width: 576px) { + .copyright, .phone, .address, .realtor-equal { + padding: 0; + display: flex; + justify-content: center; } +} + +@media (max-width: 767px) and (min-width: 576px) { + .info-row h1 { + font-size: 2rem!important; } } + +@media (max-width: 992px) and (min-width: 576px) { + .phone, .address, .copyright, .site-links { + font-size: 13px; + } +} + +@media (max-width: 576px) { + .social2 { + margin-bottom: 15px; + } + .phone, .address, .copyright, .site-links { + font-size: 14px !important; + } +} + +@media (min-width: 768px) { + .right-menu { + display: flex; + flex-direction: column; + justify-content: flex-end; + } +} + +@media (max-width: 768px) { + .info-row { + margin-top: 5px; + } +} + +@media (max-width: 768px) { + .full-nav { + font-size: 16px; + } + .menu a, .site-links, .phone, .address, .copyright { + font-size: 8px; + } + .site-links { + font-size: 8px; + } +} diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html new file mode 100644 index 0000000..ef4ddaa --- /dev/null +++ b/HTML:CSS/index.html @@ -0,0 +1,316 @@ + + + + + Booj Realtor + + + + + + + + + + + +
+ +
+
+
+ + + + + + +
+
+
+
+ +
+
+
+ +
+
+
+
+ + + +
+ +
+
+
+ + + + + +
+
NEW LISTING
+
OPEN HOUSES
+
MAP SEARCH
+
+
+
+ + +
+
+
+
+ Realtor Image +
+
+
+
+
+

Jane Smith

+
+
+

REALTOR®

+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ + +
+ + + + + + + +
+
+
+
+ Lorem ipsum dolor sit amet dui sit sapien sem auctor nec elit. Mauris libero nunc malesuada porta netus. Ultrices sit id lorem tortor elementum purus primis quis aliquet augue vestibulum. In enim nec. At tempor consectetuer. Non magna vel. Fames amet + feugiat. Tempor vel laoreet lectus ut ut mi vestibulum donec. Mauris mauris nunc donec at blandit. Sem et pede cursus quis accumsan. Diam in turpis curabitur enim porttitor. Lectus parturient ipsum. Lobortis dolor massa. Orci nibh nec hac + suspendisse non. Enim velit sed. Aliquam felis dolor. Urna pellentesque risus lacinia aliquam at et erat urna vel nullam accumsan sem. +
+
Proin vel dignissim urna. Curabitur sit amet nulla non metus posuere porta. Nulla magna mauris, sollicitudin eu velit at, fermentum rhoncus est. In sagittis neque non commodo pharetra. Pellentesque venenatis interdum nisi id volutpat. + Vivamus auctor mi nibh, eu dapibus velit tempus maximus. In at semper quam. Etiam vehicula maximus viverra. Proin at est a nibh egestas congue. +

Nam consectetur lectus magna, non scelerisque elit interdum eu. Morbi ligula arcu, vestibulum nec tortor sit amet, venenatis pharetra mi. Curabitur vitae lorem scelerisque, mattis nisl in, malesuada libero. Cras vitae neque quis tellus + feugiat fringilla. Fusce vel tincidunt est. Ut vitae turpis lacinia, porta ex venenatis, imperdiet justo. Donec consequat nulla vel augue mollis gravida. +
+
+
+

LANGUAGES

+

Dutch, Finnish, Spanish

+

DESIGNATIONS

+

CRS, GRI, CNE

+
+
+ +
+
Bacon ipsum dolor amet hamburger porchetta culpa sunt commodo duis ut fatback tongue. Lorem qui shoulder, occaecat deserunt irure dolor fatback fugiat. Hamburger fugiat incididunt salami, sirloin bresaola enim veniam quis ipsum jowl spare ribs. + Ground round jowl salami esse meatball aute beef ribs frankfurter meatloaf aliqua do corned beef magna sint. In enim alcatra, pariatur eu filet mignon occaecat cupim salami dolor sunt velit incididunt shoulder.
+
Hodor hodor - hodor... Hodor hodor hodor - hodor. Hodor. Hodor. Hodor hodor... Hodor hodor hodor, hodor, hodor hodor. Hodor! Hodor hodor, hodor; hodor hodor, hodor. Hodor hodor. Hodor hodor HODOR! Hodor hodor hodor, hodor. Hodor hodor? Hodor hodor + HODOR! Hodor HODOR hodor, hodor hodor hodor hodor... Hodor hodor hodor. Hodor.
+
Live-edge waistcoat four dollar toast, photo booth fixie next level skateboard vexillologist. Copper mug you probably haven't heard of them pork belly af 8-bit blog hammock. Meh glossier chia meditation, brooklyn post-ironic whatever jean shorts + pabst iceland truffaut hoodie YOLO tumeric. Listicle la croix af, gluten-free man bun tumeric unicorn food truck echo park cred thundercats literally ramps. Banjo echo park vegan DIY. Vexillologist live-edge asymmetrical taiyaki, occupy hella + raclette. 90's chartreuse helvetica chia jianbing XOXO tote bag air plant freegan. Locavore vinyl subway tile authentic VHS. Hell of 8-bit locavore ennui blog venmo lomo trust fund green juice flexitarian. +
+
+
+ + + + + + + + + + + + diff --git a/HTML:CSS/js/main.js b/HTML:CSS/js/main.js new file mode 100644 index 0000000..168c075 --- /dev/null +++ b/HTML:CSS/js/main.js @@ -0,0 +1,14 @@ +$('.nav').on('show.bs.tab', function (e) { + updateActiveTab(e) + $(".dropdown-toggle").html(e.target.text + ' ') +}) + +$('.top-menu li a').on('click', function (e) { + updateActiveTab(e) +}) + +function updateActiveTab(e) { + let activeTab = e.target.hash.slice(1) + $('.nav-link.active').removeClass('active') + $(`.nav-link.${activeTab}`).addClass('active') +} diff --git a/Javascript/js_test.html b/Javascript/js_test.html index 94008fe..1413ba4 100755 --- a/Javascript/js_test.html +++ b/Javascript/js_test.html @@ -1,150 +1,225 @@ - - - - - - - - - - - - - -

Manipulate the Last LI

-

Select the Last Li in this list and turn its text red.

-
-
-
-
    -
  • First
    • -
  • Second
    • -
  • Third
    • -
  • Fourth
    • -
-
-
-
- - - - - -

Select specific children from a nested list.

-

Select the only the first children of the LI "Sally".

-
-
-
-

Some Text

-

Some More Text

-
Random Div
-
    -
  • Bob
    • -
  • Sally -
      -
    • Car
      • -
    • Boat
      • -
    • Bike -
        -
      • Red
        • -
      • Green
        • -
      • Blue
        • -
      -
      • -
    -
    • -
  • Larry
    • -
  • Mo
    • -
-
-
-
- - - - - -

Get a Field value and Write it to the page

-

Write the value of the "Code Types" select field to a new div within the fieldset.

-
-
- -
-
- - - - -

Find Dimensions of an Element

-

Write actual rendered dimensions of the following div including any padding to the div itself.

-
This is a div. How big am i?
- - - - -

Events

-

Place a click event on the following link. When clicked toggle it's class name from 'clicked' to 'not-clicked'.

- Click Me - - - - -

Ajax

-

Call ajax_return.html and write's its json as a "name": "value" list to the following div:

-
My Response Was...
- - - \ No newline at end of file + + + + + + + + + + + + + + + +

Manipulate the Last LI

+

Select the Last Li in this list and turn its text red.

+
+
+
+
    +
  • First
    • +
  • Second
    • +
  • Third
    • +
  • Fourth
    • +
+
+
+
+ + + + + +

Select specific children from a nested list.

+

Select the only the first children of the LI "Sally".

+
+
+
+

Some Text

+

Some More Text

+
Random Div
+
    +
  • Bob
    • +
  • Sally +
      +
    • Car
      • +
    • Boat
      • +
    • Bike +
        +
      • Red
        • +
      • Green
        • +
      • Blue
        • +
      +
      • +
    +
    • +
  • Larry
    • +
  • Mo
    • +
+
+
+
+ + + + + +

Get a Field value and Write it to the page

+

Write the value of the "Code Types" select field to a new div within the fieldset.

+
+
+ +
+
+ + + + +

Find Dimensions of an Element

+

Write actual rendered dimensions of the following div including any padding to the div itself.

+
This is a div. How big am i?
+ + + + +

Events

+

Place a click event on the following link. When clicked toggle it's class name from 'clicked' to 'not-clicked'.

+ Click Me + + + + +

Ajax

+

Call ajax_return.html and write's its json as a "name": "value" list to the following div:

+
My Response Was...
+ + + + + + +