├── .editorconfig ├── LICENSE ├── README.md ├── framework ├── bonus.html ├── css │ ├── fonts.css │ ├── highlightjs │ │ ├── docco.css │ │ ├── foundation.css │ │ ├── github.css │ │ ├── googlecode.css │ │ ├── monokai.css │ │ ├── vs.css │ │ └── xcode.css │ ├── slideshow.css │ └── styles.css ├── fonts │ ├── montserrat-bold.woff2 │ ├── montserrat-regular.woff2 │ ├── opensans-light.woff2 │ ├── opensans.woff2 │ ├── pacifico.woff2 │ └── quicksand.woff2 ├── img │ ├── banner-home1.jpg │ ├── banner-home2.jpg │ ├── banner-home3.jpg │ ├── banner-home4.jpg │ ├── cc-by-nc.png │ ├── cc-by-nc.svg │ ├── favicon.ico │ ├── llc-fullcolour.png │ ├── llc-logo-stacked-white.png │ ├── llc-logo-white.png │ ├── llc-wide-fullcolour.png │ ├── telus-logo-white.svg │ └── workshop │ │ ├── 1-setup.png │ │ ├── 2-setup.png │ │ ├── 3-setup.png │ │ ├── 4-setup.png │ │ ├── atom-preferences.jpg │ │ ├── atom-settings.jpg │ │ ├── atom-soft-wrap.jpg │ │ ├── background-2.jpg │ │ ├── background-3.jpg │ │ ├── background-4.jpg │ │ ├── bg-img-norepeat.jpg │ │ ├── bg-img-position.jpg │ │ ├── bg-img-repeat.jpg │ │ ├── bloat.jpg │ │ ├── box-model-fix.gif │ │ ├── box-model.gif │ │ ├── cant-even.gif │ │ ├── chrome-user-agent.png │ │ ├── circles.png │ │ ├── css-zen-garden.png │ │ ├── css.gif │ │ ├── css.png │ │ ├── download-position.gif │ │ ├── editor-add-project-1.jpg │ │ ├── final-project.jpg │ │ ├── float-text-wrap.png │ │ ├── google-fonts.png │ │ ├── graphical-z-index.gif │ │ ├── header.jpg │ │ ├── icon-chrome.png │ │ ├── icon-fonts-skills.jpg │ │ ├── icon-sublime.jpg │ │ ├── line-height.png │ │ ├── margin-auto.png │ │ ├── mystery-space.png │ │ ├── no-css.png │ │ ├── now-what.gif │ │ ├── profile-flexbox-1.png │ │ ├── profile-flexbox-2.png │ │ ├── rgba.png │ │ ├── shittier.gif │ │ ├── spacing-1.jpg │ │ ├── spacing-2.jpg │ │ ├── style.gif │ │ └── title-transform.png ├── license.txt ├── sass │ ├── _base.scss │ ├── _theme.scss │ ├── _workshop.scss │ └── styles.scss └── scripts │ ├── classList.js │ ├── jquery-1.11.0.min.js │ ├── jquery-2.2.1.min.js │ ├── llc.js │ ├── plugins │ ├── code-highlight.js │ ├── css-controls.js │ ├── css-edit.js │ ├── css-snippets.js │ ├── highlight │ │ ├── highlight-8.4.min.js │ │ └── highlight.js │ ├── incrementable.js │ └── markdown │ │ ├── markdown.js │ │ └── marked.js │ ├── prefixfree.min.js │ └── slideshow.js ├── learner-prep-email.md ├── project ├── css │ ├── final.css │ └── styles.css ├── examples │ ├── 1-no-css.html │ ├── 10-position.css │ ├── 10-position.html │ ├── 2-bg-colours.css │ ├── 2-bg-colours.html │ ├── 3-typography.css │ ├── 3-typography.html │ ├── 4-content-wrap.css │ ├── 4-content-wrap.html │ ├── 5-fluid-content-wrap.css │ ├── 5-fluid-content-wrap.html │ ├── 6-background.css │ ├── 6-background.html │ ├── 7-more-background.css │ ├── 7-more-background.html │ ├── 8-gradients.css │ ├── 8-gradients.html │ ├── 9-flexbox.css │ ├── 9-flexbox.html │ ├── extras-animation.css │ ├── extras-animation.html │ ├── extras-circles.css │ ├── extras-circles.html │ ├── extras-download-btn.css │ ├── extras-download-btn.html │ └── images │ │ ├── background-1.jpg │ │ ├── background-2.jpg │ │ ├── background-3.jpg │ │ ├── background-4.jpg │ │ ├── background-5.jpg │ │ └── profile.jpg ├── final.html ├── images │ ├── background-1.jpg │ ├── background-2.jpg │ ├── background-3.jpg │ ├── background-4.jpg │ ├── background-5.jpg │ └── profile.jpg ├── index.html └── resume.pdf └── slides.html /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # Matches multiple files with brace expansion notation 12 | # Set default charset 13 | [*.{js,py}] 14 | charset = utf-8 15 | 16 | # 4 space indentation 17 | [*.py] 18 | indent_style = space 19 | indent_size = 4 20 | 21 | # Do NOT trim trailing whitespace because Markdown in slides needs 2 spaces to create line break 22 | [*.html] 23 | indent_style = space 24 | indent_style = 2 25 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This work is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/4.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Ladies Learning Code 2 | 3 | ##HTML & CSS Level 2: Learn to Build an Online Resume 4 | 5 | A full day introductory CSS workshop. Students should have basic understanding of HTML. 6 | 7 | ## Quick links 8 | 9 | Preview slides: http://ladieslearningcode.github.io/llc-css-fundamentals/slides.html 10 | 11 | ### Attributions 12 | 13 | Created by Jesse R Mykolyn for [Canada Learning Code](https://www.canadalearningcode.ca/). 14 | Slide presentation created by [Christina Truong](http://christinatruong.com/) for [Canada Learning Code](https://www.canadalearningcode.ca/). 15 | Contributions by Stacie DaPonte 16 | 17 | Email questions & comments to . 18 | 19 | This content was created with the advisory of and in collaboration with educators, industry representatives and technologists. These individuals have helped us to ensure that lesson content represents the technology landscape and educator needs, with learners in mind. If you'd like to contribute to future lesson content development, let us know [here](https://docs.google.com/forms/d/e/1FAIpQLSfJ8NSMKVAmzpdn3EAymxCbDDz3XZPxyDdmtQ87GECuvXzzDQ/viewform). 20 | 21 | We're really happy to see others leverage our content in their community - we’ve developed it to be used by others with attribution through a [Creative Commons (CC BY-NC 4.0) license](https://creativecommons.org/licenses/by-nc/4.0/). 22 | 23 | Here's an easy way to attribute content back to us - please include it wherever you use or make reference to our content. 24 | 25 | "Please note that this is not a [Canada Learning Code](https://www.canadalearningcode.ca/) affiliated event, but we want to acknowledge the organization for the creation of [the content](https://github.com/ladieslearningcode/llc-intro-to-javascript) being delivered under Creative Commons license" 26 | 27 | 28 | ### Contributing 29 | 30 | Our general Rule of Thumb is that it's okay to add examples if you feel it could provide more context for your community. However, we ask that instructors do not remove anything, as the content is designed with intention, whether that be meeting specific learning objectives, or maintaining our organization’s culture through the design. Any suggestions for revisions or updates can be submitted in Github via issues and pull requests. If submitting an issue, please include the slide number(s) in the title. 31 | -------------------------------------------------------------------------------- /framework/bonus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ladies Learning Code 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 | 28 |
29 | 30 |
31 | 38 |
39 | 40 |
41 | 53 |
54 | 55 |
56 | 72 |
73 | 74 |
75 | 98 |
99 | 100 |
101 | 119 |
120 | 121 |
122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /framework/css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Montserrat'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local('Montserrat-Regular'), url(../fonts/montserrat-regular.woff2) format('woff2'); 6 | } 7 | @font-face { 8 | font-family: 'Montserrat'; 9 | font-style: normal; 10 | font-weight: 700; 11 | src: local('Montserrat-Bold'), url(../fonts/montserrat-bold.woff2) format('woff2'); 12 | } 13 | @font-face { 14 | font-family: 'Pacifico'; 15 | font-style: normal; 16 | font-weight: 400; 17 | src: local('Pacifico Regular'), local('Pacifico-Regular'), url(../fonts/pacifico.woff2) format('woff2'); 18 | } 19 | @font-face { 20 | font-family: 'Quicksand'; 21 | font-style: normal; 22 | font-weight: 400; 23 | src: local('Quicksand Regular'), local('Quicksand-Regular'), url(../fonts/quicksand.woff2) format('woff2'); 24 | } 25 | @font-face { 26 | font-family: 'Open Sans'; 27 | font-style: normal; 28 | font-weight: 300; 29 | src: local('Open Sans Light'), local('OpenSans-Light'), url(../fonts/opensans.woff2) format('woff2'); 30 | } 31 | -------------------------------------------------------------------------------- /framework/css/highlightjs/docco.css: -------------------------------------------------------------------------------- 1 | /* 2 | Docco style used in http://jashkenas.github.com/docco/ converted by Simon Madine (@thingsinjars) 3 | */ 4 | 5 | .hljs { 6 | display: block; 7 | overflow-x: auto; 8 | padding: 0.5em; 9 | color: #000; 10 | background: #f8f8ff; 11 | -webkit-text-size-adjust: none; 12 | } 13 | 14 | .hljs-comment, 15 | .diff .hljs-header, 16 | .hljs-javadoc { 17 | color: #408080; 18 | font-style: italic; 19 | } 20 | 21 | .hljs-keyword, 22 | .assignment, 23 | .hljs-literal, 24 | .css .rule .hljs-keyword, 25 | .hljs-winutils, 26 | .javascript .hljs-title, 27 | .lisp .hljs-title, 28 | .hljs-subst { 29 | color: #954121; 30 | } 31 | 32 | .hljs-number, 33 | .hljs-hexcolor { 34 | color: #40a070; 35 | } 36 | 37 | .hljs-string, 38 | .hljs-tag .hljs-value, 39 | .hljs-phpdoc, 40 | .hljs-dartdoc, 41 | .tex .hljs-formula { 42 | color: #219161; 43 | } 44 | 45 | .hljs-title, 46 | .hljs-id { 47 | color: #19469d; 48 | } 49 | .hljs-params { 50 | color: #00f; 51 | } 52 | 53 | .javascript .hljs-title, 54 | .lisp .hljs-title, 55 | .hljs-subst { 56 | font-weight: normal; 57 | } 58 | 59 | .hljs-class .hljs-title, 60 | .haskell .hljs-label, 61 | .tex .hljs-command { 62 | color: #458; 63 | font-weight: bold; 64 | } 65 | 66 | .hljs-tag, 67 | .hljs-tag .hljs-title, 68 | .hljs-rules .hljs-property, 69 | .django .hljs-tag .hljs-keyword { 70 | color: #000080; 71 | font-weight: normal; 72 | } 73 | 74 | .hljs-attribute, 75 | .hljs-variable, 76 | .instancevar, 77 | .lisp .hljs-body { 78 | color: #008080; 79 | } 80 | 81 | .hljs-regexp { 82 | color: #b68; 83 | } 84 | 85 | .hljs-class { 86 | color: #458; 87 | font-weight: bold; 88 | } 89 | 90 | .hljs-symbol, 91 | .ruby .hljs-symbol .hljs-string, 92 | .ruby .hljs-symbol .hljs-keyword, 93 | .ruby .hljs-symbol .keymethods, 94 | .lisp .hljs-keyword, 95 | .tex .hljs-special, 96 | .input_number { 97 | color: #990073; 98 | } 99 | 100 | .builtin, 101 | .constructor, 102 | .hljs-built_in, 103 | .lisp .hljs-title { 104 | color: #0086b3; 105 | } 106 | 107 | .hljs-preprocessor, 108 | .hljs-pragma, 109 | .hljs-pi, 110 | .hljs-doctype, 111 | .hljs-shebang, 112 | .hljs-cdata { 113 | color: #999; 114 | font-weight: bold; 115 | } 116 | 117 | .hljs-deletion { 118 | background: #fdd; 119 | } 120 | 121 | .hljs-addition { 122 | background: #dfd; 123 | } 124 | 125 | .diff .hljs-change { 126 | background: #0086b3; 127 | } 128 | 129 | .hljs-chunk { 130 | color: #aaa; 131 | } 132 | 133 | .tex .hljs-formula { 134 | opacity: 0.5; 135 | } 136 | -------------------------------------------------------------------------------- /framework/css/highlightjs/foundation.css: -------------------------------------------------------------------------------- 1 | /* 2 | Description: Foundation 4 docs style for highlight.js 3 | Author: Dan Allen 4 | Website: http://foundation.zurb.com/docs/ 5 | Version: 1.0 6 | Date: 2013-04-02 7 | */ 8 | 9 | .hljs { 10 | display: block; 11 | overflow-x: auto; 12 | padding: 0.5em; 13 | background: #eee; 14 | -webkit-text-size-adjust: none; 15 | } 16 | 17 | .hljs-header, 18 | .hljs-decorator, 19 | .hljs-annotation { 20 | color: #000077; 21 | } 22 | 23 | .hljs-horizontal_rule, 24 | .hljs-link_url, 25 | .hljs-emphasis, 26 | .hljs-attribute { 27 | color: #070; 28 | } 29 | 30 | .hljs-emphasis { 31 | font-style: italic; 32 | } 33 | 34 | .hljs-link_label, 35 | .hljs-strong, 36 | .hljs-value, 37 | .hljs-string, 38 | .scss .hljs-value .hljs-string { 39 | color: #d14; 40 | } 41 | 42 | .hljs-strong { 43 | font-weight: bold; 44 | } 45 | 46 | .hljs-blockquote, 47 | .hljs-comment { 48 | color: #998; 49 | font-style: italic; 50 | } 51 | 52 | .asciidoc .hljs-title, 53 | .hljs-function .hljs-title { 54 | color: #900; 55 | } 56 | 57 | .hljs-class { 58 | color: #458; 59 | } 60 | 61 | .hljs-id, 62 | .hljs-pseudo, 63 | .hljs-constant, 64 | .hljs-hexcolor { 65 | color: teal; 66 | } 67 | 68 | .hljs-variable { 69 | color: #336699; 70 | } 71 | 72 | .hljs-bullet, 73 | .hljs-javadoc { 74 | color: #997700; 75 | } 76 | 77 | .hljs-pi, 78 | .hljs-doctype { 79 | color: #3344bb; 80 | } 81 | 82 | .hljs-code, 83 | .hljs-number { 84 | color: #099; 85 | } 86 | 87 | .hljs-important { 88 | color: #f00; 89 | } 90 | 91 | .smartquote, 92 | .hljs-label { 93 | color: #970; 94 | } 95 | 96 | .hljs-preprocessor, 97 | .hljs-pragma { 98 | color: #579; 99 | } 100 | 101 | .hljs-reserved, 102 | .hljs-keyword, 103 | .scss .hljs-value { 104 | color: #000; 105 | } 106 | 107 | .hljs-regexp { 108 | background-color: #fff0ff; 109 | color: #880088; 110 | } 111 | 112 | .hljs-symbol { 113 | color: #990073; 114 | } 115 | 116 | .hljs-symbol .hljs-string { 117 | color: #a60; 118 | } 119 | 120 | .hljs-tag { 121 | color: #007700; 122 | } 123 | 124 | .hljs-at_rule, 125 | .hljs-at_rule .hljs-keyword { 126 | color: #088; 127 | } 128 | 129 | .hljs-at_rule .hljs-preprocessor { 130 | color: #808; 131 | } 132 | 133 | .scss .hljs-tag, 134 | .scss .hljs-attribute { 135 | color: #339; 136 | } 137 | -------------------------------------------------------------------------------- /framework/css/highlightjs/github.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | color: #333; 12 | background: #f8f8f8; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .diff .hljs-header, 18 | .hljs-javadoc { 19 | color: #998; 20 | font-style: italic; 21 | } 22 | 23 | .hljs-keyword, 24 | .css .rule .hljs-keyword, 25 | .hljs-winutils, 26 | .nginx .hljs-title, 27 | .hljs-subst, 28 | .hljs-request, 29 | .hljs-status { 30 | color: #333; 31 | font-weight: bold; 32 | } 33 | 34 | .hljs-number, 35 | .hljs-hexcolor, 36 | .ruby .hljs-constant { 37 | color: #008080; 38 | } 39 | 40 | .hljs-string, 41 | .hljs-tag .hljs-value, 42 | .hljs-phpdoc, 43 | .hljs-dartdoc, 44 | .tex .hljs-formula { 45 | color: #d14; 46 | } 47 | 48 | .hljs-title, 49 | .hljs-id, 50 | .scss .hljs-preprocessor { 51 | color: #900; 52 | font-weight: bold; 53 | } 54 | 55 | .hljs-list .hljs-keyword, 56 | .hljs-subst { 57 | font-weight: normal; 58 | } 59 | 60 | .hljs-class .hljs-title, 61 | .hljs-type, 62 | .vhdl .hljs-literal, 63 | .tex .hljs-command { 64 | color: #458; 65 | font-weight: bold; 66 | } 67 | 68 | .hljs-tag, 69 | .hljs-tag .hljs-title, 70 | .hljs-rules .hljs-property, 71 | .django .hljs-tag .hljs-keyword { 72 | color: #000080; 73 | font-weight: normal; 74 | } 75 | 76 | .hljs-attribute, 77 | .hljs-variable, 78 | .lisp .hljs-body { 79 | color: #008080; 80 | } 81 | 82 | .hljs-regexp { 83 | color: #009926; 84 | } 85 | 86 | .hljs-symbol, 87 | .ruby .hljs-symbol .hljs-string, 88 | .lisp .hljs-keyword, 89 | .clojure .hljs-keyword, 90 | .scheme .hljs-keyword, 91 | .tex .hljs-special, 92 | .hljs-prompt { 93 | color: #990073; 94 | } 95 | 96 | .hljs-built_in { 97 | color: #0086b3; 98 | } 99 | 100 | .hljs-preprocessor, 101 | .hljs-pragma, 102 | .hljs-pi, 103 | .hljs-doctype, 104 | .hljs-shebang, 105 | .hljs-cdata { 106 | color: #999; 107 | font-weight: bold; 108 | } 109 | 110 | .hljs-deletion { 111 | background: #fdd; 112 | } 113 | 114 | .hljs-addition { 115 | background: #dfd; 116 | } 117 | 118 | .diff .hljs-change { 119 | background: #0086b3; 120 | } 121 | 122 | .hljs-chunk { 123 | color: #aaa; 124 | } 125 | -------------------------------------------------------------------------------- /framework/css/highlightjs/googlecode.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Google Code style (c) Aahan Krish 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | background: white; 12 | color: black; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .hljs-javadoc { 18 | color: #800; 19 | } 20 | 21 | .hljs-keyword, 22 | .method, 23 | .hljs-list .hljs-keyword, 24 | .nginx .hljs-title, 25 | .hljs-tag .hljs-title, 26 | .setting .hljs-value, 27 | .hljs-winutils, 28 | .tex .hljs-command, 29 | .http .hljs-title, 30 | .hljs-request, 31 | .hljs-status { 32 | color: #008; 33 | } 34 | 35 | .hljs-envvar, 36 | .tex .hljs-special { 37 | color: #660; 38 | } 39 | 40 | .hljs-string, 41 | .hljs-tag .hljs-value, 42 | .hljs-cdata, 43 | .hljs-filter .hljs-argument, 44 | .hljs-attr_selector, 45 | .apache .hljs-cbracket, 46 | .hljs-date, 47 | .hljs-regexp, 48 | .coffeescript .hljs-attribute { 49 | color: #080; 50 | } 51 | 52 | .hljs-sub .hljs-identifier, 53 | .hljs-pi, 54 | .hljs-tag, 55 | .hljs-tag .hljs-keyword, 56 | .hljs-decorator, 57 | .ini .hljs-title, 58 | .hljs-shebang, 59 | .hljs-prompt, 60 | .hljs-hexcolor, 61 | .hljs-rules .hljs-value, 62 | .hljs-literal, 63 | .hljs-symbol, 64 | .ruby .hljs-symbol .hljs-string, 65 | .hljs-number, 66 | .css .hljs-function, 67 | .clojure .hljs-attribute { 68 | color: #066; 69 | } 70 | 71 | .hljs-class .hljs-title, 72 | .smalltalk .hljs-class, 73 | .hljs-javadoctag, 74 | .hljs-yardoctag, 75 | .hljs-phpdoc, 76 | .hljs-dartdoc, 77 | .hljs-type, 78 | .hljs-typename, 79 | .hljs-tag .hljs-attribute, 80 | .hljs-doctype, 81 | .hljs-class .hljs-id, 82 | .hljs-built_in, 83 | .setting, 84 | .hljs-params, 85 | .hljs-variable { 86 | color: #606; 87 | } 88 | 89 | .css .hljs-tag, 90 | .hljs-rules .hljs-property, 91 | .hljs-pseudo, 92 | .hljs-subst { 93 | color: #000; 94 | } 95 | 96 | .css .hljs-class, 97 | .css .hljs-id { 98 | color: #9b703f; 99 | } 100 | 101 | .hljs-value .hljs-important { 102 | color: #ff7700; 103 | font-weight: bold; 104 | } 105 | 106 | .hljs-rules .hljs-keyword { 107 | color: #c5af75; 108 | } 109 | 110 | .hljs-annotation, 111 | .apache .hljs-sqbracket, 112 | .nginx .hljs-built_in { 113 | color: #9b859d; 114 | } 115 | 116 | .hljs-preprocessor, 117 | .hljs-preprocessor *, 118 | .hljs-pragma { 119 | color: #444; 120 | } 121 | 122 | .tex .hljs-formula { 123 | background-color: #eee; 124 | font-style: italic; 125 | } 126 | 127 | .diff .hljs-header, 128 | .hljs-chunk { 129 | color: #808080; 130 | font-weight: bold; 131 | } 132 | 133 | .diff .hljs-change { 134 | background-color: #bccff9; 135 | } 136 | 137 | .hljs-addition { 138 | background-color: #baeeba; 139 | } 140 | 141 | .hljs-deletion { 142 | background-color: #ffc8bd; 143 | } 144 | 145 | .hljs-comment .hljs-yardoctag { 146 | font-weight: bold; 147 | } 148 | -------------------------------------------------------------------------------- /framework/css/highlightjs/monokai.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Zenburn style from voldmar.ru (c) Vladimir Epifanov 4 | based on dark.css by Ivan Sagalaev 5 | 6 | */ 7 | 8 | pre code { 9 | display: block; 10 | padding: 0.5em; 11 | background: #272822; 12 | color: white; 13 | } 14 | 15 | .tag:nth-child(2) { 16 | color: #fff; 17 | } 18 | 19 | /* pink */ 20 | .tag .title, 21 | .css .tag { 22 | color: #F92772; 23 | } 24 | 25 | /* green */ 26 | .tag .attribute, 27 | .css .class, 28 | .css .id, 29 | .css .pseudo, 30 | .function .title { 31 | color: #A6E22D; 32 | } 33 | 34 | /* yellow */ 35 | .tag .value, 36 | .string { 37 | color: #E6DB74; 38 | } 39 | 40 | /* blue */ 41 | .rule .attribute, 42 | .tag .value, 43 | .rule .value, 44 | .keyword { 45 | color: #66D9EF; 46 | } 47 | 48 | /* purple */ 49 | .number, 50 | .literal, 51 | .rule .value .hexcolor { 52 | color: #AE81FF; 53 | } 54 | 55 | /* orange */ 56 | .value .function, 57 | .important, 58 | .function .params { 59 | color: #FD9720; 60 | } 61 | 62 | /* grey */ 63 | 64 | .comment { 65 | color: #75715E; 66 | } -------------------------------------------------------------------------------- /framework/css/highlightjs/vs.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Visual Studio-like style based on original C# coloring by Jason Diamond 4 | 5 | */ 6 | .hljs { 7 | display: block; 8 | overflow-x: auto; 9 | padding: 0.5em; 10 | background: white; 11 | color: black; 12 | -webkit-text-size-adjust: none; 13 | } 14 | 15 | .hljs-comment, 16 | .hljs-annotation, 17 | .diff .hljs-header, 18 | .hljs-chunk, 19 | .apache .hljs-cbracket { 20 | color: #008000; 21 | } 22 | 23 | .hljs-keyword, 24 | .hljs-id, 25 | .hljs-built_in,.css 26 | .smalltalk .hljs-class, 27 | .hljs-winutils, 28 | .bash .hljs-variable, 29 | .tex .hljs-command, 30 | .hljs-request, 31 | .hljs-status, 32 | .nginx .hljs-title, 33 | .xml .hljs-tag, 34 | .xml .hljs-tag .hljs-value { 35 | color: #00f; 36 | } 37 | 38 | .hljs-string, 39 | .hljs-title, 40 | .hljs-parent, 41 | .hljs-tag .hljs-value, 42 | .hljs-rules .hljs-value, 43 | .ruby .hljs-symbol, 44 | .ruby .hljs-symbol .hljs-string, 45 | .hljs-template_tag, 46 | .django .hljs-variable, 47 | .hljs-addition, 48 | .hljs-flow, 49 | .hljs-stream, 50 | .apache .hljs-tag, 51 | .hljs-date, 52 | .tex .hljs-formula, 53 | .coffeescript .hljs-attribute { 54 | color: #a31515; 55 | } 56 | 57 | .ruby .hljs-string, 58 | .hljs-decorator, 59 | .hljs-filter .hljs-argument, 60 | .hljs-localvars, 61 | .hljs-array, 62 | .hljs-attr_selector, 63 | .hljs-pseudo, 64 | .hljs-pi, 65 | .hljs-doctype, 66 | .hljs-deletion, 67 | .hljs-envvar, 68 | .hljs-shebang, 69 | .hljs-preprocessor, 70 | .hljs-pragma, 71 | .userType, 72 | .apache .hljs-sqbracket, 73 | .nginx .hljs-built_in, 74 | .tex .hljs-special, 75 | .hljs-prompt { 76 | color: #2b91af; 77 | } 78 | 79 | .hljs-phpdoc, 80 | .hljs-dartdoc, 81 | .hljs-javadoc, 82 | .hljs-xmlDocTag { 83 | color: #808080; 84 | } 85 | 86 | .hljs-type, 87 | .hljs-typename { font-weight: bold; } 88 | 89 | .vhdl .hljs-string { color: #666666; } 90 | .vhdl .hljs-literal { color: #a31515; } 91 | .vhdl .hljs-attribute { color: #00b0e8; } 92 | 93 | .xml .hljs-attribute { color: #f00; } 94 | -------------------------------------------------------------------------------- /framework/css/highlightjs/xcode.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | XCode style (c) Angel Garcia 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; 9 | overflow-x: auto; 10 | padding: 0.5em; 11 | background: #fff; 12 | color: black; 13 | -webkit-text-size-adjust: none; 14 | } 15 | 16 | .hljs-comment, 17 | .hljs-javadoc { 18 | color: #006a00; 19 | } 20 | 21 | .hljs-keyword, 22 | .hljs-literal, 23 | .nginx .hljs-title { 24 | color: #aa0d91; 25 | } 26 | .method, 27 | .hljs-list .hljs-title, 28 | .hljs-tag .hljs-title, 29 | .setting .hljs-value, 30 | .hljs-winutils, 31 | .tex .hljs-command, 32 | .http .hljs-title, 33 | .hljs-request, 34 | .hljs-status { 35 | color: #008; 36 | } 37 | 38 | .hljs-envvar, 39 | .tex .hljs-special { 40 | color: #660; 41 | } 42 | 43 | .hljs-string { 44 | color: #c41a16; 45 | } 46 | .hljs-tag .hljs-value, 47 | .hljs-cdata, 48 | .hljs-filter .hljs-argument, 49 | .hljs-attr_selector, 50 | .apache .hljs-cbracket, 51 | .hljs-date, 52 | .hljs-regexp { 53 | color: #080; 54 | } 55 | 56 | .hljs-sub .hljs-identifier, 57 | .hljs-pi, 58 | .hljs-tag, 59 | .hljs-tag .hljs-keyword, 60 | .hljs-decorator, 61 | .ini .hljs-title, 62 | .hljs-shebang, 63 | .hljs-prompt, 64 | .hljs-hexcolor, 65 | .hljs-rules .hljs-value, 66 | .hljs-symbol, 67 | .hljs-symbol .hljs-string, 68 | .hljs-number, 69 | .css .hljs-function, 70 | .hljs-function .hljs-title, 71 | .coffeescript .hljs-attribute { 72 | color: #1c00cf; 73 | } 74 | 75 | .hljs-class .hljs-title, 76 | .smalltalk .hljs-class, 77 | .hljs-javadoctag, 78 | .hljs-yardoctag, 79 | .hljs-phpdoc, 80 | .hljs-dartdoc, 81 | .hljs-type, 82 | .hljs-typename, 83 | .hljs-tag .hljs-attribute, 84 | .hljs-doctype, 85 | .hljs-class .hljs-id, 86 | .hljs-built_in, 87 | .setting, 88 | .hljs-params, 89 | .clojure .hljs-attribute { 90 | color: #5c2699; 91 | } 92 | 93 | .hljs-variable { 94 | color: #3f6e74; 95 | } 96 | .css .hljs-tag, 97 | .hljs-rules .hljs-property, 98 | .hljs-pseudo, 99 | .hljs-subst { 100 | color: #000; 101 | } 102 | 103 | .css .hljs-class, 104 | .css .hljs-id { 105 | color: #9b703f; 106 | } 107 | 108 | .hljs-value .hljs-important { 109 | color: #ff7700; 110 | font-weight: bold; 111 | } 112 | 113 | .hljs-rules .hljs-keyword { 114 | color: #c5af75; 115 | } 116 | 117 | .hljs-annotation, 118 | .apache .hljs-sqbracket, 119 | .nginx .hljs-built_in { 120 | color: #9b859d; 121 | } 122 | 123 | .hljs-preprocessor, 124 | .hljs-preprocessor *, 125 | .hljs-pragma { 126 | color: #643820; 127 | } 128 | 129 | .tex .hljs-formula { 130 | background-color: #eee; 131 | font-style: italic; 132 | } 133 | 134 | .diff .hljs-header, 135 | .hljs-chunk { 136 | color: #808080; 137 | font-weight: bold; 138 | } 139 | 140 | .diff .hljs-change { 141 | background-color: #bccff9; 142 | } 143 | 144 | .hljs-addition { 145 | background-color: #baeeba; 146 | } 147 | 148 | .hljs-deletion { 149 | background-color: #ffc8bd; 150 | } 151 | 152 | .hljs-comment .hljs-yardoctag { 153 | font-weight: bold; 154 | } 155 | 156 | .method .hljs-id { 157 | color: #000; 158 | } 159 | -------------------------------------------------------------------------------- /framework/css/slideshow.css: -------------------------------------------------------------------------------- 1 | /** 2 | Basic CSS so that the slideshow script functions as a slideshow 3 | @author Lea Verou 4 | @version 1.0 5 | 6 | Don't alter - CSSS slide deck needs it to work 7 | https://github.com/LeaVerou/csss 8 | */ 9 | 10 | /** 11 | * "Variables" 12 | */ 13 | .slide, 14 | .delayed, 15 | .delayed-children > * { 16 | transition:.5s; 17 | transition-property: transform, opacity, left, top, right, bottom, background; 18 | } 19 | 20 | /** 21 | * Styles 22 | */ 23 | 24 | html, body { 25 | height: 100%; 26 | } 27 | 28 | body { 29 | margin: 0; 30 | } 31 | 32 | .slide { 33 | display: none; 34 | position:absolute; 35 | top:0; 36 | right:0; 37 | bottom:0; 38 | left:0; 39 | z-index:1; 40 | 41 | /*font-size:250%; 42 | line-height:1.6;*/ 43 | } 44 | 45 | .slide.previous, 46 | .slide:target, 47 | .slide.next { 48 | display: block; 49 | visibility: hidden; 50 | overflow:hidden; 51 | } 52 | 53 | .slide:target { 54 | z-index:100; 55 | opacity:1; 56 | visibility: visible; 57 | overflow: visible; 58 | } 59 | 60 | /** 61 | Slide numbers 62 | */ 63 | #indicator { 64 | position: absolute; 65 | top: .05in; 66 | right: .5em; 67 | z-index: 1010; 68 | 69 | font-size: .15in; 70 | color: white; 71 | background: rgba(0,0,0,.25); 72 | font-weight: 900; 73 | text-shadow: .05em .05em .1em black; 74 | text-align: center; 75 | padding: .1em .3em 0; 76 | min-width: 1.6em; 77 | box-sizing: border-box; 78 | border-radius: 999px; 79 | } 80 | 81 | /** 82 | On-screen navigation 83 | */ 84 | #onscreen-nav { 85 | z-index: 1010; 86 | position: absolute; 87 | bottom: 0; 88 | left: 0; 89 | right: 0; 90 | padding: 0 1em 1em; 91 | font-size: 150%; 92 | opacity: 0; 93 | transition: 1s opacity; 94 | } 95 | 96 | @media (-webkit-min-device-pixel-ratio: 2) { 97 | #onscreen-nav { 98 | opacity: 1; 99 | } 100 | } 101 | 102 | #onscreen-nav:hover { 103 | opacity: 1; 104 | } 105 | 106 | #onscreen-nav:not(:hover) button { 107 | margin-top: -1.5em; 108 | pointer-events: none; 109 | } 110 | 111 | button.onscreen-nav { 112 | float: right; 113 | padding: .2em .5em; 114 | border: 0; 115 | border-radius: .3em; 116 | background: rgba(0,0,0,.5); 117 | color: white; 118 | text-shadow: 0 -.05em .05em black; 119 | text-transform: uppercase; 120 | cursor: pointer; 121 | } 122 | 123 | button.onscreen-nav:hover { 124 | background: black; 125 | } 126 | 127 | button.onscreen-nav.prev { 128 | float: left; 129 | } 130 | 131 | /* If there's nothing selected, show the first */ 132 | .slide:first-child { 133 | z-index:2; 134 | } 135 | 136 | /* Delayed items that are shown incrementally after the slide is */ 137 | .delayed, 138 | .delayed-children > * { 139 | opacity: 0; 140 | } 141 | 142 | .delayed.displayed, 143 | .delayed-children > .displayed { 144 | opacity: .3; 145 | } 146 | 147 | .delayed.current, 148 | .delayed-children > .current, 149 | .delayed.displayed.non-dismissable, 150 | .delayed-children > .displayed.non-dismissable, /* non-dismissable name is deprecated */ 151 | .delayed.displayed.persistent, 152 | .delayed-children > .displayed.persistent, 153 | .delayed-children.persistent > .displayed { 154 | opacity: 1; 155 | } 156 | 157 | /** 158 | iframe slides 159 | */ 160 | .iframe.slide { 161 | padding: 0 !important; 162 | background: white; 163 | text-align: center; 164 | } 165 | 166 | .iframe.slide > h1 { 167 | position: absolute; 168 | bottom: 0; right: 0; left: 0; 169 | background: rgba(0,0,0,.5); 170 | font-size: 100%; 171 | } 172 | 173 | .iframe.slide > h1 > a { 174 | display: inline-block; 175 | padding: .2em .5em; 176 | 177 | color: white; 178 | text-align: center; 179 | text-decoration: none; 180 | text-shadow: 0 -.05em .05em black; 181 | } 182 | 183 | /* .slide > iframe:only-of-type, */ 184 | iframe.csss-import { 185 | position: absolute; 186 | top: 0; 187 | left: 0; 188 | border: 0; 189 | width: 100%; 190 | height: 100%; 191 | margin: 0; 192 | } 193 | 194 | iframe.csss-import { 195 | 196 | } 197 | 198 | iframe.csss-import:not(.show) { 199 | z-index: -1; 200 | visibility: hidden; 201 | } 202 | 203 | iframe.csss-import.show { 204 | visibility: visible; 205 | z-index: 101; 206 | } 207 | 208 | /** 209 | Show thumbnails 210 | */ 211 | 212 | .show-thumbnails { 213 | overflow-x: hidden; 214 | } 215 | 216 | .show-thumbnails .slide, 217 | .presenter .slide.next { 218 | width: 1024px; 219 | height: 768px; 220 | box-sizing: border-box; 221 | 222 | float: left; 223 | overflow: hidden; 224 | position: static; 225 | opacity: 1; 226 | margin:-292px -395px; 227 | cursor: pointer; 228 | 229 | transform: scale(.2, .2); 230 | transition:1s transform; 231 | } 232 | 233 | .show-thumbnails.headers-only .slide { 234 | display: none; 235 | } 236 | 237 | .show-thumbnails.headers-only header.slide { 238 | display: block; 239 | } 240 | 241 | .show-thumbnails .slide .delayed, 242 | .presenter .slide:target + .slide .delayed { 243 | opacity: 1; 244 | } 245 | 246 | .show-thumbnails .slide:hover, 247 | .show-thumbnails .slide:target, 248 | .presenter .slide:target + .slide { 249 | outline: 20px solid rgba(255, 255, 255, .6); 250 | outline-radius:5px; 251 | 252 | box-shadow: 5px 5px 10px black; 253 | } 254 | 255 | .show-thumbnails .slide:target { 256 | outline-color: rgba(255, 255, 255, .3); 257 | } 258 | 259 | .show-thumbnails .slide:target:hover { 260 | outline-color: rgba(255, 255, 255, .9); 261 | } 262 | 263 | /* Display titles */ 264 | .show-thumbnails .slide[data-title]:after { 265 | content: attr(data-title); 266 | position: absolute; 267 | left: 0; 268 | right: 0; 269 | bottom: 0; 270 | padding: .1em 0; 271 | background: rgba(0,0,0,.5); 272 | color: white; 273 | font-size: 250%; 274 | text-align: center; 275 | text-shadow: .05em .05em .1em black; 276 | transform: none; 277 | } 278 | 279 | /* Hide all elements in slide by hitting Ctrl + J or Shift + J */ 280 | .hide-elements .slide:target > * { 281 | opacity: 0; 282 | transition:.5s; 283 | } 284 | 285 | /* Timer */ 286 | 287 | #timer { 288 | position:absolute; 289 | top:0; 290 | left:0; 291 | z-index:101; 292 | width:0%; 293 | height:16px; 294 | line-height: 16px; 295 | padding: 0 5px; 296 | background:rgba(0,0,0,.5); 297 | overflow: hidden; 298 | text-align: right; 299 | box-sizing: border-box; 300 | transition: linear; 301 | } 302 | 303 | #timer:before { 304 | content: 'Progress '; 305 | text-transform: uppercase; 306 | color: white; 307 | font-size: 9px; 308 | } 309 | 310 | #timer.end { 311 | width: 100%; 312 | } 313 | 314 | #timer.end.overtime { 315 | width: 0%; 316 | left: auto; 317 | right: 0; 318 | } 319 | 320 | /* Presenter & projector views */ 321 | 322 | .projector #timer { 323 | display: none; 324 | } 325 | 326 | .presenter-notes { 327 | display: none; 328 | position: fixed; 329 | right: 230px; 330 | bottom: 0; 331 | left: 0; 332 | max-height: 6em; 333 | overflow: auto; 334 | padding: .6em 1em; 335 | font-size: 60%; 336 | line-height: 1.3; 337 | font-weight: normal; 338 | resize:vertical; 339 | background: rgba(255, 255, 255, .5); 340 | color: black; 341 | text-shadow: 0 1px white; 342 | box-shadow: .1em .1em .3em rgba(0,0,0,.5) inset; 343 | } 344 | 345 | .presenter .slide.next { 346 | position: fixed; 347 | top: auto; 348 | right: 0; 349 | bottom: 0; 350 | left: auto; 351 | z-index: 100; 352 | } 353 | 354 | .presenter .slide:target > .presenter-notes { 355 | display: block; 356 | } 357 | -------------------------------------------------------------------------------- /framework/css/styles.css: -------------------------------------------------------------------------------- 1 | *,*:before,*:after{box-sizing:border-box}html{font-size:62.5%}@media (min-width: 1401px){html{font-size:70%}}body{padding:0;margin:0;font-size:3.2rem;line-height:1.4;font-family:"Montserrat",sans-serif;color:#444;border-top:4px solid #b109aa;-webkit-font-smoothing:antialiased;background:#ecf0f1}strong{font-weight:700;color:black}h1{font-family:"Quicksand",sans-serif;letter-spacing:-0.05em;text-transform:uppercase;margin:0 0 25px;color:#b109aa;font-size:4rem}.title h1{font-size:7.5rem;font-weight:400}h1 code{font-size:inherit;color:inherit;font-family:inherit;background:transparent}h2,h3{margin:0}h2+p,h2+ul,h2+ol,h3+p,h3+ul,h3+ol{margin-top:6px}h2{font-size:3.2rem}h3{font-size:2.88rem}a{outline:none;color:inherit}a:hover{color:#b109aa;text-decoration:none}hr{border:none;border-top:1px solid #bdc3c7;clear:both;margin:30px 0 0;display:inline-block;width:100%}hr+p{margin-top:16px}p{margin-bottom:0}p+h2{margin-top:30px}iframe{margin-top:15px}ol>li,ul>li{margin-bottom:6px}ol ol,ol ul,ul ol,ul ul{margin-top:6px;font-size:2.88rem}ul{padding:0}ul>li{margin-left:24px;list-style-type:none}ul>li:before{content:"\203A";font-family:"Quicksand",sans-serif;font-weight:bold;margin-left:-19px;padding-right:10px}p+ul,p+ol{margin-top:20px}.nested-list>ul{margin-left:-24px}.nested-list>ul>li:before{content:"";margin-left:-10px}.nested-list>ul ol,.nested-list>ul ul{width:90%;margin-bottom:25px}.nested-list .resources+ul>li{margin-left:35px}.nested-list .resources+ul>li:before{content:"\203A"}.two-col-list>ul,.two-col-list>ol{overflow:hidden}.two-col-list>ul>li,.two-col-list>ol>li{width:45%;float:left;margin-left:4px}.two-col-list>ul>li:first-child,.two-col-list>ol>li:first-child{margin-right:5%}.two-col-list>ul>li:before,.two-col-list>ol>li:before{content:"";margin-left:-12px}.two-col-list>.resources+ul>li{width:100%;margin-left:12px}.two-col-list>.resources+ul>li:before{content:"\203A"}table{border-spacing:0;border-collapse:collapse}table pre{margin:0}table code{background:transparent}table .hljs{border:none;background:transparent}table img{width:100%}th,td{border:1px solid #bdc3c7;padding:10px}th{text-align:left;font-weight:normal}.two-col-table td{width:50%}.note,.small-type .note,.resources,.resources+*{line-height:1.3;font-size:2.4rem !important}.note code,.small-type .note code,.resources code,.resources+* code{font-size:inherit}.resources,.resources+*{margin-top:2px}.resources{margin-bottom:5px}.resources+ul li{margin-bottom:0}.left{float:left}.left+ul{padding-left:10px}img.left,iframe.left{margin-right:30px}img.right,iframe.right{margin-left:30px}.right{float:right}.centered{text-align:center}.centered-media img,.centered-media iframe{margin:0 auto;display:block}.cursive{font-family:"Pacifico",cursive;color:#b109aa}.highlight em,a.highlight{color:#b109aa;font-size:106%;padding-right:2px}.small-type p,.small-type ul,.small-type ol{font-size:2.88rem;line-height:1.3}[class^="col-"],[class*="col-"]{float:left;margin-right:2%}[class^="col-"]:last-child,[class*="col-"]:last-child{margin-right:0}.col-2{width:48%}.col-3{width:32%}.col-narrow{width:38%}.col-wide{width:60%}.slide{padding:45px 64px;background-size:cover;height:100%;width:100%;max-width:1600px;margin:0 auto}.slide:after{content:" ";display:block;height:200px}.slide img{max-width:100%}.slide.centered{text-align:center}.slide.centered img{width:60%}.slide .logo{width:350px}.slide .logo-stacked{width:150px}#indicator{top:15px;right:20px;font-size:20px;text-shadow:none;color:#b109aa;background:white;padding:2px 8px}.side-by-side img{width:49%;display:inline-block;vertical-align:top}.slide.title{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;padding-left:8%;padding-right:8%;background:#222}.slide.title h1,.slide.title h2{position:relative;text-align:center;top:40%;-webkit-transform:translateY(-40%);transform:translateY(-40%)}.slide.title h1{margin-bottom:0px;line-height:1.1}.slide.title h2{color:#fff;letter-spacing:0.05rem;font-size:4rem;font-family:"Quicksand",sans-serif;text-transform:uppercase}#timer{height:4px;line-height:4px;background:#000}#timer:before{content:""}.edit{float:left;background:#FFEFD5;border-right:1px solid #ffc86f;border-bottom:1px solid #ffc86f;font-size:11px;padding:6px 14px;position:relative;bottom:-20px;left:1px;margin-bottom:-25px;text-transform:uppercase;font-weight:bold}p textarea.snippet{margin-top:-15px;margin-bottom:-10px}p .edit{margin-top:-34px}textarea.snippet{width:100%;border:1px solid #222;padding:35px 12px 12px;margin:15px 0;font-size:20px !important;font-family:Andale Mono, Monaco, monospace;line-height:1.4}textarea.snippet+.example{margin-top:0}.example,blockquote{font-size:2.88rem;margin:15px 0}.example p,blockquote p{margin:10px}.example{border:1px solid #bdc3c7;padding:5px 10px}blockquote{background:#fff;border:3px solid rgba(177,9,170,0.2)}.delayed.displayed,.delayed-children>.displayed{opacity:1}.heading-bg span{background:rgba(177,9,170,0.8);border-radius:5px;padding:0 10px 0 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}.heading-bg span.light{background:rgba(255,255,255,0.6)}.heading-bg span.dark,.heading-bg span.light{color:#222}.welcome.slide{padding:0}.welcome .logo-stacked{margin-right:50px}.welcome h1,.welcome .instructions{padding:30px 64px}.welcome .instructions p{margin:0;line-height:1.32}.welcome h1{background:#111;line-height:1;margin:0;font-size:55px}.welcome h2{float:left;color:black;width:21%;font-family:"Quicksand",sans-serif;color:#b109aa;text-transform:uppercase;font-size:30px}.welcome ol,.welcome ul{float:left;width:79%;margin:0}.welcome ol ul,.welcome ol ol,.welcome ul ul,.welcome ul ol{float:none;width:100%}.welcome ol.connected li:before,.welcome ul.connected li:before{content:""}.welcome ol.downloads>li,.welcome ul.downloads>li{margin-bottom:15px}.slide.intro h1,.slide.intro h2,.slide.last h1,.slide.last h2{font-weight:400}.slide.intro h1,.slide.last h1{font-size:7.5rem}.slide.intro h2,.slide.last h2{font-size:4rem}.slide.intro .instructor,.slide.last .instructor{border-radius:50%;max-width:225px;float:left;margin-right:30px}.slide.intro .cursive,.slide.last .cursive{margin-left:-5px}.slide.intro ul li,.slide.last ul li{margin:0}.slide.intro ul li:before,.slide.last ul li:before{content:""}.slide.intro:after{height:0px}.slide.intro h1,.slide.intro h2{color:#fff}.slide.intro h1{margin-bottom:10px}.slide.intro a{color:white}.slide.intro footer a{color:#b109aa}.slide.last .heading-bg{font-family:"Quicksand",sans-serif;text-transform:uppercase;color:white;margin-bottom:20px}.slide.last .attribution{position:absolute;bottom:15px;font-size:1.6rem}.sponsor{position:absolute;bottom:45px;right:40px;text-align:right;font-size:20px;color:white}.sponsor img{width:300px;margin-right:-9px}footer{position:fixed;bottom:0;width:100%;background:white;font-size:1.6rem}footer p{margin:6px 10px 0 8px}footer .arrow{color:#b109aa}footer img{margin-bottom:-5px}.slide.intro footer{margin:0 -64px}.table-of-contents{font-size:2.88rem}.table-of-contents li{margin-bottom:2px}.table-of-contents a{color:#222}.table-of-contents a:hover{color:#b109aa}pre{margin:18px 0 12px;white-space:pre-wrap}pre code{overflow-y:auto;font-size:2.4rem}pre+pre{margin-top:15px}pre+h2{margin-top:25px}pre+hr{margin-top:35px}code{color:#555;padding:0 8px;display:inline-block;background:white;font-size:3.52rem;border-radius:4px;position:relative;top:-2px}@-moz-document url-prefix(){code{font-size:3rem}}.highlighted-tags strong{background:#ddd;padding:5px;color:black;display:inline-block;font-weight:bold}.highlighted-tags strong [class^="hljs-"]{color:black;font-weight:bold}.hljs{padding:12px;border-radius:2px;border:1px solid #bdc3c7;word-wrap:break-word}.hljs-doctype,.hljs-comment{color:#990}.php .hljs-preprocessor{color:green}.presenter-notes{bottom:0;width:100%;background:rgba(255,255,255,0.9);font-size:18px;margin:0;max-height:inherit}.presenter-notes p{margin-top:0}.slide.intro{background:-webkit-linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url(../img/banner-home1.jpg) no-repeat;background:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url(../img/banner-home1.jpg) no-repeat;background-size:cover}.slide.project{text-align:center}.slide.background{border-top: 4px solid #b109aa;background:url(../img/workshop/background-2.jpg);background-size:cover}.slide.background h1{color:black;font-weight:700}.slide.background-2{border-top: 4px solid #b109aa;background:-webkit-linear-gradient(rgba(177,9,170,0.6), rgba(0,0,0,0.8)),url(../img/workshop/background-4.jpg);background:linear-gradient(rgba(177,9,170,0.6), rgba(0,0,0,0.8)),url(../img/workshop/background-4.jpg);background-size:cover}.slide.background-2 h1,.slide.background-2 h2{color:white;background:rgba(0,0,0,0.5)} 2 | -------------------------------------------------------------------------------- /framework/fonts/montserrat-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/fonts/montserrat-bold.woff2 -------------------------------------------------------------------------------- /framework/fonts/montserrat-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/fonts/montserrat-regular.woff2 -------------------------------------------------------------------------------- /framework/fonts/opensans-light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/fonts/opensans-light.woff2 -------------------------------------------------------------------------------- /framework/fonts/opensans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/fonts/opensans.woff2 -------------------------------------------------------------------------------- /framework/fonts/pacifico.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/fonts/pacifico.woff2 -------------------------------------------------------------------------------- /framework/fonts/quicksand.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/fonts/quicksand.woff2 -------------------------------------------------------------------------------- /framework/img/banner-home1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/banner-home1.jpg -------------------------------------------------------------------------------- /framework/img/banner-home2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/banner-home2.jpg -------------------------------------------------------------------------------- /framework/img/banner-home3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/banner-home3.jpg -------------------------------------------------------------------------------- /framework/img/banner-home4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/banner-home4.jpg -------------------------------------------------------------------------------- /framework/img/cc-by-nc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/cc-by-nc.png -------------------------------------------------------------------------------- /framework/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/favicon.ico -------------------------------------------------------------------------------- /framework/img/llc-fullcolour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/llc-fullcolour.png -------------------------------------------------------------------------------- /framework/img/llc-logo-stacked-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/llc-logo-stacked-white.png -------------------------------------------------------------------------------- /framework/img/llc-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/llc-logo-white.png -------------------------------------------------------------------------------- /framework/img/llc-wide-fullcolour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/llc-wide-fullcolour.png -------------------------------------------------------------------------------- /framework/img/telus-logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 12 | 17 | 19 | 23 | 24 | 26 | 36 | 37 | 39 | 40 | 41 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /framework/img/workshop/1-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/1-setup.png -------------------------------------------------------------------------------- /framework/img/workshop/2-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/2-setup.png -------------------------------------------------------------------------------- /framework/img/workshop/3-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/3-setup.png -------------------------------------------------------------------------------- /framework/img/workshop/4-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/4-setup.png -------------------------------------------------------------------------------- /framework/img/workshop/atom-preferences.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/atom-preferences.jpg -------------------------------------------------------------------------------- /framework/img/workshop/atom-settings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/atom-settings.jpg -------------------------------------------------------------------------------- /framework/img/workshop/atom-soft-wrap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/atom-soft-wrap.jpg -------------------------------------------------------------------------------- /framework/img/workshop/background-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/background-2.jpg -------------------------------------------------------------------------------- /framework/img/workshop/background-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/background-3.jpg -------------------------------------------------------------------------------- /framework/img/workshop/background-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/background-4.jpg -------------------------------------------------------------------------------- /framework/img/workshop/bg-img-norepeat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/bg-img-norepeat.jpg -------------------------------------------------------------------------------- /framework/img/workshop/bg-img-position.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/bg-img-position.jpg -------------------------------------------------------------------------------- /framework/img/workshop/bg-img-repeat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/bg-img-repeat.jpg -------------------------------------------------------------------------------- /framework/img/workshop/bloat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/bloat.jpg -------------------------------------------------------------------------------- /framework/img/workshop/box-model-fix.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/box-model-fix.gif -------------------------------------------------------------------------------- /framework/img/workshop/box-model.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/box-model.gif -------------------------------------------------------------------------------- /framework/img/workshop/cant-even.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/cant-even.gif -------------------------------------------------------------------------------- /framework/img/workshop/chrome-user-agent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/chrome-user-agent.png -------------------------------------------------------------------------------- /framework/img/workshop/circles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/circles.png -------------------------------------------------------------------------------- /framework/img/workshop/css-zen-garden.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/css-zen-garden.png -------------------------------------------------------------------------------- /framework/img/workshop/css.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/css.gif -------------------------------------------------------------------------------- /framework/img/workshop/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/css.png -------------------------------------------------------------------------------- /framework/img/workshop/download-position.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/download-position.gif -------------------------------------------------------------------------------- /framework/img/workshop/editor-add-project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/editor-add-project-1.jpg -------------------------------------------------------------------------------- /framework/img/workshop/final-project.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/final-project.jpg -------------------------------------------------------------------------------- /framework/img/workshop/float-text-wrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/float-text-wrap.png -------------------------------------------------------------------------------- /framework/img/workshop/google-fonts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/google-fonts.png -------------------------------------------------------------------------------- /framework/img/workshop/graphical-z-index.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/graphical-z-index.gif -------------------------------------------------------------------------------- /framework/img/workshop/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/header.jpg -------------------------------------------------------------------------------- /framework/img/workshop/icon-chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/icon-chrome.png -------------------------------------------------------------------------------- /framework/img/workshop/icon-fonts-skills.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/icon-fonts-skills.jpg -------------------------------------------------------------------------------- /framework/img/workshop/icon-sublime.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/icon-sublime.jpg -------------------------------------------------------------------------------- /framework/img/workshop/line-height.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/line-height.png -------------------------------------------------------------------------------- /framework/img/workshop/margin-auto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/margin-auto.png -------------------------------------------------------------------------------- /framework/img/workshop/mystery-space.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/mystery-space.png -------------------------------------------------------------------------------- /framework/img/workshop/no-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/no-css.png -------------------------------------------------------------------------------- /framework/img/workshop/now-what.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/now-what.gif -------------------------------------------------------------------------------- /framework/img/workshop/profile-flexbox-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/profile-flexbox-1.png -------------------------------------------------------------------------------- /framework/img/workshop/profile-flexbox-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/profile-flexbox-2.png -------------------------------------------------------------------------------- /framework/img/workshop/rgba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/rgba.png -------------------------------------------------------------------------------- /framework/img/workshop/shittier.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/shittier.gif -------------------------------------------------------------------------------- /framework/img/workshop/spacing-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/spacing-1.jpg -------------------------------------------------------------------------------- /framework/img/workshop/spacing-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/spacing-2.jpg -------------------------------------------------------------------------------- /framework/img/workshop/style.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/style.gif -------------------------------------------------------------------------------- /framework/img/workshop/title-transform.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/framework/img/workshop/title-transform.png -------------------------------------------------------------------------------- /framework/license.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2010 Lea Verou 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /framework/sass/_base.scss: -------------------------------------------------------------------------------- 1 | //--------------- 2 | // VARIABLES 3 | //--------------- 4 | 5 | // Colours 6 | //--------------- 7 | $llc-pink: #b109aa; 8 | $black: #000; 9 | $gray-dark: #222; 10 | $gray: #444; 11 | $gray-light: #bdc3c7; 12 | $white: #fff; 13 | 14 | 15 | // Typography 16 | //--------------- 17 | // Font families 18 | $quicksand: 'Quicksand', sans-serif; 19 | $pacifico: 'Pacifico', cursive; 20 | $open-sans: 'Open Sans', sans-serif; 21 | $monserrat: 'Montserrat', sans-serif; 22 | $heading-font: $quicksand; 23 | $base-font: $monserrat; 24 | $cursive: $pacifico; 25 | 26 | $font-size-base: 3.2rem; 27 | $font-size-sm: $font-size-base * 0.9; // 90% 28 | $font-size-xsm: $font-size-base * 0.75; 29 | $font-size-footnote: $font-size-base * 0.5; 30 | $font-size-heading: 4.0rem; 31 | $font-size-heading-lg: 7.5rem; 32 | $font-size-heading-sm: $font-size-base; 33 | $line-height: 1.4; 34 | 35 | 36 | //--------------- 37 | // MIXINS 38 | //--------------- 39 | @mixin list-reset { 40 | margin: 0; 41 | padding: 0; 42 | list-style-type: none; 43 | } 44 | 45 | /* http://css-tricks.com/snippets/css/clear-fix/ */ 46 | @mixin clearfix { 47 | &:after { 48 | content: ""; 49 | display: table; 50 | clear: both; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /framework/sass/_workshop.scss: -------------------------------------------------------------------------------- 1 | /* Styles specific to this workshop 2 | ------------------------------------*/ 3 | .slide.intro { 4 | background: linear-gradient(rgba($black, 0.7), 5 | rgba($black, 0.7)), 6 | url(../img/banner-home1.jpg) no-repeat; 7 | background-size: cover; 8 | } 9 | .slide.project { 10 | text-align: center; 11 | } 12 | .slide.background { 13 | background: url(../img/workshop/background-2.jpg); 14 | background-size: cover; 15 | 16 | h1 { 17 | color: black; 18 | font-weight: 700; 19 | } 20 | } 21 | .slide.background-2 { 22 | background: linear-gradient(rgba($llc-pink, 0.6), 23 | rgba($black, 0.8)), 24 | url(../img/workshop/background-4.jpg); 25 | background-size: cover; 26 | 27 | h1, h2 { 28 | color: white; 29 | background: rgba(0,0,0,.5); 30 | } 31 | } -------------------------------------------------------------------------------- /framework/sass/styles.scss: -------------------------------------------------------------------------------- 1 | @import "base", 2 | "theme", 3 | "workshop"; 4 | 5 | // Make sure to run Autoprefixer to automatically add vendor prefixes 6 | // to the compiled CSS file using the compiler of your choice. -------------------------------------------------------------------------------- /framework/scripts/classList.js: -------------------------------------------------------------------------------- 1 | /* 2 | * classList.js: Implements a cross-browser element.classList getter. 3 | * 2010-09-06 4 | * 5 | * By Eli Grey, http://eligrey.com 6 | * Public Domain. 7 | * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. 8 | */ 9 | 10 | "use strict"; 11 | 12 | if (typeof Element !== "undefined") { 13 | 14 | (function () { 15 | 16 | var 17 | classListProp = "classList" 18 | , protoProp = "prototype" 19 | , elemCtrProto = Element[protoProp] 20 | , objCtr = Object 21 | ; 22 | if (!objCtr.hasOwnProperty.call(elemCtrProto, classListProp)) { 23 | var 24 | strTrim = String[protoProp].trim || function () { 25 | return this.replace(/^\s+|\s+$/g, ""); 26 | } 27 | , arrIndexOf = Array[protoProp].indexOf || function (item) { 28 | for (var i = 0, len = this.length; i < len; i++) { 29 | if (i in this && this[i] === item) { 30 | return i; 31 | } 32 | } 33 | return -1; 34 | } 35 | , checkTokenAndGetIndex = function (classList, token) { 36 | if (token === "") { 37 | throw "SYNTAX_ERR"; 38 | } 39 | if (/\s/.test(token)) { 40 | throw "INVALID_CHARACTER_ERR"; 41 | } 42 | return arrIndexOf.call(classList, token); 43 | } 44 | , ClassList = function (elem) { 45 | var 46 | trimmedClasses = strTrim.call(elem.className) 47 | , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] 48 | ; 49 | for (var i = 0, len = classes.length; i < len; i++) { 50 | this.push(classes[i]); 51 | } 52 | this.updateClassName = function () { 53 | elem.className = this.toString(); 54 | }; 55 | } 56 | , classListProto = ClassList[protoProp] = [] 57 | , classListGetter = function () { 58 | return new ClassList(this); 59 | } 60 | ; 61 | classListProto.item = function (i) { 62 | return this[i] || null; 63 | }; 64 | classListProto.contains = function (token) { 65 | token += ""; 66 | return checkTokenAndGetIndex(this, token) !== -1; 67 | }; 68 | classListProto.add = function (token) { 69 | token += ""; 70 | if (checkTokenAndGetIndex(this, token) === -1) { 71 | this.push(token); 72 | this.updateClassName(); 73 | } 74 | }; 75 | classListProto.remove = function (token) { 76 | token += ""; 77 | var index = checkTokenAndGetIndex(this, token); 78 | if (index !== -1) { 79 | this.splice(index, 1); 80 | this.updateClassName(); 81 | } 82 | }; 83 | classListProto.toggle = function (token) { 84 | token += ""; 85 | if (checkTokenAndGetIndex(this, token) === -1) { 86 | this.add(token); 87 | } else { 88 | this.remove(token); 89 | } 90 | }; 91 | classListProto.toString = function () { 92 | return this.join(" "); 93 | }; 94 | 95 | if (objCtr.defineProperty) { 96 | var classListDescriptor = { 97 | get: classListGetter 98 | , enumerable: true 99 | , configurable: true 100 | }; 101 | try { 102 | objCtr.defineProperty(elemCtrProto, classListProp, classListDescriptor); 103 | } catch (ex) { // IE 8 doesn't support enumerable:true 104 | if (ex.number === -0x7FF5EC54) { 105 | classListDescriptor.enumerable = false; 106 | objCtr.defineProperty(elemCtrProto, classListProp, classListDescriptor); 107 | } 108 | } 109 | } else if (objCtr[protoProp].__defineGetter__) { 110 | elemCtrProto.__defineGetter__(classListProp, classListGetter); 111 | } 112 | } 113 | 114 | }()); 115 | 116 | } -------------------------------------------------------------------------------- /framework/scripts/llc.js: -------------------------------------------------------------------------------- 1 | jQuery(document).ready(function(){ 2 | // Adds "edit me" note to editable code areas 3 | jQuery(".snippet").before("edit me"); 4 | 5 | // Add class to resource section 6 | jQuery( "h3:contains('Resources'), h3:contains('Resource'), h3:contains('Pro tip!')" ).addClass("resources"); 7 | 8 | // Generate the Table of Contents 9 | var ToC = "
    "; 10 | var newLine, el, title, link; 11 | 12 | jQuery("[data-toc] > h1").each(function() { 13 | el = jQuery(this); 14 | title = el.text(); 15 | link = "#" + el.parent().attr("id"); 16 | 17 | newLine = 18 | "
  • " + 19 | "" + 20 | title + 21 | "" + 22 | "
    • "; 23 | 24 | ToC += newLine; 25 | }); 26 | ToC +="
