diff --git a/.github/workflows/youtube.yml b/.github/workflows/youtube.yml deleted file mode 100644 index 88ae560..0000000 --- a/.github/workflows/youtube.yml +++ /dev/null @@ -1,16 +0,0 @@ -name: YouTube Videos -on: - schedule: - - cron: '0 * * * *' - workflow_dispatch: - -jobs: - youtube: - name: latest videos from YouTube - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: gautamkrishnar/blog-post-workflow@master - with: - comment_tag_name: "YOUTUBE-VIDEOS-LIST" - feed_list: "https://www.youtube.com/feeds/videos.xml?channel_id=UCjSmUb5HMaQvE7jvgnANFFA" diff --git a/README.md b/README.md deleted file mode 100644 index 3df691a..0000000 --- a/README.md +++ /dev/null @@ -1,80 +0,0 @@ -### Hi there I am Sahil Batra šŸ‘‹ - - - -- šŸ“« I'm a **Web Developer**, **Programmer**, **Content Creator** and **Youtuber** -- šŸ”­ I’m currently working on **Web Development Projects and JAVA DSA** -- 🌱 I had made **projects** in **PHP**, **JavaScript**, **React**, **Node.js** and **Wordpress** -- 🌱 I’m currently learning DSA and Web Development -- šŸ‘Æ Ask me about your doubts of programming basics and web development - -### Languages and Tools: - -

-Visual Studio Code   -HTML5   -CSS3   -JavaScript   -Bootstrap   -React   -Node.js   -MongoDB   -Postman API   -PHP   -MySQL   -Git   -   -Java   -IntelliJIDEA   -C++   -Canva   -OBS studio -

