IP Global

From: Stephen Cameron Date: Mon, 5 Feb 2018 15:56:36 +0000 (+0100) Subject: First version X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b917843919f0600a3dc366e99612df5d3a660e4c;p=ipglobal-library.git First version --- b917843919f0600a3dc366e99612df5d3a660e4c diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..591b27f --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +.DS_Store +.cache +node_modules +_doc +dist diff --git a/_readme.md b/_readme.md new file mode 100644 index 0000000..42570d3 --- /dev/null +++ b/_readme.md @@ -0,0 +1,25 @@ +# IP Global Landing Page + +This project is a single static page with compilation by [ParcelJS](https://parceljs.org/) + +To setup, run: + +`yarn` + +Then for [development](http://localhost:1234): + +`yarn start` + +Or to build the files (output to /dist) + +`yarn build` + +Customisations to scripts can be done in package.json. + +### Notes + +ParcelJS is managing everything but it could be used just for Stylus > CSS compilation (see reference [here](https://github.com/parcel-bundler/parcel/issues/711])). The index.html would need to be changed to reference the output .css file and the JS would need to be handled differently too. + +### Image Maps + +Image maps can be updated [here](http://image-map.weebly.com/) and the existing `` code can be imported to save having to redo links. The main important detail is that the replacement images are always the same width and start from the same top/left position to avoid misplacement of links. \ No newline at end of file diff --git a/images/brochures-germany.jpg b/images/brochures-germany.jpg new file mode 100644 index 0000000..2ab334b Binary files /dev/null and b/images/brochures-germany.jpg differ diff --git a/images/brochures-investor-guide.jpg b/images/brochures-investor-guide.jpg new file mode 100644 index 0000000..a9be171 Binary files /dev/null and b/images/brochures-investor-guide.jpg differ diff --git a/images/brochures-track-records.jpg b/images/brochures-track-records.jpg new file mode 100644 index 0000000..cd9bc5a Binary files /dev/null and b/images/brochures-track-records.jpg differ diff --git a/images/brochures-uk.jpg b/images/brochures-uk.jpg new file mode 100644 index 0000000..25b7db0 Binary files /dev/null and b/images/brochures-uk.jpg differ diff --git a/images/corporate-brochure.png b/images/corporate-brochure.png new file mode 100644 index 0000000..677b1a7 Binary files /dev/null and b/images/corporate-brochure.png differ diff --git a/images/facebook.svg b/images/facebook.svg new file mode 100644 index 0000000..4f30f29 --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/linkedin.svg b/images/linkedin.svg new file mode 100644 index 0000000..9f0db68 --- /dev/null +++ b/images/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..a60a966 Binary files /dev/null and b/images/logo.png differ diff --git a/images/play.svg b/images/play.svg new file mode 100644 index 0000000..f0481b0 --- /dev/null +++ b/images/play.svg @@ -0,0 +1,3 @@ + diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 0000000..4c76d45 --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/video-1.jpg b/images/video-1.jpg new file mode 100644 index 0000000..9d472ae Binary files /dev/null and b/images/video-1.jpg differ diff --git a/images/video-2.jpg b/images/video-2.jpg new file mode 100644 index 0000000..b2d5ac3 Binary files /dev/null and b/images/video-2.jpg differ diff --git a/images/video-3.jpg b/images/video-3.jpg new file mode 100644 index 0000000..b1496f9 Binary files /dev/null and b/images/video-3.jpg differ diff --git a/images/video-4.jpg b/images/video-4.jpg new file mode 100644 index 0000000..d35dc7e Binary files /dev/null and b/images/video-4.jpg differ diff --git a/images/youtube.svg b/images/youtube.svg new file mode 100644 index 0000000..3d3a4f3 --- /dev/null +++ b/images/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3f6ccf3 --- /dev/null +++ b/index.html @@ -0,0 +1,187 @@ + + + + + + + + IP Global + + + + + +

+ +

+ + +

Corporate Brochure

+ +

IP Global

+ Our mission is to change the way the world views global real estate investment, placing it on a level footing with other + recognised asset classes. We provide our clients with access to the best opportunities and deliver an + end-to-end service that guides them through every step of their investment journey. +

+ View the brochure +

+ + +

Project Brochures

UK Projects

+ + + + UK projects

+ + + + + + + + + + + + +

German Projects

+ + + + + +

Track Records

+ + + + + + +

Investor Guide Series

+ + + + + + + +

+ +

+ IP Global Corporate Video
(English) + + + +

+ +

+ IP Global Corporate Video
(Cantonese) + + + +

+ +

+ Investor Stories - Why investing in
property + + + +

+ +

+ Client Testimonials + + +

+ + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..04a56c2 --- /dev/null +++ b/index.js @@ -0,0 +1,6 @@ +// https://github.com/cferdinandi/smooth-scroll (installed via yarn) +import SmoothScroll from 'smooth-scroll'; + +var scroll = new SmoothScroll('a[href*="#"]', { + offset: 50 +}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..6a61592 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "IP-Global", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "scripts": { + "start": "rimraf ./dist && parcel ./index.html", + "build": "rimraf ./dist && parcel build ./index.html --public-url=./" + }, + "devDependencies": { + "rimraf": "^2.6.2", + "rupture": "^0.7.1", + "smooth-scroll": "^12.1.5", + "stylus": "^0.54.5" + } +} diff --git a/styles/common/global.styl b/styles/common/global.styl new file mode 100644 index 0000000..361de87 --- /dev/null +++ b/styles/common/global.styl @@ -0,0 +1,50 @@ +html + font-size: $font-size-base + +body + min-width: $content-max-width + font-family: $font + color: $colors.text + line-height: 1.3 + box-sizing: border-box + +*, *::before, *::after + box-sizing: inherit + +p + &:not(:last-of-type) + margin-bottom: 1.5em + +.block + &:nth-child(even) + background-color: $colors.light-grey + +.content + center() + vertical-spacing() + + // Centred underline below headings + h3 + &:after + content: '' + display: block + width: 33px + height: 3px + background-color: currentColor + margin: 30px auto + +.columns + display: flex + align-items: center + +.col + flex: 1 0 50% + +.text + padding: 0 9% + text-align: center + font-weight: 300 + +.brochures + &:not(:last-of-type) + margin-bottom: 90px diff --git a/styles/common/mixins.styl b/styles/common/mixins.styl new file mode 100644 index 0000000..1a90a69 --- /dev/null +++ b/styles/common/mixins.styl @@ -0,0 +1,94 @@ +// Constrain a fractional property value (% or vw units) to work within a maximum width +// Normally fractions are based on the container/screen width but we need to cap the value +// on screens that are wider than the $max-content-width, otherwise value will become +// disproportionally large. This is key to making the max-width layout work and scale. +constrain(property, value = $horizontal-gutter, max-width = $content-max-width) { + {property}: value + + +above(max-width) { + // Only do this if we are dealing with a percentage or vw unit + if (unit(value) is '%' || unit(value) is 'vw') { + $max = max-width * unit(value / 100, '') // Convert percentage to a decimal + {property}: $max + } + } +} + +// Apply percentage based vertical padding - defaults to global gutter value if nothing passed +// Note: fractional vertical padding is based on width +vertical-spacing(amount = $vertical-gutter) + constrain(padding-top, amount) + constrain(padding-bottom, amount) + +//---------------------------------------// + +// Apply percentage based vertical padding - defaults to global gutter value if nothing passed +horizontal-spacing(amount = $horizontal-gutter) + constrain(padding-left, amount) + constrain(padding-right, amount) + +//---------------------------------------// + +center(max-width = $content-max-width) + max-width: max-width + margin: 0 auto + padding-left: $outer-gutter + padding-right: @padding-left + +//---------------------------------------// + +reset-list() + list-style-type: none + padding: 0 + margin: 0 + +inline-list() + reset-list() + li + display: inline-block + +//---------------------------------------// + +// Automatically convert font-size in px to rem with fallback +// Inspired by: https://davidwalsh.name/stylus-rem +font-size(value, arguments...) + + // Handle special case of setting base font size on html element + // In this case, we don't want pixel value converted to a REM + // Also bail out if 'inherit' is the value + if (selector() is 'html' || value is 'inherit') { + font-size: value + } else { + // Only px values are converted to rem but we still want to use the px value as a fallback + // Other values like 'inherit' or rems/ems are displayed as normal... + font-size: value arguments + + if (unit(value) is 'px') { + font-size: r(value) arguments // rem value + } + } + + +//---------------------------------------// +// Standalone function for converting px to rem +// Non-px values will be passed back in their original units +r(value) + u = unit(value) + + if (u is 'px') + return unit(value / $font-size-base, 'rem') + else + return value + +//---------------------------------------// +// Enable font smoothing for thinning fonts in certain contexts +// (light text on dark backgrounds normally) +font-smoothing() + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + +font-smoothing-reset() + -webkit-font-smoothing: auto + -moz-osx-font-smoothing: auto + +//---------------------------------------// diff --git a/styles/common/reset.styl b/styles/common/reset.styl new file mode 100644 index 0000000..6a3af16 --- /dev/null +++ b/styles/common/reset.styl @@ -0,0 +1,94 @@ +/* + * Fix + * Version 0.1.1 + * https://github.com/jaydenseric/Fix +*/ +html { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + //-webkit-font-smoothing: antialiased; + //-moz-osx-font-smoothing: grayscale; + -webkit-tap-highlight-color: transparent; +} +body { + margin: 0; + line-height: 1; + font-family: sans-serif; +} +iframe { + border: 0; +} +main { + display: block; +} +ul, +ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 1.2em; +} +dl { + margin-top: 0; + margin-bottom: 0; +} +dd { + margin-left: 0; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 0; + font-size: inherit; +} +blockquote { + margin: 0; + padding: 0; +} +p { + margin-top: 0; + margin-bottom: 0; +} +sup { + position: relative; + top: -.5em; + vertical-align: baseline; + font-size: 75%; + line-height: 0; +} +strong { + font-weight: bold; +} +figure { + margin: 0; +} +img { + border: 0; + max-width: 100%; + height: auto; + vertical-align: middle; +} +a { + text-decoration: none; + color: inherit; +} +button { + border: 0; + margin: 0; + padding: 0; + text-align: inherit; + text-transform: inherit; + font: inherit; + -webkit-font-smoothing: inherit; + letter-spacing: inherit; + background: none; + cursor: pointer; + overflow: visible; +} +::-moz-focus-inner { + border: 0; + padding: 0; +} diff --git a/styles/common/variables.styl b/styles/common/variables.styl new file mode 100644 index 0000000..60b25cf --- /dev/null +++ b/styles/common/variables.styl @@ -0,0 +1,38 @@ +// General Setup +$debug = false + +// Gutters (assumed to always be a vw, vh or % unit) +$horizontal-gutter = 5% +$vertical-gutter = 6% +$outer-gutter = 20px // Used to give a minimum gap when screen is + +$content-max-width = 1150px + (2 * $outer-gutter) + +// Fonts +$font = Montserrat, sans-serif + +// Font sizing (based on 1.5x multiplier) +$font-size-base = 15px // Size of 1rem +$font-size-large = 36px +$font-size-medium = 24px +$font-size-small = 12px + +// Breakpoints in Rupture (https://github.com/jescalan/rupture) +rupture.scale = 0 400px 768px 1024px +rupture.scale-names = 'small' 'medium' 'large' +rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px +$breakpoint-menu = 1024px + +// Colours - available as .color-{name} class to set the color of the element +$colors = { + headings: #07306e, + text: #515252, + footer: #363d4f, + blue: #00b5e1, + light-grey: #f2f2f2, +} + +// Colour class helpers +for colorName, colorCode in $colors + .color-{colorName} + color: colorCode !important diff --git a/styles/components/buttons.styl b/styles/components/buttons.styl new file mode 100644 index 0000000..7daf20c --- /dev/null +++ b/styles/components/buttons.styl @@ -0,0 +1,22 @@ +.btn + font-smoothing() + display: inline-block + padding: 1em 1.5em + background-color: $colors.blue + color: #fff + text-transform: uppercase + font-size: 16px + font-weight: bold + + .text & + margin-top: 10px + + &:before + content: '' + display: inline-block + width: 12px + height: @width + transform: rotate(45deg) + border-top: 2px solid #fff + border-right: @border-top + margin-right: 15px \ No newline at end of file diff --git a/styles/components/headings.styl b/styles/components/headings.styl new file mode 100644 index 0000000..316e05c --- /dev/null +++ b/styles/components/headings.styl @@ -0,0 +1,11 @@ +h1, h2, h3 + color: $colors.headings + text-transform: uppercase + text-align: center + margin-bottom: 1.9em + +h1, h2 + font-size: $font-size-large + +h3 + font-size: $font-size-medium \ No newline at end of file diff --git a/styles/components/navigation.styl b/styles/components/navigation.styl new file mode 100644 index 0000000..397dbf0 --- /dev/null +++ b/styles/components/navigation.styl @@ -0,0 +1,56 @@ +.nav + &.primary + font-smoothing() + background-color: $colors.blue + color: #fff + text-transform: uppercase + font-size: 14px + font-weight: bold + text-align: center + + ul + reset-list() + center() + display: flex + align-items: stretch + justify-content: center + + li + flex: 1 0 auto + border-left: 1px solid #6cd3ed + &:last-child + border-right: @border-left + + a + display: inline-block + padding: 1.5em 1em + + + &.secondary + position: absolute + top: 13px + right: $outer-gutter + color: #000 + text-transform: uppercase + font-size: 11px + + ul + inline-list() + + li + padding: 4px 30px + border-left: 1px solid currentColor + + &:last-child + border-right: @border-left + + a + &:before + content: '' + display: inline-block + width: 8px + height: @width + transform: rotate(45deg) + border-top: 2px solid $colors.blue + border-right: @border-top + margin-right: 8px diff --git a/styles/components/videos.styl b/styles/components/videos.styl new file mode 100644 index 0000000..436b166 --- /dev/null +++ b/styles/components/videos.styl @@ -0,0 +1,30 @@ +.videos + display: flex + flex-wrap: wrap + max-width: 1536px + margin: 0 auto + + a + flex: 0 1 50% + position: relative + + &:hover .play + transform: scale(1.1) + + span + position: absolute + top: 50% + left: 0 + right: 0 + transform: translateY(-50%) + text-align: center + text-transform: uppercase + font-size: $font-size-medium + font-weight: bold + color: #fff + + .play + display: block + margin: 40px auto 30px + transition: transform 0.2s ease-in + backface-visibility: hidden // Stops text below moving when scale happens \ No newline at end of file diff --git a/styles/layout/footer.styl b/styles/layout/footer.styl new file mode 100644 index 0000000..1d19196 --- /dev/null +++ b/styles/layout/footer.styl @@ -0,0 +1,30 @@ +footer + background-color: $colors.footer + color: #fff + + h3 + font-smoothing() + color: currentColor + font-size: $font-size-large + +.social + center() + constrain(padding-top, $vertical-gutter) + constrain(padding-bottom, ($vertical-gutter / 2)) + text-align: center + + a + &:not(:last-of-type) + margin-right: 33px + + img + width: 25px + +.copyright + center(940px) + text-align: center + color: #666a77 + border-top: 1px solid @color + font-size: $font-size-small + font-weight: 300 + padding: 2rem 0 3.5rem \ No newline at end of file diff --git a/styles/layout/header.styl b/styles/layout/header.styl new file mode 100644 index 0000000..00e876f --- /dev/null +++ b/styles/layout/header.styl @@ -0,0 +1,8 @@ +header.site + + .logo + margin: 20px 0 + + .inner + center() + position: relative \ No newline at end of file diff --git a/styles/main.styl b/styles/main.styl new file mode 100644 index 0000000..d48630f --- /dev/null +++ b/styles/main.styl @@ -0,0 +1,15 @@ +@import '../node_modules/rupture/rupture' + +@import 'common/variables' +@import 'common/mixins' + +@import 'common/reset' +@import 'common/global' + +@import 'layout/header' +@import 'layout/footer' + +@import 'components/headings' +@import 'components/navigation' +@import 'components/buttons' +@import 'components/videos' \ No newline at end of file diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000..332355e --- /dev/null +++ b/yarn.lock @@ -0,0 +1,138 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +amdefine@>=0.0.4: + version "1.0.1" + resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" + +balanced-match@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" + +brace-expansion@^1.1.7: + version "1.1.8" + resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292" + dependencies: + balanced-match "^1.0.0" + concat-map "0.0.1" + +concat-map@0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" + +css-parse@1.7.x: + version "1.7.0" + resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b" + +debug@*: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + dependencies: + ms "2.0.0" + +fs.realpath@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" + +glob@7.0.x: + version "7.0.6" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.0.6.tgz#211bafaf49e525b8cd93260d14ab136152b3f57a" + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.2" + once "^1.3.0" + path-is-absolute "^1.0.0" + +glob@^7.0.5: + version "7.1.2" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15" + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + +inflight@^1.0.4: + version "1.0.6" + resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" + dependencies: + once "^1.3.0" + wrappy "1" + +inherits@2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" + +minimatch@^3.0.2, minimatch@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" + dependencies: + brace-expansion "^1.1.7" + +minimist@0.0.8: + version "0.0.8" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" + +mkdirp@0.5.x: + version "0.5.1" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" + dependencies: + minimist "0.0.8" + +ms@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" + +once@^1.3.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" + dependencies: + wrappy "1" + +path-is-absolute@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" + +rimraf@^2.6.2: + version "2.6.2" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36" + dependencies: + glob "^7.0.5" + +rupture@^0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/rupture/-/rupture-0.7.1.tgz#d51bcd5fe93757b4855e4ea70ac9d97a897183a1" + +sax@0.5.x: + version "0.5.8" + resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1" + +smooth-scroll@^12.1.5: + version "12.1.5" + resolved "https://registry.yarnpkg.com/smooth-scroll/-/smooth-scroll-12.1.5.tgz#b6d8deca371a9edd5ea3ad291ef0fb7e741ed41e" + +source-map@0.1.x: + version "0.1.43" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346" + dependencies: + amdefine ">=0.0.4" + +stylus@^0.54.5: + version "0.54.5" + resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.5.tgz#42b9560931ca7090ce8515a798ba9e6aa3d6dc79" + dependencies: + css-parse "1.7.x" + debug "*" + glob "7.0.x" + mkdirp "0.5.x" + sax "0.5.x" + source-map "0.1.x" + +wrappy@1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"