"; 27 | jQuery(".table-of-contents").append(ToC); 28 | 29 | }); -------------------------------------------------------------------------------- /framework/scripts/plugins/code-highlight.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Super simple syntax highlighting plugin for CSSS code snippets 3 | * Usage: 4 | * @author Lea Verou 5 | */ 6 | 7 | (function(){ 8 | 9 | var _ = window.Highlight = { 10 | languages: { 11 | javascript: { 12 | 'comment': /(\/\*.*?\*\/)|\/\/.*?(\r?\n|$)/g, 13 | 'regex': /\/(\\?.)+?\/[gim]{0,3}/g, 14 | 'string': /(('|").*?(\2))/g, // used to be: /'.*?'|".*?"/g, 15 | 'keyword': /\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null)\b/g, 16 | 'boolean': /\b(true|false)\b/g, 17 | 'number': /\b-?(0x)?\d*\.?\d+\b/g, 18 | 'operator': /([-+!=<>]|<){1,3}/g, 19 | 'ignore': /&(lt|gt|amp);/gi, 20 | 'punctuation': /[{}[\];(),.]/g 21 | }, 22 | css: { 23 | 'comment': /\/\*[\w\W]*?\*\//g, 24 | 'url': /url\((?:'|")?(.+?)(?:'|")?\)/gi, 25 | 'atrule': /@[\w-]+?(\s+[^{]+)?(?=\s*{)/gi, 26 | 'selector': /[^\{\}\s][^\{\}]+(?=\s*\{)/g, 27 | 'property': /(\b|\B)[a-z-]+(?=\s*:)/ig, 28 | 'important': /\B!important\b/gi, 29 | 'ignore': /&(lt|gt|amp);/gi, 30 | 'punctuation': /[\{\};:]/g 31 | }, 32 | html: { 33 | 'comment': /<!--[\w\W]*?--(>|>)/g, 34 | 'tag': { 35 | 'pattern': /(<|<)\/?[\w\W]+?(>|>)/gi, 36 | 'inside': { 37 | 'attr-value': { 38 | 'pattern': /[\w:-]+=(('|").*?(\2)|[^\s>]+(?=>|&|\s))/gi, 39 | 'inside': { 40 | 'attr-name': /^[\w:-]+(?==)/gi, 41 | 'punctuation': /=/g 42 | } 43 | }, 44 | 'attr-name': /\s[\w:-]+(?=\s)/gi, 45 | 'punctuation': /<\/?|\/?>/g 46 | } 47 | }, 48 | 'entity': /&#?[\da-z]{1,8};/gi 49 | } 50 | }, 51 | 52 | isInited: function(code) { 53 | return code.hasAttribute('data-highlighted'); 54 | }, 55 | 56 | init: function(code) { 57 | if(!code || _.isInited(code)) { 58 | return; // or should I rehighlight? 59 | } 60 | 61 | var lang = _.languages[code.getAttribute('lang')]; 62 | 63 | if(!lang) { 64 | return; 65 | } 66 | 67 | code.normalize(); 68 | 69 | var text = code.textContent 70 | .replace(/&/g, '&') 71 | .replace(//g, '>') 73 | .replace(/\u00a0/g, ' '); 74 | 75 | code.innerHTML = _.do(text, lang); 76 | 77 | code.setAttribute('data-highlighted', 'true'); 78 | }, 79 | 80 | do: function(text, tokens) { 81 | var strarr = [text]; 82 | 83 | for(var token in tokens) { 84 | var pattern = tokens[token], 85 | inside = pattern.inside; 86 | pattern = pattern.pattern || pattern; 87 | 88 | for(var i=0; i' + content + '' 138 | }, 139 | 140 | container: function(container) { 141 | if(!container) { 142 | return; 143 | } 144 | 145 | var codes = container.querySelectorAll('code[lang]'); 146 | 147 | for(var i=0; i 0 && dummy.style.length >= declarationCount; 19 | }, 20 | 21 | setupSubjects: function(subjects) { 22 | for (var i=0; i -1 40 | ) { // 0, +, - 41 | 42 | var fontSize; 43 | 44 | if(code === 48) { 45 | fontSize = 100; 46 | } 47 | else { 48 | fontSize = (code == 61 || code == 187? 10 : -10) + (+this.getAttribute('data-size') || 100); 49 | } 50 | 51 | evt.preventDefault(); 52 | 53 | if(40 <= fontSize && fontSize <= 200) { 54 | this.setAttribute('data-size', fontSize); 55 | } 56 | 57 | return false; 58 | } 59 | 60 | me.update(); 61 | }); 62 | } 63 | 64 | this.raw = this.getCSS().indexOf('{') > -1; 65 | 66 | if (window.SlideShow) { 67 | this.slide = SlideShow.getSlide(element); 68 | 69 | // Remove it after we're done with it, to save on resources 70 | addEventListener('hashchange', function() { 71 | if(location.hash == '#' + me.slide.id) { 72 | me.update(); 73 | } 74 | else if(me.raw && me.style && me.style.parentNode) { 75 | head.removeChild(me.style); 76 | } 77 | }, false); 78 | 79 | if(location.hash == '#' + me.slide.id) { 80 | this.update(); 81 | } 82 | } 83 | else { 84 | this.update(); 85 | } 86 | } 87 | 88 | self.prototype = { 89 | update: function() { 90 | var code = this.getCSS(), 91 | previousRaw = this.raw; 92 | 93 | this.raw = code.indexOf('{') > -1; 94 | 95 | var supportedStyle = StyleFix.fix(code, this.raw); 96 | 97 | if (previousRaw != this.raw) { 98 | if (previousRaw && !this.raw) { 99 | head.removeChild(this.style); 100 | } 101 | else { 102 | this.textField.classList.remove('error'); 103 | CSSEdit.updateStyle(this.subjects, '', 'data-originalstyle'); 104 | } 105 | } 106 | 107 | if (this.raw) { 108 | if (!this.style) { 109 | this.style = document.createElement('style'); 110 | } 111 | 112 | if (!this.style.parentNode) { 113 | head.appendChild(this.style); 114 | } 115 | 116 | this.style.textContent = supportedStyle; 117 | } 118 | else { 119 | var valid = CSSEdit.updateStyle(this.subjects, code, 'data-originalstyle'); 120 | 121 | if(this.textField && this.textField.classList) { 122 | this.textField.classList[valid? 'remove' : 'add']('error'); 123 | } 124 | } 125 | }, 126 | 127 | getCSS: function() { 128 | return this.textField ? this.textField.value : this.subjects[0].getAttribute('style'); 129 | } 130 | }; 131 | 132 | var sizeStyles = ''; 133 | for(var i=40; i<=200; i++) { 134 | sizeStyles += '\r\ntextarea[data-size="' + i + '"] { font-size: ' + i + '%; }'; 135 | } 136 | 137 | var style = document.createElement('style'); 138 | style.textContent = sizeStyles; 139 | document.head.appendChild(style); 140 | 141 | })(document.head); -------------------------------------------------------------------------------- /framework/scripts/plugins/incrementable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Script for making multiple numbers in a textfield incrementable/decrementable (like Firebug's CSS values) 3 | * @author Lea Verou 4 | * @version 1.1 5 | */ 6 | 7 | (function(){ 8 | 9 | /** 10 | * Constructor 11 | * @param textField {HTMLElement} An input or textarea element 12 | * @param multiplier {Function} A function that accepts the event object and returns the multiplier or 0 for nothing to happen. 13 | */ 14 | var _ = window.Incrementable = function(textField, multiplier, units) { 15 | var me = this; 16 | 17 | this.textField = textField; 18 | 19 | this.step = +textField.getAttribute('step') || 20 | +textField.getAttribute('data-step') || 1; 21 | 22 | this.multiplier = multiplier || function(evt) { 23 | if (evt.shiftKey) { return 10; } 24 | 25 | if (evt.ctrlKey) { return .1; } 26 | 27 | return 1; 28 | } 29 | 30 | if (units) { 31 | this.units = units; 32 | } 33 | 34 | this.changed = false; 35 | 36 | this.textField.addEventListener('keydown', function(evt) { 37 | var multiplier = me.multiplier(evt); 38 | 39 | if (multiplier && (evt.keyCode == 38 || evt.keyCode == 40)) { 40 | me.changed = false; 41 | 42 | // Up or down arrow pressed, check if there's something 43 | // increment/decrement-able where the caret is 44 | var caret = this.selectionStart, 45 | text = this.value, 46 | regex = new RegExp('^([\\s\\S]{0,' + caret + '}[^-0-9\\.])?(-?[0-9]*(?:\\.?[0-9]+)(?:' + me.units + '))\\b', 'i'), 47 | property = 'value' in this? 'value' : 'textContent'; 48 | 49 | this[property] = this[property].replace(regex, function($0, $1, $2) { 50 | $1 = $1 || ''; 51 | if ($1.length <= caret && $1.length + $2.length >= caret) { 52 | me.changed = true; 53 | var stepValue = me.stepValue($2, evt.keyCode == 40, multiplier); 54 | caret = caret + (stepValue.length - $2.length); 55 | return $1 + stepValue; 56 | } 57 | else { 58 | return $1 + $2; 59 | } 60 | }); 61 | 62 | if (me.changed) { 63 | this.setSelectionRange(caret, caret); 64 | 65 | evt.preventDefault(); 66 | evt.stopPropagation(); 67 | 68 | // Fire input event 69 | var evt = document.createEvent("HTMLEvents"); 70 | 71 | evt.initEvent('input', true, true ); 72 | 73 | this.dispatchEvent(evt); 74 | } 75 | } 76 | }, false); 77 | 78 | this.textField.addEventListener('keypress', function(evt) { 79 | if (me.changed && (evt.keyCode == 38 || evt.keyCode == 40)) 80 | evt.preventDefault(); 81 | evt.stopPropagation(); 82 | me.changed = false; 83 | }, false); 84 | } 85 | 86 | _.prototype = { 87 | /** 88 | * Gets a and increments or decrements it 89 | */ 90 | stepValue: function(length, decrement, multiplier) { 91 | var val = parseFloat(length), 92 | offset = (decrement? -1 : 1) * (multiplier || 1) * this.step, 93 | valPrecision = precision(val), 94 | offsetPrecision = precision(offset); 95 | 96 | // Prevent rounding errors 97 | var newVal = (parseFloat((val + offset).toPrecision( 98 | Math.max(valPrecision.integer, offsetPrecision.integer) + 99 | Math.max(valPrecision.decimals, offsetPrecision.decimals) 100 | ))); 101 | 102 | return newVal + length.replace(/^-|[0-9]+|\./g, ''); 103 | }, 104 | 105 | units: '|%|deg|turn|px|r?em|ex|ch|in|cm|mm|pt|pc|vmin|vmax|vw|vh|gd|m?s' 106 | }; 107 | 108 | function precision(number) { 109 | number = (number + '').replace(/^0+/, ''); 110 | 111 | var dot = number.indexOf('.'); 112 | 113 | if (dot === -1) { 114 | return { 115 | integer: number.length, 116 | decimals: 0 117 | }; 118 | } 119 | 120 | return { 121 | integer: dot, 122 | decimals: number.length - 1 - dot 123 | }; 124 | } 125 | 126 | })(); -------------------------------------------------------------------------------- /framework/scripts/prefixfree.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * StyleFix 1.0.3 & PrefixFree 1.0.7 3 | * @author Lea Verou 4 | * MIT license 5 | */(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=t.parentNode,o=new XMLHttpRequest,u;o.onreadystatechange=function(){o.readyState===4&&u()};u=function(){var n=o.responseText;if(n&&t.parentNode&&(!o.status||o.status<400||o.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|\/|#)/i.test(n)?e:'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var u=document.createElement("style");u.textContent=n;u.media=t.media;u.disabled=t.disabled;u.setAttribute("data-href",t.getAttribute("href"));s.insertBefore(u,t);s.removeChild(t);u.media=t.media}};try{o.open("GET",r);o.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){o=new XDomainRequest;o.onerror=o.onprogress=function(){};o.onload=u;o.open("GET",r);o.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Your Name Here