- -### Check my Github Stats: - - - - - ---- - -### Latest YouTube videos - -- [How to prepare for an interview as a fresher | Job Interview Tips and Tricks](https://www.youtube.com/watch?v=gv_wpo46ZQo) -- [Top Interview Questions for IT Freshers | Interview Experience of Product Based Company](https://www.youtube.com/watch?v=p3NP_5xXMAs) -- [Top 5 websites to get job in 2023 | Job Search Websites in India](https://www.youtube.com/watch?v=aWu_CMNx8uE) -- [Softares used for coding in different languages](https://www.youtube.com/shorts/01IvUg635VY) -- [Top five websites to learn coding free](https://www.youtube.com/shorts/nXA1QNeAGi4) - - ---- - -šŸ’¬ **HOW TO REACH ME:** šŸ‘‡šŸ‘‡šŸ‘‡šŸ‘‡šŸ‘‡ -- **Instagram** : https://www.instagram.com/infotechprogrammer/ (DM me I am most active here) -- **Telegram** : https://telegram.me/infotechprogrammer (Free courses and resourses of programming) -- **Youtube Channel** : https://www.youtube.com/c/InfotechProgrammer?sub_confirmation=1 (Tips/tricks + Programming + web development) -- **Website** : https://infotechprogrammer.github.io/infotechprogrammer/ (**Portfolio Website**: My all Projects displayed here) -- **Twitter** : https://twitter.com/sahilbatra158 (I am very less active here) - ---- - -šŸ”½ **READ MORE:** - -- You can **fork** and **star** the repositories that are helpful for you. - -- Check my pinned github repositories for C, C++, Java and Data Strctures programs made for students. - ---- diff --git a/css/base.css b/css/base.css index 5d2768b..bb1d14c 100644 --- a/css/base.css +++ b/css/base.css @@ -1,931 +1,931 @@ -/* =================================================================== - * - * Transcend v1.0 Base Stylesheet - * 03-18-2018 - * ------------------------------------------------------------------ - * - * TOC: - * # imports - * # normalize - * # basic/base setup styles - * ## Media - * ## Typography resets - * ## links - * ## inputs - * # grid - * ## medium size devices - * ## tablets - * ## mobile devices - * ## small mobile devices - * # block grids - * ## medium size devices - * ## tablets - * ## mobile devices - * ## small mobile devices - * # MISC - * - * =================================================================== */ - -/* =================================================================== - * # imports - * - * ------------------------------------------------------------------- */ -@import url("font-awesome/css/fontawesome-all.css"); -@import url("micons/micons.css"); -@import url("fonts.css"); - - -/* =================================================================== - * # normalize - * normalize.css v5.0.0 | MIT License | - * github.com/necolas/normalize.css - * - * ------------------------------------------------------------------- */ -html { - font-family: sans-serif; - line-height: 1.15; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} - -body { - margin: 0; -} - -article, -aside, -footer, -header, -nav, -section { - display: block; -} - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -figcaption, -figure, -main { - display: block; -} - -figure { - margin: 1em 40px; -} - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - -pre { - font-family: monospace, monospace; - font-size: 1em; -} - -a { - background-color: transparent; - -webkit-text-decoration-skip: objects; -} - -a:active, -a:hover { - outline-width: 0; -} - -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; -} - -b, -strong { - font-weight: inherit; -} - -b, -strong { - font-weight: bolder; -} - -code, -kbd, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -dfn { - font-style: italic; -} - -mark { - background-color: #ff0; - color: #000; -} - -small { - font-size: 80%; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -audio, -video { - display: inline-block; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -img { - border-style: none; -} - -svg:not(:root) { - overflow: hidden; -} - -button, -input, -optgroup, -select, -textarea { - font-family: sans-serif; - font-size: 100%; - line-height: 1.15; - margin: 0; -} - -button, -input { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -button, -html [type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} - -progress { - display: inline-block; - vertical-align: baseline; -} - -textarea { - overflow: auto; -} - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - padding: 0; -} - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -details, -menu { - display: block; -} - -summary { - display: list-item; -} - -canvas { - display: inline-block; -} - -template { - display: none; -} - -[hidden] { - display: none; -} - - -/* =================================================================== - * # basic/base setup styles - * - * ------------------------------------------------------------------- */ -html { - font-size: 62.5%; - box-sizing: border-box; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -body { - font-weight: normal; - line-height: 1; - word-wrap: break-word; - text-rendering: optimizeLegibility; - -webkit-overflow-scrolling: touch; - -webkit-text-size-adjust: none; -} - -body, -input, -button { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} - - -/* ------------------------------------------------------------------- - * ## Media - * ------------------------------------------------------------------- */ -img, -video { - max-width: 100%; - height: auto; -} - - -/* ------------------------------------------------------------------- - * ## Typography resets - * ------------------------------------------------------------------- */ -div, -dl, -dt, -dd, -ul, -ol, -li, -h1, -h2, -h3, -h4, -h5, -h6, -pre, -form, -p, -blockquote, -th, -td { - margin: 0; - padding: 0; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - -webkit-font-smoothing: auto; - -webkit-font-smoothing: antialiased; - -webkit-font-variant-ligatures: common-ligatures; - -moz-font-variant-ligatures: common-ligatures; - font-variant-ligatures: common-ligatures; - text-rendering: optimizeLegibility; -} - -em, -i { - font-style: italic; - line-height: inherit; -} - -strong, -b { - font-weight: bold; - line-height: inherit; -} - -small { - font-size: 60%; - line-height: inherit; -} - -ol, -ul { - list-style: none; -} - -li { - display: block; -} - - -/* ------------------------------------------------------------------- - * ## links - * ------------------------------------------------------------------- */ -a { - text-decoration: none; - line-height: inherit; -} - -a img { - border: none; -} - - -/* ------------------------------------------------------------------- - * ## inputs - * ------------------------------------------------------------------- */ -fieldset { - margin: 0; - padding: 0; -} - -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - -o-appearance: none; - appearance: none; -} - - - -/* =================================================================== - * # grid - * - * ------------------------------------------------------------------- */ -.row { - width: 89%; - max-width: 1200px; - margin: 0 auto; -} - -.row:after { - content: ""; - display: table; - clear: both; -} - -.row .row { - width: auto; - max-width: none; - margin-left: -20px; - margin-right: -20px; -} - -/* column blocks - * -------------------------------------- */ -[class*="col-"] { - float: left; - padding: 0 20px; -} - -[class*="col-"]+[class*="col-"].end { - float: right; -} - -/* column width classes - * -------------------------------------- */ -.col-one { - width: 8.33333%; -} - -.col-two, -.col-1-6 { - width: 16.66667%; -} - -.col-three, -.col-1-4 { - width: 25%; -} - -.col-four, -.col-1-3 { - width: 33.33333%; -} - -.col-five { - width: 41.66667%; -} - -.col-six, -.col-1-2 { - width: 50%; -} - -.col-seven { - width: 58.33333%; -} - -.col-eight, -.col-2-3 { - width: 66.66667%; -} - -.col-nine, -.col-3-4 { - width: 75%; -} - -.col-ten, -.col-5-6 { - width: 83.33333%; -} - -.col-eleven { - width: 91.66667%; -} - -.col-twelve, -.col-full { - width: 100%; -} - - -/* ------------------------------------------------------------------- - * ## medium size devices - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .row .row { - margin-left: -15px; - margin-right: -15px; - } - [class*="col-"] { - padding: 0 15px; - } - .md-two, - .md-1-6 { - width: 16.66667%; - } - .md-one { - width: 8.33333%; - } - .md-three, - .md-1-4 { - width: 25%; - } - .md-four, - .md-1-3 { - width: 33.33333%; - } - .md-five { - width: 41.66667%; - } - .md-six, - .md-1-2 { - width: 50%; - } - .md-seven { - width: 58.33333%; - } - .md-eight, - .md-2-3 { - width: 66.66667%; - } - .md-nine, - .md-3-4 { - width: 75%; - } - .md-ten, - .md-5-6 { - width: 83.33333%; - } - .md-eleven { - width: 91.66667%; - } - .md-twelve, - .md-full { - width: 100%; - } -} - - -/* ------------------------------------------------------------------- - * ## tablets - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 800px) { - .row { - width: 90%; - } - .tab-1-4 { - width: 25%; - } - .tab-1-3 { - width: 33.33333%; - } - .tab-1-2 { - width: 50%; - } - .tab-2-3 { - width: 66.66667%; - } - .tab-3-4 { - width: 75%; - } - .tab-full { - width: 100%; - } - .hide-on-tablet { - display: none; - } -} - - -/* ------------------------------------------------------------------- - * ## mobile devices - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 600px) { - .row { - width: auto; - padding-left: 25px; - padding-right: 25px; - } - .row .row { - margin-left: -10px; - margin-right: -10px; - padding-left: 0; - padding-right: 0; - } - [class*="col-"] { - padding: 0 10px; - } - .mob-1-4 { - width: 25%; - } - .mob-1-3 { - width: 33.33333%; - } - .mob-1-2 { - width: 50%; - } - .mob-2-3 { - width: 66.66667%; - } - .mob-3-4 { - width: 75%; - } - .mob-full { - width: 100%; - } - .hide-on-mobile { - display: none; - } -} - - -/* ------------------------------------------------------------------- - * ## small mobile devices - * ------------------------------------------------------------------- */ - -/* stack columns on small mobile devices - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 400px) { - .row .row { - margin-left: 0; - margin-right: 0; - } - [class*="col-"] { - width: 100% !important; - float: none !important; - clear: both !important; - margin-left: 0; - margin-right: 0; - padding: 0; - } - [class*="col-"]+[class*="col-"].end { - float: none; - } -} - - - -/* =================================================================== - * # block grids - * ------------------------------------------------------------------- */ - -/* Equally-sized columns define at row level - * ------------------------------------------------------------------- */ -[class*="block-"]:after { - content: ""; - display: table; - clear: both; -} - -.block-1-6 .col-block { - width: 16.66667%; -} - -.block-1-5 .col-block { - width: 20%; -} - -.block-1-4 .col-block { - width: 25%; -} - -.block-1-3 .col-block { - width: 33.33333%; -} - -.block-1-2 .col-block { - width: 50%; -} - -/** - * Clearing for block grid columns. Allow columns with - * different heights to align properly. - */ - -.block-1-6 .col-block:nth-child(6n+1), -.block-1-5 .col-block:nth-child(5n+1), -.block-1-4 .col-block:nth-child(4n+1), -.block-1-3 .col-block:nth-child(3n+1), -.block-1-2 .col-block:nth-child(2n+1) { - clear: both; -} - - -/* ------------------------------------------------------------------- - * ## medium size devices - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .block-m-1-6 .col-block { - width: 16.66667%; - } - .block-m-1-5 .col-block { - width: 20%; - } - .block-m-1-4 .col-block { - width: 25%; - } - .block-m-1-3 .col-block { - width: 33.33333%; - } - .block-m-1-2 .col-block { - width: 50%; - } - .block-m-full .col-block { - width: 100%; - clear: both; - } - [class*="block-m-"] .col-block:nth-child(n) { - clear: none; - } - .block-m-1-6 .col-block:nth-child(6n+1), - .block-m-1-5 .col-block:nth-child(5n+1), - .block-m-1-4 .col-block:nth-child(4n+1), - .block-m-1-3 .col-block:nth-child(3n+1), - .block-m-1-2 .col-block:nth-child(2n+1) { - clear: both; - } -} - - -/* ------------------------------------------------------------------- - * ## tablets - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 800px) { - .block-tab-1-6 .col-block { - width: 16.66667%; - } - .block-tab-1-5 .col-block { - width: 20%; - } - .block-tab-1-4 .col-block { - width: 25%; - } - .block-tab-1-3 .col-block { - width: 33.33333%; - } - .block-tab-1-2 .col-block { - width: 50%; - } - .block-tab-full .col-block { - width: 100%; - clear: both; - } - [class*="block-tab-"] .col-block:nth-child(n) { - clear: none; - } - .block-tab-1-6 .col-block:nth-child(6n+1), - .block-tab-1-6 .col-block:nth-child(5n+1), - .block-tab-1-4 .col-block:nth-child(4n+1), - .block-tab-1-3 .col-block:nth-child(3n+1), - .block-tab-1-2 .col-block:nth-child(2n+1) { - clear: both; - } -} - - -/* ------------------------------------------------------------------- - * ## mobile devices - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 600px) { - .block-mob-1-6 .col-block { - width: 16.66667%; - } - .block-mob-1-5 .col-block { - width: 20%; - } - .block-mob-1-4 .col-block { - width: 25%; - } - .block-mob-1-3 .col-block { - width: 33.33333%; - } - .block-mob-1-2 .col-block { - width: 50%; - } - .block-mob-full .col-block { - width: 100%; - clear: both; - } - [class*="block-mob-"] .col-block:nth-child(n) { - clear: none; - } - .block-mob-1-6 .col-block:nth-child(6n+1), - .block-mob-1-5 .col-block:nth-child(5n+1), - .block-mob-1-4 .col-block:nth-child(4n+1), - .block-mob-1-3 .col-block:nth-child(3n+1), - .block-mob-1-2 .col-block:nth-child(2n+1) { - clear: both; - } -} - - -/* ------------------------------------------------------------------- - * ## small mobile devices - * ------------------------------------------------------------------- */ - -/* stack columns on small mobile devices - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 400px) { - .stack .col-block { - width: 100% !important; - float: none !important; - clear: both !important; - margin-left: 0; - margin-right: 0; - } -} - - - -/* =================================================================== - * # MISC - * - * ------------------------------------------------------------------- */ -.group:after { - content: ""; - display: table; - clear: both; -} - -/* Misc Helper Styles - * -------------------------------------- */ -.is-hidden { - display: none; -} - -.is-invisible { - visibility: hidden; -} - -.antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.overflow-hidden { - overflow: hidden; -} - -.remove-bottom { - margin-bottom: 0; -} - -.half-bottom { - margin-bottom: 1.5rem !important; -} - -.add-bottom { - margin-bottom: 3rem !important; -} - -.no-border { - border: none; -} - -.full-width { - width: 100%; -} - -.text-center { - text-align: center; -} - -.text-left { - text-align: left; -} - -.text-right { - text-align: right; -} - -.pull-left { - float: left; -} - -.pull-right { - float: right; -} - -.align-center { - margin-left: auto; - margin-right: auto; - text-align: center; -} - - - +/* =================================================================== + * + * Transcend v1.0 Base Stylesheet + * 03-18-2018 + * ------------------------------------------------------------------ + * + * TOC: + * # imports + * # normalize + * # basic/base setup styles + * ## Media + * ## Typography resets + * ## links + * ## inputs + * # grid + * ## medium size devices + * ## tablets + * ## mobile devices + * ## small mobile devices + * # block grids + * ## medium size devices + * ## tablets + * ## mobile devices + * ## small mobile devices + * # MISC + * + * =================================================================== */ + +/* =================================================================== + * # imports + * + * ------------------------------------------------------------------- */ +@import url("font-awesome/css/fontawesome-all.css"); +@import url("micons/micons.css"); +@import url("fonts.css"); + + +/* =================================================================== + * # normalize + * normalize.css v5.0.0 | MIT License | + * github.com/necolas/normalize.css + * + * ------------------------------------------------------------------- */ +html { + font-family: sans-serif; + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; +} + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +figcaption, +figure, +main { + display: block; +} + +figure { + margin: 1em 40px; +} + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; +} + +a:active, +a:hover { + outline-width: 0; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +b, +strong { + font-weight: inherit; +} + +b, +strong { + font-weight: bolder; +} + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +dfn { + font-style: italic; +} + +mark { + background-color: #ff0; + color: #000; +} + +small { + font-size: 80%; +} + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +audio, +video { + display: inline-block; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +img { + border-style: none; +} + +svg:not(:root) { + overflow: hidden; +} + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; +} + +button, +input { + overflow: visible; +} + +button, +select { + text-transform: none; +} + +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +progress { + display: inline-block; + vertical-align: baseline; +} + +textarea { + overflow: auto; +} + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +details, +menu { + display: block; +} + +summary { + display: list-item; +} + +canvas { + display: inline-block; +} + +template { + display: none; +} + +[hidden] { + display: none; +} + + +/* =================================================================== + * # basic/base setup styles + * + * ------------------------------------------------------------------- */ +html { + font-size: 62.5%; + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + font-weight: normal; + line-height: 1; + word-wrap: break-word; + text-rendering: optimizeLegibility; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: none; +} + +body, +input, +button { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + + +/* ------------------------------------------------------------------- + * ## Media + * ------------------------------------------------------------------- */ +img, +video { + max-width: 100%; + height: auto; +} + + +/* ------------------------------------------------------------------- + * ## Typography resets + * ------------------------------------------------------------------- */ +div, +dl, +dt, +dd, +ul, +ol, +li, +h1, +h2, +h3, +h4, +h5, +h6, +pre, +form, +p, +blockquote, +th, +td { + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + -webkit-font-smoothing: auto; + -webkit-font-smoothing: antialiased; + -webkit-font-variant-ligatures: common-ligatures; + -moz-font-variant-ligatures: common-ligatures; + font-variant-ligatures: common-ligatures; + text-rendering: optimizeLegibility; +} + +em, +i { + font-style: italic; + line-height: inherit; +} + +strong, +b { + font-weight: bold; + line-height: inherit; +} + +small { + font-size: 60%; + line-height: inherit; +} + +ol, +ul { + list-style: none; +} + +li { + display: block; +} + + +/* ------------------------------------------------------------------- + * ## links + * ------------------------------------------------------------------- */ +a { + text-decoration: none; + line-height: inherit; +} + +a img { + border: none; +} + + +/* ------------------------------------------------------------------- + * ## inputs + * ------------------------------------------------------------------- */ +fieldset { + margin: 0; + padding: 0; +} + +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; +} + + + +/* =================================================================== + * # grid + * + * ------------------------------------------------------------------- */ +.row { + width: 89%; + max-width: 1200px; + margin: 0 auto; +} + +.row:after { + content: ""; + display: table; + clear: both; +} + +.row .row { + width: auto; + max-width: none; + margin-left: -20px; + margin-right: -20px; +} + +/* column blocks + * -------------------------------------- */ +[class*="col-"] { + float: left; + padding: 0 20px; +} + +[class*="col-"]+[class*="col-"].end { + float: right; +} + +/* column width classes + * -------------------------------------- */ +.col-one { + width: 8.33333%; +} + +.col-two, +.col-1-6 { + width: 16.66667%; +} + +.col-three, +.col-1-4 { + width: 25%; +} + +.col-four, +.col-1-3 { + width: 33.33333%; +} + +.col-five { + width: 41.66667%; +} + +.col-six, +.col-1-2 { + width: 50%; +} + +.col-seven { + width: 58.33333%; +} + +.col-eight, +.col-2-3 { + width: 66.66667%; +} + +.col-nine, +.col-3-4 { + width: 75%; +} + +.col-ten, +.col-5-6 { + width: 83.33333%; +} + +.col-eleven { + width: 91.66667%; +} + +.col-twelve, +.col-full { + width: 100%; +} + + +/* ------------------------------------------------------------------- + * ## medium size devices + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .row .row { + margin-left: -15px; + margin-right: -15px; + } + [class*="col-"] { + padding: 0 15px; + } + .md-two, + .md-1-6 { + width: 16.66667%; + } + .md-one { + width: 8.33333%; + } + .md-three, + .md-1-4 { + width: 25%; + } + .md-four, + .md-1-3 { + width: 33.33333%; + } + .md-five { + width: 41.66667%; + } + .md-six, + .md-1-2 { + width: 50%; + } + .md-seven { + width: 58.33333%; + } + .md-eight, + .md-2-3 { + width: 66.66667%; + } + .md-nine, + .md-3-4 { + width: 75%; + } + .md-ten, + .md-5-6 { + width: 83.33333%; + } + .md-eleven { + width: 91.66667%; + } + .md-twelve, + .md-full { + width: 100%; + } +} + + +/* ------------------------------------------------------------------- + * ## tablets + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 800px) { + .row { + width: 90%; + } + .tab-1-4 { + width: 25%; + } + .tab-1-3 { + width: 33.33333%; + } + .tab-1-2 { + width: 50%; + } + .tab-2-3 { + width: 66.66667%; + } + .tab-3-4 { + width: 75%; + } + .tab-full { + width: 100%; + } + .hide-on-tablet { + display: none; + } +} + + +/* ------------------------------------------------------------------- + * ## mobile devices + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 600px) { + .row { + width: auto; + padding-left: 25px; + padding-right: 25px; + } + .row .row { + margin-left: -10px; + margin-right: -10px; + padding-left: 0; + padding-right: 0; + } + [class*="col-"] { + padding: 0 10px; + } + .mob-1-4 { + width: 25%; + } + .mob-1-3 { + width: 33.33333%; + } + .mob-1-2 { + width: 50%; + } + .mob-2-3 { + width: 66.66667%; + } + .mob-3-4 { + width: 75%; + } + .mob-full { + width: 100%; + } + .hide-on-mobile { + display: none; + } +} + + +/* ------------------------------------------------------------------- + * ## small mobile devices + * ------------------------------------------------------------------- */ + +/* stack columns on small mobile devices + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 400px) { + .row .row { + margin-left: 0; + margin-right: 0; + } + [class*="col-"] { + width: 100% !important; + float: none !important; + clear: both !important; + margin-left: 0; + margin-right: 0; + padding: 0; + } + [class*="col-"]+[class*="col-"].end { + float: none; + } +} + + + +/* =================================================================== + * # block grids + * ------------------------------------------------------------------- */ + +/* Equally-sized columns define at row level + * ------------------------------------------------------------------- */ +[class*="block-"]:after { + content: ""; + display: table; + clear: both; +} + +.block-1-6 .col-block { + width: 16.66667%; +} + +.block-1-5 .col-block { + width: 20%; +} + +.block-1-4 .col-block { + width: 25%; +} + +.block-1-3 .col-block { + width: 33.33333%; +} + +.block-1-2 .col-block { + width: 50%; +} + +/** + * Clearing for block grid columns. Allow columns with + * different heights to align properly. + */ + +.block-1-6 .col-block:nth-child(6n+1), +.block-1-5 .col-block:nth-child(5n+1), +.block-1-4 .col-block:nth-child(4n+1), +.block-1-3 .col-block:nth-child(3n+1), +.block-1-2 .col-block:nth-child(2n+1) { + clear: both; +} + + +/* ------------------------------------------------------------------- + * ## medium size devices + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .block-m-1-6 .col-block { + width: 16.66667%; + } + .block-m-1-5 .col-block { + width: 20%; + } + .block-m-1-4 .col-block { + width: 25%; + } + .block-m-1-3 .col-block { + width: 33.33333%; + } + .block-m-1-2 .col-block { + width: 50%; + } + .block-m-full .col-block { + width: 100%; + clear: both; + } + [class*="block-m-"] .col-block:nth-child(n) { + clear: none; + } + .block-m-1-6 .col-block:nth-child(6n+1), + .block-m-1-5 .col-block:nth-child(5n+1), + .block-m-1-4 .col-block:nth-child(4n+1), + .block-m-1-3 .col-block:nth-child(3n+1), + .block-m-1-2 .col-block:nth-child(2n+1) { + clear: both; + } +} + + +/* ------------------------------------------------------------------- + * ## tablets + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 800px) { + .block-tab-1-6 .col-block { + width: 16.66667%; + } + .block-tab-1-5 .col-block { + width: 20%; + } + .block-tab-1-4 .col-block { + width: 25%; + } + .block-tab-1-3 .col-block { + width: 33.33333%; + } + .block-tab-1-2 .col-block { + width: 50%; + } + .block-tab-full .col-block { + width: 100%; + clear: both; + } + [class*="block-tab-"] .col-block:nth-child(n) { + clear: none; + } + .block-tab-1-6 .col-block:nth-child(6n+1), + .block-tab-1-6 .col-block:nth-child(5n+1), + .block-tab-1-4 .col-block:nth-child(4n+1), + .block-tab-1-3 .col-block:nth-child(3n+1), + .block-tab-1-2 .col-block:nth-child(2n+1) { + clear: both; + } +} + + +/* ------------------------------------------------------------------- + * ## mobile devices + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 600px) { + .block-mob-1-6 .col-block { + width: 16.66667%; + } + .block-mob-1-5 .col-block { + width: 20%; + } + .block-mob-1-4 .col-block { + width: 25%; + } + .block-mob-1-3 .col-block { + width: 33.33333%; + } + .block-mob-1-2 .col-block { + width: 50%; + } + .block-mob-full .col-block { + width: 100%; + clear: both; + } + [class*="block-mob-"] .col-block:nth-child(n) { + clear: none; + } + .block-mob-1-6 .col-block:nth-child(6n+1), + .block-mob-1-5 .col-block:nth-child(5n+1), + .block-mob-1-4 .col-block:nth-child(4n+1), + .block-mob-1-3 .col-block:nth-child(3n+1), + .block-mob-1-2 .col-block:nth-child(2n+1) { + clear: both; + } +} + + +/* ------------------------------------------------------------------- + * ## small mobile devices + * ------------------------------------------------------------------- */ + +/* stack columns on small mobile devices + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 400px) { + .stack .col-block { + width: 100% !important; + float: none !important; + clear: both !important; + margin-left: 0; + margin-right: 0; + } +} + + + +/* =================================================================== + * # MISC + * + * ------------------------------------------------------------------- */ +.group:after { + content: ""; + display: table; + clear: both; +} + +/* Misc Helper Styles + * -------------------------------------- */ +.is-hidden { + display: none; +} + +.is-invisible { + visibility: hidden; +} + +.antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.overflow-hidden { + overflow: hidden; +} + +.remove-bottom { + margin-bottom: 0; +} + +.half-bottom { + margin-bottom: 1.5rem !important; +} + +.add-bottom { + margin-bottom: 3rem !important; +} + +.no-border { + border: none; +} + +.full-width { + width: 100%; +} + +.text-center { + text-align: center; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.pull-left { + float: left; +} + +.pull-right { + float: right; +} + +.align-center { + margin-left: auto; + margin-right: auto; + text-align: center; +} + + + /*# sourceMappingURL=base.css.map */ \ No newline at end of file diff --git a/css/font-awesome/css/_notes/dwsync.xml b/css/font-awesome/css/_notes/dwsync.xml index 6cabb76..a0d1398 100644 --- a/css/font-awesome/css/_notes/dwsync.xml +++ b/css/font-awesome/css/_notes/dwsync.xml @@ -1,13 +1,13 @@ - - - - - - - - - - - - + + + + + + + + + + + + \ No newline at end of file diff --git a/css/font-awesome/webfonts/_notes/dwsync.xml b/css/font-awesome/webfonts/_notes/dwsync.xml index 807e07d..984c663 100644 --- a/css/font-awesome/webfonts/_notes/dwsync.xml +++ b/css/font-awesome/webfonts/_notes/dwsync.xml @@ -1,18 +1,18 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/fonts.css b/css/fonts.css index 9936db8..ecd7789 100644 --- a/css/fonts.css +++ b/css/fonts.css @@ -1,175 +1,175 @@ -/* =================================================================== - * fonts.scss - * - * ------------------------------------------------------------------- */ - -/* - * domine -================================================================================ */ -@font-face { - font-family: "domine-regular"; - src: url("../fonts/domine/domine-regular-webfont.woff2") format("woff2"), - url("../fonts/domine/domine-regular-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "domine-bold"; - src: url("../fonts/domine/domine-bold-webfont.woff2") format("woff2"), - url("../fonts/domine/domine-bold-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} - -/* - * metropolis -================================================================================ */ -@font-face { - font-family: "metropolis-black"; - src: url("../fonts/metropolis/metropolis-black-webfont.woff2") format("woff2"), - url("../fonts/metropolis/metropolis-black-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-black-italic"; - src: url("../fonts/metropolis/metropolis-blackitalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-blackitalic-webfont.woff") - format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-extrabold"; - src: url("../fonts/metropolis/metropolis-extrabold-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-extrabold-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-extrabold-italic"; - src: url("../fonts/metropolis/metropolis-extrabolditalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-extrabolditalic-webfont.woff") - format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-bold"; - src: url("../fonts/metropolis/metropolis-bold-webfont.woff2") format("woff2"), - url("../fonts/metropolis/metropolis-bold-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-bold-italic"; - src: url("../fonts/metropolis/metropolis-bolditalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-bolditalic-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-semibold"; - src: url("../fonts/metropolis/metropolis-semibold-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-semibold-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-semibold-italic"; - src: url("../fonts/metropolis/metropolis-semibolditalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-semibolditalic-webfont.woff") - format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-medium"; - src: url("../fonts/metropolis/metropolis-medium-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-medium-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-medium-italic"; - src: url("../fonts/metropolis/metropolis-mediumitalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-mediumitalic-webfont.woff") - format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-regular"; - src: url("../fonts/metropolis/metropolis-regular-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-regular-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-italic"; - src: url("../fonts/metropolis/metropolis-regularitalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-regularitalic-webfont.woff") - format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-light"; - src: url("../fonts/metropolis/metropolis-light-webfont.woff2") format("woff2"), - url("../fonts/metropolis/metropolis-light-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-light-italic"; - src: url("../fonts/metropolis/metropolis-lightitalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-lightitalic-webfont.woff") - format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-extralight"; - src: url("../fonts/metropolis/metropolis-extralight-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-extralight-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-extralight-italic"; - src: url("../fonts/metropolis/metropolis-extralightitalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-extralightitalic-webfont.woff") - format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-thin"; - src: url("../fonts/metropolis/metropolis-thin-webfont.woff2") format("woff2"), - url("../fonts/metropolis/metropolis-thin-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} -@font-face { - font-family: "metropolis-thin-italic"; - src: url("../fonts/metropolis/metropolis-thinitalic-webfont.woff2") - format("woff2"), - url("../fonts/metropolis/metropolis-thinitalic-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; -} - -/*# sourceMappingURL=fonts.css.map */ +/* =================================================================== + * fonts.scss + * + * ------------------------------------------------------------------- */ + +/* + * domine +================================================================================ */ +@font-face { + font-family: "domine-regular"; + src: url("../fonts/domine/domine-regular-webfont.woff2") format("woff2"), + url("../fonts/domine/domine-regular-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "domine-bold"; + src: url("../fonts/domine/domine-bold-webfont.woff2") format("woff2"), + url("../fonts/domine/domine-bold-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} + +/* + * metropolis +================================================================================ */ +@font-face { + font-family: "metropolis-black"; + src: url("../fonts/metropolis/metropolis-black-webfont.woff2") format("woff2"), + url("../fonts/metropolis/metropolis-black-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-black-italic"; + src: url("../fonts/metropolis/metropolis-blackitalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-blackitalic-webfont.woff") + format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-extrabold"; + src: url("../fonts/metropolis/metropolis-extrabold-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-extrabold-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-extrabold-italic"; + src: url("../fonts/metropolis/metropolis-extrabolditalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-extrabolditalic-webfont.woff") + format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-bold"; + src: url("../fonts/metropolis/metropolis-bold-webfont.woff2") format("woff2"), + url("../fonts/metropolis/metropolis-bold-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-bold-italic"; + src: url("../fonts/metropolis/metropolis-bolditalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-bolditalic-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-semibold"; + src: url("../fonts/metropolis/metropolis-semibold-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-semibold-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-semibold-italic"; + src: url("../fonts/metropolis/metropolis-semibolditalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-semibolditalic-webfont.woff") + format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-medium"; + src: url("../fonts/metropolis/metropolis-medium-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-medium-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-medium-italic"; + src: url("../fonts/metropolis/metropolis-mediumitalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-mediumitalic-webfont.woff") + format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-regular"; + src: url("../fonts/metropolis/metropolis-regular-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-regular-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-italic"; + src: url("../fonts/metropolis/metropolis-regularitalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-regularitalic-webfont.woff") + format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-light"; + src: url("../fonts/metropolis/metropolis-light-webfont.woff2") format("woff2"), + url("../fonts/metropolis/metropolis-light-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-light-italic"; + src: url("../fonts/metropolis/metropolis-lightitalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-lightitalic-webfont.woff") + format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-extralight"; + src: url("../fonts/metropolis/metropolis-extralight-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-extralight-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-extralight-italic"; + src: url("../fonts/metropolis/metropolis-extralightitalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-extralightitalic-webfont.woff") + format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-thin"; + src: url("../fonts/metropolis/metropolis-thin-webfont.woff2") format("woff2"), + url("../fonts/metropolis/metropolis-thin-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} +@font-face { + font-family: "metropolis-thin-italic"; + src: url("../fonts/metropolis/metropolis-thinitalic-webfont.woff2") + format("woff2"), + url("../fonts/metropolis/metropolis-thinitalic-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; +} + +/*# sourceMappingURL=fonts.css.map */ diff --git a/css/main.css b/css/main.css index 5025e75..c13ea53 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3419 +1,3419 @@ -/* =================================================================== - * - * Transcend v1.0 Main Stylesheet - * 03-19-2018 - * ------------------------------------------------------------------ - * - * TOC: - * # base style overrides - * ## links - * # typography & general theme styles - * ## Lists - * ## responsive video container - * ## floated image - * ## tables - * ## Spacing - * ## pace.js styles - minimal - * # preloader - * # forms - * ## Style Placeholder Text - * ## Change Autocomplete styles in Chrome - * # buttons - * # additional components - * ## alert box - * ## additional typo styles - * ## skillbars - * # reusable and common theme styles - * ## display headings - * # header styles - * ## header logo - * ## main navigation - * ## mobile menu toggle - * # home - * ## home content - * ## home sidelinks - * ## home scroll - * ## home scroll - * ## home animations - * # about - * ## about process - * # services - * ## services list - * # works - * ## bricks/masonry - * # testimonials - * # stats - * # contact - * ## contact social - * ## subscribe - * ## copyright - * ## go to top - * - * =================================================================== */ - - -/* =================================================================== - * # base style overrides - * - * ------------------------------------------------------------------- */ -html { - font-size: 10px; -} -@media only screen and (max-width: 400px) { - html { - font-size: 9.411764705882353px; - } -} - -html, body { - height: 100%; -} - -body { - background: #111111; - font-family: "metropolis-regular", sans-serif; - font-size: 1.7rem; - font-style: normal; - font-weight: normal; - line-height: 1.765; - color: #555555; - margin: 0; - padding: 0; -} - -/* ------------------------------------------------------------------- - * ## links - * ------------------------------------------------------------------- */ -a { - color: #cc147f; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} - -a:hover, -a:focus, -a:active { - color: #26bfb5; -} - -a:hover, -a:active { - outline: 0; -} - - -/* =================================================================== - * # typography & general theme styles - * - * ------------------------------------------------------------------- */ -h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - font-family: "metropolis-semibold", sans-serif; - color: #000000; - font-style: normal; - font-weight: normal; - text-rendering: optimizeLegibility; -} - -h1, .h1, h2, .h2, h3, .h3, h4, .h4 { - margin-top: 6rem; - margin-bottom: 1.8rem; -} - -@media only screen and (max-width:600px) { - h1, .h1, h2, .h2, h3, .h3, h4, .h4 { - margin-top: 5.1rem; - } - -} - -h5, .h5, h6, .h6 { - margin-top: 4.2rem; - margin-bottom: 1.5rem; -} - -@media only screen and (max-width:600px) { - h5, .h5, h6, .h6 { - margin-top: 3.6rem; - margin-bottom: 0.9rem; - } - -} - -h1, .h1 { - font-size: 3.6rem; - line-height: 1.25; - letter-spacing: -0.1rem; -} - -@media only screen and (max-width:600px) { - h1, .h1 { - font-size: 3.3rem; - letter-spacing: -0.07rem; - } - -} - -h2, .h2 { - font-size: 3rem; - line-height: 1.3; -} - -h3, .h3 { - font-size: 2.4rem; - line-height: 1.25; -} - -h4, .h4 { - font-size: 2.1rem; - line-height: 1.286; -} - -h5, .h5 { - font-size: 1.7rem; - line-height: 1.235; -} - -h6, .h6 { - font-size: 1.4rem; - line-height: 1.286; - text-transform: uppercase; - letter-spacing: 0.16rem; -} - -p img { - margin: 0; -} - -p.lead { - font-family: "metropolis-regular", sans-serif; - font-size: 2.4rem; - line-height: 1.75; - margin-bottom: 3.6rem; - color: rgba(85, 85, 85, 0.95); -} -@media only screen and (max-width: 1200px) { - p.lead { - font-size: 2.2rem; - } -} -@media only screen and (max-width: 1000px) { - p.lead { - font-size: 2.1rem; - } -} -@media only screen and (max-width: 800px) { - p.lead { - font-size: 1.9rem; - } -} - -em, i, strong, b { - font-size: inherit; - line-height: inherit; - font-style: normal; - font-weight: normal; -} - -em, i { - font-family: "metropolis-italic", sans-serif; -} - -strong, b { - font-family: "metropolis-semibold", sans-serif; - font-weight: normal; -} - -small { - font-size: 1.2rem; - line-height: inherit; -} - -blockquote { - margin: 3.9rem 0; - padding-left: 4.5rem; - position: relative; -} - -blockquote:before { - content: "\201C"; - font-size: 10rem; - line-height: 0px; - margin: 0; - color: rgba(0, 0, 0, 0.25); - font-family: arial, sans-serif; - position: absolute; - top: 3.6rem; - left: 0; -} - -blockquote p { - font-family: "metropolis-regular", sans-serif; - padding: 0; - font-size: 2.1rem; - line-height: 1.857; - color: #111111; -} - -blockquote cite { - display: block; - font-family: "domine-regular", sans-serif; - font-size: 1.4rem; - font-style: normal; - line-height: 1.5; -} - -blockquote cite:before { - content: "\2014 \0020"; -} - -blockquote cite a, -blockquote cite a:visited { - color: #626262; - border: none; -} - -abbr { - font-family: "metropolis-bold", sans-serif; - font-variant: small-caps; - text-transform: lowercase; - letter-spacing: 0.05rem; - color: #626262; -} - -var, kbd, samp, code, pre { - font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; -} - -pre { - padding: 2.4rem 3rem 3rem; - background: #f1f1f1; - overflow-x: auto; -} - -code { - font-size: 1.4rem; - margin: 0 0.2rem; - padding: 0.3rem 0.6rem; - white-space: nowrap; - background: #f1f1f1; - border: 1px solid #e1e1e1; - border-radius: 3px; -} - -pre > code { - display: block; - white-space: pre; - line-height: 2; - padding: 0; - margin: 0; -} - -pre.prettyprint > code { - border: none; -} - -del { - text-decoration: line-through; -} - -abbr[title], -dfn[title] { - border-bottom: 1px dotted; - cursor: help; - text-decoration: none; -} - -mark { - background: #ffd900; - color: #000000; -} - -hr { - border: solid rgba(0, 0, 0, 0.1); - border-width: 1px 0 0; - clear: both; - margin: 2.4rem 0 1.5rem; - height: 0; -} - - -/* ------------------------------------------------------------------- - * ## Lists - * ------------------------------------------------------------------- */ -ol { - list-style: decimal; -} - -ul { - list-style: disc; -} - -li { - display: list-item; -} - -ol, -ul { - margin-left: 1.7rem; -} - -ul li { - padding-left: 0.4rem; -} - -ul ul, -ul ol, -ol ol, -ol ul { - margin: 0.6rem 0 0.6rem 1.7rem; -} - -ul.disc li { - display: list-item; - list-style: none; - padding: 0 0 0 0.8rem; - position: relative; -} -ul.disc li::before { - content: ""; - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background: #cc147f; - position: absolute; - left: -17px; - top: 11px; - vertical-align: middle; -} - -dt { - margin: 0; - color: #cc147f; -} - -dd { - margin: 0 0 0 2rem; -} - - -/* ------------------------------------------------------------------- - * ## responsive video container - * ------------------------------------------------------------------- */ -.video-container { - position: relative; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; -} -.video-container iframe, -.video-container object, -.video-container embed, -.video-container video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - - -/* ------------------------------------------------------------------- - * ## floated image - * ------------------------------------------------------------------- */ -img.pull-right { - margin: 1.5rem 0 0 3rem; -} - -img.pull-left { - margin: 1.5rem 3rem 0 0; -} - - -/* ------------------------------------------------------------------- - * ## tables - * ------------------------------------------------------------------- */ -table { - border-width: 0; - width: 100%; - max-width: 100%; - font-family: "metropolis-regular", sans-serif; -} - -th, -td { - padding: 1.5rem 3rem; - text-align: left; - border-bottom: 1px solid #e8e8e8; -} - -th { - color: #000000; - font-family: "metropolis-semibold", sans-serif; - font-weight: normal; -} - -td { - line-height: 1.5; -} - -th:first-child, -td:first-child { - padding-left: 0; -} - -th:last-child, -td:last-child { - padding-right: 0; -} - -.table-responsive { - overflow-x: auto; - -webkit-overflow-scrolling: touch; -} - - -/* ------------------------------------------------------------------- - * ## Spacing - * ------------------------------------------------------------------- */ -button, -.btn { - margin-bottom: 1.2rem; -} - -fieldset { - margin-bottom: 1.5rem; -} - -input, -textarea, -select, -pre, -blockquote, -figure, -table, -p, -ul, -ol, -dl, -form, -.video-container, -.cl-custom-select { - margin-bottom: 3rem; -} - -/* ------------------------------------------------------------------- - * ## pace.js styles - minimal - * ------------------------------------------------------------------- */ -.pace { - -webkit-pointer-events: none; - pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.pace-inactive { - display: none; -} - -.pace .pace-progress { - background: #cc147f; - position: fixed; - z-index: 900; - top: 0; - right: 100%; - width: 100%; - height: 4px; -} - -.oldie .pace { - display: none; -} - - - -/* =================================================================== - * # preloader - * - * ------------------------------------------------------------------- */ -#preloader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #050505; - z-index: 800; - height: 100%; - width: 100%; -} - -.no-js #preloader, -.oldie #preloader { - display: none; -} - -#loader { - position: absolute; - left: 50%; - top: 50%; - width: 60px; - height: 60px; - margin: -30px 0 0 -30px; - padding: 0; -} - -#loader:before { - content: ""; - border-top: 6px solid rgba(255, 255, 255, 0.1); - border-right: 6px solid rgba(255, 255, 255, 0.1); - border-bottom: 6px solid rgba(255, 255, 255, 0.1); - border-left: 6px solid #cc147f; - -webkit-animation: load 1.1s infinite linear; - animation: load 1.1s infinite linear; - display: block; - border-radius: 50%; - width: 60px; - height: 60px; -} - -@-webkit-keyframes load { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes load { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - - -/* =================================================================== - * # forms - * - * ------------------------------------------------------------------- */ -fieldset { - border: none; -} - -input[type="email"], -input[type="number"], -input[type="search"], -input[type="text"], -input[type="tel"], -input[type="url"], -input[type="password"], -textarea, -select { - display: block; - height: 6rem; - padding: 1.5rem 2.4rem; - border: 0; - outline: none; - color: #151515; - font-family: "metropolis-regular", sans-serif; - font-size: 1.5rem; - line-height: 3rem; - max-width: 100%; - background: rgba(0, 0, 0, 0.12); - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} - -.cl-custom-select { - position: relative; - padding: 0; -} -.cl-custom-select select { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - -o-appearance: none; - appearance: none; - text-indent: 0.01px; - text-overflow: ""; - margin: 0; - line-height: 3rem; - vertical-align: middle; -} -.cl-custom-select select option { - padding-left: 2rem; - padding-right: 2rem; -} -.cl-custom-select select::-ms-expand { - display: none; -} -.cl-custom-select::after { - border-bottom: 2px solid rgba(0, 0, 0, 0.5); - border-right: 2px solid rgba(0, 0, 0, 0.5); - content: ""; - display: block; - height: 8px; - width: 8px; - margin-top: -7px; - pointer-events: none; - position: absolute; - right: 2.4rem; - top: 50%; - -webkit-transform-origin: 66% 66%; - -ms-transform-origin: 66% 66%; - transform-origin: 66% 66%; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transition: all 0.15s ease-in-out; - transition: all 0.15s ease-in-out; -} - -/* IE9 and below */ -.oldie .cl-custom-select::after { - display: none; -} - -textarea { - min-height: 25rem; -} - -input[type="email"]:focus, -input[type="number"]:focus, -input[type="search"]:focus, -input[type="text"]:focus, -input[type="tel"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -textarea:focus, -select:focus { - color: #000000; -} - -label, -legend { - font-family: "metropolis-semibold", sans-serif; - font-size: 1.4rem; - font-weight: normal; - margin-bottom: 0.9rem; - line-height: 1.714; - color: #000000; - display: block; -} - -input[type="checkbox"], -input[type="radio"] { - display: inline; -} - -label > .label-text { - display: inline-block; - margin-left: 1rem; - font-family: "metropolis-regular", sans-serif; - font-weight: normal; - line-height: inherit; -} - -label > input[type="checkbox"], -label > input[type="radio"] { - margin: 0; - position: relative; - top: 0.15rem; -} - - -/* ------------------------------------------------------------------- - * ## Style Placeholder Text - * ------------------------------------------------------------------- */ -::-webkit-input-placeholder { - color: #626262; -} - -:-moz-placeholder { - color: #626262; - /* Firefox 18- */ -} - -::-moz-placeholder { - color: #626262; - /* Firefox 19+ */ -} - -:-ms-input-placeholder { - color: #626262; -} - -.placeholder { - color: #626262 !important; -} - - -/* ------------------------------------------------------------------- - * ## Change Autocomplete styles in Chrome - * ------------------------------------------------------------------- */ -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus input:-webkit-autofill, -textarea:-webkit-autofill, -textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, -select:-webkit-autofill, -select:-webkit-autofill:hover, -select:-webkit-autofill:focus { - -webkit-text-fill-color: #cc147f; - transition: background-color 5000s ease-in-out 0s; -} - - - -/* =================================================================== - * # buttons - * - * ------------------------------------------------------------------- */ -.btn, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - display: inline-block; - font-family: "metropolis-semibold", sans-serif; - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: 0.3rem; - height: 5.4rem; - line-height: 5rem; - padding: 0 3rem; - margin: 0 0.3rem 1.2rem 0; - color: #000000; - text-decoration: none; - text-align: center; - white-space: nowrap; - cursor: pointer; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - background-color: #c5c5c5; - border: 0.2rem solid #c5c5c5; -} - -.btn:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover, -.btn:focus, -button:focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="button"]:focus { - background-color: #000000; - border-color: #000000; - color: #ffffff; - outline: 0; -} - -/* button primary - * ------------------------------------------------- */ -.btn.btn--primary, -button.btn--primary, -input[type="submit"].btn--primary, -input[type="reset"].btn--primary, -input[type="button"].btn--primary { - background: #cc147f; - border-color: #cc147f; - color: #ffffff; -} - -.btn.btn--primary:hover, -button.btn--primary:hover, -input[type="submit"].btn--primary:hover, -input[type="reset"].btn--primary:hover, -input[type="button"].btn--primary:hover, -.btn.btn--primary:focus, -button.btn--primary:focus, -input[type="submit"].btn--primary:focus, -input[type="reset"].btn--primary:focus, -input[type="button"].btn--primary:focus { - background: #000000; - color: #b8b8b8; - border-color: #000000; -} - -/* button modifiers - * ------------------------------------------------- */ -.btn.full-width, -button.full-width { - width: 100%; - margin-right: 0; -} - -.btn--medium, -button.btn--medium { - height: 5.7rem !important; - line-height: 5.3rem !important; -} - -.btn--large, -button.btn--large { - height: 6rem !important; - line-height: 5.6rem !important; -} - -.btn--stroke, -button.btn--stroke { - background: transparent !important; - border: 0.2rem solid #cc147f; - color: #cc147f; -} - -.btn--stroke:hover, -button.btn--stroke:hover { - background: #cc147f !important; - border: 0.2rem solid #cc147f; - color: #ffffff; -} - -.btn--pill, -button.btn--pill { - padding-left: 3rem !important; - padding-right: 3rem !important; - border-radius: 1000px !important; -} - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - - - -/* =================================================================== - * # additional components - * - * ------------------------------------------------------------------- */ - -/* ------------------------------------------------------------------- - * ## alert box - * ------------------------------------------------------------------- */ -.alert-box { - padding: 2.1rem 4rem 2.1rem 3rem; - position: relative; - margin-bottom: 3rem; - border-radius: 3px; - font-family: "metropolis-semibold", sans-serif; - font-size: 1.5rem; - line-height: 1.6; -} -.alert-box__close { - position: absolute; - right: 1.8rem; - top: 1.8rem; - cursor: pointer; -} -.alert-box__close.fa { - font-size: 12px; -} -.alert-box--error { - background-color: #ffd1d2; - color: #e65153; -} -.alert-box--success { - background-color: #c8e675; - color: #758c36; -} -.alert-box--info { - background-color: #d7ecfb; - color: #4a95cc; -} -.alert-box--notice { - background-color: #fff099; - color: #bba31b; -} - -/* ------------------------------------------------------------------- - * ## additional typo styles - * ------------------------------------------------------------------- */ - -/* drop cap - * ----------------------------------------------- */ -.drop-cap:first-letter { - float: left; - margin: 0; - padding: 1.5rem 0.6rem 0 0; - font-size: 8.4rem; - font-family: "metropolis-bold", sans-serif; - font-weight: normal; - line-height: 6rem; - text-indent: 0; - background: transparent; - color: #000000; -} - -/* line definition style - * ----------------------------------------------- */ -.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 + dd:before { - content: ", "; -} -.lining dd:before { - content: ": "; - margin-left: -0.2em; -} - -/* dictionary definition style - * ----------------------------------------------- */ -.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) ". "; -} - -/** - * Pull Quotes - * ----------- - * markup: - * - * - * - * --------------------------------------------------------------------- */ -.pull-quote { - position: relative; - padding: 2.1rem 3rem 2.1rem 0px; -} -.pull-quote:before, -.pull-quote:after { - height: 1em; - position: absolute; - font-size: 10rem; - font-family: Arial, Sans-Serif; - color: rgba(0, 0, 0, 0.25); -} -.pull-quote:before { - content: "\201C"; - top: -3.6rem; - left: 0; -} -.pull-quote:after { - content: "\201D"; - bottom: 3.6rem; - right: 0; -} -.pull-quote blockquote { - margin: 0; -} -.pull-quote blockquote:before { - content: none; -} - -/** - * Stats Tab - * --------- - * markup: - * - * - * - * Extend this object into your markup. - * - * --------------------------------------------------------------------- */ -.stats-tabs { - padding: 0; - margin: 3rem 0; -} -.stats-tabs li { - display: inline-block; - margin: 0 1.5rem 3rem 0; - padding: 0 1.5rem 0 0; - border-right: 1px solid rgba(0, 0, 0, 0.2); -} -.stats-tabs li:last-child { - margin: 0; - padding: 0; - border: none; -} -.stats-tabs li a { - display: inline-block; - font-size: 2.5rem; - font-family: "metropolis-bold", sans-serif; - font-weight: normal; - border: none; - color: #000000; -} -.stats-tabs li a:hover { - color: #cc147f; -} -.stats-tabs li a em { - display: block; - margin: 0.6rem 0 0 0; - font-size: 1.4rem; - font-family: "metropolis-regular", sans-serif; - color: #626262; -} - - -/* ------------------------------------------------------------------- - * ## skillbars - * ------------------------------------------------------------------- */ -.skill-bars { - list-style: none; - margin: 6rem 0 3rem; -} -.skill-bars li { - height: 0.6rem; - background: #c9c9c9; - width: 100%; - margin-bottom: 6.9rem; - padding: 0; - position: relative; -} -.skill-bars li strong { - position: absolute; - left: 0; - top: -3rem; - font-family: "metropolis-semibold", sans-serif; - color: #000000; - text-transform: uppercase; - letter-spacing: 0.2rem; - font-size: 1.4rem; - line-height: 2.4rem; -} -.skill-bars li .progress { - background: #000000; - position: relative; - height: 100%; -} -.skill-bars li .progress span { - position: absolute; - right: 0; - top: -3.6rem; - display: block; - font-family: "metropolis-regular", sans-serif; - color: #ffffff; - font-size: 1.1rem; - line-height: 1; - background: #000000; - padding: 0.6rem 0.6rem; - border-radius: 3px; -} -.skill-bars li .progress span::after { - position: absolute; - left: 50%; - bottom: -5px; - margin-left: -5px; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - border-top: 5px solid #000000; - content: ""; -} -.skill-bars li .percent5 { - width: 5%; -} -.skill-bars li .percent10 { - width: 10%; -} -.skill-bars li .percent15 { - width: 15%; -} -.skill-bars li .percent20 { - width: 20%; -} -.skill-bars li .percent25 { - width: 25%; -} -.skill-bars li .percent30 { - width: 30%; -} -.skill-bars li .percent35 { - width: 35%; -} -.skill-bars li .percent40 { - width: 40%; -} -.skill-bars li .percent45 { - width: 45%; -} -.skill-bars li .percent50 { - width: 50%; -} -.skill-bars li .percent55 { - width: 55%; -} -.skill-bars li .percent60 { - width: 60%; -} -.skill-bars li .percent65 { - width: 65%; -} -.skill-bars li .percent70 { - width: 70%; -} -.skill-bars li .percent75 { - width: 75%; -} -.skill-bars li .percent80 { - width: 80%; -} -.skill-bars li .percent85 { - width: 85%; -} -.skill-bars li .percent90 { - width: 90%; -} -.skill-bars li .percent95 { - width: 95%; -} -.skill-bars li .percent100 { - width: 100%; -} - - - -/* =================================================================== - * # reusable and common theme styles - * - * ------------------------------------------------------------------- */ -.wide { - max-width: 1400px; -} - -.narrow { - max-width: 800px; -} - -.light-gray { - background-color: #f1f1f1; -} - -.light-blue -{ - background-color: #A3A3A3; -} - - -/* ------------------------------------------------------------------- - * ## display headings - * ------------------------------------------------------------------- */ -.display-1 { - font-family: "domine-bold", sans-serif; - font-size: 6rem; - line-height: 1.3; - letter-spacing: 0; - color: #000000; - letter-spacing: -0.03rem; - margin-top: 0; - margin-bottom: 4.8rem; -} -.display-1--light { - color: #ffffff; -} - -.subhead { - font-family: "metropolis-semibold", sans-serif; - font-size: 1.6rem; - line-height: 1.3125; - text-transform: uppercase; - letter-spacing: 0.25rem; - color: #cc147f; - margin-top: 0; - margin-bottom: 2.1rem; -} -.subhead::before { - content: "/ "; -} - -/* ------------------------------------------------------------------- - * responsive: - * display headings - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1400px) { - .display-1 { - font-size: 5.6rem; - } -} -@media only screen and (max-width: 1200px) { - .display-1 { - font-size: 5.2rem; - } -} -@media only screen and (max-width: 950px) { - .display-1 { - font-size: 4.6rem; - } -} -@media only screen and (max-width: 800px) { - .display-1 { - font-size: 4.2rem; - margin-bottom: 4.2rem; - } - - .subhead { - font-size: 1.5rem; - } -} -@media only screen and (max-width: 700px) { - .display-1 { - font-size: 4rem; - } -} -@media only screen and (max-width: 600px) { - .display-1 { - font-size: 3.6rem; - } -} -@media only screen and (max-width: 500px) { - .display-1 { - font-size: 3.3rem; - } - - .subhead { - font-size: 1.4rem; - } -} -@media only screen and (max-width: 400px) { - .display-1 { - font-size: 3rem; - } -} - - - -/* =================================================================== - * # header styles - * - * ------------------------------------------------------------------- */ -.s-header { - z-index: 500; - width: 100%; - height: 96px; - background-color: transparent; - position: absolute; - top: 24px; -} - - -/* ------------------------------------------------------------------- - * ## header logo - * ------------------------------------------------------------------- */ -.header-logo { - z-index: 501; - display: inline-block; - margin: 0; - padding: 0; - position: absolute; - left: 110px; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} -.header-logo a { - display: block; - padding: 0; - outline: 0; - border: none; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} -.header-logo img { - width: 200px; - height: 38px; -} - - -/* ------------------------------------------------------------------- - * ## main navigation - * ------------------------------------------------------------------- */ -.header-nav { - z-index: 900; - font-family: "metropolis-regular", sans-serif; - font-size: 1.3rem; - line-height: 1.846; - padding: 3.6rem 3rem 3.6rem 3.6rem; - height: 100%; - width: 280px; - background: #0c0c0c; - color: rgba(255, 255, 255, 0.25); - overflow-y: auto; - overflow-x: hidden; - position: fixed; - right: 0; - top: 0; - -webkit-transition: all 0.5s ease; - transition: all 0.5s ease; - -webkit-transform: translateZ(0); - -webkit-backface-visibility: hidden; - -webkit-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - visibility: hidden; -} -.header-nav a, -.header-nav a:visited { - color: rgba(255, 255, 255, 0.5); -} -.header-nav a:hover, -.header-nav a:focus, -.header-nav a:active { - color: white; -} -.header-nav h3 { - font-family: "metropolis-semibold", sans-serif; - font-size: 11px; - line-height: 1.363; - text-transform: uppercase; - letter-spacing: 0.25rem; - margin-bottom: 4.8rem; - margin-top: 0.9rem; - color: #cc147f; -} -.header-nav p { - margin-bottom: 2.7rem; -} - -.header-nav__content { - background: #0c0c0c; - position: relative; - left: 50px; - opacity: 0; - visibility: hidden; -} - -.header-nav__list { - font-family: "metropolis-regular", sans-serif; - font-size: 1.6rem; - margin: 3.6rem 0 3rem 0; - padding: 0 0 1.8rem 0; - list-style: none; - counter-reset: ctr; -} -.header-nav__list li { - border-top: 1px solid rgba(255, 255, 255, 0.04); - line-height: 4.8rem; - position: relative; -} -.header-nav__list li:last-child { - border-bottom: 1px solid rgba(255, 255, 255, 0.04); -} -.header-nav__list a { - display: block; - color: #ffffff; - position: relative; - padding-left: 3.5rem; -} -.header-nav__list a::before { - content: counter(ctr, decimal-leading-zero) "."; - counter-increment: ctr; - font-family: "metropolis-regular", sans-serif; - font-size: 11px; - color: rgba(255, 255, 255, 0.25); - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - position: absolute; - left: 3px; - top: 0; -} -.header-nav__list a:hover::before { - color: #cc147f; -} - -.header-nav__social { - list-style: none; - display: inline-block; - font-size: 1.8rem; - margin: 0; -} -.header-nav__social li { - display: inline-block; - margin-right: 12px; - padding-left: 0; -} -.header-nav__social li a { - color: rgba(255, 255, 255, 0.15); -} -.header-nav__social li a:hover, -.header-nav__social li a:focus { - color: white; -} -.header-nav__social li:last-child { - margin: 0; -} - -.header-nav__close { - z-index: 800; - display: block; - background-color: rgba(0, 0, 0, 0.3); - height: 30px; - width: 30px; - border-radius: 3px; - position: absolute; - top: 36px; - right: 30px; - font: 0/0 a; - text-shadow: none; - color: transparent; -} -.header-nav__close span::before, -.header-nav__close span::after { - content: ""; - display: block; - height: 2px; - width: 12px; - background-color: #ffffff; - position: absolute; - top: 50%; - left: 9px; - margin-top: -1px; -} -.header-nav__close span::before { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} -.header-nav__close span::after { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - -/* menu is open - * ----------------------------------------------- */ -.menu-is-open .header-nav { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - visibility: visible; - -webkit-overflow-scrolling: touch; -} -.menu-is-open .header-nav .header-nav__content { - opacity: 1; - visibility: visible; - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.5s; - transition-duration: 0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - -webkit-transition-delay: 0.3s; - transition-delay: 0.3s; - left: 0; -} - - -/* ------------------------------------------------------------------- - * ## mobile menu toggle - * ------------------------------------------------------------------- */ -.header-menu-toggle { - position: fixed; - right: 110px; - top: 42px; - width: 48px; - height: 45px; - line-height: 45px; - font-family: "metropolis-regular", sans-serif; - font-size: 1.4rem; - text-transform: uppercase; - letter-spacing: 0.4rem; - color: #ffffff; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} -.header-menu-toggle::before { - display: inline-block; - content: "Menu"; - height: 45px; - left: auto; - text-align: right; - padding-left: 15px; - padding-right: 10px; - position: absolute; - top: 0; - right: 100%; -} -.header-menu-toggle.opaque { - background-color: #000000; -} -.header-menu-toggle.opaque::before { - display: none; -} -.header-menu-toggle:hover, -.header-menu-toggle:focus, -.header-menu-toggle:active { - color: #cc147f; -} - -.header-menu-icon { - display: block; - width: 26px; - height: 2px; - margin-top: -1px; - right: auto; - bottom: auto; - background-color: white; - position: absolute; - left: 11px; - top: 50%; -} -.header-menu-icon::before, -.header-menu-icon::after { - content: ""; - width: 100%; - height: 100%; - background-color: inherit; - position: absolute; - left: 0; -} -.header-menu-icon::before { - top: -9px; -} -.header-menu-icon::after { - bottom: -9px; -} - -/* ------------------------------------------------------------------- - * responsive: - * header - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1600px) { - .header-logo { - left: 60px; - } - - .header-menu-toggle { - right: 60px; - } -} -@media only screen and (max-width: 800px) { - .header-logo { - left: 40px; - } - - .header-menu-toggle { - right: 40px; - } -} -@media only screen and (max-width: 600px) { - .s-header { - height: 90px; - top: 12px; - } - - .header-logo { - left: 30px; - } - .header-logo img { - width: 180px; - height: 34px; - } - - .header-menu-toggle { - right: 25px; - top: 30px; - } -} -@media only screen and (max-width: 500px) { - .header-menu-toggle::before { - display: none; - } -} -@media only screen and (max-width: 400px) { - .s-header { - top: 6px; - } - - .header-logo { - left: 25px; - } - .header-logo img img { - width: 141px; - height: 27px; - } - - .header-menu-toggle { - top: 24px; - right: 20px; - } -} - - -/* =================================================================== - * # home - * - * ------------------------------------------------------------------- */ -.s-home { - width: 100%; - height: 100%; - min-height: 786px; - background-color: transparent; - position: relative; - display: table; -} -.s-home .shadow-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0.4; - background: linear-gradient(to right, black 0%, black 20%, transparent 100%); -} -.s-home::before { - display: block; - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.no-js .s-home { - background: #000000; -} - - -/* ------------------------------------------------------------------- - * ## home content - * ------------------------------------------------------------------- */ -.home-content { - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - padding-bottom: 15.6rem; - overflow: hidden; - position: relative; -} -.home-content h1 { - font-family: "domine-bold", sans-serif; - font-size: 9rem; - line-height: 1.1; - margin-top: 0; - color: #ffffff; -} -.home-content h1 + p { - font-family: "metropolis-light", sans-serif; - font-size: 3.8rem; - line-height: 1.421; - color: rgba(255, 255, 255, 0.8); - margin-top: 2.4rem; - padding-left: 10rem; - position: relative; -} -.home-content h1 + p::before { - content: ""; - display: block; - width: 6.5rem; - height: 1px; - background-color: #cc147f; - position: absolute; - left: 6px; - top: 2.7rem; -} - -.home-content__main { - padding-top: 15rem; - padding-right: 20rem; - position: relative; -} - - -/* ------------------------------------------------------------------- - * ## home sidelinks - * ------------------------------------------------------------------- */ -.home-sidelinks { - list-style: none; - font-family: "metropolis-regular", sans-serif; - font-size: 1.4rem; - line-height: 1.714; - text-transform: uppercase; - letter-spacing: 0.3rem; - margin: 0; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - position: absolute; - top: 50%; - right: 0; -} -.home-sidelinks li { - display: block; - padding: 0; - text-align: left; - background-color: rgba(0, 0, 0, 0.2); - border-top: 1px solid rgba(255, 255, 255, 0.05); - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - position: relative; -} -.home-sidelinks li:last-child { - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} -.home-sidelinks li::before { - content: ""; - display: block; - height: 6px; - width: 6px; - background-color: #cc147f; - border-radius: 50%; - position: absolute; - top: 3rem; - left: 2rem; -} -.home-sidelinks a { - display: block; - padding: 2.1rem 15rem 2.1rem 4rem; - color: #ffffff; -} -.home-sidelinks span { - display: block; - font-family: "metropolis-regular", sans-serif; - font-size: 1.5rem; - line-height: 1.6rem; - color: rgba(255, 255, 255, 0.5); - text-transform: none; - letter-spacing: 0; -} -.home-sidelinks li:hover { - background-color: rgba(0, 0, 0, 0.5); - border-top: 1px solid rgba(0, 0, 0, 0.1); -} - - -/* ------------------------------------------------------------------- - * ## home scroll - * ------------------------------------------------------------------- */ -.home-scroll { - height: 4.8rem; - position: absolute; - right: 110px; - bottom: 6.6rem; -} -.home-scroll__text { - display: inline-block; - font-family: "metropolis-semibold", sans-serif; - font-size: 11px; - line-height: 4.8rem; - text-transform: uppercase; - letter-spacing: 0.3rem; - color: #ffffff; - border-bottom: 1px solid transparent; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - position: relative; - right: 7.5rem; -} -.home-scroll__icon { - display: block; - height: 4.8rem; - width: 4.8rem; - background-color: #ffffff; - background-image: url(../images/icons/icon-arrow-down.svg); - background-position: center center; - background-repeat: no-repeat; - background-size: 10px 15px; - border-radius: 50%; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - position: absolute; - top: 0; - right: 0; -} -.home-scroll:hover .home-scroll__text { - border-bottom: 1px solid #ffffff; -} - -.no-svg .home-scroll__icon { - background-image: url(../images/icons/png/icon-arrow-down.png); -} - - -/* ------------------------------------------------------------------- - * ## home scroll - * ------------------------------------------------------------------- */ -.home-social { - list-style: none; - font-size: 14px; - line-height: 4.8rem; - margin: 0; - color: #ffffff; - position: absolute; - bottom: 6.6rem; - left: 110px; -} -.home-social a { - color: #ffffff; - border-bottom: 1px solid transparent; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} -.home-social a:hover { - border-bottom: 1px solid #ffffff; -} -.home-social i { - display: none; -} -.home-social .home-social-title { - font-family: "metropolis-semibold", sans-serif; - padding-right: 4rem; - margin-right: 0.8rem; - position: relative; -} -.home-social .home-social-title::after { - display: block; - content: ""; - width: 2.4rem; - height: 1px; - background-color: rgba(255, 255, 255, 0.1); - position: absolute; - right: 0; - top: 50%; -} -.home-social li { - display: inline-block; - position: relative; - margin-right: 0.6rem; -} -.home-social li a { - display: block; -} -.home-social li:last-child { - margin-right: 0; -} - -/* animate .home-content__main - * ------------------------------------------------------------------- */ -html.cl-preload .home-content__main { - opacity: 0; -} - -html.cl-loaded .home-content__main { - animation-duration: 2s; - -webkit-animation-name: fadeIn; - animation-name: fadeIn; -} - -html.no-csstransitions .home-content__main { - opacity: 1; -} - - -/* ------------------------------------------------------------------- - * ## home animations - * ------------------------------------------------------------------- */ -/* fade in */ -@-webkit-keyframes fadeIn { - from { - opacity: 0; - -webkit-transform: translate3d(0, 150%, 0); - -ms-transform: translate3d(0, 150%, 0); - transform: translate3d(0, 150%, 0); - } - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} -@keyframes fadeIn { - from { - opacity: 0; - -webkit-transform: translate3d(0, 150%, 0); - -ms-transform: translate3d(0, 150%, 0); - transform: translate3d(0, 150%, 0); - } - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} -/* fade out */ -@-webkit-keyframes fadeOut { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(0, -150%, 0); - -ms-transform: translate3d(0, -150%, 0); - transform: translate3d(0, -150%, 0); - } -} -@keyframes fadeOut { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(0, -150%, 0); - -ms-transform: translate3d(0, -150%, 0); - transform: translate3d(0, -150%, 0); - } -} - -/* ------------------------------------------------------------------- - * responsive: - * home - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1600px) { - .home-content h1 { - font-size: 8.8rem; - } - .home-content h1 + p { - font-size: 3.6rem; - } - - .home-content__main { - padding-top: 18rem; - } - - .home-sidelinks { - font-size: 1.3rem; - } - - .home-scroll { - right: 60px; - } - - .home-social { - left: 60px; - } -} -@media only screen and (max-width: 1500px) { - .home-content h1 { - font-size: 8.6rem; - } - - .home-content__main { - max-width: 1100px; - } -} -@media only screen and (max-width: 1400px) { - .home-content h1 { - font-size: 7.8rem; - } - .home-content h1 + p { - font-size: 3rem; - } - .home-content h1 + p::before { - top: 2.4rem; - } - - .home-content__main { - max-width: 1000px; - } - - .home-sidelinks a { - padding: 2.1rem 12rem 2.1rem 4rem; - } -} -@media only screen and (max-width: 1200px) { - .home-content h1 { - font-size: 7.2rem; - } - .home-content h1 + p { - font-size: 2.4rem; - padding-right: 2rem; - padding-left: 8rem; - } - .home-content h1 + p::before { - width: 5.5rem; - top: 1.8rem; - } - .home-content br { - display: none; - } - - .home-content__main { - max-width: 850px; - } - - .home-sidelinks a { - padding: 1.8rem 6rem 1.8rem 4rem; - } -} -@media only screen and (max-width: 1000px) { - .home-content__main { - max-width: 650px; - padding-right: 0; - } - - .home-sidelinks { - display: none; - } -} -@media only screen and (max-width: 900px) { - .home-content h1 { - font-size: 7rem; - } -} -@media only screen and (max-width: 800px) { - .home-content h1 { - font-size: 6.5rem; - } - - .home-content__main { - max-width: 580px; - } - - .home-scroll { - right: 40px; - } - .home-scroll__text { - display: none; - } - - .home-social { - left: 40px; - } -} -@media only screen and (max-width: 700px) { - .home-content h1 { - font-size: 5.5rem; - } - .home-content h1 + p { - font-size: 2.2rem; - padding-right: 0; - } - .home-content h1 + p::before { - top: 1.6rem; - } - - .home-content__main { - max-width: 480px; - } -} -@media only screen and (max-width: 600px) { - .home-content h1 { - font-size: 5.4rem; - } - .home-content h1 + p { - padding-top: 3rem; - padding-left: 0; - } - .home-content h1 + p::before { - left: 0; - top: 0; - } - - .home-content__main { - width: auto; - padding-left: 35px; - padding-right: 35px; - } - - .home-social { - left: 30px; - bottom: 6rem; - bottom: 6rem; - } - .home-social i { - display: inline; - } - .home-social .home-social-text { - display: none; - } - - .home-scroll { - right: 30px; - bottom: 6rem; - } - .home-scroll__icon { - height: 4.2rem; - width: 4.2rem; - } -} -@media only screen and (max-width: 500px) { - .home-content h1 { - font-size: 5rem; - } - .home-content h1 + p { - padding-top: 2.8rem; - } - - .s-home { - min-height: 642px; - } -} -@media only screen and (max-width: 450px) { - .home-content h1 { - font-size: 4.6rem; - } - .home-content h1 + p { - padding-top: 2.4rem; - } -} -@media only screen and (max-width: 400px) { - .s-home { - min-height: 630px; - } - - .home-content h1 { - font-size: 4.2rem; - } - .home-content h1 + p { - padding-top: 2.1rem; - } - - .home-content__main { - padding-left: 25px; - padding-right: 25px; - } - - .home-social { - font-size: 13px; - left: 25px; - } - .home-social .home-social-title { - padding-right: 0.6rem; - } - .home-social .home-social-title::after { - display: none; - } - - .home-scroll { - right: 25px; - } -} - - - -/* =================================================================== - * # about - * - * ------------------------------------------------------------------- */ -.s-about { - padding-top: 18rem; - padding-bottom: 18rem; - background-color: #ffffff; - position: relative; -} - - -/* ------------------------------------------------------------------- - * ## about process - * ------------------------------------------------------------------- */ -.process { - margin-top: 4.2rem; - position: relative; -} -.process__vline-left, -.process__vline-right { - display: block; - width: 1px; - height: 100%; - background-color: rgba(0, 0, 0, 0.15); - position: absolute; -} -.process__vline-left { - top: 0; - left: calc(20px + 24px); -} -.process__vline-right { - top: 0; - left: calc(50% + 20px + 24px); -} -.process h4 { - font-size: 2.8rem; - line-height: 1.5; - margin-top: 0; - position: relative; -} -.process__col { - position: relative; - min-height: 24.6rem; -} -.process__col::before { - content: attr(data-item); - display: block; - font-family: "metropolis-semibold", sans-serif; - font-size: 2.1rem; - text-align: center; - color: #ffffff; - background-color: #26bfb5; - height: 48px; - width: 48px; - line-height: 48px; - border-radius: 50%; - box-shadow: 0 0 0 18px #ffffff; - position: absolute; - left: 20px; - top: 0; -} -.process__text { - margin-left: 7.5rem; - padding-right: 30px; -} - - -/* ------------------------------------------------------------------- - * responsive: - * about - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .s-about { - padding-top: 15rem; - padding-bottom: 15rem; - } - - .process__vline-left { - left: calc(15px + 22px); - } - .process__vline-right { - left: calc(50% + 15px + 22px); - } - .process h4 { - font-size: 2.6rem; - } - .process__col::before { - height: 45px; - width: 45px; - line-height: 45px; - font-size: 1.8rem; - left: 15px; - } - .process__text { - margin-left: 6.8rem; - padding-right: 0; - } -} -@media only screen and (max-width: 800px) { - .s-about { - padding-top: 12rem; - padding-bottom: 12rem; - } - - .process { - margin-top: 3rem; - } - .process__vline-right { - display: none; - } - .process__col { - min-height: 0; - } - .process__col::before { - top: -3px; - } -} -@media only screen and (max-width: 600px) { - .process__vline-left { - left: calc(10px + 22px); - } - .process__col::before { - top: -3px; - left: 10px; - } - .process h4 { - font-size: 2.4rem; - } -} -@media only screen and (max-width: 400px) { - .s-about { - padding-top: 9.6rem; - } - - .process h4 { - font-size: 2.2rem; - padding-left: 5.4rem; - margin-bottom: 1.8rem; - } - .process__vline-left { - display: none; - } - .process__col { - margin-bottom: 4.2rem; - } - .process__col::before { - height: 36px; - width: 36px; - line-height: 36px; - font-size: 1.6rem; - top: -3px; - left: 0; - } - .process__text { - margin-left: 0; - } -} - - - -/* =================================================================== - * # services - * - * ------------------------------------------------------------------- */ -.s-services { - padding-top: 18rem; - padding-bottom: 18rem; - color: #555555; - position: relative; -} - - -/* ------------------------------------------------------------------- - * ## services list - * ------------------------------------------------------------------- */ -.services-list { - margin-top: 6rem; -} -.services-list .service-item { - margin-bottom: 1.5rem; -} -.services-list .service-item h3 { - margin-top: 0; - margin-bottom: 1.8rem; -} -.services-list .service-icon { - color: #26bfb5; - font-size: 4.8rem; -} - - -/* ------------------------------------------------------------------- - * responsive: - * services - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .s-services { - padding-top: 15rem; - padding-bottom: 15rem; - } - - .services-list [class*="col-"]:nth-child(2n + 1) { - padding-right: 30px; - } - .services-list [class*="col-"]:nth-child(2n + 2) { - padding-left: 30px; - } -} -@media only screen and (max-width: 800px) { - .s-services { - padding-top: 12rem; - padding-bottom: 12rem; - } - - .services-list { - margin-top: 3rem; - } - .services-list .service-icon { - font-size: 4.5rem; - } - .services-list [class*="col-"]:nth-child(n) { - padding: 0 15px; - } -} -@media only screen and (max-width: 600px) { - .services-list [class*="col-"]:nth-child(n) { - padding: 0 10px; - } -} -@media only screen and (max-width: 400px) { - .s-services { - padding-top: 9.6rem; - } - - .services-list [class*="col-"]:nth-child(n) { - padding: 0; - } -} - - - -/* =================================================================== - * # works - * - * ------------------------------------------------------------------- */ -.s-works { - background: #ffffff; - padding: 18rem 0 24rem; - position: relative; -} - - -/* ------------------------------------------------------------------- - * ## bricks/masonry - * ------------------------------------------------------------------- */ -.masonry-wrap { - margin-top: 6rem; - max-width: none; - width: 1380px; -} - -.masonry:after { - content: ""; - display: table; - clear: both; -} -.masonry .grid-sizer, -.masonry__brick { - width: 460px; -} -.masonry__brick { - float: left; - padding: 0; -} - -.item-folio { - position: relative; - overflow: hidden; -} - -.item-folio__thumb img { - vertical-align: top; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} -.item-folio__thumb a { - display: block; -} -.item-folio__thumb a::before { - z-index: 1; - display: block; - background-color: rgba(255, 255, 255, 0.7); - content: ""; - opacity: 0; - visibility: hidden; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} -.item-folio__thumb a::after { - z-index: 1; - content: "..."; - font-family: georgia, serif; - font-size: 3rem; - color: #000000; - display: block; - height: 30px; - width: 30px; - line-height: 30px; - margin-left: -15px; - margin-top: -15px; - position: absolute; - left: 50%; - top: 50%; - text-align: center; - opacity: 0; - visibility: hidden; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - -webkit-transform: scale(0.5); - -ms-transform: scale(0.5); - transform: scale(0.5); -} - -.item-folio__text { - z-index: 2; - position: absolute; - left: 0; - bottom: 3.6rem; - padding: 0 3rem; - -webkit-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - opacity: 0; - visibility: hidden; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.item-folio__title { - color: #000000; - font-size: 1.8rem; - margin: 0; -} - -.item-folio__cat { - color: black; - font-family: "metropolis-regular", sans-serif; - font-size: 1.5rem; - margin-bottom: 0; -} - -.item-folio__caption { - display: none; -} - -.item-folio__project-link { - z-index: 500; - display: block; - font-family: "metropolis-semibold", sans-serif; - font-size: 1.3rem; - color: #ffffff; - background-color: #000000; - padding: 0.6rem 1.2rem; - position: absolute; - top: 3rem; - left: 3rem; - opacity: 0; - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); -} -.item-folio__project-link::before { - display: block; - content: ""; - height: 1px; - width: 3rem; - background-color: white; - position: absolute; - top: 50%; - left: -3rem; -} -.item-folio__project-link:hover, -.item-folio__project-link:focus, -.item-folio__project-link:active { - background-color: #cc147f; - color: #ffffff; -} - -/* on hover */ -.item-folio:hover .item-folio__thumb a::before { - opacity: 1; - visibility: visible; -} -.item-folio:hover .item-folio__thumb a::after { - opacity: 1; - visibility: visible; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} -.item-folio:hover .item-folio__thumb img { - -webkit-transform: scale(1.05); - -ms-transform: scale(1.05); - transform: scale(1.05); -} -.item-folio:hover .item-folio__project-link { - opacity: 1; - visibility: visible; - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} -.item-folio:hover .item-folio__text { - opacity: 1; - visibility: visible; - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} - - -/* ------------------------------------------------------------------- - * responsive: - * works - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1500px) { - .masonry-wrap { - width: 1200px; - } - - .masonry .grid-sizer, - .masonry__brick { - width: 400px; - } -} -@media only screen and (max-width: 1350px) { - .masonry-wrap { - width: 1158px; - } - - .masonry .grid-sizer, - .masonry__brick { - width: 386px; - } -} -@media only screen and (max-width: 1300px) { - .masonry-wrap { - width: 990px; - } - - .masonry .grid-sizer, - .masonry__brick { - width: 330px; - } -} -@media only screen and (max-width: 1200px) { - .s-works { - padding: 15rem 0 22.2rem; - } -} -@media only screen and (max-width: 1100px) { - .masonry-wrap { - width: 90%; - max-width: 800px; - } - - .masonry .grid-sizer, - .masonry__brick { - width: 50%; - } -} -@media only screen and (max-width: 800px) { - .s-works { - padding: 12rem 0 21rem; - } - - .masonry-wrap { - margin-top: 3rem; - } -} -@media only screen and (max-width: 600px) { - .masonry .grid-sizer, - .masonry__brick { - width: 100%; - } -} -@media only screen and (max-width: 400px) { - .s-works { - padding: 9.6rem 0 21rem; - } - - .masonry-wrap { - width: auto; - } -} - - - -/* =================================================================== - * # testimonials - * - * ------------------------------------------------------------------- */ -.testimonials-header { - text-align: center; - margin-top: 7.2rem; -} - -.testimonials { - font-size: 1.8rem; - line-height: 2; - margin-top: 4.2rem; - border-top: 1px solid rgba(0, 0, 0, 0.15); - position: relative; -} - -.testimonials__slider { - position: relative; -} -.testimonials__slider .slick-slide { - outline: none; -} -.testimonials__slider .slick-dots { - display: block; - list-style: none; - width: 100%; - padding: 0; - margin: 3rem 0 0 0; - text-align: center; - position: absolute; - top: 100%; - left: 0; -} -.testimonials__slider .slick-dots li { - display: inline-block; - width: 27px; - height: 27px; - margin: 0; - padding: 9px; - cursor: pointer; -} -.testimonials__slider .slick-dots li button { - display: block; - width: 10px; - height: 10px; - line-height: 10px; - border-radius: 50%; - background: rgba(0, 0, 0, 0.4); - border: none; - padding: 0; - margin: 0; - cursor: pointer; - font: 0/0 a; - text-shadow: none; - color: transparent; -} -.testimonials__slider .slick-dots li button:hover, -.testimonials__slider .slick-dots li button:focus { - outline: none; -} -.testimonials__slider .slick-dots li.slick-active button, -.testimonials__slider .slick-dots li:hover button { - background: #000000; -} - -.testimonials__slide { - position: relative; - padding-top: 4.5rem; - padding-left: 12rem; - padding-right: 3rem; -} -.testimonials__slide::before { - content: ""; - display: block; - width: 1px; - height: 3.9rem; - position: absolute; - left: calc(7.8rem / 2); - top: 0; - background-color: rgba(0, 0, 0, 0.2); -} - -.testimonials__avatar { - width: 7.8rem; - height: 7.8rem; - border-radius: 100%; - position: absolute; - left: 0; - top: 4.8rem; - outline: none; -} - -.testimonials__author { - margin-top: 0rem; - font-family: "metropolis-bold", sans-serif; - font-size: 1.8rem; - line-height: 1.5; - color: #000000; -} -.testimonials__author span { - display: block; - font-family: "metropolis-regular", sans-serif; - font-size: 1.4rem; - line-height: 1.5; - color: rgba(85, 85, 85, 0.7); - text-transform: none; - letter-spacing: 0; -} - -/* ------------------------------------------------------------------- - * responsive: - * testimonials - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1100px) { - .testimonials { - font-size: 1.7rem; - } - - .testimonials__slide { - padding-left: 9.5rem; - } - .testimonials__slide::before { - left: calc(6.6rem / 2); - } - - .testimonials__avatar { - width: 6.6rem; - height: 6.6rem; - } -} -@media only screen and (max-width: 600px) { - .testimonials-header h1 { - font-size: 2.7rem; - } - - .testimonials { - margin-top: 3rem; - } - - .testimonials__slide { - padding: 13.2rem 0 0; - text-align: center; - } - .testimonials__slide::before { - left: 50%; - } - - .testimonials__avatar { - left: 50%; - margin-left: -3.3rem; - } -} - - - -/* =================================================================== - * # stats - * - * ------------------------------------------------------------------- */ -.s-stats { - padding-top: 4.2rem; - padding-bottom: 4.2rem; - background-color: #050505; - background-image: url(../images/stats-bg.jpg); - background-repeat: no-repeat; - background-position: center center; - background-size: cover; - overflow: hidden; - position: relative; -} -.s-stats::before { - display: block; - content: ""; - background-color: #050505; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0.8; -} - -.stats { - text-align: center; -} -.stats__col { - margin: 5.4rem 0; - padding: 0 2rem; - position: relative; - overflow: hidden; - white-space: nowrap; -} -.stats__count { - font-family: "metropolis-light", sans-serif; - font-size: 9.2rem; - line-height: 1; - color: #ffffff; - padding-bottom: 1.8rem; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - position: relative; -} -.stats__count::after { - display: block; - content: ""; - height: 1px; - width: 100px; - background-color: rgba(255, 255, 255, 0.1); - position: absolute; - bottom: 0; - left: 50%; - margin-left: -50px; -} -.stats h5 { - font-family: "metropolis-regular", sans-serif; - font-size: 1.8rem; - line-height: 1.333; - color: rgba(255, 255, 255, 0.5); - margin-top: 1.8rem; - position: relative; -} - - -/* ------------------------------------------------------------------- - * responsive: - * stats - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .stats { - max-width: 900px; - } - .stats__col { - margin: 3rem 0; - } - .stats__count { - font-size: 9rem; - } -} -@media only screen and (max-width: 600px) { - .stats__count { - font-size: 8.4rem; - } -} -@media only screen and (max-width: 400px) { - .s-stats { - padding-top: 4.5rem; - padding-bottom: 4.5rem; - } - - .stats__count { - font-size: 8.2rem; - } -} - - - -/* =================================================================== - * # contact - * - * ------------------------------------------------------------------- */ -.s-contact { - padding-top: 21rem; - padding-bottom: 10.2rem; - background-color: #111111; - color: rgba(255, 255, 255, 0.3); - position: relative; -} -.s-contact a { - color: #ffffff; - border-bottom: 1px solid transparent; - display: inline-block; -} -.s-contact a:hover, -.s-contact a:focus { - border-bottom: 1px solid rgba(255, 255, 255, 0.1); -} - -.contact-main { - margin-top: 14.4rem; - margin-bottom: 4.8rem; -} - -.contact-email { - display: inline-block; - font-family: "metropolis-light", sans-serif; - font-size: 5.4rem; - line-height: 1.222; - color: #ffffff; - padding-top: 3.6rem; - position: relative; -} -.contact-email::before { - content: ""; - display: block; - height: 1px; - width: 60px; - background-color: #cc147f; - position: absolute; - top: 0; - left: 0; -} - -.contact-number { - font-family: "metropolis-light", sans-serif; - font-size: 3rem; - line-height: 1.7; - display: block; -} - -.contact-address { - font-family: "metropolis-regular", sans-serif; - font-size: 2.8rem; - line-height: 1.607; - margin-top: 2.4rem; -} - - -/* ------------------------------------------------------------------- - * ## contact social - * ------------------------------------------------------------------- */ -.contact-social { - list-style: none; - display: inline-block; - margin: 0 0 0 0.3rem; - font-size: 3rem; -} -.contact-social li { - margin-right: 15px; - padding-left: 0; - display: inline-block; -} -.contact-social li a { - color: rgba(255, 255, 255, 0.3); - border: none !important; -} -.contact-social li a:hover, -.contact-social li a:focus { - color: #ffffff; -} -.contact-social li:last-child { - margin: 0; -} - - -/* ------------------------------------------------------------------- - * ## subscribe - * ------------------------------------------------------------------- */ -.contact-subscribe { - margin: 0; - padding: 0; - position: relative; -} - -.mc-form { - margin-top: 2.1rem; - width: 100%; -} -.mc-form input[type="email"] { - background-color: rgba(0, 0, 0, 0.2); - color: rgba(255, 255, 255, 0.5); - width: 100%; - height: 5.4rem; - padding: 1.2rem 150px 1.2rem 20px; - margin-bottom: 1.8rem; - border: none; -} -.mc-form input[type="email"]:focus { - color: #ffffff; -} -.mc-form input[type="email"]::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.2); -} -.mc-form input[type="email"]:-moz-placeholder { - color: rgba(255, 255, 255, 0.2); - /* Firefox 18- */ -} -.mc-form input[type="email"]::-moz-placeholder { - color: rgba(255, 255, 255, 0.2); - /* Firefox 19+ */ -} -.mc-form input[type="email"]:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.2); -} -.mc-form input[type="email"].placeholder { - color: rgba(255, 255, 255, 0.2) !important; -} -.mc-form input[type="submit"] { - color: #ffffff; - background: #cc147f; - border-color: #cc147f; - padding: 0 15px; - position: absolute; - top: 0; - right: 0; -} -.mc-form label { - color: #ffffff; - font-family: "metropolis-semibold", sans-serif; - font-size: 1.3rem; - padding: 0 2rem; -} -.mc-form label i { - padding-right: 6px; -} - - -/* ------------------------------------------------------------------- - * ## copyright - * ------------------------------------------------------------------- */ -.cl-copyright { - margin-top: 2.1rem; -} - -.cl-copyright span { - font-size: 15px; - display: inline-block; -} -.cl-copyright span::after { - content: "|"; - display: inline-block; - padding: 0 1rem 0 1.2rem; - color: rgba(255, 255, 255, 0.1); -} -.cl-copyright span:last-child::after { - display: none; -} - - -/* ------------------------------------------------------------------- - * ## go to top - * ------------------------------------------------------------------- */ -.cl-go-top { - z-index: 600; - position: absolute; - bottom: 10.8rem; - right: 105px; -} -.cl-go-top a { - text-decoration: none; - border: 0 none; - display: block; - height: 60px; - width: 60px; - line-height: 60px; - text-align: center; - background: black; - color: white; - text-align: center; - text-transform: uppercase; - border-radius: 50%; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} -.cl-go-top a i { - font-size: 21px; - line-height: inherit; -} -.cl-go-top a:hover, -.cl-go-top a:focus { - background-color: #ffffff; - color: #000000; -} -.cl-go-top::before { - content: ""; - display: block; - width: 1px; - height: 100px; - background-color: rgba(255, 255, 255, 0.1); - position: absolute; - top: -115px; - left: 50%; -} -.cl-go-top::after { - content: "back to top"; - display: inline-block; - width: 120px; - font-size: 1.2rem; - line-height: 30px; - text-transform: uppercase; - letter-spacing: 0.2rem; - color: rgba(255, 255, 255, 0.15); - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - -webkit-transform-origin: left bottom; - -ms-transform-origin: left bottom; - transform-origin: left bottom; - position: absolute; - left: calc(30px + 15px); - top: -165px; -} - -.menu-is-open .cl-go-top { - display: none; -} - -/* ------------------------------------------------------------------- - * responsive: - * contact - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1600px) { - .cl-go-top { - right: 55px; - } -} -@media only screen and (max-width: 1200px) { - .s-contact { - padding-top: 15rem; - } - - .contact-main { - margin-top: 13.2rem; - } - - .contact-email { - font-size: 5rem; - } - - .contact-number { - font-size: 2.6rem; - } - - .contact-address { - font-size: 2.4rem; - } - - .contact-social { - font-size: 2.8rem; - } - - .cl-copyright { - margin-top: 3rem; - } -} -@media only screen and (max-width: 1000px) { - .contact-email { - font-size: 4.2rem; - } - - .contact-number { - font-size: 2.4rem; - } - - .contact-address { - font-size: 2.1rem; - } - - .contact-social { - font-size: 2.4rem; - } -} -@media only screen and (max-width: 800px) { - .s-contact { - padding-top: 12rem; - padding-bottom: 9rem; - } - - .contact-secondary, - .cl-copyright { - padding-right: 7.8rem; - } - - .contact-secondary { - margin-bottom: 1.5rem; - } - - .contact-email { - font-size: 3.6rem; - } - - .contact-number { - font-size: 2rem; - } - - .contact-address { - font-size: 2rem; - } - - .cl-go-top { - right: 35px; - bottom: 9rem; - } - .cl-go-top a { - height: 48px; - width: 48px; - line-height: 48px; - } - .cl-go-top a i { - font-size: 18px; - } - .cl-go-top::after { - font-size: 1.1rem; - left: calc(24px + 15px); - } -} -@media only screen and (max-width: 600px) { - .s-contact { - padding-bottom: 6rem; - } - - .contact-main { - margin-top: 12rem; - } - - .contact-email { - font-size: 3rem; - } - - .contact-number { - font-size: 1.8rem; - } - - .contact-address { - font-size: 1.8rem; - } - - .contact-social { - font-size: 2rem; - } - - .cl-go-top { - right: 25px; - bottom: 7.2rem; - } -} -@media only screen and (max-width: 480px) { - .contact-subscribe { - margin-top: 3rem; - } - - .mc-form input[type="email"], - .mc-form label { - text-align: center; - } - .mc-form input[type="email"] { - padding: 1.2rem 20px 1.2rem; - } - .mc-form input[type="submit"] { - position: static; - width: 100%; - margin-bottom: 1.8rem; - } - - .cl-copyright { - margin-top: 0; - } -} -@media only screen and (max-width: 400px) { - .s-contact { - padding-top: 9.6rem; - padding-bottom: 3rem; - } - - .contact-main { - margin-top: 9.6rem; - } - - .contact-secondary { - padding: 0; - } - - .contact-email { - font-size: 2.4rem; - } - - .contact-number { - font-size: 1.6rem; - } - - .cl-copyright { - margin-top: 9rem; - padding: 0; - text-align: center; - } - - .cl-copyright span { - font-size: 14px; - } - .cl-copyright span::after { - display: none; - } - - .cl-go-top { - bottom: 12rem; - right: 50%; - margin-right: -24px; - } - .cl-go-top::before, - .cl-go-top::after { - display: none; - } -} - -/*# sourceMappingURL=main.css.map */ +/* =================================================================== + * + * Transcend v1.0 Main Stylesheet + * 03-19-2018 + * ------------------------------------------------------------------ + * + * TOC: + * # base style overrides + * ## links + * # typography & general theme styles + * ## Lists + * ## responsive video container + * ## floated image + * ## tables + * ## Spacing + * ## pace.js styles - minimal + * # preloader + * # forms + * ## Style Placeholder Text + * ## Change Autocomplete styles in Chrome + * # buttons + * # additional components + * ## alert box + * ## additional typo styles + * ## skillbars + * # reusable and common theme styles + * ## display headings + * # header styles + * ## header logo + * ## main navigation + * ## mobile menu toggle + * # home + * ## home content + * ## home sidelinks + * ## home scroll + * ## home scroll + * ## home animations + * # about + * ## about process + * # services + * ## services list + * # works + * ## bricks/masonry + * # testimonials + * # stats + * # contact + * ## contact social + * ## subscribe + * ## copyright + * ## go to top + * + * =================================================================== */ + + +/* =================================================================== + * # base style overrides + * + * ------------------------------------------------------------------- */ +html { + font-size: 10px; +} +@media only screen and (max-width: 400px) { + html { + font-size: 9.411764705882353px; + } +} + +html, body { + height: 100%; +} + +body { + background: #111111; + font-family: "metropolis-regular", sans-serif; + font-size: 1.7rem; + font-style: normal; + font-weight: normal; + line-height: 1.765; + color: #555555; + margin: 0; + padding: 0; +} + +/* ------------------------------------------------------------------- + * ## links + * ------------------------------------------------------------------- */ +a { + color: #cc147f; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +a:hover, +a:focus, +a:active { + color: #26bfb5; +} + +a:hover, +a:active { + outline: 0; +} + + +/* =================================================================== + * # typography & general theme styles + * + * ------------------------------------------------------------------- */ +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + font-family: "metropolis-semibold", sans-serif; + color: #000000; + font-style: normal; + font-weight: normal; + text-rendering: optimizeLegibility; +} + +h1, .h1, h2, .h2, h3, .h3, h4, .h4 { + margin-top: 6rem; + margin-bottom: 1.8rem; +} + +@media only screen and (max-width:600px) { + h1, .h1, h2, .h2, h3, .h3, h4, .h4 { + margin-top: 5.1rem; + } + +} + +h5, .h5, h6, .h6 { + margin-top: 4.2rem; + margin-bottom: 1.5rem; +} + +@media only screen and (max-width:600px) { + h5, .h5, h6, .h6 { + margin-top: 3.6rem; + margin-bottom: 0.9rem; + } + +} + +h1, .h1 { + font-size: 3.6rem; + line-height: 1.25; + letter-spacing: -0.1rem; +} + +@media only screen and (max-width:600px) { + h1, .h1 { + font-size: 3.3rem; + letter-spacing: -0.07rem; + } + +} + +h2, .h2 { + font-size: 3rem; + line-height: 1.3; +} + +h3, .h3 { + font-size: 2.4rem; + line-height: 1.25; +} + +h4, .h4 { + font-size: 2.1rem; + line-height: 1.286; +} + +h5, .h5 { + font-size: 1.7rem; + line-height: 1.235; +} + +h6, .h6 { + font-size: 1.4rem; + line-height: 1.286; + text-transform: uppercase; + letter-spacing: 0.16rem; +} + +p img { + margin: 0; +} + +p.lead { + font-family: "metropolis-regular", sans-serif; + font-size: 2.4rem; + line-height: 1.75; + margin-bottom: 3.6rem; + color: rgba(85, 85, 85, 0.95); +} +@media only screen and (max-width: 1200px) { + p.lead { + font-size: 2.2rem; + } +} +@media only screen and (max-width: 1000px) { + p.lead { + font-size: 2.1rem; + } +} +@media only screen and (max-width: 800px) { + p.lead { + font-size: 1.9rem; + } +} + +em, i, strong, b { + font-size: inherit; + line-height: inherit; + font-style: normal; + font-weight: normal; +} + +em, i { + font-family: "metropolis-italic", sans-serif; +} + +strong, b { + font-family: "metropolis-semibold", sans-serif; + font-weight: normal; +} + +small { + font-size: 1.2rem; + line-height: inherit; +} + +blockquote { + margin: 3.9rem 0; + padding-left: 4.5rem; + position: relative; +} + +blockquote:before { + content: "\201C"; + font-size: 10rem; + line-height: 0px; + margin: 0; + color: rgba(0, 0, 0, 0.25); + font-family: arial, sans-serif; + position: absolute; + top: 3.6rem; + left: 0; +} + +blockquote p { + font-family: "metropolis-regular", sans-serif; + padding: 0; + font-size: 2.1rem; + line-height: 1.857; + color: #111111; +} + +blockquote cite { + display: block; + font-family: "domine-regular", sans-serif; + font-size: 1.4rem; + font-style: normal; + line-height: 1.5; +} + +blockquote cite:before { + content: "\2014 \0020"; +} + +blockquote cite a, +blockquote cite a:visited { + color: #626262; + border: none; +} + +abbr { + font-family: "metropolis-bold", sans-serif; + font-variant: small-caps; + text-transform: lowercase; + letter-spacing: 0.05rem; + color: #626262; +} + +var, kbd, samp, code, pre { + font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; +} + +pre { + padding: 2.4rem 3rem 3rem; + background: #f1f1f1; + overflow-x: auto; +} + +code { + font-size: 1.4rem; + margin: 0 0.2rem; + padding: 0.3rem 0.6rem; + white-space: nowrap; + background: #f1f1f1; + border: 1px solid #e1e1e1; + border-radius: 3px; +} + +pre > code { + display: block; + white-space: pre; + line-height: 2; + padding: 0; + margin: 0; +} + +pre.prettyprint > code { + border: none; +} + +del { + text-decoration: line-through; +} + +abbr[title], +dfn[title] { + border-bottom: 1px dotted; + cursor: help; + text-decoration: none; +} + +mark { + background: #ffd900; + color: #000000; +} + +hr { + border: solid rgba(0, 0, 0, 0.1); + border-width: 1px 0 0; + clear: both; + margin: 2.4rem 0 1.5rem; + height: 0; +} + + +/* ------------------------------------------------------------------- + * ## Lists + * ------------------------------------------------------------------- */ +ol { + list-style: decimal; +} + +ul { + list-style: disc; +} + +li { + display: list-item; +} + +ol, +ul { + margin-left: 1.7rem; +} + +ul li { + padding-left: 0.4rem; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin: 0.6rem 0 0.6rem 1.7rem; +} + +ul.disc li { + display: list-item; + list-style: none; + padding: 0 0 0 0.8rem; + position: relative; +} +ul.disc li::before { + content: ""; + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background: #cc147f; + position: absolute; + left: -17px; + top: 11px; + vertical-align: middle; +} + +dt { + margin: 0; + color: #cc147f; +} + +dd { + margin: 0 0 0 2rem; +} + + +/* ------------------------------------------------------------------- + * ## responsive video container + * ------------------------------------------------------------------- */ +.video-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; +} +.video-container iframe, +.video-container object, +.video-container embed, +.video-container video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + + +/* ------------------------------------------------------------------- + * ## floated image + * ------------------------------------------------------------------- */ +img.pull-right { + margin: 1.5rem 0 0 3rem; +} + +img.pull-left { + margin: 1.5rem 3rem 0 0; +} + + +/* ------------------------------------------------------------------- + * ## tables + * ------------------------------------------------------------------- */ +table { + border-width: 0; + width: 100%; + max-width: 100%; + font-family: "metropolis-regular", sans-serif; +} + +th, +td { + padding: 1.5rem 3rem; + text-align: left; + border-bottom: 1px solid #e8e8e8; +} + +th { + color: #000000; + font-family: "metropolis-semibold", sans-serif; + font-weight: normal; +} + +td { + line-height: 1.5; +} + +th:first-child, +td:first-child { + padding-left: 0; +} + +th:last-child, +td:last-child { + padding-right: 0; +} + +.table-responsive { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + + +/* ------------------------------------------------------------------- + * ## Spacing + * ------------------------------------------------------------------- */ +button, +.btn { + margin-bottom: 1.2rem; +} + +fieldset { + margin-bottom: 1.5rem; +} + +input, +textarea, +select, +pre, +blockquote, +figure, +table, +p, +ul, +ol, +dl, +form, +.video-container, +.cl-custom-select { + margin-bottom: 3rem; +} + +/* ------------------------------------------------------------------- + * ## pace.js styles - minimal + * ------------------------------------------------------------------- */ +.pace { + -webkit-pointer-events: none; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.pace-inactive { + display: none; +} + +.pace .pace-progress { + background: #cc147f; + position: fixed; + z-index: 900; + top: 0; + right: 100%; + width: 100%; + height: 4px; +} + +.oldie .pace { + display: none; +} + + + +/* =================================================================== + * # preloader + * + * ------------------------------------------------------------------- */ +#preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #050505; + z-index: 800; + height: 100%; + width: 100%; +} + +.no-js #preloader, +.oldie #preloader { + display: none; +} + +#loader { + position: absolute; + left: 50%; + top: 50%; + width: 60px; + height: 60px; + margin: -30px 0 0 -30px; + padding: 0; +} + +#loader:before { + content: ""; + border-top: 6px solid rgba(255, 255, 255, 0.1); + border-right: 6px solid rgba(255, 255, 255, 0.1); + border-bottom: 6px solid rgba(255, 255, 255, 0.1); + border-left: 6px solid #cc147f; + -webkit-animation: load 1.1s infinite linear; + animation: load 1.1s infinite linear; + display: block; + border-radius: 50%; + width: 60px; + height: 60px; +} + +@-webkit-keyframes load { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes load { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + + +/* =================================================================== + * # forms + * + * ------------------------------------------------------------------- */ +fieldset { + border: none; +} + +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + display: block; + height: 6rem; + padding: 1.5rem 2.4rem; + border: 0; + outline: none; + color: #151515; + font-family: "metropolis-regular", sans-serif; + font-size: 1.5rem; + line-height: 3rem; + max-width: 100%; + background: rgba(0, 0, 0, 0.12); + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.cl-custom-select { + position: relative; + padding: 0; +} +.cl-custom-select select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; + text-indent: 0.01px; + text-overflow: ""; + margin: 0; + line-height: 3rem; + vertical-align: middle; +} +.cl-custom-select select option { + padding-left: 2rem; + padding-right: 2rem; +} +.cl-custom-select select::-ms-expand { + display: none; +} +.cl-custom-select::after { + border-bottom: 2px solid rgba(0, 0, 0, 0.5); + border-right: 2px solid rgba(0, 0, 0, 0.5); + content: ""; + display: block; + height: 8px; + width: 8px; + margin-top: -7px; + pointer-events: none; + position: absolute; + right: 2.4rem; + top: 50%; + -webkit-transform-origin: 66% 66%; + -ms-transform-origin: 66% 66%; + transform-origin: 66% 66%; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} + +/* IE9 and below */ +.oldie .cl-custom-select::after { + display: none; +} + +textarea { + min-height: 25rem; +} + +input[type="email"]:focus, +input[type="number"]:focus, +input[type="search"]:focus, +input[type="text"]:focus, +input[type="tel"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus, +select:focus { + color: #000000; +} + +label, +legend { + font-family: "metropolis-semibold", sans-serif; + font-size: 1.4rem; + font-weight: normal; + margin-bottom: 0.9rem; + line-height: 1.714; + color: #000000; + display: block; +} + +input[type="checkbox"], +input[type="radio"] { + display: inline; +} + +label > .label-text { + display: inline-block; + margin-left: 1rem; + font-family: "metropolis-regular", sans-serif; + font-weight: normal; + line-height: inherit; +} + +label > input[type="checkbox"], +label > input[type="radio"] { + margin: 0; + position: relative; + top: 0.15rem; +} + + +/* ------------------------------------------------------------------- + * ## Style Placeholder Text + * ------------------------------------------------------------------- */ +::-webkit-input-placeholder { + color: #626262; +} + +:-moz-placeholder { + color: #626262; + /* Firefox 18- */ +} + +::-moz-placeholder { + color: #626262; + /* Firefox 19+ */ +} + +:-ms-input-placeholder { + color: #626262; +} + +.placeholder { + color: #626262 !important; +} + + +/* ------------------------------------------------------------------- + * ## Change Autocomplete styles in Chrome + * ------------------------------------------------------------------- */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus input:-webkit-autofill, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + -webkit-text-fill-color: #cc147f; + transition: background-color 5000s ease-in-out 0s; +} + + + +/* =================================================================== + * # buttons + * + * ------------------------------------------------------------------- */ +.btn, +button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + font-family: "metropolis-semibold", sans-serif; + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 0.3rem; + height: 5.4rem; + line-height: 5rem; + padding: 0 3rem; + margin: 0 0.3rem 1.2rem 0; + color: #000000; + text-decoration: none; + text-align: center; + white-space: nowrap; + cursor: pointer; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: #c5c5c5; + border: 0.2rem solid #c5c5c5; +} + +.btn:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.btn:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + background-color: #000000; + border-color: #000000; + color: #ffffff; + outline: 0; +} + +/* button primary + * ------------------------------------------------- */ +.btn.btn--primary, +button.btn--primary, +input[type="submit"].btn--primary, +input[type="reset"].btn--primary, +input[type="button"].btn--primary { + background: #cc147f; + border-color: #cc147f; + color: #ffffff; +} + +.btn.btn--primary:hover, +button.btn--primary:hover, +input[type="submit"].btn--primary:hover, +input[type="reset"].btn--primary:hover, +input[type="button"].btn--primary:hover, +.btn.btn--primary:focus, +button.btn--primary:focus, +input[type="submit"].btn--primary:focus, +input[type="reset"].btn--primary:focus, +input[type="button"].btn--primary:focus { + background: #000000; + color: #b8b8b8; + border-color: #000000; +} + +/* button modifiers + * ------------------------------------------------- */ +.btn.full-width, +button.full-width { + width: 100%; + margin-right: 0; +} + +.btn--medium, +button.btn--medium { + height: 5.7rem !important; + line-height: 5.3rem !important; +} + +.btn--large, +button.btn--large { + height: 6rem !important; + line-height: 5.6rem !important; +} + +.btn--stroke, +button.btn--stroke { + background: transparent !important; + border: 0.2rem solid #cc147f; + color: #cc147f; +} + +.btn--stroke:hover, +button.btn--stroke:hover { + background: #cc147f !important; + border: 0.2rem solid #cc147f; + color: #ffffff; +} + +.btn--pill, +button.btn--pill { + padding-left: 3rem !important; + padding-right: 3rem !important; + border-radius: 1000px !important; +} + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + + + +/* =================================================================== + * # additional components + * + * ------------------------------------------------------------------- */ + +/* ------------------------------------------------------------------- + * ## alert box + * ------------------------------------------------------------------- */ +.alert-box { + padding: 2.1rem 4rem 2.1rem 3rem; + position: relative; + margin-bottom: 3rem; + border-radius: 3px; + font-family: "metropolis-semibold", sans-serif; + font-size: 1.5rem; + line-height: 1.6; +} +.alert-box__close { + position: absolute; + right: 1.8rem; + top: 1.8rem; + cursor: pointer; +} +.alert-box__close.fa { + font-size: 12px; +} +.alert-box--error { + background-color: #ffd1d2; + color: #e65153; +} +.alert-box--success { + background-color: #c8e675; + color: #758c36; +} +.alert-box--info { + background-color: #d7ecfb; + color: #4a95cc; +} +.alert-box--notice { + background-color: #fff099; + color: #bba31b; +} + +/* ------------------------------------------------------------------- + * ## additional typo styles + * ------------------------------------------------------------------- */ + +/* drop cap + * ----------------------------------------------- */ +.drop-cap:first-letter { + float: left; + margin: 0; + padding: 1.5rem 0.6rem 0 0; + font-size: 8.4rem; + font-family: "metropolis-bold", sans-serif; + font-weight: normal; + line-height: 6rem; + text-indent: 0; + background: transparent; + color: #000000; +} + +/* line definition style + * ----------------------------------------------- */ +.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 + dd:before { + content: ", "; +} +.lining dd:before { + content: ": "; + margin-left: -0.2em; +} + +/* dictionary definition style + * ----------------------------------------------- */ +.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) ". "; +} + +/** + * Pull Quotes + * ----------- + * markup: + * + * + * + * --------------------------------------------------------------------- */ +.pull-quote { + position: relative; + padding: 2.1rem 3rem 2.1rem 0px; +} +.pull-quote:before, +.pull-quote:after { + height: 1em; + position: absolute; + font-size: 10rem; + font-family: Arial, Sans-Serif; + color: rgba(0, 0, 0, 0.25); +} +.pull-quote:before { + content: "\201C"; + top: -3.6rem; + left: 0; +} +.pull-quote:after { + content: "\201D"; + bottom: 3.6rem; + right: 0; +} +.pull-quote blockquote { + margin: 0; +} +.pull-quote blockquote:before { + content: none; +} + +/** + * Stats Tab + * --------- + * markup: + * + * + * + * Extend this object into your markup. + * + * --------------------------------------------------------------------- */ +.stats-tabs { + padding: 0; + margin: 3rem 0; +} +.stats-tabs li { + display: inline-block; + margin: 0 1.5rem 3rem 0; + padding: 0 1.5rem 0 0; + border-right: 1px solid rgba(0, 0, 0, 0.2); +} +.stats-tabs li:last-child { + margin: 0; + padding: 0; + border: none; +} +.stats-tabs li a { + display: inline-block; + font-size: 2.5rem; + font-family: "metropolis-bold", sans-serif; + font-weight: normal; + border: none; + color: #000000; +} +.stats-tabs li a:hover { + color: #cc147f; +} +.stats-tabs li a em { + display: block; + margin: 0.6rem 0 0 0; + font-size: 1.4rem; + font-family: "metropolis-regular", sans-serif; + color: #626262; +} + + +/* ------------------------------------------------------------------- + * ## skillbars + * ------------------------------------------------------------------- */ +.skill-bars { + list-style: none; + margin: 6rem 0 3rem; +} +.skill-bars li { + height: 0.6rem; + background: #c9c9c9; + width: 100%; + margin-bottom: 6.9rem; + padding: 0; + position: relative; +} +.skill-bars li strong { + position: absolute; + left: 0; + top: -3rem; + font-family: "metropolis-semibold", sans-serif; + color: #000000; + text-transform: uppercase; + letter-spacing: 0.2rem; + font-size: 1.4rem; + line-height: 2.4rem; +} +.skill-bars li .progress { + background: #000000; + position: relative; + height: 100%; +} +.skill-bars li .progress span { + position: absolute; + right: 0; + top: -3.6rem; + display: block; + font-family: "metropolis-regular", sans-serif; + color: #ffffff; + font-size: 1.1rem; + line-height: 1; + background: #000000; + padding: 0.6rem 0.6rem; + border-radius: 3px; +} +.skill-bars li .progress span::after { + position: absolute; + left: 50%; + bottom: -5px; + margin-left: -5px; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + border-top: 5px solid #000000; + content: ""; +} +.skill-bars li .percent5 { + width: 5%; +} +.skill-bars li .percent10 { + width: 10%; +} +.skill-bars li .percent15 { + width: 15%; +} +.skill-bars li .percent20 { + width: 20%; +} +.skill-bars li .percent25 { + width: 25%; +} +.skill-bars li .percent30 { + width: 30%; +} +.skill-bars li .percent35 { + width: 35%; +} +.skill-bars li .percent40 { + width: 40%; +} +.skill-bars li .percent45 { + width: 45%; +} +.skill-bars li .percent50 { + width: 50%; +} +.skill-bars li .percent55 { + width: 55%; +} +.skill-bars li .percent60 { + width: 60%; +} +.skill-bars li .percent65 { + width: 65%; +} +.skill-bars li .percent70 { + width: 70%; +} +.skill-bars li .percent75 { + width: 75%; +} +.skill-bars li .percent80 { + width: 80%; +} +.skill-bars li .percent85 { + width: 85%; +} +.skill-bars li .percent90 { + width: 90%; +} +.skill-bars li .percent95 { + width: 95%; +} +.skill-bars li .percent100 { + width: 100%; +} + + + +/* =================================================================== + * # reusable and common theme styles + * + * ------------------------------------------------------------------- */ +.wide { + max-width: 1400px; +} + +.narrow { + max-width: 800px; +} + +.light-gray { + background-color: #f1f1f1; +} + +.light-blue +{ + background-color: #A3A3A3; +} + + +/* ------------------------------------------------------------------- + * ## display headings + * ------------------------------------------------------------------- */ +.display-1 { + font-family: "domine-bold", sans-serif; + font-size: 6rem; + line-height: 1.3; + letter-spacing: 0; + color: #000000; + letter-spacing: -0.03rem; + margin-top: 0; + margin-bottom: 4.8rem; +} +.display-1--light { + color: #ffffff; +} + +.subhead { + font-family: "metropolis-semibold", sans-serif; + font-size: 1.6rem; + line-height: 1.3125; + text-transform: uppercase; + letter-spacing: 0.25rem; + color: #cc147f; + margin-top: 0; + margin-bottom: 2.1rem; +} +.subhead::before { + content: "/ "; +} + +/* ------------------------------------------------------------------- + * responsive: + * display headings + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1400px) { + .display-1 { + font-size: 5.6rem; + } +} +@media only screen and (max-width: 1200px) { + .display-1 { + font-size: 5.2rem; + } +} +@media only screen and (max-width: 950px) { + .display-1 { + font-size: 4.6rem; + } +} +@media only screen and (max-width: 800px) { + .display-1 { + font-size: 4.2rem; + margin-bottom: 4.2rem; + } + + .subhead { + font-size: 1.5rem; + } +} +@media only screen and (max-width: 700px) { + .display-1 { + font-size: 4rem; + } +} +@media only screen and (max-width: 600px) { + .display-1 { + font-size: 3.6rem; + } +} +@media only screen and (max-width: 500px) { + .display-1 { + font-size: 3.3rem; + } + + .subhead { + font-size: 1.4rem; + } +} +@media only screen and (max-width: 400px) { + .display-1 { + font-size: 3rem; + } +} + + + +/* =================================================================== + * # header styles + * + * ------------------------------------------------------------------- */ +.s-header { + z-index: 500; + width: 100%; + height: 96px; + background-color: transparent; + position: absolute; + top: 24px; +} + + +/* ------------------------------------------------------------------- + * ## header logo + * ------------------------------------------------------------------- */ +.header-logo { + z-index: 501; + display: inline-block; + margin: 0; + padding: 0; + position: absolute; + left: 110px; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} +.header-logo a { + display: block; + padding: 0; + outline: 0; + border: none; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.header-logo img { + width: 200px; + height: 38px; +} + + +/* ------------------------------------------------------------------- + * ## main navigation + * ------------------------------------------------------------------- */ +.header-nav { + z-index: 900; + font-family: "metropolis-regular", sans-serif; + font-size: 1.3rem; + line-height: 1.846; + padding: 3.6rem 3rem 3.6rem 3.6rem; + height: 100%; + width: 280px; + background: #0c0c0c; + color: rgba(255, 255, 255, 0.25); + overflow-y: auto; + overflow-x: hidden; + position: fixed; + right: 0; + top: 0; + -webkit-transition: all 0.5s ease; + transition: all 0.5s ease; + -webkit-transform: translateZ(0); + -webkit-backface-visibility: hidden; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + visibility: hidden; +} +.header-nav a, +.header-nav a:visited { + color: rgba(255, 255, 255, 0.5); +} +.header-nav a:hover, +.header-nav a:focus, +.header-nav a:active { + color: white; +} +.header-nav h3 { + font-family: "metropolis-semibold", sans-serif; + font-size: 11px; + line-height: 1.363; + text-transform: uppercase; + letter-spacing: 0.25rem; + margin-bottom: 4.8rem; + margin-top: 0.9rem; + color: #cc147f; +} +.header-nav p { + margin-bottom: 2.7rem; +} + +.header-nav__content { + background: #0c0c0c; + position: relative; + left: 50px; + opacity: 0; + visibility: hidden; +} + +.header-nav__list { + font-family: "metropolis-regular", sans-serif; + font-size: 1.6rem; + margin: 3.6rem 0 3rem 0; + padding: 0 0 1.8rem 0; + list-style: none; + counter-reset: ctr; +} +.header-nav__list li { + border-top: 1px solid rgba(255, 255, 255, 0.04); + line-height: 4.8rem; + position: relative; +} +.header-nav__list li:last-child { + border-bottom: 1px solid rgba(255, 255, 255, 0.04); +} +.header-nav__list a { + display: block; + color: #ffffff; + position: relative; + padding-left: 3.5rem; +} +.header-nav__list a::before { + content: counter(ctr, decimal-leading-zero) "."; + counter-increment: ctr; + font-family: "metropolis-regular", sans-serif; + font-size: 11px; + color: rgba(255, 255, 255, 0.25); + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + position: absolute; + left: 3px; + top: 0; +} +.header-nav__list a:hover::before { + color: #cc147f; +} + +.header-nav__social { + list-style: none; + display: inline-block; + font-size: 1.8rem; + margin: 0; +} +.header-nav__social li { + display: inline-block; + margin-right: 12px; + padding-left: 0; +} +.header-nav__social li a { + color: rgba(255, 255, 255, 0.15); +} +.header-nav__social li a:hover, +.header-nav__social li a:focus { + color: white; +} +.header-nav__social li:last-child { + margin: 0; +} + +.header-nav__close { + z-index: 800; + display: block; + background-color: rgba(0, 0, 0, 0.3); + height: 30px; + width: 30px; + border-radius: 3px; + position: absolute; + top: 36px; + right: 30px; + font: 0/0 a; + text-shadow: none; + color: transparent; +} +.header-nav__close span::before, +.header-nav__close span::after { + content: ""; + display: block; + height: 2px; + width: 12px; + background-color: #ffffff; + position: absolute; + top: 50%; + left: 9px; + margin-top: -1px; +} +.header-nav__close span::before { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.header-nav__close span::after { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +/* menu is open + * ----------------------------------------------- */ +.menu-is-open .header-nav { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + visibility: visible; + -webkit-overflow-scrolling: touch; +} +.menu-is-open .header-nav .header-nav__content { + opacity: 1; + visibility: visible; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-delay: 0.3s; + transition-delay: 0.3s; + left: 0; +} + + +/* ------------------------------------------------------------------- + * ## mobile menu toggle + * ------------------------------------------------------------------- */ +.header-menu-toggle { + position: fixed; + right: 110px; + top: 42px; + width: 48px; + height: 45px; + line-height: 45px; + font-family: "metropolis-regular", sans-serif; + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.4rem; + color: #ffffff; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} +.header-menu-toggle::before { + display: inline-block; + content: "Menu"; + height: 45px; + left: auto; + text-align: right; + padding-left: 15px; + padding-right: 10px; + position: absolute; + top: 0; + right: 100%; +} +.header-menu-toggle.opaque { + background-color: #000000; +} +.header-menu-toggle.opaque::before { + display: none; +} +.header-menu-toggle:hover, +.header-menu-toggle:focus, +.header-menu-toggle:active { + color: #cc147f; +} + +.header-menu-icon { + display: block; + width: 26px; + height: 2px; + margin-top: -1px; + right: auto; + bottom: auto; + background-color: white; + position: absolute; + left: 11px; + top: 50%; +} +.header-menu-icon::before, +.header-menu-icon::after { + content: ""; + width: 100%; + height: 100%; + background-color: inherit; + position: absolute; + left: 0; +} +.header-menu-icon::before { + top: -9px; +} +.header-menu-icon::after { + bottom: -9px; +} + +/* ------------------------------------------------------------------- + * responsive: + * header + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1600px) { + .header-logo { + left: 60px; + } + + .header-menu-toggle { + right: 60px; + } +} +@media only screen and (max-width: 800px) { + .header-logo { + left: 40px; + } + + .header-menu-toggle { + right: 40px; + } +} +@media only screen and (max-width: 600px) { + .s-header { + height: 90px; + top: 12px; + } + + .header-logo { + left: 30px; + } + .header-logo img { + width: 180px; + height: 34px; + } + + .header-menu-toggle { + right: 25px; + top: 30px; + } +} +@media only screen and (max-width: 500px) { + .header-menu-toggle::before { + display: none; + } +} +@media only screen and (max-width: 400px) { + .s-header { + top: 6px; + } + + .header-logo { + left: 25px; + } + .header-logo img img { + width: 141px; + height: 27px; + } + + .header-menu-toggle { + top: 24px; + right: 20px; + } +} + + +/* =================================================================== + * # home + * + * ------------------------------------------------------------------- */ +.s-home { + width: 100%; + height: 100%; + min-height: 786px; + background-color: transparent; + position: relative; + display: table; +} +.s-home .shadow-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.4; + background: linear-gradient(to right, black 0%, black 20%, transparent 100%); +} +.s-home::before { + display: block; + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.no-js .s-home { + background: #000000; +} + + +/* ------------------------------------------------------------------- + * ## home content + * ------------------------------------------------------------------- */ +.home-content { + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + padding-bottom: 15.6rem; + overflow: hidden; + position: relative; +} +.home-content h1 { + font-family: "domine-bold", sans-serif; + font-size: 9rem; + line-height: 1.1; + margin-top: 0; + color: #ffffff; +} +.home-content h1 + p { + font-family: "metropolis-light", sans-serif; + font-size: 3.8rem; + line-height: 1.421; + color: rgba(255, 255, 255, 0.8); + margin-top: 2.4rem; + padding-left: 10rem; + position: relative; +} +.home-content h1 + p::before { + content: ""; + display: block; + width: 6.5rem; + height: 1px; + background-color: #cc147f; + position: absolute; + left: 6px; + top: 2.7rem; +} + +.home-content__main { + padding-top: 15rem; + padding-right: 20rem; + position: relative; +} + + +/* ------------------------------------------------------------------- + * ## home sidelinks + * ------------------------------------------------------------------- */ +.home-sidelinks { + list-style: none; + font-family: "metropolis-regular", sans-serif; + font-size: 1.4rem; + line-height: 1.714; + text-transform: uppercase; + letter-spacing: 0.3rem; + margin: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + position: absolute; + top: 50%; + right: 0; +} +.home-sidelinks li { + display: block; + padding: 0; + text-align: left; + background-color: rgba(0, 0, 0, 0.2); + border-top: 1px solid rgba(255, 255, 255, 0.05); + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + position: relative; +} +.home-sidelinks li:last-child { + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} +.home-sidelinks li::before { + content: ""; + display: block; + height: 6px; + width: 6px; + background-color: #cc147f; + border-radius: 50%; + position: absolute; + top: 3rem; + left: 2rem; +} +.home-sidelinks a { + display: block; + padding: 2.1rem 15rem 2.1rem 4rem; + color: #ffffff; +} +.home-sidelinks span { + display: block; + font-family: "metropolis-regular", sans-serif; + font-size: 1.5rem; + line-height: 1.6rem; + color: rgba(255, 255, 255, 0.5); + text-transform: none; + letter-spacing: 0; +} +.home-sidelinks li:hover { + background-color: rgba(0, 0, 0, 0.5); + border-top: 1px solid rgba(0, 0, 0, 0.1); +} + + +/* ------------------------------------------------------------------- + * ## home scroll + * ------------------------------------------------------------------- */ +.home-scroll { + height: 4.8rem; + position: absolute; + right: 110px; + bottom: 6.6rem; +} +.home-scroll__text { + display: inline-block; + font-family: "metropolis-semibold", sans-serif; + font-size: 11px; + line-height: 4.8rem; + text-transform: uppercase; + letter-spacing: 0.3rem; + color: #ffffff; + border-bottom: 1px solid transparent; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + position: relative; + right: 7.5rem; +} +.home-scroll__icon { + display: block; + height: 4.8rem; + width: 4.8rem; + background-color: #ffffff; + background-image: url(../images/icons/icon-arrow-down.svg); + background-position: center center; + background-repeat: no-repeat; + background-size: 10px 15px; + border-radius: 50%; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + position: absolute; + top: 0; + right: 0; +} +.home-scroll:hover .home-scroll__text { + border-bottom: 1px solid #ffffff; +} + +.no-svg .home-scroll__icon { + background-image: url(../images/icons/png/icon-arrow-down.png); +} + + +/* ------------------------------------------------------------------- + * ## home scroll + * ------------------------------------------------------------------- */ +.home-social { + list-style: none; + font-size: 14px; + line-height: 4.8rem; + margin: 0; + color: #ffffff; + position: absolute; + bottom: 6.6rem; + left: 110px; +} +.home-social a { + color: #ffffff; + border-bottom: 1px solid transparent; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} +.home-social a:hover { + border-bottom: 1px solid #ffffff; +} +.home-social i { + display: none; +} +.home-social .home-social-title { + font-family: "metropolis-semibold", sans-serif; + padding-right: 4rem; + margin-right: 0.8rem; + position: relative; +} +.home-social .home-social-title::after { + display: block; + content: ""; + width: 2.4rem; + height: 1px; + background-color: rgba(255, 255, 255, 0.1); + position: absolute; + right: 0; + top: 50%; +} +.home-social li { + display: inline-block; + position: relative; + margin-right: 0.6rem; +} +.home-social li a { + display: block; +} +.home-social li:last-child { + margin-right: 0; +} + +/* animate .home-content__main + * ------------------------------------------------------------------- */ +html.cl-preload .home-content__main { + opacity: 0; +} + +html.cl-loaded .home-content__main { + animation-duration: 2s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +html.no-csstransitions .home-content__main { + opacity: 1; +} + + +/* ------------------------------------------------------------------- + * ## home animations + * ------------------------------------------------------------------- */ +/* fade in */ +@-webkit-keyframes fadeIn { + from { + opacity: 0; + -webkit-transform: translate3d(0, 150%, 0); + -ms-transform: translate3d(0, 150%, 0); + transform: translate3d(0, 150%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +@keyframes fadeIn { + from { + opacity: 0; + -webkit-transform: translate3d(0, 150%, 0); + -ms-transform: translate3d(0, 150%, 0); + transform: translate3d(0, 150%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} +/* fade out */ +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -150%, 0); + -ms-transform: translate3d(0, -150%, 0); + transform: translate3d(0, -150%, 0); + } +} +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -150%, 0); + -ms-transform: translate3d(0, -150%, 0); + transform: translate3d(0, -150%, 0); + } +} + +/* ------------------------------------------------------------------- + * responsive: + * home + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1600px) { + .home-content h1 { + font-size: 8.8rem; + } + .home-content h1 + p { + font-size: 3.6rem; + } + + .home-content__main { + padding-top: 18rem; + } + + .home-sidelinks { + font-size: 1.3rem; + } + + .home-scroll { + right: 60px; + } + + .home-social { + left: 60px; + } +} +@media only screen and (max-width: 1500px) { + .home-content h1 { + font-size: 8.6rem; + } + + .home-content__main { + max-width: 1100px; + } +} +@media only screen and (max-width: 1400px) { + .home-content h1 { + font-size: 7.8rem; + } + .home-content h1 + p { + font-size: 3rem; + } + .home-content h1 + p::before { + top: 2.4rem; + } + + .home-content__main { + max-width: 1000px; + } + + .home-sidelinks a { + padding: 2.1rem 12rem 2.1rem 4rem; + } +} +@media only screen and (max-width: 1200px) { + .home-content h1 { + font-size: 7.2rem; + } + .home-content h1 + p { + font-size: 2.4rem; + padding-right: 2rem; + padding-left: 8rem; + } + .home-content h1 + p::before { + width: 5.5rem; + top: 1.8rem; + } + .home-content br { + display: none; + } + + .home-content__main { + max-width: 850px; + } + + .home-sidelinks a { + padding: 1.8rem 6rem 1.8rem 4rem; + } +} +@media only screen and (max-width: 1000px) { + .home-content__main { + max-width: 650px; + padding-right: 0; + } + + .home-sidelinks { + display: none; + } +} +@media only screen and (max-width: 900px) { + .home-content h1 { + font-size: 7rem; + } +} +@media only screen and (max-width: 800px) { + .home-content h1 { + font-size: 6.5rem; + } + + .home-content__main { + max-width: 580px; + } + + .home-scroll { + right: 40px; + } + .home-scroll__text { + display: none; + } + + .home-social { + left: 40px; + } +} +@media only screen and (max-width: 700px) { + .home-content h1 { + font-size: 5.5rem; + } + .home-content h1 + p { + font-size: 2.2rem; + padding-right: 0; + } + .home-content h1 + p::before { + top: 1.6rem; + } + + .home-content__main { + max-width: 480px; + } +} +@media only screen and (max-width: 600px) { + .home-content h1 { + font-size: 5.4rem; + } + .home-content h1 + p { + padding-top: 3rem; + padding-left: 0; + } + .home-content h1 + p::before { + left: 0; + top: 0; + } + + .home-content__main { + width: auto; + padding-left: 35px; + padding-right: 35px; + } + + .home-social { + left: 30px; + bottom: 6rem; + bottom: 6rem; + } + .home-social i { + display: inline; + } + .home-social .home-social-text { + display: none; + } + + .home-scroll { + right: 30px; + bottom: 6rem; + } + .home-scroll__icon { + height: 4.2rem; + width: 4.2rem; + } +} +@media only screen and (max-width: 500px) { + .home-content h1 { + font-size: 5rem; + } + .home-content h1 + p { + padding-top: 2.8rem; + } + + .s-home { + min-height: 642px; + } +} +@media only screen and (max-width: 450px) { + .home-content h1 { + font-size: 4.6rem; + } + .home-content h1 + p { + padding-top: 2.4rem; + } +} +@media only screen and (max-width: 400px) { + .s-home { + min-height: 630px; + } + + .home-content h1 { + font-size: 4.2rem; + } + .home-content h1 + p { + padding-top: 2.1rem; + } + + .home-content__main { + padding-left: 25px; + padding-right: 25px; + } + + .home-social { + font-size: 13px; + left: 25px; + } + .home-social .home-social-title { + padding-right: 0.6rem; + } + .home-social .home-social-title::after { + display: none; + } + + .home-scroll { + right: 25px; + } +} + + + +/* =================================================================== + * # about + * + * ------------------------------------------------------------------- */ +.s-about { + padding-top: 18rem; + padding-bottom: 18rem; + background-color: #ffffff; + position: relative; +} + + +/* ------------------------------------------------------------------- + * ## about process + * ------------------------------------------------------------------- */ +.process { + margin-top: 4.2rem; + position: relative; +} +.process__vline-left, +.process__vline-right { + display: block; + width: 1px; + height: 100%; + background-color: rgba(0, 0, 0, 0.15); + position: absolute; +} +.process__vline-left { + top: 0; + left: calc(20px + 24px); +} +.process__vline-right { + top: 0; + left: calc(50% + 20px + 24px); +} +.process h4 { + font-size: 2.8rem; + line-height: 1.5; + margin-top: 0; + position: relative; +} +.process__col { + position: relative; + min-height: 24.6rem; +} +.process__col::before { + content: attr(data-item); + display: block; + font-family: "metropolis-semibold", sans-serif; + font-size: 2.1rem; + text-align: center; + color: #ffffff; + background-color: #26bfb5; + height: 48px; + width: 48px; + line-height: 48px; + border-radius: 50%; + box-shadow: 0 0 0 18px #ffffff; + position: absolute; + left: 20px; + top: 0; +} +.process__text { + margin-left: 7.5rem; + padding-right: 30px; +} + + +/* ------------------------------------------------------------------- + * responsive: + * about + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .s-about { + padding-top: 15rem; + padding-bottom: 15rem; + } + + .process__vline-left { + left: calc(15px + 22px); + } + .process__vline-right { + left: calc(50% + 15px + 22px); + } + .process h4 { + font-size: 2.6rem; + } + .process__col::before { + height: 45px; + width: 45px; + line-height: 45px; + font-size: 1.8rem; + left: 15px; + } + .process__text { + margin-left: 6.8rem; + padding-right: 0; + } +} +@media only screen and (max-width: 800px) { + .s-about { + padding-top: 12rem; + padding-bottom: 12rem; + } + + .process { + margin-top: 3rem; + } + .process__vline-right { + display: none; + } + .process__col { + min-height: 0; + } + .process__col::before { + top: -3px; + } +} +@media only screen and (max-width: 600px) { + .process__vline-left { + left: calc(10px + 22px); + } + .process__col::before { + top: -3px; + left: 10px; + } + .process h4 { + font-size: 2.4rem; + } +} +@media only screen and (max-width: 400px) { + .s-about { + padding-top: 9.6rem; + } + + .process h4 { + font-size: 2.2rem; + padding-left: 5.4rem; + margin-bottom: 1.8rem; + } + .process__vline-left { + display: none; + } + .process__col { + margin-bottom: 4.2rem; + } + .process__col::before { + height: 36px; + width: 36px; + line-height: 36px; + font-size: 1.6rem; + top: -3px; + left: 0; + } + .process__text { + margin-left: 0; + } +} + + + +/* =================================================================== + * # services + * + * ------------------------------------------------------------------- */ +.s-services { + padding-top: 18rem; + padding-bottom: 18rem; + color: #555555; + position: relative; +} + + +/* ------------------------------------------------------------------- + * ## services list + * ------------------------------------------------------------------- */ +.services-list { + margin-top: 6rem; +} +.services-list .service-item { + margin-bottom: 1.5rem; +} +.services-list .service-item h3 { + margin-top: 0; + margin-bottom: 1.8rem; +} +.services-list .service-icon { + color: #26bfb5; + font-size: 4.8rem; +} + + +/* ------------------------------------------------------------------- + * responsive: + * services + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .s-services { + padding-top: 15rem; + padding-bottom: 15rem; + } + + .services-list [class*="col-"]:nth-child(2n + 1) { + padding-right: 30px; + } + .services-list [class*="col-"]:nth-child(2n + 2) { + padding-left: 30px; + } +} +@media only screen and (max-width: 800px) { + .s-services { + padding-top: 12rem; + padding-bottom: 12rem; + } + + .services-list { + margin-top: 3rem; + } + .services-list .service-icon { + font-size: 4.5rem; + } + .services-list [class*="col-"]:nth-child(n) { + padding: 0 15px; + } +} +@media only screen and (max-width: 600px) { + .services-list [class*="col-"]:nth-child(n) { + padding: 0 10px; + } +} +@media only screen and (max-width: 400px) { + .s-services { + padding-top: 9.6rem; + } + + .services-list [class*="col-"]:nth-child(n) { + padding: 0; + } +} + + + +/* =================================================================== + * # works + * + * ------------------------------------------------------------------- */ +.s-works { + background: #ffffff; + padding: 18rem 0 24rem; + position: relative; +} + + +/* ------------------------------------------------------------------- + * ## bricks/masonry + * ------------------------------------------------------------------- */ +.masonry-wrap { + margin-top: 6rem; + max-width: none; + width: 1380px; +} + +.masonry:after { + content: ""; + display: table; + clear: both; +} +.masonry .grid-sizer, +.masonry__brick { + width: 460px; +} +.masonry__brick { + float: left; + padding: 0; +} + +.item-folio { + position: relative; + overflow: hidden; +} + +.item-folio__thumb img { + vertical-align: top; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} +.item-folio__thumb a { + display: block; +} +.item-folio__thumb a::before { + z-index: 1; + display: block; + background-color: rgba(255, 255, 255, 0.7); + content: ""; + opacity: 0; + visibility: hidden; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} +.item-folio__thumb a::after { + z-index: 1; + content: "..."; + font-family: georgia, serif; + font-size: 3rem; + color: #000000; + display: block; + height: 30px; + width: 30px; + line-height: 30px; + margin-left: -15px; + margin-top: -15px; + position: absolute; + left: 50%; + top: 50%; + text-align: center; + opacity: 0; + visibility: hidden; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); +} + +.item-folio__text { + z-index: 2; + position: absolute; + left: 0; + bottom: 3.6rem; + padding: 0 3rem; + -webkit-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + opacity: 0; + visibility: hidden; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.item-folio__title { + color: #000000; + font-size: 1.8rem; + margin: 0; +} + +.item-folio__cat { + color: black; + font-family: "metropolis-regular", sans-serif; + font-size: 1.5rem; + margin-bottom: 0; +} + +.item-folio__caption { + display: none; +} + +.item-folio__project-link { + z-index: 500; + display: block; + font-family: "metropolis-semibold", sans-serif; + font-size: 1.3rem; + color: #ffffff; + background-color: #000000; + padding: 0.6rem 1.2rem; + position: absolute; + top: 3rem; + left: 3rem; + opacity: 0; + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.item-folio__project-link::before { + display: block; + content: ""; + height: 1px; + width: 3rem; + background-color: white; + position: absolute; + top: 50%; + left: -3rem; +} +.item-folio__project-link:hover, +.item-folio__project-link:focus, +.item-folio__project-link:active { + background-color: #cc147f; + color: #ffffff; +} + +/* on hover */ +.item-folio:hover .item-folio__thumb a::before { + opacity: 1; + visibility: visible; +} +.item-folio:hover .item-folio__thumb a::after { + opacity: 1; + visibility: visible; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +.item-folio:hover .item-folio__thumb img { + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); +} +.item-folio:hover .item-folio__project-link { + opacity: 1; + visibility: visible; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.item-folio:hover .item-folio__text { + opacity: 1; + visibility: visible; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + + +/* ------------------------------------------------------------------- + * responsive: + * works + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1500px) { + .masonry-wrap { + width: 1200px; + } + + .masonry .grid-sizer, + .masonry__brick { + width: 400px; + } +} +@media only screen and (max-width: 1350px) { + .masonry-wrap { + width: 1158px; + } + + .masonry .grid-sizer, + .masonry__brick { + width: 386px; + } +} +@media only screen and (max-width: 1300px) { + .masonry-wrap { + width: 990px; + } + + .masonry .grid-sizer, + .masonry__brick { + width: 330px; + } +} +@media only screen and (max-width: 1200px) { + .s-works { + padding: 15rem 0 22.2rem; + } +} +@media only screen and (max-width: 1100px) { + .masonry-wrap { + width: 90%; + max-width: 800px; + } + + .masonry .grid-sizer, + .masonry__brick { + width: 50%; + } +} +@media only screen and (max-width: 800px) { + .s-works { + padding: 12rem 0 21rem; + } + + .masonry-wrap { + margin-top: 3rem; + } +} +@media only screen and (max-width: 600px) { + .masonry .grid-sizer, + .masonry__brick { + width: 100%; + } +} +@media only screen and (max-width: 400px) { + .s-works { + padding: 9.6rem 0 21rem; + } + + .masonry-wrap { + width: auto; + } +} + + + +/* =================================================================== + * # testimonials + * + * ------------------------------------------------------------------- */ +.testimonials-header { + text-align: center; + margin-top: 7.2rem; +} + +.testimonials { + font-size: 1.8rem; + line-height: 2; + margin-top: 4.2rem; + border-top: 1px solid rgba(0, 0, 0, 0.15); + position: relative; +} + +.testimonials__slider { + position: relative; +} +.testimonials__slider .slick-slide { + outline: none; +} +.testimonials__slider .slick-dots { + display: block; + list-style: none; + width: 100%; + padding: 0; + margin: 3rem 0 0 0; + text-align: center; + position: absolute; + top: 100%; + left: 0; +} +.testimonials__slider .slick-dots li { + display: inline-block; + width: 27px; + height: 27px; + margin: 0; + padding: 9px; + cursor: pointer; +} +.testimonials__slider .slick-dots li button { + display: block; + width: 10px; + height: 10px; + line-height: 10px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.4); + border: none; + padding: 0; + margin: 0; + cursor: pointer; + font: 0/0 a; + text-shadow: none; + color: transparent; +} +.testimonials__slider .slick-dots li button:hover, +.testimonials__slider .slick-dots li button:focus { + outline: none; +} +.testimonials__slider .slick-dots li.slick-active button, +.testimonials__slider .slick-dots li:hover button { + background: #000000; +} + +.testimonials__slide { + position: relative; + padding-top: 4.5rem; + padding-left: 12rem; + padding-right: 3rem; +} +.testimonials__slide::before { + content: ""; + display: block; + width: 1px; + height: 3.9rem; + position: absolute; + left: calc(7.8rem / 2); + top: 0; + background-color: rgba(0, 0, 0, 0.2); +} + +.testimonials__avatar { + width: 7.8rem; + height: 7.8rem; + border-radius: 100%; + position: absolute; + left: 0; + top: 4.8rem; + outline: none; +} + +.testimonials__author { + margin-top: 0rem; + font-family: "metropolis-bold", sans-serif; + font-size: 1.8rem; + line-height: 1.5; + color: #000000; +} +.testimonials__author span { + display: block; + font-family: "metropolis-regular", sans-serif; + font-size: 1.4rem; + line-height: 1.5; + color: rgba(85, 85, 85, 0.7); + text-transform: none; + letter-spacing: 0; +} + +/* ------------------------------------------------------------------- + * responsive: + * testimonials + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1100px) { + .testimonials { + font-size: 1.7rem; + } + + .testimonials__slide { + padding-left: 9.5rem; + } + .testimonials__slide::before { + left: calc(6.6rem / 2); + } + + .testimonials__avatar { + width: 6.6rem; + height: 6.6rem; + } +} +@media only screen and (max-width: 600px) { + .testimonials-header h1 { + font-size: 2.7rem; + } + + .testimonials { + margin-top: 3rem; + } + + .testimonials__slide { + padding: 13.2rem 0 0; + text-align: center; + } + .testimonials__slide::before { + left: 50%; + } + + .testimonials__avatar { + left: 50%; + margin-left: -3.3rem; + } +} + + + +/* =================================================================== + * # stats + * + * ------------------------------------------------------------------- */ +.s-stats { + padding-top: 4.2rem; + padding-bottom: 4.2rem; + background-color: #050505; + background-image: url(../images/stats-bg.jpg); + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + overflow: hidden; + position: relative; +} +.s-stats::before { + display: block; + content: ""; + background-color: #050505; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.8; +} + +.stats { + text-align: center; +} +.stats__col { + margin: 5.4rem 0; + padding: 0 2rem; + position: relative; + overflow: hidden; + white-space: nowrap; +} +.stats__count { + font-family: "metropolis-light", sans-serif; + font-size: 9.2rem; + line-height: 1; + color: #ffffff; + padding-bottom: 1.8rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + position: relative; +} +.stats__count::after { + display: block; + content: ""; + height: 1px; + width: 100px; + background-color: rgba(255, 255, 255, 0.1); + position: absolute; + bottom: 0; + left: 50%; + margin-left: -50px; +} +.stats h5 { + font-family: "metropolis-regular", sans-serif; + font-size: 1.8rem; + line-height: 1.333; + color: rgba(255, 255, 255, 0.5); + margin-top: 1.8rem; + position: relative; +} + + +/* ------------------------------------------------------------------- + * responsive: + * stats + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .stats { + max-width: 900px; + } + .stats__col { + margin: 3rem 0; + } + .stats__count { + font-size: 9rem; + } +} +@media only screen and (max-width: 600px) { + .stats__count { + font-size: 8.4rem; + } +} +@media only screen and (max-width: 400px) { + .s-stats { + padding-top: 4.5rem; + padding-bottom: 4.5rem; + } + + .stats__count { + font-size: 8.2rem; + } +} + + + +/* =================================================================== + * # contact + * + * ------------------------------------------------------------------- */ +.s-contact { + padding-top: 21rem; + padding-bottom: 10.2rem; + background-color: #111111; + color: rgba(255, 255, 255, 0.3); + position: relative; +} +.s-contact a { + color: #ffffff; + border-bottom: 1px solid transparent; + display: inline-block; +} +.s-contact a:hover, +.s-contact a:focus { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.contact-main { + margin-top: 14.4rem; + margin-bottom: 4.8rem; +} + +.contact-email { + display: inline-block; + font-family: "metropolis-light", sans-serif; + font-size: 5.4rem; + line-height: 1.222; + color: #ffffff; + padding-top: 3.6rem; + position: relative; +} +.contact-email::before { + content: ""; + display: block; + height: 1px; + width: 60px; + background-color: #cc147f; + position: absolute; + top: 0; + left: 0; +} + +.contact-number { + font-family: "metropolis-light", sans-serif; + font-size: 3rem; + line-height: 1.7; + display: block; +} + +.contact-address { + font-family: "metropolis-regular", sans-serif; + font-size: 2.8rem; + line-height: 1.607; + margin-top: 2.4rem; +} + + +/* ------------------------------------------------------------------- + * ## contact social + * ------------------------------------------------------------------- */ +.contact-social { + list-style: none; + display: inline-block; + margin: 0 0 0 0.3rem; + font-size: 3rem; +} +.contact-social li { + margin-right: 15px; + padding-left: 0; + display: inline-block; +} +.contact-social li a { + color: rgba(255, 255, 255, 0.3); + border: none !important; +} +.contact-social li a:hover, +.contact-social li a:focus { + color: #ffffff; +} +.contact-social li:last-child { + margin: 0; +} + + +/* ------------------------------------------------------------------- + * ## subscribe + * ------------------------------------------------------------------- */ +.contact-subscribe { + margin: 0; + padding: 0; + position: relative; +} + +.mc-form { + margin-top: 2.1rem; + width: 100%; +} +.mc-form input[type="email"] { + background-color: rgba(0, 0, 0, 0.2); + color: rgba(255, 255, 255, 0.5); + width: 100%; + height: 5.4rem; + padding: 1.2rem 150px 1.2rem 20px; + margin-bottom: 1.8rem; + border: none; +} +.mc-form input[type="email"]:focus { + color: #ffffff; +} +.mc-form input[type="email"]::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.2); +} +.mc-form input[type="email"]:-moz-placeholder { + color: rgba(255, 255, 255, 0.2); + /* Firefox 18- */ +} +.mc-form input[type="email"]::-moz-placeholder { + color: rgba(255, 255, 255, 0.2); + /* Firefox 19+ */ +} +.mc-form input[type="email"]:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.2); +} +.mc-form input[type="email"].placeholder { + color: rgba(255, 255, 255, 0.2) !important; +} +.mc-form input[type="submit"] { + color: #ffffff; + background: #cc147f; + border-color: #cc147f; + padding: 0 15px; + position: absolute; + top: 0; + right: 0; +} +.mc-form label { + color: #ffffff; + font-family: "metropolis-semibold", sans-serif; + font-size: 1.3rem; + padding: 0 2rem; +} +.mc-form label i { + padding-right: 6px; +} + + +/* ------------------------------------------------------------------- + * ## copyright + * ------------------------------------------------------------------- */ +.cl-copyright { + margin-top: 2.1rem; +} + +.cl-copyright span { + font-size: 15px; + display: inline-block; +} +.cl-copyright span::after { + content: "|"; + display: inline-block; + padding: 0 1rem 0 1.2rem; + color: rgba(255, 255, 255, 0.1); +} +.cl-copyright span:last-child::after { + display: none; +} + + +/* ------------------------------------------------------------------- + * ## go to top + * ------------------------------------------------------------------- */ +.cl-go-top { + z-index: 600; + position: absolute; + bottom: 10.8rem; + right: 105px; +} +.cl-go-top a { + text-decoration: none; + border: 0 none; + display: block; + height: 60px; + width: 60px; + line-height: 60px; + text-align: center; + background: black; + color: white; + text-align: center; + text-transform: uppercase; + border-radius: 50%; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.cl-go-top a i { + font-size: 21px; + line-height: inherit; +} +.cl-go-top a:hover, +.cl-go-top a:focus { + background-color: #ffffff; + color: #000000; +} +.cl-go-top::before { + content: ""; + display: block; + width: 1px; + height: 100px; + background-color: rgba(255, 255, 255, 0.1); + position: absolute; + top: -115px; + left: 50%; +} +.cl-go-top::after { + content: "back to top"; + display: inline-block; + width: 120px; + font-size: 1.2rem; + line-height: 30px; + text-transform: uppercase; + letter-spacing: 0.2rem; + color: rgba(255, 255, 255, 0.15); + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + -webkit-transform-origin: left bottom; + -ms-transform-origin: left bottom; + transform-origin: left bottom; + position: absolute; + left: calc(30px + 15px); + top: -165px; +} + +.menu-is-open .cl-go-top { + display: none; +} + +/* ------------------------------------------------------------------- + * responsive: + * contact + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1600px) { + .cl-go-top { + right: 55px; + } +} +@media only screen and (max-width: 1200px) { + .s-contact { + padding-top: 15rem; + } + + .contact-main { + margin-top: 13.2rem; + } + + .contact-email { + font-size: 5rem; + } + + .contact-number { + font-size: 2.6rem; + } + + .contact-address { + font-size: 2.4rem; + } + + .contact-social { + font-size: 2.8rem; + } + + .cl-copyright { + margin-top: 3rem; + } +} +@media only screen and (max-width: 1000px) { + .contact-email { + font-size: 4.2rem; + } + + .contact-number { + font-size: 2.4rem; + } + + .contact-address { + font-size: 2.1rem; + } + + .contact-social { + font-size: 2.4rem; + } +} +@media only screen and (max-width: 800px) { + .s-contact { + padding-top: 12rem; + padding-bottom: 9rem; + } + + .contact-secondary, + .cl-copyright { + padding-right: 7.8rem; + } + + .contact-secondary { + margin-bottom: 1.5rem; + } + + .contact-email { + font-size: 3.6rem; + } + + .contact-number { + font-size: 2rem; + } + + .contact-address { + font-size: 2rem; + } + + .cl-go-top { + right: 35px; + bottom: 9rem; + } + .cl-go-top a { + height: 48px; + width: 48px; + line-height: 48px; + } + .cl-go-top a i { + font-size: 18px; + } + .cl-go-top::after { + font-size: 1.1rem; + left: calc(24px + 15px); + } +} +@media only screen and (max-width: 600px) { + .s-contact { + padding-bottom: 6rem; + } + + .contact-main { + margin-top: 12rem; + } + + .contact-email { + font-size: 3rem; + } + + .contact-number { + font-size: 1.8rem; + } + + .contact-address { + font-size: 1.8rem; + } + + .contact-social { + font-size: 2rem; + } + + .cl-go-top { + right: 25px; + bottom: 7.2rem; + } +} +@media only screen and (max-width: 480px) { + .contact-subscribe { + margin-top: 3rem; + } + + .mc-form input[type="email"], + .mc-form label { + text-align: center; + } + .mc-form input[type="email"] { + padding: 1.2rem 20px 1.2rem; + } + .mc-form input[type="submit"] { + position: static; + width: 100%; + margin-bottom: 1.8rem; + } + + .cl-copyright { + margin-top: 0; + } +} +@media only screen and (max-width: 400px) { + .s-contact { + padding-top: 9.6rem; + padding-bottom: 3rem; + } + + .contact-main { + margin-top: 9.6rem; + } + + .contact-secondary { + padding: 0; + } + + .contact-email { + font-size: 2.4rem; + } + + .contact-number { + font-size: 1.6rem; + } + + .cl-copyright { + margin-top: 9rem; + padding: 0; + text-align: center; + } + + .cl-copyright span { + font-size: 14px; + } + .cl-copyright span::after { + display: none; + } + + .cl-go-top { + bottom: 12rem; + right: 50%; + margin-right: -24px; + } + .cl-go-top::before, + .cl-go-top::after { + display: none; + } +} + +/*# sourceMappingURL=main.css.map */ diff --git a/css/micons/_notes/dwsync.xml b/css/micons/_notes/dwsync.xml index a44bcd1..89f1dc6 100644 --- a/css/micons/_notes/dwsync.xml +++ b/css/micons/_notes/dwsync.xml @@ -1,4 +1,4 @@ - - - + + + \ No newline at end of file diff --git a/css/micons/fonts/_notes/dwsync.xml b/css/micons/fonts/_notes/dwsync.xml index cae1c46..a5d6ff1 100644 --- a/css/micons/fonts/_notes/dwsync.xml +++ b/css/micons/fonts/_notes/dwsync.xml @@ -1,7 +1,7 @@ - - - - - - + + + + + + \ No newline at end of file diff --git a/css/vendor.css b/css/vendor.css index 65e53d2..6ea69b3 100644 --- a/css/vendor.css +++ b/css/vendor.css @@ -1,2068 +1,2068 @@ -/* =================================================================== - * - * Transcend v1.0 Vendor/Third Party CSS - * 03-18-2018 - * ------------------------------------------------------------------ - * - * TOC: - * # animate on scroll - * # slick slider - * # PhotoSwipe main CSS - * # PhotoSwipe Skin - * - * =================================================================== */ - - -/* =================================================================== - * # animate on scroll - * https://michalsnik.github.io/aos/ - * ------------------------------------------------------------------- */ -[data-aos][data-aos][data-aos-duration="50"], -body[data-aos-duration="50"] [data-aos] { - transition-duration: 50ms; -} - -[data-aos][data-aos][data-aos-delay="50"], -body[data-aos-delay="50"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="50"].aos-animate, -body[data-aos-delay="50"] [data-aos].aos-animate { - transition-delay: 50ms; -} - -[data-aos][data-aos][data-aos-duration="100"], -body[data-aos-duration="100"] [data-aos] { - transition-duration: 0.1s; -} - -[data-aos][data-aos][data-aos-delay="100"], -body[data-aos-delay="100"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="100"].aos-animate, -body[data-aos-delay="100"] [data-aos].aos-animate { - transition-delay: 0.1s; -} - -[data-aos][data-aos][data-aos-duration="150"], -body[data-aos-duration="150"] [data-aos] { - transition-duration: 0.15s; -} - -[data-aos][data-aos][data-aos-delay="150"], -body[data-aos-delay="150"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="150"].aos-animate, -body[data-aos-delay="150"] [data-aos].aos-animate { - transition-delay: 0.15s; -} - -[data-aos][data-aos][data-aos-duration="200"], -body[data-aos-duration="200"] [data-aos] { - transition-duration: 0.2s; -} - -[data-aos][data-aos][data-aos-delay="200"], -body[data-aos-delay="200"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="200"].aos-animate, -body[data-aos-delay="200"] [data-aos].aos-animate { - transition-delay: 0.2s; -} - -[data-aos][data-aos][data-aos-duration="250"], -body[data-aos-duration="250"] [data-aos] { - transition-duration: 0.25s; -} - -[data-aos][data-aos][data-aos-delay="250"], -body[data-aos-delay="250"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="250"].aos-animate, -body[data-aos-delay="250"] [data-aos].aos-animate { - transition-delay: 0.25s; -} - -[data-aos][data-aos][data-aos-duration="300"], -body[data-aos-duration="300"] [data-aos] { - transition-duration: 0.3s; -} - -[data-aos][data-aos][data-aos-delay="300"], -body[data-aos-delay="300"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="300"].aos-animate, -body[data-aos-delay="300"] [data-aos].aos-animate { - transition-delay: 0.3s; -} - -[data-aos][data-aos][data-aos-duration="350"], -body[data-aos-duration="350"] [data-aos] { - transition-duration: 0.35s; -} - -[data-aos][data-aos][data-aos-delay="350"], -body[data-aos-delay="350"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="350"].aos-animate, -body[data-aos-delay="350"] [data-aos].aos-animate { - transition-delay: 0.35s; -} - -[data-aos][data-aos][data-aos-duration="400"], -body[data-aos-duration="400"] [data-aos] { - transition-duration: 0.4s; -} - -[data-aos][data-aos][data-aos-delay="400"], -body[data-aos-delay="400"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="400"].aos-animate, -body[data-aos-delay="400"] [data-aos].aos-animate { - transition-delay: 0.4s; -} - -[data-aos][data-aos][data-aos-duration="450"], -body[data-aos-duration="450"] [data-aos] { - transition-duration: 0.45s; -} - -[data-aos][data-aos][data-aos-delay="450"], -body[data-aos-delay="450"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="450"].aos-animate, -body[data-aos-delay="450"] [data-aos].aos-animate { - transition-delay: 0.45s; -} - -[data-aos][data-aos][data-aos-duration="500"], -body[data-aos-duration="500"] [data-aos] { - transition-duration: 0.5s; -} - -[data-aos][data-aos][data-aos-delay="500"], -body[data-aos-delay="500"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="500"].aos-animate, -body[data-aos-delay="500"] [data-aos].aos-animate { - transition-delay: 0.5s; -} - -[data-aos][data-aos][data-aos-duration="550"], -body[data-aos-duration="550"] [data-aos] { - transition-duration: 0.55s; -} - -[data-aos][data-aos][data-aos-delay="550"], -body[data-aos-delay="550"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="550"].aos-animate, -body[data-aos-delay="550"] [data-aos].aos-animate { - transition-delay: 0.55s; -} - -[data-aos][data-aos][data-aos-duration="600"], -body[data-aos-duration="600"] [data-aos] { - transition-duration: 0.6s; -} - -[data-aos][data-aos][data-aos-delay="600"], -body[data-aos-delay="600"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="600"].aos-animate, -body[data-aos-delay="600"] [data-aos].aos-animate { - transition-delay: 0.6s; -} - -[data-aos][data-aos][data-aos-duration="650"], -body[data-aos-duration="650"] [data-aos] { - transition-duration: 0.65s; -} - -[data-aos][data-aos][data-aos-delay="650"], -body[data-aos-delay="650"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="650"].aos-animate, -body[data-aos-delay="650"] [data-aos].aos-animate { - transition-delay: 0.65s; -} - -[data-aos][data-aos][data-aos-duration="700"], -body[data-aos-duration="700"] [data-aos] { - transition-duration: 0.7s; -} - -[data-aos][data-aos][data-aos-delay="700"], -body[data-aos-delay="700"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="700"].aos-animate, -body[data-aos-delay="700"] [data-aos].aos-animate { - transition-delay: 0.7s; -} - -[data-aos][data-aos][data-aos-duration="750"], -body[data-aos-duration="750"] [data-aos] { - transition-duration: 0.75s; -} - -[data-aos][data-aos][data-aos-delay="750"], -body[data-aos-delay="750"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="750"].aos-animate, -body[data-aos-delay="750"] [data-aos].aos-animate { - transition-delay: 0.75s; -} - -[data-aos][data-aos][data-aos-duration="800"], -body[data-aos-duration="800"] [data-aos] { - transition-duration: 0.8s; -} - -[data-aos][data-aos][data-aos-delay="800"], -body[data-aos-delay="800"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="800"].aos-animate, -body[data-aos-delay="800"] [data-aos].aos-animate { - transition-delay: 0.8s; -} - -[data-aos][data-aos][data-aos-duration="850"], -body[data-aos-duration="850"] [data-aos] { - transition-duration: 0.85s; -} - -[data-aos][data-aos][data-aos-delay="850"], -body[data-aos-delay="850"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="850"].aos-animate, -body[data-aos-delay="850"] [data-aos].aos-animate { - transition-delay: 0.85s; -} - -[data-aos][data-aos][data-aos-duration="900"], -body[data-aos-duration="900"] [data-aos] { - transition-duration: 0.9s; -} - -[data-aos][data-aos][data-aos-delay="900"], -body[data-aos-delay="900"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="900"].aos-animate, -body[data-aos-delay="900"] [data-aos].aos-animate { - transition-delay: 0.9s; -} - -[data-aos][data-aos][data-aos-duration="950"], -body[data-aos-duration="950"] [data-aos] { - transition-duration: 0.95s; -} - -[data-aos][data-aos][data-aos-delay="950"], -body[data-aos-delay="950"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="950"].aos-animate, -body[data-aos-delay="950"] [data-aos].aos-animate { - transition-delay: 0.95s; -} - -[data-aos][data-aos][data-aos-duration="1000"], -body[data-aos-duration="1000"] [data-aos] { - transition-duration: 1s; -} - -[data-aos][data-aos][data-aos-delay="1000"], -body[data-aos-delay="1000"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1000"].aos-animate, -body[data-aos-delay="1000"] [data-aos].aos-animate { - transition-delay: 1s; -} - -[data-aos][data-aos][data-aos-duration="1050"], -body[data-aos-duration="1050"] [data-aos] { - transition-duration: 1.05s; -} - -[data-aos][data-aos][data-aos-delay="1050"], -body[data-aos-delay="1050"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1050"].aos-animate, -body[data-aos-delay="1050"] [data-aos].aos-animate { - transition-delay: 1.05s; -} - -[data-aos][data-aos][data-aos-duration="1100"], -body[data-aos-duration="1100"] [data-aos] { - transition-duration: 1.1s; -} - -[data-aos][data-aos][data-aos-delay="1100"], -body[data-aos-delay="1100"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1100"].aos-animate, -body[data-aos-delay="1100"] [data-aos].aos-animate { - transition-delay: 1.1s; -} - -[data-aos][data-aos][data-aos-duration="1150"], -body[data-aos-duration="1150"] [data-aos] { - transition-duration: 1.15s; -} - -[data-aos][data-aos][data-aos-delay="1150"], -body[data-aos-delay="1150"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1150"].aos-animate, -body[data-aos-delay="1150"] [data-aos].aos-animate { - transition-delay: 1.15s; -} - -[data-aos][data-aos][data-aos-duration="1200"], -body[data-aos-duration="1200"] [data-aos] { - transition-duration: 1.2s; -} - -[data-aos][data-aos][data-aos-delay="1200"], -body[data-aos-delay="1200"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1200"].aos-animate, -body[data-aos-delay="1200"] [data-aos].aos-animate { - transition-delay: 1.2s; -} - -[data-aos][data-aos][data-aos-duration="1250"], -body[data-aos-duration="1250"] [data-aos] { - transition-duration: 1.25s; -} - -[data-aos][data-aos][data-aos-delay="1250"], -body[data-aos-delay="1250"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1250"].aos-animate, -body[data-aos-delay="1250"] [data-aos].aos-animate { - transition-delay: 1.25s; -} - -[data-aos][data-aos][data-aos-duration="1300"], -body[data-aos-duration="1300"] [data-aos] { - transition-duration: 1.3s; -} - -[data-aos][data-aos][data-aos-delay="1300"], -body[data-aos-delay="1300"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1300"].aos-animate, -body[data-aos-delay="1300"] [data-aos].aos-animate { - transition-delay: 1.3s; -} - -[data-aos][data-aos][data-aos-duration="1350"], -body[data-aos-duration="1350"] [data-aos] { - transition-duration: 1.35s; -} - -[data-aos][data-aos][data-aos-delay="1350"], -body[data-aos-delay="1350"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1350"].aos-animate, -body[data-aos-delay="1350"] [data-aos].aos-animate { - transition-delay: 1.35s; -} - -[data-aos][data-aos][data-aos-duration="1400"], -body[data-aos-duration="1400"] [data-aos] { - transition-duration: 1.4s; -} - -[data-aos][data-aos][data-aos-delay="1400"], -body[data-aos-delay="1400"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1400"].aos-animate, -body[data-aos-delay="1400"] [data-aos].aos-animate { - transition-delay: 1.4s; -} - -[data-aos][data-aos][data-aos-duration="1450"], -body[data-aos-duration="1450"] [data-aos] { - transition-duration: 1.45s; -} - -[data-aos][data-aos][data-aos-delay="1450"], -body[data-aos-delay="1450"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1450"].aos-animate, -body[data-aos-delay="1450"] [data-aos].aos-animate { - transition-delay: 1.45s; -} - -[data-aos][data-aos][data-aos-duration="1500"], -body[data-aos-duration="1500"] [data-aos] { - transition-duration: 1.5s; -} - -[data-aos][data-aos][data-aos-delay="1500"], -body[data-aos-delay="1500"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1500"].aos-animate, -body[data-aos-delay="1500"] [data-aos].aos-animate { - transition-delay: 1.5s; -} - -[data-aos][data-aos][data-aos-duration="1550"], -body[data-aos-duration="1550"] [data-aos] { - transition-duration: 1.55s; -} - -[data-aos][data-aos][data-aos-delay="1550"], -body[data-aos-delay="1550"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1550"].aos-animate, -body[data-aos-delay="1550"] [data-aos].aos-animate { - transition-delay: 1.55s; -} - -[data-aos][data-aos][data-aos-duration="1600"], -body[data-aos-duration="1600"] [data-aos] { - transition-duration: 1.6s; -} - -[data-aos][data-aos][data-aos-delay="1600"], -body[data-aos-delay="1600"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1600"].aos-animate, -body[data-aos-delay="1600"] [data-aos].aos-animate { - transition-delay: 1.6s; -} - -[data-aos][data-aos][data-aos-duration="1650"], -body[data-aos-duration="1650"] [data-aos] { - transition-duration: 1.65s; -} - -[data-aos][data-aos][data-aos-delay="1650"], -body[data-aos-delay="1650"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1650"].aos-animate, -body[data-aos-delay="1650"] [data-aos].aos-animate { - transition-delay: 1.65s; -} - -[data-aos][data-aos][data-aos-duration="1700"], -body[data-aos-duration="1700"] [data-aos] { - transition-duration: 1.7s; -} - -[data-aos][data-aos][data-aos-delay="1700"], -body[data-aos-delay="1700"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1700"].aos-animate, -body[data-aos-delay="1700"] [data-aos].aos-animate { - transition-delay: 1.7s; -} - -[data-aos][data-aos][data-aos-duration="1750"], -body[data-aos-duration="1750"] [data-aos] { - transition-duration: 1.75s; -} - -[data-aos][data-aos][data-aos-delay="1750"], -body[data-aos-delay="1750"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1750"].aos-animate, -body[data-aos-delay="1750"] [data-aos].aos-animate { - transition-delay: 1.75s; -} - -[data-aos][data-aos][data-aos-duration="1800"], -body[data-aos-duration="1800"] [data-aos] { - transition-duration: 1.8s; -} - -[data-aos][data-aos][data-aos-delay="1800"], -body[data-aos-delay="1800"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1800"].aos-animate, -body[data-aos-delay="1800"] [data-aos].aos-animate { - transition-delay: 1.8s; -} - -[data-aos][data-aos][data-aos-duration="1850"], -body[data-aos-duration="1850"] [data-aos] { - transition-duration: 1.85s; -} - -[data-aos][data-aos][data-aos-delay="1850"], -body[data-aos-delay="1850"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1850"].aos-animate, -body[data-aos-delay="1850"] [data-aos].aos-animate { - transition-delay: 1.85s; -} - -[data-aos][data-aos][data-aos-duration="1900"], -body[data-aos-duration="1900"] [data-aos] { - transition-duration: 1.9s; -} - -[data-aos][data-aos][data-aos-delay="1900"], -body[data-aos-delay="1900"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1900"].aos-animate, -body[data-aos-delay="1900"] [data-aos].aos-animate { - transition-delay: 1.9s; -} - -[data-aos][data-aos][data-aos-duration="1950"], -body[data-aos-duration="1950"] [data-aos] { - transition-duration: 1.95s; -} - -[data-aos][data-aos][data-aos-delay="1950"], -body[data-aos-delay="1950"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="1950"].aos-animate, -body[data-aos-delay="1950"] [data-aos].aos-animate { - transition-delay: 1.95s; -} - -[data-aos][data-aos][data-aos-duration="2000"], -body[data-aos-duration="2000"] [data-aos] { - transition-duration: 2s; -} - -[data-aos][data-aos][data-aos-delay="2000"], -body[data-aos-delay="2000"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2000"].aos-animate, -body[data-aos-delay="2000"] [data-aos].aos-animate { - transition-delay: 2s; -} - -[data-aos][data-aos][data-aos-duration="2050"], -body[data-aos-duration="2050"] [data-aos] { - transition-duration: 2.05s; -} - -[data-aos][data-aos][data-aos-delay="2050"], -body[data-aos-delay="2050"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2050"].aos-animate, -body[data-aos-delay="2050"] [data-aos].aos-animate { - transition-delay: 2.05s; -} - -[data-aos][data-aos][data-aos-duration="2100"], -body[data-aos-duration="2100"] [data-aos] { - transition-duration: 2.1s; -} - -[data-aos][data-aos][data-aos-delay="2100"], -body[data-aos-delay="2100"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2100"].aos-animate, -body[data-aos-delay="2100"] [data-aos].aos-animate { - transition-delay: 2.1s; -} - -[data-aos][data-aos][data-aos-duration="2150"], -body[data-aos-duration="2150"] [data-aos] { - transition-duration: 2.15s; -} - -[data-aos][data-aos][data-aos-delay="2150"], -body[data-aos-delay="2150"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2150"].aos-animate, -body[data-aos-delay="2150"] [data-aos].aos-animate { - transition-delay: 2.15s; -} - -[data-aos][data-aos][data-aos-duration="2200"], -body[data-aos-duration="2200"] [data-aos] { - transition-duration: 2.2s; -} - -[data-aos][data-aos][data-aos-delay="2200"], -body[data-aos-delay="2200"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2200"].aos-animate, -body[data-aos-delay="2200"] [data-aos].aos-animate { - transition-delay: 2.2s; -} - -[data-aos][data-aos][data-aos-duration="2250"], -body[data-aos-duration="2250"] [data-aos] { - transition-duration: 2.25s; -} - -[data-aos][data-aos][data-aos-delay="2250"], -body[data-aos-delay="2250"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2250"].aos-animate, -body[data-aos-delay="2250"] [data-aos].aos-animate { - transition-delay: 2.25s; -} - -[data-aos][data-aos][data-aos-duration="2300"], -body[data-aos-duration="2300"] [data-aos] { - transition-duration: 2.3s; -} - -[data-aos][data-aos][data-aos-delay="2300"], -body[data-aos-delay="2300"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2300"].aos-animate, -body[data-aos-delay="2300"] [data-aos].aos-animate { - transition-delay: 2.3s; -} - -[data-aos][data-aos][data-aos-duration="2350"], -body[data-aos-duration="2350"] [data-aos] { - transition-duration: 2.35s; -} - -[data-aos][data-aos][data-aos-delay="2350"], -body[data-aos-delay="2350"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2350"].aos-animate, -body[data-aos-delay="2350"] [data-aos].aos-animate { - transition-delay: 2.35s; -} - -[data-aos][data-aos][data-aos-duration="2400"], -body[data-aos-duration="2400"] [data-aos] { - transition-duration: 2.4s; -} - -[data-aos][data-aos][data-aos-delay="2400"], -body[data-aos-delay="2400"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2400"].aos-animate, -body[data-aos-delay="2400"] [data-aos].aos-animate { - transition-delay: 2.4s; -} - -[data-aos][data-aos][data-aos-duration="2450"], -body[data-aos-duration="2450"] [data-aos] { - transition-duration: 2.45s; -} - -[data-aos][data-aos][data-aos-delay="2450"], -body[data-aos-delay="2450"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2450"].aos-animate, -body[data-aos-delay="2450"] [data-aos].aos-animate { - transition-delay: 2.45s; -} - -[data-aos][data-aos][data-aos-duration="2500"], -body[data-aos-duration="2500"] [data-aos] { - transition-duration: 2.5s; -} - -[data-aos][data-aos][data-aos-delay="2500"], -body[data-aos-delay="2500"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2500"].aos-animate, -body[data-aos-delay="2500"] [data-aos].aos-animate { - transition-delay: 2.5s; -} - -[data-aos][data-aos][data-aos-duration="2550"], -body[data-aos-duration="2550"] [data-aos] { - transition-duration: 2.55s; -} - -[data-aos][data-aos][data-aos-delay="2550"], -body[data-aos-delay="2550"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2550"].aos-animate, -body[data-aos-delay="2550"] [data-aos].aos-animate { - transition-delay: 2.55s; -} - -[data-aos][data-aos][data-aos-duration="2600"], -body[data-aos-duration="2600"] [data-aos] { - transition-duration: 2.6s; -} - -[data-aos][data-aos][data-aos-delay="2600"], -body[data-aos-delay="2600"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2600"].aos-animate, -body[data-aos-delay="2600"] [data-aos].aos-animate { - transition-delay: 2.6s; -} - -[data-aos][data-aos][data-aos-duration="2650"], -body[data-aos-duration="2650"] [data-aos] { - transition-duration: 2.65s; -} - -[data-aos][data-aos][data-aos-delay="2650"], -body[data-aos-delay="2650"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2650"].aos-animate, -body[data-aos-delay="2650"] [data-aos].aos-animate { - transition-delay: 2.65s; -} - -[data-aos][data-aos][data-aos-duration="2700"], -body[data-aos-duration="2700"] [data-aos] { - transition-duration: 2.7s; -} - -[data-aos][data-aos][data-aos-delay="2700"], -body[data-aos-delay="2700"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2700"].aos-animate, -body[data-aos-delay="2700"] [data-aos].aos-animate { - transition-delay: 2.7s; -} - -[data-aos][data-aos][data-aos-duration="2750"], -body[data-aos-duration="2750"] [data-aos] { - transition-duration: 2.75s; -} - -[data-aos][data-aos][data-aos-delay="2750"], -body[data-aos-delay="2750"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2750"].aos-animate, -body[data-aos-delay="2750"] [data-aos].aos-animate { - transition-delay: 2.75s; -} - -[data-aos][data-aos][data-aos-duration="2800"], -body[data-aos-duration="2800"] [data-aos] { - transition-duration: 2.8s; -} - -[data-aos][data-aos][data-aos-delay="2800"], -body[data-aos-delay="2800"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2800"].aos-animate, -body[data-aos-delay="2800"] [data-aos].aos-animate { - transition-delay: 2.8s; -} - -[data-aos][data-aos][data-aos-duration="2850"], -body[data-aos-duration="2850"] [data-aos] { - transition-duration: 2.85s; -} - -[data-aos][data-aos][data-aos-delay="2850"], -body[data-aos-delay="2850"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2850"].aos-animate, -body[data-aos-delay="2850"] [data-aos].aos-animate { - transition-delay: 2.85s; -} - -[data-aos][data-aos][data-aos-duration="2900"], -body[data-aos-duration="2900"] [data-aos] { - transition-duration: 2.9s; -} - -[data-aos][data-aos][data-aos-delay="2900"], -body[data-aos-delay="2900"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2900"].aos-animate, -body[data-aos-delay="2900"] [data-aos].aos-animate { - transition-delay: 2.9s; -} - -[data-aos][data-aos][data-aos-duration="2950"], -body[data-aos-duration="2950"] [data-aos] { - transition-duration: 2.95s; -} - -[data-aos][data-aos][data-aos-delay="2950"], -body[data-aos-delay="2950"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="2950"].aos-animate, -body[data-aos-delay="2950"] [data-aos].aos-animate { - transition-delay: 2.95s; -} - -[data-aos][data-aos][data-aos-duration="3000"], -body[data-aos-duration="3000"] [data-aos] { - transition-duration: 3s; -} - -[data-aos][data-aos][data-aos-delay="3000"], -body[data-aos-delay="3000"] [data-aos] { - transition-delay: 0; -} - -[data-aos][data-aos][data-aos-delay="3000"].aos-animate, -body[data-aos-delay="3000"] [data-aos].aos-animate { - transition-delay: 3s; -} - -[data-aos][data-aos][data-aos-easing="linear"], -body[data-aos-easing="linear"] [data-aos] { - transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); -} - -[data-aos][data-aos][data-aos-easing="ease"], -body[data-aos-easing="ease"] [data-aos] { - transition-timing-function: ease; -} - -[data-aos][data-aos][data-aos-easing="ease-in"], -body[data-aos-easing="ease-in"] [data-aos] { - transition-timing-function: ease-in; -} - -[data-aos][data-aos][data-aos-easing="ease-out"], -body[data-aos-easing="ease-out"] [data-aos] { - transition-timing-function: ease-out; -} - -[data-aos][data-aos][data-aos-easing="ease-in-out"], -body[data-aos-easing="ease-in-out"] [data-aos] { - transition-timing-function: ease-in-out; -} - -[data-aos][data-aos][data-aos-easing="ease-in-back"], -body[data-aos-easing="ease-in-back"] [data-aos] { - transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); -} - -[data-aos][data-aos][data-aos-easing="ease-out-back"], -body[data-aos-easing="ease-out-back"] [data-aos] { - transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -} - -[data-aos][data-aos][data-aos-easing="ease-in-out-back"], -body[data-aos-easing="ease-in-out-back"] [data-aos] { - transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); -} - -[data-aos][data-aos][data-aos-easing="ease-in-sine"], -body[data-aos-easing="ease-in-sine"] [data-aos] { - transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); -} - -[data-aos][data-aos][data-aos-easing="ease-out-sine"], -body[data-aos-easing="ease-out-sine"] [data-aos] { - transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -} - -[data-aos][data-aos][data-aos-easing="ease-in-out-sine"], -body[data-aos-easing="ease-in-out-sine"] [data-aos] { - transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); -} - -[data-aos][data-aos][data-aos-easing="ease-in-quad"], -body[data-aos-easing="ease-in-quad"] [data-aos] { - transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -} - -[data-aos][data-aos][data-aos-easing="ease-out-quad"], -body[data-aos-easing="ease-out-quad"] [data-aos] { - transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -[data-aos][data-aos][data-aos-easing="ease-in-out-quad"], -body[data-aos-easing="ease-in-out-quad"] [data-aos] { - transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -} - -[data-aos][data-aos][data-aos-easing="ease-in-cubic"], -body[data-aos-easing="ease-in-cubic"] [data-aos] { - transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -} - -[data-aos][data-aos][data-aos-easing="ease-out-cubic"], -body[data-aos-easing="ease-out-cubic"] [data-aos] { - transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -[data-aos][data-aos][data-aos-easing="ease-in-out-cubic"], -body[data-aos-easing="ease-in-out-cubic"] [data-aos] { - transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -} - -[data-aos][data-aos][data-aos-easing="ease-in-quart"], -body[data-aos-easing="ease-in-quart"] [data-aos] { - transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); -} - -[data-aos][data-aos][data-aos-easing="ease-out-quart"], -body[data-aos-easing="ease-out-quart"] [data-aos] { - transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); -} - -[data-aos][data-aos][data-aos-easing="ease-in-out-quart"], -body[data-aos-easing="ease-in-out-quart"] [data-aos] { - transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); -} - -[data-aos^="fade"][data-aos^="fade"] { - opacity: 0; - transition-property: opacity, transform; -} - -[data-aos^="fade"][data-aos^="fade"].aos-animate { - opacity: 1; - transform: translate(0); -} - -[data-aos="fade-up"] { - transform: translateY(100px); -} - -[data-aos="fade-down"] { - transform: translateY(-100px); -} - -[data-aos="fade-right"] { - transform: translate(-100px); -} - -[data-aos="fade-left"] { - transform: translate(100px); -} - -[data-aos="fade-up-right"] { - transform: translate(-100px, 100px); -} - -[data-aos="fade-up-left"] { - transform: translate(100px, 100px); -} - -[data-aos="fade-down-right"] { - transform: translate(-100px, -100px); -} - -[data-aos="fade-down-left"] { - transform: translate(100px, -100px); -} - -[data-aos^="zoom"][data-aos^="zoom"] { - opacity: 0; - transition-property: opacity, transform; -} - -[data-aos^="zoom"][data-aos^="zoom"].aos-animate { - opacity: 1; - transform: translate(0) scale(1); -} - -[data-aos="zoom-in"] { - transform: scale(0.6); -} - -[data-aos="zoom-in-up"] { - transform: translateY(100px) scale(0.6); -} - -[data-aos="zoom-in-down"] { - transform: translateY(-100px) scale(0.6); -} - -[data-aos="zoom-in-right"] { - transform: translate(-100px) scale(0.6); -} - -[data-aos="zoom-in-left"] { - transform: translate(100px) scale(0.6); -} - -[data-aos="zoom-out"] { - transform: scale(1.2); -} - -[data-aos="zoom-out-up"] { - transform: translateY(100px) scale(1.2); -} - -[data-aos="zoom-out-down"] { - transform: translateY(-100px) scale(1.2); -} - -[data-aos="zoom-out-right"] { - transform: translate(-100px) scale(1.2); -} - -[data-aos="zoom-out-left"] { - transform: translate(100px) scale(1.2); -} - -[data-aos^="slide"][data-aos^="slide"] { - transition-property: transform; -} - -[data-aos^="slide"][data-aos^="slide"].aos-animate { - transform: translate(0); -} - -[data-aos="slide-up"] { - transform: translateY(100%); -} - -[data-aos="slide-down"] { - transform: translateY(-100%); -} - -[data-aos="slide-right"] { - transform: translateX(-100%); -} - -[data-aos="slide-left"] { - transform: translateX(100%); -} - -[data-aos^="flip"][data-aos^="flip"] { - backface-visibility: hidden; - transition-property: transform; -} - -[data-aos="flip-left"] { - transform: perspective(2500px) rotateY(-100deg); -} - -[data-aos="flip-left"].aos-animate { - transform: perspective(2500px) rotateY(0); -} - -[data-aos="flip-right"] { - transform: perspective(2500px) rotateY(100deg); -} - -[data-aos="flip-right"].aos-animate { - transform: perspective(2500px) rotateY(0); -} - -[data-aos="flip-up"] { - transform: perspective(2500px) rotateX(-100deg); -} - -[data-aos="flip-up"].aos-animate { - transform: perspective(2500px) rotateX(0); -} - -[data-aos="flip-down"] { - transform: perspective(2500px) rotateX(100deg); -} - -[data-aos="flip-down"].aos-animate { - transform: perspective(2500px) rotateX(0); -} - -/*# sourceMappingURL=aos.css.map*/ - - - -/* =================================================================== - * # slick slider - * http://kenwheeler.github.io/slick/ - * ------------------------------------------------------------------- */ -.slick-slider { - position: relative; - display: block; - box-sizing: border-box; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-touch-action: pan-y; - touch-action: pan-y; - -webkit-tap-highlight-color: transparent; -} - -.slick-list { - position: relative; - overflow: hidden; - display: block; - margin: 0; - padding: 0; -} -.slick-list:focus { - outline: none; -} -.slick-list.dragging { - cursor: pointer; - cursor: hand; -} - -.slick-slider .slick-track, -.slick-slider .slick-list { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} - -.slick-track { - position: relative; - left: 0; - top: 0; - display: block; -} -.slick-track:before, -.slick-track:after { - content: ""; - display: table; -} -.slick-track:after { - clear: both; -} -.slick-loading .slick-track { - visibility: hidden; -} - -.slick-slide { - float: left; - height: 100%; - min-height: 1px; - display: none; -} -[dir="rtl"] .slick-slide { - float: right; -} -.slick-slide img { - display: block; -} -.slick-slide.slick-loading img { - display: none; -} -.slick-slide.dragging img { - pointer-events: none; -} -.slick-initialized .slick-slide { - display: block; -} -.slick-loading .slick-slide { - visibility: hidden; -} -.slick-vertical .slick-slide { - display: block; - height: auto; - border: 1px solid transparent; -} - -.slick-arrow.slick-hidden { - display: none; -} - - -/* =================================================================== - * # PhotoSwipe main CSS by Dmitry Semenov - * photoswipe.com | MIT license - * ------------------------------------------------------------------- */ -/* - Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) -*/ -/* pswp = photoswipe */ -.pswp { - display: none; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - overflow: hidden; - -ms-touch-action: none; - touch-action: none; - z-index: 1500; - -webkit-text-size-adjust: 100%; - /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ - -webkit-backface-visibility: hidden; - outline: none; -} - -.pswp * { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.pswp img { - max-width: none; -} - -/* style is added when JS option showHideOpacity is set to true */ -.pswp--animate_opacity { - /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ - opacity: 0.001; - will-change: opacity; - /* for open/close transition */ - -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); -} - -.pswp--open { - display: block; -} - -.pswp--zoom-allowed .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-zoom-in; - cursor: -moz-zoom-in; - cursor: zoom-in; -} - -.pswp--zoomed-in .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: grab; -} - -.pswp--dragging .pswp__img { - /* autoprefixer: off */ - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: grabbing; -} - -/* - Background is added as a separate element. - As animating opacity is much faster than animating rgba() background-color. -*/ -.pswp__bg { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: #000; - opacity: 0; - -webkit-transform: translateZ(0); - transform: translateZ(0); - -webkit-backface-visibility: hidden; - will-change: opacity; -} - -.pswp__scroll-wrap { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - -.pswp__container, -.pswp__zoom-wrap { - -ms-touch-action: none; - touch-action: none; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; -} - -/* Prevent selection and tap highlights */ -.pswp__container, -.pswp__img { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; -} - -.pswp__zoom-wrap { - position: absolute; - width: 100%; - -webkit-transform-origin: left top; - -ms-transform-origin: left top; - transform-origin: left top; - /* for open/close transition */ - -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); -} - -.pswp__bg { - will-change: opacity; - /* for open/close transition */ - -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); -} - -.pswp--animated-in .pswp__bg, -.pswp--animated-in .pswp__zoom-wrap { - -webkit-transition: none; - transition: none; -} - -.pswp__container, -.pswp__zoom-wrap { - -webkit-backface-visibility: hidden; -} - -.pswp__item { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; -} - -.pswp__img { - position: absolute; - width: auto; - height: auto; - top: 0; - left: 0; -} - -/* - stretched thumbnail or div placeholder element (see below) - style is added to avoid flickering in webkit/blink when layers overlap -*/ -.pswp__img--placeholder { - -webkit-backface-visibility: hidden; -} - -/* - div element that matches size of large image - large image loads on top of it -*/ -.pswp__img--placeholder--blank { - background: #222; -} - -.pswp--ie .pswp__img { - width: 100% !important; - height: auto !important; - left: 0; - top: 0; -} - -/* - Error message appears when image is not loaded - (JS option errorMsg controls markup) -*/ -.pswp__error-msg { - position: absolute; - left: 0; - top: 50%; - width: 100%; - text-align: center; - font-size: 14px; - line-height: 16px; - margin-top: -8px; - color: #ccc; -} - -.pswp__error-msg a { - color: #ccc; - text-decoration: underline; -} - - -/* =================================================================== - * # PhotoSwipe Skin - * - * ------------------------------------------------------------------- */ -/* - Contents: - - 1. Buttons - 2. Share modal and links - 3. Index indicator ("1 of X" counter) - 4. Caption - 5. Loading indicator - 6. Additional styles (root element, top bar, idle state, hidden state, etc.) -*/ -/* ------------------------------------------------------------------- - * ## 1. buttons - * ------------------------------------------------------------------- */ -/* -
-
-
-
-
-
-
- - -
-
-
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - \ No newline at end of file + + + + + + Infotech Programmer + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + +
+ +
+ +
+




