diff --git a/.gitignore b/.gitignore index c267e7c..81d8759 100644 --- a/.gitignore +++ b/.gitignore @@ -24,3 +24,9 @@ Icon Network Trash Folder Temporary Items .apdisk + +# Node +node_modules + +# CSS +css/main.css diff --git a/Gulpfile.js b/Gulpfile.js new file mode 100644 index 0000000..3b79854 --- /dev/null +++ b/Gulpfile.js @@ -0,0 +1,14 @@ +var gulp = require("gulp"); +var sass = require("gulp-sass"); + +gulp.task("sass", function() { + gulp.src("sass/**/*.scss") + .pipe(sass({ + includePaths: require('node-bourbon').includePaths + }).on("error", sass.logError)) + .pipe(gulp.dest("./css")); +}); + +gulp.task("default", ["sass"], function() { + gulp.watch("sass/**/*.scss", ["sass"]); +}); diff --git a/css/fonts/ico-fonts.eot b/css/fonts/ico-fonts.eot new file mode 100755 index 0000000..eff2a1a Binary files /dev/null and b/css/fonts/ico-fonts.eot differ diff --git a/css/fonts/ico-fonts.svg b/css/fonts/ico-fonts.svg new file mode 100755 index 0000000..922e253 --- /dev/null +++ b/css/fonts/ico-fonts.svg @@ -0,0 +1,27 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/fonts/ico-fonts.ttf b/css/fonts/ico-fonts.ttf new file mode 100755 index 0000000..a2c3e04 Binary files /dev/null and b/css/fonts/ico-fonts.ttf differ diff --git a/css/fonts/ico-fonts.woff b/css/fonts/ico-fonts.woff new file mode 100755 index 0000000..ffbe038 Binary files /dev/null and b/css/fonts/ico-fonts.woff differ diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..d9f27b5 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/css/style-copy-9-15.css b/css/style-copy-9-15.css new file mode 100644 index 0000000..69af55d --- /dev/null +++ b/css/style-copy-9-15.css @@ -0,0 +1,1252 @@ +/* +BASE STYLES +*/ + +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body, +button, +input, +textarea { + font-family: "helvetica neue", arial, sans-serif; + font-size: 16px; +} + +body { + color: #2e2e2e; + background-color: #fff; + margin: 0 auto; + text-align: center; +} + +p, +button, +textarea, +input { + color: #fff; +} + +h1 { + font-size: 2em; +} + +h2 { + font-size: 2.369em; + font-weight: bold; +} + +h3 { + font-size: 1.777em; + font-weight: bold; +} + +h4 { + font-size: 0.9em; +} + +button { + background-color: #fd6632; + border: none; +} + +a { + text-decoration: none; +} + +button:active, a:active { + opacity: 0.8; +} + +button:hover { + cursor: pointer; +} + +img { + display: block; + max-width: 100%; + height: auto; + opacity: 0.7; +} + +input, +textarea { + display: block; + font-weight: bold; + background-color: #be4c25; + border: none; +} + +li { + list-style-type: none; +} + +progress[value] { + -webkit-appearance: none; + appearance: none; + height: 1.2em; + width: 100%; +} + +/* +MODIFIERS +*/ + +.white-color { + color: #fff; +} + +.circle { + border-radius: 100%; +} + +/* +ICON FONTS +*/ + +@font-face { + font-family: 'ico-fonts'; + src:url('/css/fonts/ico-fonts.eot?ghgy45'); + src:url('/css/fonts/ico-fonts.eot?#iefixghgy45') format('embedded-opentype'), + url('/css/fonts/ico-fonts.ttf?ghgy45') format('truetype'), + url('/css/fonts/ico-fonts.woff?ghgy45') format('woff'), + url('/css/fonts/ico-fonts.svg?ghgy45#ico-fonts') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + font-family: 'ico-fonts'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class^="icon-"]:link, [class*=" icon-"]:link, +[class^="icon-"]:visited, [class*=" icon-"]:visited { + color: #fff; +} + +.icon-gear:before { + content: "\e601"; +} +.icon-envelope:before { + content: "\e602"; +} +.icon-lab:before { + content: "\e600"; +} +.icon-arrow-down:before { + content: "\e610"; +} +.icon-google-plus:before { + content: "\e603"; +} +.icon-facebook:before { + content: "\e604"; +} +.icon-twitter:before { + content: "\e605"; +} +.icon-dribbble:before { + content: "\e606"; +} +.icon-linkedin2:before { + content: "\e607"; +} +.icon-menu:before { + content: "\e60f"; +} +.icon-drop:before { + content: "\e60e"; +} +.icon-plus:before { + content: "\e608"; +} +.icon-chevron-left:before { + content: "\e609"; +} +.icon-chevron-right:before { + content: "\e60a"; +} +.icon-brush:before { + content: "\e60b"; +} +.icon-phone:before { + content: "\e60c"; +} +.icon-pin:before { + content: "\e60d"; +} + + +/* +SECTION HEADERS +*/ + +.team-section-header, +.client-section-header, +.section-header, +.sub-section-header, +.portfolio-section-header, +.contact-section-header { + width: 100%; + text-decoration: underline; +} + +.section-header, +.sub-section-header { + max-width: 90%; + margin: 0 auto; + padding: .75em 0; + text-align: center; +} + +@media screen and (min-width: 50em) { + .white-line { + background: url("/img/horizontal-white-line.svg") no-repeat left, + url("/img/horizontal-white-line.svg") no-repeat right; + } + + .section-header { + background-size: 35%; + } + + .sub-section-header { + -webkit-flex-basis: 100%; + flex-basis: 100%; + margin: 0 6em; + padding: 1.333em 2em; + background-size: 28%; + } + + .section-arrows-white:before, + .section-arrows-orange:before, + .section-arrows-black:before, + .section-arrows-clear:before { + content: ""; + display: block; + width: 200px; + height: 43px; + margin: 0 auto 2em; + } + + .section-arrows-orange:before { + background: url("/img/triangle-orange.svg") no-repeat; + } + + .section-arrows-black:before { + background: url("/img/triangle-black.svg") no-repeat; + } + + .section-arrows-white:before { + background: url("/img/triangle-white.svg") no-repeat; + } + + .section-arrows-clear:before { + background: url("/img/triangle-clear.svg") no-repeat; + } +} + +/* +MENU +*/ + +.menu { + position: fixed; + width: 100%; + padding-bottom: 0.5em; + border-bottom: 2px solid #d4d4d4; + background-color: rgba(255, 255, 255, 0.95); + z-index: 1000; +} + +.menu a { + display: inline-block; + width: 30%; + color: #7c8387; + font-weight: bold; + padding-top: 0.5em; +} + +@media screen and (min-width: 50em) { + .menu { + position: static; + padding: 0.8em calc(20% - 3em); + } + + .menu a { + padding-top: 0.1em; + width: 16%; + } +} + +/* +HEADER & LOGO +*/ + +.header-content { + padding: 3em 0; + background-size: cover; + background-image: url(/img/header-background.jpg); +} + +.logo { + opacity: 1; + height: 4em; + width: 4em; + margin: 1em auto 1em; + padding-top: 1em; + padding-bottom: 1em; + background: #fd6632; +} + +.header-logo-text { + font-weight: lighter; +} + +.header-logo-text strong { + font-weight: normal; + line-height: 1.3; +} + +.curve-underline { + padding-bottom: .1em; + background-size: cover; + background: url("/img/orange-underline.svg") no-repeat; + background-position: bottom; +} + +@media screen and (min-width: 50em) { + h1 { + font-size: 2.666em; + } +} + + +/* +SERVICES COMPONENTS +*/ + +.services-container { + position: relative; + padding: 2.5em .5em 1em; + text-align: center; + background-color: #fd6632; +} + +.services-text, +.contact-text { + display: inline-block; + padding: .5em 0; + line-height: 1.4; +} + +.services-category { + padding: 1.333em; +} + +.services-header { + min-width: 225px; + padding: .5em 0; + font-size: 2.369em +} + +[data-title="ux-design"]:after { + content: "\e60b"; +} + +[data-title="laboratory"]:after { + content: "\e600"; +} + +[data-title="development"]:after { + content: "\e601"; +} + +.services-header:after { + display: block; + width: 2em; + height: 2em; + margin: .4em auto 0; + padding-top: .5em; + padding-bottom: .5em; + font-family: 'ico-fonts'; + font-size: 2em; + text-align: center; + color: #2e2e2e; + background-color: #fff; + border-radius: 50%; +} + +@media screen and (min-width: 50em) { + .services-category-container { + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-justify-content: space-around; + justify-content: space-around; + -webkit-align-content: center; + align-content: center; + } + + .services-text, + .contact-text { + padding: 1em; + } + + .services-category { + width: 33%; + } +} + + + +/* +PRICING COMPONENTS +*/ + +[class^="pricing"] { + text-align: center; +} + +.pricing-tables { + width: 90%; + min-width: 220px; + margin: 1em auto; +} + +.pricing-header { + padding: .5em .2em; + font-size: 1.5em; + font-weight: lighter; + letter-spacing: .1em; + background-color: #7e3319; +} + +li[class^="pricing"] { + padding: 1em; + background-color: #fff; + border-top: 1px solid #fd6632; +} + +.pricing-plan { + color: #fd6632; +} + +.pricing-cost { + font-size: 1.333em; + font-weight: bold; +} + +.pricing-stats { + color: #2e2e2e; +} + +.pricing-button-container { + padding: 1.2em; + background-color: #be4c25; +} + +.pricing-button { + width: 90%; + margin: 0 auto; + padding: .85em 1.35em; + background-color: #fd6632; +} + +@media screen and (min-width: 32em) { + .pricing-tables { + display: inline-block; + width: 45%; + } +} + +@media screen and (min-width: 50em) { + .pricing { + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-content: center; + align-content: center; + } + + .pricing-tables { + width: 24%; + } + + .pricing-button { + width: auto; + } +} + + + +/* +PORTFOLIO SECTION +*/ + +.portfolio-container { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + align-items: center; + max-width: 68em; + padding: 3.5em 0 0; + margin: 0 auto; +} + +.portfolio-section-header { + width: 100%; + text-align: center; + margin-top: .2em; + margin-bottom: .5em; +} + +@media screen and (min-width: 50em) { + + .portfolio-section-header { + margin: 0 6%; + padding: 1em 0; + background-size: calc(100% - 11.5em); + } + + .portfolio-container { + position: relative; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: space-around; + justify-content: space-around; + padding-top: 0; + } +} + + + +/* +PORTFOLIO SLIDER +*/ + +.portfolio-slider { + width: 100%; +} + +.portfolio-slider-figure { + position: relative; + overflow: hidden; + direction: rtl; +} + +.portfolio-slider-figure img { + min-width: 40em; + margin: 0 auto; +} + +.portfolio-slider-overlay { + opacity: .7; +} + +.portfolio-slider-caption { + position: absolute; + top: 10%; + right: 18%; + width: 14em; + line-height: 1.1; + text-align: left; + text-shadow: 1px 1px 5px #2e2e2e; +} + +.portfolio-slider-caption p { + font-size: 1.333em; +} + +.portfolio-slider-button { + padding: 1em 1em; + margin: .8em 0; + background-image: linear-gradient(#4dbff7, #5087c8); +} + +.portfolio-slider-button:hover { + cursor: pointer; +} + +.portfolio-slider-button:before, +.portfolio-slider-button:after { + font-family: "ico-fonts"; +} + + +.portfolio-slider-button:after { + content: "\e60a"; + padding-left: 1.333em; +} + +.portfolio-slider-button:before { + content: "\e610"; + padding-right: 1em; + color: rgba(0,0,0,.3); +} + +.portfolio-slider-bullets[aria-hidden="true"] { + visibility: hidden; +} + +@media screen and (min-width: 50em) { + + .portfolio-slider-caption { + top: 20%; + right: 25%; + } + + .portfolio-slider-bullets[aria-hidden="true"] { + visibility: visible; + } + + .portfolio-slider-bullets { + padding: .3em; + font-size: 1.777em; + text-align: center; + } + + .portfolio-slider-bullets li { + display: inline; + } + + [title$="bullet"]:before { + content: "•"; + color: #d4d4d4; + } + + .slider-bullet-active:before { + color: #fd6632; + } +} + + + +/* +PORTFOLIO NAVIGATION +*/ + +[title="portfolio-categories"] li { + display: block; + margin-top: .9em; + margin-bottom: .5em; + text-align: center; +} + +.portfolio-menu-item { + padding: .3em; + font-size: 1.333rem; + text-decoration: none; + color: #d4d4d4; +} + +.portfolio-selected-category { + color: #fff; + background-color: #fd6632; +} + +@media screen and (min-width: 50em) { + + + [title="portfolio navigation"] { + display: -webkit-flex; + display: flex; + -webkit-flex-basis: 100%; + flex-basis: 100%; + -webkit-justify-content: center; + justify-content: center; + margin-top: 1em; + margin-bottom: 1.777em; + } + + [title="portfolio-categories"] li { + display: inline-block; + } + + .portfolio-menu-item { + font-size: 1rem; + } +} + + +/* +PORTFOLIO ITEMS +*/ + +.portfolio-item { + position: relative; + max-width: 300px; + margin-top: .5em; + margin-bottom: 2em; + text-align: center; +} + +.portfolio-opacity { + opacity: .7; +} + +.portfolio-link-hover:hover { + display: block; + background: #000; +} + +.portfolio-link-hover:hover:after { + position: absolute; + top: 30%; + left: 42%; + width: 1.777em; + height: 1.777em; + padding-top: .4em; + content: "\e608"; + font-family: 'ico-fonts'; + font-size: 1.6em; + text-align: center; + color: #fff; + background-color: #fd6632; + border-radius: 50%; +} + +.portfolio-caption-header { + padding: .5em 0; + font-weight: bold; + font-size: 1.333em; +} + +.portfolio-category { + color: #7c8387; +} + +/* +ABOUT +*/ + +.about, .about p { + color: #b9bdbf; +} + +.about { + position: relative; + background-color: #252629; + padding: 4em 1em 1em; +} + +.about-header, .skills-header { + color: #fff; + text-decoration: underline; +} + +.about-header { + font-size: 2.4em; + margin-bottom: 0.5em; +} + +.about p { + display: inline-block; + line-height: 1.5em; + margin-bottom: 1em; +} + +.skills-header { + font-size: 1.7em; + margin-bottom: 0.8em; +} + +.skills li { + margin-bottom: 1em; +} + +.progress-header { + text-align: left; + margin-bottom: 0.3em; +} + +progress[value]::-webkit-progress-bar { + background-color: #3a3a3a; +} + +progress[value]::-webkit-progress-value { + background-color: #fd6632; +} + +.join-us-header { + font-weight: normal; + font-size: 1.5em; + margin-bottom: 1em; +} + +.contact-us-button { + font-weight: bold; + padding: 0.9em 3.5em; +} + +.about>aside { + margin-bottom: 1em; +} + +@media screen and (min-width: 50em) { + .about-header, .skills-header { + text-decoration: none; + } + + .about-header { + margin: 0 12% 1em; + background-size: calc(50% - 2em); + } + + .about p { + width: 49.5%; + padding: 0 0.5em; + margin-bottom: 6em; + } + + .skills { + margin-bottom: 6em; + } + + .skills-header { + margin: 0 19.25% 1.5em; + background-size: calc(50% - 2.25em); + } + + .skills li { + margin-bottom: 1.4em; + } + + progress[value] { + height: 1.8em; + } + + .join-us-header { + margin-bottom: 1.5em; + } +} + +/* +TEAM +*/ + +.team, .clients { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.team { + position: relative; + -webkit-justify-content: space-around; + justify-content: space-around; + padding-top: 2.5em; +} + +.team-section-header { + padding: 0.7em 0; +} + +.team-profile, .social-icons { + display: inline-block; +} + +.team-profile { + width: 15em; + margin: 1em 0; +} + +.team-header { + line-height: 1.5em; + font-weight: bold; +} + +.team-text { + color: #7c8387; + font-size: 0.9em; + line-height: 1.5em; + margin: 0 auto; +} + +.team-description-text { + font-size: 1em; + padding: 0 1em; + margin-bottom: 1em; +} + +.profile-header { + color: #2e2e2e; + font-size: 1.5em; +} + +.profile-text { + width: 95%; +} + +.profile-image { + width: 11em; + margin: 1em auto 0; +} + +.social-icons { + font-size: 1.3em; + padding: 0.3em; + margin: 1em 0.1em; +} + +.icon-facebook { + background-color: #305fc6; +} + +.icon-twitter { + background-color: #32bdff; +} + +.icon-dribbble { + background-color: #dd2667; +} + +.icon-linkedin2 { + background-color: #2ca1eb; +} + +.icon-google-plus { + background-color: #fabc00; +} + +.clients { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + min-width: 20em; + margin-top: 1em; +} + +.client-figure { + margin: 1em 0; +} + +.client-image { + width: 5em; + margin: 0 auto; + opacity: 1; +} + +.client-header { + color: #2e2e2e; + margin: 0.7em 0; +} + +.client-name { + color: #fd6632; + display: block; +} + +.client-caption { + width: 60vw; + max-width: 67em; +} + +.client-button { + font-size: 0.75em; + height: 2.75em; + padding: 0.9em 1.1em; + margin: 0.5em; +} + +@media screen and (min-width: 50em) { + .gray-line { + background: url("/img/horizontal-black-line.svg") no-repeat left, + url("/img/horizontal-black-line.svg") no-repeat right; + } + + .team-section-header { + margin: 0 3%; + background-size: calc(50% - 0.6em); + } + + .team-description-text { + margin-bottom: 3em; + } + + .social-icons { + font-size: 1em; + } + + .client-section-header { + margin: 0 19.25%; + padding: 1.333em 0; + background-size: calc(50% - 2.5em); + } + + .client-figure { + display: -webkit-box; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + margin: 1em 0; + } + + .client-image { + margin-right: 2vw; + } + + .client-header { + margin-top: 0; + } + + .client-caption, .client-name { + display: inline-block; + } + + .client-caption { + text-align: left; + } +} + + +/* +CONTACT SECTION +*/ + +.contact-section { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + align-items: center; + margin: 0 auto; + padding: 2.5em .3em 2em; + background-color: #fd6632; +} + +.contact-section-header { + background-size: calc(100% - 13.5em); +} + +.contact-text { + margin-bottom: 1.5em; +} + +input::-webkit-input-placeholder { + font-family: "helvetica neue", arial, sans-serif; + color: #fff; + letter-spacing: .1em; +} + +input::-moz-placeholder { + font-family: "helvetica neue", arial, sans-serif; + color: #fff; + letter-spacing: .1em; +} + +input[type="text"], +input[type="email"], +textarea { + width: 100%; + padding: 1em; + margin-bottom: 1em; + letter-spacing: .1em; +} + +input[type="submit"] { + padding: .7em 2em; + margin: 0 auto; + font-weight: bold; + color: #fd6632; + border: none; + background-color: #fff; +} + +.contact-form, +.contact-map { + max-width: 460px; +} + +.contact-map { + position: relative; + margin: 1em 0; +} + +.contact-map img { + opacity: 1; +} + +.contact-map-caption { + position: absolute; + min-height: 133px; + top: 0; + right: 0; + padding-top: .5em; + padding-bottom: .5em; + line-height: 1.4em; + text-align: center; + background-color: rgba(0,0,0,.7); +} + +.contact-phone:before, +.contact-email:before, +.contact-location:before { + padding-right: .4em; + font-family: 'ico-fonts'; + vertical-align: bottom; +} + +.contact-phone:before { + content: "\e60c"; +} + +.contact-email:before { + content: "\e602"; +} + +.contact-location:before { + content: "\e60d"; +} + +.contact-map-caption a { + display: inline-block; + padding: .3em; + color: #fff; + text-decoration: none; +} + +.contact-weight-light { + font-weight: lighter; +} + +@media screen and (min-width: 50em) { + + input, textarea, .contact-map-caption { + font-size: .8em; + } + + .contact-section { + position: relative; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: space-around; + justify-content: space-around; + padding-top: 2em; + } + + .contact-section-header { + -webkit-flex-basis: 94%; + flex-basis: 94%; + } + + input[type="submit"] { + margin-left: calc(100% - 155px); + } + + .contact-form { + margin-top: 2.7em; + } + + .contact-map-caption { + text-align: left; + } + + .contact-map-caption a { + padding-right: 3em; + } + + .contact-location { + margin-top: 2em; + } + + .contact-map-caption:after { + content: ""; + position: absolute; + top: 12px; + left: 33%; + width: 170px; + padding-bottom: 150px; + -webkit-transform: rotate(-30deg) skewX(29deg); + transform: rotate(-30deg) skewX(29deg); + background-image: linear-gradient(40.4deg, rgba(0,0,0,.7) 23.5%, rgba(0,0,0,0) 23.5%, rgba(0,0,0,0) 100%); + border-radius: 10%; + } +} + +/* +FOOTER +*/ + +footer { + padding-top: 1.5em; +} + +footer p { + font-size: 0.95em; + color: #7c8387; +} + +.footer-name { + color: #fd6632; +} + +.footer-copyright { + color: #252629; +} + +/* +MEDIA SCREEN MODIFIERS +*/ + +@media screen and (min-width: 50em) { + .services-container, + .team, + .about, + .header-content, + .contact-section { + padding: 0 calc(20% - 7.5em) 6em; + } + + .small-paragraph { + width: 45%; + } + + .team-section-header, + .client-section-header, + .section-header, + .sub-section-header, + .pricing-header, + .portfolio-section-header, + .contact-section-header { + text-decoration: none; + text-transform: uppercase; + } +} diff --git a/img/broderic.jpg b/img/broderic.jpg new file mode 100755 index 0000000..3adf7e2 Binary files /dev/null and b/img/broderic.jpg differ diff --git a/img/facebook-thumb.jpg b/img/facebook-thumb.jpg new file mode 100644 index 0000000..353a44f Binary files /dev/null and b/img/facebook-thumb.jpg differ diff --git a/img/flight.jpg b/img/flight.jpg new file mode 100644 index 0000000..2ab609f Binary files /dev/null and b/img/flight.jpg differ diff --git a/img/header-background.jpg b/img/header-background.jpg new file mode 100644 index 0000000..826e4e8 Binary files /dev/null and b/img/header-background.jpg differ diff --git a/img/hexagon.jpg b/img/hexagon.jpg new file mode 100644 index 0000000..be7fb10 Binary files /dev/null and b/img/hexagon.jpg differ diff --git a/img/horizontal-black-line.svg b/img/horizontal-black-line.svg new file mode 100644 index 0000000..4bc9d1d --- /dev/null +++ b/img/horizontal-black-line.svg @@ -0,0 +1 @@ +Line \ No newline at end of file diff --git a/img/horizontal-white-line.svg b/img/horizontal-white-line.svg new file mode 100644 index 0000000..d6d1586 --- /dev/null +++ b/img/horizontal-white-line.svg @@ -0,0 +1 @@ +Line \ No newline at end of file diff --git a/img/jane.jpg b/img/jane.jpg new file mode 100644 index 0000000..42190ad Binary files /dev/null and b/img/jane.jpg differ diff --git a/img/jannete.jpg b/img/jannete.jpg new file mode 100644 index 0000000..61d270b Binary files /dev/null and b/img/jannete.jpg differ diff --git a/img/jessie.jpg b/img/jessie.jpg new file mode 100644 index 0000000..57d4d87 Binary files /dev/null and b/img/jessie.jpg differ diff --git a/img/jonathan.jpg b/img/jonathan.jpg new file mode 100644 index 0000000..f891b67 Binary files /dev/null and b/img/jonathan.jpg differ diff --git a/img/korean.jpg b/img/korean.jpg new file mode 100644 index 0000000..4427ab7 Binary files /dev/null and b/img/korean.jpg differ diff --git a/img/logo-tear-drop.svg b/img/logo-tear-drop.svg new file mode 100644 index 0000000..f0b7341 --- /dev/null +++ b/img/logo-tear-drop.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/logotypes.jpg b/img/logotypes.jpg new file mode 100644 index 0000000..7489b57 Binary files /dev/null and b/img/logotypes.jpg differ diff --git a/img/management.jpg b/img/management.jpg new file mode 100644 index 0000000..f0f85c6 Binary files /dev/null and b/img/management.jpg differ diff --git a/img/map-mobile.jpg b/img/map-mobile.jpg new file mode 100644 index 0000000..bcb8286 Binary files /dev/null and b/img/map-mobile.jpg differ diff --git a/img/mountains.jpg b/img/mountains.jpg new file mode 100644 index 0000000..f8e277c Binary files /dev/null and b/img/mountains.jpg differ diff --git a/img/orange-underline.svg b/img/orange-underline.svg new file mode 100644 index 0000000..6385344 --- /dev/null +++ b/img/orange-underline.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/img/sketches.jpg b/img/sketches.jpg new file mode 100644 index 0000000..949de5b Binary files /dev/null and b/img/sketches.jpg differ diff --git a/img/slider-mobile.jpg b/img/slider-mobile.jpg new file mode 100644 index 0000000..77f97d8 Binary files /dev/null and b/img/slider-mobile.jpg differ diff --git a/img/slider.jpg b/img/slider.jpg new file mode 100644 index 0000000..62387d4 Binary files /dev/null and b/img/slider.jpg differ diff --git a/img/triangle-black.svg b/img/triangle-black.svg new file mode 100644 index 0000000..f96da41 --- /dev/null +++ b/img/triangle-black.svg @@ -0,0 +1 @@ +Triangle 1 \ No newline at end of file diff --git a/img/triangle-opaque.svg b/img/triangle-opaque.svg new file mode 100644 index 0000000..bd563ac --- /dev/null +++ b/img/triangle-opaque.svg @@ -0,0 +1 @@ +Triangle 1 diff --git a/img/triangle-orange.svg b/img/triangle-orange.svg new file mode 100644 index 0000000..a5e2f65 --- /dev/null +++ b/img/triangle-orange.svg @@ -0,0 +1 @@ +Triangle 1 \ No newline at end of file diff --git a/img/triangle-white.svg b/img/triangle-white.svg new file mode 100644 index 0000000..efc11ca --- /dev/null +++ b/img/triangle-white.svg @@ -0,0 +1 @@ +Triangle 1 \ No newline at end of file diff --git a/img/youtube-iphone.jpg b/img/youtube-iphone.jpg new file mode 100644 index 0000000..e73f2c8 Binary files /dev/null and b/img/youtube-iphone.jpg differ diff --git a/img/ytube-app.jpg b/img/ytube-app.jpg new file mode 100644 index 0000000..0165da9 Binary files /dev/null and b/img/ytube-app.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..051b450 --- /dev/null +++ b/index.html @@ -0,0 +1,507 @@ + + + + + + Avengers + + + + + + + + + + +
+ +