18 |

Job Title or Tagline

19 |
20 | 21 | 22 | 23 |
24 | Your Name 25 | 26 |
27 |

Hello!

28 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

29 |

Links to stuff about you, if needed. link and link.

30 |

Or another paragraph!

31 |
32 |
33 | 34 | 35 | 36 |
37 |

Work Experience

38 | 39 |
40 |
41 |

Company Name

42 |

Job title

43 |

September 2012 - Present

44 |
45 | 46 |
47 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

48 |
49 |
50 | 51 |
52 |
53 |

Company Name

54 |

Job Title

55 |

March 2013 - February 2014

56 |
57 | 58 |
59 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

60 | 61 |

Key contributions:

62 |
    63 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 64 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 65 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 |
74 |
75 |

Skills

76 | 77 |
78 |
79 |

Best at:

80 |
    81 |
  • HTML / HTML5
    • 82 |
  • CSS / CSS3
    • 83 |
  • Less / Sass
    • 84 |
  • JavaScript / jQuery
    • 85 |
86 |
87 | 88 |
89 |

Worked with:

90 |
    91 |
  • Wordpress
    • 92 |
  • PHP
    • 93 |
  • Processing
    • 94 |
95 |
96 | 97 |
98 |

Learning:

99 |
    100 |
  • angular.js
    • 101 |
  • Stylus
    • 102 |