+

+

+

+ We create stunning websites
+ that will help your business stand out. +

+
+ +
+ + + + + + + + Scroll Down + + + + +
+ + +
+ + +
+ +
+

About Me

+

I am a creative individual passionate about Web Development and Content Creation.

+
+
+ +
+ +
+
+ +
+
+

Front End Developer

+

I can make nice and attractive static front end websites using HTML, CSS and Javascript. Currently working on react. Mostly worked with Bootstrap framework and templates to provide a versatile look to the webpage. Also worked little bit on wordpress to make websites using amazing wordpress available themes and plugins. If anyone wants a nice and good looking static website for their startup can contact me. +

+
+
+ +
+
+ +
+
+

Back End Developer

+

Specialised in PHP for making dynamic websites like admin panels for controlling backend operations along with using MySQL database to store data. Various operations like insertion, deletion, updation, hiding of data, login/logout etc can be done on frontend using backend admin panel of website. Must check my CMS project for getting experience of full backend controls by loging into its admin panel. +

+
+
+ +
+
+ +
+
+

Content Creator

+

I make and publish content on my instagram/facebook pages in social media post format. I provide content related to Information Technology, Programming, Latest Technology Updates/News and some general Technical tips and tricks. Posts are made using Canva to provide a amazing experience of reading and understanding to audience by using visual elements, shapes and amazing fonts. +

