diff --git a/server/pages.js b/server/pages.js index e9f3217..8c21b1f 100644 --- a/server/pages.js +++ b/server/pages.js @@ -2,17 +2,30 @@ module.exports = function(mw) { return { public: [ { - title: 'Start', - template: 'pages/index', + title: 'Home', path: '/' - }, { - title: 'Spytext' - }, { - title: 'Playground' - }, { - title: 'CSS', - name: 'css' + }, + { + title: 'Process' + }, + { + title: 'Services', + pages: [ + { + title: 'Entertainment', + } + ] + }, + { + title: 'Markets' + }, + { + title: 'About' + }, + { + title: 'Contact' } + ], //redirects: [ diff --git a/server/templates/master.dust b/server/templates/master.dust index c10f378..3218955 100644 --- a/server/templates/master.dust +++ b/server/templates/master.dust @@ -1,27 +1,31 @@ - TCB IT & Development AB + + + + + + - - - + -
-
-
-
-

TCB IT & Development

-
- {>"partials/navigation":navigation page=page /} -
+
+ + {>"partials/navigation":navigation page=page /}
+
{?error} @@ -33,12 +37,6 @@ {/error}
-
-
-
Copyright TCB IT & Development AB
-
Website by TCB.
-
-
diff --git a/server/templates/pages/about.dust b/server/templates/pages/about.dust new file mode 100644 index 0000000..822908c --- /dev/null +++ b/server/templates/pages/about.dust @@ -0,0 +1,95 @@ +
+
+
+

Welcome / Välkommen!

+

The Code Bureau: Advanced Web Development & Design

+
+
+

The Code Bureau is a web development & design firm based in Lund, + Sweden. Unlike most other web designers/developers, all our employees + have a background in mathematics or computer science.

+

We make it our business to stay up to date on the latest + trends and technologies. The applications we create are always + state-of-the-art and built for the future. When you employ us, you wont need to update your + products for years.

+
+
+

We cater a range of different services to our customers; + always focusing on the development of code for the web. Our love for code + and the new possibilities of the web enable us to do almost anything. Just ask.

+

The Code Bureau is a fairly new venture, and as such we + are still building a portfolio of show cases. During this time we + are offering our services at greatly reduced prices.

+
+
+
+
+

What We Do

+
+
+

Web Pages

+

Obviously we create websites. Essentially everything we create are + web sites of varying complexity. However, we refer to web sites as our + entry level products that mainly focus on presentation of information without excessive functionality.

+
+
+

Web Apps

+

Web apps are advanced web sites that emulate functionality usually + found in native apps or programs.

+ +

Web apps have, unlike native apps, the benefit of running on all + computers and devices. The users only need a browser to access its + functionality.

+
+
+

Web Games

+

As the name suggests, web games are games made to run in a browser on any device.

+
+
+
+
+

Why Choose Us?

+
+
+
    +
  1. +

    We know code

    +

    Most web designers or developers are artistically creative individuals. However, + to create stable, reliable web sites and apps you need to know more than design. We + are a collection of individuals that both truly love and know code, computers and the web.

    +
  2. +
  3. +

    SEO

    +

    Search Engine Optimization is probably the most important + factor for a web sites success. It is also constantly changing, and your web sites + need to be updated constantly to stay ahead of the competition.

    +

    One of the most important factors for good SEO today is the speed + of your website. Using a framework like WordPress will doom you to a + slow web site with poor search engine performance. Our web sites + are many, many times faster than those built with WordPress or similar.

    +
  4. +
  5. +

    Future Proof

    +

    The internet and web browsers have become infinately more advanced the last few years. Web sites are quickly becoming + more like apps and the user experience can be greatly improved. Our love for code means we understand the trends, and can + make decisions that ensure our products will be up to date for years to come. No WordPress or PHP here.

    +
  6. +
+
+
+
+
+

Contact

+
+
+

+46 (0) 708 922 122

+ +

TCB IT & Development AB
+ Ideon Agora
+ + Scheelevägen 15
+ 22363 Lund
+ Sweden

+ +
+
diff --git a/server/templates/pages/contact.dust b/server/templates/pages/contact.dust new file mode 100644 index 0000000..0582b6d --- /dev/null +++ b/server/templates/pages/contact.dust @@ -0,0 +1,53 @@ +
+
+
+
+

ContactUs

+

If you are thinking about starting a new project or already have one on the go, we wolud love to be involved. To discuss your best options, contact us using the details below and we will be happy to help.

+

Alternatively, leave us your contact details and a message using the form and we'll get back to you.

+

(+44) 1483 288 361
+ hello@home-technology.com

+ HomeTechnology
Steels Lane
Oxshott
Surrey KT22 0RT

+
+
+

MessageUs

+ {formStatus.message} +
+
+ Name:
+ Phone/E-mail:
+ Message:
+

+ + + Try again + Send another message +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+
+
+ +
+
+
+ {>"partials/footer"/} +
+
\ No newline at end of file diff --git a/server/templates/pages/css.dust b/server/templates/pages/css.dust deleted file mode 100644 index 915f265..0000000 --- a/server/templates/pages/css.dust +++ /dev/null @@ -1,23 +0,0 @@ -
-
-

CSS playground

-
-
One
-
Two
-
Three
-
Four
-
-
-
One
-
Two
-
Three
-
Four
-
-
-
One
-
Two
-
Three
-
Four
-
-
-
diff --git a/server/templates/pages/d3.dust b/server/templates/pages/d3.dust deleted file mode 100644 index 54cebc2..0000000 --- a/server/templates/pages/d3.dust +++ /dev/null @@ -1,26 +0,0 @@ -
-
-

D3 Testing Area

- -
-
-
One
-
Two
-
Three
-
Four
-
-
-
One
-
Two
-
Three
-
Four
-
-
-
One
-
Two
-
Three
-
Four
-
-
-
-
diff --git a/server/templates/pages/index.dust b/server/templates/pages/index.dust index 822908c..7d4c0e1 100644 --- a/server/templates/pages/index.dust +++ b/server/templates/pages/index.dust @@ -1,95 +1,14 @@ -
-
-
-

Welcome / Välkommen!

-

The Code Bureau: Advanced Web Development & Design

-
-
-

The Code Bureau is a web development & design firm based in Lund, - Sweden. Unlike most other web designers/developers, all our employees - have a background in mathematics or computer science.

-

We make it our business to stay up to date on the latest - trends and technologies. The applications we create are always - state-of-the-art and built for the future. When you employ us, you wont need to update your - products for years.

-
-
-

We cater a range of different services to our customers; - always focusing on the development of code for the web. Our love for code - and the new possibilities of the web enable us to do almost anything. Just ask.

-

The Code Bureau is a fairly new venture, and as such we - are still building a portfolio of show cases. During this time we - are offering our services at greatly reduced prices.

-
-
-
-
-

What We Do

-
-
-

Web Pages

-

Obviously we create websites. Essentially everything we create are - web sites of varying complexity. However, we refer to web sites as our - entry level products that mainly focus on presentation of information without excessive functionality.

-
-
-

Web Apps

-

Web apps are advanced web sites that emulate functionality usually - found in native apps or programs.

- -

Web apps have, unlike native apps, the benefit of running on all - computers and devices. The users only need a browser to access its - functionality.

-
-
-

Web Games

-

As the name suggests, web games are games made to run in a browser on any device.

-
-
-
-
-

Why Choose Us?

-
-
-
    -
  1. -

    We know code

    -

    Most web designers or developers are artistically creative individuals. However, - to create stable, reliable web sites and apps you need to know more than design. We - are a collection of individuals that both truly love and know code, computers and the web.

    -
  2. -
  3. -

    SEO

    -

    Search Engine Optimization is probably the most important - factor for a web sites success. It is also constantly changing, and your web sites - need to be updated constantly to stay ahead of the competition.

    -

    One of the most important factors for good SEO today is the speed - of your website. Using a framework like WordPress will doom you to a - slow web site with poor search engine performance. Our web sites - are many, many times faster than those built with WordPress or similar.

    -
  4. -
  5. -

    Future Proof

    -

    The internet and web browsers have become infinately more advanced the last few years. Web sites are quickly becoming - more like apps and the user experience can be greatly improved. Our love for code means we understand the trends, and can - make decisions that ensure our products will be up to date for years to come. No WordPress or PHP here.

    -
  6. -
-
-
-
-
-

Contact

-
-
-

+46 (0) 708 922 122

- -

TCB IT & Development AB
- Ideon Agora
- - Scheelevägen 15
- 22363 Lund
- Sweden

- +
+
+
+
+

Welcome

+

We design, install and support modern technology for the modern home

+
+ ENTERTAINMENTSECURITYINTEGRATION
+
+
+ {>"partials/footer"/} +
diff --git a/server/templates/pages/markets.dust b/server/templates/pages/markets.dust new file mode 100644 index 0000000..3165aaa --- /dev/null +++ b/server/templates/pages/markets.dust @@ -0,0 +1,67 @@ +
+
+

Here's how we help

+ +
+
+
+
+
+

Preparing your home for the future

+

Working together to help you understand what’s possible.

+ What we do + How we do it +
+
+

Flexible and reliable

+

We design our systems to adapt to your requirements whist ensuring dependability, and we work to the same exacting standards.

+

Communication is key

+

Full disclosure at every stage of your project allow us to be more efficient and effective at what we do, and keeps you better informed in the process.

+

Unrivalled support

+

Looking after your equipment once we’ve finished is an integral part of our service, keeping you and your system fully up to date.

+
+
+
+
+
+
+

Taking projects from inception to completion

+

Our ability to work alongside your team increases efficiency.

+ Contact us +
+
+

Spanning all markets

+

We work in a variety of demanding sectors, transferring the comfort, usability and functionally that you would expect at home, to projects all over the world.

+

Time management

+

Diligent planning and effective communication allows us to deliver the required technology on schedule, increasing job efficiency and productivity.

+

Exceptional results

+

Good quality cabling infrastructure is at the heart of our installs, and gives you the capacity to raise or lower the specification, whilst future-proofing the property in process.

+
+
+
+
+
+
+

Beautiful system design, seamlessly integrated

+

Even cables can look good, whether visible or hidden

+ Contact us +
+
+

Complimenting your vision

+

We work closely with interior designers to ensure that the technology perfectly matches the decor, for a modern look and sleek finish.

+

Client consultation

+

Technology exists in a variety of different styles, it’s important that it not only looks great but functions exactly as intended - this is achieved through detailed client consultation at every stage of the project.

+

Quality through design

+

Our experience in selecting the correct products for the desired application paired with meticulous attention to detail results in immaculate installations, perfectly placed.

+
+
+
+
+
+ {>"partials/footer"/} +
+
diff --git a/server/templates/pages/mod.dust b/server/templates/pages/mod.dust deleted file mode 100644 index dae23f5..0000000 --- a/server/templates/pages/mod.dust +++ /dev/null @@ -1,20 +0,0 @@ -
-
-

MOD

- -
-
-
One
-
Two
-
Three
-
Four
-
-
-
One
-
Two
-
Three
-
Four
-
-
-
-
diff --git a/server/templates/pages/playground.dust b/server/templates/pages/playground.dust deleted file mode 100644 index 8638336..0000000 --- a/server/templates/pages/playground.dust +++ /dev/null @@ -1,9 +0,0 @@ -
-
-

Playground

-

aaabbbcccdddeeefffggghhh456




aaa

-

aaabbbcccdddeeefffggghhh456




aaa

- -
-
- diff --git a/server/templates/pages/process.dust b/server/templates/pages/process.dust new file mode 100644 index 0000000..8b376de --- /dev/null +++ b/server/templates/pages/process.dust @@ -0,0 +1,26 @@ +
+
+
+

Our Process

+
+
+

DESIGN

+

Understanding your needs allows us to recommend and plan different concepts and solutions for your specific application.

+

SUPPLY

+

Carefully selected technology can integrate seamlessly into your home. We only purchase from our trusted suppliers and handle all aspects of the ordering process.

+

INSTALL

+

Matching perfect placement with flawless functionality, our team only produce exceptional installations to the highest standards.

+

SUPPORT

+

Ensuring that your system keeps operating as intended for years to come is extremely important to us. Our support network is personal and highly valued by our customers.

+
+
+

Have a project in mind?

+

Call us to speak with one of the team, or learn more about what we do.

+ Contact Us +
+
 
+
+
+ {>"partials/footer"/} +
+
diff --git a/server/templates/pages/services.dust b/server/templates/pages/services.dust new file mode 100644 index 0000000..ea22b68 --- /dev/null +++ b/server/templates/pages/services.dust @@ -0,0 +1,33 @@ +
+

Our Services

+ +
+
+

HomeCinema

+

Fanatical about film? It’s time to bring that experience home. Our entertainment systems range from simple wall-mounted setups to fully immersive media rooms that are designed to deliver cutting-edge visuals and acoustics that will blow you away.

+ Read more... +
+
+
+

HomeAudio

+

Streaming music directly from your smartphone or tablet is an awesomely simple way to experience your media. Our multiroom audio systems allow you the freedom to play your music in any room of your home and with our seamless installation, you can experience high-fidelity audio with minimal visual impact.

+ Read more... +
+
+
+

HomeSecurity

+

Looking after your home is important and necessary. Modern technology can be your eyes and ears, informing you when something’s not right and letting you know when everything is running smoothly. Smart security systems connect with your home network, giving you access to your property, wherever you are in the world.

+ Read more... +
+
+
+

HomeAutomation

+

Connect your home and experience the comfort, convenience and simplicity of a smarter way of life. Control your entertainment, security, lighting and climate through your smartphone or tablet and prepare your property for the future of HomeTechnology.

+ Read more... +
+ {>"partials/footer"/} +
\ No newline at end of file diff --git a/server/templates/pages/services/entertainment.dust b/server/templates/pages/services/entertainment.dust new file mode 100644 index 0000000..54e39df --- /dev/null +++ b/server/templates/pages/services/entertainment.dust @@ -0,0 +1,20 @@ +
+
+
+
+

Beautiful entertainment, immaculately installed.

Enjoy quality time with the people who matter. Intricate design, intuitive control and flawless functionality are at the heart of our entertainment systems; we’re redefining playtime, one home at a time.

+ +
+
+
+
+
+
+ +
+
+

Entertainment

+

There are many different elements that make for great entertainment. Our expertise in perfectly matching the correct level of technology to the application leaves you with a personalised, unique setup that you’ll never want to turn off. Have a look at what we do below.

+ {>"partials/footer"/} +
+
diff --git a/server/templates/pages/services/integration.dust b/server/templates/pages/services/integration.dust new file mode 100644 index 0000000..54e39df --- /dev/null +++ b/server/templates/pages/services/integration.dust @@ -0,0 +1,20 @@ +
+
+
+
+

Beautiful entertainment, immaculately installed.

Enjoy quality time with the people who matter. Intricate design, intuitive control and flawless functionality are at the heart of our entertainment systems; we’re redefining playtime, one home at a time.

+ +
+
+
+
+
+
+ +
+
+

Entertainment

+

There are many different elements that make for great entertainment. Our expertise in perfectly matching the correct level of technology to the application leaves you with a personalised, unique setup that you’ll never want to turn off. Have a look at what we do below.

+ {>"partials/footer"/} +
+
diff --git a/server/templates/pages/services/security.dust b/server/templates/pages/services/security.dust new file mode 100644 index 0000000..54e39df --- /dev/null +++ b/server/templates/pages/services/security.dust @@ -0,0 +1,20 @@ +
+
+
+
+

Beautiful entertainment, immaculately installed.

Enjoy quality time with the people who matter. Intricate design, intuitive control and flawless functionality are at the heart of our entertainment systems; we’re redefining playtime, one home at a time.

+ +
+
+
+
+
+
+ +
+
+

Entertainment

+

There are many different elements that make for great entertainment. Our expertise in perfectly matching the correct level of technology to the application leaves you with a personalised, unique setup that you’ll never want to turn off. Have a look at what we do below.

+ {>"partials/footer"/} +
+
diff --git a/server/templates/pages/spytext.dust b/server/templates/pages/spytext.dust deleted file mode 100644 index ce84303..0000000 --- a/server/templates/pages/spytext.dust +++ /dev/null @@ -1,128 +0,0 @@ -
-
-

Spytext

-
-
-
-
-

AAABBBCCC

-

DDD

-

EEEFFFGGG

-

HHHIIIKKKLLLMMM

-
    -
  • NNN
  • -

  • -
  • OOO
  • -
-

PPP

-
    -
  • RRR
  • -
  • SSS
  • -
  • TTT
  • -
-
-
-
-
-

One lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper turpis eros, sed rhoncus purus sodales sit amet.

-

Two quisque lacus est, B TWO this is some bold molestie et diam id, varius sagittis nisi. Donec placerat mi egestas, congue ligula non, lacinia tortor.

-

Three aecenas B U THREE laskjdf id sodales dui. Nulla ipsum justo, elementum in fermentum at, feugiat nec neque.

-

Four vestibulum B tempor U dolor vitae risus faucibus elementum. Aliquam leo odio, convallis non luctus eu, faucibus vel lorem.

-
    -
  • Top Menu Item 1
  • -
  • Top Menu Item 2
  • -
  • Top Menu Item 3
  • -
  • Top Menu Item 4
  • -
  • Top Menu Item 5
  • -
-

Paragraph 1

-

Para
graph 2

-

Paragraph 3

-

Paragraph 4

-

Paragraph 5

-

Paragraph 6

-
    -
  • Middle Menu Item 1
  • -
  • Middle Menu Item 2
  • -
  • Middle Menu Item 3
  • -
  • Middle Menu Item 4
  • -
  • Middle Menu Item 5
  • -
-

Paragraph 1

-

Paragraph 2

-

Paragraph 3

-

Paragraph 4

-

Paragraph 5

-

Paragraph 6

-
    -
  • Bottom Menu Item 1
  • -
  • Bottom Menu Item 2
  • -
  • Bottom Menu Item 3
  • -
  • Bottom Menu Item 4
  • -
  • Bottom Menu Item 5
  • -
-
-
-
-
-

One lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas semper turpis eros, sed rhoncus purus sodales sit amet.

-

Two quisque lacus est, B TWO this is some bold molestie et diam id, varius sagittis nisi. Donec placerat mi egestas, congue ligula non, lacinia tortor.

-

Three aecenas B U THREE laskjdf id sodales dui. Nulla ipsum justo, elementum in fermentum at, feugiat nec neque.

-

Four vestibulum B tempor U dolor vitae risus faucibus elementum. Aliquam leo odio, convallis non luctus eu, faucibus vel lorem.

-
    -
  • test
  • -

  • -
  • test
  • -
-

Test

-
    -
  • test
  • -
  • test
  • -
  • test
  • -
-
-
-
-
-

Hello

-
    -
  • List Item 1
  • -
  • List Item 2
  • -
  • List Item 3
  • -
  • Sublist -
      -
    • Sublist Item 1
    • -
    • Sublist Item 2
    • -
    • Sublist Item 3
    • -
    • Sublist -
        -
      • Sublist Item 1
      • -
      • Sublist Item 2
      • -
      • Sublist Item 3
      • -
      -
    • -
    -
  • -
-

Test 1

-

Test 2

-

Test 3

-

Test 4

-

Test 5

-

Test 6

-

Test 7

-
    -
  • test
  • -

  • -
  • test
  • -
-

Test

-
    -
  • test
  • -
  • test
  • -
  • test
  • -
-
-
-
-
diff --git a/server/templates/partials/footer.dust b/server/templates/partials/footer.dust new file mode 100644 index 0000000..5c86261 --- /dev/null +++ b/server/templates/partials/footer.dust @@ -0,0 +1,32 @@ + \ No newline at end of file diff --git a/server/templates/spytext-toolbar.bak.dust b/server/templates/spytext-toolbar.bak.dust deleted file mode 100644 index 1ee100d..0000000 --- a/server/templates/spytext-toolbar.bak.dust +++ /dev/null @@ -1,332 +0,0 @@ -module.exports = function() { - events: { - 'click button': 'command' - }, - - template: 'spytext-toolbar', - - command: function() { - var command = $(e.currentTarget).attr('data-command'); - } -}; -var SpytextButton = function(config, spytext) { - this.spytext = spytext; - this.config = typeof config.preset === 'string' ? merge(this.presets[config.preset], config) : config; - this.element = $(' - -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • - -
      -
    • - -
    • -
    • - -
    • -
    • - -
    • -
    • - -
    • -
    • - -
    • -
    -
      -
    • - -
    • -
    • - -
    • -
    • - -
    • -
    • - -
    • -
    -
      -
    • - -
    • -
    • - -
    • -
    -
      -
    • - -
    • -
    • - -
    • -
    -
    diff --git a/src/js/app.js b/src/js/app.js index 84bcacc..dfdc841 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -10,7 +10,9 @@ app.module(require('spytext')); $(function() { app.navigation = new app.views.Navigation({ el: app.$('nav') }); + app.snaptop = new app.views.SnapTop({ el: app.$('.snap-top-persistant') }); Backbone.history.start({ silent: true, pushState: true }); + console.log(app) }); diff --git a/src/js/views/contact-us.js b/src/js/views/contact-us.js new file mode 100644 index 0000000..c1f2529 --- /dev/null +++ b/src/js/views/contact-us.js @@ -0,0 +1,118 @@ +module.exports = { + events: + { + "click #contact-submit": "validateAndSend", + "click .hideCover": "hc", + "keydown": "blockKeyDownArrow", + "input input, textarea": "validateMe", + "focus input, textarea": "becameActive", + "onactivate input, textarea": "becameActive", + "focusout input, textarea": "notActive", + }, + blockKeyDownArrow: function(e) + { + if(e.keyCode == 39 || e.keyCode == 37) + { + e.stopPropagation(); + } + }, + validateAndSend: function(e) + { + $('#formStatus').addClass('show'); + e.preventDefault(); + out = {} + var inputs = $('input, textarea', this.el); + var dontSend = false; + for(var ip=0;ip div { - float: left; - width: 25%; - min-height: 200px; - border: 1px solid black; + .bluebutton { + &.entertainment {width:37%;} + &.security {width:27%;} + &.integration {width:33%;} + margin: 0.5% 0.5%; + font-size:1vw; + @media all and(max-width:1024px){font-size:1.45vw;} + @media all and(max-width:800px){ + width:100% !important; + font-size:1em !important; + } + img { + @include ratio(1); + width:30px; + vertical-align:-10px; + } } } } -form.spytext { - .spytext-field { - min-height: 300px; + +.page.process { + @include backgrounder("process-background", "jpg", "fixed no-repeat top/cover"); + height:1%; + position:relative; + + .process-band { + @include std-shadow; + .square-bg {display:none;} + @media all and (max-width:480px){ + width:100%; + background:$softwhite; + .square-bg { + display:block; + @include ratio(1); + background: url(../img/process-background-square.jpg) no-repeat top/cover; + } + } + } + + .title-box { + padding-bottom:90px !important; + h1 { + line-height:70px; + text-align:center; + text-transform:uppercase; + @include underlineH(33%, $softwhite); + } + } + + .wbg h3 { + line-height:45px; + padding-left:45px; + &#icon-design { background:url(../img/icon-design.svg) no-repeat left/contain; } + &#icon-supply { background:url(../img/icon-supply.svg) no-repeat left/contain; } + &#icon-install { background:url(../img/icon-install.svg) no-repeat left/contain; } + &#icon-support { background:url(../img/icon-support.svg) no-repeat left/contain; } + } + + .cgbg { + background:$chillgrey; + *{color: $softwhite;} + h3 {margin-top:0;} + padding:5%; + } + + .wbg { + background:$transwhite; + padding:3%; + } + + .btm-process { + h3 { font-weight: 600; } + p { font-weight: 400; } } } + +.page.services { + overflow-x:visible; + h1 { + text-align:center; + text-transform: uppercase; + span { + @include underlineH(25%, $softblack); + } + } + + .biggie { + @include ratio(2.5); + min-height:400px; + width:100%; + clear:both; + + @include std-shadow-in; + + &.cinema {@include backgrounder("services-home-background-cinema", "jpg", "center/cover no-repeat");} + &.audio {@include backgrounder("services-home-background-audio", "jpg", "center/cover no-repeat");} + &.security {@include backgrounder("services-home-background-security", "jpg", "center/cover no-repeat");} + &.automation {@include backgrounder("services-home-background-automation", "jpg", "center/cover no-repeat");} + } + .describe-service { + width:50%; + min-width:320px; + max-width:940px; + padding:3%; + margin:-5% 2% 2% 2%; + + @include std-shadow; + background:white; + + h2 { + margin-top:0; + strong {color:$htblue;} + font-size:2.8em; + @media all and (max-width:480px){font-size: 2.2em} + } + + &.r {float:right;clear:both;} + + @media all and (max-width:1024px){ + margin:0 0 0 0; + width:100%; + } + } +} + +.servicepage { + height:1%; + position:none; + * { color:$softwhite; } + .splash { + height:100%; + width:100%; + position:fixed; + margin-top:-60px; + z-index:1; + .splash-text { + position:absolute; + bottom:20%; + left:0; + right:0; + text-align: center; + .scroll2me { + width:50px; + height:50px; + } + } + } + .postsplash { + position:absolute; + top:100%; + z-index:2; + background:$hardgrey; + text-align:center; + h2 { + font-weight:600; + } + .top-icon-row { + text-align:center; + margin-top:-35px; + .icon { + background:$hardgrey; + border-radius:50%; + width:70px; + height:70px; + } + } + } +} + +.entertainment { + .splash { + @include backgrounder("services-entertainment-splash", "jpg", "top/cover no-repeat"); + } +} +.integration { + .splash { + @include backgrounder("services-integration-splash", "jpg", "top/cover no-repeat"); + } +} +.security { + .splash { + @include backgrounder("services-security-splash", "jpg", "top/cover no-repeat"); + } +} + + + + + + + + +.page.markets { + height:1%; + .head-splash { + //@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover"); + @include std-shadow-in; + background:url(../img/testcover.jpg) no-repeat bottom/cover; + padding:4%; + text-align: center; + h1,a{color:$softwhite;font-weight:600;} + h1{@include std-shadow-text;} + .slide-picker { + @include std-shadow; + margin:auto; + max-width:600px; + background:$softwhite; + border-radius:10px; + a { + cursor:pointer; + color:$hardblue; + display:inline-block; + width:30%; + margin:5px 0; + height:40px; + line-height:40px; + border-radius: 9px; + font-weight:600; + &.active { + background:$hardblue; + color:$softwhite; + } + } + } + } + .slide-container { + min-height:80%; + position:relative; + .slide { + opacity:0; + transition: opacity 1s ease,z-index 0s linear 1s; + margin:auto; + &.homeowners, &.developers {position:absolute;top:0;} + + &.active { + opacity:1; + z-index:1; + } + } + } +} + +.page.contact { + height:1%; + .minimummer { + min-height:80%; + > .row > .col { + padding: 5%; + } + } + h1 { + font-size:3.5em; + margin-bottom:50px; + strong { + color: $htblue; + } + } + .map { + background:url(../img/map.png) center/cover no-repeat; + height:300px; + @include std-shadow-in; + text-align: center; + vertical-align: middle; + line-height: 300px; + + a { + width:100%; + } + img { + width:60px; + display:inline-block; + transition:width 0.1s, height 0.1s; + &:hover { + width:65px; + } + } + } + .formCover { + position:absolute; + top:0; + bottom:0; + left:0; + right:0; + z-index:-1; + transition:opacity 0.5s ease; + opacity:0; + img.imgload { + position:absolute; + height:50%; + top:25%; + width:50%; + right:25%; + transition:transform 500s linear; + background:transparent; + } + .imgfail{display:none;width:50%;margin-left:25%;background:transparent;} + a.tryAgain{display:none;text-decoration:underline;cursor:pointer;} + a.sendAnother{display:none;text-decoration:underline;cursor:pointer;} + } + .pending .formCover { + z-index:5; + opacity:1; + > *:not(img) {display:none;} + img.imgload { + opacity:1; + transform:rotate(36000deg); + } + } + .success .formCover { + z-index:5; + opacity:1; + img {display:none;} + a.sendAnother{display:block} + } + .fail .formCover { + z-index:5; + opacity:1; + > *:not(img) {display:none;} + img.imgload {display:none;} + img.imgfail {display:block;} + a.tryAgain{display:block;} + } + + form { + margin-top:-42px; + position:relative; + label{ + display:block; + background:transparent; + transition:margin 0.3s ease; + margin-top:5px; + cursor:text; + } + div.empty label { + margin-top:30px; + margin-bottom:-30px; + color:rgba(0,0,0,0.2); + } + + div.filled-in, div.active, div.valid, div.invalid { + label { + margin-bottom:0; + margin-top:0; + color:$softgrey; + } + textarea { + @media all and(min-height:500px) + { + height:300px; + } + } + } + + div.valid { + label { + margin-bottom:0; + } + input,textarea { + &::-ms-clear { + display: none; + } + background:url(../img/valid.svg) top right/20px no-repeat; + border-bottom:1px solid $htblue; + } + } + div.invalid { + label { + margin-bottom:0; + } + input,textarea { + background:url(../img/nope.svg) top right/20px no-repeat; + } + } + input:focus,textarea:focus { + border-bottom:1px solid $htblue; + } + input,textarea { + border-bottom:1px solid $softgrey; + color:$softblack; + margin-bottom:0; + box-shadow:none; + } + + + * + { + border:none; + padding:5px; + } + div:not(:last-of-type) + { + margin-top:0%; + } + input:not([type="submit"]) { + background:transparent; + outline:0; + width:100%; + } + + textarea { + background:transparent; + width:100%; + height:100px; + transition:height 0.3s ease 0.2s; + outline:0; + @media all and(min-height:500px) + { + &:focus { + height:300px; + } + } + } + } + .bar-under-title { + text-align:center; + position:relative; + padding-bottom:50px; + } + .bar-under-title:after { + content:""; + display:block; + position:absolute; + bottom:25px; + width:50%; + margin-left:25%; + border-top: 2px solid $softwhite; + } + .contact-padding { + padding:5%; + } + + .bluebutton { + padding:0; + box-shadow:none; + } +} \ No newline at end of file diff --git a/src/sass/_layout.scss b/src/sass/_layout.scss index 329bae6..63529f8 100644 --- a/src/sass/_layout.scss +++ b/src/sass/_layout.scss @@ -1,41 +1,236 @@ -nav { - > ul { - @include wipe-list; - > li { - padding: 0 10px; - float: left; - &:first-child { padding-left: 0; } +//General styles +html { + a { + text-decoration: none; + color:$softblack; + } + * { + font-family:Open Sans,sans-serif !important; + font-weight:100; + } + strong { + font-weight: 600; + } + .row { + max-width:100%; + } +} + +//Used breakpoints +//1023 +//800 +//640 +//480 + + +.response-band { + position:relative; + width:40%; + float:right; + margin-right:8%; + @media all and (max-width: 1023px){ + width:55%; + margin:0; + } + @media all and (max-width: 639px){ + width:65%; + margin:0; + } +} + +.bluebutton { + cursor:pointer; + display:inline-block; + width:150px; + line-height:45px; + text-align: center; + font-size:1.1em; + font-weight:600; + color:$softwhite; + background:$htblue; + border:2px solid transparent !important; + transition: color .3s ease,background .3s ease,border .3s ease, border-radius .3s ease; + &:hover{ + background:transparent; + border:2px solid $htblue !important; + border-radius:9px; + &.mtb { + color:$softblack; } } } +.snap-top-menu { + padding:0 0 0 0; + background:$softwhite; + height:40px; + a { + text-align:center; + width:33%; + margin:0 0; + display:inline-block; + font-size:1.5em; + text-transform:uppercase; + @media all and (max-width:640px) { + font-size:3.5vw; + } + } + &.fixed { + position:fixed; + top:0; + width:100%; + } + &.snap-top-persistant { + z-index:10; + &:not(.fixed){ + display:none; + } + } + &.snap-top-static.hidden { + opacity:0; + } +} + +//Header +header { + @include std-shadow; + background:$softblack; + width:100%; + padding-top:2px; + height:60px; + display:inline-block; + padding-right:3%; + padding-left:3%; + z-index:10; + position:fixed; + + nav { + > ul { + float:right; + @include wipe-list; + + > li { + float:left; + padding: 0 15px; + vertical-align:-50%; + + a { + font-weight: 600 !important; + font-size: 1.1em; + font-variant: small-caps; + text-transform: lowercase; + line-height:55px; + &:hover { + color:$htblue-solid !important; + } + } + &:first-child { padding-left: 0; } + ul { + display:none; + } + } + } + } + .company { + float:left; + h1 { + img { + height:40px; + width:40px; + vertical-align: -11px; + margin-right:7px; + border-radius: 15%; + } + margin:0; + line-height: 60px; + font-size:1.6em; + } + } + + * { + color:$softwhite !important; + } +} + + +//Default body styles +html,body{position:relative; height:100%;width:100%;} body { overflow-x: hidden; overflow-y: scroll; > main { overflow-x: hidden; + overflow-y: visible; width: 100%; - max-width: $row-max-width; - margin: 0 auto; + min-height: 100%; + min-height: calc(100% - 60px); + margin: -7px auto; > .page { + position:absolute; + overflow-y: visible; width: 100%; - &.animate { - transition: opacity 0.2s ease-out; - float: left; - position: relative; - } - &.leave { - margin-right: -100%; - } - &.leave.active { - opacity: 0; - } - &.enter { - opacity: 0; - } - &.enter.active, &.leave { - opacity: 1; - } + height:1%; + min-height: 100%; + min-height: calc(100% - 60px); + // &.animate { + // transition: opacity 0.2s ease-out; + // float: left; + // position: relative; + // } + // &.leave { + // margin-right: -100%; + // } + // &.leave.active { + // opacity: 0; + // } + // &.enter { + // opacity: 0; + // } + // &.enter.active, &.leave { + // opacity: 1; + // } } } } + +//Footer +footer { + background:$softblack; + border-top:2px solid $softwhite; + padding:2.5%; + *:not(.company-name):not(strong) {font-weight:500;} + h3, h2, *:not(li) > a { + color:$softwhite; + } + + h3, h2 { + font-size:1.2em; + } + + ul { + @include wipe-list; + > li > a { + color: $footeracolor; + font-size:0.9em; + } + } + + .logo-to-the-left { + margin-top:1rem; + + .company-name { + font-size:1.5em; + } + .copyright { + font-size:0.75em; + } + img { + height:32px; + width:32px; + vertical-align: -30%; + border-radius:15%; + margin-right:3px; + } + } +} + diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss new file mode 100644 index 0000000..76dcac7 --- /dev/null +++ b/src/sass/_mixins.scss @@ -0,0 +1,87 @@ +@mixin backgrounder($url, $ext, $options) +{ + @media all and(max-device-width:1920px) { + background:url(../img/#{$url}-1920.#{$ext}) #{$options}; + } + @media all and(max-device-width:1680px) { + background:url(../img/#{$url}-1680.#{$ext}) #{$options}; + } + @media all and(max-device-width:1440px) { + background:url(../img/#{$url}-1440.#{$ext}) #{$options}; + } + @media all and(max-device-width:1280px) { + background:url(../img/#{$url}-1280.#{$ext}) #{$options}; + } + @media all and(max-device-width:1024px) { + background:url(../img/#{$url}-1024.#{$ext}) #{$options}; + } + @media all and(max-device-width:768px) { + background:url(../img/#{$url}-640.#{$ext}) #{$options}; + } + @media all and(max-device-width:640px) { + background:url(../img/#{$url}-640.#{$ext}) #{$options}; + } + @media all and(max-device-width:420px) { + background:url(../img/#{$url}-420.#{$ext}) #{$options}; + } + @media all and(max-device-width:360px) { + background:url(../img/#{$url}-360.#{$ext}) #{$options}; + } + @media all and(min-device-width:1921px) { + background:url(../img/#{$url}-full.#{$ext}) #{$options}; + } + @media all and(min-resolution: 2dppx) + { + @media all and(max-device-width:1920px) { + background:url(../img/#{$url}-full.#{$ext}) #{$options}; + } + @media all and(max-device-width:1680px) { + background:url(../img/#{$url}-full.#{$ext}) #{$options}; + } + @media all and(max-device-width:1440px) { + background:url(../img/#{$url}-full.#{$ext}) #{$options}; + } + @media all and(max-device-width:1280px) { + background:url(../img/#{$url}-full.#{$ext}) #{$options}; + } + @media all and(max-device-width:1024px) { + background:url(../img/#{$url}-1920.#{$ext}) #{$options}; + } + @media all and(max-device-width:768px) { + background:url(../img/#{$url}-1024.#{$ext}) #{$options}; + } + @media all and(max-device-width:640px) { + background:url(../img/#{$url}-1024.#{$ext}) #{$options}; + } + @media all and(max-device-width:420px) { + background:url(../img/#{$url}-768.#{$ext}) #{$options}; + } + @media all and(max-device-width:360px) { + background:url(../img/#{$url}-768.#{$ext}) #{$options}; + } + @media all and(min-device-width:1921px) { + background:url(../img/#{$url}-full.#{$ext}) #{$options}; + } + } +} + +@mixin std-shadow { + box-shadow: 3px 3px 30px 0 rgba(0,0,0,.1); +} +@mixin std-shadow-text { + text-shadow: 3px 3px 30px rgba(0,0,0,.1); +} +@mixin std-shadow-in { + box-shadow: inset 3px 3px 30px 0 rgba(0,0,0,.1); +} +@mixin underlineH($lr, $color) { + position:relative; + &:before { + content:""; + position:absolute; + left:$lr; + right:$lr; + bottom:-10px; + border-bottom:1px solid $color; + } +} \ No newline at end of file diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss new file mode 100644 index 0000000..405f56f --- /dev/null +++ b/src/sass/_variables.scss @@ -0,0 +1,17 @@ + +$softblack: rgba(33,33,41,1); +$softerblack: rgba(43,43,55,1); +$transblack: rgba(0,0,0,0.6); + +$chillgrey: rgba(51,51,51,1); +$hardgrey: #212129; +$htblue: rgba(20, 157, 237, 0.8); +$htblue-solid: rgba(20, 157, 237, 1); +$hardblue: #0b244c; + +$softwhite: rgba(255,255,255,0.95); +$transwhite: rgba(255,255,255,0.7); +$softgrey: #707070; + +$footeracolor: #555555; + diff --git a/src/sass/main.scss b/src/sass/main.scss index bd137de..6f036ba 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -1,4 +1,6 @@ @import "spysass"; +@import "variables"; +@import "mixins"; @import "components/type"; @import "components/grid"; @@ -9,7 +11,4 @@ @import "layout"; @import "content"; -#tree-walker { - padding: 15px; - border: 1px solid black; -} + diff --git a/src/svg/home-technology-logo.svg b/src/svg/home-technology-logo.svg new file mode 100644 index 0000000..ba52e0d --- /dev/null +++ b/src/svg/home-technology-logo.svg @@ -0,0 +1,81 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/icon-design.svg b/src/svg/icon-design.svg new file mode 100644 index 0000000..32380e0 --- /dev/null +++ b/src/svg/icon-design.svg @@ -0,0 +1,56 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/icon-entertainment.svg b/src/svg/icon-entertainment.svg new file mode 100644 index 0000000..4f816c7 --- /dev/null +++ b/src/svg/icon-entertainment.svg @@ -0,0 +1,48 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/icon-install.svg b/src/svg/icon-install.svg new file mode 100644 index 0000000..245135e --- /dev/null +++ b/src/svg/icon-install.svg @@ -0,0 +1,56 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/icon-integration.svg b/src/svg/icon-integration.svg new file mode 100644 index 0000000..1616539 --- /dev/null +++ b/src/svg/icon-integration.svg @@ -0,0 +1,51 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/icon-security.svg b/src/svg/icon-security.svg new file mode 100644 index 0000000..67f8367 --- /dev/null +++ b/src/svg/icon-security.svg @@ -0,0 +1,49 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/icon-supply.svg b/src/svg/icon-supply.svg new file mode 100644 index 0000000..ed09330 --- /dev/null +++ b/src/svg/icon-supply.svg @@ -0,0 +1,78 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/icon-support.svg b/src/svg/icon-support.svg new file mode 100644 index 0000000..88a0490 --- /dev/null +++ b/src/svg/icon-support.svg @@ -0,0 +1,21 @@ + + + + + + + + diff --git a/src/svg/loading.svg b/src/svg/loading.svg new file mode 100644 index 0000000..8299caf --- /dev/null +++ b/src/svg/loading.svg @@ -0,0 +1,48 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/map-marker.svg b/src/svg/map-marker.svg new file mode 100644 index 0000000..f9a7c42 --- /dev/null +++ b/src/svg/map-marker.svg @@ -0,0 +1,74 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/nope.svg b/src/svg/nope.svg new file mode 100644 index 0000000..e0e28af --- /dev/null +++ b/src/svg/nope.svg @@ -0,0 +1,56 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/scroll-hinter.svg b/src/svg/scroll-hinter.svg new file mode 100644 index 0000000..665429e --- /dev/null +++ b/src/svg/scroll-hinter.svg @@ -0,0 +1,50 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/svg/valid.svg b/src/svg/valid.svg new file mode 100644 index 0000000..fd39739 --- /dev/null +++ b/src/svg/valid.svg @@ -0,0 +1,55 @@ + + + +image/svg+xml \ No newline at end of file