103 |
104 |
105 |
106 |
107 | 108 | 109 | 110 |
111 |

Education

112 | 113 |
114 |

College or University, 2006

115 |

Designation or Degree

116 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

117 |
118 | 119 |
120 |

College or University, 2005

121 |

Designation or Degree

122 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

123 |
124 |
125 | 126 | 127 |
128 |

Let's keep in touch!

129 | 130 | 138 | 139 |

hello@your-email.com

140 |

416.123.4567

141 |

123 Anywhere St.
142 | Toronto, ON A1B 2C3

143 | 144 |

Copyright © 2016 by Your Name

145 |
146 | 147 | 148 | -------------------------------------------------------------------------------- /project/examples/10-position.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | /* 4 | apply a natural box layout model to all elements 5 | http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 6 | */ 7 | html { 8 | box-sizing: border-box; 9 | } 10 | *, *:before, *:after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | font-family: 'Merriweather', serif; 16 | line-height: 1.5; 17 | padding: 0; 18 | margin: 0; 19 | background: url(../images/background-1.jpg) no-repeat fixed 50%; 20 | background-size: cover; 21 | } 22 | 23 | h1, h2, h3 { 24 | font-weight: 400; 25 | } 26 | h1, h3 { 27 | font-family: "Open Sans", sans-serif; 28 | text-transform: uppercase; 29 | } 30 | h1 { 31 | font-size: 32px; 32 | } 33 | h2 { 34 | font-family: "Pacifico", cursive; 35 | } 36 | a { 37 | color: #2980b9; 38 | } 39 | 40 | section, 41 | footer { 42 | padding: 50px 0; 43 | } 44 | .content-wrap { 45 | max-width: 1000px; 46 | width: 90%; 47 | margin: 0 auto; 48 | } 49 | .download { 50 | position: fixed; 51 | top: 0; 52 | right: 0; 53 | background: #2980b9; 54 | color: white; 55 | padding: 20px; 56 | } 57 | 58 | /* HEADER 59 | ----------*/ 60 | header { 61 | text-align: center; 62 | padding: 100px 0; 63 | } 64 | header h1 { 65 | font-family: "Pacifico", cursive; 66 | font-size: 80px; 67 | text-transform: none; 68 | } 69 | header h2 { 70 | font-family: "Open Sans", sans-serif; 71 | text-transform: uppercase; 72 | font-size: 32px; 73 | } 74 | 75 | 76 | /* ABOUT ME 77 | ----------------------*/ 78 | .profile { 79 | background: rgba(0, 0, 0, 0.8); 80 | color: #fefefe; 81 | } 82 | .profile .content-wrap { 83 | display: flex; 84 | justify-content: space-between; 85 | align-items: flex-start; 86 | } 87 | .profile img { 88 | border-radius: 50%; 89 | margin-right: 3%; 90 | width: 30%; 91 | } 92 | 93 | 94 | /* WORK EXPERIENCE 95 | -------------------*/ 96 | .work { 97 | background: #fefefe; 98 | } 99 | 100 | 101 | /* SKILLS 102 | ----------*/ 103 | .skills { 104 | background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5) ), 105 | url(../images/background-3.jpg); 106 | background-size: cover; 107 | color: #fefefe; 108 | } 109 | 110 | 111 | /* EDUCATION 112 | -------------*/ 113 | .education { 114 | background: #fefefe; 115 | } 116 | 117 | 118 | /* CONTACT & FOOTER 119 | --------------------*/ 120 | .contact { 121 | background: #111111; 122 | color: #fefefe; 123 | } 124 | -------------------------------------------------------------------------------- /project/examples/10-position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Download resume (pdf) 18 | 19 | 20 |
21 |
22 |

Your Name Here

23 |

Job Title or Tagline

24 |
25 |
26 | 27 | 28 | 29 |
30 |
31 | Your Name 32 | 33 |
34 |

Hello!

35 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

36 |

Links to stuff about you, if needed. link and link.

37 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non. Sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse.

38 |
39 |
40 |
41 | 42 | 43 | 44 |
45 |
46 |

Work Experience

47 | 48 |
49 |
50 |

Company Name

51 |

Job title

52 |

September 2012 - Present

53 |
54 | 55 |
56 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

57 |
58 |
59 | 60 |
61 |
62 |

Company Name

63 |

Job Title

64 |

March 2013 - February 2014

65 |
66 | 67 |
68 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

69 | 70 |

Key contributions:

71 |
    72 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 73 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 74 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 | 83 |
84 |
85 |

Skills

86 | 87 |
88 |
89 |

Best at:

90 |
    91 |
  • HTML / HTML5
    • 92 |
  • CSS / CSS3
    • 93 |
  • Less / Sass
    • 94 |
  • JavaScript / jQuery
    • 95 |
96 |
97 | 98 |
99 |

Worked with:

100 |
    101 |
  • Wordpress
    • 102 |
  • PHP
    • 103 |
  • Processing
    • 104 |
105 |
106 | 107 |
108 |

Learning:

109 |
    110 |
  • angular.js
    • 111 |
  • Stylus
    • 112 |
113 |
114 |
115 |
116 |
117 | 118 | 119 | 120 |
121 |
122 |

Education

123 | 124 |
125 |

College or University, 2006

126 |

Designation or Degree

127 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

128 |
129 | 130 |
131 |

College or University, 2005

132 |

Designation or Degree

133 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

134 |
135 |
136 |
137 | 138 | 139 |
140 |
141 |

Let's keep in touch!

142 | 143 | 151 | 152 |

hello@your-email.com

153 |

416.123.4567

154 |

123 Anywhere St.
155 | Toronto, ON A1B 2C3

156 | 157 |

Copyright © 2016 by Your Name

158 |
159 |
160 | 161 | 162 | -------------------------------------------------------------------------------- /project/examples/2-bg-colours.css: -------------------------------------------------------------------------------- 1 | /* HEADER 2 | ----------*/ 3 | header { 4 | background: #2c3e50; 5 | } 6 | 7 | 8 | /* ABOUT ME 9 | ----------------------*/ 10 | .profile { 11 | background: #8e44ad; 12 | } 13 | 14 | 15 | /* WORK EXPERIENCE 16 | -------------------*/ 17 | .work { 18 | background: #2980b9; 19 | } 20 | 21 | 22 | /* SKILLS 23 | ----------*/ 24 | .skills { 25 | background: #27ae60; 26 | } 27 | 28 | 29 | /* EDUCATION 30 | -------------*/ 31 | .education { 32 | background: #16a085; 33 | } 34 | 35 | 36 | /* CONTACT & FOOTER 37 | --------------------*/ 38 | .contact { 39 | background: #c0392b; 40 | } 41 | -------------------------------------------------------------------------------- /project/examples/2-bg-colours.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Your Name Here

18 |

Job Title or Tagline

19 |
20 | 21 | 22 | 23 |
24 | Your Name 25 | 26 |
27 |

Hello!

28 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

29 |

Links to stuff about you, if needed. link and link.

30 |

Or another paragraph!

31 |
32 |
33 | 34 | 35 | 36 |
37 |

Work Experience

38 | 39 |
40 |
41 |

Company Name

42 |

Job title

43 |

September 2012 - Present

44 |
45 | 46 |
47 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

48 |
49 |
50 | 51 |
52 |
53 |

Company Name

54 |

Job Title

55 |

March 2013 - February 2014

56 |
57 | 58 |
59 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

60 | 61 |

Key contributions:

62 |
    63 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 64 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 65 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 |
74 |
75 |

Skills

76 | 77 |
78 |
79 |

Best at:

80 |
    81 |
  • HTML / HTML5
    • 82 |
  • CSS / CSS3
    • 83 |
  • Less / Sass
    • 84 |
  • JavaScript / jQuery
    • 85 |
86 |
87 | 88 |
89 |

Worked with:

90 |
    91 |
  • Wordpress
    • 92 |
  • PHP
    • 93 |
  • Processing
    • 94 |
95 |
96 | 97 |
98 |

Learning:

99 |
    100 |
  • angular.js
    • 101 |
  • Stylus
    • 102 |
103 |
104 |
105 |
106 |
107 | 108 | 109 | 110 |
111 |

Education

112 | 113 |
114 |

College or University, 2006

115 |

Designation or Degree

116 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

117 |
118 | 119 |
120 |

College or University, 2005

121 |

Designation or Degree

122 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

123 |
124 |
125 | 126 | 127 |
128 |

Let's keep in touch!

129 | 130 | 138 | 139 |

hello@your-email.com

140 |

416.123.4567

141 |

123 Anywhere St.
142 | Toronto, ON A1B 2C3

143 | 144 |

Copyright © 2016 by Your Name

145 |
146 | 147 | 148 | -------------------------------------------------------------------------------- /project/examples/3-typography.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | body { 4 | font-family: 'Merriweather', serif; 5 | line-height: 1.5; 6 | } 7 | 8 | h1, h2, h3 { 9 | font-weight: 400; 10 | } 11 | h1, h3 { 12 | font-family: "Open Sans", sans-serif; 13 | text-transform: uppercase; 14 | } 15 | h1 { 16 | font-size: 32px; 17 | } 18 | h2 { 19 | font-family: "Pacifico", cursive; 20 | } 21 | 22 | 23 | /* HEADER 24 | ----------*/ 25 | header { 26 | background: #2c3e50; 27 | text-align: center; 28 | } 29 | header h1 { 30 | font-family: "Pacifico", cursive; 31 | font-size: 80px; 32 | text-transform: none; 33 | } 34 | header h2 { 35 | font-family: "Open Sans", sans-serif; 36 | text-transform: uppercase; 37 | font-size: 32px; 38 | } 39 | 40 | 41 | /* ABOUT ME 42 | ----------------------*/ 43 | .profile { 44 | background: #8e44ad; 45 | } 46 | 47 | 48 | /* WORK EXPERIENCE 49 | -------------------*/ 50 | .work { 51 | background: #2980b9; 52 | } 53 | 54 | 55 | /* SKILLS 56 | ----------*/ 57 | .skills { 58 | background: #27ae60; 59 | } 60 | 61 | 62 | /* EDUCATION 63 | -------------*/ 64 | .education { 65 | background: #16a085; 66 | } 67 | 68 | 69 | /* CONTACT & FOOTER 70 | --------------------*/ 71 | .contact { 72 | background: #c0392b; 73 | } 74 | -------------------------------------------------------------------------------- /project/examples/3-typography.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Your Name Here

20 |

Job Title or Tagline

21 |
22 | 23 | 24 | 25 |
26 | Your Name 27 | 28 |
29 |

Hello!

30 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

31 |

Links to stuff about you, if needed. link and link.

32 |

Or another paragraph!

33 |
34 |
35 | 36 | 37 | 38 |
39 |

Work Experience

40 | 41 |
42 |
43 |

Company Name

44 |

Job title

45 |

September 2012 - Present

46 |
47 | 48 |
49 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

50 |
51 |
52 | 53 |
54 |
55 |

Company Name

56 |

Job Title

57 |

March 2013 - February 2014

58 |
59 | 60 |
61 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

62 | 63 |

Key contributions:

64 |
    65 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 66 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 67 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 68 |
69 |
70 |
71 |
72 | 73 | 74 | 75 |
76 |
77 |

Skills

78 | 79 |
80 |
81 |

Best at:

82 |
    83 |
  • HTML / HTML5
    • 84 |
  • CSS / CSS3
    • 85 |
  • Less / Sass
    • 86 |
  • JavaScript / jQuery
    • 87 |
88 |
89 | 90 |
91 |

Worked with:

92 |
    93 |
  • Wordpress
    • 94 |
  • PHP
    • 95 |
  • Processing
    • 96 |
97 |
98 | 99 |
100 |

Learning:

101 |
    102 |
  • angular.js
    • 103 |
  • Stylus
    • 104 |
105 |
106 |
107 |
108 |
109 | 110 | 111 | 112 |
113 |

Education

114 | 115 |
116 |

College or University, 2006

117 |

Designation or Degree

118 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

119 |
120 | 121 |
122 |

College or University, 2005

123 |

Designation or Degree

124 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

125 |
126 |
127 | 128 | 129 |
130 |

Let's keep in touch!

131 | 132 | 140 | 141 |

hello@your-email.com

142 |

416.123.4567

143 |

123 Anywhere St.
144 | Toronto, ON A1B 2C3

145 | 146 |

Copyright © 2016 by Your Name

147 |
148 | 149 | 150 | -------------------------------------------------------------------------------- /project/examples/4-content-wrap.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | body { 4 | font-family: 'Merriweather', serif; 5 | line-height: 1.5; 6 | padding: 0; 7 | margin: 0; 8 | } 9 | 10 | h1, h2, h3 { 11 | font-weight: 400; 12 | } 13 | h1, h3 { 14 | font-family: "Open Sans", sans-serif; 15 | text-transform: uppercase; 16 | } 17 | h1 { 18 | font-size: 32px; 19 | } 20 | h2 { 21 | font-family: "Pacifico", cursive; 22 | } 23 | 24 | section, 25 | footer { 26 | padding: 50px 0; 27 | } 28 | 29 | .content-wrap { 30 | width: 1000px; 31 | margin: 0 auto; 32 | } 33 | 34 | 35 | /* HEADER 36 | ----------*/ 37 | header { 38 | background: #2c3e50; 39 | text-align: center; 40 | padding: 100px 0; 41 | } 42 | header h1 { 43 | font-family: "Pacifico", cursive; 44 | font-size: 80px; 45 | text-transform: none; 46 | } 47 | header h2 { 48 | font-family: "Open Sans", sans-serif; 49 | text-transform: uppercase; 50 | font-size: 32px; 51 | } 52 | 53 | 54 | /* ABOUT ME 55 | ----------------------*/ 56 | .profile { 57 | background: #8e44ad; 58 | } 59 | 60 | 61 | /* WORK EXPERIENCE 62 | -------------------*/ 63 | .work { 64 | background: #2980b9; 65 | } 66 | 67 | 68 | /* SKILLS 69 | ----------*/ 70 | .skills { 71 | background: #27ae60; 72 | } 73 | 74 | 75 | /* EDUCATION 76 | -------------*/ 77 | .education { 78 | background: #16a085; 79 | } 80 | 81 | 82 | /* CONTACT & FOOTER 83 | --------------------*/ 84 | .contact { 85 | background: #c0392b; 86 | } 87 | -------------------------------------------------------------------------------- /project/examples/4-content-wrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Your Name Here

21 |

Job Title or Tagline

22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 | Your Name 30 | 31 |
32 |

Hello!

33 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

34 |

Links to stuff about you, if needed. link and link.

35 |

Or another paragraph!

36 |
37 |
38 |
39 | 40 | 41 | 42 |
43 |
44 |

Work Experience

45 | 46 |
47 |
48 |

Company Name

49 |

Job title

50 |

September 2012 - Present

51 |
52 | 53 |
54 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

55 |
56 |
57 | 58 |
59 |
60 |

Company Name

61 |

Job Title

62 |

March 2013 - February 2014

63 |
64 | 65 |
66 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

67 | 68 |

Key contributions:

69 |
    70 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 71 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 72 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 |
82 |
83 |

Skills

84 | 85 |
86 |
87 |

Best at:

88 |
    89 |
  • HTML / HTML5
    • 90 |
  • CSS / CSS3
    • 91 |
  • Less / Sass
    • 92 |
  • JavaScript / jQuery
    • 93 |
94 |
95 | 96 |
97 |

Worked with:

98 |
    99 |
  • Wordpress
    • 100 |
  • PHP
    • 101 |
  • Processing
    • 102 |
103 |
104 | 105 |
106 |

Learning:

107 |
    108 |
  • angular.js
    • 109 |
  • Stylus
    • 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 |
119 |
120 |

Education

121 | 122 |
123 |

College or University, 2006

124 |

Designation or Degree

125 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

126 |
127 | 128 |
129 |

College or University, 2005

130 |

Designation or Degree

131 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

132 |
133 |
134 |
135 | 136 | 137 |
138 |
139 |

Let's keep in touch!

140 | 141 | 149 | 150 |

hello@your-email.com

151 |

416.123.4567

152 |

123 Anywhere St.
153 | Toronto, ON A1B 2C3

154 | 155 |

Copyright © 2016 by Your Name

156 |
157 |
158 | 159 | 160 | -------------------------------------------------------------------------------- /project/examples/5-fluid-content-wrap.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | body { 4 | font-family: 'Merriweather', serif; 5 | line-height: 1.5; 6 | padding: 0; 7 | margin: 0; 8 | } 9 | 10 | h1, h2, h3 { 11 | font-weight: 400; 12 | } 13 | h1, h3 { 14 | font-family: "Open Sans", sans-serif; 15 | text-transform: uppercase; 16 | } 17 | h1 { 18 | font-size: 32px; 19 | } 20 | h2 { 21 | font-family: "Pacifico", cursive; 22 | } 23 | 24 | section, 25 | footer { 26 | padding: 50px 0; 27 | } 28 | 29 | .content-wrap { 30 | max-width: 1000px; 31 | width: 90%; 32 | margin: 0 auto; 33 | } 34 | 35 | 36 | /* HEADER 37 | ----------*/ 38 | header { 39 | background: #2c3e50; 40 | text-align: center; 41 | padding: 100px 0; 42 | } 43 | header h1 { 44 | font-family: "Pacifico", cursive; 45 | font-size: 80px; 46 | text-transform: none; 47 | } 48 | header h2 { 49 | font-family: "Open Sans", sans-serif; 50 | text-transform: uppercase; 51 | font-size: 32px; 52 | } 53 | 54 | 55 | /* ABOUT ME 56 | ----------------------*/ 57 | .profile { 58 | background: #8e44ad; 59 | } 60 | 61 | 62 | /* WORK EXPERIENCE 63 | -------------------*/ 64 | .work { 65 | background: #2980b9; 66 | } 67 | 68 | 69 | /* SKILLS 70 | ----------*/ 71 | .skills { 72 | background: #27ae60; 73 | } 74 | 75 | 76 | /* EDUCATION 77 | -------------*/ 78 | .education { 79 | background: #16a085; 80 | } 81 | 82 | 83 | /* CONTACT & FOOTER 84 | --------------------*/ 85 | .contact { 86 | background: #c0392b; 87 | } 88 | -------------------------------------------------------------------------------- /project/examples/5-fluid-content-wrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Your Name Here

21 |

Job Title or Tagline

22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 | Your Name 30 | 31 |
32 |

Hello!

33 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

34 |

Links to stuff about you, if needed. link and link.

35 |

Or another paragraph!

36 |
37 |
38 |
39 | 40 | 41 | 42 |
43 |
44 |

Work Experience

45 | 46 |
47 |
48 |

Company Name

49 |

Job title

50 |

September 2012 - Present

51 |
52 | 53 |
54 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

55 |
56 |
57 | 58 |
59 |
60 |

Company Name

61 |

Job Title

62 |

March 2013 - February 2014

63 |
64 | 65 |
66 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

67 | 68 |

Key contributions:

69 |
    70 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 71 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 72 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 |
82 |
83 |

Skills

84 | 85 |
86 |
87 |

Best at:

88 |
    89 |
  • HTML / HTML5
    • 90 |
  • CSS / CSS3
    • 91 |
  • Less / Sass
    • 92 |
  • JavaScript / jQuery
    • 93 |
94 |
95 | 96 |
97 |

Worked with:

98 |
    99 |
  • Wordpress
    • 100 |
  • PHP
    • 101 |
  • Processing
    • 102 |
103 |
104 | 105 |
106 |

Learning:

107 |
    108 |
  • angular.js
    • 109 |
  • Stylus
    • 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 |
119 |
120 |

Education

121 | 122 |
123 |

College or University, 2006

124 |

Designation or Degree

125 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

126 |
127 | 128 |
129 |

College or University, 2005

130 |

Designation or Degree

131 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

132 |
133 |
134 |
135 | 136 | 137 |
138 |
139 |

Let's keep in touch!

140 | 141 | 149 | 150 |

hello@your-email.com

151 |

416.123.4567

152 |

123 Anywhere St.
153 | Toronto, ON A1B 2C3

154 | 155 |

Copyright © 2016 by Your Name

156 |
157 |
158 | 159 | 160 | -------------------------------------------------------------------------------- /project/examples/6-background.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | body { 4 | font-family: 'Merriweather', serif; 5 | line-height: 1.5; 6 | padding: 0; 7 | margin: 0; 8 | background: url(../images/background-1.jpg) no-repeat fixed 50%; 9 | background-size: cover; 10 | } 11 | 12 | h1, h2, h3 { 13 | font-weight: 400; 14 | } 15 | h1, h3 { 16 | font-family: "Open Sans", sans-serif; 17 | text-transform: uppercase; 18 | } 19 | h1 { 20 | font-size: 32px; 21 | } 22 | h2 { 23 | font-family: "Pacifico", cursive; 24 | } 25 | 26 | section, 27 | footer { 28 | padding: 50px 0; 29 | } 30 | 31 | .content-wrap { 32 | max-width: 1000px; 33 | width: 90%; 34 | margin: 0 auto; 35 | } 36 | 37 | 38 | /* HEADER 39 | ----------*/ 40 | header { 41 | text-align: center; 42 | padding: 100px 0; 43 | } 44 | header h1 { 45 | font-family: "Pacifico", cursive; 46 | font-size: 80px; 47 | text-transform: none; 48 | } 49 | header h2 { 50 | font-family: "Open Sans", sans-serif; 51 | text-transform: uppercase; 52 | font-size: 32px; 53 | } 54 | 55 | 56 | /* ABOUT ME 57 | ----------------------*/ 58 | .profile { 59 | background: #8e44ad; 60 | } 61 | 62 | 63 | /* WORK EXPERIENCE 64 | -------------------*/ 65 | .work { 66 | background: #2980b9; 67 | } 68 | 69 | 70 | /* SKILLS 71 | ----------*/ 72 | .skills { 73 | background: #27ae60; 74 | } 75 | 76 | 77 | /* EDUCATION 78 | -------------*/ 79 | .education { 80 | background: #16a085; 81 | } 82 | 83 | 84 | /* CONTACT & FOOTER 85 | --------------------*/ 86 | .contact { 87 | background: #c0392b; 88 | } 89 | -------------------------------------------------------------------------------- /project/examples/6-background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Your Name Here

21 |

Job Title or Tagline

22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 | Your Name 30 | 31 |
32 |

Hello!

33 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

34 |

Links to stuff about you, if needed. link and link.

35 |

Or another paragraph!

36 |
37 |
38 |
39 | 40 | 41 | 42 |
43 |
44 |

Work Experience

45 | 46 |
47 |
48 |

Company Name

49 |

Job title

50 |

September 2012 - Present

51 |
52 | 53 |
54 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

55 |
56 |
57 | 58 |
59 |
60 |

Company Name

61 |

Job Title

62 |

March 2013 - February 2014

63 |
64 | 65 |
66 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

67 | 68 |

Key contributions:

69 |
    70 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 71 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 72 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 |
82 |
83 |

Skills

84 | 85 |
86 |
87 |

Best at:

88 |
    89 |
  • HTML / HTML5
    • 90 |
  • CSS / CSS3
    • 91 |
  • Less / Sass
    • 92 |
  • JavaScript / jQuery
    • 93 |
94 |
95 | 96 |
97 |

Worked with:

98 |
    99 |
  • Wordpress
    • 100 |
  • PHP
    • 101 |
  • Processing
    • 102 |
103 |
104 | 105 |
106 |

Learning:

107 |
    108 |
  • angular.js
    • 109 |
  • Stylus
    • 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 |
119 |
120 |

Education

121 | 122 |
123 |

College or University, 2006

124 |

Designation or Degree

125 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

126 |
127 | 128 |
129 |

College or University, 2005

130 |

Designation or Degree

131 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

132 |
133 |
134 |
135 | 136 | 137 |
138 |
139 |

Let's keep in touch!

140 | 141 | 149 | 150 |

hello@your-email.com

151 |

416.123.4567

152 |

123 Anywhere St.
153 | Toronto, ON A1B 2C3

154 | 155 |

Copyright © 2016 by Your Name

156 |
157 |
158 | 159 | 160 | -------------------------------------------------------------------------------- /project/examples/7-more-background.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | body { 4 | font-family: 'Merriweather', serif; 5 | line-height: 1.5; 6 | padding: 0; 7 | margin: 0; 8 | background: url(../images/background-1.jpg) no-repeat fixed 50%; 9 | background-size: cover; 10 | } 11 | 12 | h1, h2, h3 { 13 | font-weight: 400; 14 | } 15 | h1, h3 { 16 | font-family: "Open Sans", sans-serif; 17 | text-transform: uppercase; 18 | } 19 | h1 { 20 | font-size: 32px; 21 | } 22 | h2 { 23 | font-family: "Pacifico", cursive; 24 | } 25 | a { 26 | color: #2980b9; 27 | } 28 | 29 | section, 30 | footer { 31 | padding: 50px 0; 32 | } 33 | .content-wrap { 34 | max-width: 1000px; 35 | width: 90%; 36 | margin: 0 auto; 37 | } 38 | 39 | 40 | 41 | /* HEADER 42 | ----------*/ 43 | header { 44 | text-align: center; 45 | padding: 100px 0; 46 | } 47 | header h1 { 48 | font-family: "Pacifico", cursive; 49 | font-size: 80px; 50 | text-transform: none; 51 | } 52 | header h2 { 53 | font-family: "Open Sans", sans-serif; 54 | text-transform: uppercase; 55 | font-size: 32px; 56 | } 57 | 58 | 59 | /* ABOUT ME 60 | ----------------------*/ 61 | .profile { 62 | background: rgba(0, 0, 0, 0.8); 63 | color: #fefefe; 64 | } 65 | .profile img { 66 | border-radius: 50%; 67 | } 68 | 69 | 70 | /* WORK EXPERIENCE 71 | -------------------*/ 72 | .work { 73 | background: #fefefe; 74 | } 75 | 76 | 77 | /* SKILLS 78 | ----------*/ 79 | .skills { 80 | 81 | } 82 | 83 | 84 | /* EDUCATION 85 | -------------*/ 86 | .education { 87 | background: #fefefe; 88 | } 89 | 90 | 91 | /* CONTACT & FOOTER 92 | --------------------*/ 93 | .contact { 94 | background: #111111; 95 | color: #fefefe; 96 | } 97 | -------------------------------------------------------------------------------- /project/examples/7-more-background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Your Name Here

21 |

Job Title or Tagline

22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 | Your Name 30 | 31 |
32 |

Hello!

33 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

34 |

Links to stuff about you, if needed. link and link.

35 |

Or another paragraph!

36 |
37 |
38 |
39 | 40 | 41 | 42 |
43 |
44 |

Work Experience

45 | 46 |
47 |
48 |

Company Name

49 |

Job title

50 |

September 2012 - Present

51 |
52 | 53 |
54 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

55 |
56 |
57 | 58 |
59 |
60 |

Company Name

61 |

Job Title

62 |

March 2013 - February 2014

63 |
64 | 65 |
66 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

67 | 68 |

Key contributions:

69 |
    70 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 71 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 72 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 |
82 |
83 |

Skills

84 | 85 |
86 |
87 |

Best at:

88 |
    89 |
  • HTML / HTML5
    • 90 |
  • CSS / CSS3
    • 91 |
  • Less / Sass
    • 92 |
  • JavaScript / jQuery
    • 93 |
94 |
95 | 96 |
97 |

Worked with:

98 |
    99 |
  • Wordpress
    • 100 |
  • PHP
    • 101 |
  • Processing
    • 102 |
103 |
104 | 105 |
106 |

Learning:

107 |
    108 |
  • angular.js
    • 109 |
  • Stylus
    • 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 |
119 |
120 |

Education

121 | 122 |
123 |

College or University, 2006

124 |

Designation or Degree

125 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

126 |
127 | 128 |
129 |

College or University, 2005

130 |

Designation or Degree

131 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

132 |
133 |
134 |
135 | 136 | 137 |
138 |
139 |

Let's keep in touch!

140 | 141 | 149 | 150 |

hello@your-email.com

151 |

416.123.4567

152 |

123 Anywhere St.
153 | Toronto, ON A1B 2C3

154 | 155 |

Copyright © 2016 by Your Name

156 |
157 |
158 | 159 | 160 | -------------------------------------------------------------------------------- /project/examples/8-gradients.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | body { 4 | font-family: 'Merriweather', serif; 5 | line-height: 1.5; 6 | padding: 0; 7 | margin: 0; 8 | background: url(../images/background-1.jpg) no-repeat fixed 50%; 9 | background-size: cover; 10 | } 11 | 12 | h1, h2, h3 { 13 | font-weight: 400; 14 | } 15 | h1, h3 { 16 | font-family: "Open Sans", sans-serif; 17 | text-transform: uppercase; 18 | } 19 | h1 { 20 | font-size: 32px; 21 | } 22 | h2 { 23 | font-family: "Pacifico", cursive; 24 | } 25 | a { 26 | color: #2980b9; 27 | } 28 | 29 | section, 30 | footer { 31 | padding: 50px 0; 32 | } 33 | .content-wrap { 34 | max-width: 1000px; 35 | width: 90%; 36 | margin: 0 auto; 37 | } 38 | 39 | 40 | 41 | /* HEADER 42 | ----------*/ 43 | header { 44 | text-align: center; 45 | padding: 100px 0; 46 | } 47 | header h1 { 48 | font-family: "Pacifico", cursive; 49 | font-size: 80px; 50 | text-transform: none; 51 | } 52 | header h2 { 53 | font-family: "Open Sans", sans-serif; 54 | text-transform: uppercase; 55 | font-size: 32px; 56 | } 57 | 58 | 59 | /* ABOUT ME 60 | ----------------------*/ 61 | .profile { 62 | background: rgba(0, 0, 0, 0.8); 63 | color: #fefefe; 64 | } 65 | .profile img { 66 | border-radius: 50%; 67 | } 68 | 69 | 70 | /* WORK EXPERIENCE 71 | -------------------*/ 72 | .work { 73 | background: #fefefe; 74 | } 75 | 76 | 77 | /* SKILLS 78 | ----------*/ 79 | .skills { 80 | background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5) ), 81 | url(../images/background-3.jpg); 82 | background-size: cover; 83 | color: #fefefe; 84 | } 85 | 86 | 87 | /* EDUCATION 88 | -------------*/ 89 | .education { 90 | background: #fefefe; 91 | } 92 | 93 | 94 | /* CONTACT & FOOTER 95 | --------------------*/ 96 | .contact { 97 | background: #111111; 98 | color: #fefefe; 99 | } 100 | -------------------------------------------------------------------------------- /project/examples/8-gradients.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Your Name Here

21 |

Job Title or Tagline

22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 | Your Name 30 | 31 |
32 |

Hello!

33 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

34 |

Links to stuff about you, if needed. link and link.

35 |

Or another paragraph!

36 |
37 |
38 |
39 | 40 | 41 | 42 |
43 |
44 |

Work Experience

45 | 46 |
47 |
48 |

Company Name

49 |

Job title

50 |

September 2012 - Present

51 |
52 | 53 |
54 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

55 |
56 |
57 | 58 |
59 |
60 |

Company Name

61 |

Job Title

62 |

March 2013 - February 2014

63 |
64 | 65 |
66 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

67 | 68 |

Key contributions:

69 |
    70 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 71 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 72 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 |
82 |
83 |

Skills

84 | 85 |
86 |
87 |

Best at:

88 |
    89 |
  • HTML / HTML5
    • 90 |
  • CSS / CSS3
    • 91 |
  • Less / Sass
    • 92 |
  • JavaScript / jQuery
    • 93 |
94 |
95 | 96 |
97 |

Worked with:

98 |
    99 |
  • Wordpress
    • 100 |
  • PHP
    • 101 |
  • Processing
    • 102 |
103 |
104 | 105 |
106 |

Learning:

107 |
    108 |
  • angular.js
    • 109 |
  • Stylus
    • 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 |
119 |
120 |

Education

121 | 122 |
123 |

College or University, 2006

124 |

Designation or Degree

125 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

126 |
127 | 128 |
129 |

College or University, 2005

130 |

Designation or Degree

131 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

132 |
133 |
134 |
135 | 136 | 137 |
138 |
139 |

Let's keep in touch!

140 | 141 | 149 | 150 |

hello@your-email.com

151 |

416.123.4567

152 |

123 Anywhere St.
153 | Toronto, ON A1B 2C3

154 | 155 |

Copyright © 2016 by Your Name

156 |
157 |
158 | 159 | 160 | -------------------------------------------------------------------------------- /project/examples/9-flexbox.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | /* 4 | apply a natural box layout model to all elements 5 | http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 6 | */ 7 | html { 8 | box-sizing: border-box; 9 | } 10 | *, *:before, *:after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | font-family: 'Merriweather', serif; 16 | line-height: 1.5; 17 | padding: 0; 18 | margin: 0; 19 | background: url(../images/background-1.jpg) no-repeat fixed 50%; 20 | background-size: cover; 21 | } 22 | 23 | h1, h2, h3 { 24 | font-weight: 400; 25 | } 26 | h1, h3 { 27 | font-family: "Open Sans", sans-serif; 28 | text-transform: uppercase; 29 | } 30 | h1 { 31 | font-size: 32px; 32 | } 33 | h2 { 34 | font-family: "Pacifico", cursive; 35 | } 36 | a { 37 | color: #2980b9; 38 | } 39 | 40 | section, 41 | footer { 42 | padding: 50px 0; 43 | } 44 | .content-wrap { 45 | max-width: 1000px; 46 | width: 90%; 47 | margin: 0 auto; 48 | } 49 | 50 | 51 | 52 | /* HEADER 53 | ----------*/ 54 | header { 55 | text-align: center; 56 | padding: 100px 0; 57 | } 58 | header h1 { 59 | font-family: "Pacifico", cursive; 60 | font-size: 80px; 61 | text-transform: none; 62 | } 63 | header h2 { 64 | font-family: "Open Sans", sans-serif; 65 | text-transform: uppercase; 66 | font-size: 32px; 67 | } 68 | 69 | 70 | /* ABOUT ME 71 | ----------------------*/ 72 | .profile { 73 | background: rgba(0, 0, 0, 0.8); 74 | color: #fefefe; 75 | } 76 | .profile .content-wrap { 77 | display: flex; 78 | justify-content: space-between; 79 | align-items: flex-start; 80 | } 81 | .profile img { 82 | border-radius: 50%; 83 | margin-right: 3%; 84 | width: 30%; 85 | } 86 | 87 | 88 | /* WORK EXPERIENCE 89 | -------------------*/ 90 | .work { 91 | background: #fefefe; 92 | } 93 | 94 | 95 | /* SKILLS 96 | ----------*/ 97 | .skills { 98 | background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5) ), 99 | url(../images/background-3.jpg); 100 | background-size: cover; 101 | color: #fefefe; 102 | } 103 | 104 | 105 | /* EDUCATION 106 | -------------*/ 107 | .education { 108 | background: #fefefe; 109 | } 110 | 111 | 112 | /* CONTACT & FOOTER 113 | --------------------*/ 114 | .contact { 115 | background: #111111; 116 | color: #fefefe; 117 | } 118 | -------------------------------------------------------------------------------- /project/examples/9-flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Your Name Here

21 |

Job Title or Tagline

22 |
23 |
24 | 25 | 26 | 27 |
28 |
29 | Your Name 30 | 31 |
32 |

Hello!

33 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

34 |

Links to stuff about you, if needed. link and link.

35 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non. Sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse.

36 |
37 |
38 |
39 | 40 | 41 | 42 |
43 |
44 |

Work Experience

45 | 46 |
47 |
48 |

Company Name

49 |

Job title

50 |

September 2012 - Present

51 |
52 | 53 |
54 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

55 |
56 |
57 | 58 |
59 |
60 |

Company Name

61 |

Job Title

62 |

March 2013 - February 2014

63 |
64 | 65 |
66 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

67 | 68 |

Key contributions:

69 |
    70 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 71 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 72 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 |
82 |
83 |

Skills

84 | 85 |
86 |
87 |

Best at:

88 |
    89 |
  • HTML / HTML5
    • 90 |
  • CSS / CSS3
    • 91 |
  • Less / Sass
    • 92 |
  • JavaScript / jQuery
    • 93 |
94 |
95 | 96 |
97 |

Worked with:

98 |
    99 |
  • Wordpress
    • 100 |
  • PHP
    • 101 |
  • Processing
    • 102 |
103 |
104 | 105 |
106 |

Learning:

107 |
    108 |
  • angular.js
    • 109 |
  • Stylus
    • 110 |
111 |
112 |
113 |
114 |
115 | 116 | 117 | 118 |
119 |
120 |

Education

121 | 122 |
123 |

College or University, 2006

124 |

Designation or Degree

125 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

126 |
127 | 128 |
129 |

College or University, 2005

130 |

Designation or Degree

131 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

132 |
133 |
134 |
135 | 136 | 137 |
138 |
139 |

Let's keep in touch!

140 | 141 | 149 | 150 |

hello@your-email.com

151 |

416.123.4567

152 |

123 Anywhere St.
153 | Toronto, ON A1B 2C3

154 | 155 |

Copyright © 2016 by Your Name

156 |
157 |
158 | 159 | 160 | -------------------------------------------------------------------------------- /project/examples/extras-animation.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | *, *:before, *:after { 4 | -moz-box-sizing: border-box; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | .clearfix:after { /* clearfix */ 10 | content: ""; 11 | display: table; 12 | clear: both; 13 | } 14 | 15 | body { 16 | font-family: "Merriweather", serif; 17 | line-height: 1.5; 18 | background: url(../images/background-2.jpg) no-repeat fixed 50%; 19 | background-size: cover; 20 | } 21 | 22 | h1, h2, h3 { 23 | font-weight: 400; 24 | margin: 0; 25 | } 26 | 27 | h2, h3 { 28 | font-family: "Open Sans", sans-serif; 29 | text-transform: uppercase; 30 | } 31 | 32 | h1 { 33 | font-family: "Pacifico", cursive; 34 | font-size: 80px; 35 | } 36 | 37 | h2 { 38 | font-size: 32px; 39 | } 40 | section h2 { 41 | border-bottom: 1px solid #ccc; 42 | } 43 | a { 44 | color: #2980b9; 45 | } 46 | a:hover { 47 | color: #000; 48 | } 49 | .content-wrap { 50 | max-width: 1000px; 51 | width: 90%; 52 | margin: 0 auto; 53 | padding: 60px 0; 54 | } 55 | 56 | 57 | /* HEADER 58 | ----------*/ 59 | header { 60 | text-align: center; 61 | padding: 150px 0; 62 | } 63 | 64 | 65 | /* SHARED SECTION STYLES 66 | -------------------------*/ 67 | .profile, .skills, .contact { 68 | color: #ffffff; 69 | } 70 | .work-experience, .education { 71 | background: #FEFEFC; 72 | } 73 | 74 | 75 | /* ABOUT ME / PROFILE 76 | ----------------------*/ 77 | .profile { 78 | background: rgba(0,0,0,0.8); 79 | color: #ffffff; 80 | } 81 | .profile h2 { 82 | border: none; 83 | background: #2980b9; 84 | display: inline-block; 85 | padding: 10px 20px; 86 | transform: rotate(-4deg); 87 | margin-bottom: 10px; 88 | } 89 | .profile h2:hover { 90 | -webkit-animation-name: bounce; 91 | animation-name: bounce; 92 | -webkit-transform-origin: center bottom; 93 | transform-origin: center bottom; 94 | } 95 | .profile img { 96 | float: left; 97 | width: 27%; 98 | margin-right: 3%; 99 | border-radius: 50%; 100 | border: 1px solid #ddd; 101 | padding: 4px; 102 | } 103 | .summary { 104 | width: 70%; 105 | float: right; 106 | } 107 | 108 | 109 | 110 | 111 | /* WORK EXPERIENCE 112 | -------------------*/ 113 | .work-experience .details { 114 | width: 30%; 115 | float: left; 116 | } 117 | .work-experience .description { 118 | width: 70%; 119 | float: right; 120 | } 121 | .work-experience .item { 122 | border-bottom: 1px solid #ccc; 123 | } 124 | .work-experience .item:last-child { 125 | border-bottom: none; 126 | } 127 | 128 | 129 | /* SKILLS 130 | ----------*/ 131 | .skills { 132 | background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 133 | url(../images/background-4.jpg) no-repeat fixed; 134 | background-size: cover; 135 | text-align: center; 136 | } 137 | .skills .columns { 138 | width: 33.33%; 139 | float: left; 140 | } 141 | .skills ul { 142 | list-style-type: none; 143 | padding: 0; 144 | } 145 | .skills-list i, 146 | .skills-list h4 { 147 | color: #2980b9; 148 | } 149 | .skills-circles ul { 150 | 151 | } 152 | .skills-circles ul li { 153 | display: inline-block; 154 | height: 150px; 155 | width: 150px; 156 | line-height: 150px; 157 | border: 2px solid #2980b9; 158 | border-radius: 50%; 159 | } 160 | .skills-circles span { 161 | display: inline-block; 162 | line-height: normal; 163 | vertical-align: middle; 164 | } 165 | 166 | 167 | /* EDUCATION 168 | -------------*/ 169 | .education { 170 | 171 | } 172 | 173 | /* CONTACT & FOOTER 174 | --------------------*/ 175 | .contact { 176 | background: #111111; 177 | } 178 | -------------------------------------------------------------------------------- /project/examples/extras-animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |

Your Name Here

22 |

Job Title or Tagline

23 |
24 | 25 | 26 |
27 |
28 | Your Name 29 |
30 |

Hello!

31 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

32 |

Links to stuff about you, if needed. link and link.

33 |

Or another paragraph!

34 |
35 |
36 |
37 | 38 | 39 |
40 |
41 |

Work Experience

42 | 43 |
44 |
45 |

Company Name

46 |

Job title 1

47 |

July 2014 - Present

48 |

Job title 2

49 |

July 2011 - July 2014

50 |
51 |
52 |

Job title 1: [You can use this portion if you held several positions in the company.] Suspendisse dignissim nisi non velit interdum, in condimentum augue varius. Nullam ac felis eu lacus rhoncus posuere. Fusce pretium auctor bibendum. Suspendisse rutrum rhoncus purus sed dapibus. Nulla in viverra justo. Quisque id sapien sed urna lobortis rutrum eu sed enim. Nullam pharetra urna facilisis tellus vulputate, ac vehicula quam tempus.

53 | 54 |

Job title 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptas, odio deleniti omnis. Eaque, numquam itaque! Maxime, iure dolore ratione tenetur. Sunt nam maxime repellendus! Vitae, natus fugit earum consectetur.

55 |
56 |
57 | 58 |
59 |
60 |

Company Name

61 |

Job title

62 |

September 2012 - Present

63 |
64 |
65 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

66 |
67 |
68 | 69 |
70 |
71 |

Company Name

72 |

Job Title

73 |

March 2013 - February 2014

74 |
75 |
76 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

77 | 78 |

Key contributions:

79 |
    80 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 81 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 82 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 83 |
84 |
85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 |

Skills

93 | 94 |
95 |

List Option / Title

96 | 97 |
98 |

Best at:

99 |
    100 |
  • HTML / HTML5
    • 101 |
  • CSS / CSS3
    • 102 |
  • Less / Sass
    • 103 |
  • JavaScript / jQuery
    • 104 |
105 |
106 | 107 |
108 |

Worked with:

109 |
    110 |
  • Wordpress
    • 111 |
  • PHP
    • 112 |
  • Processing
    • 113 |
114 |
115 | 116 |
117 |

Learning:

118 |
    119 |
  • angular.js
    • 120 |
  • Stylus
    • 121 |
122 |
123 |
124 | 125 |
126 |

Circle Option / Title

127 |
    128 |
  • Social Media
    • 129 |
  • Marketing Strategy
    • 130 |
  • Brand Identity
    • 131 |
  • Graphic Design
    • 132 |
133 |
134 |
135 |
136 | 137 | 138 | 139 |
140 |
141 |

Education

142 | 143 |
144 |

College or University, 2006

145 |

Designation or Degree

146 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

147 |
148 |
149 |

College or University, 2005

150 |

Designation or Degree

151 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

152 |
153 |
154 |
155 | 156 | 157 |
158 |
159 |

Let's keep in touch!

160 | 161 | 169 | 170 |

hello@your-email.com

171 |

416.123.4567

172 |

123 Anywhere St.
173 | Toronto, ON A1B 2C3

174 | 175 |
176 |

Copyright © 2016 by Your Name

177 |
178 |
179 |
180 | 181 | 182 | -------------------------------------------------------------------------------- /project/examples/extras-circles.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | *, *:before, *:after { 4 | -moz-box-sizing: border-box; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | .clearfix:after { /* clearfix */ 10 | content: ""; 11 | display: table; 12 | clear: both; 13 | } 14 | 15 | body { 16 | font-family: "Merriweather", serif; 17 | line-height: 1.5; 18 | background: url(../images/background-2.jpg) no-repeat fixed 50%; 19 | background-size: cover; 20 | } 21 | 22 | h1, h2, h3 { 23 | font-weight: 400; 24 | margin: 0; 25 | } 26 | 27 | h2, h3 { 28 | font-family: "Open Sans", sans-serif; 29 | text-transform: uppercase; 30 | } 31 | 32 | h1 { 33 | font-family: "Pacifico", cursive; 34 | font-size: 80px; 35 | } 36 | 37 | h2 { 38 | font-size: 32px; 39 | } 40 | section h2 { 41 | border-bottom: 1px solid #ccc; 42 | } 43 | a { 44 | color: #2980b9; 45 | } 46 | a:hover { 47 | color: #000; 48 | } 49 | .content-wrap { 50 | max-width: 1000px; 51 | width: 90%; 52 | margin: 0 auto; 53 | padding: 60px 0; 54 | } 55 | 56 | 57 | /* HEADER 58 | ----------*/ 59 | header { 60 | text-align: center; 61 | padding: 150px 0; 62 | } 63 | 64 | 65 | /* SHARED SECTION STYLES 66 | -------------------------*/ 67 | .profile, .skills, .contact { 68 | color: #ffffff; 69 | } 70 | .work-experience, .education { 71 | background: #FEFEFC; 72 | } 73 | 74 | 75 | /* ABOUT ME / PROFILE 76 | ----------------------*/ 77 | .profile { 78 | background: rgba(0,0,0,0.8); 79 | color: #ffffff; 80 | } 81 | .profile h2 { 82 | border: none; 83 | background: #2980b9; 84 | display: inline-block; 85 | padding: 10px 20px; 86 | transform: rotate(-4deg); 87 | margin-bottom: 10px; 88 | } 89 | .profile h2:hover { 90 | -webkit-animation-name: bounce; 91 | animation-name: bounce; 92 | -webkit-transform-origin: center bottom; 93 | transform-origin: center bottom; 94 | } 95 | .profile img { 96 | float: left; 97 | width: 27%; 98 | margin-right: 3%; 99 | border-radius: 50%; 100 | border: 1px solid #ddd; 101 | padding: 4px; 102 | } 103 | .summary { 104 | width: 70%; 105 | float: right; 106 | } 107 | 108 | 109 | 110 | 111 | /* WORK EXPERIENCE 112 | -------------------*/ 113 | .work-experience .details { 114 | width: 30%; 115 | float: left; 116 | } 117 | .work-experience .description { 118 | width: 70%; 119 | float: right; 120 | } 121 | .work-experience .item { 122 | border-bottom: 1px solid #ccc; 123 | } 124 | .work-experience .item:last-child { 125 | border-bottom: none; 126 | } 127 | 128 | 129 | /* SKILLS 130 | ----------*/ 131 | .skills { 132 | background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 133 | url(../images/background-4.jpg) no-repeat fixed; 134 | background-size: cover; 135 | text-align: center; 136 | } 137 | .skills .columns { 138 | width: 33.33%; 139 | float: left; 140 | } 141 | .skills ul { 142 | list-style-type: none; 143 | padding: 0; 144 | } 145 | .skills-list i, 146 | .skills-list h4 { 147 | color: #2980b9; 148 | } 149 | .skills-circles ul { 150 | 151 | } 152 | .skills-circles ul li { 153 | display: inline-block; 154 | height: 150px; 155 | width: 150px; 156 | line-height: 150px; 157 | border: 2px solid #2980b9; 158 | border-radius: 50%; 159 | } 160 | .skills-circles span { 161 | display: inline-block; 162 | line-height: normal; 163 | vertical-align: middle; 164 | } 165 | 166 | 167 | /* EDUCATION 168 | -------------*/ 169 | .education { 170 | 171 | } 172 | 173 | /* CONTACT & FOOTER 174 | --------------------*/ 175 | .contact { 176 | background: #111111; 177 | } 178 | -------------------------------------------------------------------------------- /project/examples/extras-circles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Your Name Here

20 |

Job Title or Tagline

21 |
22 | 23 | 24 |
25 |
26 | Your Name 27 |
28 |

Hello!

29 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

30 |

Links to stuff about you, if needed. link and link.

31 |

Or another paragraph!

32 |
33 |
34 |
35 | 36 | 37 |
38 |
39 |

Work Experience

40 | 41 |
42 |
43 |

Company Name

44 |

Job title 1

45 |

July 2014 - Present

46 |

Job title 2

47 |

July 2011 - July 2014

48 |
49 |
50 |

Job title 1: [You can use this portion if you held several positions in the company.] Suspendisse dignissim nisi non velit interdum, in condimentum augue varius. Nullam ac felis eu lacus rhoncus posuere. Fusce pretium auctor bibendum. Suspendisse rutrum rhoncus purus sed dapibus. Nulla in viverra justo. Quisque id sapien sed urna lobortis rutrum eu sed enim. Nullam pharetra urna facilisis tellus vulputate, ac vehicula quam tempus.

51 | 52 |

Job title 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptas, odio deleniti omnis. Eaque, numquam itaque! Maxime, iure dolore ratione tenetur. Sunt nam maxime repellendus! Vitae, natus fugit earum consectetur.

53 |
54 |
55 | 56 |
57 |
58 |

Company Name

59 |

Job title

60 |

September 2012 - Present

61 |
62 |
63 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

64 |
65 |
66 | 67 |
68 |
69 |

Company Name

70 |

Job Title

71 |

March 2013 - February 2014

72 |
73 |
74 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

75 | 76 |

Key contributions:

77 |
    78 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 79 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 80 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 81 |
82 |
83 |
84 |
85 |
86 | 87 | 88 |
89 |
90 |

Skills

91 | 92 |
93 |

List Option / Title

94 | 95 |
96 |

Best at:

97 |
    98 |
  • HTML / HTML5
    • 99 |
  • CSS / CSS3
    • 100 |
  • Less / Sass
    • 101 |
  • JavaScript / jQuery
    • 102 |
103 |
104 | 105 |
106 |

Worked with:

107 |
    108 |
  • Wordpress
    • 109 |
  • PHP
    • 110 |
  • Processing
    • 111 |
112 |
113 | 114 |
115 |

Learning:

116 |
    117 |
  • angular.js
    • 118 |
  • Stylus
    • 119 |
120 |
121 |
122 | 123 |
124 |

Circle Option / Title

125 |
    126 |
  • Social Media
    • 127 |
  • Marketing Strategy
    • 128 |
  • Brand Identity
    • 129 |
  • Graphic Design
    • 130 |
131 |
132 |
133 |
134 | 135 | 136 | 137 |
138 |
139 |

Education

140 | 141 |
142 |

College or University, 2006

143 |

Designation or Degree

144 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

145 |
146 |
147 |

College or University, 2005

148 |

Designation or Degree

149 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

150 |
151 |
152 |
153 | 154 | 155 |
156 |
157 |

Let's keep in touch!

158 | 159 | 167 | 168 |

hello@your-email.com

169 |

416.123.4567

170 |

123 Anywhere St.
171 | Toronto, ON A1B 2C3

172 | 173 |
174 |

Copyright © 2016 by Your Name

175 |
176 |
177 |
178 | 179 | 180 | -------------------------------------------------------------------------------- /project/examples/extras-download-btn.css: -------------------------------------------------------------------------------- 1 | /* GLOBAL STYLES 2 | -----------------*/ 3 | *, *:before, *:after { 4 | -moz-box-sizing: border-box; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | .clearfix:after { /* clearfix */ 10 | content: ""; 11 | display: table; 12 | clear: both; 13 | } 14 | 15 | body { 16 | font-family: "Merriweather", serif; 17 | line-height: 1.5; 18 | background: url(../images/background-2.jpg) no-repeat fixed 50%; 19 | background-size: cover; 20 | } 21 | 22 | h1, h2, h3 { 23 | font-weight: 400; 24 | margin: 0; 25 | } 26 | 27 | h2, h3 { 28 | font-family: "Open Sans", sans-serif; 29 | text-transform: uppercase; 30 | } 31 | 32 | h1 { 33 | font-family: "Pacifico", cursive; 34 | font-size: 80px; 35 | } 36 | 37 | h2 { 38 | font-size: 32px; 39 | } 40 | section h2 { 41 | border-bottom: 1px solid #ccc; 42 | } 43 | a { 44 | color: #2980b9; 45 | transition: all 0.5s ease; 46 | } 47 | a:hover { 48 | color: #ffffff; 49 | } 50 | .content-wrap { 51 | max-width: 1000px; 52 | width: 90%; 53 | margin: 0 auto; 54 | padding: 60px 0; 55 | } 56 | 57 | 58 | /* HEADER 59 | ----------*/ 60 | header { 61 | text-align: center; 62 | padding: 150px 0; 63 | } 64 | /* download PDF resume */ 65 | .download { 66 | position: fixed; 67 | top: 0; 68 | right: 0; 69 | display: inline-block; 70 | background: #2980b9; 71 | padding: 18px; 72 | text-decoration: none; 73 | color: #fff; 74 | } 75 | 76 | 77 | /* SHARED SECTION STYLES 78 | -------------------------*/ 79 | .profile, .skills, .contact { 80 | color: #ffffff; 81 | } 82 | .work-experience, .education { 83 | background: #FEFEFC; 84 | } 85 | 86 | 87 | /* ABOUT ME / PROFILE 88 | ----------------------*/ 89 | .profile { 90 | background: rgba(0,0,0,0.8); 91 | color: #ffffff; 92 | } 93 | .profile h2 { 94 | border: none; 95 | background: #2980b9; 96 | display: inline-block; 97 | padding: 10px 20px; 98 | transform: rotate(-4deg); 99 | margin-bottom: 10px; 100 | } 101 | .profile h2:hover { 102 | -webkit-animation-name: bounce; 103 | animation-name: bounce; 104 | -webkit-transform-origin: center bottom; 105 | transform-origin: center bottom; 106 | } 107 | .profile img { 108 | float: left; 109 | width: 27%; 110 | margin-right: 3%; 111 | border-radius: 50%; 112 | border: 1px solid #ddd; 113 | padding: 4px; 114 | } 115 | .summary { 116 | width: 70%; 117 | float: right; 118 | } 119 | 120 | 121 | 122 | 123 | /* WORK EXPERIENCE 124 | -------------------*/ 125 | .work-experience .details { 126 | width: 30%; 127 | float: left; 128 | } 129 | .work-experience .description { 130 | width: 70%; 131 | float: right; 132 | } 133 | .work-experience .item { 134 | border-bottom: 1px solid #ccc; 135 | } 136 | .work-experience .item:last-child { 137 | border-bottom: none; 138 | } 139 | 140 | 141 | /* SKILLS 142 | ----------*/ 143 | .skills { 144 | background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),url(../images/background-4.jpg) no-repeat fixed; 145 | background-size: cover; 146 | } 147 | .skills .columns { 148 | width: 33.33%; 149 | float: left; 150 | } 151 | 152 | /* EDUCATION 153 | -------------*/ 154 | .education { 155 | 156 | } 157 | 158 | /* CONTACT & FOOTER 159 | --------------------*/ 160 | .contact { 161 | background: #111111; 162 | } 163 | -------------------------------------------------------------------------------- /project/examples/extras-download-btn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

Your Name Here

20 |

Job Title or Tagline

21 | Download resume (pdf) 22 |
23 | 24 | 25 |
26 |
27 | Your Name 28 |
29 |

Hello!

30 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

31 |

Links to stuff about you, if needed. link and link.

32 |

Or another paragraph!

33 |
34 |
35 |
36 | 37 | 38 |
39 |
40 |

Work Experience

41 | 42 |
43 |
44 |

Company Name

45 |

Job title 1

46 |

July 2014 - Present

47 |

Job title 2

48 |

July 2011 - July 2014

49 |
50 |
51 |

Job title 1: [You can use this portion if you held several positions in the company.] Suspendisse dignissim nisi non velit interdum, in condimentum augue varius. Nullam ac felis eu lacus rhoncus posuere. Fusce pretium auctor bibendum. Suspendisse rutrum rhoncus purus sed dapibus. Nulla in viverra justo. Quisque id sapien sed urna lobortis rutrum eu sed enim. Nullam pharetra urna facilisis tellus vulputate, ac vehicula quam tempus.

52 | 53 |

Job title 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur voluptas, odio deleniti omnis. Eaque, numquam itaque! Maxime, iure dolore ratione tenetur. Sunt nam maxime repellendus! Vitae, natus fugit earum consectetur.

54 |
55 |
56 | 57 |
58 |
59 |

Company Name

60 |

Job title

61 |

September 2012 - Present

62 |
63 |
64 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

65 |
66 |
67 | 68 |
69 |
70 |

Company Name

71 |

Job Title

72 |

March 2013 - February 2014

73 |
74 |
75 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

76 | 77 |

Key contributions:

78 |
    79 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 80 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 81 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 82 |
83 |
84 |
85 |
86 |
87 | 88 | 89 |
90 |
91 |

Skills

92 | 93 |
94 |

List Option / Title

95 | 96 |
97 |

Best at:

98 |
    99 |
  • HTML / HTML5
    • 100 |
  • CSS / CSS3
    • 101 |
  • Less / Sass
    • 102 |
  • JavaScript / jQuery
    • 103 |
104 |
105 | 106 |
107 |

Worked with:

108 |
    109 |
  • Wordpress
    • 110 |
  • PHP
    • 111 |
  • Processing
    • 112 |
113 |
114 | 115 |
116 |

Learning:

117 |
    118 |
  • angular.js
    • 119 |
  • Stylus
    • 120 |
121 |
122 |
123 | 124 |
125 |

Circle Option / Title

126 |
    127 |
  • Social Media
    • 128 |
  • Marketing Strategy
    • 129 |
  • Brand Identity
    • 130 |
  • Graphic Design
    • 131 |
132 |
133 |
134 |
135 | 136 | 137 | 138 |
139 |
140 |

Education

141 | 142 |
143 |

College or University, 2006

144 |

Designation or Degree

145 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

146 |
147 |
148 |

College or University, 2005

149 |

Designation or Degree

150 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

151 |
152 |
153 |
154 | 155 | 156 |
157 |
158 |

Let's keep in touch!

159 | 160 | 168 | 169 |

hello@your-email.com

170 |

416.123.4567

171 |

123 Anywhere St.
172 | Toronto, ON A1B 2C3

173 | 174 |
175 |

Copyright © 2016 by Your Name

176 |
177 |
178 |
179 | 180 | 181 | -------------------------------------------------------------------------------- /project/examples/images/background-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/examples/images/background-1.jpg -------------------------------------------------------------------------------- /project/examples/images/background-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/examples/images/background-2.jpg -------------------------------------------------------------------------------- /project/examples/images/background-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/examples/images/background-3.jpg -------------------------------------------------------------------------------- /project/examples/images/background-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/examples/images/background-4.jpg -------------------------------------------------------------------------------- /project/examples/images/background-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/examples/images/background-5.jpg -------------------------------------------------------------------------------- /project/examples/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/examples/images/profile.jpg -------------------------------------------------------------------------------- /project/final.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Download resume (pdf) 18 | 19 | 20 |
21 |
22 |

Your Name Here

23 |

Job Title or Tagline

24 |
25 |
26 | 27 | 28 | 29 |
30 |
31 | Your Name 32 | 33 |
34 |

Hello!

35 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

36 |

Links to stuff about you, if needed. link and link.

37 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non. Sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse.

38 |
39 |
40 |
41 | 42 | 43 | 44 |
45 |
46 |

Work Experience

47 | 48 |
49 |
50 |

Company Name

51 |

Job title

52 |

September 2012 - Present

53 |
54 | 55 |
56 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

57 |
58 |
59 | 60 |
61 |
62 |

Company Name

63 |

Job Title

64 |

March 2013 - February 2014

65 |
66 | 67 |
68 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

69 | 70 |

Key contributions:

71 |
    72 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 73 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 74 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 | 83 |
84 |
85 |

Skills

86 | 87 |
88 |
89 |

Best at:

90 |
    91 |
  • HTML / HTML5
    • 92 |
  • CSS / CSS3
    • 93 |
  • Less / Sass
    • 94 |
  • JavaScript / jQuery
    • 95 |
96 |
97 | 98 |
99 |

Worked with:

100 |
    101 |
  • Wordpress
    • 102 |
  • PHP
    • 103 |
  • Processing
    • 104 |
105 |
106 | 107 |
108 |

Learning:

109 |
    110 |
  • angular.js
    • 111 |
  • Stylus
    • 112 |
113 |
114 |
115 |
116 |
117 | 118 | 119 | 120 |
121 |
122 |

Education

123 | 124 |
125 |

College or University, 2006

126 |

Designation or Degree

127 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

128 |
129 | 130 |
131 |

College or University, 2005

132 |

Designation or Degree

133 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

134 |
135 |
136 |
137 | 138 | 139 |
140 |
141 |

Let's keep in touch!

142 | 143 | 151 | 152 |

hello@your-email.com

153 |

416.123.4567

154 |

123 Anywhere St.
155 | Toronto, ON A1B 2C3

156 | 157 |

Copyright © 2016 by Your Name

158 |
159 |
160 | 161 | 162 | -------------------------------------------------------------------------------- /project/images/background-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/images/background-1.jpg -------------------------------------------------------------------------------- /project/images/background-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/images/background-2.jpg -------------------------------------------------------------------------------- /project/images/background-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/images/background-3.jpg -------------------------------------------------------------------------------- /project/images/background-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/images/background-4.jpg -------------------------------------------------------------------------------- /project/images/background-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/images/background-5.jpg -------------------------------------------------------------------------------- /project/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/images/profile.jpg -------------------------------------------------------------------------------- /project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Your Name | Job Title or Tagline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Your Name Here

19 |

Job Title or Tagline

20 |
21 | 22 | 23 | 24 |
25 | Your Name 26 | 27 |
28 |

Hello!

29 |

[Profile summary here] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis laboriosam officia blanditiis tempora sit fugiat molestiae iusto impedit ipsa cum, asperiores laborum, esse, doloribus explicabo! Autem, distinctio provident itaque non.

30 |

Links to stuff about you, if needed. link and link.

31 |

Or another paragraph!

32 |
33 |
34 | 35 | 36 | 37 |
38 |

Work Experience

39 | 40 |
41 |
42 |

Company Name

43 |

Job title

44 |

September 2012 - Present

45 |
46 | 47 |
48 |

Macchiato aromatic so as, cinnamon sit redeye in doppio trifecta. Latte blue mountain, cappuccino kopi-luwak, doppio irish body mazagran body. Skinny redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

49 |
50 |
51 | 52 |
53 |
54 |

Company Name

55 |

Job Title

56 |

March 2013 - February 2014

57 |
58 | 59 |
60 |

Redeye eu turkish, carajillo, skinny cultivar trifecta decaffeinated et cortado crema. Affogato pumpkin spice half and half, beans, cortado brewed foam percolator java.

61 | 62 |

Key contributions:

63 |
    64 |
  • Responsible for ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 65 |
  • Created ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 66 |
  • Organized ... lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • 67 |
68 |
69 |
70 |
71 | 72 | 73 | 74 |
75 |

Skills

76 | 77 |
78 |

List Option / Title

79 | 80 |
81 |

Best at:

82 |
    83 |
  • HTML / HTML5
    • 84 |
  • CSS / CSS3
    • 85 |
  • Less / Sass
    • 86 |
  • JavaScript / jQuery
    • 87 |
88 |
89 | 90 |
91 |

Worked with:

92 |
    93 |
  • Wordpress
    • 94 |
  • PHP
    • 95 |
  • Processing
    • 96 |
97 |
98 | 99 |
100 |

Learning:

101 |
    102 |
  • angular.js
    • 103 |
  • Stylus
    • 104 |
105 |
106 |
107 | 108 |
109 |

Circle Option / Title

110 |
    111 |
  • Social Media
    • 112 |
  • Marketing Strategy
    • 113 |
  • Brand Identity
    • 114 |
  • Graphic Design
    • 115 |
116 |
117 |
118 | 119 | 120 | 121 |
122 |

Education

123 | 124 |
125 |

College or University, 2006

126 |

Designation or Degree

127 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate voluptas architecto asperiores, natus qui quod suscipit quae, dolorum. Provident minus doloremque a deserunt quam saepe error quibusdam explicabo, possimus aliquam.

128 |
129 | 130 |
131 |

College or University, 2005

132 |

Designation or Degree

133 |

Description and/or awards. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

134 |
135 |
136 | 137 | 138 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /project/resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-css-fundamentals/0793f212d96a4c59fbe9368919f520b7255df057/project/resume.pdf --------------------------------------------------------------------------------