+
+
+ + +
+

My Skills

+ +
    +
    +
  • +
    70%
    + HTML/CSS/JAVASCRIPT +
  • +
  • +
    75%
    + PHP/MySql +
  • +
  • +
    50%
    + Wordpress +
  • +
  • +
    40%
    + React +
  • +
    +
    +
  • +
    60%
    + Content Creation +
  • +
  • +
    70%
    + Canva +
  • +
  • +
    75%
    + Communication Skills +
  • +
  • +
    60%
    + Node.js/MongoDb +
  • +
    +
+
+

You can see the proof of skills down below by using the live projects made by me

+
+
+
+ + + +
+
+

Live Projects

+

Click on the images and experience these latest live working 12 projects made by me

+
+
+ + + +
+ +
+ +
+ Author image + project_image +
+ Dice Game + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Live Image Transformation + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Drum Kit with Sound + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Live Sound Board + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Stylist Image Gallery + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Frequently Asked Question Site + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Drinking Water Tracker + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Latest Movies Description App + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Image Gallery with Background Effect + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Live Clock with Dark and Light Modes + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ My Simple Portfolio + HTML, CSS, JS +
+
+ +
+ Author image + project_image +
+ Whiteboard (Drawing App) + HTML, CSS, JS +
+
+ + +
+ +