Hi there! We're Avengers, creative design agency we build awesome mobile and websites

+
+
+
+
+ + + +

Services

+ + + +
+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+ +
+
+ + + +

Pricing Tables

+ + + +
+
+

Basic

+
    +
  • $5.99 /MONTH
    • +
  • 3 Projects
    • +
  • 2 Users
    • +
  • 1 Gb
    • +
  • 1 Calendar
    • +
+
+ Sign up +
+
+
+

Standard

+
    +
  • $10.99 /MONTH
    • +
  • 7 Projects
    • +
  • 5 Users
    • +
  • 10 Gb User
    • +
  • 5 Calendar
    • +
+
+ Sign up +
+
+
+

Professional

+
    +
  • $25.99 /MONTH
    • +
  • 15 Projects
    • +
  • 50 Users
    • +
  • 100 Gb User
    • +
  • 25 Calendar
    • +
+
+ Sign up +
+
+
+

Premium

+
    +
  • $49.99 /MONTH
    • +
  • Unlimited Projects
    • +
  • Unlimited Users
    • +
  • 1000 Gb User
    • +
  • Unlimited Calendar
    • +
+
+ Sign up +
+
+
+
+
+
+ + + +

Portfolio

+ + + +
+
+
+ image advertising Crispers iphone app +
+

