diff options
| -rw-r--r-- | css/default.css | 1614 | ||||
| -rw-r--r-- | css/fonts.css | 312 | ||||
| -rw-r--r-- | css/layout.css | 2042 | ||||
| -rw-r--r-- | css/magnific-popup.css | 744 | ||||
| -rw-r--r-- | css/media-queries.css | 764 | ||||
| -rw-r--r-- | footer.php | 84 | ||||
| -rw-r--r-- | inc/sendEmail.php | 147 | ||||
| -rw-r--r-- | index.php | 852 | ||||
| -rw-r--r-- | js/init.js | 376 | ||||
| -rw-r--r-- | js/magnific-popup.js | 4 | ||||
| -rw-r--r-- | js/now.js | 120 | ||||
| -rw-r--r-- | social.html | 74 |
12 files changed, 3567 insertions, 3566 deletions
diff --git a/css/default.css b/css/default.css index c79cda1..3d014d9 100644 --- a/css/default.css +++ b/css/default.css @@ -1,807 +1,807 @@ -/* -===================================================================== -* Ceevee v1.0 Default Stylesheet -* url: styleshout.com -* 03-17-2014 -===================================================================== - -TOC: -a. Webfonts and Icon fonts -b. Reset -c. Default Styles - 1. Basic - 2. Typography - 3. Links - 4. Images - 5. Buttons - 6. Forms -d. Grid -e. Others - 1. Clearing - 2. Misc - -===================================================================== */ - -/* ------------------------------------------------------------------ */ -/* a. Webfonts and Icon fonts - ------------------------------------------------------------------ */ - -@import url("fonts.css"); -@import url("fontello/css/fontello.css"); -@import url("font-awesome/css/font-awesome.min.css"); - -/* ------------------------------------------------------------------ -/* b. Reset - Adapted from: - Normalize.css - https://github.com/necolas/normalize.css/ - HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/ -/* ------------------------------------------------------------------ */ - -html, body, div, span, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -abbr, address, cite, code, -del, dfn, em, img, ins, kbd, q, samp, -small, strong, sub, sup, var, -b, i, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, figcaption, figure, -footer, header, hgroup, menu, nav, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} - -article,aside,details,figcaption,figure, -footer,header,hgroup,menu,nav,section { - display: block; -} - -audio, -canvas, -video { - display: inline-block; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -[hidden] { display: none; } - -code, kbd, pre, samp { - font-family: monospace, serif; - font-size: 1em; -} - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -blockquote, q { quotes: “ “ } - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} - -ins { - background-color: #ff9; - color: #000; - text-decoration: none; -} - -mark { - background-color: #A7F4F6; - color: #555; -} - -del { text-decoration: line-through; } - -abbr[title], dfn[title] { - border-bottom: 1px dotted; - cursor: help; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - - -/* ------------------------------------------------------------------ */ -/* c. Default and Basic Styles - Adapted from: - Skeleton CSS Framework - http://www.getskeleton.com/ - Typeplate Typographic Starter Kit - http://typeplate.com/ -/* ------------------------------------------------------------------ */ - -/* 1. Basic ------------------------------------------------------- */ - -*, -*:before, -*:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -html { - font-size: 62.5%; - -webkit-font-smoothing: antialiased; -} - -body { - background: #fff; - font-family: 'opensans-regular', sans-serif; - font-weight: normal; - font-size: 15px; - line-height: 30px; - color: #838C95; - - -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ - -webkit-text-size-adjust: 100%; -} - -/* 2. Typography - Vertical rhythm with leading derived from 6 ---------------------------------------------------------------------- */ - -h1, h2, h3, h4, h5, h6 { - color: #313131; - font-family: 'opensans-bold', sans-serif; - font-weight: normal; -} -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } -h1 { font-size: 38px; line-height: 42px; margin-bottom: 12px; letter-spacing: -1px; } -h2 { font-size: 28px; line-height: 36px; margin-bottom: 6px; } -h3 { font-size: 22px; line-height: 30px; margin-bottom: 12px; } -h4 { font-size: 20px; line-height: 30px; margin-bottom: 6px; } -h5 { font-size: 18px; line-height: 30px; } -h6 { font-size: 14px; line-height: 30px; } -.subheader { } - -p { margin: 0 0 30px 0; } -p img { margin: 0; } -p.lead { - font: 19px/36px 'opensans-light', sans-serif; - margin-bottom: 18px; -} - -/* for 'em' and 'strong' tags, font-size and line-height should be same with -the body tag due to rendering problems in some browsers */ -em { font: 15px/30px 'opensans-italic', sans-serif; } -strong, b { font: 15px/30px 'opensans-bold', sans-serif; } -small { font-size: 11px; line-height: inherit; } - -/* Blockquotes */ -blockquote { - margin: 30px 0px; - padding-left: 40px; - position: relative; -} -blockquote:before { - content: "\201C"; - opacity: 0.45; - font-size: 80px; - line-height: 0px; - margin: 0; - font-family: arial, sans-serif; - - position: absolute; - top: 30px; - left: 0; -} -blockquote p { - font-family: 'librebaskerville-italic', serif; - padding: 0; - font-size: 18px; - line-height: 36px; -} -blockquote cite { - display: block; - font-size: 12px; - font-style: normal; - line-height: 18px; -} -blockquote cite:before { content: "\2014 \0020"; } -blockquote cite a, -blockquote cite a:visited { color: #8B9798; border: none } - -/* --------------------------------------------------------------------- -/* Pull Quotes Markup -/* - <aside class="pull-quote"> - <blockquote> - <p></p> - </blockquote> - </aside> -/* -/* --------------------------------------------------------------------- */ -.pull-quote { - position: relative; - padding: 18px 30px 18px 0px; -} -.pull-quote:before, -.pull-quote:after { - height: 1em; - opacity: 0.45; - position: absolute; - font-size: 80px; - font-family: Arial, Sans-Serif; -} -.pull-quote:before { - content: "\201C"; - top: 33px; - left: 0; -} -.pull-quote:after { - content: '\201D'; - bottom: -33px; - right: 0; -} -.pull-quote blockquote { - margin: 0; -} -.pull-quote blockquote:before { - content: none; -} - -/* Abbreviations */ -abbr { - font-family: 'opensans-bold', sans-serif; - font-variant: small-caps; - text-transform: lowercase; - letter-spacing: .5px; - color: gray; -} -abbr:hover { cursor: help; } - -/* drop cap */ -.drop-cap:first-letter { - float: left; - margin: 0; - padding: 14px 6px 0 0; - font-size: 84px; - font-family: /* Copperplate */ 'opensans-bold', sans-serif; - line-height: 60px; - text-indent: 0; - background: transparent; - color: inherit; -} - -hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; } - - -/* 3. Links ------------------------------------------------------- */ - -a, a:visited { - text-decoration: none; - outline: 0; - color: #11ABB0; - - -webkit-transition: color .3s ease-in-out; - -moz-transition: color .3s ease-in-out; - -o-transition: color .3s ease-in-out; - transition: color .3s ease-in-out; -} -a:hover, a:focus { color: #313131; } -p a, p a:visited { line-height: inherit; } - - -/* 4. List --------------------------------------------------------- */ - -ul, ol { margin-bottom: 24px; margin-top: 12px; } -ul { list-style: none outside; } -ol { list-style: decimal; } -ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } -ul.square { list-style: square outside; } -ul.circle { list-style: circle outside; } -ul.disc { list-style: disc outside; } -ul ul, ul ol, -ol ol, ol ul { margin: 6px 0 6px 30px; } -ul ul li, ul ol li, -ol ol li, ol ul li { margin-bottom: 6px; } -li { line-height: 18px; margin-bottom: 12px; } -ul.large li { } -li p { } - -/* --------------------------------------------------------------------- -/* Stats Tab Markup - - <ul class="stats-tabs"> - <li><a href="#">[value]<b>[name]</b></a></li> - </ul> - - Extend this object into your markup. -/* -/* --------------------------------------------------------------------- */ -.stats-tabs { - padding: 0; - margin: 24px 0; -} -.stats-tabs li { - display: inline-block; - margin: 0 10px 18px 0; - padding: 0 10px 0 0; - border-right: 1px solid #ccc; -} -.stats-tabs li:last-child { - margin: 0; - padding: 0; - border: none; -} -.stats-tabs li a { - display: inline-block; - font-size: 22px; - font-family: 'opensans-bold', sans-serif; - border: none; - color: #313131; -} -.stats-tabs li a:hover { - color:#11ABB0; -} -.stats-tabs li a b { - display: block; - margin: 6px 0 0 0; - font-size: 13px; - font-family: 'opensans-regular', sans-serif; - color: #8B9798; -} - -/* definition list */ -dl { margin: 12px 0; } -dt { margin: 0; color:#11ABB0; } -dd { margin: 0 0 0 20px; } - -/* Lining Definition Style Markup */ -.lining dt, -.lining dd { - display: inline; - margin: 0; -} -.lining dt + dt:before, -.lining dd + dt:before { - content: "\A"; - white-space: pre; -} -.lining dd + dd:before { - content: ", "; -} -.lining dd:before { - content: ": "; - margin-left: -0.2em; -} - -/* Dictionary Definition Style Markup */ -.dictionary-style dt { - display: inline; - counter-reset: definitions; -} -.dictionary-style dt + dt:before { - content: ", "; - margin-left: -0.2em; -} -.dictionary-style dd { - display: block; - counter-increment: definitions; -} -.dictionary-style dd:before { - content: counter(definitions, decimal) ". "; -} - -/* Pagination */ -.pagination { - margin: 36px auto; - text-align: center; -} -.pagination ul li { - display: inline-block; - margin: 0; - padding: 0; -} -.pagination .page-numbers { - font: 15px/18px 'opensans-bold', sans-serif; - display: inline-block; - padding: 6px 10px; - margin-right: 3px; - margin-bottom: 6px; - color: #6E757C; - background-color: #E6E8EB; - - -webkit-transition: all 200ms ease-in-out; - -moz-transition: all 200ms ease-in-out; - -o-transition: all 200ms ease-in-out; - -ms-transition: all 200ms ease-in-out; - transition: all 200ms ease-in-out; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; -} -.pagination .page-numbers:hover { - background: #838A91; - color: #fff; -} -.pagination .current, -.pagination .current:hover { - background-color: #11ABB0; - color: #fff; -} -.pagination .inactive, -.pagination .inactive:hover { - background-color: #E6E8EB; - color: #A9ADB2; -} -.pagination .prev, .pagination .next {} - -/* 5. Images --------------------------------------------------------- */ - -img { - max-width: 100%; - height: auto; -} -img.pull-right { margin: 12px 0px 0px 18px; } -img.pull-left { margin: 12px 18px 0px 0px; } - -/* 6. Buttons --------------------------------------------------------- */ - -.button, -.button:visited, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - font: 16px/30px 'opensans-bold', sans-serif; - background: #11ABB0; - display: inline-block; - text-decoration: none; - letter-spacing: 0; - color: #fff; - padding: 12px 20px; - margin-bottom: 18px; - border: none; - cursor: pointer; - height: auto; - - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; - -ms-transition: all .2s ease-in-out; - transition: all .2s ease-in-out; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; -} - -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover { - background: #3d4145; - color: #fff; -} - -.button:active, -button:active, -input[type="submit"]:active, -input[type="reset"]:active, -input[type="button"]:active { - background: #3d4145; - color: #fff; -} - -.button.full-width, -button.full-width, -input[type="submit"].full-width, -input[type="reset"].full-width, -input[type="button"].full-width { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - text-align: center; -} - -/* Fix for odd Mozilla border & padding issues */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - - -/* 7. Forms --------------------------------------------------------- */ - -form { margin-bottom: 24px; } -fieldset { margin-bottom: 24px; } - -input[type="text"], -input[type="password"], -input[type="email"], -textarea, -select { - display: block; - padding: 18px 15px; - margin: 0 0 24px 0; - border: 0; - outline: none; - vertical-align: middle; - min-width: 225px; - max-width: 100%; - font-size: 15px; - line-height: 24px; - color: #647373; - background: #D3D9D9; - -} - -/* select { padding: 0; - width: 220px; - } */ - -input[type="text"]:focus, -input[type="password"]:focus, -input[type="email"]:focus, -textarea:focus { - color: #B3B7BC; - background-color: #3d4145; -} - -textarea { min-height: 220px; } - -label, -legend { - font: 16px/24px 'opensans-bold', sans-serif; - margin: 12px 0; - color: #3d4145; - display: block; -} -label span, -legend span { - color: #8B9798; - font: 14px/24px 'opensans-regular', sans-serif; -} - -input[type="checkbox"], -input[type="radio"] { - font-size: 15px; - color: #737373; -} - -input[type="checkbox"] { display: inline; } - -/* ------------------------------------------------------------------ */ -/* d. Grid ---------------------------------------------------------------------- - gutter = 40px. -/* ------------------------------------------------------------------ */ - -/* default ---------------------------------------------------------------- */ -.row { - width: 96%; - max-width: 1020px; - margin: 0 auto; -} -/* fixed width for IE8 */ -.ie .row { width: 1000px ; } - -.narrow .row { max-width: 980px; } - -.row .row { width: auto; max-width: none; margin: 0 -20px; } - -/* row clearing */ -.row:before, -.row:after { - content: " "; - display: table; -} -.row:after { - clear: both; -} - -.column, .columns { - position: relative; - padding: 0 20px; - min-height: 1px; - float: left; -} -.column.centered, .columns.centered { - float: none; - margin: 0 auto; -} - -/* removed gutters */ -.row.collapsed > .column, -.row.collapsed > .columns, -.column.collapsed, .columns.collapsed { padding: 0; } - -[class*="column"] + [class*="column"]:last-child { float: right; } -[class*="column"] + [class*="column"].end { float: right; } - -/* column widths */ -.row .one { width: 8.33333%; } -.row .two { width: 16.66667%; } -.row .three { width: 25%; } -.row .four { width: 33.33333%; } -.row .five { width: 41.66667%; } -.row .six { width: 50%; } -.row .seven { width: 58.33333%; } -.row .eight { width: 66.66667%; } -.row .nine { width: 75%; } -.row .ten { width: 83.33333%; } -.row .eleven { width: 91.66667%; } -.row .twelve { width: 100%; } - -/* Offsets */ -.row .offset-1 { margin-left: 8.33333%; } -.row .offset-2 { margin-left: 16.66667%; } -.row .offset-3 { margin-left: 25%; } -.row .offset-4 { margin-left: 33.33333%; } -.row .offset-5 { margin-left: 41.66667%; } -.row .offset-6 { margin-left: 50%; } -.row .offset-7 { margin-left: 58.33333%; } -.row .offset-8 { margin-left: 66.66667%; } -.row .offset-9 { margin-left: 75%; } -.row .offset-10 { margin-left: 83.33333%; } -.row .offset-11 { margin-left: 91.66667%; } - -/* Push/Pull */ -.row .push-1 { left: 8.33333%; } -.row .pull-1 { right: 8.33333%; } -.row .push-2 { left: 16.66667%; } -.row .pull-2 { right: 16.66667%; } -.row .push-3 { left: 25%; } -.row .pull-3 { right: 25%; } -.row .push-4 { left: 33.33333%; } -.row .pull-4 { right: 33.33333%; } -.row .push-5 { left: 41.66667%; } -.row .pull-5 { right: 41.66667%; } -.row .push-6 { left: 50%; } -.row .pull-6 { right: 50%; } -.row .push-7 { left: 58.33333%; } -.row .pull-7 { right: 58.33333%; } -.row .push-8 { left: 66.66667%; } -.row .pull-8 { right: 66.66667%; } -.row .push-9 { left: 75%; } -.row .pull-9 { right: 75%; } -.row .push-10 { left: 83.33333%; } -.row .pull-10 { right: 83.33333%; } -.row .push-11 { left: 91.66667%; } -.row .pull-11 { right: 91.66667%; } - -/* block grids ---------------------------------------------------------------------- */ -.bgrid-sixths [class*="column"] { width: 16.66667%; } -.bgrid-quarters [class*="column"] { width: 25%; } -.bgrid-thirds [class*="column"] { width: 33.33333%; } -.bgrid-halves [class*="column"] { width: 50%; } - -[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; } - -/* Left clearing for block grid columns - columns that changes width in -different screen sizes. Allows columns with different heights to align -properly. ---------------------------------------------------------------------- */ -.first { clear: left; } /* first column in default screen */ -.s-first { clear: none; } /* first column in smaller screens */ - -/* smaller screens ---------------------------------------------------------------- */ -@media only screen and (max-width: 900px) { - - /* block grids on small screens */ - .s-bgrid-sixths [class*="column"] { width: 16.66667%; } - .s-bgrid-quarters [class*="column"] { width: 25%; } - .s-bgrid-thirds [class*="column"] { width: 33.33333%; } - .s-bgrid-halves [class*="column"] { width: 50%; } - - /* block grids left clearing */ - .first { clear: none; } - .s-first { clear: left; } - -} - -/* mobile wide/smaller tablets ---------------------------------------------------------------- */ -@media only screen and (max-width: 767px) { - - .row { - width: 460px; - margin: 0 auto; - padding: 0; - } - .column, .columns { - width: auto !important; - float: none; - margin-left: 0; - margin-right: 0; - padding: 0 30px; - } - .row .row { width: auto; max-width: none; margin: 0 -30px; } - - [class*="column"] + [class*="column"]:last-child { float: none; } - [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; } - - /* Offsets */ - .row .offset-1 { margin-left: 0%; } - .row .offset-2 { margin-left: 0%; } - .row .offset-3 { margin-left: 0%; } - .row .offset-4 { margin-left: 0%; } - .row .offset-5 { margin-left: 0%; } - .row .offset-6 { margin-left: 0%; } - .row .offset-7 { margin-left: 0%; } - .row .offset-8 { margin-left: 0%; } - .row .offset-9 { margin-left: 0%; } - .row .offset-10 { margin-left: 0%; } - .row .offset-11 { margin-left: 0%; } -} - -/* mobile narrow ---------------------------------------------------------------- */ -@media only screen and (max-width: 460px) { - - .row { width: auto; } - -} - -/* larger screens ---------------------------------------------------------------- */ -@media screen and (min-width: 1200px) { - - .wide .row { max-width: 1180px; } - -} - -/* ------------------------------------------------------------------ */ -/* e. Others -/* ------------------------------------------------------------------ */ - -/* 1. Clearing - (http://nicolasgallagher.com/micro-clearfix-hack/ ---------------------------------------------------------------------- */ - -.cf:before, -.cf:after { - content: " "; - display: table; -} -.cf:after { - clear: both; -} - -/* 2. Misc -------------------------------------------------------- */ - -.remove-bottom { margin-bottom: 0 !important; } -.half-bottom { margin-bottom: 12px !important; } -.add-bottom { margin-bottom: 24px !important; } -.no-border { border: none; } - -.text-center { text-align: center !important; } -.text-left { text-align: left !important; } -.text-right { text-align: right !important; } -.pull-left { float: left !important; } -.pull-right { float: right !important; } -.align-center { - margin-left: auto !important; - margin-right: auto !important; - text-align: center !important; -} - - - - +/* +===================================================================== +* Ceevee v1.0 Default Stylesheet +* url: styleshout.com +* 03-17-2014 +===================================================================== + +TOC: +a. Webfonts and Icon fonts +b. Reset +c. Default Styles + 1. Basic + 2. Typography + 3. Links + 4. Images + 5. Buttons + 6. Forms +d. Grid +e. Others + 1. Clearing + 2. Misc + +===================================================================== */ + +/* ------------------------------------------------------------------ */ +/* a. Webfonts and Icon fonts + ------------------------------------------------------------------ */ + +@import url("fonts.css"); +@import url("fontello/css/fontello.css"); +@import url("font-awesome/css/font-awesome.min.css"); + +/* ------------------------------------------------------------------ +/* b. Reset + Adapted from: + Normalize.css - https://github.com/necolas/normalize.css/ + HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/ +/* ------------------------------------------------------------------ */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, +del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, +b, i, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +article,aside,details,figcaption,figure, +footer,header,hgroup,menu,nav,section { + display: block; +} + +audio, +canvas, +video { + display: inline-block; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +[hidden] { display: none; } + +code, kbd, pre, samp { + font-family: monospace, serif; + font-size: 1em; +} + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +blockquote, q { quotes: “ “ } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +ins { + background-color: #ff9; + color: #000; + text-decoration: none; +} + +mark { + background-color: #A7F4F6; + color: #555; +} + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { + border-bottom: 1px dotted; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + + +/* ------------------------------------------------------------------ */ +/* c. Default and Basic Styles + Adapted from: + Skeleton CSS Framework - http://www.getskeleton.com/ + Typeplate Typographic Starter Kit - http://typeplate.com/ +/* ------------------------------------------------------------------ */ + +/* 1. Basic ------------------------------------------------------- */ + +*, +*:before, +*:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + font-size: 62.5%; + -webkit-font-smoothing: antialiased; +} + +body { + background: #fff; + font-family: 'opensans-regular', sans-serif; + font-weight: normal; + font-size: 15px; + line-height: 30px; + color: #838C95; + + -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ + -webkit-text-size-adjust: 100%; +} + +/* 2. Typography + Vertical rhythm with leading derived from 6 +--------------------------------------------------------------------- */ + +h1, h2, h3, h4, h5, h6 { + color: #313131; + font-family: 'opensans-bold', sans-serif; + font-weight: normal; +} +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } +h1 { font-size: 38px; line-height: 42px; margin-bottom: 12px; letter-spacing: -1px; } +h2 { font-size: 28px; line-height: 36px; margin-bottom: 6px; } +h3 { font-size: 22px; line-height: 30px; margin-bottom: 12px; } +h4 { font-size: 20px; line-height: 30px; margin-bottom: 6px; } +h5 { font-size: 18px; line-height: 30px; } +h6 { font-size: 14px; line-height: 30px; } +.subheader { } + +p { margin: 0 0 30px 0; } +p img { margin: 0; } +p.lead { + font: 19px/36px 'opensans-light', sans-serif; + margin-bottom: 18px; +} + +/* for 'em' and 'strong' tags, font-size and line-height should be same with +the body tag due to rendering problems in some browsers */ +em { font: 15px/30px 'opensans-italic', sans-serif; } +strong, b { font: 15px/30px 'opensans-bold', sans-serif; } +small { font-size: 11px; line-height: inherit; } + +/* Blockquotes */ +blockquote { + margin: 30px 0px; + padding-left: 40px; + position: relative; +} +blockquote:before { + content: "\201C"; + opacity: 0.45; + font-size: 80px; + line-height: 0px; + margin: 0; + font-family: arial, sans-serif; + + position: absolute; + top: 30px; + left: 0; +} +blockquote p { + font-family: 'librebaskerville-italic', serif; + padding: 0; + font-size: 18px; + line-height: 36px; +} +blockquote cite { + display: block; + font-size: 12px; + font-style: normal; + line-height: 18px; +} +blockquote cite:before { content: "\2014 \0020"; } +blockquote cite a, +blockquote cite a:visited { color: #8B9798; border: none } + +/* --------------------------------------------------------------------- +/* Pull Quotes Markup +/* + <aside class="pull-quote"> + <blockquote> + <p></p> + </blockquote> + </aside> +/* +/* --------------------------------------------------------------------- */ +.pull-quote { + position: relative; + padding: 18px 30px 18px 0px; +} +.pull-quote:before, +.pull-quote:after { + height: 1em; + opacity: 0.45; + position: absolute; + font-size: 80px; + font-family: Arial, Sans-Serif; +} +.pull-quote:before { + content: "\201C"; + top: 33px; + left: 0; +} +.pull-quote:after { + content: '\201D'; + bottom: -33px; + right: 0; +} +.pull-quote blockquote { + margin: 0; +} +.pull-quote blockquote:before { + content: none; +} + +/* Abbreviations */ +abbr { + font-family: 'opensans-bold', sans-serif; + font-variant: small-caps; + text-transform: lowercase; + letter-spacing: .5px; + color: gray; +} +abbr:hover { cursor: help; } + +/* drop cap */ +.drop-cap:first-letter { + float: left; + margin: 0; + padding: 14px 6px 0 0; + font-size: 84px; + font-family: /* Copperplate */ 'opensans-bold', sans-serif; + line-height: 60px; + text-indent: 0; + background: transparent; + color: inherit; +} + +hr { border: solid #E3E3E3; border-width: 1px 0 0; clear: both; margin: 11px 0 30px; height: 0; } + + +/* 3. Links ------------------------------------------------------- */ + +a, a:visited { + text-decoration: none; + outline: 0; + color: #11ABB0; + + -webkit-transition: color .3s ease-in-out; + -moz-transition: color .3s ease-in-out; + -o-transition: color .3s ease-in-out; + transition: color .3s ease-in-out; +} +a:hover, a:focus { color: #313131; } +p a, p a:visited { line-height: inherit; } + + +/* 4. List --------------------------------------------------------- */ + +ul, ol { margin-bottom: 24px; margin-top: 12px; } +ul { list-style: none outside; } +ol { list-style: decimal; } +ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } +ul.square { list-style: square outside; } +ul.circle { list-style: circle outside; } +ul.disc { list-style: disc outside; } +ul ul, ul ol, +ol ol, ol ul { margin: 6px 0 6px 30px; } +ul ul li, ul ol li, +ol ol li, ol ul li { margin-bottom: 6px; } +li { line-height: 18px; margin-bottom: 12px; } +ul.large li { } +li p { } + +/* --------------------------------------------------------------------- +/* Stats Tab Markup + + <ul class="stats-tabs"> + <li><a href="#">[value]<b>[name]</b></a></li> + </ul> + + Extend this object into your markup. +/* +/* --------------------------------------------------------------------- */ +.stats-tabs { + padding: 0; + margin: 24px 0; +} +.stats-tabs li { + display: inline-block; + margin: 0 10px 18px 0; + padding: 0 10px 0 0; + border-right: 1px solid #ccc; +} +.stats-tabs li:last-child { + margin: 0; + padding: 0; + border: none; +} +.stats-tabs li a { + display: inline-block; + font-size: 22px; + font-family: 'opensans-bold', sans-serif; + border: none; + color: #313131; +} +.stats-tabs li a:hover { + color:#11ABB0; +} +.stats-tabs li a b { + display: block; + margin: 6px 0 0 0; + font-size: 13px; + font-family: 'opensans-regular', sans-serif; + color: #8B9798; +} + +/* definition list */ +dl { margin: 12px 0; } +dt { margin: 0; color:#11ABB0; } +dd { margin: 0 0 0 20px; } + +/* Lining Definition Style Markup */ +.lining dt, +.lining dd { + display: inline; + margin: 0; +} +.lining dt + dt:before, +.lining dd + dt:before { + content: "\A"; + white-space: pre; +} +.lining dd + dd:before { + content: ", "; +} +.lining dd:before { + content: ": "; + margin-left: -0.2em; +} + +/* Dictionary Definition Style Markup */ +.dictionary-style dt { + display: inline; + counter-reset: definitions; +} +.dictionary-style dt + dt:before { + content: ", "; + margin-left: -0.2em; +} +.dictionary-style dd { + display: block; + counter-increment: definitions; +} +.dictionary-style dd:before { + content: counter(definitions, decimal) ". "; +} + +/* Pagination */ +.pagination { + margin: 36px auto; + text-align: center; +} +.pagination ul li { + display: inline-block; + margin: 0; + padding: 0; +} +.pagination .page-numbers { + font: 15px/18px 'opensans-bold', sans-serif; + display: inline-block; + padding: 6px 10px; + margin-right: 3px; + margin-bottom: 6px; + color: #6E757C; + background-color: #E6E8EB; + + -webkit-transition: all 200ms ease-in-out; + -moz-transition: all 200ms ease-in-out; + -o-transition: all 200ms ease-in-out; + -ms-transition: all 200ms ease-in-out; + transition: all 200ms ease-in-out; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; +} +.pagination .page-numbers:hover { + background: #838A91; + color: #fff; +} +.pagination .current, +.pagination .current:hover { + background-color: #11ABB0; + color: #fff; +} +.pagination .inactive, +.pagination .inactive:hover { + background-color: #E6E8EB; + color: #A9ADB2; +} +.pagination .prev, .pagination .next {} + +/* 5. Images --------------------------------------------------------- */ + +img { + max-width: 100%; + height: auto; +} +img.pull-right { margin: 12px 0px 0px 18px; } +img.pull-left { margin: 12px 18px 0px 0px; } + +/* 6. Buttons --------------------------------------------------------- */ + +.button, +.button:visited, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + font: 16px/30px 'opensans-bold', sans-serif; + background: #11ABB0; + display: inline-block; + text-decoration: none; + letter-spacing: 0; + color: #fff; + padding: 12px 20px; + margin-bottom: 18px; + border: none; + cursor: pointer; + height: auto; + + -webkit-transition: all .2s ease-in-out; + -moz-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; + -ms-transition: all .2s ease-in-out; + transition: all .2s ease-in-out; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; +} + +.button:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover { + background: #3d4145; + color: #fff; +} + +.button:active, +button:active, +input[type="submit"]:active, +input[type="reset"]:active, +input[type="button"]:active { + background: #3d4145; + color: #fff; +} + +.button.full-width, +button.full-width, +input[type="submit"].full-width, +input[type="reset"].full-width, +input[type="button"].full-width { + width: 100%; + padding-left: 0 !important; + padding-right: 0 !important; + text-align: center; +} + +/* Fix for odd Mozilla border & padding issues */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + + +/* 7. Forms --------------------------------------------------------- */ + +form { margin-bottom: 24px; } +fieldset { margin-bottom: 24px; } + +input[type="text"], +input[type="password"], +input[type="email"], +textarea, +select { + display: block; + padding: 18px 15px; + margin: 0 0 24px 0; + border: 0; + outline: none; + vertical-align: middle; + min-width: 225px; + max-width: 100%; + font-size: 15px; + line-height: 24px; + color: #647373; + background: #D3D9D9; + +} + +/* select { padding: 0; + width: 220px; + } */ + +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus, +textarea:focus { + color: #B3B7BC; + background-color: #3d4145; +} + +textarea { min-height: 220px; } + +label, +legend { + font: 16px/24px 'opensans-bold', sans-serif; + margin: 12px 0; + color: #3d4145; + display: block; +} +label span, +legend span { + color: #8B9798; + font: 14px/24px 'opensans-regular', sans-serif; +} + +input[type="checkbox"], +input[type="radio"] { + font-size: 15px; + color: #737373; +} + +input[type="checkbox"] { display: inline; } + +/* ------------------------------------------------------------------ */ +/* d. Grid +--------------------------------------------------------------------- + gutter = 40px. +/* ------------------------------------------------------------------ */ + +/* default +--------------------------------------------------------------- */ +.row { + width: 96%; + max-width: 1020px; + margin: 0 auto; +} +/* fixed width for IE8 */ +.ie .row { width: 1000px ; } + +.narrow .row { max-width: 980px; } + +.row .row { width: auto; max-width: none; margin: 0 -20px; } + +/* row clearing */ +.row:before, +.row:after { + content: " "; + display: table; +} +.row:after { + clear: both; +} + +.column, .columns { + position: relative; + padding: 0 20px; + min-height: 1px; + float: left; +} +.column.centered, .columns.centered { + float: none; + margin: 0 auto; +} + +/* removed gutters */ +.row.collapsed > .column, +.row.collapsed > .columns, +.column.collapsed, .columns.collapsed { padding: 0; } + +[class*="column"] + [class*="column"]:last-child { float: right; } +[class*="column"] + [class*="column"].end { float: right; } + +/* column widths */ +.row .one { width: 8.33333%; } +.row .two { width: 16.66667%; } +.row .three { width: 25%; } +.row .four { width: 33.33333%; } +.row .five { width: 41.66667%; } +.row .six { width: 50%; } +.row .seven { width: 58.33333%; } +.row .eight { width: 66.66667%; } +.row .nine { width: 75%; } +.row .ten { width: 83.33333%; } +.row .eleven { width: 91.66667%; } +.row .twelve { width: 100%; } + +/* Offsets */ +.row .offset-1 { margin-left: 8.33333%; } +.row .offset-2 { margin-left: 16.66667%; } +.row .offset-3 { margin-left: 25%; } +.row .offset-4 { margin-left: 33.33333%; } +.row .offset-5 { margin-left: 41.66667%; } +.row .offset-6 { margin-left: 50%; } +.row .offset-7 { margin-left: 58.33333%; } +.row .offset-8 { margin-left: 66.66667%; } +.row .offset-9 { margin-left: 75%; } +.row .offset-10 { margin-left: 83.33333%; } +.row .offset-11 { margin-left: 91.66667%; } + +/* Push/Pull */ +.row .push-1 { left: 8.33333%; } +.row .pull-1 { right: 8.33333%; } +.row .push-2 { left: 16.66667%; } +.row .pull-2 { right: 16.66667%; } +.row .push-3 { left: 25%; } +.row .pull-3 { right: 25%; } +.row .push-4 { left: 33.33333%; } +.row .pull-4 { right: 33.33333%; } +.row .push-5 { left: 41.66667%; } +.row .pull-5 { right: 41.66667%; } +.row .push-6 { left: 50%; } +.row .pull-6 { right: 50%; } +.row .push-7 { left: 58.33333%; } +.row .pull-7 { right: 58.33333%; } +.row .push-8 { left: 66.66667%; } +.row .pull-8 { right: 66.66667%; } +.row .push-9 { left: 75%; } +.row .pull-9 { right: 75%; } +.row .push-10 { left: 83.33333%; } +.row .pull-10 { right: 83.33333%; } +.row .push-11 { left: 91.66667%; } +.row .pull-11 { right: 91.66667%; } + +/* block grids +--------------------------------------------------------------------- */ +.bgrid-sixths [class*="column"] { width: 16.66667%; } +.bgrid-quarters [class*="column"] { width: 25%; } +.bgrid-thirds [class*="column"] { width: 33.33333%; } +.bgrid-halves [class*="column"] { width: 50%; } + +[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; } + +/* Left clearing for block grid columns - columns that changes width in +different screen sizes. Allows columns with different heights to align +properly. +--------------------------------------------------------------------- */ +.first { clear: left; } /* first column in default screen */ +.s-first { clear: none; } /* first column in smaller screens */ + +/* smaller screens +--------------------------------------------------------------- */ +@media only screen and (max-width: 900px) { + + /* block grids on small screens */ + .s-bgrid-sixths [class*="column"] { width: 16.66667%; } + .s-bgrid-quarters [class*="column"] { width: 25%; } + .s-bgrid-thirds [class*="column"] { width: 33.33333%; } + .s-bgrid-halves [class*="column"] { width: 50%; } + + /* block grids left clearing */ + .first { clear: none; } + .s-first { clear: left; } + +} + +/* mobile wide/smaller tablets +--------------------------------------------------------------- */ +@media only screen and (max-width: 767px) { + + .row { + width: 460px; + margin: 0 auto; + padding: 0; + } + .column, .columns { + width: auto !important; + float: none; + margin-left: 0; + margin-right: 0; + padding: 0 30px; + } + .row .row { width: auto; max-width: none; margin: 0 -30px; } + + [class*="column"] + [class*="column"]:last-child { float: none; } + [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; } + + /* Offsets */ + .row .offset-1 { margin-left: 0%; } + .row .offset-2 { margin-left: 0%; } + .row .offset-3 { margin-left: 0%; } + .row .offset-4 { margin-left: 0%; } + .row .offset-5 { margin-left: 0%; } + .row .offset-6 { margin-left: 0%; } + .row .offset-7 { margin-left: 0%; } + .row .offset-8 { margin-left: 0%; } + .row .offset-9 { margin-left: 0%; } + .row .offset-10 { margin-left: 0%; } + .row .offset-11 { margin-left: 0%; } +} + +/* mobile narrow +--------------------------------------------------------------- */ +@media only screen and (max-width: 460px) { + + .row { width: auto; } + +} + +/* larger screens +--------------------------------------------------------------- */ +@media screen and (min-width: 1200px) { + + .wide .row { max-width: 1180px; } + +} + +/* ------------------------------------------------------------------ */ +/* e. Others +/* ------------------------------------------------------------------ */ + +/* 1. Clearing + (http://nicolasgallagher.com/micro-clearfix-hack/ +--------------------------------------------------------------------- */ + +.cf:before, +.cf:after { + content: " "; + display: table; +} +.cf:after { + clear: both; +} + +/* 2. Misc -------------------------------------------------------- */ + +.remove-bottom { margin-bottom: 0 !important; } +.half-bottom { margin-bottom: 12px !important; } +.add-bottom { margin-bottom: 24px !important; } +.no-border { border: none; } + +.text-center { text-align: center !important; } +.text-left { text-align: left !important; } +.text-right { text-align: right !important; } +.pull-left { float: left !important; } +.pull-right { float: right !important; } +.align-center { + margin-left: auto !important; + margin-right: auto !important; + text-align: center !important; +} + + + + diff --git a/css/fonts.css b/css/fonts.css index 874c4f0..e917d84 100644 --- a/css/fonts.css +++ b/css/fonts.css @@ -1,157 +1,157 @@ -/* Generated by Font Squirrel (http://www.fontsquirrel.com) */ - -/* - * Open Sans -================================================================================ */ -@font-face { - font-family: 'opensans-regular'; - src: url('fonts/opensans/OpenSans-Regular-webfont.eot'); - src: url('fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-italic'; - src: url('fonts/opensans/OpenSans-Italic-webfont.eot'); - src: url('fonts/opensans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Italic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Italic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-light'; - src: url('fonts/opensans/OpenSans-Light-webfont.eot'); - src: url('fonts/opensans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Light-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-light-italic'; - src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot'); - src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-LightItalic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-LightItalic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-semibold'; - src: url('fonts/opensans/OpenSans-Semibold-webfont.eot'); - src: url('fonts/opensans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Semibold-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-semibold-italic'; - src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot'); - src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-bold'; - src: url('fonts/opensans/OpenSans-Bold-webfont.eot'); - src: url('fonts/opensans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-Bold-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-bold-italic'; - src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot'); - src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-BoldItalic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-BoldItalic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-extrabold'; - src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot'); - src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-ExtraBold-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-ExtraBold-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'opensans-extrabold-italic'; - src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot'); - src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), - url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), - url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg'); - font-weight: normal; - font-style: normal; -} - -/* - * Libre Baskerville -================================================================================ */ -@font-face { - font-family: 'librebaskerville-bold'; - src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot'); - src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/librebaskerville/librebaskerville-bold-webfont.woff') format('woff'), - url('fonts/librebaskerville/librebaskerville-bold-webfont.ttf') format('truetype'), - url('fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'librebaskerville-italic'; - src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot'); - src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/librebaskerville/librebaskerville-italic-webfont.woff') format('woff'), - url('fonts/librebaskerville/librebaskerville-italic-webfont.ttf') format('truetype'), - url('fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg'); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: 'librebaskerville-regular'; - src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot'); - src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('fonts/librebaskerville/librebaskerville-regular-webfont.woff') format('woff'), - url('fonts/librebaskerville/librebaskerville-regular-webfont.ttf') format('truetype'), - url('fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg'); - font-weight: normal; - font-style: normal; -} - - -/* - * FIXED for Font-Face Chrome Rendering -================================================================================ */ -@media screen and (-webkit-min-device-pixel-ratio:0) { - - @font-face { - font-family: 'opensans-semibold'; - src: url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); - } - - @font-face { - font-family: 'opensans-bold'; - src: url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); - } - +/* Generated by Font Squirrel (http://www.fontsquirrel.com) */ + +/* + * Open Sans +================================================================================ */ +@font-face { + font-family: 'opensans-regular'; + src: url('fonts/opensans/OpenSans-Regular-webfont.eot'); + src: url('fonts/opensans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Regular-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Regular-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-italic'; + src: url('fonts/opensans/OpenSans-Italic-webfont.eot'); + src: url('fonts/opensans/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Italic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Italic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-light'; + src: url('fonts/opensans/OpenSans-Light-webfont.eot'); + src: url('fonts/opensans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Light-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Light-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-light-italic'; + src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot'); + src: url('fonts/opensans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-LightItalic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-LightItalic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-semibold'; + src: url('fonts/opensans/OpenSans-Semibold-webfont.eot'); + src: url('fonts/opensans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Semibold-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Semibold-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-semibold-italic'; + src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot'); + src: url('fonts/opensans/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-SemiboldItalic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-bold'; + src: url('fonts/opensans/OpenSans-Bold-webfont.eot'); + src: url('fonts/opensans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-Bold-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-Bold-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-bold-italic'; + src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot'); + src: url('fonts/opensans/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-BoldItalic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-BoldItalic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-extrabold'; + src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot'); + src: url('fonts/opensans/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-ExtraBold-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-ExtraBold-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'opensans-extrabold-italic'; + src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot'); + src: url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), + url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'), + url('fonts/opensans/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg'); + font-weight: normal; + font-style: normal; +} + +/* + * Libre Baskerville +================================================================================ */ +@font-face { + font-family: 'librebaskerville-bold'; + src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot'); + src: url('fonts/librebaskerville/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/librebaskerville/librebaskerville-bold-webfont.woff') format('woff'), + url('fonts/librebaskerville/librebaskerville-bold-webfont.ttf') format('truetype'), + url('fonts/librebaskerville/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'librebaskerville-italic'; + src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot'); + src: url('fonts/librebaskerville/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/librebaskerville/librebaskerville-italic-webfont.woff') format('woff'), + url('fonts/librebaskerville/librebaskerville-italic-webfont.ttf') format('truetype'), + url('fonts/librebaskerville/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'librebaskerville-regular'; + src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot'); + src: url('fonts/librebaskerville/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/librebaskerville/librebaskerville-regular-webfont.woff') format('woff'), + url('fonts/librebaskerville/librebaskerville-regular-webfont.ttf') format('truetype'), + url('fonts/librebaskerville/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg'); + font-weight: normal; + font-style: normal; +} + + +/* + * FIXED for Font-Face Chrome Rendering +================================================================================ */ +@media screen and (-webkit-min-device-pixel-ratio:0) { + + @font-face { + font-family: 'opensans-semibold'; + src: url('fonts/opensans/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg'); + } + + @font-face { + font-family: 'opensans-bold'; + src: url('fonts/opensans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); + } + } \ No newline at end of file diff --git a/css/layout.css b/css/layout.css index c6f5308..e51546a 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,1021 +1,1021 @@ -/* -===================================================================== -* Ceevee v1.0 Layout Stylesheet -* url: styleshout.com -* 03-18-2014 -===================================================================== - - TOC: - a. General Styles - b. Header Styles - c. About Section - d. Resume Section - e. Portfolio Section - f. Call To Action Section - g. Testimonials Section - h. Contact Section - i. Footer - -===================================================================== */ - -/* ------------------------------------------------------------------ */ -/* a. General Styles -/* ------------------------------------------------------------------ */ - -body { background: #0f0f0f; } - -/* ------------------------------------------------------------------ */ -/* b. Header Styles -/* ------------------------------------------------------------------ */ - -header { - position: relative; - height: 800px; - min-height: 500px; - width: 100%; - background: #161415 url(../images/header-background.jpg) no-repeat top center; - background-size: cover !important; - -webkit-background-size: cover !important; - text-align: center; - overflow: hidden; -} - -/* vertically center banner section */ -header:before { - content: ''; - display: inline-block; - vertical-align: middle; - height: 100%; -} -header .banner { - display: inline-block; - vertical-align: middle; - margin: 0 auto; - width: 85%; - padding-bottom: 30px;s - text-align: center; -} - -header .banner-text { width: 100%; } -header .banner-text h1 { - font: 90px/1.1em 'opensans-bold', sans-serif; - color: #fff; - letter-spacing: -2px; - margin: 0 auto 18px auto; - text-shadow: 0px 1px 3px rgba(0, 0, 0, .8); -} -header .banner-text h3 { - font: 18px/1.9em 'librebaskerville-regular', serif; - color: #111111; - margin: 0 auto; - width: 70%; - text-shadow: 0px 1px 2px rgba(0, 0, 0, .5); -} -header .banner-text h3 span, -header .banner-text h3 a { - color: #fff; -} -header .banner-text hr { - width: 60%; - margin: 18px auto 24px auto; - border-color: #2F2D2E; - border-color: rgba(150, 150, 150, .1); -} - -/* header social links */ -header .social { - margin: 24px 0; - padding: 0; - font-size: 30px; - text-shadow: 0px 1px 2px rgba(0, 0, 0, .8); -} -header .social li { - display: inline-block; - margin: 0 15px; - padding: 0; -} -header .social li a { color: #fff; } -header .social li a:hover { color: #11ABB0; } - -/* scrolldown link */ -header .scrolldown a { - position: absolute; - bottom: 30px; - left: 50%; - margin-left: -29px; - color: #fff; - display: block; - height: 42px; - width: 42px; - font-size: 42px; - line-height: 42px; - color: #fff; - border-radius: 100%; - - -webkit-transition: all .3s ease-in-out; - -moz-transition: all .3s ease-in-out; - -o-transition: all .3s ease-in-out; - transition: all .3s ease-in-out; -} -header .scrolldown a:hover { color: #11ABB0; } - -/* primary navigation ---------------------------------------------------------------------- */ -#nav-wrap ul, #nav-wrap li, #nav-wrap a { - margin: 0; - padding: 0; - border: none; - outline: none; -} - -/* nav-wrap */ -#nav-wrap { - font: 12px 'opensans-bold', sans-serif; - width: 100%; - text-transform: uppercase; - letter-spacing: 2.5px; - margin: 0 auto; - z-index: 100; - position: fixed; - left: 0; - top: 0; -} -.opaque { background-color: #333; } - -/* hide toggle button */ -#nav-wrap > a.mobile-btn { display: none; } - -ul#nav { - min-height: 48px; - width: auto; - - /* center align the menu */ - text-align: center; -} -ul#nav li { - position: relative; - list-style: none; - height: 48px; - display: inline-block; -} - -/* Links */ -ul#nav li a { - -/* 8px padding top + 8px padding bottom + 32px line-height = 48px */ - - display: inline-block; - padding: 8px 13px; - line-height: 32px; - text-decoration: none; - text-align: left; - color: #fff; - - -webkit-transition: color .2s ease-in-out; - -moz-transition: color .2s ease-in-out; - -o-transition: color .2s ease-in-out; - -ms-transition: color .2s ease-in-out; - transition: color .2s ease-in-out; -} - -ul#nav li a:active { background-color: transparent !important; } -ul#nav li.current a { color: #F06000; } - - -/* ------------------------------------------------------------------ */ -/* c. About Section -/* ------------------------------------------------------------------ */ - -#about { - background: #2B2B2B; - padding-top: 96px; - padding-bottom: 66px; - overflow: hidden; -} - -#about a, #about a:visited { color: #fff; } -#about a:hover, #about a:focus { color: #11ABB0; } - -#about h2 { - font: 22px/30px 'opensans-bold', sans-serif; - color: #fff; - margin-bottom: 12px; -} -#about p { - line-height: 30px; - color: #7A7A7A; -} -#about .profile-pic { - position: relative; - width: 120px; - height: 120px; - border-radius: 100%; -} -#about .contact-details { width: 41.66667%; } -#about .download { - width: 58.33333%; - padding-top: 6px; -} -#about .main-col { padding-right: 5%; } -#about .download .button { - margin-top: 6px; - background: #444; -} -#about .download .button:hover { - background: #fff; - color: #2B2B2B; -} -#about .download .button i { - margin-right: 15px; - font-size: 20px; -} - - -/* ------------------------------------------------------------------ */ -/* d. Resume Section -/* ------------------------------------------------------------------ */ - -#resume { - background: #fff; - padding-top: 90px; - padding-bottom: 72px; - overflow: hidden; -} - -#resume a, #resume a:visited { color: #11ABB0; } -#resume a:hover, #resume a:focus { color: #313131; } - -#resume h1 { - font: 18px/24px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 1px; -} -#resume h1 span { - border-bottom: 3px solid #11ABB0; - padding-bottom: 6px; -} -#resume h3 { - font: 25px/30px 'opensans-bold', sans-serif; -} - -#resume .header-col { padding-top: 9px; } -#resume .main-col { padding-right: 10%; } - -.education, .work { - margin-bottom: 48px; - padding-bottom: 24px; - border-bottom: 1px solid #E8E8E8; -} -#resume .info { - font: 16px/24px 'librebaskerville-italic', serif; - color: #6E7881; - margin-bottom: 18px; - margin-top: 9px; -} -#resume .info span { - margin-right: 5px; - margin-left: 5px; -} -#resume .date { - font: 15px/24px 'opensans-regular', sans-serif; - margin-top: 6px; -} - -/*----------------------------------------------*/ -/* Skill Bars -/*----------------------------------------------*/ - -.bars { - width: 95%; - float: left; - padding: 0; - text-align: left; -} -.bars .skills { - margin-top: 36px; - list-style: none; -} -.bars li { - position: relative; - margin-bottom: 60px; - background: #ccc; - height: 42px; - border-radius: 3px; -} -.bars li em { - font: 15px 'opensans-bold', sans-serif; - color: #313131; - text-transform: uppercase; - letter-spacing: 2px; - font-weight: normal; - position: relative; - top: -36px; -} -.bar-expand { - position: absolute; - left: 0; - top: 0; - - margin: 0; - padding-right: 24px; - background: #313131; - display: inline-block; - height: 42px; - line-height: 42px; - border-radius: 3px 0 0 3px; -} - -.php { - width: 90%; - -moz-animation: photoshop 2s ease; - -webkit-animation: photoshop 2s ease; -} -.sql { - width: 70%; - -moz-animation: illustrator 2s ease; - -webkit-animation: illustrator 2s ease; -} -.python { - width: 60%; - -moz-animation: wordpress 2s ease; - -webkit-animation: wordpress 2s ease; -} -.cpp { - width: 80%; - -moz-animation: css 2s ease; - -webkit-animation: css 2s ease; -} -.jquery { - width: 75%; - -moz-animation: jquery 2s ease; - -webkit-animation: jquery 2s ease; -} -.unix-admin { - width: 80%; - -moz-animation: html5 2s ease; - -webkit-animation: html5 2s ease; -} -.git { - width: 85%; - -moz-animation: html5 2s ease; - -webkit-animation: html5 2s ease; -} -.unit-testing { - width: 50%; - -moz-animation: html5 2s ease; - -webkit-animation: html5 2s ease; -} -.bootstrap { - width: 55%; - -moz-animation: html5 2s ease; - -webkit-animation: html5 2s ease; -} - -@-moz-keyframes photoshop { - 0% { width: 0px; } - 100% { width: 60%; } -} -@-moz-keyframes illustrator { - 0% { width: 0px; } - 100% { width: 55%; } -} -@-moz-keyframes wordpress { - 0% { width: 0px; } - 100% { width: 50%; } -} -@-moz-keyframes css { - 0% { width: 0px; } - 100% { width: 90%; } -} -@-moz-keyframes html5 { - 0% { width: 0px; } - 100% { width: 80%; } -} -@-moz-keyframes jquery { - 0% { width: 0px; } - 100% { width: 50%; } -} - -@-webkit-keyframes photoshop { - 0% { width: 0px; } - 100% { width: 60%; } -} -@-webkit-keyframes illustrator { - 0% { width: 0px; } - 100% { width: 55%; } -} -@-webkit-keyframes wordpress { - 0% { width: 0px; } - 100% { width: 50%; } -} -@-webkit-keyframes css { - 0% { width: 0px; } - 100% { width: 90%; } -} -@-webkit-keyframes html5 { - 0% { width: 0px; } - 100% { width: 80%; } -} -@-webkit-keyframes jquery { - 0% { width: 0px; } - 100% { width: 50%; } -} - -/* ------------------------------------------------------------------ */ -/* e. Portfolio Section -/* ------------------------------------------------------------------ */ - -#portfolio { - background: #ebeeee; - padding-top: 90px; - padding-bottom: 60px; -} -#portfolio h1 { - font: 15px/24px 'opensans-semibold', sans-serif; - text-transform: uppercase; - letter-spacing: 1px; - text-align: center; - margin-bottom: 48px; - color: #95A3A3; -} - -/* Portfolio Content */ -#portfolio-wrapper .columns { margin-bottom: 36px; } -.portfolio-item .item-wrap { - background: #fff; - overflow: hidden; - position: relative; - - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} -.portfolio-item .item-wrap a { - display: block; - cursor: pointer; -} - -/* overlay */ -.portfolio-item .item-wrap .overlay { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - - opacity: 0; - -moz-opacity: 0; - filter:alpha(opacity=0); - - -webkit-transition: opacity 0.3s ease-in-out; - -moz-transition: opacity 0.3s ease-in-out; - -o-transition: opacity 0.3s ease-in-out; - transition: opacity 0.3s ease-in-out; - - background: url(../images/overlay-bg.png) repeat; -} -.portfolio-item .item-wrap .link-icon { - display: block; - color: #fff; - height: 30px; - width: 30px; - font-size: 18px; - line-height: 30px; - text-align: center; - - opacity: 0; - -moz-opacity: 0; - filter:alpha(opacity=0); - - -webkit-transition: opacity 0.3s ease-in-out; - -moz-transition: opacity 0.3s ease-in-out; - -o-transition: opacity 0.3s ease-in-out; - transition: opacity 0.3s ease-in-out; - - position: absolute; - top: 50%; - left: 50%; - margin-left: -15px; - margin-top: -15px; -} -.portfolio-item .item-wrap img { - vertical-align: bottom; -} -.portfolio-item .portfolio-item-meta { padding: 18px } -.portfolio-item .portfolio-item-meta h5 { - font: 14px/21px 'opensans-bold', sans-serif; - color: #fff; -} -.portfolio-item .portfolio-item-meta p { - font: 12px/18px 'opensans-light', sans-serif; - color: #c6c7c7; - margin-bottom: 0; -} - -/* on hover */ -.portfolio-item:hover .overlay { - opacity: 1; - -moz-opacity: 1; - filter:alpha(opacity=100); -} -.portfolio-item:hover .link-icon { - opacity: 1; - -moz-opacity: 1; - filter:alpha(opacity=100); -} - -/* popup modal */ -.popup-modal { - max-width: 550px; - background: #fff; - position: relative; - margin: 0 auto; -} -.popup-modal .description-box { padding: 12px 36px 18px 36px; } -.popup-modal .description-box h4 { - font: 15px/24px 'opensans-bold', sans-serif; - margin-bottom: 12px; - color: #111; -} -.popup-modal .description-box p { - font: 14px/24px 'opensans-regular', sans-serif; - color: #A1A1A1; - margin-bottom: 12px; -} -.popup-modal .description-box .categories { - font: 11px/21px 'opensans-light', sans-serif; - color: #A1A1A1; - text-transform: uppercase; - letter-spacing: 2px; - display: block; - text-align: left; -} -.popup-modal .description-box .categories i { - margin-right: 8px; -} -.popup-modal .link-box { - padding: 18px 36px; - background: #111; - text-align: left; -} -.popup-modal .link-box a { - color: #fff; - font: 11px/21px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 3px; - cursor: pointer; -} -.popup-modal a:hover { color: #00CCCC; } -.popup-modal a.popup-modal-dismiss { margin-left: 24px; } - - -/* fadein/fadeout effect for modal popup -/* ------------------------------------------------------------------ */ - -/* content at start */ -.mfp-fade.mfp-wrap .mfp-content .popup-modal { - opacity: 0; - -webkit-transition: all 200ms ease-in-out; - -moz-transition: all 200ms ease-in-out; - -o-transition: all 200ms ease-in-out; - -ms-transition: all 200ms ease-in-out; - transition: all 200ms ease-in-out; -} -/* content fadein */ -.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal { - opacity: 1; -} -/* content fadeout */ -.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal { - opacity: 0; -} - -/* ------------------------------------------------------------------ */ -/* f. Call To Action Section -/* ------------------------------------------------------------------ */ - -#call-to-action { - background: #212121; - padding-top: 66px; - padding-bottom: 48px; -} -#call-to-action h1 { - font: 18px/24px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 3px; - color: #fff; -} -#call-to-action h1 span { display: none; } -#call-to-action .header-col h1:before { - font-family: 'FontAwesome'; - content: "\f0ac"; - padding-right: 10px; - font-size: 72px; - line-height: 72px; - text-align: left; - float: left; - color: #fff; -} -#call-to-action .action { - margin-top: 12px; -} -#call-to-action h2 { - font: 28px/36px 'opensans-bold', sans-serif; - color: #EBEEEE; - margin-bottom: 6px; -} -#call-to-action h2 a { - color: inherit; -} -#call-to-action p { - color: #636363; - font-size: 17px; -} -/*# -call-to-action .button { - color:#fff; - background: #0D0D0D; -} -*/ -#call-to-action .button:hover, -#call-to-action .button:active { - background: #FFFFFF; - color: #0D0D0D; -} -#call-to-action p span { - font-family: 'opensans-semibold', sans-serif; - color: #D8D8D8; -} - -/* ------------------------------------------------------------------ -/* g. Testimonials -/* ------------------------------------------------------------------ */ - -#testimonials { - background: #1F1F1F url(../images/testimonials-bg.jpg) no-repeat center center; - background-size: cover !important; - -webkit-background-size: cover !important; - background-attachment: fixed; - - position: relative; - min-height: 200px; - width: 100%; - overflow: hidden; -} -#testimonials .text-container { - padding-top: 96px; - padding-bottom: 66px; -} -#testimonials h1 { - font: 18px/24px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 3px; - color: #fff; -} -#testimonials h1 span { display: none; } -#testimonials .header-col { padding-top: 9px; } -#testimonials .header-col h1:before { - font-family: 'FontAwesome'; - content: "\f10d"; - padding-right: 10px; - font-size: 72px; - line-height: 72px; - text-align: left; - float: left; - color: #fff; -} - -/* Blockquotes */ -#testimonials blockquote { - margin: 0 0px 30px 0px; - padding-left: 0; - position: relative; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); -} -#testimonials blockquote:before { content: none; } -#testimonials blockquote p { - font-family: 'librebaskerville-italic', serif; - padding: 0; - font-size: 24px; - line-height: 48px; - color: #fff -} -#testimonials blockquote cite { - display: block; - font-size: 12px; - font-style: normal; - line-height: 18px; - color: #fff; -} -#testimonials blockquote cite:before { content: "\2014 \0020"; } -#testimonials blockquote cite a, -#testimonials blockquote cite a:visited { color: #8B9798; border: none } - -/* Flex Slider -/* ------------------------------------------------------------------ */ - -/* Reset */ -.flexslider a:active, -.flexslider a:focus { outline: none; } -.slides, -.flex-control-nav, -.flex-direction-nav { margin: 0; padding: 0; list-style: none; } -.slides li { margin: 0; padding: 0;} - -/* Necessary Styles */ -.flexslider { - position: relative; - zoom: 1; - margin: 0; - padding: 0; -} -.flexslider .slides { zoom: 1; } -.flexslider .slides > li { position: relative; } - -/* Hide the slides before the JS is loaded. Avoids image jumping */ -.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } -/* Suggested container for slide animation setups. Can replace this with your own */ -.flex-container { zoom: 1; position: relative; } - -/* Clearfix for .slides */ -.slides:before, -.slides:after { - content: " "; - display: table; -} -.slides:after { - clear: both; -} - -/* No JavaScript Fallback */ -/* If you are not using another script, such as Modernizr, make sure you - * include js that eliminates this class on page load */ -.no-js .slides > li:first-child { display: block; } - -/* Slider Styles */ -.slides { zoom: 1; } -.slides > li { - /*margin-right: 5px; */ - overflow: hidden; -} - -/* Control Nav */ -.flex-control-nav { - width: 100%; - position: absolute; - bottom: -20px; - text-align: left; -} -.flex-control-nav li { - margin: 0 6px; - display: inline-block; - zoom: 1; - *display: inline; -} -.flex-control-paging li a { - width: 12px; - height: 12px; - display: block; - background: #ddd; - background: rgba(255, 255, 255, .3); - cursor: pointer; - text-indent: -9999px; - -webkit-border-radius: 20px; - -moz-border-radius: 20px; - -o-border-radius: 20px; - border-radius: 20px; - box-shadow: inset 0 0 3px rgba(255, 255, 255, .3); -} -.flex-control-paging li a:hover { - background: #CCC; - background: rgba(255, 255, 255, .7); -} -.flex-control-paging li a.flex-active { - background: #fff; - background: rgba(255, 255, 255, .9); - cursor: default; -} - -/* ------------------------------------------------------------------ */ -/* h. Contact Section -/* ------------------------------------------------------------------ */ - -#contact { - background: #191919; - padding-top: 96px; - padding-bottom: 102px; - color: #636363; -} -#contact .section-head { margin-bottom: 42px; } - -#contact a, #contact a:visited { color: #11ABB0; } -#contact a:hover, #contact a:focus { color: #fff; } - -#contact h1 { - font: 18px/24px 'opensans-bold', sans-serif; - text-transform: uppercase; - letter-spacing: 3px; - color: #EBEEEE; - margin-bottom: 6px; -} -#contact h1 span { display: none; } -#contact h1:before { - font-family: 'FontAwesome'; - content: "\f0e0"; - padding-right: 10px; - font-size: 72px; - line-height: 72px; - text-align: left; - float: left; - color: #ebeeee; -} - -#contact h4 { - font: 16px/24px 'opensans-bold', sans-serif; - color: #EBEEEE; - margin-bottom: 6px; -} -#contact p.lead { - font: 18px/36px 'opensans-light', sans-serif; - padding-right: 3%; -} -#contact .header-col { padding-top: 6px; } - - -/* contact form */ -#contact form { margin-bottom: 30px; } -#contact label { - font: 15px/24px 'opensans-bold', sans-serif; - margin: 12px 0; - color: #EBEEEE; - display: inline-block; - float: left; - width: 26%; -} -#contact input, -#contact textarea, -#contact select { - padding: 18px 20px; - color: #eee; - background: #373233; - margin-bottom: 42px; - border: 0; - outline: none; - font-size: 15px; - line-height: 24px; - width: 65%; -} -#contact input:focus, -#contact textarea:focus, -#contact select:focus { - color: #fff; - background-color: #11ABB0; -} -#contact button.submit { - text-transform: uppercase; - letter-spacing: 3px; - color:#fff; - background: #0D0D0D; - border: none; - cursor: pointer; - height: auto; - display: inline-block; - border-radius: 3px; - margin-left: 26%; -} -#contact button.submit:hover { - color: #0D0D0D; - background: #fff; -} -#contact span.required { - color: #11ABB0; - font-size: 13px; -} -#message-warning, #message-success { - display: none; - background: #0F0F0F; - padding: 24px 24px; - margin-bottom: 36px; - width: 65%; - margin-left: 26%; -} -#message-warning { color: #D72828; } -#message-success { color: #11ABB0; } - -#message-warning i, -#message-success i { - margin-right: 10px; -} -#image-loader { - display: none; - position: relative; - left: 18px; - top: 17px; -} - - -/* Twitter Feed */ -#twitter { - margin-top: 12px; - padding: 0; -} -#twitter li { - margin: 6px 0px 12px 0; - line-height: 30px; -} -#twitter li span { - display: block; -} -#twitter li b a { - font: 13px/36px 'opensans-regular', Sans-serif; - color: #474747 !important; - border: none; -} - - -/* ------------------------------------------------------------------ */ -/* i. Footer -/* ------------------------------------------------------------------ */ - -footer { - padding-top: 48px; - margin-bottom: 48px; - color: #303030; - font-size: 14px; - text-align: center; - position: relative; -} - -footer a, footer a:visited { color: #525252; } -footer a:hover, footer a:focus { color: #fff; } - -/* copyright */ -footer .copyright { - margin: 0; - padding: 0; - } -footer .copyright li { - display: inline-block; - margin: 0; - padding: 0; - line-height: 24px; -} -.ie footer .copyright li { - display: inline; -} -footer .copyright li:before { - content: "\2022"; - padding-left: 10px; - padding-right: 10px; - color: #095153; -} -footer .copyright li:first-child:before { - display: none; -} - -/* social links */ -footer .social-links { - margin: 18px 0 30px 0; - padding: 0; - font-size: 30px; -} -footer .social-links li { - display: inline-block; - margin: 0; - padding: 0; - margin-left: 42px; - color: #F06000; -} - -footer .social-links li:first-child { margin-left: 0; } - -/* Go To Top Button */ -#go-top { - position: absolute; - top: -24px; - left: 50%; - margin-left: -30px; -} -#go-top a { - text-decoration: none; - border: 0 none; - display: block; - width: 60px; - height: 60px; - background-color: #525252; - - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - - color: #fff; - font-size: 21px; - line-height: 60px; - border-radius: 100%; -} -#go-top a:hover { background-color: #0F9095; } - +/* +===================================================================== +* Ceevee v1.0 Layout Stylesheet +* url: styleshout.com +* 03-18-2014 +===================================================================== + + TOC: + a. General Styles + b. Header Styles + c. About Section + d. Resume Section + e. Portfolio Section + f. Call To Action Section + g. Testimonials Section + h. Contact Section + i. Footer + +===================================================================== */ + +/* ------------------------------------------------------------------ */ +/* a. General Styles +/* ------------------------------------------------------------------ */ + +body { background: #0f0f0f; } + +/* ------------------------------------------------------------------ */ +/* b. Header Styles +/* ------------------------------------------------------------------ */ + +header { + position: relative; + height: 800px; + min-height: 500px; + width: 100%; + background: #161415 url(../images/header-background.jpg) no-repeat top center; + background-size: cover !important; + -webkit-background-size: cover !important; + text-align: center; + overflow: hidden; +} + +/* vertically center banner section */ +header:before { + content: ''; + display: inline-block; + vertical-align: middle; + height: 100%; +} +header .banner { + display: inline-block; + vertical-align: middle; + margin: 0 auto; + width: 85%; + padding-bottom: 30px;s + text-align: center; +} + +header .banner-text { width: 100%; } +header .banner-text h1 { + font: 90px/1.1em 'opensans-bold', sans-serif; + color: #fff; + letter-spacing: -2px; + margin: 0 auto 18px auto; + text-shadow: 0px 1px 3px rgba(0, 0, 0, .8); +} +header .banner-text h3 { + font: 18px/1.9em 'librebaskerville-regular', serif; + color: #111111; + margin: 0 auto; + width: 70%; + text-shadow: 0px 1px 2px rgba(0, 0, 0, .5); +} +header .banner-text h3 span, +header .banner-text h3 a { + color: #fff; +} +header .banner-text hr { + width: 60%; + margin: 18px auto 24px auto; + border-color: #2F2D2E; + border-color: rgba(150, 150, 150, .1); +} + +/* header social links */ +header .social { + margin: 24px 0; + padding: 0; + font-size: 30px; + text-shadow: 0px 1px 2px rgba(0, 0, 0, .8); +} +header .social li { + display: inline-block; + margin: 0 15px; + padding: 0; +} +header .social li a { color: #fff; } +header .social li a:hover { color: #11ABB0; } + +/* scrolldown link */ +header .scrolldown a { + position: absolute; + bottom: 30px; + left: 50%; + margin-left: -29px; + color: #fff; + display: block; + height: 42px; + width: 42px; + font-size: 42px; + line-height: 42px; + color: #fff; + border-radius: 100%; + + -webkit-transition: all .3s ease-in-out; + -moz-transition: all .3s ease-in-out; + -o-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; +} +header .scrolldown a:hover { color: #11ABB0; } + +/* primary navigation +--------------------------------------------------------------------- */ +#nav-wrap ul, #nav-wrap li, #nav-wrap a { + margin: 0; + padding: 0; + border: none; + outline: none; +} + +/* nav-wrap */ +#nav-wrap { + font: 12px 'opensans-bold', sans-serif; + width: 100%; + text-transform: uppercase; + letter-spacing: 2.5px; + margin: 0 auto; + z-index: 100; + position: fixed; + left: 0; + top: 0; +} +.opaque { background-color: #333; } + +/* hide toggle button */ +#nav-wrap > a.mobile-btn { display: none; } + +ul#nav { + min-height: 48px; + width: auto; + + /* center align the menu */ + text-align: center; +} +ul#nav li { + position: relative; + list-style: none; + height: 48px; + display: inline-block; +} + +/* Links */ +ul#nav li a { + +/* 8px padding top + 8px padding bottom + 32px line-height = 48px */ + + display: inline-block; + padding: 8px 13px; + line-height: 32px; + text-decoration: none; + text-align: left; + color: #fff; + + -webkit-transition: color .2s ease-in-out; + -moz-transition: color .2s ease-in-out; + -o-transition: color .2s ease-in-out; + -ms-transition: color .2s ease-in-out; + transition: color .2s ease-in-out; +} + +ul#nav li a:active { background-color: transparent !important; } +ul#nav li.current a { color: #F06000; } + + +/* ------------------------------------------------------------------ */ +/* c. About Section +/* ------------------------------------------------------------------ */ + +#about { + background: #2B2B2B; + padding-top: 96px; + padding-bottom: 66px; + overflow: hidden; +} + +#about a, #about a:visited { color: #fff; } +#about a:hover, #about a:focus { color: #11ABB0; } + +#about h2 { + font: 22px/30px 'opensans-bold', sans-serif; + color: #fff; + margin-bottom: 12px; +} +#about p { + line-height: 30px; + color: #7A7A7A; +} +#about .profile-pic { + position: relative; + width: 120px; + height: 120px; + border-radius: 100%; +} +#about .contact-details { width: 41.66667%; } +#about .download { + width: 58.33333%; + padding-top: 6px; +} +#about .main-col { padding-right: 5%; } +#about .download .button { + margin-top: 6px; + background: #444; +} +#about .download .button:hover { + background: #fff; + color: #2B2B2B; +} +#about .download .button i { + margin-right: 15px; + font-size: 20px; +} + + +/* ------------------------------------------------------------------ */ +/* d. Resume Section +/* ------------------------------------------------------------------ */ + +#resume { + background: #fff; + padding-top: 90px; + padding-bottom: 72px; + overflow: hidden; +} + +#resume a, #resume a:visited { color: #11ABB0; } +#resume a:hover, #resume a:focus { color: #313131; } + +#resume h1 { + font: 18px/24px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; +} +#resume h1 span { + border-bottom: 3px solid #11ABB0; + padding-bottom: 6px; +} +#resume h3 { + font: 25px/30px 'opensans-bold', sans-serif; +} + +#resume .header-col { padding-top: 9px; } +#resume .main-col { padding-right: 10%; } + +.education, .work { + margin-bottom: 48px; + padding-bottom: 24px; + border-bottom: 1px solid #E8E8E8; +} +#resume .info { + font: 16px/24px 'librebaskerville-italic', serif; + color: #6E7881; + margin-bottom: 18px; + margin-top: 9px; +} +#resume .info span { + margin-right: 5px; + margin-left: 5px; +} +#resume .date { + font: 15px/24px 'opensans-regular', sans-serif; + margin-top: 6px; +} + +/*----------------------------------------------*/ +/* Skill Bars +/*----------------------------------------------*/ + +.bars { + width: 95%; + float: left; + padding: 0; + text-align: left; +} +.bars .skills { + margin-top: 36px; + list-style: none; +} +.bars li { + position: relative; + margin-bottom: 60px; + background: #ccc; + height: 42px; + border-radius: 3px; +} +.bars li em { + font: 15px 'opensans-bold', sans-serif; + color: #313131; + text-transform: uppercase; + letter-spacing: 2px; + font-weight: normal; + position: relative; + top: -36px; +} +.bar-expand { + position: absolute; + left: 0; + top: 0; + + margin: 0; + padding-right: 24px; + background: #313131; + display: inline-block; + height: 42px; + line-height: 42px; + border-radius: 3px 0 0 3px; +} + +.php { + width: 90%; + -moz-animation: photoshop 2s ease; + -webkit-animation: photoshop 2s ease; +} +.sql { + width: 70%; + -moz-animation: illustrator 2s ease; + -webkit-animation: illustrator 2s ease; +} +.python { + width: 60%; + -moz-animation: wordpress 2s ease; + -webkit-animation: wordpress 2s ease; +} +.cpp { + width: 80%; + -moz-animation: css 2s ease; + -webkit-animation: css 2s ease; +} +.jquery { + width: 75%; + -moz-animation: jquery 2s ease; + -webkit-animation: jquery 2s ease; +} +.unix-admin { + width: 80%; + -moz-animation: html5 2s ease; + -webkit-animation: html5 2s ease; +} +.git { + width: 85%; + -moz-animation: html5 2s ease; + -webkit-animation: html5 2s ease; +} +.unit-testing { + width: 50%; + -moz-animation: html5 2s ease; + -webkit-animation: html5 2s ease; +} +.bootstrap { + width: 55%; + -moz-animation: html5 2s ease; + -webkit-animation: html5 2s ease; +} + +@-moz-keyframes photoshop { + 0% { width: 0px; } + 100% { width: 60%; } +} +@-moz-keyframes illustrator { + 0% { width: 0px; } + 100% { width: 55%; } +} +@-moz-keyframes wordpress { + 0% { width: 0px; } + 100% { width: 50%; } +} +@-moz-keyframes css { + 0% { width: 0px; } + 100% { width: 90%; } +} +@-moz-keyframes html5 { + 0% { width: 0px; } + 100% { width: 80%; } +} +@-moz-keyframes jquery { + 0% { width: 0px; } + 100% { width: 50%; } +} + +@-webkit-keyframes photoshop { + 0% { width: 0px; } + 100% { width: 60%; } +} +@-webkit-keyframes illustrator { + 0% { width: 0px; } + 100% { width: 55%; } +} +@-webkit-keyframes wordpress { + 0% { width: 0px; } + 100% { width: 50%; } +} +@-webkit-keyframes css { + 0% { width: 0px; } + 100% { width: 90%; } +} +@-webkit-keyframes html5 { + 0% { width: 0px; } + 100% { width: 80%; } +} +@-webkit-keyframes jquery { + 0% { width: 0px; } + 100% { width: 50%; } +} + +/* ------------------------------------------------------------------ */ +/* e. Portfolio Section +/* ------------------------------------------------------------------ */ + +#portfolio { + background: #ebeeee; + padding-top: 90px; + padding-bottom: 60px; +} +#portfolio h1 { + font: 15px/24px 'opensans-semibold', sans-serif; + text-transform: uppercase; + letter-spacing: 1px; + text-align: center; + margin-bottom: 48px; + color: #95A3A3; +} + +/* Portfolio Content */ +#portfolio-wrapper .columns { margin-bottom: 36px; } +.portfolio-item .item-wrap { + background: #fff; + overflow: hidden; + position: relative; + + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.portfolio-item .item-wrap a { + display: block; + cursor: pointer; +} + +/* overlay */ +.portfolio-item .item-wrap .overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + + opacity: 0; + -moz-opacity: 0; + filter:alpha(opacity=0); + + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; + + background: url(../images/overlay-bg.png) repeat; +} +.portfolio-item .item-wrap .link-icon { + display: block; + color: #fff; + height: 30px; + width: 30px; + font-size: 18px; + line-height: 30px; + text-align: center; + + opacity: 0; + -moz-opacity: 0; + filter:alpha(opacity=0); + + -webkit-transition: opacity 0.3s ease-in-out; + -moz-transition: opacity 0.3s ease-in-out; + -o-transition: opacity 0.3s ease-in-out; + transition: opacity 0.3s ease-in-out; + + position: absolute; + top: 50%; + left: 50%; + margin-left: -15px; + margin-top: -15px; +} +.portfolio-item .item-wrap img { + vertical-align: bottom; +} +.portfolio-item .portfolio-item-meta { padding: 18px } +.portfolio-item .portfolio-item-meta h5 { + font: 14px/21px 'opensans-bold', sans-serif; + color: #fff; +} +.portfolio-item .portfolio-item-meta p { + font: 12px/18px 'opensans-light', sans-serif; + color: #c6c7c7; + margin-bottom: 0; +} + +/* on hover */ +.portfolio-item:hover .overlay { + opacity: 1; + -moz-opacity: 1; + filter:alpha(opacity=100); +} +.portfolio-item:hover .link-icon { + opacity: 1; + -moz-opacity: 1; + filter:alpha(opacity=100); +} + +/* popup modal */ +.popup-modal { + max-width: 550px; + background: #fff; + position: relative; + margin: 0 auto; +} +.popup-modal .description-box { padding: 12px 36px 18px 36px; } +.popup-modal .description-box h4 { + font: 15px/24px 'opensans-bold', sans-serif; + margin-bottom: 12px; + color: #111; +} +.popup-modal .description-box p { + font: 14px/24px 'opensans-regular', sans-serif; + color: #A1A1A1; + margin-bottom: 12px; +} +.popup-modal .description-box .categories { + font: 11px/21px 'opensans-light', sans-serif; + color: #A1A1A1; + text-transform: uppercase; + letter-spacing: 2px; + display: block; + text-align: left; +} +.popup-modal .description-box .categories i { + margin-right: 8px; +} +.popup-modal .link-box { + padding: 18px 36px; + background: #111; + text-align: left; +} +.popup-modal .link-box a { + color: #fff; + font: 11px/21px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 3px; + cursor: pointer; +} +.popup-modal a:hover { color: #00CCCC; } +.popup-modal a.popup-modal-dismiss { margin-left: 24px; } + + +/* fadein/fadeout effect for modal popup +/* ------------------------------------------------------------------ */ + +/* content at start */ +.mfp-fade.mfp-wrap .mfp-content .popup-modal { + opacity: 0; + -webkit-transition: all 200ms ease-in-out; + -moz-transition: all 200ms ease-in-out; + -o-transition: all 200ms ease-in-out; + -ms-transition: all 200ms ease-in-out; + transition: all 200ms ease-in-out; +} +/* content fadein */ +.mfp-fade.mfp-wrap.mfp-ready .mfp-content .popup-modal { + opacity: 1; +} +/* content fadeout */ +.mfp-fade.mfp-wrap.mfp-removing .mfp-content .popup-modal { + opacity: 0; +} + +/* ------------------------------------------------------------------ */ +/* f. Call To Action Section +/* ------------------------------------------------------------------ */ + +#call-to-action { + background: #212121; + padding-top: 66px; + padding-bottom: 48px; +} +#call-to-action h1 { + font: 18px/24px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 3px; + color: #fff; +} +#call-to-action h1 span { display: none; } +#call-to-action .header-col h1:before { + font-family: 'FontAwesome'; + content: "\f0ac"; + padding-right: 10px; + font-size: 72px; + line-height: 72px; + text-align: left; + float: left; + color: #fff; +} +#call-to-action .action { + margin-top: 12px; +} +#call-to-action h2 { + font: 28px/36px 'opensans-bold', sans-serif; + color: #EBEEEE; + margin-bottom: 6px; +} +#call-to-action h2 a { + color: inherit; +} +#call-to-action p { + color: #636363; + font-size: 17px; +} +/*# +call-to-action .button { + color:#fff; + background: #0D0D0D; +} +*/ +#call-to-action .button:hover, +#call-to-action .button:active { + background: #FFFFFF; + color: #0D0D0D; +} +#call-to-action p span { + font-family: 'opensans-semibold', sans-serif; + color: #D8D8D8; +} + +/* ------------------------------------------------------------------ +/* g. Testimonials +/* ------------------------------------------------------------------ */ + +#testimonials { + background: #1F1F1F url(../images/testimonials-bg.jpg) no-repeat center center; + background-size: cover !important; + -webkit-background-size: cover !important; + background-attachment: fixed; + + position: relative; + min-height: 200px; + width: 100%; + overflow: hidden; +} +#testimonials .text-container { + padding-top: 96px; + padding-bottom: 66px; +} +#testimonials h1 { + font: 18px/24px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 3px; + color: #fff; +} +#testimonials h1 span { display: none; } +#testimonials .header-col { padding-top: 9px; } +#testimonials .header-col h1:before { + font-family: 'FontAwesome'; + content: "\f10d"; + padding-right: 10px; + font-size: 72px; + line-height: 72px; + text-align: left; + float: left; + color: #fff; +} + +/* Blockquotes */ +#testimonials blockquote { + margin: 0 0px 30px 0px; + padding-left: 0; + position: relative; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); +} +#testimonials blockquote:before { content: none; } +#testimonials blockquote p { + font-family: 'librebaskerville-italic', serif; + padding: 0; + font-size: 24px; + line-height: 48px; + color: #fff +} +#testimonials blockquote cite { + display: block; + font-size: 12px; + font-style: normal; + line-height: 18px; + color: #fff; +} +#testimonials blockquote cite:before { content: "\2014 \0020"; } +#testimonials blockquote cite a, +#testimonials blockquote cite a:visited { color: #8B9798; border: none } + +/* Flex Slider +/* ------------------------------------------------------------------ */ + +/* Reset */ +.flexslider a:active, +.flexslider a:focus { outline: none; } +.slides, +.flex-control-nav, +.flex-direction-nav { margin: 0; padding: 0; list-style: none; } +.slides li { margin: 0; padding: 0;} + +/* Necessary Styles */ +.flexslider { + position: relative; + zoom: 1; + margin: 0; + padding: 0; +} +.flexslider .slides { zoom: 1; } +.flexslider .slides > li { position: relative; } + +/* Hide the slides before the JS is loaded. Avoids image jumping */ +.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } +/* Suggested container for slide animation setups. Can replace this with your own */ +.flex-container { zoom: 1; position: relative; } + +/* Clearfix for .slides */ +.slides:before, +.slides:after { + content: " "; + display: table; +} +.slides:after { + clear: both; +} + +/* No JavaScript Fallback */ +/* If you are not using another script, such as Modernizr, make sure you + * include js that eliminates this class on page load */ +.no-js .slides > li:first-child { display: block; } + +/* Slider Styles */ +.slides { zoom: 1; } +.slides > li { + /*margin-right: 5px; */ + overflow: hidden; +} + +/* Control Nav */ +.flex-control-nav { + width: 100%; + position: absolute; + bottom: -20px; + text-align: left; +} +.flex-control-nav li { + margin: 0 6px; + display: inline-block; + zoom: 1; + *display: inline; +} +.flex-control-paging li a { + width: 12px; + height: 12px; + display: block; + background: #ddd; + background: rgba(255, 255, 255, .3); + cursor: pointer; + text-indent: -9999px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + -o-border-radius: 20px; + border-radius: 20px; + box-shadow: inset 0 0 3px rgba(255, 255, 255, .3); +} +.flex-control-paging li a:hover { + background: #CCC; + background: rgba(255, 255, 255, .7); +} +.flex-control-paging li a.flex-active { + background: #fff; + background: rgba(255, 255, 255, .9); + cursor: default; +} + +/* ------------------------------------------------------------------ */ +/* h. Contact Section +/* ------------------------------------------------------------------ */ + +#contact { + background: #191919; + padding-top: 96px; + padding-bottom: 102px; + color: #636363; +} +#contact .section-head { margin-bottom: 42px; } + +#contact a, #contact a:visited { color: #11ABB0; } +#contact a:hover, #contact a:focus { color: #fff; } + +#contact h1 { + font: 18px/24px 'opensans-bold', sans-serif; + text-transform: uppercase; + letter-spacing: 3px; + color: #EBEEEE; + margin-bottom: 6px; +} +#contact h1 span { display: none; } +#contact h1:before { + font-family: 'FontAwesome'; + content: "\f0e0"; + padding-right: 10px; + font-size: 72px; + line-height: 72px; + text-align: left; + float: left; + color: #ebeeee; +} + +#contact h4 { + font: 16px/24px 'opensans-bold', sans-serif; + color: #EBEEEE; + margin-bottom: 6px; +} +#contact p.lead { + font: 18px/36px 'opensans-light', sans-serif; + padding-right: 3%; +} +#contact .header-col { padding-top: 6px; } + + +/* contact form */ +#contact form { margin-bottom: 30px; } +#contact label { + font: 15px/24px 'opensans-bold', sans-serif; + margin: 12px 0; + color: #EBEEEE; + display: inline-block; + float: left; + width: 26%; +} +#contact input, +#contact textarea, +#contact select { + padding: 18px 20px; + color: #eee; + background: #373233; + margin-bottom: 42px; + border: 0; + outline: none; + font-size: 15px; + line-height: 24px; + width: 65%; +} +#contact input:focus, +#contact textarea:focus, +#contact select:focus { + color: #fff; + background-color: #11ABB0; +} +#contact button.submit { + text-transform: uppercase; + letter-spacing: 3px; + color:#fff; + background: #0D0D0D; + border: none; + cursor: pointer; + height: auto; + display: inline-block; + border-radius: 3px; + margin-left: 26%; +} +#contact button.submit:hover { + color: #0D0D0D; + background: #fff; +} +#contact span.required { + color: #11ABB0; + font-size: 13px; +} +#message-warning, #message-success { + display: none; + background: #0F0F0F; + padding: 24px 24px; + margin-bottom: 36px; + width: 65%; + margin-left: 26%; +} +#message-warning { color: #D72828; } +#message-success { color: #11ABB0; } + +#message-warning i, +#message-success i { + margin-right: 10px; +} +#image-loader { + display: none; + position: relative; + left: 18px; + top: 17px; +} + + +/* Twitter Feed */ +#twitter { + margin-top: 12px; + padding: 0; +} +#twitter li { + margin: 6px 0px 12px 0; + line-height: 30px; +} +#twitter li span { + display: block; +} +#twitter li b a { + font: 13px/36px 'opensans-regular', Sans-serif; + color: #474747 !important; + border: none; +} + + +/* ------------------------------------------------------------------ */ +/* i. Footer +/* ------------------------------------------------------------------ */ + +footer { + padding-top: 48px; + margin-bottom: 48px; + color: #303030; + font-size: 14px; + text-align: center; + position: relative; +} + +footer a, footer a:visited { color: #525252; } +footer a:hover, footer a:focus { color: #fff; } + +/* copyright */ +footer .copyright { + margin: 0; + padding: 0; + } +footer .copyright li { + display: inline-block; + margin: 0; + padding: 0; + line-height: 24px; +} +.ie footer .copyright li { + display: inline; +} +footer .copyright li:before { + content: "\2022"; + padding-left: 10px; + padding-right: 10px; + color: #095153; +} +footer .copyright li:first-child:before { + display: none; +} + +/* social links */ +footer .social-links { + margin: 18px 0 30px 0; + padding: 0; + font-size: 30px; +} +footer .social-links li { + display: inline-block; + margin: 0; + padding: 0; + margin-left: 42px; + color: #F06000; +} + +footer .social-links li:first-child { margin-left: 0; } + +/* Go To Top Button */ +#go-top { + position: absolute; + top: -24px; + left: 50%; + margin-left: -30px; +} +#go-top a { + text-decoration: none; + border: 0 none; + display: block; + width: 60px; + height: 60px; + background-color: #525252; + + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + + color: #fff; + font-size: 21px; + line-height: 60px; + border-radius: 100%; +} +#go-top a:hover { background-color: #0F9095; } + diff --git a/css/magnific-popup.css b/css/magnific-popup.css index bd962d8..7365072 100644 --- a/css/magnific-popup.css +++ b/css/magnific-popup.css @@ -1,372 +1,372 @@ -/* Magnific Popup CSS */ -.mfp-bg { - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1042; - overflow: hidden; - position: fixed; - background: #000; - opacity: 0.8; - filter: alpha(opacity=80); } - -.mfp-wrap { - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1043; - position: fixed; - outline: none !important; - -webkit-backface-visibility: hidden; } - -.mfp-container { - text-align: center; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - padding: 0 8px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - -.mfp-container:before { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; } - -.mfp-align-top .mfp-container:before { - display: none; } - -.mfp-content { - position: relative; - display: inline-block; - vertical-align: middle; - margin: 0 auto; - text-align: left; - z-index: 1045; } - -.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { - width: 100%; - cursor: auto; } - -.mfp-ajax-cur { - cursor: progress; } - -.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { - cursor: -moz-zoom-out; - cursor: -webkit-zoom-out; - cursor: zoom-out; } - -.mfp-zoom { - cursor: pointer; - cursor: -webkit-zoom-in; - cursor: -moz-zoom-in; - cursor: zoom-in; } - -.mfp-auto-cursor .mfp-content { - cursor: auto; } - -.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; } - -.mfp-loading.mfp-figure { - display: none; } - -.mfp-hide { - display: none !important; } - -.mfp-preloader { - color: #cccccc; - position: absolute; - top: 50%; - width: auto; - text-align: center; - margin-top: -0.8em; - left: 8px; - right: 8px; - z-index: 1044; } - .mfp-preloader a { - color: #cccccc; } - .mfp-preloader a:hover { - color: white; } - -.mfp-s-ready .mfp-preloader { - display: none; } - -.mfp-s-error .mfp-content { - display: none; } - -button.mfp-close, button.mfp-arrow { - overflow: visible; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; - display: block; - outline: none; - padding: 0; - z-index: 1046; - -webkit-box-shadow: none; - box-shadow: none; } -button::-moz-focus-inner { - padding: 0; - border: 0; } - -.mfp-close { - width: 44px; - height: 44px; - line-height: 44px; - position: absolute; - right: 0; - top: 0; - text-decoration: none; - text-align: center; - opacity: 0.65; - filter: alpha(opacity=65); - padding: 0 0 18px 10px; - color: white; - font-style: normal; - font-size: 28px; - font-family: Arial, Baskerville, monospace; } - .mfp-close:hover, .mfp-close:focus { - opacity: 1; - filter: alpha(opacity=100); } - .mfp-close:active { - top: 1px; } - -.mfp-close-btn-in .mfp-close { - color: #333333; } - -.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { - color: white; - right: -6px; - text-align: right; - padding-right: 6px; - width: 100%; } - -.mfp-counter { - position: absolute; - top: 0; - right: 0; - color: #cccccc; - font-size: 12px; - line-height: 18px; } - -.mfp-arrow { - position: absolute; - opacity: 0.65; - filter: alpha(opacity=65); - margin: 0; - top: 50%; - margin-top: -55px; - padding: 0; - width: 90px; - height: 110px; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - .mfp-arrow:active { - margin-top: -54px; } - .mfp-arrow:hover, .mfp-arrow:focus { - opacity: 1; - filter: alpha(opacity=100); } - .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { - content: ''; - display: block; - width: 0; - height: 0; - position: absolute; - left: 0; - top: 0; - margin-top: 35px; - margin-left: 35px; - border: medium inset transparent; } - .mfp-arrow:after, .mfp-arrow .mfp-a { - border-top-width: 13px; - border-bottom-width: 13px; - top: 8px; } - .mfp-arrow:before, .mfp-arrow .mfp-b { - border-top-width: 21px; - border-bottom-width: 21px; - opacity: 0.7; } - -.mfp-arrow-left { - left: 0; } - .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { - border-right: 17px solid white; - margin-left: 31px; } - .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { - margin-left: 25px; - border-right: 27px solid #3f3f3f; } - -.mfp-arrow-right { - right: 0; } - .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { - border-left: 17px solid white; - margin-left: 39px; } - .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { - border-left: 27px solid #3f3f3f; } - -.mfp-iframe-holder { - padding-top: 40px; - padding-bottom: 40px; } - .mfp-iframe-holder .mfp-content { - line-height: 0; - width: 100%; - max-width: 900px; } - .mfp-iframe-holder .mfp-close { - top: -40px; } - -.mfp-iframe-scaler { - width: 100%; - height: 0; - overflow: hidden; - padding-top: 56.25%; } - .mfp-iframe-scaler iframe { - position: absolute; - display: block; - top: 0; - left: 0; - width: 100%; - height: 100%; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - background: black; } - -/* Main image in popup */ -img.mfp-img { - width: auto; - max-width: 100%; - height: auto; - display: block; - line-height: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 40px 0 40px; - margin: 0 auto; } - -/* The shadow behind the image */ -.mfp-figure { - line-height: 0; } - .mfp-figure:after { - content: ''; - position: absolute; - left: 0; - top: 40px; - bottom: 40px; - display: block; - right: 0; - width: auto; - height: auto; - z-index: -1; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - background: #444444; } - .mfp-figure small { - color: #bdbdbd; - display: block; - font-size: 12px; - line-height: 14px; } - .mfp-figure figure { - margin: 0; } - -.mfp-bottom-bar { - margin-top: -36px; - position: absolute; - top: 100%; - left: 0; - width: 100%; - cursor: auto; } - -.mfp-title { - text-align: left; - line-height: 18px; - color: #f3f3f3; - word-wrap: break-word; - padding-right: 36px; } - -.mfp-image-holder .mfp-content { - max-width: 100%; } - -.mfp-gallery .mfp-image-holder .mfp-figure { - cursor: pointer; } - -@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { - /** - * Remove all paddings around the image on small screen - */ - .mfp-img-mobile .mfp-image-holder { - padding-left: 0; - padding-right: 0; } - .mfp-img-mobile img.mfp-img { - padding: 0; } - .mfp-img-mobile .mfp-figure:after { - top: 0; - bottom: 0; } - .mfp-img-mobile .mfp-figure small { - display: inline; - margin-left: 5px; } - .mfp-img-mobile .mfp-bottom-bar { - background: rgba(0, 0, 0, 0.6); - bottom: 0; - margin: 0; - top: auto; - padding: 3px 5px; - position: fixed; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - .mfp-img-mobile .mfp-bottom-bar:empty { - padding: 0; } - .mfp-img-mobile .mfp-counter { - right: 5px; - top: 3px; } - .mfp-img-mobile .mfp-close { - top: 0; - right: 0; - width: 35px; - height: 35px; - line-height: 35px; - background: rgba(0, 0, 0, 0.6); - position: fixed; - text-align: center; - padding: 0; } } - -@media all and (max-width: 900px) { - .mfp-arrow { - -webkit-transform: scale(0.75); - transform: scale(0.75); } - .mfp-arrow-left { - -webkit-transform-origin: 0; - transform-origin: 0; } - .mfp-arrow-right { - -webkit-transform-origin: 100%; - transform-origin: 100%; } - .mfp-container { - padding-left: 6px; - padding-right: 6px; } } - -.mfp-ie7 .mfp-img { - padding: 0; } -.mfp-ie7 .mfp-bottom-bar { - width: 600px; - left: 50%; - margin-left: -300px; - margin-top: 5px; - padding-bottom: 5px; } -.mfp-ie7 .mfp-container { - padding: 0; } -.mfp-ie7 .mfp-content { - padding-top: 44px; } -.mfp-ie7 .mfp-close { - top: 0; - right: 0; - padding-top: 0; } - - - - +/* Magnific Popup CSS */ +.mfp-bg { + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1042; + overflow: hidden; + position: fixed; + background: #000; + opacity: 0.8; + filter: alpha(opacity=80); } + +.mfp-wrap { + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1043; + position: fixed; + outline: none !important; + -webkit-backface-visibility: hidden; } + +.mfp-container { + text-align: center; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + padding: 0 8px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +.mfp-container:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; } + +.mfp-align-top .mfp-container:before { + display: none; } + +.mfp-content { + position: relative; + display: inline-block; + vertical-align: middle; + margin: 0 auto; + text-align: left; + z-index: 1045; } + +.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { + width: 100%; + cursor: auto; } + +.mfp-ajax-cur { + cursor: progress; } + +.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { + cursor: -moz-zoom-out; + cursor: -webkit-zoom-out; + cursor: zoom-out; } + +.mfp-zoom { + cursor: pointer; + cursor: -webkit-zoom-in; + cursor: -moz-zoom-in; + cursor: zoom-in; } + +.mfp-auto-cursor .mfp-content { + cursor: auto; } + +.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } + +.mfp-loading.mfp-figure { + display: none; } + +.mfp-hide { + display: none !important; } + +.mfp-preloader { + color: #cccccc; + position: absolute; + top: 50%; + width: auto; + text-align: center; + margin-top: -0.8em; + left: 8px; + right: 8px; + z-index: 1044; } + .mfp-preloader a { + color: #cccccc; } + .mfp-preloader a:hover { + color: white; } + +.mfp-s-ready .mfp-preloader { + display: none; } + +.mfp-s-error .mfp-content { + display: none; } + +button.mfp-close, button.mfp-arrow { + overflow: visible; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + display: block; + outline: none; + padding: 0; + z-index: 1046; + -webkit-box-shadow: none; + box-shadow: none; } +button::-moz-focus-inner { + padding: 0; + border: 0; } + +.mfp-close { + width: 44px; + height: 44px; + line-height: 44px; + position: absolute; + right: 0; + top: 0; + text-decoration: none; + text-align: center; + opacity: 0.65; + filter: alpha(opacity=65); + padding: 0 0 18px 10px; + color: white; + font-style: normal; + font-size: 28px; + font-family: Arial, Baskerville, monospace; } + .mfp-close:hover, .mfp-close:focus { + opacity: 1; + filter: alpha(opacity=100); } + .mfp-close:active { + top: 1px; } + +.mfp-close-btn-in .mfp-close { + color: #333333; } + +.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { + color: white; + right: -6px; + text-align: right; + padding-right: 6px; + width: 100%; } + +.mfp-counter { + position: absolute; + top: 0; + right: 0; + color: #cccccc; + font-size: 12px; + line-height: 18px; } + +.mfp-arrow { + position: absolute; + opacity: 0.65; + filter: alpha(opacity=65); + margin: 0; + top: 50%; + margin-top: -55px; + padding: 0; + width: 90px; + height: 110px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + .mfp-arrow:active { + margin-top: -54px; } + .mfp-arrow:hover, .mfp-arrow:focus { + opacity: 1; + filter: alpha(opacity=100); } + .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { + content: ''; + display: block; + width: 0; + height: 0; + position: absolute; + left: 0; + top: 0; + margin-top: 35px; + margin-left: 35px; + border: medium inset transparent; } + .mfp-arrow:after, .mfp-arrow .mfp-a { + border-top-width: 13px; + border-bottom-width: 13px; + top: 8px; } + .mfp-arrow:before, .mfp-arrow .mfp-b { + border-top-width: 21px; + border-bottom-width: 21px; + opacity: 0.7; } + +.mfp-arrow-left { + left: 0; } + .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { + border-right: 17px solid white; + margin-left: 31px; } + .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { + margin-left: 25px; + border-right: 27px solid #3f3f3f; } + +.mfp-arrow-right { + right: 0; } + .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { + border-left: 17px solid white; + margin-left: 39px; } + .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { + border-left: 27px solid #3f3f3f; } + +.mfp-iframe-holder { + padding-top: 40px; + padding-bottom: 40px; } + .mfp-iframe-holder .mfp-content { + line-height: 0; + width: 100%; + max-width: 900px; } + .mfp-iframe-holder .mfp-close { + top: -40px; } + +.mfp-iframe-scaler { + width: 100%; + height: 0; + overflow: hidden; + padding-top: 56.25%; } + .mfp-iframe-scaler iframe { + position: absolute; + display: block; + top: 0; + left: 0; + width: 100%; + height: 100%; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + background: black; } + +/* Main image in popup */ +img.mfp-img { + width: auto; + max-width: 100%; + height: auto; + display: block; + line-height: 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 40px 0 40px; + margin: 0 auto; } + +/* The shadow behind the image */ +.mfp-figure { + line-height: 0; } + .mfp-figure:after { + content: ''; + position: absolute; + left: 0; + top: 40px; + bottom: 40px; + display: block; + right: 0; + width: auto; + height: auto; + z-index: -1; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + background: #444444; } + .mfp-figure small { + color: #bdbdbd; + display: block; + font-size: 12px; + line-height: 14px; } + .mfp-figure figure { + margin: 0; } + +.mfp-bottom-bar { + margin-top: -36px; + position: absolute; + top: 100%; + left: 0; + width: 100%; + cursor: auto; } + +.mfp-title { + text-align: left; + line-height: 18px; + color: #f3f3f3; + word-wrap: break-word; + padding-right: 36px; } + +.mfp-image-holder .mfp-content { + max-width: 100%; } + +.mfp-gallery .mfp-image-holder .mfp-figure { + cursor: pointer; } + +@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { + /** + * Remove all paddings around the image on small screen + */ + .mfp-img-mobile .mfp-image-holder { + padding-left: 0; + padding-right: 0; } + .mfp-img-mobile img.mfp-img { + padding: 0; } + .mfp-img-mobile .mfp-figure:after { + top: 0; + bottom: 0; } + .mfp-img-mobile .mfp-figure small { + display: inline; + margin-left: 5px; } + .mfp-img-mobile .mfp-bottom-bar { + background: rgba(0, 0, 0, 0.6); + bottom: 0; + margin: 0; + top: auto; + padding: 3px 5px; + position: fixed; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + .mfp-img-mobile .mfp-bottom-bar:empty { + padding: 0; } + .mfp-img-mobile .mfp-counter { + right: 5px; + top: 3px; } + .mfp-img-mobile .mfp-close { + top: 0; + right: 0; + width: 35px; + height: 35px; + line-height: 35px; + background: rgba(0, 0, 0, 0.6); + position: fixed; + text-align: center; + padding: 0; } } + +@media all and (max-width: 900px) { + .mfp-arrow { + -webkit-transform: scale(0.75); + transform: scale(0.75); } + .mfp-arrow-left { + -webkit-transform-origin: 0; + transform-origin: 0; } + .mfp-arrow-right { + -webkit-transform-origin: 100%; + transform-origin: 100%; } + .mfp-container { + padding-left: 6px; + padding-right: 6px; } } + +.mfp-ie7 .mfp-img { + padding: 0; } +.mfp-ie7 .mfp-bottom-bar { + width: 600px; + left: 50%; + margin-left: -300px; + margin-top: 5px; + padding-bottom: 5px; } +.mfp-ie7 .mfp-container { + padding: 0; } +.mfp-ie7 .mfp-content { + padding-top: 44px; } +.mfp-ie7 .mfp-close { + top: 0; + right: 0; + padding-top: 0; } + + + + diff --git a/css/media-queries.css b/css/media-queries.css index 01a689e..3d4a553 100644 --- a/css/media-queries.css +++ b/css/media-queries.css @@ -1,382 +1,382 @@ -/* ================================================================== - -* Ceevee Media Queries -* url: styleshout.com -* 03-18-2014 - -/* ================================================================== */ - - -/* screenwidth less than 1024px ---------------------------------------------------------------------- */ -@media only screen and (max-width: 1024px) { - - /* header styles - ------------------------------------------------------------------ */ - header .banner-text h1 { - font: 80px/1.1em 'opensans-bold', sans-serif; - letter-spacing: -1px; - margin: 0 auto 12px auto; - } - -} - -/* screenwidth less than 900px ---------------------------------------------------------------------- */ -@media only screen and (max-width: 900px) { - - /* header styles - ------------------------------------------------------------------ */ - header .banner { padding-bottom: 12px; } - header .banner-text h1 { - font: 78px/1.1em 'opensans-bold', sans-serif; - letter-spacing: -1px; - } - header .banner-text h3 { - font: 17px/1.9em 'librebaskerville-regular', serif; - width: 80%; - } - header .banner-text hr { - width: 65%; - margin: 12px auto; - } - /* nav-wrap */ - #nav-wrap { - font: 11px 'opensans-bold', sans-serif; - letter-spacing: 1.5px; - } - - - /* About Section - ------------------------------------------------------------------- */ - #about .profile-pic { - width: 114px; - height: 114px; - margin-left: 12px; - } - #about .contact-details { width: 50%; } - #about .download { width: 50%; } - - /* Resume Section - ------------------------------------------------------------------- */ - #resume h1 { font: 16px/24px 'opensans-bold', sans-serif; } - #resume .main-col { padding-right: 5%; } - - /* Testimonials Section - ------------------------------------------------------------------- */ - #testimonials .header-col h1:before { - font-size: 66px; - line-height: 66px; - } - #testimonials blockquote p { - font-size: 22px; - line-height: 46px; - } - - /* Call to Action Section - ------------------------------------------------------------------- */ - #call-to-action .header-col h1:before { - font-size: 66px; - line-height: 66px; - } - - /* Contact Section - ------------------------------------------------------------------- */ - #contact .section-head { margin-bottom: 30px; } - #contact .header-col h1:before { - font-size: 66px; - line-height: 66px; - } - #contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; } - - -} - -/* mobile wide/smaller tablets ----------------------------------------------------------------------- */ - -@media only screen and (max-width: 767px) { - - /* mobile navigation - -------------------------------------------------------------------- */ - #nav-wrap { - font: 12px 'opensans-bold', sans-serif; - background: transparent !important; - letter-spacing: 1.5px; - width: auto; - position: fixed; - top: 0; - right: 0; - } - #nav-wrap > a { - width: 48px; - height: 48px; - text-align: left; - background-color: #CC5200; - position: relative; - border: none; - float: right; - - font: 0/0 a; - text-shadow: none; - color: transparent; - - position: relative; - top: 0px; - right: 30px; - } - - #nav-wrap > a:before, - #nav-wrap > a:after { - position: absolute; - border: 2px solid #fff; - top: 35%; - left: 25%; - right: 25%; - content: ''; - } - #nav-wrap > a:after { top: 60%; } - - /* toggle buttons */ - #nav-wrap:not( :target ) > a:first-of-type, - #nav-wrap:target > a:last-of-type { - display: block; - } - - /* hide menu panel */ - #nav-wrap ul#nav { - height: auto; - display: none; - clear: both; - width: auto; - float: right; - - position: relative; - top: 12px; - right: 0; - } - - /* display menu panels */ - #nav-wrap:target > ul#nav { - display: block; - padding: 30px 20px 48px 20px; - background: #1f2024; - margin: 0 30px; - clear: both; - } - - ul#nav li { - display: block; - height: auto; - margin: 0 auto; - padding: 0 4%; - text-align: left; - border-bottom: 1px solid #2D2E34; - border-bottom-style: dotted; - } - - ul#nav li a { - display: block; - margin: 0; - padding: 0; - margin: 12px 0; - line-height: 16px; /* reset line-height from 48px */ - border: none; - } - - - /* Header Styles - -------------------------------------------------------------------- */ - header .banner { - padding-bottom: 12px; - padding-top: 6px; - } - header .banner-text h1 { font: 68px/1.1em 'opensans-bold', sans-serif; } - header .banner-text h3 { - font: 16px/1.9em 'librebaskerville-regular', serif; - width: 85%; - } - header .banner-text hr { - width: 80%; - margin: 18px auto; - } - - /* header social links */ - header .social { - margin: 18px 0 24px 0; - font-size: 24px; - line-height: 36px; - } - header .social li { margin: 0 10px; } - - /* scrolldown link */ - header .scrolldown { display: none; } - - - /* About Section - -------------------------------------------------------------------- */ - #about .profile-pic { display: none; } - #about .download .button { - width: 100%; - text-align: center; - padding: 15px 20px; - } - #about .main-col { padding-right: 30px; } - - - /* Resume Section - --------------------------------------------------------------------- */ - #resume .header-col { - padding-top: 0; - margin-bottom: 48px; - text-align: center; - } - #resume h1 { letter-spacing: 3px; } - #resume .main-col { padding-right: 30px; } - #resume h3, #resume .info { text-align: center; } - - .bars { width: 100%; } - - - /* Call To Action Section - /* ----------------------------------------------------------------- */ - #call-to-action { text-align: center; } - #call-to-action h1 { - font: 16px/24px 'opensans-bold', sans-serif; - text-align: center; - margin-bottom: 30px; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); - } - #call-to-action h1 span { display: block; } - #call-to-action .header-col h1:before { content: none; } - #call-to-action p { font-size: 15px; } - - - /* Portfolio Section - /* ----------------------------------------------------------------- */ - #portfolio-wrapper .columns { margin-bottom: 40px; } - .popup-modal { max-width: 85%; } - - - /* Testimonials Section - ----------------------------------------------------------------------- */ - #testimonials .text-container { text-align: center; } - #testimonials h1 { - font: 16px/24px 'opensans-bold', sans-serif; - text-align: center; - margin-bottom: 30px; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); - } - #testimonials h1 span { display: block; } - #testimonials .header-col h1:before { content: none; } - #testimonials blockquote { padding-bottom: 24px; } - #testimonials blockquote p { - font-size: 20px; - line-height: 42px; - } - - /* Control Nav */ - .flex-control-nav { - text-align: center; - margin-left: -30px; - } - - - /* contact Section - ----------------------------------------------------------------------- */ - #contact { padding-bottom: 66px; } - #contact .section-head { margin-bottom: 12px; } - #contact .section-head h1 { - font: 16px/24px 'opensans-bold', sans-serif; - text-align: center; - margin-bottom: 30px; - text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); - } - #contact h1 span { display: block; } - #contact .header-col { padding-top: 0; } - #contact .header-col h1:before { content: none; } - #contact .section-head p.lead { text-align: center;} - - /* form */ - #contact label { - float: none; - width: 100%; - } - #contact input, - #contact textarea, - #contact select { - margin-bottom: 6px; - width: 100%; - } - #contact button.submit { margin: 30px 0 24px 0; } - #message-warning, #message-success { - width: 100%; - margin-left: 0; - } - - - /* footer - ------------------------------------------------------------------------ */ - - /* copyright */ - footer .copyright li:before { content: none; } - footer .copyright li { margin-right: 12px; } - - /* social links */ - footer .social-links { font-size: 22px; } - footer .social-links li { margin-left: 18px; } - - /* Go To Top Button */ - #go-top { margin-left: -22px; } - #go-top a { - width: 54px; - height: 54px; - font-size: 18px; - line-height: 54px; - } - - -} - -/* mobile narrow - -------------------------------------------------------------------------- */ - -@media only screen and (max-width: 480px) { - - /* mobile navigation - -------------------------------------------------------------------- */ - #nav-wrap ul#nav { width: auto; float: none; } - - /* header styles - -------------------------------------------------------------------- */ - header .banner { padding-top: 24px; } - header .banner-text h1 { - font: 40px/1.1em 'opensans-bold', sans-serif; - margin: 0 auto 24px auto; - } - header .banner-text h3 { - font: 14px/1.9em 'librebaskerville-regular', sans-serif; - width: 90%; - } - - /* header social links */ - header .social { font-size: 20px;} - header .social li { margin: 0 6px; } - - /* footer - ------------------------------------------------------------------------ */ - - /* social links */ - footer .social-links { font-size: 20px; } - footer .social-links li { margin-left: 14px; } - -} - - - - - - - - - +/* ================================================================== + +* Ceevee Media Queries +* url: styleshout.com +* 03-18-2014 + +/* ================================================================== */ + + +/* screenwidth less than 1024px +--------------------------------------------------------------------- */ +@media only screen and (max-width: 1024px) { + + /* header styles + ------------------------------------------------------------------ */ + header .banner-text h1 { + font: 80px/1.1em 'opensans-bold', sans-serif; + letter-spacing: -1px; + margin: 0 auto 12px auto; + } + +} + +/* screenwidth less than 900px +--------------------------------------------------------------------- */ +@media only screen and (max-width: 900px) { + + /* header styles + ------------------------------------------------------------------ */ + header .banner { padding-bottom: 12px; } + header .banner-text h1 { + font: 78px/1.1em 'opensans-bold', sans-serif; + letter-spacing: -1px; + } + header .banner-text h3 { + font: 17px/1.9em 'librebaskerville-regular', serif; + width: 80%; + } + header .banner-text hr { + width: 65%; + margin: 12px auto; + } + /* nav-wrap */ + #nav-wrap { + font: 11px 'opensans-bold', sans-serif; + letter-spacing: 1.5px; + } + + + /* About Section + ------------------------------------------------------------------- */ + #about .profile-pic { + width: 114px; + height: 114px; + margin-left: 12px; + } + #about .contact-details { width: 50%; } + #about .download { width: 50%; } + + /* Resume Section + ------------------------------------------------------------------- */ + #resume h1 { font: 16px/24px 'opensans-bold', sans-serif; } + #resume .main-col { padding-right: 5%; } + + /* Testimonials Section + ------------------------------------------------------------------- */ + #testimonials .header-col h1:before { + font-size: 66px; + line-height: 66px; + } + #testimonials blockquote p { + font-size: 22px; + line-height: 46px; + } + + /* Call to Action Section + ------------------------------------------------------------------- */ + #call-to-action .header-col h1:before { + font-size: 66px; + line-height: 66px; + } + + /* Contact Section + ------------------------------------------------------------------- */ + #contact .section-head { margin-bottom: 30px; } + #contact .header-col h1:before { + font-size: 66px; + line-height: 66px; + } + #contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; } + + +} + +/* mobile wide/smaller tablets +---------------------------------------------------------------------- */ + +@media only screen and (max-width: 767px) { + + /* mobile navigation + -------------------------------------------------------------------- */ + #nav-wrap { + font: 12px 'opensans-bold', sans-serif; + background: transparent !important; + letter-spacing: 1.5px; + width: auto; + position: fixed; + top: 0; + right: 0; + } + #nav-wrap > a { + width: 48px; + height: 48px; + text-align: left; + background-color: #CC5200; + position: relative; + border: none; + float: right; + + font: 0/0 a; + text-shadow: none; + color: transparent; + + position: relative; + top: 0px; + right: 30px; + } + + #nav-wrap > a:before, + #nav-wrap > a:after { + position: absolute; + border: 2px solid #fff; + top: 35%; + left: 25%; + right: 25%; + content: ''; + } + #nav-wrap > a:after { top: 60%; } + + /* toggle buttons */ + #nav-wrap:not( :target ) > a:first-of-type, + #nav-wrap:target > a:last-of-type { + display: block; + } + + /* hide menu panel */ + #nav-wrap ul#nav { + height: auto; + display: none; + clear: both; + width: auto; + float: right; + + position: relative; + top: 12px; + right: 0; + } + + /* display menu panels */ + #nav-wrap:target > ul#nav { + display: block; + padding: 30px 20px 48px 20px; + background: #1f2024; + margin: 0 30px; + clear: both; + } + + ul#nav li { + display: block; + height: auto; + margin: 0 auto; + padding: 0 4%; + text-align: left; + border-bottom: 1px solid #2D2E34; + border-bottom-style: dotted; + } + + ul#nav li a { + display: block; + margin: 0; + padding: 0; + margin: 12px 0; + line-height: 16px; /* reset line-height from 48px */ + border: none; + } + + + /* Header Styles + -------------------------------------------------------------------- */ + header .banner { + padding-bottom: 12px; + padding-top: 6px; + } + header .banner-text h1 { font: 68px/1.1em 'opensans-bold', sans-serif; } + header .banner-text h3 { + font: 16px/1.9em 'librebaskerville-regular', serif; + width: 85%; + } + header .banner-text hr { + width: 80%; + margin: 18px auto; + } + + /* header social links */ + header .social { + margin: 18px 0 24px 0; + font-size: 24px; + line-height: 36px; + } + header .social li { margin: 0 10px; } + + /* scrolldown link */ + header .scrolldown { display: none; } + + + /* About Section + -------------------------------------------------------------------- */ + #about .profile-pic { display: none; } + #about .download .button { + width: 100%; + text-align: center; + padding: 15px 20px; + } + #about .main-col { padding-right: 30px; } + + + /* Resume Section + --------------------------------------------------------------------- */ + #resume .header-col { + padding-top: 0; + margin-bottom: 48px; + text-align: center; + } + #resume h1 { letter-spacing: 3px; } + #resume .main-col { padding-right: 30px; } + #resume h3, #resume .info { text-align: center; } + + .bars { width: 100%; } + + + /* Call To Action Section + /* ----------------------------------------------------------------- */ + #call-to-action { text-align: center; } + #call-to-action h1 { + font: 16px/24px 'opensans-bold', sans-serif; + text-align: center; + margin-bottom: 30px; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); + } + #call-to-action h1 span { display: block; } + #call-to-action .header-col h1:before { content: none; } + #call-to-action p { font-size: 15px; } + + + /* Portfolio Section + /* ----------------------------------------------------------------- */ + #portfolio-wrapper .columns { margin-bottom: 40px; } + .popup-modal { max-width: 85%; } + + + /* Testimonials Section + ----------------------------------------------------------------------- */ + #testimonials .text-container { text-align: center; } + #testimonials h1 { + font: 16px/24px 'opensans-bold', sans-serif; + text-align: center; + margin-bottom: 30px; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); + } + #testimonials h1 span { display: block; } + #testimonials .header-col h1:before { content: none; } + #testimonials blockquote { padding-bottom: 24px; } + #testimonials blockquote p { + font-size: 20px; + line-height: 42px; + } + + /* Control Nav */ + .flex-control-nav { + text-align: center; + margin-left: -30px; + } + + + /* contact Section + ----------------------------------------------------------------------- */ + #contact { padding-bottom: 66px; } + #contact .section-head { margin-bottom: 12px; } + #contact .section-head h1 { + font: 16px/24px 'opensans-bold', sans-serif; + text-align: center; + margin-bottom: 30px; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 1); + } + #contact h1 span { display: block; } + #contact .header-col { padding-top: 0; } + #contact .header-col h1:before { content: none; } + #contact .section-head p.lead { text-align: center;} + + /* form */ + #contact label { + float: none; + width: 100%; + } + #contact input, + #contact textarea, + #contact select { + margin-bottom: 6px; + width: 100%; + } + #contact button.submit { margin: 30px 0 24px 0; } + #message-warning, #message-success { + width: 100%; + margin-left: 0; + } + + + /* footer + ------------------------------------------------------------------------ */ + + /* copyright */ + footer .copyright li:before { content: none; } + footer .copyright li { margin-right: 12px; } + + /* social links */ + footer .social-links { font-size: 22px; } + footer .social-links li { margin-left: 18px; } + + /* Go To Top Button */ + #go-top { margin-left: -22px; } + #go-top a { + width: 54px; + height: 54px; + font-size: 18px; + line-height: 54px; + } + + +} + +/* mobile narrow + -------------------------------------------------------------------------- */ + +@media only screen and (max-width: 480px) { + + /* mobile navigation + -------------------------------------------------------------------- */ + #nav-wrap ul#nav { width: auto; float: none; } + + /* header styles + -------------------------------------------------------------------- */ + header .banner { padding-top: 24px; } + header .banner-text h1 { + font: 40px/1.1em 'opensans-bold', sans-serif; + margin: 0 auto 24px auto; + } + header .banner-text h3 { + font: 14px/1.9em 'librebaskerville-regular', sans-serif; + width: 90%; + } + + /* header social links */ + header .social { font-size: 20px;} + header .social li { margin: 0 6px; } + + /* footer + ------------------------------------------------------------------------ */ + + /* social links */ + footer .social-links { font-size: 20px; } + footer .social-links li { margin-left: 14px; } + +} + + + + + + + + + diff --git a/footer.php b/footer.php index f887d58..7ab36c1 100644 --- a/footer.php +++ b/footer.php @@ -1,42 +1,42 @@ -<!-- footer - ================================================== --> -<footer> - - <div class="row"> - - <div class="twelve columns"> - - <?php include 'social.html'; ?> - - <ul class="copyright"> - <li>© Copyright <?=date("Y")?> Benjamin Harris</li> - </ul> - - </div> - - <div id="go-top"> - <a class="smoothscroll" title="Back to Top" href="#home"> - <i class="icon-up-open"></i> - </a> - </div> - - </div> - -</footer> -<!-- Footer End--> - -<!-- Java Script - ================================================== --> -<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script> -<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> - -<script src="js/jquery.flexslider.js"></script> -<script src="js/waypoints.js"></script> -<script src="js/jquery.fittext.js"></script> -<script src="js/magnific-popup.js"></script> -<script src="js/init.js"></script> - -</body> - -</html> +<!-- footer + ================================================== --> +<footer> + + <div class="row"> + + <div class="twelve columns"> + + <?php include 'social.html'; ?> + + <ul class="copyright"> + <li>© Copyright <?=date("Y")?> Benjamin Harris</li> + </ul> + + </div> + + <div id="go-top"> + <a class="smoothscroll" title="Back to Top" href="#home"> + <i class="icon-up-open"></i> + </a> + </div> + + </div> + +</footer> +<!-- Footer End--> + +<!-- Java Script + ================================================== --> +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> +<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script> +<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script> + +<script src="js/jquery.flexslider.js"></script> +<script src="js/waypoints.js"></script> +<script src="js/jquery.fittext.js"></script> +<script src="js/magnific-popup.js"></script> +<script src="js/init.js"></script> + +</body> + +</html> diff --git a/inc/sendEmail.php b/inc/sendEmail.php index 52c4b85..187fdc3 100644 --- a/inc/sendEmail.php +++ b/inc/sendEmail.php @@ -1,73 +1,74 @@ -<?php - -// Replace this with your own email address -$siteOwnersEmail = 'bharrismac@gmail.com'; - - -if ($_POST) { - - $name = trim(stripslashes($_POST['contactName'])); - $email = trim(stripslashes($_POST['contactEmail'])); - $subject = trim(stripslashes($_POST['contactSubject'])); - $contact_message = trim(stripslashes($_POST['contactMessage'])); - - // Check Name - if (strlen($name) < 2) { - $error['name'] = "Please enter your name."; - } - // Check Email - if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) { - $error['email'] = "Please enter a valid email address."; - } - // Check Message - if (strlen($contact_message) < 15) { - $error['message'] = "Please enter your message. It should have at least 15 characters."; - } - // Subject - if ($subject == '') { - $subject = "Contact Form Submission"; - } else { - $subject = "Contact Form Submission: $subject"; - } - - - // Set Message - $message .= "Email from: " . $name . "<br />"; - $message .= "Email address: " . $email . "<br />"; - $message .= "Message: <br /><pre>"; - $message .= $contact_message; - $message .= "</pre><br /> ----- <br /> This email was sent from your site's contact form. <br />"; - - // Set From: header - $from = $name . " <" . $email . ">"; - - // Email Headers - $headers = "From: admin<admin@benharri.com>\r\n"; - $headers .= "Reply-To: ". $email . "\r\n"; - $headers .= "MIME-Version: 1.0\r\n"; - $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; - - - if (!$error) { - - ini_set("sendmail_from", $siteOwnersEmail); // for windows server - $mail = mail($siteOwnersEmail, $subject, $message, $headers); - - if ($mail) { - echo "OK"; - } else { - echo "Something went wrong. Please try again."; - } - - } else { - - $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null; - $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null; - $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null; - - echo $response; - - } # end if - there was a validation error - -} - +<?php + +// Replace this with your own email address +$siteOwnersEmail = 'benharri@pm.me'; + + +if ($_POST) { + + $name = trim(stripslashes($_POST['contactName'])); + $email = trim(stripslashes($_POST['contactEmail'])); + $subject = trim(stripslashes($_POST['contactSubject'])); + $contact_message = trim(stripslashes($_POST['contactMessage'])); + + // Check Name + $error = []; + if (strlen($name) < 2) { + $error['name'] = "Please enter your name."; + } + // Check Email + if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) { + $error['email'] = "Please enter a valid email address."; + } + // Check Message + if (strlen($contact_message) < 15) { + $error['message'] = "Please enter your message. It should have at least 15 characters."; + } + // Subject + if ($subject == '') { + $subject = "benharr.is message from $name"; + } else { + $subject = "benharr.is message from $name: $subject"; + } + + + // Set Message + $message .= "Email from: " . $name . "<br />"; + $message .= "Email address: " . $email . "<br />"; + $message .= "Message: <br /><pre>"; + $message .= $contact_message; + $message .= "</pre><br /> ----- <br /> This email was sent from your site's contact form. <br />"; + + // Set From: header + $from = $name . " <" . $email . ">"; + + // Email Headers + $headers = "From: admin<admin@gingko>\r\n"; + $headers .= "Reply-To: ". $email . "\r\n"; + $headers .= "MIME-Version: 1.0\r\n"; + $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; + + + if (count($error) == 0) { + + ini_set("sendmail_from", $siteOwnersEmail); // for windows server + $mail = mail($siteOwnersEmail, $subject, $message, $headers); + + if ($mail) { + echo "OK"; + } else { + echo "Something went wrong. Please try again."; + } + + } else { + + $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null; + $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null; + $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null; + + echo $response; + + } # end if - there was a validation error + +} + diff --git a/index.php b/index.php index 8065e6f..ba2888b 100644 --- a/index.php +++ b/index.php @@ -1,426 +1,426 @@ -<?php -include 'header.php'; -?> - <!-- Header - ================================================== --> - <header id="home"> - - <nav id="nav-wrap"> - - <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a> - <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a> - - <ul id="nav" class="nav"> - <li class="current"> - <a class="smoothscroll" href="#home">Home</a> - </li> - <li> - <a class="smoothscroll" href="#about">About</a> - </li> - <li> - <a class="smoothscroll" href="#resume">Resume</a> - </li> - <li> - <a class="smoothscroll" href="#contact">Contact</a> - </li> - </ul> - <!-- end #nav --> - - </nav> - <!-- end #nav-wrap --> - - <div class="row banner"> - <div class="banner-text"> - <h1 class="responsive-headline">Hello, - <br>I'm Benjamin Harris</h1> - <hr> - <h3> - <a class="smoothscroll" href="#about">I'm a Michigan-based software developer. Scroll down to learn more.</a> - </h3> - <hr /> - <?php include 'social.html'; ?> - </div> - </div> - - <p class="scrolldown"> - <a class="smoothscroll" href="#about"> - <i class="icon-down-circle"></i> - </a> - </p> - - </header> - <!-- Header End --> - - - <!-- About Section - ================================================== --> - <section id="about"> - - <div class="row"> - - <div class="three columns"> - - <img class="profile-pic" src="images/profilepic.jpg" alt="" /> - - </div> - - <div class="nine columns main-col"> - - <h2>About Me</h2> - - <p>I studied computer science at Northern Michigan University. I'm into full-stack web development. I love to - travel and have lived in Ecuador and Switzerland. - </p> - - <p>Check out what I'm up to - <a href="/now">now</a>.</p> - - <div class="row"> - - <div class="columns download"> - <p> - <a href="/resume.pdf" class="button"> - <i class="fa fa-download"></i>Download/View Resume</a> - </p> - </div> - - </div> - <!-- end row --> - - </div> - <!-- end .main-col --> - - </div> - - </section> - <!-- About Section End--> - - - <!-- Resume Section - ================================================== --> - <section id="resume"> - - <!-- Education - ----------------------------------------------- --> - <div class="row education"> - - <div class="three columns header-col"> - <h1> - <span>Education</span> - </h1> - </div> - - <div class="nine columns main-col"> - - <div class="row item"> - - <div class="twelve columns"> - - <h3>Northern Michigan University</h3> - <p class="info">Bachelor of Arts - Computer Science/Economics double major, Mathematics minor - <span>•</span> - <em class="date">August 2013 - May 2017</em> - </p> - - <p> - Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable - code. - </p> - - </div> - - </div> - <!-- item end --> - - <div class="row item"> - - <div class="twelve columns"> - - <h3>Zurich University of Applied Sciences (ZHAW)</h3> - <p class="info">Study Abroad Exchange Semester - <span>•</span> - <em class="date">February - July 2015</em> - </p> - - <p> - Continued Computer Science coursework in German. - </p> - - </div> - - </div> - <!-- item end --> - - </div> - <!-- main-col end --> - - </div> - <!-- End Education --> - - - <!-- Work - ----------------------------------------------- --> - <div class="row work"> - - <div class="three columns header-col"> - <h1> - <span>Work</span> - </h1> - </div> - - <div class="nine columns main-col"> - - <div class="row item"> - - <div class="twelve columns"> - - <h3>Hagerty Insurance Agency</h3> - <p class="info">Developer - <span>•</span> - <em class="date">December 2017 - Present</em> - </p> - - <p> - Work on the Automation release train to improve business processes across the board. - </p> - - </div> - - </div> - <!-- item end --> - - <div class="row item"> - - <div class="twelve columns"> - - <h3>Hagerty Insurance Agency</h3> - <p class="info">Test Engineer - <span>•</span> - <em class="date">June - December 2017</em> - </p> - - <p> - Work on the Apps Development team to improve processes, verify code changes, and collaborate with business stakeholders to - ensure software results and performance. - </p> - - </div> - - </div> - <!-- item end --> - - <div class="row item"> - - <div class="twelve columns"> - - <h3>Northern Michigan University</h3> - <p class="info">Student Programmer, Business Intelligence/Information Systems - <span>•</span> - <em class="date">May 2014 - May 2017</em> - </p> - - <p> - Worked under Enterprise Software Director to build web applications meant for internal student and staff use. Gained skills - and experience in self-direction and full-stack web development, including PHP, Oracle SQL, jQuery, - and Bootstrap. - </p> - - </div> - - </div> - <!-- item end --> - - <div class="row item"> - - <div class="twelve columns"> - - <h3>Iron Fish Distillery</h3> - <p class="info">App Developer/Webmaster - <span>•</span> - <em class="date">June 2016 - Present</em> - </p> - - <p> - Build and maintain several web applications for internal use. Also in charge of maintenance of the current Wordpress site. - </p> - - </div> - - </div> - <!-- item end --> - - </div> - <!-- main-col end --> - - </div> - <!-- End Work --> - - - <!-- Skills - ----------------------------------------------- --> - <div class="row skill"> - - <div class="three columns header-col"> - <h1> - <span>Skills</span> - </h1> - </div> - - <div class="nine columns main-col"> - - <p>There are some of my most notable skills: - </p> - - <div class="bars"> - - <ul class="skills"> - <li> - <span class="bar-expand php"></span> - <em>PHP</em> - </li> - <li> - <span class="bar-expand sql"></span> - <em>SQL</em> - </li> - <li> - <span class="bar-expand python"></span> - <em>python</em> - </li> - <li> - <span class="bar-expand cpp"></span> - <em>C++</em> - </li> - <li> - <span class="bar-expand jquery"></span> - <em>jQuery</em> - </li> - <li> - <span class="bar-expand unix-admin"></span> - <em>Unix Administration</em> - </li> - <li> - <span class="bar-expand git"></span> - <em>Git</em> - </li> - <li> - <span class="bar-expand unit-testing"></span> - <em>Unit Testing</em> - </li> - <li> - <span class="bar-expand bootstrap"></span> - <em>Bootstrap</em> - </li> - </ul> - - </div> - <!-- end skill-bars --> - - </div> - <!-- main-col end --> - - </div> - <!-- End skills --> - - </section> - <!-- Resume Section End--> - - - - <!-- Contact Section - ================================================== --> - <section id="contact"> - - <div class="row section-head"> - - <div class="two columns header-col"> - - <h1> - <span>Get In Touch.</span> - </h1> - - </div> - - <div class="ten columns"> - - <p class="lead">Let me know if you have any cool ideas or want to work together on something! Feel free to send me a message - on - <a href="https://t.me/bharris">Telegram</a> or send me an email with this form here.</p> - - </div> - - </div> - - <div class="row"> - - <div class="eight columns"> - - <!-- form --> - <form action="" method="post" id="contactForm" name="contactForm"> - <fieldset> - - <div> - <label for="contactName">Name - <span class="required">*</span> - </label> - <input type="text" value="" size="35" id="contactName" name="contactName"> - </div> - - <div> - <label for="contactEmail">Email - <span class="required">*</span> - </label> - <input type="text" value="" size="35" id="contactEmail" name="contactEmail"> - </div> - - <div> - <label for="contactSubject">Subject</label> - <input type="text" value="" size="35" id="contactSubject" name="contactSubject"> - </div> - - <div> - <label for="contactMessage">Message - <span class="required">*</span> - </label> - <textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea> - </div> - - <div> - <button class="submit">Submit</button> - <span id="image-loader"> - <img alt="" src="images/loader.gif"> - </span> - </div> - - </fieldset> - </form> - <!-- Form End --> - - <!-- contact-warning --> - <div id="message-warning"> Error boy</div> - <!-- contact-success --> - <div id="message-success"> - <i class="fa fa-check"></i>Your message was sent, thank you! - <br> - </div> - - </div> - - - <aside class="four columns footer-widgets"> - - <div class="widget widget_contact"> - - <h4>Hi!</h4> - <p>I look forward to hearing from you!</p> - - </div> - - </aside> - - </div> - - </section> - <!-- Contact Section End--> - - - <?php include 'footer.php'; +<?php +include 'header.php'; +?> + <!-- Header + ================================================== --> + <header id="home"> + + <nav id="nav-wrap"> + + <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a> + <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a> + + <ul id="nav" class="nav"> + <li class="current"> + <a class="smoothscroll" href="#home">Home</a> + </li> + <li> + <a class="smoothscroll" href="#about">About</a> + </li> + <li> + <a class="smoothscroll" href="#resume">Resume</a> + </li> + <li> + <a class="smoothscroll" href="#contact">Contact</a> + </li> + </ul> + <!-- end #nav --> + + </nav> + <!-- end #nav-wrap --> + + <div class="row banner"> + <div class="banner-text"> + <h1 class="responsive-headline">Hello, + <br>I'm Benjamin Harris</h1> + <hr> + <h3> + <a class="smoothscroll" href="#about">I'm a Michigan-based software developer. Scroll down to learn more.</a> + </h3> + <hr /> + <?php include 'social.html'; ?> + </div> + </div> + + <p class="scrolldown"> + <a class="smoothscroll" href="#about"> + <i class="icon-down-circle"></i> + </a> + </p> + + </header> + <!-- Header End --> + + + <!-- About Section + ================================================== --> + <section id="about"> + + <div class="row"> + + <div class="three columns"> + + <img class="profile-pic" src="images/profilepic.jpg" alt="" /> + + </div> + + <div class="nine columns main-col"> + + <h2>About Me</h2> + + <p>I studied computer science at Northern Michigan University. I'm into full-stack web development. I love to + travel and have lived in Ecuador and Switzerland. + </p> + + <p>Check out what I'm up to + <a href="/now">now</a>.</p> + + <div class="row"> + + <div class="columns download"> + <p> + <a href="/resume.pdf" class="button"> + <i class="fa fa-download"></i>Download/View Resume</a> + </p> + </div> + + </div> + <!-- end row --> + + </div> + <!-- end .main-col --> + + </div> + + </section> + <!-- About Section End--> + + + <!-- Resume Section + ================================================== --> + <section id="resume"> + + <!-- Education + ----------------------------------------------- --> + <div class="row education"> + + <div class="three columns header-col"> + <h1> + <span>Education</span> + </h1> + </div> + + <div class="nine columns main-col"> + + <div class="row item"> + + <div class="twelve columns"> + + <h3>Northern Michigan University</h3> + <p class="info">Bachelor of Arts - Computer Science/Economics double major, Mathematics minor + <span>•</span> + <em class="date">August 2013 - May 2017</em> + </p> + + <p> + Standard Computer Science curriculum with an emphasis on Test-Driven development, agile development, and sturdy, maintainable + code. + </p> + + </div> + + </div> + <!-- item end --> + + <div class="row item"> + + <div class="twelve columns"> + + <h3>Zurich University of Applied Sciences (ZHAW)</h3> + <p class="info">Study Abroad Exchange Semester + <span>•</span> + <em class="date">February - July 2015</em> + </p> + + <p> + Continued Computer Science coursework in German. + </p> + + </div> + + </div> + <!-- item end --> + + </div> + <!-- main-col end --> + + </div> + <!-- End Education --> + + + <!-- Work + ----------------------------------------------- --> + <div class="row work"> + + <div class="three columns header-col"> + <h1> + <span>Work</span> + </h1> + </div> + + <div class="nine columns main-col"> + + <div class="row item"> + + <div class="twelve columns"> + + <h3>Hagerty Insurance Agency</h3> + <p class="info">Developer + <span>•</span> + <em class="date">December 2017 - Present</em> + </p> + + <p> + Work on the Automation release train to improve business processes across the board. + </p> + + </div> + + </div> + <!-- item end --> + + <div class="row item"> + + <div class="twelve columns"> + + <h3>Hagerty Insurance Agency</h3> + <p class="info">Test Engineer + <span>•</span> + <em class="date">June - December 2017</em> + </p> + + <p> + Work on the Apps Development team to improve processes, verify code changes, and collaborate with business stakeholders to + ensure software results and performance. + </p> + + </div> + + </div> + <!-- item end --> + + <div class="row item"> + + <div class="twelve columns"> + + <h3>Northern Michigan University</h3> + <p class="info">Student Programmer, Business Intelligence/Information Systems + <span>•</span> + <em class="date">May 2014 - May 2017</em> + </p> + + <p> + Worked under Enterprise Software Director to build web applications meant for internal student and staff use. Gained skills + and experience in self-direction and full-stack web development, including PHP, Oracle SQL, jQuery, + and Bootstrap. + </p> + + </div> + + </div> + <!-- item end --> + + <div class="row item"> + + <div class="twelve columns"> + + <h3>Iron Fish Distillery</h3> + <p class="info">App Developer/Webmaster + <span>•</span> + <em class="date">June 2016 - Present</em> + </p> + + <p> + Build and maintain several web applications for internal use. Also in charge of maintenance of the current Wordpress site. + </p> + + </div> + + </div> + <!-- item end --> + + </div> + <!-- main-col end --> + + </div> + <!-- End Work --> + + + <!-- Skills + ----------------------------------------------- --> + <div class="row skill"> + + <div class="three columns header-col"> + <h1> + <span>Skills</span> + </h1> + </div> + + <div class="nine columns main-col"> + + <p>There are some of my most notable skills: + </p> + + <div class="bars"> + + <ul class="skills"> + <li> + <span class="bar-expand php"></span> + <em>PHP</em> + </li> + <li> + <span class="bar-expand sql"></span> + <em>SQL</em> + </li> + <li> + <span class="bar-expand python"></span> + <em>python</em> + </li> + <li> + <span class="bar-expand cpp"></span> + <em>C++</em> + </li> + <li> + <span class="bar-expand jquery"></span> + <em>jQuery</em> + </li> + <li> + <span class="bar-expand unix-admin"></span> + <em>Unix Administration</em> + </li> + <li> + <span class="bar-expand git"></span> + <em>Git</em> + </li> + <li> + <span class="bar-expand unit-testing"></span> + <em>Unit Testing</em> + </li> + <li> + <span class="bar-expand bootstrap"></span> + <em>Bootstrap</em> + </li> + </ul> + + </div> + <!-- end skill-bars --> + + </div> + <!-- main-col end --> + + </div> + <!-- End skills --> + + </section> + <!-- Resume Section End--> + + + + <!-- Contact Section + ================================================== --> + <section id="contact"> + + <div class="row section-head"> + + <div class="two columns header-col"> + + <h1> + <span>Get In Touch.</span> + </h1> + + </div> + + <div class="ten columns"> + + <p class="lead">Let me know if you have any cool ideas or want to work together on something! Feel free to send me a message + on + <a href="https://t.me/bharris">Telegram</a> or send me an email with this form here.</p> + + </div> + + </div> + + <div class="row"> + + <div class="eight columns"> + + <!-- form --> + <form action="" method="post" id="contactForm" name="contactForm"> + <fieldset> + + <div> + <label for="contactName">Name + <span class="required">*</span> + </label> + <input type="text" value="" size="35" id="contactName" name="contactName"> + </div> + + <div> + <label for="contactEmail">Email + <span class="required">*</span> + </label> + <input type="text" value="" size="35" id="contactEmail" name="contactEmail"> + </div> + + <div> + <label for="contactSubject">Subject</label> + <input type="text" value="" size="35" id="contactSubject" name="contactSubject"> + </div> + + <div> + <label for="contactMessage">Message + <span class="required">*</span> + </label> + <textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea> + </div> + + <div> + <button class="submit">Submit</button> + <span id="image-loader"> + <img alt="" src="images/loader.gif"> + </span> + </div> + + </fieldset> + </form> + <!-- Form End --> + + <!-- contact-warning --> + <div id="message-warning"> Error boy</div> + <!-- contact-success --> + <div id="message-success"> + <i class="fa fa-check"></i>Your message was sent, thank you! + <br> + </div> + + </div> + + + <aside class="four columns footer-widgets"> + + <div class="widget widget_contact"> + + <h4>Hi!</h4> + <p>I look forward to hearing from you!</p> + + </div> + + </aside> + + </div> + + </section> + <!-- Contact Section End--> + + + <?php include 'footer.php'; diff --git a/js/init.js b/js/init.js index 9d6ae2c..e9df104 100644 --- a/js/init.js +++ b/js/init.js @@ -1,188 +1,188 @@ -/*----------------------------------------------------------------------------------- -/* -/* Init JS -/* ------------------------------------------------------------------------------------*/ - - jQuery(document).ready(function($) { - -/*----------------------------------------------------*/ -/* FitText Settings ------------------------------------------------------- */ - - setTimeout(function() { - $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); - }, 100); - - -/*----------------------------------------------------*/ -/* Smooth Scrolling ------------------------------------------------------- */ - - $('.smoothscroll').on('click',function (e) { - e.preventDefault(); - - var target = this.hash, - $target = $(target); - - $('html, body').stop().animate({ - 'scrollTop': $target.offset().top - }, 800, 'swing', function () { - window.location.hash = target; - }); - }); - - -/*----------------------------------------------------*/ -/* Highlight the current section in the navigation bar -------------------------------------------------------*/ - - var sections = $("section"); - var navigation_links = $("#nav-wrap a"); - - sections.waypoint({ - - handler: function(event, direction) { - - var active_section; - - active_section = $(this); - if (direction === "up") active_section = active_section.prev(); - - var active_link = $('#nav-wrap a[href="#' + active_section.attr("id") + '"]'); - - navigation_links.parent().removeClass("current"); - active_link.parent().addClass("current"); - - }, - offset: '35%' - - }); - - -/*----------------------------------------------------*/ -/* Make sure that #header-background-image height is -/* equal to the browser height. ------------------------------------------------------- */ - - $('header').css({ 'height': $(window).height() }); - $(window).on('resize', function() { - - $('header').css({ 'height': $(window).height() }); - $('body').css({ 'width': $(window).width() }) - }); - - -/*----------------------------------------------------*/ -/* Fade In/Out Primary Navigation -------------------------------------------------------*/ - - $(window).on('scroll', function() { - - var h = $('header').height(); - var y = $(window).scrollTop(); - var nav = $('#nav-wrap'); - - if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { - nav.fadeOut('fast'); - } - else { - if (y < h*.20) { - nav.removeClass('opaque').fadeIn('fast'); - } - else { - nav.addClass('opaque').fadeIn('fast'); - } - } - - }); - - -/*----------------------------------------------------*/ -/* Modal Popup -------------------------------------------------------*/ - - $('.item-wrap a').magnificPopup({ - - type:'inline', - fixedContentPos: false, - removalDelay: 200, - showCloseBtn: false, - mainClass: 'mfp-fade' - - }); - - $(document).on('click', '.popup-modal-dismiss', function (e) { - e.preventDefault(); - $.magnificPopup.close(); - }); - - -/*----------------------------------------------------*/ -/* Flexslider -/*----------------------------------------------------*/ - $('.flexslider').flexslider({ - namespace: "flex-", - controlsContainer: ".flex-container", - animation: 'slide', - controlNav: true, - directionNav: false, - smoothHeight: true, - slideshowSpeed: 7000, - animationSpeed: 600, - randomize: false, - }); - -/*----------------------------------------------------*/ -/* contact form -------------------------------------------------------*/ - - $('form#contactForm button.submit').click(function() { - - $('#image-loader').fadeIn(); - - var contactName = $('#contactForm #contactName').val(); - var contactEmail = $('#contactForm #contactEmail').val(); - var contactSubject = $('#contactForm #contactSubject').val(); - var contactMessage = $('#contactForm #contactMessage').val(); - - var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail + - '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage; - console.log(data); - $.ajax({ - - type: "POST", - url: "inc/sendEmail.php", - data: data, - success: function(msg) { - console.log(msg); - // Message was sent - if (msg == 'OK') { - $('#image-loader').fadeOut(); - $('#message-warning').hide(); - $('#contactForm').fadeOut(); - $('#message-success').fadeIn(); - } - // There was an error - else { - $('#image-loader').fadeOut(); - $('#message-warning').html(msg); - $('#message-warning').fadeIn(); - } - - } - - }); - return false; - }); - - -}); - - - - - - - - +/*----------------------------------------------------------------------------------- +/* +/* Init JS +/* +-----------------------------------------------------------------------------------*/ + + jQuery(document).ready(function($) { + +/*----------------------------------------------------*/ +/* FitText Settings +------------------------------------------------------ */ + + setTimeout(function() { + $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); + }, 100); + + +/*----------------------------------------------------*/ +/* Smooth Scrolling +------------------------------------------------------ */ + + $('.smoothscroll').on('click',function (e) { + e.preventDefault(); + + var target = this.hash, + $target = $(target); + + $('html, body').stop().animate({ + 'scrollTop': $target.offset().top + }, 800, 'swing', function () { + window.location.hash = target; + }); + }); + + +/*----------------------------------------------------*/ +/* Highlight the current section in the navigation bar +------------------------------------------------------*/ + + var sections = $("section"); + var navigation_links = $("#nav-wrap a"); + + sections.waypoint({ + + handler: function(event, direction) { + + var active_section; + + active_section = $(this); + if (direction === "up") active_section = active_section.prev(); + + var active_link = $('#nav-wrap a[href="#' + active_section.attr("id") + '"]'); + + navigation_links.parent().removeClass("current"); + active_link.parent().addClass("current"); + + }, + offset: '35%' + + }); + + +/*----------------------------------------------------*/ +/* Make sure that #header-background-image height is +/* equal to the browser height. +------------------------------------------------------ */ + + $('header').css({ 'height': $(window).height() }); + $(window).on('resize', function() { + + $('header').css({ 'height': $(window).height() }); + $('body').css({ 'width': $(window).width() }) + }); + + +/*----------------------------------------------------*/ +/* Fade In/Out Primary Navigation +------------------------------------------------------*/ + + $(window).on('scroll', function() { + + var h = $('header').height(); + var y = $(window).scrollTop(); + var nav = $('#nav-wrap'); + + if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { + nav.fadeOut('fast'); + } + else { + if (y < h*.20) { + nav.removeClass('opaque').fadeIn('fast'); + } + else { + nav.addClass('opaque').fadeIn('fast'); + } + } + + }); + + +/*----------------------------------------------------*/ +/* Modal Popup +------------------------------------------------------*/ + + $('.item-wrap a').magnificPopup({ + + type:'inline', + fixedContentPos: false, + removalDelay: 200, + showCloseBtn: false, + mainClass: 'mfp-fade' + + }); + + $(document).on('click', '.popup-modal-dismiss', function (e) { + e.preventDefault(); + $.magnificPopup.close(); + }); + + +/*----------------------------------------------------*/ +/* Flexslider +/*----------------------------------------------------*/ + $('.flexslider').flexslider({ + namespace: "flex-", + controlsContainer: ".flex-container", + animation: 'slide', + controlNav: true, + directionNav: false, + smoothHeight: true, + slideshowSpeed: 7000, + animationSpeed: 600, + randomize: false, + }); + +/*----------------------------------------------------*/ +/* contact form +------------------------------------------------------*/ + + $('form#contactForm button.submit').click(function() { + + $('#image-loader').fadeIn(); + + var contactName = $('#contactForm #contactName').val(); + var contactEmail = $('#contactForm #contactEmail').val(); + var contactSubject = $('#contactForm #contactSubject').val(); + var contactMessage = $('#contactForm #contactMessage').val(); + + var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail + + '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage; + console.log(data); + $.ajax({ + + type: "POST", + url: "inc/sendEmail.php", + data: data, + success: function(msg) { + console.log(msg); + // Message was sent + if (msg == 'OK') { + $('#image-loader').fadeOut(); + $('#message-warning').hide(); + $('#contactForm').fadeOut(); + $('#message-success').fadeIn(); + } + // There was an error + else { + $('#image-loader').fadeOut(); + $('#message-warning').html(msg); + $('#message-warning').fadeIn(); + } + + } + + }); + return false; + }); + + +}); + + + + + + + + diff --git a/js/magnific-popup.js b/js/magnific-popup.js index e6ee0ce..ca4184c 100644 --- a/js/magnific-popup.js +++ b/js/magnific-popup.js @@ -1,3 +1,3 @@ -// Magnific Popup v0.9.9 by Dmitry Semenov -// http://bit.ly/magnific-popup#build=inline+image+retina+imagezoom+fastclick +// Magnific Popup v0.9.9 by Dmitry Semenov +// http://bit.ly/magnific-popup#build=inline+image+retina+imagezoom+fastclick (function(a){var b="Close",c="BeforeClose",d="AfterClose",e="BeforeAppend",f="MarkupParse",g="Open",h="Change",i="mfp",j="."+i,k="mfp-ready",l="mfp-removing",m="mfp-prevent-close",n,o=function(){},p=!!window.jQuery,q,r=a(window),s,t,u,v,w,x=function(a,b){n.ev.on(i+a+j,b)},y=function(b,c,d,e){var f=document.createElement("div");return f.className="mfp-"+b,d&&(f.innerHTML=d),e?c&&c.appendChild(f):(f=a(f),c&&f.appendTo(c)),f},z=function(b,c){n.ev.triggerHandler(i+b,c),n.st.callbacks&&(b=b.charAt(0).toLowerCase()+b.slice(1),n.st.callbacks[b]&&n.st.callbacks[b].apply(n,a.isArray(c)?c:[c]))},A=function(b){if(b!==w||!n.currTemplate.closeBtn)n.currTemplate.closeBtn=a(n.st.closeMarkup.replace("%title%",n.st.tClose)),w=b;return n.currTemplate.closeBtn},B=function(){a.magnificPopup.instance||(n=new o,n.init(),a.magnificPopup.instance=n)},C=function(){var a=document.createElement("p").style,b=["ms","O","Moz","Webkit"];if(a.transition!==undefined)return!0;while(b.length)if(b.pop()+"Transition"in a)return!0;return!1};o.prototype={constructor:o,init:function(){var b=navigator.appVersion;n.isIE7=b.indexOf("MSIE 7.")!==-1,n.isIE8=b.indexOf("MSIE 8.")!==-1,n.isLowIE=n.isIE7||n.isIE8,n.isAndroid=/android/gi.test(b),n.isIOS=/iphone|ipad|ipod/gi.test(b),n.supportsTransition=C(),n.probablyMobile=n.isAndroid||n.isIOS||/(Opera Mini)|Kindle|webOS|BlackBerry|(Opera Mobi)|(Windows Phone)|IEMobile/i.test(navigator.userAgent),t=a(document),n.popupsCache={}},open:function(b){s||(s=a(document.body));var c;if(b.isObj===!1){n.items=b.items.toArray(),n.index=0;var d=b.items,e;for(c=0;c<d.length;c++){e=d[c],e.parsed&&(e=e.el[0]);if(e===b.el[0]){n.index=c;break}}}else n.items=a.isArray(b.items)?b.items:[b.items],n.index=b.index||0;if(n.isOpen){n.updateItemHTML();return}n.types=[],v="",b.mainEl&&b.mainEl.length?n.ev=b.mainEl.eq(0):n.ev=t,b.key?(n.popupsCache[b.key]||(n.popupsCache[b.key]={}),n.currTemplate=n.popupsCache[b.key]):n.currTemplate={},n.st=a.extend(!0,{},a.magnificPopup.defaults,b),n.fixedContentPos=n.st.fixedContentPos==="auto"?!n.probablyMobile:n.st.fixedContentPos,n.st.modal&&(n.st.closeOnContentClick=!1,n.st.closeOnBgClick=!1,n.st.showCloseBtn=!1,n.st.enableEscapeKey=!1),n.bgOverlay||(n.bgOverlay=y("bg").on("click"+j,function(){n.close()}),n.wrap=y("wrap").attr("tabindex",-1).on("click"+j,function(a){n._checkIfClose(a.target)&&n.close()}),n.container=y("container",n.wrap)),n.contentContainer=y("content"),n.st.preloader&&(n.preloader=y("preloader",n.container,n.st.tLoading));var h=a.magnificPopup.modules;for(c=0;c<h.length;c++){var i=h[c];i=i.charAt(0).toUpperCase()+i.slice(1),n["init"+i].call(n)}z("BeforeOpen"),n.st.showCloseBtn&&(n.st.closeBtnInside?(x(f,function(a,b,c,d){c.close_replaceWith=A(d.type)}),v+=" mfp-close-btn-in"):n.wrap.append(A())),n.st.alignTop&&(v+=" mfp-align-top"),n.fixedContentPos?n.wrap.css({overflow:n.st.overflowY,overflowX:"hidden",overflowY:n.st.overflowY}):n.wrap.css({top:r.scrollTop(),position:"absolute"}),(n.st.fixedBgPos===!1||n.st.fixedBgPos==="auto"&&!n.fixedContentPos)&&n.bgOverlay.css({height:t.height(),position:"absolute"}),n.st.enableEscapeKey&&t.on("keyup"+j,function(a){a.keyCode===27&&n.close()}),r.on("resize"+j,function(){n.updateSize()}),n.st.closeOnContentClick||(v+=" mfp-auto-cursor"),v&&n.wrap.addClass(v);var l=n.wH=r.height(),m={};if(n.fixedContentPos&&n._hasScrollBar(l)){var o=n._getScrollbarSize();o&&(m.marginRight=o)}n.fixedContentPos&&(n.isIE7?a("body, html").css("overflow","hidden"):m.overflow="hidden");var p=n.st.mainClass;return n.isIE7&&(p+=" mfp-ie7"),p&&n._addClassToMFP(p),n.updateItemHTML(),z("BuildControls"),a("html").css(m),n.bgOverlay.add(n.wrap).prependTo(n.st.prependTo||s),n._lastFocusedEl=document.activeElement,setTimeout(function(){n.content?(n._addClassToMFP(k),n._setFocus()):n.bgOverlay.addClass(k),t.on("focusin"+j,n._onFocusIn)},16),n.isOpen=!0,n.updateSize(l),z(g),b},close:function(){if(!n.isOpen)return;z(c),n.isOpen=!1,n.st.removalDelay&&!n.isLowIE&&n.supportsTransition?(n._addClassToMFP(l),setTimeout(function(){n._close()},n.st.removalDelay)):n._close()},_close:function(){z(b);var c=l+" "+k+" ";n.bgOverlay.detach(),n.wrap.detach(),n.container.empty(),n.st.mainClass&&(c+=n.st.mainClass+" "),n._removeClassFromMFP(c);if(n.fixedContentPos){var e={marginRight:""};n.isIE7?a("body, html").css("overflow",""):e.overflow="",a("html").css(e)}t.off("keyup"+j+" focusin"+j),n.ev.off(j),n.wrap.attr("class","mfp-wrap").removeAttr("style"),n.bgOverlay.attr("class","mfp-bg"),n.container.attr("class","mfp-container"),n.st.showCloseBtn&&(!n.st.closeBtnInside||n.currTemplate[n.currItem.type]===!0)&&n.currTemplate.closeBtn&&n.currTemplate.closeBtn.detach(),n._lastFocusedEl&&a(n._lastFocusedEl).focus(),n.currItem=null,n.content=null,n.currTemplate=null,n.prevHeight=0,z(d)},updateSize:function(a){if(n.isIOS){var b=document.documentElement.clientWidth/window.innerWidth,c=window.innerHeight*b;n.wrap.css("height",c),n.wH=c}else n.wH=a||r.height();n.fixedContentPos||n.wrap.css("height",n.wH),z("Resize")},updateItemHTML:function(){var b=n.items[n.index];n.contentContainer.detach(),n.content&&n.content.detach(),b.parsed||(b=n.parseEl(n.index));var c=b.type;z("BeforeChange",[n.currItem?n.currItem.type:"",c]),n.currItem=b;if(!n.currTemplate[c]){var d=n.st[c]?n.st[c].markup:!1;z("FirstMarkupParse",d),d?n.currTemplate[c]=a(d):n.currTemplate[c]=!0}u&&u!==b.type&&n.container.removeClass("mfp-"+u+"-holder");var e=n["get"+c.charAt(0).toUpperCase()+c.slice(1)](b,n.currTemplate[c]);n.appendContent(e,c),b.preloaded=!0,z(h,b),u=b.type,n.container.prepend(n.contentContainer),z("AfterChange")},appendContent:function(a,b){n.content=a,a?n.st.showCloseBtn&&n.st.closeBtnInside&&n.currTemplate[b]===!0?n.content.find(".mfp-close").length||n.content.append(A()):n.content=a:n.content="",z(e),n.container.addClass("mfp-"+b+"-holder"),n.contentContainer.append(n.content)},parseEl:function(b){var c=n.items[b],d;c.tagName?c={el:a(c)}:(d=c.type,c={data:c,src:c.src});if(c.el){var e=n.types;for(var f=0;f<e.length;f++)if(c.el.hasClass("mfp-"+e[f])){d=e[f];break}c.src=c.el.attr("data-mfp-src"),c.src||(c.src=c.el.attr("href"))}return c.type=d||n.st.type||"inline",c.index=b,c.parsed=!0,n.items[b]=c,z("ElementParse",c),n.items[b]},addGroup:function(a,b){var c=function(c){c.mfpEl=this,n._openClick(c,a,b)};b||(b={});var d="click.magnificPopup";b.mainEl=a,b.items?(b.isObj=!0,a.off(d).on(d,c)):(b.isObj=!1,b.delegate?a.off(d).on(d,b.delegate,c):(b.items=a,a.off(d).on(d,c)))},_openClick:function(b,c,d){var e=d.midClick!==undefined?d.midClick:a.magnificPopup.defaults.midClick;if(!e&&(b.which===2||b.ctrlKey||b.metaKey))return;var f=d.disableOn!==undefined?d.disableOn:a.magnificPopup.defaults.disableOn;if(f)if(a.isFunction(f)){if(!f.call(n))return!0}else if(r.width()<f)return!0;b.type&&(b.preventDefault(),n.isOpen&&b.stopPropagation()),d.el=a(b.mfpEl),d.delegate&&(d.items=c.find(d.delegate)),n.open(d)},updateStatus:function(a,b){if(n.preloader){q!==a&&n.container.removeClass("mfp-s-"+q),!b&&a==="loading"&&(b=n.st.tLoading);var c={status:a,text:b};z("UpdateStatus",c),a=c.status,b=c.text,n.preloader.html(b),n.preloader.find("a").on("click",function(a){a.stopImmediatePropagation()}),n.container.addClass("mfp-s-"+a),q=a}},_checkIfClose:function(b){if(a(b).hasClass(m))return;var c=n.st.closeOnContentClick,d=n.st.closeOnBgClick;if(c&&d)return!0;if(!n.content||a(b).hasClass("mfp-close")||n.preloader&&b===n.preloader[0])return!0;if(b!==n.content[0]&&!a.contains(n.content[0],b)){if(d&&a.contains(document,b))return!0}else if(c)return!0;return!1},_addClassToMFP:function(a){n.bgOverlay.addClass(a),n.wrap.addClass(a)},_removeClassFromMFP:function(a){this.bgOverlay.removeClass(a),n.wrap.removeClass(a)},_hasScrollBar:function(a){return(n.isIE7?t.height():document.body.scrollHeight)>(a||r.height())},_setFocus:function(){(n.st.focus?n.content.find(n.st.focus).eq(0):n.wrap).focus()},_onFocusIn:function(b){if(b.target!==n.wrap[0]&&!a.contains(n.wrap[0],b.target))return n._setFocus(),!1},_parseMarkup:function(b,c,d){var e;d.data&&(c=a.extend(d.data,c)),z(f,[b,c,d]),a.each(c,function(a,c){if(c===undefined||c===!1)return!0;e=a.split("_");if(e.length>1){var d=b.find(j+"-"+e[0]);if(d.length>0){var f=e[1];f==="replaceWith"?d[0]!==c[0]&&d.replaceWith(c):f==="img"?d.is("img")?d.attr("src",c):d.replaceWith('<img src="'+c+'" class="'+d.attr("class")+'" />'):d.attr(e[1],c)}}else b.find(j+"-"+a).html(c)})},_getScrollbarSize:function(){if(n.scrollbarSize===undefined){var a=document.createElement("div");a.id="mfp-sbm",a.style.cssText="width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(a),n.scrollbarSize=a.offsetWidth-a.clientWidth,document.body.removeChild(a)}return n.scrollbarSize}},a.magnificPopup={instance:null,proto:o.prototype,modules:[],open:function(b,c){return B(),b?b=a.extend(!0,{},b):b={},b.isObj=!0,b.index=c||0,this.instance.open(b)},close:function(){return a.magnificPopup.instance&&a.magnificPopup.instance.close()},registerModule:function(b,c){c.options&&(a.magnificPopup.defaults[b]=c.options),a.extend(this.proto,c.proto),this.modules.push(b)},defaults:{disableOn:0,key:null,midClick:!1,mainClass:"",preloader:!0,focus:"",closeOnContentClick:!1,closeOnBgClick:!0,closeBtnInside:!0,showCloseBtn:!0,enableEscapeKey:!0,modal:!1,alignTop:!1,removalDelay:0,prependTo:null,fixedContentPos:"auto",fixedBgPos:"auto",overflowY:"auto",closeMarkup:'<button title="%title%" type="button" class="mfp-close">×</button>',tClose:"Close (Esc)",tLoading:"Loading..."}},a.fn.magnificPopup=function(b){B();var c=a(this);if(typeof b=="string")if(b==="open"){var d,e=p?c.data("magnificPopup"):c[0].magnificPopup,f=parseInt(arguments[1],10)||0;e.items?d=e.items[f]:(d=c,e.delegate&&(d=d.find(e.delegate)),d=d.eq(f)),n._openClick({mfpEl:d},c,e)}else n.isOpen&&n[b].apply(n,Array.prototype.slice.call(arguments,1));else b=a.extend(!0,{},b),p?c.data("magnificPopup",b):c[0].magnificPopup=b,n.addGroup(c,b);return c};var D="inline",E,F,G,H=function(){G&&(F.after(G.addClass(E)).detach(),G=null)};a.magnificPopup.registerModule(D,{options:{hiddenClass:"hide",markup:"",tNotFound:"Content not found"},proto:{initInline:function(){n.types.push(D),x(b+"."+D,function(){H()})},getInline:function(b,c){H();if(b.src){var d=n.st.inline,e=a(b.src);if(e.length){var f=e[0].parentNode;f&&f.tagName&&(F||(E=d.hiddenClass,F=y(E),E="mfp-"+E),G=e.after(F).detach().removeClass(E)),n.updateStatus("ready")}else n.updateStatus("error",d.tNotFound),e=a("<div>");return b.inlineElement=e,e}return n.updateStatus("ready"),n._parseMarkup(c,{},b),c}}});var I,J=function(b){if(b.data&&b.data.title!==undefined)return b.data.title;var c=n.st.image.titleSrc;if(c){if(a.isFunction(c))return c.call(n,b);if(b.el)return b.el.attr(c)||""}return""};a.magnificPopup.registerModule("image",{options:{markup:'<div class="mfp-figure"><div class="mfp-close"></div><figure><div class="mfp-img"></div><figcaption><div class="mfp-bottom-bar"><div class="mfp-title"></div><div class="mfp-counter"></div></div></figcaption></figure></div>',cursor:"mfp-zoom-out-cur",titleSrc:"title",verticalFit:!0,tError:'<a href="%url%">The image</a> could not be loaded.'},proto:{initImage:function(){var a=n.st.image,c=".image";n.types.push("image"),x(g+c,function(){n.currItem.type==="image"&&a.cursor&&s.addClass(a.cursor)}),x(b+c,function(){a.cursor&&s.removeClass(a.cursor),r.off("resize"+j)}),x("Resize"+c,n.resizeImage),n.isLowIE&&x("AfterChange",n.resizeImage)},resizeImage:function(){var a=n.currItem;if(!a||!a.img)return;if(n.st.image.verticalFit){var b=0;n.isLowIE&&(b=parseInt(a.img.css("padding-top"),10)+parseInt(a.img.css("padding-bottom"),10)),a.img.css("max-height",n.wH-b)}},_onImageHasSize:function(a){a.img&&(a.hasSize=!0,I&&clearInterval(I),a.isCheckingImgSize=!1,z("ImageHasSize",a),a.imgHidden&&(n.content&&n.content.removeClass("mfp-loading"),a.imgHidden=!1))},findImageSize:function(a){var b=0,c=a.img[0],d=function(e){I&&clearInterval(I),I=setInterval(function(){if(c.naturalWidth>0){n._onImageHasSize(a);return}b>200&&clearInterval(I),b++,b===3?d(10):b===40?d(50):b===100&&d(500)},e)};d(1)},getImage:function(b,c){var d=0,e=function(){b&&(b.img[0].complete?(b.img.off(".mfploader"),b===n.currItem&&(n._onImageHasSize(b),n.updateStatus("ready")),b.hasSize=!0,b.loaded=!0,z("ImageLoadComplete")):(d++,d<200?setTimeout(e,100):f()))},f=function(){b&&(b.img.off(".mfploader"),b===n.currItem&&(n._onImageHasSize(b),n.updateStatus("error",g.tError.replace("%url%",b.src))),b.hasSize=!0,b.loaded=!0,b.loadError=!0)},g=n.st.image,h=c.find(".mfp-img");if(h.length){var i=document.createElement("img");i.className="mfp-img",b.img=a(i).on("load.mfploader",e).on("error.mfploader",f),i.src=b.src,h.is("img")&&(b.img=b.img.clone()),i=b.img[0],i.naturalWidth>0?b.hasSize=!0:i.width||(b.hasSize=!1)}return n._parseMarkup(c,{title:J(b),img_replaceWith:b.img},b),n.resizeImage(),b.hasSize?(I&&clearInterval(I),b.loadError?(c.addClass("mfp-loading"),n.updateStatus("error",g.tError.replace("%url%",b.src))):(c.removeClass("mfp-loading"),n.updateStatus("ready")),c):(n.updateStatus("loading"),b.loading=!0,b.hasSize||(b.imgHidden=!0,c.addClass("mfp-loading"),n.findImageSize(b)),c)}}});var K,L=function(){return K===undefined&&(K=document.createElement("p").style.MozTransform!==undefined),K};a.magnificPopup.registerModule("zoom",{options:{enabled:!1,easing:"ease-in-out",duration:300,opener:function(a){return a.is("img")?a:a.find("img")}},proto:{initZoom:function(){var a=n.st.zoom,d=".zoom",e;if(!a.enabled||!n.supportsTransition)return;var f=a.duration,g=function(b){var c=b.clone().removeAttr("style").removeAttr("class").addClass("mfp-animated-image"),d="all "+a.duration/1e3+"s "+a.easing,e={position:"fixed",zIndex:9999,left:0,top:0,"-webkit-backface-visibility":"hidden"},f="transition";return e["-webkit-"+f]=e["-moz-"+f]=e["-o-"+f]=e[f]=d,c.css(e),c},h=function(){n.content.css("visibility","visible")},i,j;x("BuildControls"+d,function(){if(n._allowZoom()){clearTimeout(i),n.content.css("visibility","hidden"),e=n._getItemToZoom();if(!e){h();return}j=g(e),j.css(n._getOffset()),n.wrap.append(j),i=setTimeout(function(){j.css(n._getOffset(!0)),i=setTimeout(function(){h(),setTimeout(function(){j.remove(),e=j=null,z("ZoomAnimationEnded")},16)},f)},16)}}),x(c+d,function(){if(n._allowZoom()){clearTimeout(i),n.st.removalDelay=f;if(!e){e=n._getItemToZoom();if(!e)return;j=g(e)}j.css(n._getOffset(!0)),n.wrap.append(j),n.content.css("visibility","hidden"),setTimeout(function(){j.css(n._getOffset())},16)}}),x(b+d,function(){n._allowZoom()&&(h(),j&&j.remove(),e=null)})},_allowZoom:function(){return n.currItem.type==="image"},_getItemToZoom:function(){return n.currItem.hasSize?n.currItem.img:!1},_getOffset:function(b){var c;b?c=n.currItem.img:c=n.st.zoom.opener(n.currItem.el||n.currItem);var d=c.offset(),e=parseInt(c.css("padding-top"),10),f=parseInt(c.css("padding-bottom"),10);d.top-=a(window).scrollTop()-e;var g={width:c.width(),height:(p?c.innerHeight():c[0].offsetHeight)-f-e};return L()?g["-moz-transform"]=g.transform="translate("+d.left+"px,"+d.top+"px)":(g.left=d.left,g.top=d.top),g}}});var M="retina";a.magnificPopup.registerModule(M,{options:{replaceSrc:function(a){return a.src.replace(/\.\w+$/,function(a){return"@2x"+a})},ratio:1},proto:{initRetina:function(){if(window.devicePixelRatio>1){var a=n.st.retina,b=a.ratio;b=isNaN(b)?b():b,b>1&&(x("ImageHasSize."+M,function(a,c){c.img.css({"max-width":c.img[0].naturalWidth/b,width:"100%"})}),x("ElementParse."+M,function(c,d){d.src=a.replaceSrc(d,b)}))}}}}),function(){var b=1e3,c="ontouchstart"in window,d=function(){r.off("touchmove"+f+" touchend"+f)},e="mfpFastClick",f="."+e;a.fn.mfpFastClick=function(e){return a(this).each(function(){var g=a(this),h;if(c){var i,j,k,l,m,n;g.on("touchstart"+f,function(a){l=!1,n=1,m=a.originalEvent?a.originalEvent.touches[0]:a.touches[0],j=m.clientX,k=m.clientY,r.on("touchmove"+f,function(a){m=a.originalEvent?a.originalEvent.touches:a.touches,n=m.length,m=m[0];if(Math.abs(m.clientX-j)>10||Math.abs(m.clientY-k)>10)l=!0,d()}).on("touchend"+f,function(a){d();if(l||n>1)return;h=!0,a.preventDefault(),clearTimeout(i),i=setTimeout(function(){h=!1},b),e()})})}g.on("click"+f,function(){h||e()})})},a.fn.destroyMfpFastClick=function(){a(this).off("touchstart"+f+" click"+f),c&&r.off("touchmove"+f+" touchend"+f)}}(),B()})(window.jQuery||window.Zepto) \ No newline at end of file diff --git a/js/now.js b/js/now.js index fd6a01b..5c40015 100644 --- a/js/now.js +++ b/js/now.js @@ -1,60 +1,60 @@ -/*----------------------------------------------------------------------------------- -/* -/* Now JS -/* ------------------------------------------------------------------------------------*/ - - jQuery(document).ready(function($) { - -/*----------------------------------------------------*/ -/* FitText Settings ------------------------------------------------------- */ - - setTimeout(function() { - $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); - }, 100); - - -/*----------------------------------------------------*/ -/* Make sure that #header-background-image height is -/* equal to the browser height. ------------------------------------------------------- */ - - $(window).on('resize', function() { - $('body').css({ 'width': $(window).width() }) - }); - - -/*----------------------------------------------------*/ -/* Fade In/Out Primary Navigation -------------------------------------------------------*/ - - $(window).on('scroll', function() { - - var h = $('header').height(); - var y = $(window).scrollTop(); - var nav = $('#nav-wrap'); - - if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { - nav.fadeOut('fast'); - } - else { - if (y < h*.20) { - nav.removeClass('opaque').fadeIn('fast'); - } - else { - nav.addClass('opaque').fadeIn('fast'); - } - } - - }); - - -}); - - - - - - - +/*----------------------------------------------------------------------------------- +/* +/* Now JS +/* +-----------------------------------------------------------------------------------*/ + + jQuery(document).ready(function($) { + +/*----------------------------------------------------*/ +/* FitText Settings +------------------------------------------------------ */ + + setTimeout(function() { + $('h1.responsive-headline').fitText(1, { minFontSize: '40px', maxFontSize: '90px' }); + }, 100); + + +/*----------------------------------------------------*/ +/* Make sure that #header-background-image height is +/* equal to the browser height. +------------------------------------------------------ */ + + $(window).on('resize', function() { + $('body').css({ 'width': $(window).width() }) + }); + + +/*----------------------------------------------------*/ +/* Fade In/Out Primary Navigation +------------------------------------------------------*/ + + $(window).on('scroll', function() { + + var h = $('header').height(); + var y = $(window).scrollTop(); + var nav = $('#nav-wrap'); + + if ( (y > h*.20) && (y < h) && ($(window).outerWidth() > 768 ) ) { + nav.fadeOut('fast'); + } + else { + if (y < h*.20) { + nav.removeClass('opaque').fadeIn('fast'); + } + else { + nav.addClass('opaque').fadeIn('fast'); + } + } + + }); + + +}); + + + + + + + diff --git a/social.html b/social.html index 36a86ae..611deda 100644 --- a/social.html +++ b/social.html @@ -1,37 +1,37 @@ -<ul class="social social-links"> - <li> - <a rel="me" href="https://github.com/benharri"> - <i class="fa fa-github"></i> - </a> - </li> - <li> - <a rel="me" href="https://t.me/bharris"> - <i class="fa fa-paper-plane"></i> - </a> - </li> - <li> - <a rel="me" href="https://twitter.com/nebsirrah"> - <i class="fa fa-twitter"></i> - </a> - </li> - <li> - <a rel="me" href="https://www.linkedin.com/in/benjaminhharris"> - <i class="fa fa-linkedin"></i> - </a> - </li> - <li> - <a rel="me" href="https://instagram.com/benharr.is"> - <i class="fa fa-instagram"></i> - </a> - </li> - <li> - <a rel="me" href="https://keybase.io/bharris"> - <i class="fa fa-key"></i> - </a> - </li> - <li> - <a rel="me" href="mailto:mail@benharr.is"> - <i class="fa fa-email"></i> - </a> - </li> -</ul> +<ul class="social social-links"> + <li> + <a rel="me" href="https://github.com/benharri"> + <i class="fa fa-github"></i> + </a> + </li> + <li> + <a rel="me" href="https://t.me/bharris"> + <i class="fa fa-paper-plane"></i> + </a> + </li> + <li> + <a rel="me" href="https://twitter.com/nebsirrah"> + <i class="fa fa-twitter"></i> + </a> + </li> + <li> + <a rel="me" href="https://www.linkedin.com/in/benjaminhharris"> + <i class="fa fa-linkedin"></i> + </a> + </li> + <li> + <a rel="me" href="https://instagram.com/benharr.is"> + <i class="fa fa-instagram"></i> + </a> + </li> + <li> + <a rel="me" href="https://keybase.io/bharris"> + <i class="fa fa-key"></i> + </a> + </li> + <li> + <a rel="me" href="mailto:mail@benharr.is"> + <i class="fa fa-email"></i> + </a> + </li> +</ul> |