+
Click on these dots to see more projects
+
+ +
+
+

React Projects

+

Click on the images and experience these latest live working 10 react projects made by me

+
+
+ +
+ +
+ +
+ Author image + project_image +
+ Expense Tracker + React +
+
+ +
+ Author image + project_image +
+ Goals List + React +
+
+ +
+ Author image + project_image +
+ User Validation App + React +
+
+ +
+ Author image + project_image +
+ User Login App + React +
+
+ +
+ Author image + project_image +
+ Food Order App (Realtime Database) + React +
+
+ +
+ Author image + project_image +
+ Task Adder App (Realtime Database) + React +
+
+ +
+ Author image + project_image +
+ Complex Validations Form + React +
+
+ +
+ Author image + project_image +
+ User Authentication App + React +
+
+ +
+ Author image + project_image +
+ Advance Cart with Realtime Notification + React and Firebase +
+
+ +
+ Author image + project_image +
+ Quotes App (Multipage- Realtime Database) + React and Firebase +
+
+ + +
+ +


+
Click on these dots to see more projects
+ + +
+ + +
+ + + +
+ +
+
+

Featured Projects (Complete Websites)

+

These are some nice websites made by me and I am so excited to show them to you.

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

+ CTGTE +

+

+ Technical Education Website +

+
+ + +
+

Click on above button to open and see the project description.

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

+ Shopkart +

+

+ Shoping Website +

+
+ + + +

Click on above button to open and see the project description.

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

+ MYCMS +

+

+ Content Management System with Admin Support +

+
+ + + + +

Click on above button to open and see the project description.

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

+ Save Wildlife +

+

+ Website for Save Animal Organization +

+
+ + +

Click on above button to open and see the project description.

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

+ ShopmartSB +

+

+ An advanced version of Shopkart Website +

+
+ + +

Click on above button to open and see the project description.

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

+ Computer Store +

+

+ An informative website +

+
+ + + +

Click on above button to open and see the project description.

+
+ +
+
+ +
+
+ +
+ + + +
+ +
+ + + + +
+ +
+ +
+
200
+
Content Created More Than
+
+
+
10
+
Technical Certifications
+
+
+
5
+
Achievements
+
+
+
25
+
Projects Completed More Than
+
+ +
+ +
+ + +
+ +
+
+

Contact Us

+

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

+
+
+ +
+ +
+

Where To Find Us

+ Email: infotechprogramming@gmail.com
+ Telegram: Infotech Programmer
+ Instagram: @infotechprogrammer +
+ +
+

Follow Us

+ +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • + +
  • + +
  • +
  • + +
  • +
  • + +
  • + +