Crispers

+

Nice, crispy and
creative landing page

+ Get the app +

Available for iPhone and iPad

+
+
+
+ image advertising Crispers iphone app +
+

Crispers

+

Nice, crispy and
creative landing page

+ Get the App +

Available for iPhone and iPad

+
+
+
+ image advertising Crispers iphone app +
+

Crispers

+

Nice, crispy and
creative landing page

+ Get the app +

Available for iPhone and iPad

+
+
+
+ image advertising Crispers iphone app +
+

Crispers

+

Nice, crispy and
creative landing page

+ Get the App +

Available for iPhone and iPad

+
+
+
+ image advertising Crispers iphone app +
+

Crispers

+

Nice, crispy and
creative landing page

+ Get the app +

Available for iPhone and iPad

+
+
+
    +
    • +
    • +
    • +
    • +
    • +
+
+ + + +
+ Image of Youtube app on a handheld device +
+

Youtube iphone app

+

UI design, brand & logotypes

+
+
+ +
+ Image of Avengers welcome screen +
+

Hexagon onepage

+

Webdesign, brand & logotypes

+
+
+ +
+ Image of drawing tools and sketches of fantasy characters +
+

Sketches icon

+

Icons design, brand & logotypes

+
+
+ +
+ Image of logotypes on screen +
+

