From 3b802d6be60c87501ef8b7a0c6d2c3f3926ffa72 Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Mon, 7 Aug 2017 20:03:55 -0600 Subject: [PATCH 01/14] starting set up for html/css --- HTML:CSS/Assets/SVGs/account.svg | 2 +- HTML:CSS/Assets/SVGs/contact.svg | 2 +- HTML:CSS/Assets/SVGs/search.svg | 2 +- HTML:CSS/css/style.css | 58 ++++++++++++++++++++++++++++++++ HTML:CSS/index.html | 32 ++++++++++++++++++ 5 files changed, 93 insertions(+), 3 deletions(-) create mode 100644 HTML:CSS/css/style.css create mode 100644 HTML:CSS/index.html diff --git a/HTML:CSS/Assets/SVGs/account.svg b/HTML:CSS/Assets/SVGs/account.svg index 3136b8f..f1c41ea 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..409888d 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/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/css/style.css b/HTML:CSS/css/style.css new file mode 100644 index 0000000..12600fb --- /dev/null +++ b/HTML:CSS/css/style.css @@ -0,0 +1,58 @@ +html{ + font-size: .9rem; +} + +.tenLogo { + width: 20%; +} + +.eighty { + width: 80%; +} + +.noBullet, .menu { + list-style: none; +} + +.searchBar { + background: #AAAAAA; +} + +.teal { + background: #2C99A4; +} +#inputForm { + /*margin: auto;*/ +} + +#searchButton, #searchText, .menu { + margin: auto; + color: white; +} + +.menu { + text-decoration: underline; +} + +.searchBar { + display: flex; + justify-content: flex-start; + align-content: center; +} + +@media (max-width: 576px) { + #searchText, .empty, .menu { + display: none; } } + +@media (min-width: 577px) { + #searchButton { + display: none; } } + +#noMargin { + margin: 0; +} + +.hundred { + width: 100%; + margin: auto; +} diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html new file mode 100644 index 0000000..ef24603 --- /dev/null +++ b/HTML:CSS/index.html @@ -0,0 +1,32 @@ + + + + + Booj Realtor + + + + + + + + + +
+
+ + + +
+ New Listing + Open Houses + Map Search +
+
+ + + + + + + From 77d62bed3316d52f9f63b3c74d56482140e333a4 Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 09:55:05 -0600 Subject: [PATCH 02/14] divs lining up for realtor image --- HTML:CSS/css/style.css | 52 +++++++++++++++++++++++++++++++----------- HTML:CSS/index.html | 43 +++++++++++++++++++++++++++------- 2 files changed, 74 insertions(+), 21 deletions(-) diff --git a/HTML:CSS/css/style.css b/HTML:CSS/css/style.css index 12600fb..73051f2 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -1,5 +1,5 @@ html{ - font-size: .9rem; + font-size: .8rem; } .tenLogo { @@ -14,38 +14,48 @@ html{ list-style: none; } -.searchBar { +.search-bar { + width: 100%; background: #AAAAAA; } .teal { background: #2C99A4; } -#inputForm { - /*margin: auto;*/ +#input-form { + margin: auto; } -#searchButton, #searchText, .menu { +#search-button, .menu { margin: auto; color: white; } -.menu { - text-decoration: underline; -} + #search-text { + /*margin: auto -20px auto 20px;*/ + color: white; + } -.searchBar { +.search { display: flex; - justify-content: flex-start; - align-content: center; + margin: auto; + width: 100%; +} + +.menu { + text-decoration: underline; } @media (max-width: 576px) { - #searchText, .empty, .menu { + #search-text, .menu { + display: none; } } + +@media (max-width: 768px) { + .empty { display: none; } } @media (min-width: 577px) { - #searchButton { + #search-button { display: none; } } #noMargin { @@ -56,3 +66,19 @@ html{ width: 100%; margin: auto; } + +#realtor-image { + display: inline-block; + max-width: 100%; + height: auto; + /*max-height: 360px;*/ + padding: 0; +} + +#sara { + padding: 0; +} + +button { + color: white; +} diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html index ef24603..4621cb0 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -11,16 +11,37 @@ +
+
+
+ + + + + +
+ New Listing + Open Houses + Map Search +
+
+
+ -
+
- - - -
- New Listing - Open Houses - Map Search +
+ Realtor Image +
+
+
+

Jane Smith


+

REALTOR®

+
+ +
@@ -30,3 +51,9 @@ + From 97765788e7ab878af79b11a8fb95498b6f9005e4 Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 10:47:46 -0600 Subject: [PATCH 03/14] realtor info section nearly complete --- HTML:CSS/Assets/SVGs/facebook.svg | 2 +- HTML:CSS/Assets/SVGs/instagram.svg | 2 +- HTML:CSS/Assets/SVGs/linkedin.svg | 2 +- HTML:CSS/Assets/SVGs/twitter.svg | 2 +- HTML:CSS/Assets/SVGs/youtube.svg | 2 +- HTML:CSS/css/style.css | 25 ++++++++++++++--- HTML:CSS/index.html | 44 +++++++++++++++++++++--------- 7 files changed, 57 insertions(+), 22 deletions(-) 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/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/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/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/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/css/style.css b/HTML:CSS/css/style.css index 73051f2..c1ca264 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -23,7 +23,7 @@ html{ background: #2C99A4; } #input-form { - margin: auto; + margin: auto 0; } #search-button, .menu { @@ -38,7 +38,6 @@ html{ .search { display: flex; - margin: auto; width: 100%; } @@ -51,7 +50,7 @@ html{ display: none; } } @media (max-width: 768px) { - .empty { + #empty, #empty1 { display: none; } } @media (min-width: 577px) { @@ -71,7 +70,6 @@ html{ display: inline-block; max-width: 100%; height: auto; - /*max-height: 360px;*/ padding: 0; } @@ -82,3 +80,22 @@ html{ button { color: white; } + +.sm { + margin-top: 10px; +} + +.social { + display: flex; + justify-content: space-between; + padding: 0; + margin-top: 10px; +} + +button { + width: 100%; +} + +@media (max-width: 576px) { + .realtor-info { + padding: 0; } } diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html index 4621cb0..15cc06c 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -19,7 +19,7 @@ -
+
New Listing Open Houses Map Search @@ -28,19 +28,37 @@
-
-
-
- Realtor Image -
-
-
-

Jane Smith


-

REALTOR®

+
+
+
+
+ Realtor Image +
+
+
+
+
+
+

Jane Smith

+

REALTOR®

+
+
+
+ +
+
+ +
+
-
From 0a758fdbfda39d4421588eb9f16ffc7f42042727 Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 12:10:39 -0600 Subject: [PATCH 04/14] starting additional info section --- HTML:CSS/css/style.css | 33 +++++++++++++++++++++++++++++++-- HTML:CSS/index.html | 34 +++++++++++++++++++--------------- 2 files changed, 50 insertions(+), 17 deletions(-) diff --git a/HTML:CSS/css/style.css b/HTML:CSS/css/style.css index c1ca264..f8fa8f8 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -1,5 +1,6 @@ -html{ - font-size: .8rem; +html, body { + font-family: 'Lato', sans-serif; + font-size: 14px; } .tenLogo { @@ -17,6 +18,8 @@ html{ .search-bar { width: 100%; background: #AAAAAA; + padding-top: 5px; + padding-bottom: 5px; } .teal { @@ -99,3 +102,29 @@ button { @media (max-width: 576px) { .realtor-info { padding: 0; } } + +.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: center; +} diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html index 15cc06c..aa2089c 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -6,6 +6,7 @@ + @@ -20,9 +21,9 @@
- New Listing - Open Houses - Map Search + NEW LISTING + OPEN HOUSES + MAP SEARCH
@@ -35,20 +36,18 @@ Realtor Image
-
-
-
-
-

Jane Smith

-

REALTOR®

-
+
+
+
+

Jane Smith

+
+
+

REALTOR®

-
- +
+
-
+
+
+
+ +
+
From f1fbc68456cdfc59a26bde1b699711a3a47103bd Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 13:08:11 -0600 Subject: [PATCH 05/14] realtor info section done --- HTML:CSS/Assets/SVGs/contact.svg | 2 +- HTML:CSS/Assets/SVGs/enewsletter.svg | 2 +- HTML:CSS/Assets/SVGs/office.svg | 2 +- HTML:CSS/Assets/SVGs/website.svg | 2 +- HTML:CSS/css/style.css | 83 ++++++++++++++++++++++------ HTML:CSS/index.html | 37 +++++++++---- 6 files changed, 95 insertions(+), 33 deletions(-) diff --git a/HTML:CSS/Assets/SVGs/contact.svg b/HTML:CSS/Assets/SVGs/contact.svg index 409888d..2162fe5 100755 --- a/HTML:CSS/Assets/SVGs/contact.svg +++ b/HTML:CSS/Assets/SVGs/contact.svg @@ -1 +1 @@ -contact +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/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/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/css/style.css b/HTML:CSS/css/style.css index f8fa8f8..eca6260 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -11,7 +11,7 @@ html, body { width: 80%; } -.noBullet, .menu { +.no-bullet, .menu { list-style: none; } @@ -29,7 +29,7 @@ html, body { margin: auto 0; } -#search-button, .menu { +#search-button, .menu, .menu a{ margin: auto; color: white; } @@ -37,6 +37,7 @@ html, body { #search-text { /*margin: auto -20px auto 20px;*/ color: white; + padding: initial; } .search { @@ -48,18 +49,6 @@ html, body { text-decoration: underline; } -@media (max-width: 576px) { - #search-text, .menu { - display: none; } } - -@media (max-width: 768px) { - #empty, #empty1 { - display: none; } } - -@media (min-width: 577px) { - #search-button { - display: none; } } - #noMargin { margin: 0; } @@ -93,15 +82,13 @@ button { justify-content: space-between; padding: 0; margin-top: 10px; + margin-bottom: 10px; } button { width: 100%; } -@media (max-width: 576px) { - .realtor-info { - padding: 0; } } .info-container { height: 100%; @@ -126,5 +113,67 @@ button { height: 100%; display: flex; flex-direction: column; + justify-content: space-around; + padding: 0; +} + +.list-holder ul li { + font-size: 18px; +} + +.info-list { + height: 100%; + width: auto; + margin: 10px 10px 10px 0; +} + +/*.list-holder { + display: flex; + flex-direction: column-reverse; justify-content: center; +}*/ + +.list-holder ul { + padding: 0; } + +.list-unstyled span { + color: #5C5C5C; +} + +.list-unstyled a { + color: #2C99A5; +} + +@media (max-width: 576px) { + .realtor-info, .additional-info { + padding: 0; } } + + +@media (max-width: 576px) { + #search-text, .menu { + display: none; } } + +@media (max-width: 576px) { + .search { + padding-left: 0; } } + +@media (max-width: 768px) { + #empty, #empty1 { + display: none; } } + +@media (max-width: 768px) { + .list-unstyled { + font-size: 14px!important; } } + +@media (max-width: 992px) { + .menu { + font-size: 12px!important; } } + +@media (min-width: 577px) { + #search-button { + display: none; } } + +@media (max-width: 768px) and (min-width: 576px) { + .info-row h1 { + font-size: 2rem!important; } } diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html index aa2089c..846be88 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -21,9 +21,9 @@
- NEW LISTING - OPEN HOUSES - MAP SEARCH +
NEW LISTING
+
OPEN HOUSES
+
MAP SEARCH
@@ -58,9 +58,28 @@

Jane Smith

-
-
- +
+
+
+ +
@@ -73,9 +92,3 @@

Jane Smith

- From 3191e3980b46f1b003e1a55bcb8dbeb1baab0885 Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 14:11:04 -0600 Subject: [PATCH 06/14] starting adding tabs to third section --- HTML:CSS/css/style.css | 19 ++++++++++--------- HTML:CSS/index.html | 37 +++++++++++++++++++++++++++++++++++-- HTML:CSS/js/main.js | 1 + 3 files changed, 46 insertions(+), 11 deletions(-) create mode 100644 HTML:CSS/js/main.js diff --git a/HTML:CSS/css/style.css b/HTML:CSS/css/style.css index eca6260..2fb0b50 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -35,7 +35,6 @@ html, body { } #search-text { - /*margin: auto -20px auto 20px;*/ color: white; padding: initial; } @@ -49,8 +48,10 @@ html, body { text-decoration: underline; } -#noMargin { - margin: 0; +#contact-button { + font-size: 18px; + letter-spacing: .05em; + font-weight: 500; } .hundred { @@ -145,20 +146,20 @@ button { color: #2C99A5; } -@media (max-width: 576px) { +@media (max-width: 575px) { .realtor-info, .additional-info { padding: 0; } } -@media (max-width: 576px) { +@media (max-width: 575px) { #search-text, .menu { display: none; } } -@media (max-width: 576px) { +@media (max-width: 575px) { .search { padding-left: 0; } } -@media (max-width: 768px) { +@media (max-width: 767px) { #empty, #empty1 { display: none; } } @@ -166,11 +167,11 @@ button { .list-unstyled { font-size: 14px!important; } } -@media (max-width: 992px) { +@media (max-width: 991px) { .menu { font-size: 12px!important; } } -@media (min-width: 577px) { +@media (min-width: 576px) { #search-button { display: none; } } diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html index 846be88..38cf9a7 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -44,8 +44,8 @@

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.
+
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..8b13789 --- /dev/null +++ b/HTML:CSS/js/main.js @@ -0,0 +1 @@ + From 4f649a85aac2c7d6b5fdf6b2e514997d404c4dc4 Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 15:52:12 -0600 Subject: [PATCH 07/14] tabs done, dropdown responsive --- HTML:CSS/css/style.css | 61 +++++++++++++++++++++++++++++++++-------- HTML:CSS/index.html | 62 ++++++++++++++++++++++++++++++++++-------- HTML:CSS/js/main.js | 7 ++++- 3 files changed, 106 insertions(+), 24 deletions(-) diff --git a/HTML:CSS/css/style.css b/HTML:CSS/css/style.css index 2fb0b50..8f8151a 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -26,7 +26,7 @@ html, body { background: #2C99A4; } #input-form { - margin: auto 0; + margin: 0; } #search-button, .menu, .menu a{ @@ -128,12 +128,6 @@ button { margin: 10px 10px 10px 0; } -/*.list-holder { - display: flex; - flex-direction: column-reverse; - justify-content: center; -}*/ - .list-holder ul { padding: 0; } @@ -146,13 +140,58 @@ button { color: #2C99A5; } +.nav-link { + color: #aaa !important; +} + +.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; +} + +.dropdown { + margin-top: 25px; + padding: 0; +} + +.dropdown-toggle::after { + margin-top: 5px; +} + +.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; +} + @media (max-width: 575px) { .realtor-info, .additional-info { padding: 0; } } - @media (max-width: 575px) { - #search-text, .menu { + #search-text, .menu, .xs-hide { display: none; } } @media (max-width: 575px) { @@ -160,7 +199,7 @@ button { padding-left: 0; } } @media (max-width: 767px) { - #empty, #empty1 { + #empty, #empty1, #empty2 { display: none; } } @media (max-width: 768px) { @@ -172,7 +211,7 @@ button { font-size: 12px!important; } } @media (min-width: 576px) { - #search-button { + #search-button, .xs-show { display: none; } } @media (max-width: 768px) and (min-width: 576px) { diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html index 38cf9a7..0d730f9 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -86,35 +86,73 @@

Jane Smith

-
    + + +
    -
    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.
    -
    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. +
    +
    +
    + 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 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 +
    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 index 8b13789..1f8a182 100644 --- a/HTML:CSS/js/main.js +++ b/HTML:CSS/js/main.js @@ -1 +1,6 @@ - +$('.nav').on('show.bs.tab', function (e) { + let activeTab = e.target.hash.slice(1) + $('.nav .active').removeClass('active') + $(`.nav .${activeTab}`).addClass('active') + $(".dropdown-toggle").html(e.target.text + ' ') +}) From 78d3e681a9ff6cdc3586142f32b942bf12e0f8a0 Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 18:03:39 -0600 Subject: [PATCH 08/14] footer good, added some responsiveness to text --- HTML:CSS/Assets/SVGs/contact0.svg | 1 + HTML:CSS/Assets/SVGs/equal-housing.svg | 2 +- HTML:CSS/Assets/SVGs/facebook0.svg | 1 + HTML:CSS/Assets/SVGs/index.html | 192 +++++++++++++++++++++++++ HTML:CSS/Assets/SVGs/instagram0.svg | 1 + HTML:CSS/Assets/SVGs/linkedin0.svg | 1 + HTML:CSS/Assets/SVGs/realtor.svg | 2 +- HTML:CSS/Assets/SVGs/twitter0.svg | 1 + HTML:CSS/Assets/SVGs/youtube0.svg | 1 + HTML:CSS/css/style.css | 98 ++++++++++++- HTML:CSS/index.html | 74 ++++++++-- HTML:CSS/js/main.js | 2 +- 12 files changed, 354 insertions(+), 22 deletions(-) create mode 100644 HTML:CSS/Assets/SVGs/contact0.svg create mode 100644 HTML:CSS/Assets/SVGs/facebook0.svg create mode 100644 HTML:CSS/Assets/SVGs/index.html create mode 100644 HTML:CSS/Assets/SVGs/instagram0.svg create mode 100644 HTML:CSS/Assets/SVGs/linkedin0.svg create mode 100644 HTML:CSS/Assets/SVGs/twitter0.svg create mode 100644 HTML:CSS/Assets/SVGs/youtube0.svg 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/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/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/index.html b/HTML:CSS/Assets/SVGs/index.html new file mode 100644 index 0000000..1e9dbb0 --- /dev/null +++ b/HTML:CSS/Assets/SVGs/index.html @@ -0,0 +1,192 @@ + + + + + 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. +
    +
    +
    + + + +
    +
    +
    +
    + Phone1-800-234-4567 +
    +
    +

    5678 Main Street, Denver, CO 80123

    +
    +
    + + + + + +
    + +
    +
    +
    + + + + + + + + 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/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/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/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/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 index 8f8151a..a0c4357 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -25,11 +25,16 @@ html, body { .teal { background: #2C99A4; } + +.realtor-background { + background: #EEEEEE; +} + #input-form { margin: 0; } -#search-button, .menu, .menu a{ +#search-button, .menu, .menu a { margin: auto; color: white; } @@ -41,11 +46,18 @@ html, body { .search { display: flex; + justify-content: center; width: 100%; } -.menu { +.phone, .address { + font-size: 18px; + letter-spacing: .05em; +} + +.menu, .site-links { text-decoration: underline; + color: white; } #contact-button { @@ -70,7 +82,7 @@ html, body { padding: 0; } -button { +button, .phone, .address, .copyright { color: white; } @@ -86,10 +98,18 @@ button { margin-bottom: 10px; } +.social2 { + display: flex; + justify-content: space-between; +} + button { width: 100%; } +.phone img { + margin-right: 5px; +} .info-container { height: 100%; @@ -118,10 +138,19 @@ button { padding: 0; } -.list-holder ul li { +.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; @@ -132,7 +161,7 @@ button { padding: 0; } -.list-unstyled span { +.list-unstyled { color: #5C5C5C; } @@ -154,6 +183,9 @@ button { color: #2C99A5 !important; display: flex; justify-content: space-between; + border: 1px solid #aaa; + padding-left: 5px; + padding-right: 5px; } .dropdown { @@ -162,7 +194,7 @@ button { } .dropdown-toggle::after { - margin-top: 5px; + display: none; } .tab-pane div { @@ -186,6 +218,40 @@ button { 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; +} + @media (max-width: 575px) { .realtor-info, .additional-info { padding: 0; } } @@ -214,6 +280,26 @@ button { #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: 768px) 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; + } +} diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html index 0d730f9..c9887cc 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -21,15 +21,15 @@
    -
    NEW LISTING
    -
    OPEN HOUSES
    -
    MAP SEARCH
    +
    NEW LISTING
    +
    OPEN HOUSES
    +
    MAP SEARCH
-
+
@@ -49,11 +49,11 @@

Jane Smith

@@ -68,15 +68,15 @@

Jane Smith

  • - Visit my website + Visit my website
  • - Denver office + Denver office
  • - eNewsletter Sign Up + eNewsletter Sign Up
    • @@ -85,7 +85,11 @@

    Jane Smith

    + +
    + +
    • About Me @@ -101,9 +105,10 @@

      Jane Smith

    +
    + + +
    +
    +
    +
    +
    + Phone1-800-234-4567 +
    +
    +

    5678 Main Street, Denver, CO 80123

    +
    +
    + + + + + +
    +
    +
    + +
    + ©2016 TEN Realty. All Rights Reserved +
    +
    + Realtor + Equal Housing +
    +
    +
    +
    +
    diff --git a/HTML:CSS/js/main.js b/HTML:CSS/js/main.js index 1f8a182..2ecc68c 100644 --- a/HTML:CSS/js/main.js +++ b/HTML:CSS/js/main.js @@ -2,5 +2,5 @@ $('.nav').on('show.bs.tab', function (e) { let activeTab = e.target.hash.slice(1) $('.nav .active').removeClass('active') $(`.nav .${activeTab}`).addClass('active') - $(".dropdown-toggle").html(e.target.text + ' ') + $(".dropdown-toggle").html(e.target.text + ' ') }) From 95882456be249868bec0e5549ead37c2640f132a Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 20:08:43 -0600 Subject: [PATCH 09/14] header on mobile done --- HTML:CSS/Assets/SVGs/account.svg | 2 +- HTML:CSS/Assets/SVGs/contact1.svg | 1 + HTML:CSS/Assets/SVGs/index.html | 192 ------------------------------ HTML:CSS/css/style.css | 57 ++++++++- HTML:CSS/index.html | 66 ++++++++++ HTML:CSS/js/main.js | 6 + 6 files changed, 128 insertions(+), 196 deletions(-) create mode 100644 HTML:CSS/Assets/SVGs/contact1.svg delete mode 100644 HTML:CSS/Assets/SVGs/index.html diff --git a/HTML:CSS/Assets/SVGs/account.svg b/HTML:CSS/Assets/SVGs/account.svg index f1c41ea..3f9cbec 100755 --- a/HTML:CSS/Assets/SVGs/account.svg +++ b/HTML:CSS/Assets/SVGs/account.svg @@ -1 +1 @@ -account +account 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/index.html b/HTML:CSS/Assets/SVGs/index.html deleted file mode 100644 index 1e9dbb0..0000000 --- a/HTML:CSS/Assets/SVGs/index.html +++ /dev/null @@ -1,192 +0,0 @@ - - - - - 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. -
    -
    -
    - - - -
    -
    -
    -
    - Phone1-800-234-4567 -
    -
    -

    5678 Main Street, Denver, CO 80123

    -
    -
    - - - - - -
    - -
    -
    -
    - - - - - - - - diff --git a/HTML:CSS/css/style.css b/HTML:CSS/css/style.css index a0c4357..a73fd7e 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -48,6 +48,7 @@ html, body { display: flex; justify-content: center; width: 100%; + padding: 0; } .phone, .address { @@ -252,6 +253,52 @@ button { padding-right: 0; } +.logo-holder { + padding-left: 0; + padding-right: 0; +} + +.right-menu { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +.centerXY { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.centerXY div{ + color: #5c5c5c; +} + +#header, #fluid-header { + padding: 10px; +} + +.right-menu-icons { + 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; +} + @media (max-width: 575px) { .realtor-info, .additional-info { padding: 0; } } @@ -264,11 +311,15 @@ button { .search { padding-left: 0; } } +@media (min-width: 768px) { + #header { + display: none; } } + @media (max-width: 767px) { - #empty, #empty1, #empty2 { + #empty, #empty1, #empty2, #fluid-header { display: none; } } -@media (max-width: 768px) { +@media (max-width: 767px) { .list-unstyled { font-size: 14px!important; } } @@ -294,7 +345,7 @@ button { justify-content: center; } } -@media (max-width: 768px) and (min-width: 576px) { +@media (max-width: 767px) and (min-width: 576px) { .info-row h1 { font-size: 2rem!important; } } diff --git a/HTML:CSS/index.html b/HTML:CSS/index.html index c9887cc..d54681f 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -6,12 +6,78 @@ + +
    + +
    +
    +
    + + + + +
    +
    +
    + + + +
    +
    diff --git a/HTML:CSS/js/main.js b/HTML:CSS/js/main.js index 2ecc68c..b18bec1 100644 --- a/HTML:CSS/js/main.js +++ b/HTML:CSS/js/main.js @@ -4,3 +4,9 @@ $('.nav').on('show.bs.tab', function (e) { $(`.nav .${activeTab}`).addClass('active') $(".dropdown-toggle").html(e.target.text + ' ') }) + +$('.top-menu li a').on('click', function (e) { + let activeTab = e.target.hash.slice(1) + $('.nav-link.active').removeClass('active') + $(`.nav-link.${activeTab}`).addClass('active') +}) From 493cb3514bf52decf81da2d9b0202aefce6d20a0 Mon Sep 17 00:00:00 2001 From: Ryan Frazier Date: Tue, 8 Aug 2017 21:45:35 -0600 Subject: [PATCH 10/14] site complete --- HTML:CSS/css/style.css | 80 +++++++++++++++++++++++++++++++++++++++--- HTML:CSS/index.html | 44 +++++++++++++++++++---- HTML:CSS/js/main.js | 10 +++--- 3 files changed, 119 insertions(+), 15 deletions(-) diff --git a/HTML:CSS/css/style.css b/HTML:CSS/css/style.css index a73fd7e..6f10991 100644 --- a/HTML:CSS/css/style.css +++ b/HTML:CSS/css/style.css @@ -42,6 +42,7 @@ html, body { #search-text { color: white; padding: initial; + margin-left: 25%; } .search { @@ -174,6 +175,12 @@ button { color: #aaa !important; } +.full-nav { + font-size: 18px; + font-weight: 600; + letter-spacing: .1em; +} + .nav-link.active { color: #2C99A5 !important; border: none; @@ -185,7 +192,7 @@ button { display: flex; justify-content: space-between; border: 1px solid #aaa; - padding-left: 5px; + padding-left: 15px; padding-right: 5px; } @@ -264,19 +271,31 @@ button { justify-content: flex-end; } -.centerXY { +.centerXY, .logo-holder { display: flex; flex-direction: column; - align-items: center; justify-content: center; } +.centerXY { + align-items: center; +} + .centerXY div{ color: #5c5c5c; } -#header, #fluid-header { - padding: 10px; +#header { + padding-left: 15px; +} + +.bottom-40 { + margin-bottom: 40px; +} + +#fluid-header { + padding-left: 5em; + padding-right: 0em; } .right-menu-icons { @@ -285,6 +304,12 @@ button { justify-content: flex-end; } +.right-menu-list { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + .full-height { height: 100%; width: auto; @@ -299,6 +324,16 @@ button { 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; } } @@ -354,3 +389,38 @@ button { 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 index d54681f..e18134e 100644 --- a/HTML:CSS/index.html +++ b/HTML:CSS/index.html @@ -23,6 +23,38 @@
    +
    +
    +
    + +
    +
    +
    + +
    +
    @@ -95,7 +127,7 @@
    MAP SEARCH
    -
    +
    @@ -158,16 +190,16 @@

    Jane Smith

    @@ -246,7 +278,7 @@

    DESIGNATIONS

    -
    +