+ +
+
+
+ +
+ +
+ +
+ +
+ + + + + + +
+
+
+
+ + + + + + + + + + + + + + diff --git a/js/jquery-3.5.1.slim.min.js b/js/jquery-3.5.1.slim.min.js index b8d8a3d..c39d8fd 100644 --- a/js/jquery-3.5.1.slim.min.js +++ b/js/jquery-3.5.1.slim.min.js @@ -1,2 +1,2 @@ -/*! jQuery v3.5.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */ +/*! jQuery v3.5.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */ !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(g,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,v=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,y=n.hasOwnProperty,a=y.toString,l=a.call(Object),m={},b=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},w=g.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function C(e,t,n){var r,i,o=(n=n||w).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function T(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector",E=function(e,t){return new E.fn.init(e,t)};function d(e){var t=!!e&&"length"in e&&e.length,n=T(e);return!b(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+R+")"+R+"*"),U=new RegExp(R+"|>"),V=new RegExp(W),X=new RegExp("^"+B+"$"),Q={ID:new RegExp("^#("+B+")"),CLASS:new RegExp("^\\.("+B+")"),TAG:new RegExp("^("+B+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+R+"*(even|odd|(([+-]|)(\\d*)n|)"+R+"*(?:([+-]|)"+R+"*(\\d+)|))"+R+"*\\)|)","i"),bool:new RegExp("^(?:"+I+")$","i"),needsContext:new RegExp("^"+R+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+R+"*((?:-\\d)?\\d*)"+R+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,G=/^(?:input|select|textarea|button)$/i,K=/^h\d$/i,J=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+R+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){C()},ae=xe(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{O.apply(t=P.call(d.childNodes),d.childNodes),t[d.childNodes.length].nodeType}catch(e){O={apply:t.length?function(e,t){q.apply(e,P.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,d=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==d&&9!==d&&11!==d)return n;if(!r&&(C(e),e=e||T,E)){if(11!==d&&(u=Z.exec(t)))if(i=u[1]){if(9===d){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return O.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&p.getElementsByClassName&&e.getElementsByClassName)return O.apply(n,e.getElementsByClassName(i)),n}if(p.qsa&&!k[t+" "]&&(!v||!v.test(t))&&(1!==d||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===d&&(U.test(t)||_.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&p.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=A)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+be(l[o]);c=l.join(",")}try{return O.apply(n,f.querySelectorAll(c)),n}catch(e){k(t,!0)}finally{s===A&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>x.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[A]=!0,e}function ce(e){var t=T.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)x.attrHandle[n[r]]=t}function de(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function pe(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in p=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},C=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:d;return r!=T&&9===r.nodeType&&r.documentElement&&(a=(T=r).documentElement,E=!i(T),d!=T&&(n=T.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),p.scope=ce(function(e){return a.appendChild(e).appendChild(T.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),p.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),p.getElementsByTagName=ce(function(e){return e.appendChild(T.createComment("")),!e.getElementsByTagName("*").length}),p.getElementsByClassName=J.test(T.getElementsByClassName),p.getById=ce(function(e){return a.appendChild(e).id=A,!T.getElementsByName||!T.getElementsByName(A).length}),p.getById?(x.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(x.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),x.find.TAG=p.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):p.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},x.find.CLASS=p.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(p.qsa=J.test(T.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+R+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+R+"*(?:value|"+I+")"),e.querySelectorAll("[id~="+A+"-]").length||v.push("~="),(t=T.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+R+"*name"+R+"*="+R+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+A+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=T.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+R+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(p.matchesSelector=J.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){p.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",W)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=J.test(a.compareDocumentPosition),y=t||J.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!p.sortDetached&&t.compareDocumentPosition(e)===n?e==T||e.ownerDocument==d&&y(d,e)?-1:t==T||t.ownerDocument==d&&y(d,t)?1:u?H(u,e)-H(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==T?-1:t==T?1:i?-1:o?1:u?H(u,e)-H(u,t):0;if(i===o)return de(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?de(a[r],s[r]):a[r]==d?-1:s[r]==d?1:0}),T},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(C(e),p.matchesSelector&&E&&!k[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||p.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){k(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return Q.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&V.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+R+")"+e+"("+R+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return b(n)?E.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?E.grep(e,function(e){return e===n!==r}):"string"!=typeof n?E.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(E.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||L,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:j.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof E?t[0]:t,E.merge(this,E.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:w,!0)),k.test(r[1])&&E.isPlainObject(t))for(r in t)b(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=w.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):b(e)?void 0!==n.ready?n.ready(e):e(E):E.makeArray(e,this)}).prototype=E.fn,L=E(w);var q=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}E.fn.extend({has:function(e){var t=E(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,pe=/^$|^module$|\/(?:java|ecma)script/i;le=w.createDocumentFragment().appendChild(w.createElement("div")),(ce=w.createElement("input")).setAttribute("type","radio"),ce.setAttribute("checked","checked"),ce.setAttribute("name","t"),le.appendChild(ce),m.checkClone=le.cloneNode(!0).cloneNode(!0).lastChild.checked,le.innerHTML="",m.noCloneChecked=!!le.cloneNode(!0).lastChild.defaultValue,le.innerHTML="",m.option=!!le.lastChild;var he={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ge(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&S(e,t)?E.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n",""]);var ye=/<|&#?\w+;/;function me(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),d=[],p=0,h=e.length;p\s*$/g;function Le(e,t){return S(e,"table")&&S(11!==t.nodeType?t:t.firstChild,"tr")&&E(e).children("tbody")[0]||e}function je(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n
",2===ft.childNodes.length),E.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(m.createHTMLDocument?((r=(t=w.implementation.createHTMLDocument("")).createElement("base")).href=w.location.href,t.head.appendChild(r)):t=w),o=!n&&[],(i=k.exec(e))?[t.createElement(i[1])]:(i=me([e],t,o),o&&o.length&&E(o).remove(),E.merge([],i.childNodes)));var r,i,o},E.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=E.css(e,"position"),c=E(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=E.css(e,"top"),u=E.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),b(t)&&(t=t.call(e,n,E.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},E.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){E.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===E.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===E.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=E(e).offset()).top+=E.css(e,"borderTopWidth",!0),i.left+=E.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-E.css(r,"marginTop",!0),left:t.left-i.left-E.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===E.css(e,"position"))e=e.offsetParent;return e||re})}}),E.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;E.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),E.each(["top","left"],function(e,n){E.cssHooks[n]=Fe(m.pixelPosition,function(e,t){if(t)return t=We(e,n),Ie.test(t)?E(e).position()[n]+"px":t})}),E.each({Height:"height",Width:"width"},function(a,s){E.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){E.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?E.css(e,t,i):E.style(e,t,n,i)},s,n?e:void 0,n)}})}),E.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),E.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){E.fn[n]=function(e,t){return 0 - // will be used for IE10 detection (Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)) - var doc = document.documentElement; - doc.setAttribute('data-useragent', navigator.userAgent); - - - /* Preloader - * -------------------------------------------------- */ - var clPreloader = function() { - - $("html").addClass('cl-preload'); - - $WIN.on('load', function() { - - //force page scroll position to top at page refresh - // $('html, body').animate({ scrollTop: 0 }, 'normal'); - - // will first fade out the loading animation - $("#loader").fadeOut("slow", function() { - // will fade out the whole DIV that covers the website. - $("#preloader").delay(300).fadeOut("slow"); - }); - - // for hero content animations - $("html").removeClass('cl-preload'); - $("html").addClass('cl-loaded'); - - }); - }; - - - /* Menu on Scrolldown - * ------------------------------------------------------ */ - var clMenuOnScrolldown = function() { - - var menuTrigger = $('.header-menu-toggle'); - - $WIN.on('scroll', function() { - - if ($WIN.scrollTop() > 150) { - menuTrigger.addClass('opaque'); - } - else { - menuTrigger.removeClass('opaque'); - } - - }); - }; - - - /* OffCanvas Menu - * ------------------------------------------------------ */ - var clOffCanvas = function() { - - var menuTrigger = $('.header-menu-toggle'), - nav = $('.header-nav'), - closeButton = nav.find('.header-nav__close'), - siteBody = $('body'), - mainContents = $('section, footer'); - - // open-close menu by clicking on the menu icon - menuTrigger.on('click', function(e){ - e.preventDefault(); - siteBody.toggleClass('menu-is-open'); - }); - - // close menu by clicking the close button - closeButton.on('click', function(e){ - e.preventDefault(); - menuTrigger.trigger('click'); - }); - - // close menu clicking outside the menu itself - siteBody.on('click', function(e){ - if( !$(e.target).is('.header-nav, .header-nav__content, .header-menu-toggle, .header-menu-toggle span') ) { - siteBody.removeClass('menu-is-open'); - } - }); - - }; - - - /* photoswipe - * ----------------------------------------------------- */ - var clPhotoswipe = function() { - var items = [], - $pswp = $('.pswp')[0], - $folioItems = $('.item-folio'); - - // get items - $folioItems.each( function(i) { - - var $folio = $(this), - $thumbLink = $folio.find('.thumb-link'), - $title = $folio.find('.item-folio__title'), - $caption = $folio.find('.item-folio__caption'), - $titleText = '

' + $.trim($title.html()) + '

', - $captionText = $.trim($caption.html()), - $href = $thumbLink.attr('href'), - $size = $thumbLink.data('size').split('x'), - $width = $size[0], - $height = $size[1]; - - var item = { - src : $href, - w : $width, - h : $height - } - - if ($caption.length > 0) { - item.title = $.trim($titleText + $captionText); - } - - items.push(item); - }); - - // bind click event - $folioItems.each(function(i) { - - $(this).on('click', function(e) { - e.preventDefault(); - var options = { - index: i, - showHideOpacity: true - } - - // initialize PhotoSwipe - var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options); - lightBox.init(); - }); - - }); - }; - - - /* Stat Counter - * ------------------------------------------------------ */ - var clStatCount = function() { - - var statSection = $(".s-stats"), - stats = $(".stats__count"); - - statSection.waypoint({ - - handler: function(direction) { - - if (direction === "down") { - - stats.each(function () { - var $this = $(this); - - $({ Counter: 0 }).animate({ Counter: $this.text() }, { - duration: 4000, - easing: 'swing', - step: function (curValue) { - $this.text(Math.ceil(curValue)); - } - }); - }); - - } - - // trigger once only - this.destroy(); - - }, - - offset: "90%" - - }); - }; - - - /* Masonry - * ---------------------------------------------------- */ - var clMasonryFolio = function () { - - var containerBricks = $('.masonry'); - - containerBricks.imagesLoaded(function () { - containerBricks.masonry({ - itemSelector: '.masonry__brick', - resize: true - }); - }); - - // layout Masonry after each image loads - containerBricks.imagesLoaded().progress( function() { - containerBricks.masonry('layout'); - }); - }; - - - /* slick slider - * ------------------------------------------------------ */ - var clSlickSlider = function() { - - $('.testimonials__slider').slick({ - arrows: false, - dots: true, - infinite: true, - slidesToShow: 2, - slidesToScroll: 1, - pauseOnFocus: false, - autoplaySpeed: 1500, - responsive: [ - { - breakpoint: 900, - settings: { - slidesToShow: 1, - slidesToScroll: 1 - } - } - ] - }); - }; - - - /* Smooth Scrolling - * ------------------------------------------------------ */ - var clSmoothScroll = function() { - - $('.smoothscroll').on('click', function (e) { - var target = this.hash, - $target = $(target); - - e.preventDefault(); - e.stopPropagation(); - - $('html, body').stop().animate({ - 'scrollTop': $target.offset().top - }, cfg.scrollDuration, 'swing').promise().done(function () { - - // check if menu is open - if ($('body').hasClass('menu-is-open')) { - $('.header-menu-toggle').trigger('click'); - } - - window.location.hash = target; - }); - }); - - }; - - - /* Placeholder Plugin Settings - * ------------------------------------------------------ */ - var clPlaceholder = function() { - $('input, textarea, select').placeholder(); - }; - - - /* Alert Boxes - * ------------------------------------------------------ */ - var clAlertBoxes = function() { - - $('.alert-box').on('click', '.alert-box__close', function() { - $(this).parent().fadeOut(500); - }); - - }; - - - /* Animate On Scroll - * ------------------------------------------------------ */ - var clAOS = function() { - - AOS.init( { - offset: 200, - duration: 600, - easing: 'ease-in-sine', - delay: 300, - once: true, - disable: 'mobile' - }); - - }; - - - /* AjaxChimp - * ------------------------------------------------------ */ - var clAjaxChimp = function() { - - $('#mc-form').ajaxChimp({ - language: 'es', - url: cfg.mailChimpURL - }); - - // Mailchimp translation - // - // Defaults: - // 'submit': 'Submitting...', - // 0: 'We have sent you a confirmation email', - // 1: 'Please enter a value', - // 2: 'An email address must contain a single @', - // 3: 'The domain portion of the email address is invalid (the portion after the @: )', - // 4: 'The username portion of the email address is invalid (the portion before the @: )', - // 5: 'This email address looks fake or invalid. Please enter a real email address' - - $.ajaxChimp.translations.es = { - 'submit': 'Submitting...', - 0: ' We have sent you a confirmation email', - 1: ' You must enter a valid e-mail address.', - 2: ' E-mail address is not valid.', - 3: ' E-mail address is not valid.', - 4: ' E-mail address is not valid.', - 5: ' E-mail address is not valid.' - } - - }; - - - /* Back to Top - * ------------------------------------------------------ */ - var clBackToTop = function() { - - var pxShow = 500, // height on which the button will show - fadeInTime = 400, // how slow/fast you want the button to show - fadeOutTime = 400, // how slow/fast you want the button to hide - scrollSpeed = 300, // how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast' - goTopButton = $(".cl-go-top") - - // Show or hide the sticky footer button - $(window).on('scroll', function() { - if ($(window).scrollTop() >= pxShow) { - goTopButton.fadeIn(fadeInTime); - } else { - goTopButton.fadeOut(fadeOutTime); - } - }); - }; - - - /* Initialize - * ------------------------------------------------------ */ - (function clInit() { - - clPreloader(); - clMenuOnScrolldown(); - clOffCanvas(); - clPhotoswipe(); - clStatCount(); - clMasonryFolio(); - clSlickSlider(); - clSmoothScroll(); - clPlaceholder(); - clAlertBoxes(); - clAOS(); - clAjaxChimp(); - clBackToTop(); - - })(); - +/* =================================================================== + * Transcend - Main JS + * + * ------------------------------------------------------------------- */ + +(function($) { + + "use strict"; + + var cfg = { + scrollDuration : 800, // smoothscroll duration + mailChimpURL : 'https://facebook.us8.list-manage.com/subscribe/post?u=cdb7b577e41181934ed6a6a44&id=e6957d85dc' // mailchimp url + }, + + $WIN = $(window); + + // Add the User Agent to the + // will be used for IE10 detection (Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)) + var doc = document.documentElement; + doc.setAttribute('data-useragent', navigator.userAgent); + + + /* Preloader + * -------------------------------------------------- */ + var clPreloader = function() { + + $("html").addClass('cl-preload'); + + $WIN.on('load', function() { + + //force page scroll position to top at page refresh + // $('html, body').animate({ scrollTop: 0 }, 'normal'); + + // will first fade out the loading animation + $("#loader").fadeOut("slow", function() { + // will fade out the whole DIV that covers the website. + $("#preloader").delay(300).fadeOut("slow"); + }); + + // for hero content animations + $("html").removeClass('cl-preload'); + $("html").addClass('cl-loaded'); + + }); + }; + + + /* Menu on Scrolldown + * ------------------------------------------------------ */ + var clMenuOnScrolldown = function() { + + var menuTrigger = $('.header-menu-toggle'); + + $WIN.on('scroll', function() { + + if ($WIN.scrollTop() > 150) { + menuTrigger.addClass('opaque'); + } + else { + menuTrigger.removeClass('opaque'); + } + + }); + }; + + + /* OffCanvas Menu + * ------------------------------------------------------ */ + var clOffCanvas = function() { + + var menuTrigger = $('.header-menu-toggle'), + nav = $('.header-nav'), + closeButton = nav.find('.header-nav__close'), + siteBody = $('body'), + mainContents = $('section, footer'); + + // open-close menu by clicking on the menu icon + menuTrigger.on('click', function(e){ + e.preventDefault(); + siteBody.toggleClass('menu-is-open'); + }); + + // close menu by clicking the close button + closeButton.on('click', function(e){ + e.preventDefault(); + menuTrigger.trigger('click'); + }); + + // close menu clicking outside the menu itself + siteBody.on('click', function(e){ + if( !$(e.target).is('.header-nav, .header-nav__content, .header-menu-toggle, .header-menu-toggle span') ) { + siteBody.removeClass('menu-is-open'); + } + }); + + }; + + + /* photoswipe + * ----------------------------------------------------- */ + var clPhotoswipe = function() { + var items = [], + $pswp = $('.pswp')[0], + $folioItems = $('.item-folio'); + + // get items + $folioItems.each( function(i) { + + var $folio = $(this), + $thumbLink = $folio.find('.thumb-link'), + $title = $folio.find('.item-folio__title'), + $caption = $folio.find('.item-folio__caption'), + $titleText = '

' + $.trim($title.html()) + '

', + $captionText = $.trim($caption.html()), + $href = $thumbLink.attr('href'), + $size = $thumbLink.data('size').split('x'), + $width = $size[0], + $height = $size[1]; + + var item = { + src : $href, + w : $width, + h : $height + } + + if ($caption.length > 0) { + item.title = $.trim($titleText + $captionText); + } + + items.push(item); + }); + + // bind click event + $folioItems.each(function(i) { + + $(this).on('click', function(e) { + e.preventDefault(); + var options = { + index: i, + showHideOpacity: true + } + + // initialize PhotoSwipe + var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options); + lightBox.init(); + }); + + }); + }; + + + /* Stat Counter + * ------------------------------------------------------ */ + var clStatCount = function() { + + var statSection = $(".s-stats"), + stats = $(".stats__count"); + + statSection.waypoint({ + + handler: function(direction) { + + if (direction === "down") { + + stats.each(function () { + var $this = $(this); + + $({ Counter: 0 }).animate({ Counter: $this.text() }, { + duration: 4000, + easing: 'swing', + step: function (curValue) { + $this.text(Math.ceil(curValue)); + } + }); + }); + + } + + // trigger once only + this.destroy(); + + }, + + offset: "90%" + + }); + }; + + + /* Masonry + * ---------------------------------------------------- */ + var clMasonryFolio = function () { + + var containerBricks = $('.masonry'); + + containerBricks.imagesLoaded(function () { + containerBricks.masonry({ + itemSelector: '.masonry__brick', + resize: true + }); + }); + + // layout Masonry after each image loads + containerBricks.imagesLoaded().progress( function() { + containerBricks.masonry('layout'); + }); + }; + + + /* slick slider + * ------------------------------------------------------ */ + var clSlickSlider = function() { + + $('.testimonials__slider').slick({ + arrows: false, + dots: true, + infinite: true, + slidesToShow: 2, + slidesToScroll: 1, + pauseOnFocus: false, + autoplaySpeed: 1500, + responsive: [ + { + breakpoint: 900, + settings: { + slidesToShow: 1, + slidesToScroll: 1 + } + } + ] + }); + }; + + + /* Smooth Scrolling + * ------------------------------------------------------ */ + var clSmoothScroll = function() { + + $('.smoothscroll').on('click', function (e) { + var target = this.hash, + $target = $(target); + + e.preventDefault(); + e.stopPropagation(); + + $('html, body').stop().animate({ + 'scrollTop': $target.offset().top + }, cfg.scrollDuration, 'swing').promise().done(function () { + + // check if menu is open + if ($('body').hasClass('menu-is-open')) { + $('.header-menu-toggle').trigger('click'); + } + + window.location.hash = target; + }); + }); + + }; + + + /* Placeholder Plugin Settings + * ------------------------------------------------------ */ + var clPlaceholder = function() { + $('input, textarea, select').placeholder(); + }; + + + /* Alert Boxes + * ------------------------------------------------------ */ + var clAlertBoxes = function() { + + $('.alert-box').on('click', '.alert-box__close', function() { + $(this).parent().fadeOut(500); + }); + + }; + + + /* Animate On Scroll + * ------------------------------------------------------ */ + var clAOS = function() { + + AOS.init( { + offset: 200, + duration: 600, + easing: 'ease-in-sine', + delay: 300, + once: true, + disable: 'mobile' + }); + + }; + + + /* AjaxChimp + * ------------------------------------------------------ */ + var clAjaxChimp = function() { + + $('#mc-form').ajaxChimp({ + language: 'es', + url: cfg.mailChimpURL + }); + + // Mailchimp translation + // + // Defaults: + // 'submit': 'Submitting...', + // 0: 'We have sent you a confirmation email', + // 1: 'Please enter a value', + // 2: 'An email address must contain a single @', + // 3: 'The domain portion of the email address is invalid (the portion after the @: )', + // 4: 'The username portion of the email address is invalid (the portion before the @: )', + // 5: 'This email address looks fake or invalid. Please enter a real email address' + + $.ajaxChimp.translations.es = { + 'submit': 'Submitting...', + 0: ' We have sent you a confirmation email', + 1: ' You must enter a valid e-mail address.', + 2: ' E-mail address is not valid.', + 3: ' E-mail address is not valid.', + 4: ' E-mail address is not valid.', + 5: ' E-mail address is not valid.' + } + + }; + + + /* Back to Top + * ------------------------------------------------------ */ + var clBackToTop = function() { + + var pxShow = 500, // height on which the button will show + fadeInTime = 400, // how slow/fast you want the button to show + fadeOutTime = 400, // how slow/fast you want the button to hide + scrollSpeed = 300, // how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast' + goTopButton = $(".cl-go-top") + + // Show or hide the sticky footer button + $(window).on('scroll', function() { + if ($(window).scrollTop() >= pxShow) { + goTopButton.fadeIn(fadeInTime); + } else { + goTopButton.fadeOut(fadeOutTime); + } + }); + }; + + + /* Initialize + * ------------------------------------------------------ */ + (function clInit() { + + clPreloader(); + clMenuOnScrolldown(); + clOffCanvas(); + clPhotoswipe(); + clStatCount(); + clMasonryFolio(); + clSlickSlider(); + clSmoothScroll(); + clPlaceholder(); + clAlertBoxes(); + clAOS(); + clAjaxChimp(); + clBackToTop(); + + })(); + })(jQuery); \ No newline at end of file diff --git a/js/plugins.js b/js/plugins.js index 126c4ac..86fa620 100644 --- a/js/plugins.js +++ b/js/plugins.js @@ -1,153 +1,153 @@ -/** - * =================================================================== - * javascript plugins - * - * ------------------------------------------------------------------- - */ - -/*! -Mailchimp Ajax Submit -jQuery Plugin -Author: Siddharth Doshi - -Use: -=== -$('#form_id').ajaxchimp(options); - -- Form should have one element with attribute 'type=email' -- Form should have one label element with attribute 'for=email_input_id' (used to display error/success message) -- All options are optional. - -Options: -======= -options = { - language: 'en', - callback: callbackFunction, - url: 'http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f' -} - -Notes: -===== -To get the mailchimp JSONP url (undocumented), change 'post?' to 'post-json?' and add '&c=?' to the end. -For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f&c=?', -*/ -(function($){"use strict";$.ajaxChimp={responses:{"We have sent you a confirmation email":0,"Please enter a value":1,"An email address must contain a single @":2,"The domain portion of the email address is invalid (the portion after the @: )":3,"The username portion of the email address is invalid (the portion before the @: )":4,"This email address looks fake or invalid. Please enter a real email address":5},translations:{en:null},init:function(selector,options){$(selector).ajaxChimp(options)}};$.fn.ajaxChimp=function(options){$(this).each(function(i,elem){var form=$(elem);var email=form.find("input[type=email]");var label=form.find("label[for="+email.attr("id")+"]");var settings=$.extend({url:form.attr("action"),language:"en"},options);var url=settings.url.replace("/post?","/post-json?").concat("&c=?");form.attr("novalidate","true");email.attr("name","EMAIL");form.submit(function(){var msg;function successCallback(resp){if(resp.result==="success"){msg="We have sent you a confirmation email";label.removeClass("error").addClass("valid");email.removeClass("error").addClass("valid")}else{email.removeClass("valid").addClass("error");label.removeClass("valid").addClass("error");var index=-1;try{var parts=resp.msg.split(" - ",2);if(parts[1]===undefined){msg=resp.msg}else{var i=parseInt(parts[0],10);if(i.toString()===parts[0]){index=parts[0];msg=parts[1]}else{index=-1;msg=resp.msg}}}catch(e){index=-1;msg=resp.msg}}if(settings.language!=="en"&&$.ajaxChimp.responses[msg]!==undefined&&$.ajaxChimp.translations&&$.ajaxChimp.translations[settings.language]&&$.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]){msg=$.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]}label.html(msg);label.show(2e3);if(settings.callback){settings.callback(resp)}}var data={};var dataArray=form.serializeArray();$.each(dataArray,function(index,item){data[item.name]=item.value});$.ajax({url:url,data:data,success:successCallback,dataType:"jsonp",error:function(resp,text){console.log("mailchimp ajax submit error: "+text)}});var submitMsg="Submitting...";if(settings.language!=="en"&&$.ajaxChimp.translations&&$.ajaxChimp.translations[settings.language]&&$.ajaxChimp.translations[settings.language]["submit"]){submitMsg=$.ajaxChimp.translations[settings.language]["submit"]}label.html(submitMsg).show(2e3);return false})});return this}})(jQuery); - - -/* HTML5 Placeholder jQuery Plugin - v2.1.2 - * Copyright (c)2015 Mathias Bynens - * 2015-06-09 - */ -!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof module&&module.exports?require("jquery"):jQuery)}(function(a){function b(b){var c={},d=/^jQuery\d+$/;return a.each(b.attributes,function(a,b){b.specified&&!d.test(b.name)&&(c[b.name]=b.value)}),c}function c(b,c){var d=this,f=a(d);if(d.value==f.attr("placeholder")&&f.hasClass(m.customClass))if(f.data("placeholder-password")){if(f=f.hide().nextAll('input[type="password"]:first').show().attr("id",f.removeAttr("id").data("placeholder-id")),b===!0)return f[0].value=c;f.focus()}else d.value="",f.removeClass(m.customClass),d==e()&&d.select()}function d(){var d,e=this,f=a(e),g=this.id;if(""===e.value){if("password"===e.type){if(!f.data("placeholder-textinput")){try{d=f.clone().prop({type:"text"})}catch(h){d=a("").attr(a.extend(b(this),{type:"text"}))}d.removeAttr("name").data({"placeholder-password":f,"placeholder-id":g}).bind("focus.placeholder",c),f.data({"placeholder-textinput":d,"placeholder-id":g}).before(d)}f=f.removeAttr("id").hide().prevAll('input[type="text"]:first').attr("id",g).show()}f.addClass(m.customClass),f[0].value=f.attr("placeholder")}else f.removeClass(m.customClass)}function e(){try{return document.activeElement}catch(a){}}var f,g,h="[object OperaMini]"==Object.prototype.toString.call(window.operamini),i="placeholder"in document.createElement("input")&&!h,j="placeholder"in document.createElement("textarea")&&!h,k=a.valHooks,l=a.propHooks;if(i&&j)g=a.fn.placeholder=function(){return this},g.input=g.textarea=!0;else{var m={};g=a.fn.placeholder=function(b){var e={customClass:"placeholder"};m=a.extend({},e,b);var f=this;return f.filter((i?"textarea":":input")+"[placeholder]").not("."+m.customClass).bind({"focus.placeholder":c,"blur.placeholder":d}).data("placeholder-enabled",!0).trigger("blur.placeholder"),f},g.input=i,g.textarea=j,f={get:function(b){var c=a(b),d=c.data("placeholder-password");return d?d[0].value:c.data("placeholder-enabled")&&c.hasClass(m.customClass)?"":b.value},set:function(b,f){var g=a(b),h=g.data("placeholder-password");return h?h[0].value=f:g.data("placeholder-enabled")?(""===f?(b.value=f,b!=e()&&d.call(b)):g.hasClass(m.customClass)?c.call(b,!0,f)||(b.value=f):b.value=f,g):b.value=f}},i||(k.input=f,l.value=f),j||(k.textarea=f,l.value=f),a(function(){a(document).delegate("form","submit.placeholder",function(){var b=a("."+m.customClass,this).each(c);setTimeout(function(){b.each(d)},10)})}),a(window).bind("beforeunload.placeholder",function(){a("."+m.customClass).each(function(){this.value=""})})}}); - - -/*! -Waypoints - 4.0.0 -Copyright Ā© 2011-2015 Caleb Troughton -Licensed under the MIT license. -https://github.com/imakewebthings/waypoints/blog/master/licenses.txt -*/ -!function(){"use strict";function t(o){if(!o)throw new Error("No options passed to Waypoint constructor");if(!o.element)throw new Error("No element option passed to Waypoint constructor");if(!o.handler)throw new Error("No handler option passed to Waypoint constructor");this.key="waypoint-"+e,this.options=t.Adapter.extend({},t.defaults,o),this.element=this.options.element,this.adapter=new t.Adapter(this.element),this.callback=o.handler,this.axis=this.options.horizontal?"horizontal":"vertical",this.enabled=this.options.enabled,this.triggerPoint=null,this.group=t.Group.findOrCreate({name:this.options.group,axis:this.axis}),this.context=t.Context.findOrCreateByElement(this.options.context),t.offsetAliases[this.options.offset]&&(this.options.offset=t.offsetAliases[this.options.offset]),this.group.add(this),this.context.add(this),i[this.key]=this,e+=1}var e=0,i={};t.prototype.queueTrigger=function(t){this.group.queueTrigger(this,t)},t.prototype.trigger=function(t){this.enabled&&this.callback&&this.callback.apply(this,t)},t.prototype.destroy=function(){this.context.remove(this),this.group.remove(this),delete i[this.key]},t.prototype.disable=function(){return this.enabled=!1,this},t.prototype.enable=function(){return this.context.refresh(),this.enabled=!0,this},t.prototype.next=function(){return this.group.next(this)},t.prototype.previous=function(){return this.group.previous(this)},t.invokeAll=function(t){var e=[];for(var o in i)e.push(i[o]);for(var n=0,r=e.length;r>n;n++)e[n][t]()},t.destroyAll=function(){t.invokeAll("destroy")},t.disableAll=function(){t.invokeAll("disable")},t.enableAll=function(){t.invokeAll("enable")},t.refreshAll=function(){t.Context.refreshAll()},t.viewportHeight=function(){return window.innerHeight||document.documentElement.clientHeight},t.viewportWidth=function(){return document.documentElement.clientWidth},t.adapters=[],t.defaults={context:window,continuous:!0,enabled:!0,group:"default",horizontal:!1,offset:0},t.offsetAliases={"bottom-in-view":function(){return this.context.innerHeight()-this.adapter.outerHeight()},"right-in-view":function(){return this.context.innerWidth()-this.adapter.outerWidth()}},window.Waypoint=t}(),function(){"use strict";function t(t){window.setTimeout(t,1e3/60)}function e(t){this.element=t,this.Adapter=n.Adapter,this.adapter=new this.Adapter(t),this.key="waypoint-context-"+i,this.didScroll=!1,this.didResize=!1,this.oldScroll={x:this.adapter.scrollLeft(),y:this.adapter.scrollTop()},this.waypoints={vertical:{},horizontal:{}},t.waypointContextKey=this.key,o[t.waypointContextKey]=this,i+=1,this.createThrottledScrollHandler(),this.createThrottledResizeHandler()}var i=0,o={},n=window.Waypoint,r=window.onload;e.prototype.add=function(t){var e=t.options.horizontal?"horizontal":"vertical";this.waypoints[e][t.key]=t,this.refresh()},e.prototype.checkEmpty=function(){var t=this.Adapter.isEmptyObject(this.waypoints.horizontal),e=this.Adapter.isEmptyObject(this.waypoints.vertical);t&&e&&(this.adapter.off(".waypoints"),delete o[this.key])},e.prototype.createThrottledResizeHandler=function(){function t(){e.handleResize(),e.didResize=!1}var e=this;this.adapter.on("resize.waypoints",function(){e.didResize||(e.didResize=!0,n.requestAnimationFrame(t))})},e.prototype.createThrottledScrollHandler=function(){function t(){e.handleScroll(),e.didScroll=!1}var e=this;this.adapter.on("scroll.waypoints",function(){(!e.didScroll||n.isTouch)&&(e.didScroll=!0,n.requestAnimationFrame(t))})},e.prototype.handleResize=function(){n.Context.refreshAll()},e.prototype.handleScroll=function(){var t={},e={horizontal:{newScroll:this.adapter.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.adapter.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};for(var i in e){var o=e[i],n=o.newScroll>o.oldScroll,r=n?o.forward:o.backward;for(var s in this.waypoints[i]){var a=this.waypoints[i][s],l=o.oldScroll=a.triggerPoint,p=l&&h,u=!l&&!h;(p||u)&&(a.queueTrigger(r),t[a.group.id]=a.group)}}for(var c in t)t[c].flushTriggers();this.oldScroll={x:e.horizontal.newScroll,y:e.vertical.newScroll}},e.prototype.innerHeight=function(){return this.element==this.element.window?n.viewportHeight():this.adapter.innerHeight()},e.prototype.remove=function(t){delete this.waypoints[t.axis][t.key],this.checkEmpty()},e.prototype.innerWidth=function(){return this.element==this.element.window?n.viewportWidth():this.adapter.innerWidth()},e.prototype.destroy=function(){var t=[];for(var e in this.waypoints)for(var i in this.waypoints[e])t.push(this.waypoints[e][i]);for(var o=0,n=t.length;n>o;o++)t[o].destroy()},e.prototype.refresh=function(){var t,e=this.element==this.element.window,i=e?void 0:this.adapter.offset(),o={};this.handleScroll(),t={horizontal:{contextOffset:e?0:i.left,contextScroll:e?0:this.oldScroll.x,contextDimension:this.innerWidth(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:e?0:i.top,contextScroll:e?0:this.oldScroll.y,contextDimension:this.innerHeight(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};for(var r in t){var s=t[r];for(var a in this.waypoints[r]){var l,h,p,u,c,d=this.waypoints[r][a],f=d.options.offset,w=d.triggerPoint,y=0,g=null==w;d.element!==d.element.window&&(y=d.adapter.offset()[s.offsetProp]),"function"==typeof f?f=f.apply(d):"string"==typeof f&&(f=parseFloat(f),d.options.offset.indexOf("%")>-1&&(f=Math.ceil(s.contextDimension*f/100))),l=s.contextScroll-s.contextOffset,d.triggerPoint=y+l-f,h=w=s.oldScroll,u=h&&p,c=!h&&!p,!g&&u?(d.queueTrigger(s.backward),o[d.group.id]=d.group):!g&&c?(d.queueTrigger(s.forward),o[d.group.id]=d.group):g&&s.oldScroll>=d.triggerPoint&&(d.queueTrigger(s.forward),o[d.group.id]=d.group)}}return n.requestAnimationFrame(function(){for(var t in o)o[t].flushTriggers()}),this},e.findOrCreateByElement=function(t){return e.findByElement(t)||new e(t)},e.refreshAll=function(){for(var t in o)o[t].refresh()},e.findByElement=function(t){return o[t.waypointContextKey]},window.onload=function(){r&&r(),e.refreshAll()},n.requestAnimationFrame=function(e){var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||t;i.call(window,e)},n.Context=e}(),function(){"use strict";function t(t,e){return t.triggerPoint-e.triggerPoint}function e(t,e){return e.triggerPoint-t.triggerPoint}function i(t){this.name=t.name,this.axis=t.axis,this.id=this.name+"-"+this.axis,this.waypoints=[],this.clearTriggerQueues(),o[this.axis][this.name]=this}var o={vertical:{},horizontal:{}},n=window.Waypoint;i.prototype.add=function(t){this.waypoints.push(t)},i.prototype.clearTriggerQueues=function(){this.triggerQueues={up:[],down:[],left:[],right:[]}},i.prototype.flushTriggers=function(){for(var i in this.triggerQueues){var o=this.triggerQueues[i],n="up"===i||"left"===i;o.sort(n?e:t);for(var r=0,s=o.length;s>r;r+=1){var a=o[r];(a.options.continuous||r===o.length-1)&&a.trigger([i])}}this.clearTriggerQueues()},i.prototype.next=function(e){this.waypoints.sort(t);var i=n.Adapter.inArray(e,this.waypoints),o=i===this.waypoints.length-1;return o?null:this.waypoints[i+1]},i.prototype.previous=function(e){this.waypoints.sort(t);var i=n.Adapter.inArray(e,this.waypoints);return i?this.waypoints[i-1]:null},i.prototype.queueTrigger=function(t,e){this.triggerQueues[e].push(t)},i.prototype.remove=function(t){var e=n.Adapter.inArray(t,this.waypoints);e>-1&&this.waypoints.splice(e,1)},i.prototype.first=function(){return this.waypoints[0]},i.prototype.last=function(){return this.waypoints[this.waypoints.length-1]},i.findOrCreate=function(t){return o[t.axis][t.name]||new i(t)},n.Group=i}(),function(){"use strict";function t(t){this.$element=e(t)}var e=window.jQuery,i=window.Waypoint;e.each(["innerHeight","innerWidth","off","offset","on","outerHeight","outerWidth","scrollLeft","scrollTop"],function(e,i){t.prototype[i]=function(){var t=Array.prototype.slice.call(arguments);return this.$element[i].apply(this.$element,t)}}),e.each(["extend","inArray","isEmptyObject"],function(i,o){t[o]=e[o]}),i.adapters.push({name:"jquery",Adapter:t}),i.Adapter=t}(),function(){"use strict";function t(t){return function(){var i=[],o=arguments[0];return t.isFunction(arguments[0])&&(o=t.extend({},arguments[1]),o.handler=arguments[0]),this.each(function(){var n=t.extend({},o,{element:this});"string"==typeof n.context&&(n.context=t(this).closest(n.context)[0]),i.push(new e(n))}),i}}var e=window.Waypoint;window.jQuery&&(window.jQuery.fn.waypoint=t(window.jQuery)),window.Zepto&&(window.Zepto.fn.waypoint=t(window.Zepto))}(); - - -/*! - * parallax.js v1.4.2 (http://pixelcog.github.io/parallax.js/) - * @copyright 2016 PixelCog, Inc. - * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE) - */ -!function(t,i,e,s){function o(i,e){var h=this;"object"==typeof e&&(delete e.refresh,delete e.render,t.extend(this,e)),this.$element=t(i),!this.imageSrc&&this.$element.is("img")&&(this.imageSrc=this.$element.attr("src"));var r=(this.position+"").toLowerCase().match(/\S+/g)||[];if(r.length<1&&r.push("center"),1==r.length&&r.push(r[0]),("top"==r[0]||"bottom"==r[0]||"left"==r[1]||"right"==r[1])&&(r=[r[1],r[0]]),this.positionX!=s&&(r[0]=this.positionX.toLowerCase()),this.positionY!=s&&(r[1]=this.positionY.toLowerCase()),h.positionX=r[0],h.positionY=r[1],"left"!=this.positionX&&"right"!=this.positionX&&(this.positionX=isNaN(parseInt(this.positionX))?"center":parseInt(this.positionX)),"top"!=this.positionY&&"bottom"!=this.positionY&&(this.positionY=isNaN(parseInt(this.positionY))?"center":parseInt(this.positionY)),this.position=this.positionX+(isNaN(this.positionX)?"":"px")+" "+this.positionY+(isNaN(this.positionY)?"":"px"),navigator.userAgent.match(/(iPod|iPhone|iPad)/))return this.imageSrc&&this.iosFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this;if(navigator.userAgent.match(/(Android)/))return this.imageSrc&&this.androidFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this;this.$mirror=t("
").prependTo("body");var a=this.$element.find(">.parallax-slider"),n=!1;0==a.length?this.$slider=t("").prependTo(this.$mirror):(this.$slider=a.prependTo(this.$mirror),n=!0),this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"}),this.$slider.addClass("parallax-slider").one("load",function(){h.naturalHeight&&h.naturalWidth||(h.naturalHeight=this.naturalHeight||this.height||1,h.naturalWidth=this.naturalWidth||this.width||1),h.aspectRatio=h.naturalWidth/h.naturalHeight,o.isSetup||o.setup(),o.sliders.push(h),o.isFresh=!1,o.requestRender()}),n||(this.$slider[0].src=this.imageSrc),(this.naturalHeight&&this.naturalWidth||this.$slider[0].complete||a.length>0)&&this.$slider.trigger("load")}function h(s){return this.each(function(){var h=t(this),r="object"==typeof s&&s;this==i||this==e||h.is("body")?o.configure(r):h.data("px.parallax")?"object"==typeof s&&t.extend(h.data("px.parallax"),r):(r=t.extend({},h.data(),r),h.data("px.parallax",new o(this,r))),"string"==typeof s&&("destroy"==s?o.destroy(this):o[s]())})}!function(){for(var t=0,e=["ms","moz","webkit","o"],s=0;s=this.boxWidth){this.imageWidth=h*this.aspectRatio|0,this.imageHeight=h,this.offsetBaseTop=r;var a=this.imageWidth-this.boxWidth;this.offsetLeft="left"==this.positionX?0:"right"==this.positionX?-a:isNaN(this.positionX)?-a/2|0:Math.max(this.positionX,-a)}else{this.imageWidth=this.boxWidth,this.imageHeight=this.boxWidth/this.aspectRatio|0,this.offsetLeft=0;var a=this.imageHeight-h;this.offsetBaseTop="top"==this.positionY?r:"bottom"==this.positionY?r-a:isNaN(this.positionY)?r-a/2|0:r+Math.max(this.positionY,-a)}},render:function(){var t=o.scrollTop,i=o.scrollLeft,e=this.overScrollFix?o.overScroll:0,s=t+o.winHeight;this.boxOffsetBottom>t&&this.boxOffsetTop<=s?(this.visibility="visible",this.mirrorTop=this.boxOffsetTop-t,this.mirrorLeft=this.boxOffsetLeft-i,this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed)):this.visibility="hidden",this.$mirror.css({transform:"translate3d(0px, 0px, 0px)",visibility:this.visibility,top:this.mirrorTop-e,left:this.mirrorLeft,height:this.boxHeight,width:this.boxWidth}),this.$slider.css({transform:"translate3d(0px, 0px, 0px)",position:"absolute",top:this.offsetTop,left:this.offsetLeft,height:this.imageHeight,width:this.imageWidth,maxWidth:"none"})}}),t.extend(o,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:!1,isFresh:!1,isBusy:!1,setup:function(){if(!this.isReady){var s=t(e),h=t(i),r=function(){o.winHeight=h.height(),o.winWidth=h.width(),o.docHeight=s.height(),o.docWidth=s.width()},a=function(){var t=h.scrollTop(),i=o.docHeight-o.winHeight,e=o.docWidth-o.winWidth;o.scrollTop=Math.max(0,Math.min(i,t)),o.scrollLeft=Math.max(0,Math.min(e,h.scrollLeft())),o.overScroll=Math.max(t-i,Math.min(t,0))};h.on("resize.px.parallax load.px.parallax",function(){r(),o.isFresh=!1,o.requestRender()}).on("scroll.px.parallax load.px.parallax",function(){a(),o.requestRender()}),r(),a(),this.isReady=!0}},configure:function(i){"object"==typeof i&&(delete i.refresh,delete i.render,t.extend(this.prototype,i))},refresh:function(){t.each(this.sliders,function(){this.refresh()}),this.isFresh=!0},render:function(){this.isFresh||this.refresh(),t.each(this.sliders,function(){this.render()})},requestRender:function(){var t=this;this.isBusy||(this.isBusy=!0,i.requestAnimationFrame(function(){t.render(),t.isBusy=!1}))},destroy:function(e){var s,h=t(e).data("px.parallax");for(h.$mirror.remove(),s=0;se;e++){var i=h[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);r.isBoxSizeOuter=s=200==t(o.width),i.removeChild(e)}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;u>l;l++){var c=h[l],f=r[c],m=parseFloat(f);a[c]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,y=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,z=a.borderTopWidth+a.borderBottomWidth,E=d&&s,b=t(r.width);b!==!1&&(a.width=b+(E?0:p+_));var x=t(r.height);return x!==!1&&(a.height=x+(E?0:g+z)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(g+z),a.outerWidth=a.width+y,a.outerHeight=a.height+v,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t)},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=!1;return r}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=window.Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;is?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1)},n.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},n._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",r=this[o](n,t),s={x:this.columnWidth*r.col,y:r.y},a=r.y+t.size.outerHeight,h=n+r.col,u=r.col;h>u;u++)this.colYs[u]=a;return s},n._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return{col:e.indexOf(i),y:i}},n._getTopColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++)e[n]=this._getColGroupY(n,t);return e},n._getColGroupY=function(t,e){if(2>e)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},n._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols,n=t>1&&i+t>this.cols;i=n?0:i;var o=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=o?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},n._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;h>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l])},n._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},n._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},n.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i}); - -/*! - * imagesLoaded PACKAGED v3.2.0 - * JavaScript is all like "You images are done yet or what?" - * MIT License - */ -(function(){"use strict";function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,s=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;tPrevious',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(b,c){return a('',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(b,c){return a(' - -
-
-
-
-
-
-
-