Logotypes volume

+

UI design, brand & logotypes

+
+
+ +
+ Image of app screen with points displayed +
+

Flight control

+

Webdesign, brand & logotypes

+
+
+ +
+ Image of Youtube app on a handheld device +
+

Youtube app

+

Icons design, brand & logotypes

+
+
+ +
+ Image of app screen for claim management +
+

Management

+

UI design, brand & logotypes

+
+
+ +
+ Image of recipe app screen for korean bulgogi beef +
+

Korean beef

+

Webdesign, brand & logotypes

+
+
+ +
+ Image of Facebook like and dislike thumb icons +
+

Facebook thumbs

+

Icons design, brand & logotypes

+
+
+ +
+
+
+ + + +

About

+ + + +
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

+
+
+ + + +

Skills

+ + + +
+
    +
  • +
    +
    +

    Photoshop

    +
    + +
    +
    • +
  • +
    +
    +

    HTML/CSS

    +
    + +
    +
    • +
  • +
    +
    +

    Illustrator

    +
    + +
    +
    • +
  • +
    +
    +

    PHP

    +
    + +
    +
    • +
  • +
    +
    +

    Wordpress

    +
    + +
    +
    • +
+
+ +
+
+
+ + + +

Team

+ + + +
+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.

+ +
+
+ + + +