-
12:00
-
Monday, Nov 2
-
- - - - \ No newline at end of file + + + + + + + + Theme Clock + + + + + + + +
+
+
+
+
+
+
+
Made with ā¤ļø by Infotech Programmer.

+
+
+
+ + + + diff --git a/pp10_/script.js b/pp10_/script.js index 9024b9f..3abe5ed 100644 --- a/pp10_/script.js +++ b/pp10_/script.js @@ -1,49 +1,49 @@ -const hourEl = document.querySelector('.hour'); -const minuteEl = document.querySelector('.minute'); -const secondEl = document.querySelector('.second'); -const timeEl = document.querySelector('.time'); -const dateEl = document.querySelector('.date'); -const toggle = document.querySelector('.toggle'); - -const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; - -const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"]; - -toggle.addEventListener('click', (e) => { - const html = document.querySelector('html') - if(html.classList.contains('dark')) { - html.classList.remove('dark') - e.target.innerHTML = 'Dark Mode' - } else { - html.classList.add('dark') - e.target.innerHTML = 'Light Mode' - } -}) - -function setTime() { - const time = new Date(); - const month = time.getMonth() - const day = time.getDay() - const date = time.getDate() - const hours = time.getHours() - const hoursForClock = hours >= 13 ? hours % 12 : hours; - const minutes = time.getMinutes() - const seconds = time.getSeconds() - const ampm = hours >= 12 ? 'PM' : 'AM' - - hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 11, 0, 360)}deg)` - minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 59, 0, 360)}deg)` - secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 59, 0, 360)}deg)` - - timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}` - dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}` -} - -// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers -const scale = (num, in_min, in_max, out_min, out_max) => { - return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; -} - -setTime() - +const hourEl = document.querySelector('.hour'); +const minuteEl = document.querySelector('.minute'); +const secondEl = document.querySelector('.second'); +const timeEl = document.querySelector('.time'); +const dateEl = document.querySelector('.date'); +const toggle = document.querySelector('.toggle'); + +const days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; + +const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"]; + +toggle.addEventListener('click', (e) => { + const html = document.querySelector('html') + if(html.classList.contains('dark')) { + html.classList.remove('dark') + e.target.innerHTML = 'Dark Mode' + } else { + html.classList.add('dark') + e.target.innerHTML = 'Light Mode' + } +}) + +function setTime() { + const time = new Date(); + const month = time.getMonth() + const day = time.getDay() + const date = time.getDate() + const hours = time.getHours() + const hoursForClock = hours >= 13 ? hours % 12 : hours; + const minutes = time.getMinutes() + const seconds = time.getSeconds() + const ampm = hours >= 12 ? 'PM' : 'AM' + + hourEl.style.transform = `translate(-50%, -100%) rotate(${scale(hoursForClock, 0, 11, 0, 360)}deg)` + minuteEl.style.transform = `translate(-50%, -100%) rotate(${scale(minutes, 0, 59, 0, 360)}deg)` + secondEl.style.transform = `translate(-50%, -100%) rotate(${scale(seconds, 0, 59, 0, 360)}deg)` + + timeEl.innerHTML = `${hoursForClock}:${minutes < 10 ? `0${minutes}` : minutes} ${ampm}` + dateEl.innerHTML = `${days[day]}, ${months[month]} ${date}` +} + +// StackOverflow https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers +const scale = (num, in_min, in_max, out_min, out_max) => { + return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; +} + +setTime() + setInterval(setTime, 1000) \ No newline at end of file diff --git a/pp10_/style.css b/pp10_/style.css index 131a422..5764a48 100644 --- a/pp10_/style.css +++ b/pp10_/style.css @@ -1,139 +1,145 @@ -* { - box-sizing: border-box; -} - -:root { - --primary-color: #000; - --secondary-color: #fff; -} - -html.dark { - --primary-color: #fff; - --secondary-color: #333; -} - -html { - transition: all 0.5s ease-in; -} - -html.dark { - background-color: #111; - color: var(--primary-color); -} - -body { - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.toggle { - cursor: pointer; - background-color: var(--primary-color); - color: var(--secondary-color); - border: 0; - border-radius: 4px; - padding: 8px 12px; - position: absolute; - top: 100px; -} - -.toggle:focus { - outline: none; -} - -.clock-container { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; -} - -.clock { - position: relative; - width: 200px; - height: 200px; -} - -.border { - border: solid; - border-color: rgb(63, 63, 63); - border-radius: 1000px; -} - -.needle { - background-color: var(--primary-color); - position: absolute; - top: 50%; - left: 50%; - height: 65px; - width: 3px; - transform-origin: bottom center; - transition: all 0.5s ease-in; -} - -.needle.hour { - transform: translate(-50%, -100%) rotate(0deg); -} - -.needle.minute { - transform: translate(-50%, -100%) rotate(0deg); - height: 85px; -} - -.needle.second { - transform: translate(-50%, -100%) rotate(0deg); - height: 95px; - background-color: #e74c3c; -} - -.center-point { - background-color: #e74c3c; - width: 10px; - height: 10px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; -} - -.center-point::after { - content: ''; - background-color: var(--primary-color); - width: 5px; - height: 5px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; -} - -.time { - font-size: 60px; -} - -.date { - color: #aaa; - font-size: 15px; - letter-spacing: 0.3px; - text-transform: uppercase; -} - -.date .circle { - background-color: var(--primary-color); - color: var(--secondary-color); - border-radius: 50%; - height: 16px; - width: 16px; - display: inline-flex; - align-items: center; - justify-content: center; - line-height: 16px; - transition: all 0.5s ease-in; - font-size: 12px; +* { + box-sizing: border-box; +} + +:root { + --primary-color: #000; + --secondary-color: #fff; +} + +html.dark { + --primary-color: #fff; + --secondary-color: #333; +} + +html { + transition: all 0.5s ease-in; +} + +html.dark { + background-color: #111; + color: var(--primary-color); +} + +body { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.header { + display: flex; + align-items:center; + justify-content: end; +} + +.toggle { + cursor: pointer; + background-color: var(--primary-color); + color: var(--secondary-color); + border: 0; + border-radius: 4px; + padding: 8px 12px; + position: absolute; + top: 100px; +} + +.toggle:focus { + outline: none; +} + +.clock-container { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.clock { + position: relative; + width: 200px; + height: 200px; +} + +.border { + border: solid; + border-color: rgb(63, 63, 63); + border-radius: 1000px; +} + +.needle { + background-color: var(--primary-color); + position: absolute; + top: 50%; + left: 50%; + height: 65px; + width: 3px; + transform-origin: bottom center; + transition: all 0.5s ease-in; +} + +.needle.hour { + transform: translate(-50%, -100%) rotate(0deg); +} + +.needle.minute { + transform: translate(-50%, -100%) rotate(0deg); + height: 85px; +} + +.needle.second { + transform: translate(-50%, -100%) rotate(0deg); + height: 95px; + background-color: #e74c3c; +} + +.center-point { + background-color: #e74c3c; + width: 10px; + height: 10px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; +} + +.center-point::after { + content: ''; + background-color: var(--primary-color); + width: 5px; + height: 5px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; +} + +.time { + font-size: 60px; +} + +.date { + color: #aaa; + font-size: 15px; + letter-spacing: 0.3px; + text-transform: uppercase; +} + +.date .circle { + background-color: var(--primary-color); + color: var(--secondary-color); + border-radius: 50%; + height: 16px; + width: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 16px; + transition: all 0.5s ease-in; + font-size: 12px; } \ No newline at end of file diff --git a/pp12_/css/styles.css b/pp11_/css/styles.css similarity index 94% rename from pp12_/css/styles.css rename to pp11_/css/styles.css index f0bbe41..e537ee9 100644 --- a/pp12_/css/styles.css +++ b/pp11_/css/styles.css @@ -1,131 +1,131 @@ -body{ - color: #282b36; - margin: 0; - text-align:center; - font-family: 'Merriweather', serif; - -} - -h1{ - margin: 10px auto 20px auto; - font-size: 5.625rem; /* font-size: 100% = 16px = 1em*/ - color: #66BFBF; -} - -h2{ - font-weight:normal; - font-size: 2rem; /* font-size: 100% = 16px = 1em*/ - margin-top: 0; - color: #66BFBF; -} - -h3{ - color: #11999E; -} - -a{ - color: #04879e; - margin: auto 15px; -} - -a:hover{ - color: #29263d; -} - -p{ - line-height: 2; -} - -hr{ - border: dotted #c1c9c9; - border-bottom: none; - width: 4%; - margin: 50px auto; -} - -#itp{ - font-family: 'Sacramento', cursive; -} - -.intro{ - width:50%; - margin: auto auto 20px auto; -} - -.top-container{ - position: relative; - padding-top: 100px; - background-color: #dcfaf4; - -} - -.logo{ - margin:50px auto 10px auto -} - -.skill-row{ - width: 50%; - margin: 50px auto 100px auto; - text-align: justify; -} - -.copyright{ - color: #ffffffc4; -} - -.circular{ - border-radius: 100%; - width: 25%; - float:left; - margin-right: 30px; -} - -.bottom-container{ - background-color: #66BFBF; - padding: 20px 0; -} - -.top-cloud{ - position: absolute; - right: 170px; - top:50px -} -.bottom-cloud{ - position: absolute; - left: 170px; - bottom:300px -} - -.contact-msg{ - width: 40%; - margin :30px auto 40px; -} - - -.btn { - background: #45afed; - background-image: -webkit-linear-gradient(top, #45afed, #0b8fd6); - background-image: -moz-linear-gradient(top, #45afed, #0b8fd6); - background-image: -ms-linear-gradient(top, #45afed, #0b8fd6); - background-image: -o-linear-gradient(top, #45afed, #0b8fd6); - background-image: linear-gradient(to bottom, #45afed, #0b8fd6); - -webkit-border-radius: 7; - -moz-border-radius: 7; - border-radius: 7px; - font-family: Arial; - color: #ffffff; - font-size: 20px; - padding: 10px 20px 10px 20px; - border: solid #2a8dc7 1px; - text-decoration: none; - } - - .btn:hover { - background: #4979eb; - background-image: -webkit-linear-gradient(top, #4979eb, #604ae0); - background-image: -moz-linear-gradient(top, #4979eb, #604ae0); - background-image: -ms-linear-gradient(top, #4979eb, #604ae0); - background-image: -o-linear-gradient(top, #4979eb, #604ae0); - background-image: linear-gradient(to bottom, #4979eb, #604ae0); - text-decoration: none; +body{ + color: #282b36; + margin: 0; + text-align:center; + font-family: 'Merriweather', serif; + +} + +h1{ + margin: 10px auto 20px auto; + font-size: 5.625rem; /* font-size: 100% = 16px = 1em*/ + color: #66BFBF; +} + +h2{ + font-weight:normal; + font-size: 2rem; /* font-size: 100% = 16px = 1em*/ + margin-top: 0; + color: #66BFBF; +} + +h3{ + color: #11999E; +} + +a{ + color: #04879e; + margin: auto 15px; +} + +a:hover{ + color: #29263d; +} + +p{ + line-height: 2; +} + +hr{ + border: dotted #c1c9c9; + border-bottom: none; + width: 4%; + margin: 50px auto; +} + +#itp{ + font-family: 'Sacramento', cursive; +} + +.intro{ + width:50%; + margin: auto auto 20px auto; +} + +.top-container{ + position: relative; + padding-top: 100px; + background-color: #dcfaf4; + +} + +.logo{ + margin:50px auto 10px auto +} + +.skill-row{ + width: 50%; + margin: 50px auto 100px auto; + text-align: justify; +} + +.copyright{ + color: #ffffffc4; +} + +.circular{ + border-radius: 100%; + width: 25%; + float:left; + margin-right: 30px; +} + +.bottom-container{ + background-color: #66BFBF; + padding: 20px 0; +} + +.top-cloud{ + position: absolute; + right: 170px; + top:50px +} +.bottom-cloud{ + position: absolute; + left: 170px; + bottom:300px +} + +.contact-msg{ + width: 40%; + margin :30px auto 40px; +} + + +.btn { + background: #45afed; + background-image: -webkit-linear-gradient(top, #45afed, #0b8fd6); + background-image: -moz-linear-gradient(top, #45afed, #0b8fd6); + background-image: -ms-linear-gradient(top, #45afed, #0b8fd6); + background-image: -o-linear-gradient(top, #45afed, #0b8fd6); + background-image: linear-gradient(to bottom, #45afed, #0b8fd6); + -webkit-border-radius: 7; + -moz-border-radius: 7; + border-radius: 7px; + font-family: Arial; + color: #ffffff; + font-size: 20px; + padding: 10px 20px 10px 20px; + border: solid #2a8dc7 1px; + text-decoration: none; + } + + .btn:hover { + background: #4979eb; + background-image: -webkit-linear-gradient(top, #4979eb, #604ae0); + background-image: -moz-linear-gradient(top, #4979eb, #604ae0); + background-image: -ms-linear-gradient(top, #4979eb, #604ae0); + background-image: -o-linear-gradient(top, #4979eb, #604ae0); + background-image: linear-gradient(to bottom, #4979eb, #604ae0); + text-decoration: none; } \ No newline at end of file diff --git a/pp11_/favicon.ico b/pp11_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp11_/favicon.ico differ diff --git a/pp11_/images/My Logo.png b/pp11_/images/My Logo.png new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp11_/images/My Logo.png differ diff --git a/pp12_/images/chillies.png b/pp11_/images/chillies.png similarity index 100% rename from pp12_/images/chillies.png rename to pp11_/images/chillies.png diff --git a/pp12_/images/cloud.png b/pp11_/images/cloud.png similarity index 100% rename from pp12_/images/cloud.png rename to pp11_/images/cloud.png diff --git a/pp12_/images/computer.png b/pp11_/images/computer.png similarity index 100% rename from pp12_/images/computer.png rename to pp11_/images/computer.png diff --git a/pp12_/images/mountain.png b/pp11_/images/mountain.png similarity index 100% rename from pp12_/images/mountain.png rename to pp11_/images/mountain.png diff --git a/pp11_/index.html b/pp11_/index.html index d36a909..5e7a8db 100644 --- a/pp11_/index.html +++ b/pp11_/index.html @@ -1,22 +1,60 @@ - - - - - - - - Sound Board - - -

LETS LISTEN SOME SOUNDS

- - - - - - - -
- - - + + + + + + + + + + + Infotech Programmer + + +
+ cloud-img +

Infotech Programmer

+

a programmer

+ cloud-img + mountain-img +
+
+
+ +

Hello.

+

I am a Web Developer. I' m founder of website and Admin of page Infotech Programmer. I šŸ’– making websites šŸ‘Øā€šŸ’» and Instagram posts

+
+
+
+

My Skills.

+
+ Website Creation +

Web Development

+

I am a web developer passionate about making Frontend websites using HTML, CSS, Javascript, Bootstrap, Wordpress etc and Backend websites using PHP/MySql. In coming years I will start making websites using ReactJS and NodeJS.

+
+
+ Content Creation +

Content Creation

+

I am a content creator on Instagram. I post educational posts related to Programming, Technology and IT related content. I also have YouTube Channel must check those useful videos.

+
+
+
+
+

Get In Touch

+

Make your idea to a better product

+

If you want a nice and attractive website for your business then contact me.

+ CONTACT ME +
+
+


+ +
+ LinkedIn + Twitter + Website + +
+ + + + \ No newline at end of file diff --git a/pp11_/style.css b/pp11_/style.css deleted file mode 100644 index 478fc70..0000000 --- a/pp11_/style.css +++ /dev/null @@ -1,37 +0,0 @@ -body{ - background-color: rgb(48, 129, 250); - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - text-align: center; - height: 100vh; - overflow: hidden; - margin: 0; -} - -.btn { - background-color: rgb(45, 80, 233); - border-radius: 5px; - border: none; - color: #fff; - margin: 1rem; - padding: 1.5rem 3rem; - font-size: inherit; -} - -.btn:hover { - opacity: 0.4; - transition: 0.4s; - border: solid #fff; - border-radius: 20px; -} - -.btn:active { - transform: scale(0.50); - transition: 0.4s; -} - -.btn:focus { - outline: none; -} \ No newline at end of file diff --git a/pp12_/index.html b/pp12_/index.html index 361d743..a08d1aa 100644 --- a/pp12_/index.html +++ b/pp12_/index.html @@ -1,60 +1,22 @@ - - - - - - - - - - - Infotech Programmer - - -
- cloud-img -

Infotech Programmer

-

a programmer

- cloud-img - mountain-img -
-
-
- -

Hello.

-

I am a Web Developer. I' m founder of website and Admin of page Infotech Programmer. I šŸ’– making websites šŸ‘Øā€šŸ’» and Instagram posts

-
-
-
-

My Skills.

-
- Website Creation -

Web Development

-

I am a web developer passionate about making Frontend websites using HTML, CSS, Javascript, Bootstrap, Wordpress etc and Backend websites using PHP/MySql. In coming years I will start making websites using ReactJS and NodeJS.

-
-
- Content Creation -

Content Creation

-

I am a content creator on Instagram. I post educational posts related to Programming, Technology and IT related content. I also have YouTube Channel must check those useful videos.

-
-
-
-
-

Get In Touch

-

Make your idea to a better product

-

If you want a nice and attractive website for your business then contact me.

- CONTACT ME -
-
-


- -
- LinkedIn - Twitter - Website - -
- - - - \ No newline at end of file + + + + + + + + Drawing App + + + +
+ + 1 + + + +
+ Made with ā¤ļø by Infotech Programmer. + + + \ No newline at end of file diff --git a/pp12_/script.js b/pp12_/script.js new file mode 100644 index 0000000..ee8377d --- /dev/null +++ b/pp12_/script.js @@ -0,0 +1,86 @@ +const canvas = document.getElementById('canvas'); +const increaseBtn = document.getElementById('increase'); +const decreaseBtn = document.getElementById('decrease'); +const sizeEL = document.getElementById('size'); +const colorEl = document.getElementById('color'); +const clearEl = document.getElementById('clear'); + +const ctx = canvas.getContext('2d'); + +let size = 1 +let isPressed = false +colorEl.value = 'black' +let color = colorEl.value +let x +let y + +canvas.addEventListener('mousedown', (e) => { + isPressed = true + + x = e.offsetX + y = e.offsetY +}) + +document.addEventListener('mouseup', (e) => { + isPressed = false + + x = undefined + y = undefined +}) + +canvas.addEventListener('mousemove', (e) => { + if(isPressed) { + const x2 = e.offsetX + const y2 = e.offsetY + + drawCircle(x2, y2) + drawLine(x, y, x2, y2) + + x = x2 + y = y2 + } +}) + +function drawCircle(x, y) { + ctx.beginPath(); + ctx.arc(x, y, size, 0, Math.PI * 2) + ctx.fillStyle = color + ctx.fill() +} + +function drawLine(x1, y1, x2, y2) { + ctx.beginPath() + ctx.moveTo(x1, y1) + ctx.lineTo(x2, y2) + ctx.strokeStyle = color + ctx.lineWidth = size * 2 + ctx.stroke() +} + +function updateSizeOnScreen() { + sizeEL.innerText = size +} + +increaseBtn.addEventListener('click', () => { + size += 1 + + if(size > 50) { + size = 50 + } + + updateSizeOnScreen() +}) + +decreaseBtn.addEventListener('click', () => { + size -= 1 + + if(size < 1) { + size = 1 + } + + updateSizeOnScreen() +}) + +colorEl.addEventListener('change', (e) => color = e.target.value) + +clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height)) \ No newline at end of file diff --git a/pp12_/style.css b/pp12_/style.css new file mode 100644 index 0000000..c3a23ec --- /dev/null +++ b/pp12_/style.css @@ -0,0 +1,60 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #f5f5f5; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +canvas { + background-color: white; + border: 3px solid #080b20; + border-bottom: 1px solid; +} + +.toolbox { + background-color: #cdd2f7; + border: 2px solid; + display: flex; + width: 1206px; + padding: 0.50rem; +} + +.toolbox > *{ + background-color: white; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 2rem; + height: 40px; + width: 40px; + margin: 0.25rem; + padding: 0.25rem; + cursor: pointer; +} + + +.toolbox > *:last-child { + margin-left: auto; +} + +@media (max-width: 1200px) { + + canvas { + height: 80%; + width: 95%; + } + + .toolbox { + width: 95%; + } + +} \ No newline at end of file diff --git a/pp1_/dicee.html b/pp1_/dicee.html index 525421b..7064010 100644 --- a/pp1_/dicee.html +++ b/pp1_/dicee.html @@ -22,6 +22,11 @@

Refresh Me

+
+ + + +
@@ -29,6 +34,5 @@

Refresh Me