Clients

+ + + +
+ +
    +
  • +
    + Image of Matthew Broderic +
    +

    Matthew Broderic (CEO Hopicola Inc.)

    +

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard my text ever since the 1500s, when lorem upsum is the best text for you.

    +
    +
    +
    • +
+ +
+
+
+
+ + + +

Contact

+ + + +
+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.

+
+ + + + +
+
+ Map of San Francisco location +
+ +970 897 580 (7:00 - 20:00) + info@company.com + USA, San Francisco, 57010, Little Parry St. 826/31 +
+
+
+
+ + + + + + diff --git a/js/port_nav.js b/js/port_nav.js new file mode 100644 index 0000000..bf73197 --- /dev/null +++ b/js/port_nav.js @@ -0,0 +1,29 @@ +// Attempted to impletment this using Jed's approach. +// Isnt' quite working. + + +var showCategory = function(event) { + + event.preventDefault(); + + var category = $(this).data("category"); + + console.log(category); + + if (category === 'all-works') { + $('[data-category]').show(); + return; + } + + $('[data-tags]').hide(); + + $('[data-tags*="' + category + '"]').show(); + + $('.nav-item.portfolio-nav-active').removeClass('portfolio-nav-active'); + + $(this).addClass('portfolio-nav-active'); + + +}; + +$(".nav-item").click(showCategory); diff --git a/js/slider.js b/js/slider.js new file mode 100644 index 0000000..74ee0c4 --- /dev/null +++ b/js/slider.js @@ -0,0 +1,17 @@ +var selectBullet = function(event) { + + event.preventDefault(); + + var slideID = $(this).attr("href"); + + $(".bullets a").removeClass("current"); + $(this).addClass("current"); + + $(".active-slide").removeClass("active-slide"); + $(slideID).addClass("active-slide"); + +}; + +$(".bullets a").click(selectBullet); + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..8257ddb --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "w3-a3__sass-and-jquery", + "version": "1.0.0", + "description": "Last week we focussed on HTML semantics and document architecture with slight emphasis on presentation. The project assignment for the second week is going to assume that you have learned and mastered the basics of semantic HTML and we are going to focus on advanced presentation skills.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/hollislau/advanced-presentation__W2-A2.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/hollislau/advanced-presentation__W2-A2/issues" + }, + "homepage": "https://github.com/hollislau/advanced-presentation__W2-A2#readme", + "devDependencies": { + "gulp": "^3.9.0", + "gulp-sass": "^2.0.4", + "node-bourbon": "^4.2.3" + } +} diff --git a/sass/_config.scss b/sass/_config.scss new file mode 100644 index 0000000..f0aa50b --- /dev/null +++ b/sass/_config.scss @@ -0,0 +1,79 @@ +$font_size: 16; +$font_small: 15; +$font_smaller: 14; +$font_smallest: 13; + +$heading_1: 34; +$heading_2: 22; +$heading_3: 20; + +$primary_font_family: "Helvetica Neue", Arial, sans-serif; +$primary_font_color: #ffffff; +$secondary_font_color: #2e2e2e; +$tertiary_font_color: #7c8387; + +$href_hover: #de592c; + +body { + background-color: $background; + margin: 0 auto; + text-align: center; +} + +header, article, footer { + padding: 0 1em 2em; + @media screen and (min-width: 50em) { + padding: 0 calc(20% - 7.5em) 6em; + } +} + +article, footer { + position: relative; +} + +button:hover { + cursor: pointer; +} + +img { + max-width: 100%; + height: auto; + opacity: 0.7; +} + +input, +textarea { + display: block; + background-color: $theme_1; + border: none; +} + +li { + list-style-type: none; +} + +progress[value] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + color: $theme_1_light; + height: 1.2em; + width: 100%; + @media screen and (min-width: 50em) { + height: 1.6em; + } +} + +progress[value]::-webkit-progress-bar { + background-color: $theme_2_darker; +} + +progress[value]::-webkit-progress-value { + background-color: $theme_1_light; +} + +progress[value]::-moz-progress-bar { + background-color: $theme_1_light; +} + diff --git a/sass/_reset.scss b/sass/_reset.scss new file mode 100644 index 0000000..3a38506 --- /dev/null +++ b/sass/_reset.scss @@ -0,0 +1,7 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} diff --git a/sass/_typography.scss b/sass/_typography.scss new file mode 100644 index 0000000..69d0402 --- /dev/null +++ b/sass/_typography.scss @@ -0,0 +1,44 @@ +body, button, input, textarea, a { + font-family: $primary_font_family; + font-size: em($font_size); + color: $primary_font_color; +} + +h1 { + font-size: em($heading_1); +} + +h2 { + font-size: em($heading_2); +} + +h3 { + font-size: em($heading_3); +} + +h1, h2, h3, input, textarea { + font-weight: bold; +} + +h1, h2, h3 { + text-transform: uppercase; +} + +p { + line-height: 1.6em; +} + +a { + text-decoration: none; +} + +@font-face { + font-family: 'ico-fonts'; + src:url('/css/fonts/ico-fonts.eot'); + src:url('/css/fonts/ico-fonts.eot') format('embedded-opentype'), + url('/css/fonts/ico-fonts.ttf') format('truetype'), + url('/css/fonts/ico-fonts.woff') format('woff'), + url('/css/fonts/ico-fonts.svg') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/sass/color/_color.scss b/sass/color/_color.scss new file mode 100644 index 0000000..ebd5f4b --- /dev/null +++ b/sass/color/_color.scss @@ -0,0 +1,15 @@ +$background: #ffffff !default; +$theme_1_light: #fd6632 !default; +$theme_2_darkest: #2e2e2e !default; + +$theme_1_dark: #7e3319 !default; +$theme_1: #be4c25 !default; +$theme_2: #7c8387 !default; +$theme_2_light: #d4d4d4 !default; +$theme_2_darker: #3a3a3a !default; + +$facebook_color: #305fc6; +$twitter_color: #32bdff; +$dribbble_color: #dd2667; +$linkedin_color: #2ca1eb; +$google_plus_color: #fabc00; diff --git a/sass/components/_aside.scss b/sass/components/_aside.scss new file mode 100644 index 0000000..0cf039e --- /dev/null +++ b/sass/components/_aside.scss @@ -0,0 +1,24 @@ +aside { + .join-us-header { + margin-bottom: 1.5em; + } + @media screen and (min-width: 50em) { + .join-us-header { + margin-bottom: 2em; + } + } +} + +.join-us-header { + color: $theme_2_light; + font-weight: normal; + text-transform: none; +} + +.contact-button { + font-size: em($font_small); + text-transform: uppercase; + background-color: $theme_1_light; + font-weight: bold; + padding: 0.9em 3.8em; +} diff --git a/sass/components/_bundle.scss b/sass/components/_bundle.scss new file mode 100644 index 0000000..39ef29f --- /dev/null +++ b/sass/components/_bundle.scss @@ -0,0 +1,64 @@ +$cell-padding: 1em; + + +.bundle { + min-width: 220px; + margin-bottom: 1em; + h3 { + padding: .7em .2em; + font-size: em($heading_2); + font-weight: lighter; + letter-spacing: .1em; + text-transform: uppercase; + background-color: $theme_1_dark; + } + li { + padding: $cell-padding; + color: $secondary_font_color; + background-color: $background; + border-top: 1px solid $theme_1_light; + &.bundle-plan { + color: $theme_1_light; + } + & span { + text-transform: uppercase; + } + } + .bundle-price { + font-size: em($heading_3); + font-weight: bold; + } + .bundle-button-container { + padding: $cell-padding; + background-color: $theme_1; + border-top: 2px solid $theme_1_light; + } + .button { + display: block; + padding: .85em 1.35em; + color: $primary_font_color; + text-transform: uppercase; + background-color: $theme_1_light; + &:hover { + background-color: $href_hover; + } + } +} + +@media screen and (min-width: 32em) { + .bundle { + display: inline-block; + width: 45%; + } +} + +@media screen and (min-width: 50em) { + .bundle { + width: 24%; + .button { + width: 70%; + margin: 0 auto; + } + } +} + diff --git a/sass/components/_client-profile.scss b/sass/components/_client-profile.scss new file mode 100644 index 0000000..da69e66 --- /dev/null +++ b/sass/components/_client-profile.scss @@ -0,0 +1,84 @@ +.client-container { + @include flexbox($wrap: wrap, $justify: space-between); + .header-container { + margin-bottom: 2em; + } + .client-button { + margin: 0.5em; + } + @media screen and (min-width: 50em) { + .header-container { + margin-bottom: 4em; + } + } +} + +.client-figure { + .client-image { + width: 5em; + margin: 0 auto; + } + .client-caption { + width: 60vw; + max-width: 67em; + } + @media screen and (min-width: 50em) { + @include flexbox; + .client-image { + margin-right: 2vw; + } + .client-caption { + text-align: left; + } + } +} + +.client-image { + border-radius: 100%; + opacity: 1; +} + +.client-caption { + .client-header { + margin: 0.7em 0; + } + @media screen and (min-width: 50em) { + .client-header { + margin-top: 0; + margin-bottom: 1em; + } + } +} + +.client-header { + font-size: em($font_small); + text-transform: none; + color: $secondary_font_color; + .client-name { + display: block; + margin-bottom: 0.2em; + } + @media screen and (min-width: 50em) { + .client-name { + display: inline-block; + margin-bottom: 0; + } + } +} + +.client-name { + color: $theme_1_light; +} + +.client-text { + color: $theme_2; + font-size: em($font_smallest); +} + +.client-button { + border-radius: 100%; + background-color: $theme_1_light; + font-size: 0.75em; + height: 2.75em; + padding: 0.9em 1.1em; +} diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss new file mode 100644 index 0000000..e05dd60 --- /dev/null +++ b/sass/components/_contact-form.scss @@ -0,0 +1,41 @@ +%input-styles { + width: 100%; + padding: 1em; + margin-bottom: 1em; + letter-spacing: .1em; + color: $primary_font_color; +} + +.contact-form { + input { + @include placeholder { + font-family: $primary_font_family; + color: $primary_font_color; + letter-spacing: .1em; + } + } + input[type="text"], + input[type="email"], + textarea { + @extend %input-styles; + } + + @media screen and (min-width: 50em) { + width: 49%; + input[type="submit"] { + margin-left: calc(100% - 155px); + } + input, textarea, .contact-map-caption { + font-size: em($font_smallest); + } + } +} + +input.form-submit { + padding: .7em 2em; + font-weight: bold; + color: $theme_1_light; + border: none; + background-color: $background; +} + diff --git a/sass/components/_contact-map.scss b/sass/components/_contact-map.scss new file mode 100644 index 0000000..c2e7002 --- /dev/null +++ b/sass/components/_contact-map.scss @@ -0,0 +1,62 @@ +$map-caption-background: rgba(0,0,0,.7); +$map-caption-library: 'ico-fonts'; +$map-caption-text-size: em($font_small); + +.contact-map { + position: relative; + img { + opacity: 1; + } + .contact-map-caption { + position: absolute; + top: 0; + } +} + +.contact-map-caption { + padding-top: .5em; + line-height: 1.4em; + background-color: $map-caption-background; + & a { + display: inline-block; + padding: .3em; + color: #fff; + text-decoration: none; + span { + font-weight: lighter; + } + } + .contact-phone:before, + .contact-email:before, + .contact-location:before { + padding-right: .4em; + vertical-align: bottom; + font-family: $map-caption-library; + } + .contact-phone:before { + content: "\e60c"; + } + + .contact-email:before { + content: "\e602"; + } + + .contact-location:before { + content: "\e60d"; + } + @media screen and (min-width: 50em) { + & { + text-align: left; + padding: .5em; + } + & a { + font-size: $map-caption-text-size; + } + .contact-location { + margin-top: 1em; + } + &.section-arrows-opaque:after { + margin-top: .5em; + } + } +} diff --git a/sass/components/_copyright.scss b/sass/components/_copyright.scss new file mode 100644 index 0000000..443d211 --- /dev/null +++ b/sass/components/_copyright.scss @@ -0,0 +1,12 @@ +.footer-text { + font-size: em($font-smallest); + color: $tertiary_font_color; +} + +.footer-name { + color: $theme_1_light; +} + +.footer-copyright { + color: $secondary_font_color; +} diff --git a/sass/components/_download-button.scss b/sass/components/_download-button.scss new file mode 100644 index 0000000..6f04639 --- /dev/null +++ b/sass/components/_download-button.scss @@ -0,0 +1,26 @@ +$download-button-size: em($font-size); + +.download-button { + display: inline-block; + padding: .8em 1em; + font-size: $download-button-size * .5; + color: $primary_font_color; + text-transform: uppercase; + @include linear-gradient(#4dbff7, #5087c8); + &:hover { + @include linear-gradient(#5087c8, #4dbff7); + } + &:before { + content: "\e610"; + padding-right: 1em; + color: rgba(0,0,0,.3); + } + &:after { + content: "\e60a"; + padding-left: 1.333em; + } + &:before, + &:after { + font-family: "ico-fonts"; + } +} diff --git a/sass/components/_header-logo.scss b/sass/components/_header-logo.scss new file mode 100644 index 0000000..fd57a37 --- /dev/null +++ b/sass/components/_header-logo.scss @@ -0,0 +1,42 @@ +.header-content { + position: relative; + padding-top: 3em; + background-size: cover; + background-image: url(/img/header-background.jpg); + .logo { + margin: 1em auto; + } + @media screen and (min-width: 50em) { + padding-top: 4em; + padding-bottom: 7em; + } +} + +.logo { + opacity: 1; + height: 4em; + width: 4em; + padding: 1em 0; + background: #fd6632; + border-radius: 50%; +} + +.header-logo-text { + color: $secondary_font_color; + font-weight: lighter; + text-transform: none; + & strong { + font-weight: normal; + line-height: 1.3; + } + @media screen and (min-width: 50em) { + font-size: em(40); + } +} + +.curve-underline { + padding-bottom: .1em; + background-size: cover; + background: url("/img/orange-underline.svg") no-repeat; + background-position: bottom; +} diff --git a/sass/components/_headers.scss b/sass/components/_headers.scss new file mode 100644 index 0000000..d9345d9 --- /dev/null +++ b/sass/components/_headers.scss @@ -0,0 +1,16 @@ +.header-container { + @include flexbox($justify: center); + width: 100%; + h1, h2 { + margin: 0 1%; + } +} + +.header-light { + white-space: nowrap; +} + +.header-dark { + color: $secondary_font_color; + white-space: nowrap; +} diff --git a/sass/components/_index.scss b/sass/components/_index.scss new file mode 100644 index 0000000..eee6c90 --- /dev/null +++ b/sass/components/_index.scss @@ -0,0 +1,18 @@ +@import "main-menu"; +@import "headers"; +@import "header-logo"; +@import "social-icons"; +@import "section-arrows"; +@import "bundle"; +@import "skills"; +@import "aside"; +@import "team-profile"; +@import "client-profile"; +@import "service-description"; +@import "download-button"; +@import "slider"; +@import "portfolio-nav"; +@import "portfolio-items"; +@import "contact-form"; +@import "contact-map"; +@import "copyright"; diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss new file mode 100644 index 0000000..d23ca95 --- /dev/null +++ b/sass/components/_main-menu.scss @@ -0,0 +1,34 @@ +.menu { + position: fixed; + width: 100%; + padding-bottom: 0.5em; + border-bottom: 2px solid $theme_2_light; + background-color: $background; + z-index: 1000; + + & a { + width: 30%; + margin: 0 1em; + font-weight: bold; + color: $theme_2; + padding-top: 0.1em; + } + + li { + display: inline-block; + padding: .2em; + } + .current-page { + color: $secondary_font_color; + } +} + +@media screen and (min-width: 50em) { + .menu { + position: static; + padding: 0.8em calc(20% - 3em); + & a { + width: 16%; + } + } +} diff --git a/sass/components/_portfolio-items.scss b/sass/components/_portfolio-items.scss new file mode 100644 index 0000000..2739aa3 --- /dev/null +++ b/sass/components/_portfolio-items.scss @@ -0,0 +1,41 @@ +$portfolio-hover-color: $theme_2_darkest; + +.portfolio-item { + position: relative; + .portfolio-link:hover { + display: block; + background: $portfolio-hover-color; + } + .portfolio-link:hover:after { + position: absolute; + top: 33%; + left: 0; + right: 0; + margin: 0 auto; + width: 1.777em; + height: 1.777em; + padding-top: .35em; + content: "\e608"; + font-family: 'ico-fonts'; + font-size: 1.6em; + background-color: $theme_1_light; + border-radius: 50%; + } + .portfolio-caption-header { + padding: .5em 0; + font-weight: bold; + font-size: $font_small; + color: $secondary_font_color; + } + .portfolio-category { + font-size: em($font_smallest); + color: $tertiary_font_color; + } +} + +.portfolio-container { + .portfolio-item { + margin-top: .5em; + margin-bottom: 2em; + } +} diff --git a/sass/components/_portfolio-nav.scss b/sass/components/_portfolio-nav.scss new file mode 100644 index 0000000..e0660be --- /dev/null +++ b/sass/components/_portfolio-nav.scss @@ -0,0 +1,36 @@ +%nav-active { + color: $primary_font_color; + background-color: $theme_1_light,; +} + + +.portfolio-navigation { + @include flex-basis($width: 100%); + li { + display: block; + margin-top: .9em; + margin-bottom: .5em; + } + .nav-item { + padding: .3em; + font-size: em($font_smaller); + font-weight: bold; + color: $theme_2_light; + } + .nav-item:hover { + @extend %nav-active; + } + a.portfolio-nav-active { + @extend %nav-active; + } +} + +@media screen and (min-width: 50em) { + .portfolio-navigation { + margin-top: 1em; + margin-bottom: 1.777em; + li { + display: inline-block; + } + } +} diff --git a/sass/components/_section-arrows.scss b/sass/components/_section-arrows.scss new file mode 100644 index 0000000..ad38662 --- /dev/null +++ b/sass/components/_section-arrows.scss @@ -0,0 +1,34 @@ +%section-arrows { + content: ""; + display: block; + width: 200px; + height: 43px; + margin: 0 auto 2em; +} + +.section-arrows-white:before, +.section-arrows-orange:before, +.section-arrows-black:before, +.section-arrows-clear:before { + @extend %section-arrows; +} + +.section-arrows-orange:before { + background: url("/img/triangle-orange.svg") no-repeat; +} + +.section-arrows-black:before { + background: url("/img/triangle-black.svg") no-repeat; +} + +.section-arrows-white:before { + background: url("/img/triangle-white.svg") no-repeat; +} + +.section-arrows-opaque:after { + @extend %section-arrows; + background: url("/img/triangle-opaque.svg") no-repeat; + position: absolute; + left: 0; + right: 0; +} diff --git a/sass/components/_service-description.scss b/sass/components/_service-description.scss new file mode 100644 index 0000000..88310cd --- /dev/null +++ b/sass/components/_service-description.scss @@ -0,0 +1,26 @@ +.services-category { + [data-title="ux-design"]:after { + content: "\e60b"; + } + + [data-title="laboratory"]:after { + content: "\e600"; + } + + [data-title="development"]:after { + content: "\e601"; + } + .services-header:after { + display: block; + width: 2em; + height: 2em; + margin: .4em auto; + padding-top: .5em; + padding-bottom: .5em; + font-family: 'ico-fonts'; + font-size: 2em; + color: $secondary_font_color; + background-color: #fff; + border-radius: 50%; + } +} diff --git a/sass/components/_skills.scss b/sass/components/_skills.scss new file mode 100644 index 0000000..62cf8d6 --- /dev/null +++ b/sass/components/_skills.scss @@ -0,0 +1,34 @@ +.skills-container { + .header-container { + margin-bottom: 1em; + } + @media screen and (min-width: 50em) { + .header-container { + margin-bottom: 2em; + } + } +} + +.skills-list { + li { + margin-bottom: 1em; + } + @media screen and (min-width: 50em) { + li { + margin-bottom: 1.3em; + } + } +} + +.progress-figure { + figcaption { + margin-bottom: 0.3em; + } +} + +.progress-header { + font-size: em($font_smallest); + font-weight: normal; + color: $theme_2_light; + text-align: left; +} diff --git a/sass/components/_slider.scss b/sass/components/_slider.scss new file mode 100644 index 0000000..c3a60f8 --- /dev/null +++ b/sass/components/_slider.scss @@ -0,0 +1,85 @@ +$slider-position: relative; +$slider-opacity: .7; +$caption-position: absolute; +$caption-min-width: 165px; +$caption-margin-left: 50%; +$caption-text-align: left; +$caption-header-size: em($heading_3); +$caption-font-size: em($font-size); + +%text-shadow { + text-shadow: 1px 1px 5px $theme_2_darkest; +} + +.slider { + position: relative; + figure { + display: none; + position: absolute; + position: $slider-position; + } + .active-slide { + display: block; + animation: slidein 1s; + } + img { + opacity: $slider-opacity; + } + figcaption { + position: $caption-position; + top: 10%; + min-width: $caption-min-width; + margin-left: $caption-margin-left; + margin-right: auto; + text-align: $caption-text-align; + } + h3 { + margin-bottom: .1em; + font-size: $caption-header-size; + text-transform: none; + } + p { + font-size: $caption-font-size * .8; + line-height: 1; + @extend %text-shadow; + } + .download-button { + margin: .5em 0; + } + .gotcha { + font-size: em($font-size) / 2; + } +} + +.bullets { + padding: .5em 0; + li { + display: inline; + font-size: 1.777em; + } + a:before { + content: "•"; + color: $theme_2_light; + } + .current:before { + color: #ff4200; + } +} + +@media screen and (min-width: 50em) { + .slider { + figcaption { + top: 30%; + } + h3 { + margin-bottom: .3em; + font-size: $caption-header-size * 1.3; + } + p { + margin-bottom: .5em; + font-size: $caption-font-size * 1.3; + line-height: 1.3; + } + } +} + diff --git a/sass/components/_social-icons.scss b/sass/components/_social-icons.scss new file mode 100644 index 0000000..78e5f5c --- /dev/null +++ b/sass/components/_social-icons.scss @@ -0,0 +1,43 @@ +%social-icon-style { + padding: 0.3em 0.4em; + font-size: 1.3em; + &:hover { + background-color: $theme_1_light; + } + @media screen and (min-width: 50em) { + font-size: 1em; + } +} + +.social-icons li { + display: inline-block; +} + +.screen-reader-only { + display: none; +} + +.icon-facebook { + @extend %social-icon-style; + background-color: $facebook_color; +} + +.icon-twitter { + @extend %social-icon-style; + background-color: $twitter_color; +} + +.icon-dribbble { + @extend %social-icon-style; + background-color: $dribbble_color; +} + +.icon-linkedin2 { + @extend %social-icon-style; + background-color: $linkedin_color; +} + +.icon-google-plus { + @extend %social-icon-style; + background-color: $google_plus_color; +} diff --git a/sass/components/_team-profile.scss b/sass/components/_team-profile.scss new file mode 100644 index 0000000..92f76ae --- /dev/null +++ b/sass/components/_team-profile.scss @@ -0,0 +1,42 @@ +.team-profiles-container { + @include flexbox($wrap: wrap, $justify: space-around); + .profile-header { + margin-bottom: 0.1em; + } + .team-profile { + display: inline-block; + width: 15em; + margin: 1em 0; + } +} + +.team-profile { + .profile-image { + margin: 1em auto 0; + width: 11em; + } +} + +.profile-figure { + .social-icons { + margin: 1.5em 0; + } +} + +.profile-image { + border-radius: 100%; +} + +.team-text, .profile-text { + color: $theme_2; +} + +.profile-text { + font-size: em($font_smallest); + padding: 0 1em; +} + +.profile-header { + color: $secondary_font_color; +} + diff --git a/sass/layout/_about.scss b/sass/layout/_about.scss new file mode 100644 index 0000000..30cc524 --- /dev/null +++ b/sass/layout/_about.scss @@ -0,0 +1,30 @@ +.about-container { + background-color: #252629; + > .header-container { + margin-bottom: 1em; + } + .about-text { + display: inline-block; + margin-bottom: 1em; + } + .skills-container { + margin-bottom: 1.5em; + } + aside { + margin-bottom: 1em; + } + @media screen and (min-width: 50em) { + .about-text { + width: 47.5%; + margin: 0 0.5em 6em; + } + .skills-container { + margin-bottom: 5em; + } + } +} + +.about-text { + font-size: em($font_small); + color: #b9bdbf; +} diff --git a/sass/layout/_contact.scss b/sass/layout/_contact.scss new file mode 100644 index 0000000..7f4c537 --- /dev/null +++ b/sass/layout/_contact.scss @@ -0,0 +1,27 @@ +.contact-section { + background-color: $theme_1_light; + .header-container { + margin-bottom: 1.5em; + } + .contact-text, + .contact-form { + margin-bottom: 1.5em; + } + @media screen and (min-width: 50em) { + position: relative; + .contact-form, + .contact-map { + @include align-self(flex-start); + } + .contact-text { + margin-bottom: 4em; + } + } +} + +#contact { + @include flexbox($direction: column); + @media screen and (min-width: 50em) { + @include flexbox($wrap: wrap, $direction: row, $justify: space-between); + } +} diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss new file mode 100644 index 0000000..b39ec4b --- /dev/null +++ b/sass/layout/_footer.scss @@ -0,0 +1,11 @@ +footer { + .footer-text { + margin-bottom: 1em; + } + .social-icons { + margin-bottom: 1em; + } + @media screen and (min-width: 50em) { + padding-bottom: 8em; + } +} diff --git a/sass/layout/_index.scss b/sass/layout/_index.scss new file mode 100644 index 0000000..d852d72 --- /dev/null +++ b/sass/layout/_index.scss @@ -0,0 +1,7 @@ +@import "about"; +@import "team"; +@import "services"; +@import "portfolio"; +@import "contact"; +@import "footer"; + diff --git a/sass/layout/_portfolio.scss b/sass/layout/_portfolio.scss new file mode 100644 index 0000000..9de3bc9 --- /dev/null +++ b/sass/layout/_portfolio.scss @@ -0,0 +1,12 @@ +.portfolio-container { + .header-container { + margin-bottom: 1.5em; + } +} + +#portfolio { + @include flexbox($direction: column, $justify: space-around); + @media screen and (min-width: 50em) { + @include flexbox($wrap: wrap, $direction: row); + } +} diff --git a/sass/layout/_services.scss b/sass/layout/_services.scss new file mode 100644 index 0000000..061d76a --- /dev/null +++ b/sass/layout/_services.scss @@ -0,0 +1,33 @@ +.services-container { + background-color: #fd6632; + .header-container { + margin-bottom: 1.5em; + } + .services-intro { + @media screen and (min-width: 50em) { + margin-bottom: 2em; + } + } + .services-text { + display: inline-block; + margin: .5em 0; + padding: 0 .5em; + @media screen and (min-width: 50em) { + width: 49.5%; + } + } + .services-category-container { + @media screen and (min-width: 50em) { + margin-top: 2em; + @include flexbox($justify: space-between); + } + } + .services-category { + margin: 1.5em 0; + @media screen and (min-width: 50em) { + margin-left: auto; + margin-right: auto; + width: 30%; + } + } +} diff --git a/sass/layout/_team.scss b/sass/layout/_team.scss new file mode 100644 index 0000000..2067d3e --- /dev/null +++ b/sass/layout/_team.scss @@ -0,0 +1,22 @@ +.team-container { + > .header-container { + margin-bottom: 1.5em; + } + > p { + margin-bottom: 1em; + } + .team-profiles-container { + margin-bottom: 1em; + } + @media screen and (min-width: 50em) { + > p { + margin-bottom: 4em; + } + .team-profiles-container { + margin-bottom: 4.5em; + } + .client-container { + margin-bottom: 2em; + } + } +} diff --git a/sass/lib/utils/_flexbox.scss b/sass/lib/utils/_flexbox.scss new file mode 100644 index 0000000..ef839e5 --- /dev/null +++ b/sass/lib/utils/_flexbox.scss @@ -0,0 +1,7 @@ +@mixin flexbox($wrap: null, $direction: null, $justify: null) { + @include display(flex); + @include align-items(center); + @include flex-direction($direction); + @include flex-wrap($wrap); + @include justify-content($justify); +} diff --git a/sass/lib/utils/_icons.scss b/sass/lib/utils/_icons.scss new file mode 100644 index 0000000..e2e90cb --- /dev/null +++ b/sass/lib/utils/_icons.scss @@ -0,0 +1,40 @@ +@font-face { + font-family: 'ico-fonts'; + src:url('/css/fonts/ico-fonts.eot?ghgy45'); + src:url('/css/fonts/ico-fonts.eot?#iefixghgy45') format('embedded-opentype'), + url('/css/fonts/ico-fonts.ttf?ghgy45') format('truetype'), + url('/css/fonts/ico-fonts.woff?ghgy45') format('woff'), + url('/css/fonts/ico-fonts.svg?ghgy45#ico-fonts') format('svg'); + font-weight: normal; + font-style: normal; +} + +$icons: ( + gear: '\e601', + envelope: '\e602', + lab: '\e600', + arrow: '\e610', + google-plus: '\e603', + facebook: '\e604', + twitter: '\e605', + dribbble: '\e606', + linkedin2: '\e607', + menu: '\e60f', + plus: '\e608', + chevron-left: '\e609', + chevron-right: '\e60a', + brush: '\e60b', + phone: '\e60c', + pin: '\e60d' +); + +%font-face { + font-family: 'ico-fonts'; +} + +@each $icon in $icons { + .icon-#{nth($icon, 1)}:before { + content: nth($icon, 2); + @extend %font-face; + } +} diff --git a/sass/main.scss b/sass/main.scss new file mode 100644 index 0000000..929d566 --- /dev/null +++ b/sass/main.scss @@ -0,0 +1,9 @@ +@import "reset"; +@import "../node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets/bourbon"; +@import "color/color"; +@import "config"; +@import "typography"; +@import "lib/utils/flexbox"; +@import "lib/utils/icons"; +@import "components/index"; +@import "layout/index";