www šŸŽ² infotechprogrammer šŸŽ² com -
Refresh Website to get result again (Play again)
diff --git a/pp1_/favicon.ico b/pp1_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp1_/favicon.ico differ diff --git a/pp1_/index.js b/pp1_/index.js index 43788e1..c5ca4b8 100644 --- a/pp1_/index.js +++ b/pp1_/index.js @@ -1,28 +1,28 @@ -var randomNumber1 = Math.floor(Math.random() * 6) + 1; - -var randomDiceImage1 = "images/dice"+ randomNumber1 +".png"; - -var image1 = document.querySelectorAll("img")[0]; - -image1.setAttribute("src",randomDiceImage1); - -var randomNumber2 = Math.floor(Math.random() * 6) + 1; - -var randomDiceImage2 = "images/dice" + randomNumber2 + ".png"; - -var image2 = document.querySelectorAll("img")[1]; - -image2.setAttribute("src",randomDiceImage2); - -if(randomNumber1 > randomNumber2) -{ - document.querySelector("h1").innerHTML = "Player-1 WinsšŸŽ"; -} -else if(randomNumber1 < randomNumber2) -{ - document.querySelector("h1").innerHTML = "Player-2 WinsšŸŽ"; -} -else -{ - document.querySelector("h1").innerHTML = "DrawšŸ™‚"; +var randomNumber1 = Math.floor(Math.random() * 6) + 1; + +var randomDiceImage1 = "images/dice"+ randomNumber1 +".png"; + +var image1 = document.querySelectorAll("img")[0]; + +image1.setAttribute("src",randomDiceImage1); + +var randomNumber2 = Math.floor(Math.random() * 6) + 1; + +var randomDiceImage2 = "images/dice" + randomNumber2 + ".png"; + +var image2 = document.querySelectorAll("img")[1]; + +image2.setAttribute("src",randomDiceImage2); + +if(randomNumber1 > randomNumber2) +{ + document.querySelector("h1").innerHTML = "Player-1 WinsšŸŽ"; +} +else if(randomNumber1 < randomNumber2) +{ + document.querySelector("h1").innerHTML = "Player-2 WinsšŸŽ"; +} +else +{ + document.querySelector("h1").innerHTML = "DrawšŸ™‚"; } \ No newline at end of file diff --git a/pp1_/styles.css b/pp1_/styles.css index c11379a..4aca805 100644 --- a/pp1_/styles.css +++ b/pp1_/styles.css @@ -10,6 +10,25 @@ } +.btn { + font-size: 1rem; + font-family: 'Ariel'; + color: #1101f0; + border: 1px solid #03002e; + background-color: #1101f0; +} + +.btn:hover { + background-color: rgb(8, 8, 17); + border: 1px solid black; + color: white; +} + +a { + text-decoration: none; + color: #EEEEEE; +} + body { background-color: #393374; } @@ -39,3 +58,4 @@ footer { font-family: 'Indie Flower', cursive; } + diff --git a/pp2_/favicon.ico b/pp2_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp2_/favicon.ico differ diff --git a/pp2_/index.html b/pp2_/index.html index 4510663..be0de1f 100644 --- a/pp2_/index.html +++ b/pp2_/index.html @@ -59,33 +59,46 @@

Update CSS Variables with JS

body { text-align: center; - background-color: #393374; + background-color: #2852c7; /* background: #193549; */ color: white; font-family: "helvetica neue", sans-serif; - font-weight: 100; - font-size: 50px; + font-weight: 50; + font-size: 30px; } .controls { - margin-bottom: 50px; + margin-bottom: 30px; } input { width: 100px; } + + footer { + color: #dbedf3; + font-family: sans-serif; + font-size: 1rem; + } + +
Made with ā¤ļø by Infotech Programmer.
diff --git a/pp3_/.DS_Store b/pp3_/.DS_Store new file mode 100644 index 0000000..91209ea Binary files /dev/null and b/pp3_/.DS_Store differ diff --git a/pp3_/favicon.ico b/pp3_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp3_/favicon.ico differ diff --git a/pp3_/index.js b/pp3_/index.js index 67cf627..a1e70a2 100644 --- a/pp3_/index.js +++ b/pp3_/index.js @@ -1,95 +1,95 @@ -var noofdrumButtons = document.querySelectorAll(".drum").length; -for (var i = 0; i < noofdrumButtons; i++) -{ - document.querySelectorAll(".drum")[i].addEventListener("click",function(){ - - var buttonInnerHTML = this.innerHTML; - - makeSound(buttonInnerHTML); - - buttonAnimation(buttonInnerHTML); - - }); -} - -document.addEventListener("keydown", function(event) { - - makeSound(event.key); - - buttonAnimation(event.key); - -}); - -function makeSound(key) { - - switch (key) { - case "w": - var audio1 = new Audio('sounds/tom-1.mp3'); - audio1.play(); - break; - - case "a": - var audio2 = new Audio('sounds/tom-2.mp3'); - audio2.play(); - break; - - case "s": - var audio3 = new Audio('sounds/tom-3.mp3'); - audio3.play(); - break; - - case "d": - var audio4 = new Audio('sounds/tom-4.mp3'); - audio4.play(); - break; - - case "j": - var audio5 = new Audio('sounds/snare.mp3'); - audio5.play(); - break; - - case "k": - var audio6 = new Audio('sounds/crash.mp3'); - audio6.play(); - break; - - case "l": - var audio7 = new Audio('sounds/kick-bass.mp3'); - audio7.play(); - break; - - default: console.log(); - break; - } -} - -function buttonAnimation(currentKey) -{ - var activeButton = document.querySelector("."+currentKey); - - activeButton.classList.add("pressed"); - - setTimeout(function() { - activeButton.classList.remove("pressed");},100); -} - -/* -document.querySelectorAll(".drum")[i].addEventListener("click",handleClick); - -function handleClick() -{ - alert("I got clicked"); -}); - -or - -Instead of writing function name people use function inside EventListner - šŸ‘‡šŸ‘‡ -document.querySelectorAll(".drum")[i].addEventListener("click",function handleClick() -{ - alert("I got clicked"); -}); -*/ - - // var audio = new Audio('sounds/tom-1.mp3'); +var noofdrumButtons = document.querySelectorAll(".drum").length; +for (var i = 0; i < noofdrumButtons; i++) +{ + document.querySelectorAll(".drum")[i].addEventListener("click",function(){ + + var buttonInnerHTML = this.innerHTML; + + makeSound(buttonInnerHTML); + + buttonAnimation(buttonInnerHTML); + + }); +} + +document.addEventListener("keydown", function(event) { + + makeSound(event.key); + + buttonAnimation(event.key); + +}); + +function makeSound(key) { + + switch (key) { + case "w": + var audio1 = new Audio('sounds/tom-1.mp3'); + audio1.play(); + break; + + case "a": + var audio2 = new Audio('sounds/tom-2.mp3'); + audio2.play(); + break; + + case "s": + var audio3 = new Audio('sounds/tom-3.mp3'); + audio3.play(); + break; + + case "d": + var audio4 = new Audio('sounds/tom-4.mp3'); + audio4.play(); + break; + + case "j": + var audio5 = new Audio('sounds/snare.mp3'); + audio5.play(); + break; + + case "k": + var audio6 = new Audio('sounds/crash.mp3'); + audio6.play(); + break; + + case "l": + var audio7 = new Audio('sounds/kick-bass.mp3'); + audio7.play(); + break; + + default: console.log(); + break; + } +} + +function buttonAnimation(currentKey) +{ + var activeButton = document.querySelector("."+currentKey); + + activeButton.classList.add("pressed"); + + setTimeout(function() { + activeButton.classList.remove("pressed");},100); +} + +/* +document.querySelectorAll(".drum")[i].addEventListener("click",handleClick); + +function handleClick() +{ + alert("I got clicked"); +}); + +or + +Instead of writing function name people use function inside EventListner + šŸ‘‡šŸ‘‡ +document.querySelectorAll(".drum")[i].addEventListener("click",function handleClick() +{ + alert("I got clicked"); +}); +*/ + + // var audio = new Audio('sounds/tom-1.mp3'); // audio.play(); \ No newline at end of file diff --git a/pp3_/styles.css b/pp3_/styles.css index 767da2b..533d7ca 100644 --- a/pp3_/styles.css +++ b/pp3_/styles.css @@ -1,19 +1,20 @@ body { text-align: center; - background-color: #393374; + background-color: #101516; } h1 { font-size: 5rem; color: #DBEDF3; font-family: "Arvo", cursive; - text-shadow: 3px 0 #DA0463; + text-shadow: 5px 0 #1174e6; } footer { color: #DBEDF3; font-family: sans-serif; + font-size: 1rem; } .w { @@ -64,13 +65,13 @@ footer { .drum { outline: none; - border: 10px solid #404B69; + border: 8px solid #4d4d55; font-size: 5rem; font-family: 'Arvo', cursive; line-height: 2; font-weight: 900; color: #DA0463; - text-shadow: 3px 0 #DBEDF3; + text-shadow: 4px 0 #DBEDF3; border-radius: 15px; display: inline-block; width: 150px; diff --git a/pp4_/favicon.ico b/pp4_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp4_/favicon.ico differ diff --git a/pp4_/index.html b/pp4_/index.html index 9e88e6f..52056d6 100644 --- a/pp4_/index.html +++ b/pp4_/index.html @@ -1,101 +1,28 @@ - - JS + CSS Clock + + + + + Sound Board +

LETS LISTEN SOME SOUNDS

+ + + + + + + +
+ + +            +
+ Made with ā¤ļø by Infotech Programmer. +
-
-
-
-
-
-
-
- - - - - - diff --git a/pp11_/script.js b/pp4_/script.js similarity index 95% rename from pp11_/script.js rename to pp4_/script.js index 5f609db..a10d419 100644 --- a/pp11_/script.js +++ b/pp4_/script.js @@ -1,24 +1,24 @@ -const sounds = ['Applause', 'Boo', 'Gasp', 'Tada', 'Victory', 'Wrong'] - -sounds.forEach(sound => { - const btn = document.createElement('button') - btn.classList.add('btn') - - btn.innerText = sound - - btn.addEventListener('click', () => { - stopSongs() - document.getElementById(sound).play() - }) - - document.getElementById('buttons').appendChild(btn) -}) - -function stopSongs() { - sounds.forEach(sound => { - const song = document.getElementById(sound) - - song.pause() - song.currentTime = 0; - }) +const sounds = ['Applause', 'Boo', 'Gasp', 'Tada', 'Victory', 'Wrong'] + +sounds.forEach(sound => { + const btn = document.createElement('button') + btn.classList.add('btn') + + btn.innerText = sound + + btn.addEventListener('click', () => { + stopSongs() + document.getElementById(sound).play() + }) + + document.getElementById('buttons').appendChild(btn) +}) + +function stopSongs() { + sounds.forEach(sound => { + const song = document.getElementById(sound) + + song.pause() + song.currentTime = 0; + }) } \ No newline at end of file diff --git a/pp11_/sounds/sound-board_sounds_applause.mp3 b/pp4_/sounds/sound-board_sounds_applause.mp3 similarity index 100% rename from pp11_/sounds/sound-board_sounds_applause.mp3 rename to pp4_/sounds/sound-board_sounds_applause.mp3 diff --git a/pp11_/sounds/sound-board_sounds_boo.mp3 b/pp4_/sounds/sound-board_sounds_boo.mp3 similarity index 100% rename from pp11_/sounds/sound-board_sounds_boo.mp3 rename to pp4_/sounds/sound-board_sounds_boo.mp3 diff --git a/pp11_/sounds/sound-board_sounds_gasp.mp3 b/pp4_/sounds/sound-board_sounds_gasp.mp3 similarity index 100% rename from pp11_/sounds/sound-board_sounds_gasp.mp3 rename to pp4_/sounds/sound-board_sounds_gasp.mp3 diff --git a/pp11_/sounds/sound-board_sounds_tada.mp3 b/pp4_/sounds/sound-board_sounds_tada.mp3 similarity index 100% rename from pp11_/sounds/sound-board_sounds_tada.mp3 rename to pp4_/sounds/sound-board_sounds_tada.mp3 diff --git a/pp11_/sounds/sound-board_sounds_victory.mp3 b/pp4_/sounds/sound-board_sounds_victory.mp3 similarity index 100% rename from pp11_/sounds/sound-board_sounds_victory.mp3 rename to pp4_/sounds/sound-board_sounds_victory.mp3 diff --git a/pp11_/sounds/sound-board_sounds_wrong.mp3 b/pp4_/sounds/sound-board_sounds_wrong.mp3 similarity index 100% rename from pp11_/sounds/sound-board_sounds_wrong.mp3 rename to pp4_/sounds/sound-board_sounds_wrong.mp3 diff --git a/pp4_/style.css b/pp4_/style.css new file mode 100644 index 0000000..2fa95f2 --- /dev/null +++ b/pp4_/style.css @@ -0,0 +1,43 @@ +body { + background-color: rgb(48, 129, 250); + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + text-align: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.btn { + background-color: rgb(45, 80, 233); + border-radius: 5px; + border: none; + color: #fff; + margin: 1rem; + padding: 1.5rem 3rem; + font-size: inherit; +} + +.btn:hover { + opacity: 0.4; + transition: 0.2s; + border: solid #fff; + border-radius: 12px; +} + +.btn:active { + transform: scale(0.5); + transition: 0.4s; +} + +.btn:focus { + outline: none; +} + +footer { + color: #dbedf3; + font-family: sans-serif; + font-size: 1rem; +} diff --git a/pp5_/favicon.ico b/pp5_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp5_/favicon.ico differ diff --git a/pp5_/index.html b/pp5_/index.html index 9ae18ed..96b0bc8 100644 --- a/pp5_/index.html +++ b/pp5_/index.html @@ -1,52 +1,52 @@ - - - - - - - - Expanding Cards - - -
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
-

Explore The Animals

-
-
- - - + + + + + + + + Expanding Cards + + +
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+

Explore The Animals

+
+
+ + + \ No newline at end of file diff --git a/pp5_/script.js b/pp5_/script.js index e405655..629a519 100644 --- a/pp5_/script.js +++ b/pp5_/script.js @@ -1,14 +1,14 @@ -const panels = document.querySelectorAll('.panel'); - -panels.forEach(panel => { - panel.addEventListener('click', () => { - removeActiveClasses(); - panel.classList.add('active') - }) -}) - -function removeActiveClasses() { - panels.forEach(panel => { - panel.classList.remove('active') - }) +const panels = document.querySelectorAll('.panel'); + +panels.forEach(panel => { + panel.addEventListener('click', () => { + removeActiveClasses(); + panel.classList.add('active') + }) +}) + +function removeActiveClasses() { + panels.forEach(panel => { + panel.classList.remove('active') + }) } \ No newline at end of file diff --git a/pp5_/style.css b/pp5_/style.css index ff05f3a..8febb5c 100644 --- a/pp5_/style.css +++ b/pp5_/style.css @@ -1,59 +1,59 @@ -body{ - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; - background-color: #f48223; -} - - -.container { - display: flex; - width: 90vw; -} - - -.panel { - background-size: auto 100%; - background-position: center; - background-repeat: no-repeat; - height: 80vh; - border-radius: 50px; - color: white; - cursor: pointer; - flex: 0.5; - margin: 2px; - position: relative; - transition: flex 0.7s ease-in; -} - - -.panel h3 { - font-size: 24px; - position: absolute; - bottom: 20px; - left: 20px; - margin: 0; - opacity: 0; -} - -.panel.active { - flex: 8; -} - -.panel.active h3 { - opacity: 1; - transition: opacity 0.3s ease-in 0.4s; -} - -@media(max-width: 480px) { - .container { - width: 100vw; - } - - .panel:nth-of-type(4),.panel:nth-of-type(5) { - display: none; - } +body{ + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; + background-color: #f48223; +} + + +.container { + display: flex; + width: 90vw; +} + + +.panel { + background-size: auto 100%; + background-position: center; + background-repeat: no-repeat; + height: 80vh; + border-radius: 50px; + color: white; + cursor: pointer; + flex: 0.5; + margin: 2px; + position: relative; + transition: flex 0.7s ease-in; +} + + +.panel h3 { + font-size: 24px; + position: absolute; + bottom: 20px; + left: 20px; + margin: 0; + opacity: 0; +} + +.panel.active { + flex: 8; +} + +.panel.active h3 { + opacity: 1; + transition: opacity 0.3s ease-in 0.4s; +} + +@media(max-width: 480px) { + .container { + width: 100vw; + } + + .panel:nth-of-type(4),.panel:nth-of-type(5) { + display: none; + } } \ No newline at end of file diff --git a/pp6_/favicon.ico b/pp6_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp6_/favicon.ico differ diff --git a/pp6_/index.html b/pp6_/index.html new file mode 100644 index 0000000..a8b8657 --- /dev/null +++ b/pp6_/index.html @@ -0,0 +1,99 @@ + + + + + + + + + FAQ + + +

Frequently Asked Questions

+
+
+

What language to learn first?

+ +

+ If you want to explore all programming concepts deeply then you can + learn C++ also for game development. But if you want to make websites + so learn JavaScript first, otherwise for android applications or + system softwares learn Java first, other than that if you want your + future in Data Science and Artifiacial Intelligence then go with + python. +

+ + +
+
+

Why shouldn't we learn python first?

+ +

+ It make everything easy but then its difficult to learn any other + language in future. As in python you will learn less programming + concepts than in other languages. You will not learn some major + concepts like pointers, structures etc. +

+ + +
+
+

How to start learning programming?

+ +

+ Nothing is difficult in this just choose one language and then start + finding its tutorials on Youtube and follow that tutorial and code + along with it and its better to buy a book and make notes also along + with that. Still if dont like Youtube then go to Udemy, Udacity or + Coursera for paid courses. If can't find best I am here to guide you + and provide what you want just DM + infotechprogremmer +

+ + +
+
+

Where to find resourses for programming?

+ +

+ Go to the telegram channel + @infotechprogrammer + and there you will find Sahil Batra's hand written notes + popular + programming and computer engineering books and various other resourses + for more like courses and all you can directly message him + Infotech Programmer on telegram he + will definately help you. +

+ + +
+
+ +
+
Made with ā¤ļø by Infotech Programmer.
+
+ + + + diff --git a/pp6_/script.js b/pp6_/script.js new file mode 100644 index 0000000..f1d63bb --- /dev/null +++ b/pp6_/script.js @@ -0,0 +1,7 @@ +const toggles = document.querySelectorAll('.faq-toggle') + +toggles.forEach(toggle => { + toggle.addEventListener('click', () => { + toggle.parentNode.classList.toggle('active') + }) +}) \ No newline at end of file diff --git a/pp6_/style.css b/pp6_/style.css new file mode 100644 index 0000000..f56437f --- /dev/null +++ b/pp6_/style.css @@ -0,0 +1,104 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #f0f0f0; +} + +h1 { + margin: 50px 0 30px; + text-align: center; +} + +.faq-container { + max-width: 600px; + margin: 0 auto; +} + +.faq { + background-color: transparent; + border: 1px solid #9fa4a8; + border-radius: 10px; + margin: 20px 0; + padding: 30px; + position: relative; + overflow: hidden; + transition: 0.3s ease; +} + +.faq.active { + background-color: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.faq.active::before, +.faq.active::after { + content: '\f075'; + font-family: 'Font Awesome 5 Free'; + color: #2ecc71; + font-size: 7rem; + position: absolute; + opacity: 0.2; + top: 20px; + left: 20px; + z-index: 0; +} + +.faq.active::before { + color: #3498db; + top: -10px; + left: -30px; + transform: rotateY(180deg); +} + +.faq-title { + margin: 0 35px 0 0; +} + +.faq-text { + display: none; + margin: 30px 0 0; +} + +.faq.active .faq-text { + display: block; +} + +.faq-toggle { + background-color: transparent; + border: 0; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + padding: 0; + position: absolute; + top: 30px; + right: 30px; + height: 30px; + width: 30px; +} + +.faq-toggle:focus { + outline: 0; +} + +.faq-toggle .fa-times { + display: none; +} + +.faq.active .faq-toggle .fa-times { + color: white; + display: block; +} + +.faq.active .faq-toggle .fa-chevron-down { + display: none; +} + +.faq.active .faq-toggle { + background-color: #9fa4a8; +} \ No newline at end of file diff --git a/pp7_/index.html b/pp7_/index.html index 81fa191..1a9e0e7 100644 --- a/pp7_/index.html +++ b/pp7_/index.html @@ -1,37 +1,41 @@ - - - - - - - - Drink Water - - -

Drink Water

-

Goal: 2 Liters

- -
-
- - Remained -
-
-
- -

Select how many glasses of water that you have drank

- -
-
250ml
-
250ml
-
250ml
-
250ml
-
250ml
-
250ml
-
250ml
-
250ml
-
- - - + + + + + + + + Drink Water + + +

Drink Water

+

Goal: 2 Liters

+ +
+
+ + Remained +
+
+
+ +

Select how many glasses of water that you have drank

+ +
+
250ml
+
250ml
+
250ml
+
250ml
+
250ml
+
250ml
+
250ml
+
250ml
+
+
+
+ Made with ā¤ļø by Infotech Programmer. +
+ + + \ No newline at end of file diff --git a/pp7_/script.js b/pp7_/script.js index 917a721..3ea64d8 100644 --- a/pp7_/script.js +++ b/pp7_/script.js @@ -1,47 +1,47 @@ -const smallCups = document.querySelectorAll('.cup-small'); -const liters = document.getElementById('liters'); -const percentage = document.getElementById('percentage'); -const remained = document.getElementById('remained'); - -updateBigCup(); - -smallCups.forEach((cup, idx) => { - cup.addEventListener('click' , () => highlightCups(idx)) -}); - -function highlightCups(idx) { - if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) { - idx--; - } - smallCups.forEach((cup, idx2) => { - if(idx2 <= idx) { - cup.classList.add('full'); - } else { - cup.classList.remove('full'); - } - }); - - updateBigCup(); -} - -function updateBigCup() { - const fullCups = document.querySelectorAll('.cup-small.full').length; - const totalCups = smallCups.length; - - if(fullCups === 0) { - percentage.style.visibility ='hidden'; - percentage.style.height = 0; - } else { - percentage.style.visibility = 'visible'; - percentage.style.height = `${fullCups / totalCups * 330}px`; - percentage.innerText = `${fullCups / totalCups * 100}%`; - } - - if(fullCups === totalCups) { - remained.style.visibility = 'hidden'; - remained.style.height = 0; - } else { - remained.style.visibility = 'visible'; - liters.innerText = `${2 - (250 * fullCups / 1000)}L`; - } +const smallCups = document.querySelectorAll('.cup-small'); +const liters = document.getElementById('liters'); +const percentage = document.getElementById('percentage'); +const remained = document.getElementById('remained'); + +updateBigCup(); + +smallCups.forEach((cup, idx) => { + cup.addEventListener('click' , () => highlightCups(idx)) +}); + +function highlightCups(idx) { + if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) { + idx--; + } + smallCups.forEach((cup, idx2) => { + if(idx2 <= idx) { + cup.classList.add('full'); + } else { + cup.classList.remove('full'); + } + }); + + updateBigCup(); +} + +function updateBigCup() { + const fullCups = document.querySelectorAll('.cup-small.full').length; + const totalCups = smallCups.length; + + if(fullCups === 0) { + percentage.style.visibility ='hidden'; + percentage.style.height = 0; + } else { + percentage.style.visibility = 'visible'; + percentage.style.height = `${fullCups / totalCups * 330}px`; + percentage.innerText = `${fullCups / totalCups * 100}%`; + } + + if(fullCups === totalCups) { + remained.style.visibility = 'hidden'; + remained.style.height = 0; + } else { + remained.style.visibility = 'visible'; + liters.innerText = `${2 - (250 * fullCups / 1000)}L`; + } } \ No newline at end of file diff --git a/pp7_/style.css b/pp7_/style.css index 101c9e8..e1d9971 100644 --- a/pp7_/style.css +++ b/pp7_/style.css @@ -1,101 +1,101 @@ -:root { - --border-color: #2661d8; - --fill-color: #6ab3f8; -} - -* { - box-sizing: border-box; -} - -body { - background-color: #3494e4; - color: white; - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 40px; -} - -h1 { - margin: 10px 0 0; -} - -h3 { - font-weight: 400; - margin: 10px 0; -} - -.cup { - background-color: white; - border: 4px solid var(--border-color); - color: var(--border-color); - border-radius: 0 0 40px 40px; - height: 330px; - width: 150px; - margin: 30px 0; - display: flex; - flex-direction: column; - overflow: hidden; -} - -.cup.cup-small { - height: 95px; - width: 50px; - border-radius: 0 0 15px 15px; - background-color: rgba(2555,255,255,0.9); - cursor: pointer; - font-size: 14px; - align-items: center; - justify-content: center; - text-align: center; - margin: 5px; - transition: 0.5s ease; -} - -.cup.cup.cup-small.full { - background-color: var(--fill-color); - color: white; -} - -.cups { - display: flex; - flex-wrap: wrap; - width: 280px; - align-items: center; - justify-content: center; -} - -.remained { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - flex: 1; - transition: 0.5s ease -} - -.remained span { - font-size: 20px; - font-weight: bold; -} - -.remained small { - font-size: 12px; -} - -.percentage { - background-color: var(--fill-color); - display: flex; - align-items: center; - justify-content: center; - font-weight: bold; - font-size: 30px; - height: 0; - transition: 0.5s ease; -} - -.text { - text-align: center; - margin: 0 0 5px; +:root { + --border-color: #2661d8; + --fill-color: #6ab3f8; +} + +* { + box-sizing: border-box; +} + +body { + background-color: #3494e4; + color: white; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40px; +} + +h1 { + margin: 10px 0 0; +} + +h3 { + font-weight: 400; + margin: 10px 0; +} + +.cup { + background-color: white; + border: 4px solid var(--border-color); + color: var(--border-color); + border-radius: 0 0 40px 40px; + height: 330px; + width: 155px; + margin: 30px 0; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.cup.cup-small { + height: 95px; + width: 50px; + border-radius: 0 0 15px 15px; + background-color: rgba(2555,255,255,0.9); + cursor: pointer; + font-size: 14px; + align-items: center; + justify-content: center; + text-align: center; + margin: 5px; + transition: 0.5s ease; +} + +.cup.cup.cup-small.full { + background-color: var(--fill-color); + color: white; +} + +.cups { + display: flex; + flex-wrap: wrap; + width: 280px; + align-items: center; + justify-content: center; +} + +.remained { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + flex: 1; + transition: 0.5s ease +} + +.remained span { + font-size: 20px; + font-weight: bold; +} + +.remained small { + font-size: 12px; +} + +.percentage { + background-color: var(--fill-color); + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 30px; + height: 0; + transition: 0.5s ease; +} + +.text { + text-align: center; + margin: 0 0 5px; } \ No newline at end of file diff --git a/pp8_/favicon.ico b/pp8_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp8_/favicon.ico differ diff --git a/pp8_/index.html b/pp8_/index.html index 740e79c..f1d4349 100644 --- a/pp8_/index.html +++ b/pp8_/index.html @@ -1,27 +1,24 @@ - - - - - - - - Movie App - - - -
- MOVIES APP -
- -
-
- -
- - - - + + + + + + + Movie App + + +
+
+ +
+
+ +
+ +
+
Made with ā¤ļø by Infotech Programmer.
+
+ + + + diff --git a/pp8_/script.js b/pp8_/script.js index 0078a8f..4def75c 100644 --- a/pp8_/script.js +++ b/pp8_/script.js @@ -1,70 +1,70 @@ -const API_URL = - "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=8035bec1b213716c79afaf6e869d8597&page=1"; - -const IMG_PATH = "https://image.tmdb.org/t/p/w1280"; - -const SEARCH_API = - 'https://api.themoviedb.org/3/search/movie/?api_key=8035bec1b213716c79afaf6e869d8597&query="'; - -const main = document.getElementById("main"); -const form = document.getElementById("form"); -const search = document.getElementById("search"); - -//Get initial movies -getMovies(API_URL); - -async function getMovies(url) { - const res = await fetch(url); - const data = await res.json(); - - showMovies(data.results); -} - -function showMovies(movies) { - main.innerHTML = ""; - - movies.forEach((movie) => { - const { title, poster_path, vote_average, overview } = movie; - - const movieEl = document.createElement("div"); - movieEl.classList.add("movie"); - - movieEl.innerHTML = ` - ${title} -
-

${title}

- ${vote_average} -
-
-

Overview

- ${overview} -
- `; - - main.appendChild(movieEl); - }); -} - -function getClassByRate(vote) { - if(vote >=8) { - return 'green'; - } else if(vote >=6) { - return 'orange'; - } else { - return'red'; - } -} - -form.addEventListener("submit", (e) => { - e.preventDefault(); - - const searchTerm = search.value; - - if (searchTerm && searchTerm !== "") { - getMovies(SEARCH_API + searchTerm); - - search.value = ""; - } else { - window.location.reload(); - } -}); +const API_URL = + "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=8035bec1b213716c79afaf6e869d8597&page=1"; + +const IMG_PATH = "https://image.tmdb.org/t/p/w1280"; + +const SEARCH_API = + 'https://api.themoviedb.org/3/search/movie/?api_key=8035bec1b213716c79afaf6e869d8597&query="'; + +const main = document.getElementById("main"); +const form = document.getElementById("form"); +const search = document.getElementById("search"); + +//Get initial movies +getMovies(API_URL); + +async function getMovies(url) { + const res = await fetch(url); + const data = await res.json(); + + showMovies(data.results); +} + +function showMovies(movies) { + main.innerHTML = ""; + + movies.forEach((movie) => { + const { title, poster_path, vote_average, overview } = movie; + + const movieEl = document.createElement("div"); + movieEl.classList.add("movie"); + + movieEl.innerHTML = ` + ${title} +
+

${title}

+ ${vote_average} +
+
+

Overview

+ ${overview} +
+ `; + + main.appendChild(movieEl); + }); +} + +function getClassByRate(vote) { + if(vote >=8) { + return 'green'; + } else if(vote >=6) { + return 'orange'; + } else { + return'red'; + } +} + +form.addEventListener("submit", (e) => { + e.preventDefault(); + + const searchTerm = search.value; + + if (searchTerm && searchTerm !== "") { + getMovies(SEARCH_API + searchTerm); + + search.value = ""; + } else { + window.location.reload(); + } +}); diff --git a/pp8_/style.css b/pp8_/style.css index 7f2eda1..d5e04cb 100644 --- a/pp8_/style.css +++ b/pp8_/style.css @@ -1,108 +1,118 @@ -* { - box-sizing: border-box; -} - -:root { - --primary-color: #22254b; - --secondary-color: #373b69 -} - -body { - background-color: var(--primary-color); - margin: 0; -} - -header { - padding: 2rem; - display: flex; - background-color: var(--secondary-color); -} -form { - margin-left: 10%; - justify-content:flex-end; -} - -.search { - background-color: transparent; - border: 2px solid var(--primary-color); - border-radius: 50px; - font-size: 1rem; - padding: 0.5rem 1rem; - color: white; -} - -.search::placeholder { - color: #7378c5; -} - -.search::focus { - outline: none; - background-color: var(--primary-color); -} - -main { - display: flex; - flex-wrap: wrap; -} - -.movie { - width: 300px; - margin: 1rem; - background-color: var(--secondary-color); - box-shadow: 0 4px 5px rgba(0,0,0,0.2); - position: relative; - overflow: hidden; - border-radius: 3px; -} - -.movie img { - width: 100%; -} - -.movie -info { - color: #eee; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.5rem 1rem 1rem; - letter-spacing: 0.5px; -} - -.movie-info h3 { - margin-top: 0; -} - -.movie-info span { - background-color: var(--primary-color); - padding: 0.25rem 0.5rem; - border-radius: 3px; - font-weight: bold; -} - -.movie-info span.green { - color: rgb(31, 189, 0); -} - -.movie-info span.orange { - color: rgb(221, 63, 0); -} - -.movie-info span.red { - color: rgb(211, 0, 0); -} - -.overview { - background-color: rgba(255, 255, 255, 0.801); - padding: 2rem; - position: absolute; - left: 0; - right: 0; - bottom: 0; - max-height: 100%; - transform: translateY(101%); - transition: transform 0.2s ease-in; -} - -.movie:hover .overview { - transform: translateY(0); -} \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); + +:root { + --primary-color: #22254b; + --secondary-color: #373b69; +} + +* { + box-sizing: border-box; +} + +body { + background-color: var(--primary-color); + font-family: 'Poppins', sans-serif; + margin: 0; +} + +header { + padding: 1rem; + display: flex; + justify-content: flex-end; + background-color: var(--secondary-color); +} + +.search { + background-color: transparent; + border: 2px solid var(--primary-color); + border-radius: 50px; + font-family: inherit; + font-size: 1rem; + padding: 0.5rem 1rem; + color: #fff; +} + +.search::placeholder { + color: #7378c5; +} + +.search:focus { + outline: none; + background-color: var(--primary-color); +} + +main { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.movie { + width: 300px; + margin: 1rem; + background-color: var(--secondary-color); + box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); + position: relative; + overflow: hidden; + border-radius: 3px; +} + +.movie img { + width: 100%; +} + +.movie-info { + color: #eee; + display: flex; + align-items: center; + justify-content: space-between; + gap:0.2rem; + padding: 0.5rem 1rem 1rem; + letter-spacing: 0.5px; +} + +.movie-info h3 { + margin-top: 0; +} + +.movie-info span { + background-color: var(--primary-color); + padding: 0.25rem 0.5rem; + border-radius: 3px; + font-weight: bold; +} + +.movie-info span.green { + color: rgb(0, 180, 0); +} + +.movie-info span.orange { + color: rgb(255, 123, 0); +} + +.movie-info span.red { + color: red; +} + +.overview { + background-color: #fff; + padding: 2rem; + position: absolute; + left: 0; + bottom: 0; + right: 0; + max-height: 100%; + transform: translateY(101%); + overflow-y: auto; + transition: transform 0.3s ease-in; +} + +.movie:hover .overview { + transform: translateY(0); +} + +footer { + color: #dbedf3; + font-family: sans-serif; + font-size: 1rem; +} diff --git a/pp9_/favicon.ico b/pp9_/favicon.ico new file mode 100644 index 0000000..069e335 Binary files /dev/null and b/pp9_/favicon.ico differ diff --git a/pp9_/index.html b/pp9_/index.html index 6fee6df..6238199 100644 --- a/pp9_/index.html +++ b/pp9_/index.html @@ -1,62 +1,67 @@ - - - - - - - - - Background Slider - - -
-
-
- -
- -
- -
- - - - -
- - - \ No newline at end of file + + + + + + + + + Background Slider + + +
+
+
+ +
+ +
+ +
+ + + + +
+
+
+
Made with ā¤ļø by Infotech Programmer.
+
+ + + + diff --git a/pp9_/script.js b/pp9_/script.js index ba0cff0..9318b9e 100644 --- a/pp9_/script.js +++ b/pp9_/script.js @@ -1,40 +1,40 @@ -const body = document.body -const slides = document.querySelectorAll('.slide') -const leftBtn = document.getElementById('left') -const rightBtn = document.getElementById('right') - -let activeSlide = 0 - -rightBtn.addEventListener('click', () => { - activeSlide++ - - if (activeSlide > slides.length - 1) { - activeSlide = 0 - } - - setBgToBody() - setActiveSlide() -}) - -leftBtn.addEventListener('click', () => { - activeSlide-- - - if (activeSlide < 0) { - activeSlide = slides.length - 1 - } - - setBgToBody() - setActiveSlide() -}) - -setBgToBody() - -function setBgToBody() { - body.style.backgroundImage = slides[activeSlide].style.backgroundImage -} - -function setActiveSlide() { - slides.forEach((slide) => slide.classList.remove('active')) - - slides[activeSlide].classList.add('active') +const body = document.body +const slides = document.querySelectorAll('.slide') +const leftBtn = document.getElementById('left') +const rightBtn = document.getElementById('right') + +let activeSlide = 0 + +rightBtn.addEventListener('click', () => { + activeSlide++ + + if (activeSlide > slides.length - 1) { + activeSlide = 0 + } + + setBgToBody() + setActiveSlide() +}) + +leftBtn.addEventListener('click', () => { + activeSlide-- + + if (activeSlide < 0) { + activeSlide = slides.length - 1 + } + + setBgToBody() + setActiveSlide() +}) + +setBgToBody() + +function setBgToBody() { + body.style.backgroundImage = slides[activeSlide].style.backgroundImage +} + +function setActiveSlide() { + slides.forEach((slide) => slide.classList.remove('active')) + + slides[activeSlide].classList.add('active') } \ No newline at end of file diff --git a/pp9_/style.css b/pp9_/style.css index ed41459..c56374c 100644 --- a/pp9_/style.css +++ b/pp9_/style.css @@ -1,76 +1,82 @@ -* { - box-sizing: border-box; -} - -body { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - overflow: hidden; - margin: 0; - background-position: center center; - background-size: cover; - transition: 0.4s; -} - -body::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background-color: rgba(0, 0, 0, 0.7); - z-index: -1; -} - -.slider-container { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - height: 70vh; - width: 70vw; - position: relative; - overflow: hidden; -} - -.slide { - opacity: 0; - height: 100vh; - width: 100vw; - background-position: center center; - background-size: cover; - position: absolute; - top: -15vh; - left: -15vw; - transition: 0.4s ease; - z-index: 1; -} - -.slide.active { - opacity: 1; -} - -.arrow { - position: fixed; - background-color: transparent; - color: #fff; - padding: 20px; - font-size: 30px; - border: 2px solid orange; - top: 50%; - transform: translateY(-50%); - cursor: pointer; -} - -.arrow:focus { - outline: 0; -} - -.left-arrow { - left: calc(15vw - 65px); -} - -.right-arrow { - right: calc(15vw - 65px); +* { + box-sizing: border-box; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; + background-position: center center; + background-size: cover; + transition: 0.4s; +} + +body::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: rgba(0, 0, 0, 0.7); + z-index: -1; +} + +.slider-container { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + height: 70vh; + width: 70vw; + position: relative; + overflow: hidden; +} + +.slide { + opacity: 0; + height: 100vh; + width: 100vw; + background-position: center center; + background-size: cover; + position: absolute; + top: -15vh; + left: -15vw; + transition: 0.4s ease; + z-index: 1; +} + +.slide.active { + opacity: 1; +} + +.arrow { + position: fixed; + background-color: transparent; + color: #fff; + padding: 20px; + font-size: 30px; + border: 2px solid orange; + top: 50%; + transform: translateY(-50%); + cursor: pointer; +} + +.arrow:focus { + outline: 0; +} + +.left-arrow { + left: calc(15vw - 65px); +} + +.right-arrow { + right: calc(15vw - 65px); +} + +footer { + color: #dbedf3; + font-family: sans-serif; + font-size: 1rem; } \ No newline at end of file diff --git a/project1.html b/project1.html index 6db4e23..8527c41 100644 --- a/project1.html +++ b/project1.html @@ -1,343 +1,343 @@ - - - - - - - Infotech Programmer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -
- - - - -
- - - - Scroll Down - - - -
- -
- -
- -
- -

Project Description

- -

The Project entitled ā€œCTGTEā€ is a website developed in PHP language using PHP & MySQL as backend using Apache server. This project is aimed at developing an educational website that depicts complete information about languages and projects on web development . In this Project I had used 3 client side scripting languages (HTML, CSS and JavaScript), 1 server side scripting language (PHP) and 1 framework (Bootstrap). For more info see snapshots below and you can see below the skills used in this project.

- -
- -
- - -
- -
- -

Project Snapshots

-

Must check these slides for little overview about this website project

- - - -


- Open Project - -

-
- -
- -

Skills Used

- -
    -
  • -
    30%
    - HTML5 (30%) -
  • -
  • -
    25%
    - CSS3 (25%) -
  • -
  • -
    15%
    - JavaScript (15%) -
  • -
  • -
    20%
    - JQuery (20%) -
  • -
  • -
    10%
    - Bootstrap (10%) -
  • -
  • -
    10%
    - PHP (10%) -
  • -
- -
- -
- -
- - -
- -
-
-

Contact Us

-

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

-
-
- -
- -
-

Where To Find Us

- Email: infotechprogramming@gmail.com
- Telegram: Infotech Programmer
- Instagram: @infotechprogrammer -
- -
-

Follow Us

- -
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • - -
- -
-
-
- -
- -
- -
- -
- - - - - - -
-
-
-
- - - - - - - - - - - - + + + + + + + Infotech Programmer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + +
+ + + + Scroll Down + + + +
+ +
+ +
+ +
+ +

Project Description

+ +

The Project entitled ā€œCTGTEā€ is a website developed in PHP language using PHP & MySQL as backend using Apache server. This project is aimed at developing an educational website that depicts complete information about languages and projects on web development . In this Project I had used 3 client side scripting languages (HTML, CSS and JavaScript), 1 server side scripting language (PHP) and 1 framework (Bootstrap). For more info see snapshots below and you can see below the skills used in this project.

+ +
+ +
+ + +
+ +
+ +

Project Snapshots

+

Must check these slides for little overview about this website project

+ + + +


+ Open Project + +

+
+ +
+ +

Skills Used

+ +
    +
  • +
    30%
    + HTML5 (30%) +
  • +
  • +
    25%
    + CSS3 (25%) +
  • +
  • +
    15%
    + JavaScript (15%) +
  • +
  • +
    20%
    + JQuery (20%) +
  • +
  • +
    10%
    + Bootstrap (10%) +
  • +
  • +
    10%
    + PHP (10%) +
  • +
+ +
+ +
+ +
+ + +
+ +
+
+

Contact Us

+

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

+
+
+ +
+ +
+

Where To Find Us

+ Email: infotechprogramming@gmail.com
+ Telegram: Infotech Programmer
+ Instagram: @infotechprogrammer +
+ +
+

Follow Us

+ +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • + +
+ +
+
+
+ +
+ +
+ +
+ +
+ + + + + + +
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/project2.html b/project2.html index dd069cd..797c83e 100644 --- a/project2.html +++ b/project2.html @@ -1,352 +1,352 @@ - - - - - - - Infotech Programmer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -
- - - -
- - - - Scroll Down - - - -
- - -
- -
- -
- -

Project Description

- -

Shopkart consists of 2 panels: Admin Panel and User Panel. First Admin Panel is built for Admin who will insert, delete and update all the information of User Panel by monitoring it from Admin Panel. Admin will have information of all products and orders ordered by the users. -After Admin Panel is created the User panel is built where users from all over the world can experience the website for shopping purpose. In this user who had logged in can only add the products in the cart. For more info see snapshots below and you can see below the skills used in this project. -

- -
- -
- - -
- -
- -

Project Snapshots

-

Must check these slides for little overview about this website project

- - - -


- Open Project - -

-
- -
- -

Skills Used

- -
    -
  • -
    20%
    - HTML5 (20%) -
  • -
  • -
    15%
    - CSS3 (15%) -
  • -
  • -
    15%
    - JavaScript (15%) -
  • -
  • -
    10%
    - JQuery (10%) -
  • -
  • -
    20%
    - Bootstrap (20%) -
  • -
  • -
    20%
    - PHP (20%) -
  • -
- -
- -
- -
- - -
- -
-
-

Contact Us

-

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

-
-
- -
- -
-

Where To Find Us

- Email: infotechprogramming@gmail.com
- Telegram: Infotech Programmer
- Instagram: @infotechprogrammer -
- -
-

Follow Us

- -
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
- -
-
-
- -
- -
- -
- -
- - - - - - -
-
-
-
- - - - - - - - - - - - + + + + + + + Infotech Programmer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + +
+ + + + Scroll Down + + + +
+ + +
+ +
+ +
+ +

Project Description

+ +

Shopkart consists of 2 panels: Admin Panel and User Panel. First Admin Panel is built for Admin who will insert, delete and update all the information of User Panel by monitoring it from Admin Panel. Admin will have information of all products and orders ordered by the users. +After Admin Panel is created the User panel is built where users from all over the world can experience the website for shopping purpose. In this user who had logged in can only add the products in the cart. For more info see snapshots below and you can see below the skills used in this project. +

+ +
+ +
+ + +
+ +
+ +

Project Snapshots

+

Must check these slides for little overview about this website project

+ + + +


+ Open Project + +

+
+ +
+ +

Skills Used

+ +
    +
  • +
    20%
    + HTML5 (20%) +
  • +
  • +
    15%
    + CSS3 (15%) +
  • +
  • +
    15%
    + JavaScript (15%) +
  • +
  • +
    10%
    + JQuery (10%) +
  • +
  • +
    20%
    + Bootstrap (20%) +
  • +
  • +
    20%
    + PHP (20%) +
  • +
+ +
+ +
+ +
+ + +
+ +
+
+

Contact Us

+

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

+
+
+ +
+ +
+

Where To Find Us

+ Email: infotechprogramming@gmail.com
+ Telegram: Infotech Programmer
+ Instagram: @infotechprogrammer +
+ +
+

Follow Us

+ +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+ +
+
+
+ +
+ +
+ +
+ +
+ + + + + + +
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/project3.html b/project3.html index 3c70f00..265bfc8 100644 --- a/project3.html +++ b/project3.html @@ -1,347 +1,347 @@ - - - - - - - Infotech Programmer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -
- - - -
- - - - Scroll Down - - - -
- - -
- -
- -
- -

Project Description

- -

Save Wildlife is a social website which is used to provide information of endangered animals and to protect them. In this website user can add their blogs related to animals. User can add only one blog at a time with image and topics related to animal’s welfare. It has login and register features. Users who had registered and logged in can only add the blogs to the website. For more info see snapshots below and you can see below the skills used in this project.

- -
- -
- - -
- -
- -

Project Snapshots

-

Must check these slides for little overview about this website project

- - - -


- Open Project - -

-
- -
- -

Skills Used

- -
    -
  • -
    20%
    - HTML5 (20%) -
  • -
  • -
    25%
    - CSS3 (25%) -
  • -
  • -
    20%
    - JavaScript (20%) -
  • -
  • -
    15%
    - JQuery (15%) -
  • -
  • -
    10%
    - Bootstrap (10%) -
  • -
  • -
    10%
    - PHP (10%) -
  • -
- -
- -
- -
- - -
- -
-
-

Contact Us

-

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

-
-
- -
- -
-

Where To Find Us

- Email: infotechprogramming@gmail.com
- Telegram: Infotech Programmer
- Instagram: @infotechprogrammer -
- -
-

Follow Us

- -
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • - -
- -
-
-
- -
- -
- -
- -
- - - - - - -
-
-
-
- - - - - - - - - - - - - + + + + + + + Infotech Programmer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + +
+ + + + Scroll Down + + + +
+ + +
+ +
+ +
+ +

Project Description

+ +

Save Wildlife is a social website which is used to provide information of endangered animals and to protect them. In this website user can add their blogs related to animals. User can add only one blog at a time with image and topics related to animal’s welfare. It has login and register features. Users who had registered and logged in can only add the blogs to the website. For more info see snapshots below and you can see below the skills used in this project.

+ +
+ +
+ + +
+ +
+ +

Project Snapshots

+

Must check these slides for little overview about this website project

+ + + +


+ Open Project + +

+
+ +
+ +

Skills Used

+ +
    +
  • +
    20%
    + HTML5 (20%) +
  • +
  • +
    25%
    + CSS3 (25%) +
  • +
  • +
    20%
    + JavaScript (20%) +
  • +
  • +
    15%
    + JQuery (15%) +
  • +
  • +
    10%
    + Bootstrap (10%) +
  • +
  • +
    10%
    + PHP (10%) +
  • +
+ +
+ +
+ +
+ + +
+ +
+
+

Contact Us

+

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

+
+
+ +
+ +
+

Where To Find Us

+ Email: infotechprogramming@gmail.com
+ Telegram: Infotech Programmer
+ Instagram: @infotechprogrammer +
+ +
+

Follow Us

+ +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • + +
+ +
+
+
+ +
+ +
+ +
+ +
+ + + + + + +
+
+
+
+ + + + + + + + + + + + + diff --git a/project4.html b/project4.html index 1c42df4..934396c 100644 --- a/project4.html +++ b/project4.html @@ -1,351 +1,351 @@ - - - - - - - Infotech Programmer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -
- - - -
- - - - Scroll Down - - - -
- - -
- -
- -
- -

Project Description

- -

It is a content managment system in which user can add his/her blogs/posts. Proper Admin Panel for a user is made where user can add categories of post/blog and can create, delete, update, hide the posts/blogs according to his/her wish. It has login facility, the user can add post/blog after loging into its admin panel. It also has password change facility and realtime notification on admin dashboard. This project has major role of php for doing various operations and data is stored in MySql database. For more info see snapshots below and you can see below the skills used in this project.

- -
- -
- - -
- -
- -

Project Snapshots

-

Must check these slides for little overview about this website project

- - - -


- Open Project - -

-
- -
- -

Skills Used

- -
    -
  • -
    20%
    - HTML5 (20%) -
  • -
  • -
    15%
    - CSS3 (15%) -
  • -
  • -
    10%
    - JavaScript (10%) -
  • -
  • -
    10%
    - JQuery (10%) -
  • -
  • -
    15%
    - Bootstrap (15%) -
  • -
  • -
    30%
    - PHP (30%) -
  • -
- -
- -
- -
- - -
- -
-
-

Contact Us

-

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

-
-
- -
- -
-

Where To Find Us

- Email: infotechprogramming@gmail.com
- Telegram: Infotech Programmer
- Instagram: @infotechprogrammer -
- -
-

Follow Us

- -
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • - -
- -
-
-
- -
- -
- -
- -
- - - - - - -
-
-
-
- - - - - - - - - - - - + + + + + + + Infotech Programmer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + +
+ + + + Scroll Down + + + +
+ + +
+ +
+ +
+ +

Project Description

+ +

It is a content managment system in which user can add his/her blogs/posts. Proper Admin Panel for a user is made where user can add categories of post/blog and can create, delete, update, hide the posts/blogs according to his/her wish. It has login facility, the user can add post/blog after loging into its admin panel. It also has password change facility and realtime notification on admin dashboard. This project has major role of php for doing various operations and data is stored in MySql database. For more info see snapshots below and you can see below the skills used in this project.

+ +
+ +
+ + +
+ +
+ +

Project Snapshots

+

Must check these slides for little overview about this website project

+ + + +


+ Open Project + +

+
+ +
+ +

Skills Used

+ +
    +
  • +
    20%
    + HTML5 (20%) +
  • +
  • +
    15%
    + CSS3 (15%) +
  • +
  • +
    10%
    + JavaScript (10%) +
  • +
  • +
    10%
    + JQuery (10%) +
  • +
  • +
    15%
    + Bootstrap (15%) +
  • +
  • +
    30%
    + PHP (30%) +
  • +
+ +
+ +
+ +
+ + +
+ +
+
+

Contact Us

+

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

+
+
+ +
+ +
+

Where To Find Us

+ Email: infotechprogramming@gmail.com
+ Telegram: Infotech Programmer
+ Instagram: @infotechprogrammer +
+ +
+

Follow Us

+ +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • + +
+ +
+
+
+ +
+ +
+ +
+ +
+ + + + + + +
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/project5.html b/project5.html index f5d1e5b..89c5e13 100644 --- a/project5.html +++ b/project5.html @@ -1,359 +1,359 @@ - - - - - - - Infotech Programmer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -
- - - -
- - - - Scroll Down - - - -
- - -
- -
- -
- -

Project Description

- -

It is a advanced version of shopkart. An amazing shopping website made in wordpress with amazing design and features. It have all things that a well made shopping website should have. For more info see snapshots below and you can see below the skills used in this project.

- -
- -
- - -
- -
- -

Project Snapshots

-

Must check these slides for little overview about this website project

- - - -


- Open Project - -

-
- -
- -

Skills Used

- -
    -
  • -
    10%
    - HTML5 (10%) -
  • -
  • -
    10%
    - CSS3 (10%) -
  • -
  • -
    10%
    - JavaScript (10%) -
  • -
  • -
    55%
    - Wordpress (55%) -
  • -
  • -
    15%
    - PHP (15%) -
  • -
- -
- -
- -
- - -
- -
-
-

Contact Us

-

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

-
-
- -
- -
-

Where To Find Us

- Email: infotechprogramming@gmail.com
- Telegram: Infotech Programmer
- Instagram: @infotechprogrammer -
- -
-

Follow Us

- -
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • - -
- -
-
-
- -
- -
- -
- -
- - - - - - -
-
-
-
- - - - - - - - - - - - + + + + + + + Infotech Programmer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + +
+ + + + Scroll Down + + + +
+ + +
+ +
+ +
+ +

Project Description

+ +

It is a advanced version of shopkart. An amazing shopping website made in wordpress with amazing design and features. It have all things that a well made shopping website should have. For more info see snapshots below and you can see below the skills used in this project.

+ +
+ +
+ + +
+ +
+ +

Project Snapshots

+

Must check these slides for little overview about this website project

+ + + +


+ Open Project + +

+
+ +
+ +

Skills Used

+ +
    +
  • +
    10%
    + HTML5 (10%) +
  • +
  • +
    10%
    + CSS3 (10%) +
  • +
  • +
    10%
    + JavaScript (10%) +
  • +
  • +
    55%
    + Wordpress (55%) +
  • +
  • +
    15%
    + PHP (15%) +
  • +
+ +
+ +
+ +
+ + +
+ +
+
+

Contact Us

+

Get in touch and let's make something great together. Let's turn your idea on an even greater product.

+
+
+ +
+ +
+

Where To Find Us

+ Email: infotechprogramming@gmail.com
+ Telegram: Infotech Programmer
+ Instagram: @infotechprogrammer +
+ +
+

Follow Us

+ +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • + +
+ +
+
+
+ +
+ +
+ +
+ +
+ + + + + + +
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/project6.html b/project6.html index 3eb58d9..5fa55e1 100644 --- a/project6.html +++ b/project6.html @@ -1,361 +1,361 @@ - - - - - - - - Infotech Programmer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - -
- - - -
- - - - Scroll Down - - - -
- - -
- -
- -
- -

Project Description

- -

Computer Store is a informative website providing information of latest languages used for application, web development, artificial intelligence etc. It provides the syllabus of languages in which name of each and every topic to be covered is given along with its major programs to do. It is very helpful for new students who are ready to learn some new technical languages with their interests. For more info see snapshots below and you can see below the skills used in this project.

- -
- -
- - -
- -
- -

Project Snapshots

-

Must check these slides for little overview about this website project

- - - -


- Open Project - -

-
- -
- -

Skills Used

- -
    -
  • -
    25%
    - HTML5 (25%) -
  • -
  • -
    25%
    - CSS3 (25%) -
  • -
  • -
    10%
    - JavaScript (10%) -
  • -
  • -
    10%
    - JQuery (10%) -
  • -
  • -
    15%
    - Bootstrap (15%) -
  • -
  • -
    5%
    - PHP (5%) -
  • -
- -
- -
- -
- - -
- -
-
-

Contact Us

-

Get in touch and let's make something great together. Let's turn - your idea on an even greater product.

-
-
- -
- - - -
-

Follow Us

- -
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • -
  • - -
  • - -
- -
-
-
- -
- -
- -
- -
- - - - - - -
-
-
-
- - - - - - - - - - - - + + + + + + + + Infotech Programmer + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + +
+ + + + Scroll Down + + + +
+ + +
+ +
+ +
+ +

Project Description

+ +

Computer Store is a informative website providing information of latest languages used for application, web development, artificial intelligence etc. It provides the syllabus of languages in which name of each and every topic to be covered is given along with its major programs to do. It is very helpful for new students who are ready to learn some new technical languages with their interests. For more info see snapshots below and you can see below the skills used in this project.

+ +
+ +
+ + +
+ +
+ +

Project Snapshots

+

Must check these slides for little overview about this website project

+ + + +


+ Open Project + +

+
+ +
+ +

Skills Used

+ +
    +
  • +
    25%
    + HTML5 (25%) +
  • +
  • +
    25%
    + CSS3 (25%) +
  • +
  • +
    10%
    + JavaScript (10%) +
  • +
  • +
    10%
    + JQuery (10%) +
  • +
  • +
    15%
    + Bootstrap (15%) +
  • +
  • +
    5%
    + PHP (5%) +
  • +
+ +
+ +
+ +
+ + +
+ +
+
+

Contact Us

+

Get in touch and let's make something great together. Let's turn + your idea on an even greater product.

+
+
+ +
+ + + +
+

Follow Us

+ +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • + +
+ +
+
+
+ +
+ +
+ +
+ +
+ + + + + + +
+
+
+
+ + + + + + + + + + + + \ No newline at end of file