├── .DS_Store ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── framework ├── .DS_Store ├── css │ ├── .DS_Store │ ├── a11y │ │ └── plugin.css │ ├── fonts.css │ ├── highlightjs │ │ ├── docco.css │ │ ├── foundation.css │ │ ├── github.css │ │ ├── googlecode.css │ │ ├── monokai.css │ │ ├── vs.css │ │ └── xcode.css │ ├── slideshow.css │ ├── styles.css │ └── styles.css.map ├── fonts │ ├── montserrat-bold.woff2 │ ├── montserrat-regular.woff2 │ ├── opensans-light.woff2 │ ├── opensans.woff2 │ ├── pacifico.woff2 │ └── quicksand.woff2 ├── img │ ├── .DS_Store │ ├── 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 │ │ ├── about-image-float.png │ │ ├── atom-preferences.jpg │ │ ├── atom-settings-pc.jpg │ │ ├── atom-settings.jpg │ │ ├── atom-soft-wrap.jpg │ │ ├── box-borders-example.jpg │ │ ├── box-borders-stack.png │ │ ├── box-model-layout.jpg │ │ ├── css.gif │ │ ├── doughnuts.jpg │ │ ├── editor-add-project-1.jpg │ │ ├── editor-add-project-pc.jpg │ │ ├── excited-baby.gif │ │ ├── exercise-1-fr.jpg │ │ ├── exercise-1.jpg │ │ ├── exercise-3.png │ │ ├── exercise-3_fr.png │ │ ├── final-project.jpg │ │ ├── final-project_fr.png │ │ ├── float-long-text.png │ │ ├── float-short-text.png │ │ ├── google-fonts.png │ │ ├── graphical-z-index.gif │ │ ├── hover-transition.gif │ │ ├── john-mueller.png │ │ ├── keyboard-css.png │ │ ├── keyboard-css_fr.jpg │ │ ├── keyboard-html.png │ │ ├── keyboard-html_fr.jpg │ │ ├── kids-dancing.gif │ │ ├── link-margin.png │ │ ├── link-padding.png │ │ ├── llc-css.jpg │ │ ├── llc-no-css.jpg │ │ ├── theme-carpentry.png │ │ ├── theme-coffee-shop.png │ │ ├── theme-conference.png │ │ ├── theme-fashion.png │ │ ├── theme-food.png │ │ ├── theme-legal.png │ │ ├── theme-portfolio.png │ │ ├── theme-sports.png │ │ └── victory-dance.gif ├── license.txt ├── sass │ ├── _base.scss │ ├── _theme.scss │ ├── _workshop.scss │ └── styles.scss └── scripts │ ├── classList.js │ ├── jquery-1.11.0.min.js │ ├── llc.js │ ├── plugins │ ├── .DS_Store │ ├── a11y │ │ └── plugin.js │ ├── 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 ├── notes-en.html ├── project ├── .DS_Store ├── images │ ├── buildings.jpg │ ├── doughnuts.jpg │ ├── facebook.png │ ├── linkedin.png │ ├── logo-llc.jpg │ ├── logo.png │ ├── profile.jpg │ ├── robots.jpg │ ├── themes │ │ ├── carpentry │ │ │ ├── background.jpg │ │ │ └── profile.jpg │ │ ├── coffee-shop │ │ │ ├── background.jpg │ │ │ └── profile.jpg │ │ ├── conference │ │ │ ├── background.jpg │ │ │ └── profile.jpg │ │ ├── fashion │ │ │ ├── background.jpg │ │ │ └── profile.jpg │ │ ├── food │ │ │ ├── background.jpg │ │ │ └── profile.jpg │ │ ├── legal │ │ │ ├── background.jpg │ │ │ └── profile.jpg │ │ ├── portfolio │ │ │ ├── background.jpg │ │ │ └── profile.jpg │ │ └── sports │ │ │ ├── background.jpg │ │ │ └── profile.jpg │ └── twitter.png ├── reference-en │ ├── css │ │ ├── final.css │ │ ├── styles10.css │ │ ├── styles11.css │ │ ├── styles5.css │ │ ├── styles6.css │ │ ├── styles7.css │ │ ├── styles8.css │ │ └── styles9.css │ ├── exercise-10.html │ ├── exercise-11.html │ ├── exercise-2.html │ ├── exercise-3.html │ ├── exercise-4.html │ ├── exercise-5.html │ ├── exercise-6.html │ ├── exercise-7.html │ ├── exercise-8.html │ ├── exercise-9.html │ ├── final.html │ ├── images │ │ ├── buildings.jpg │ │ ├── doughnuts.jpg │ │ ├── facebook.png │ │ ├── linkedin.png │ │ ├── logo-llc.jpg │ │ ├── logo.png │ │ ├── profile.jpg │ │ ├── robots.jpg │ │ └── twitter.png │ └── themes │ │ ├── carpentry │ │ ├── index.html │ │ └── styles.css │ │ ├── coffee-shop │ │ ├── index.html │ │ └── styles.css │ │ ├── conference │ │ ├── index.html │ │ └── styles.css │ │ ├── fashion │ │ ├── index.html │ │ └── styles.css │ │ ├── food │ │ ├── index.html │ │ └── styles.css │ │ ├── legal │ │ ├── index.html │ │ └── styles.css │ │ ├── portfolio │ │ ├── index.html │ │ └── styles.css │ │ └── sports │ │ ├── index.html │ │ └── styles.css └── référence-fr │ ├── .DS_Store │ ├── css │ ├── final.css │ ├── styles10.css │ ├── styles11.css │ ├── styles5.css │ ├── styles6.css │ ├── styles7.css │ ├── styles8.css │ └── styles9.css │ ├── exercice-10.html │ ├── exercice-11.html │ ├── exercice-2.html │ ├── exercice-3.html │ ├── exercice-4.html │ ├── exercice-5.html │ ├── exercice-6.html │ ├── exercice-7.html │ ├── exercice-8.html │ ├── exercice-9.html │ ├── final.html │ ├── images │ ├── buildings.jpg │ ├── doughnuts.jpg │ ├── facebook.png │ ├── linkedin.png │ ├── logo-llc.jpg │ ├── logo.png │ ├── profile.jpg │ ├── robots.jpg │ └── twitter.png │ └── thämes │ ├── .DS_Store │ ├── café │ ├── index.html │ └── styles.css │ ├── conférence │ ├── index.html │ └── styles.css │ ├── droit │ ├── index.html │ └── styles.css │ ├── menuiserie │ ├── index.html │ └── styles.css │ ├── mode │ ├── index.html │ └── styles.css │ ├── nourriture │ ├── index.html │ └── styles.css │ ├── portfolio │ ├── index.html │ └── styles.css │ └── sports │ ├── index.html │ └── styles.css ├── slides-en.html └── slides-fr.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/.DS_Store -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .sass-cache 3 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /framework/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/.DS_Store -------------------------------------------------------------------------------- /framework/css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/css/.DS_Store -------------------------------------------------------------------------------- /framework/css/a11y/plugin.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSSS A11y Plugin 3 | * 4 | * - Resets focus indicator to be visible on `Tab` key press 5 | * - Removes `outline` for slides when they receive focus 6 | * - Includes helper classes 7 | * 8 | * @author Scott Vinkle 9 | * @version 0.1.0 10 | * @license MIT License 11 | */ 12 | 13 | /* Reset focus indicator styles */ 14 | a:focus { 15 | outline: 1px dotted #212121 !important; 16 | outline: 5px auto -webkit-focus-ring-color !important; 17 | } 18 | 19 | /* Removes flash of focus indicator when slide receives focus */ 20 | .slide[tabindex="-1"]:focus { 21 | outline: none; 22 | } 23 | 24 | /* `.visuallyhidden` helper class definition 25 | https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L141 26 | */ 27 | .visuallyhidden { 28 | border: 0; 29 | clip: rect(0 0 0 0); 30 | height: 1px; 31 | margin: -1px; 32 | overflow: hidden; 33 | padding: 0; 34 | position: absolute; 35 | white-space: nowrap; 36 | width: 1px; 37 | } 38 | 39 | /* `.focusable` helper class definition 40 | https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L159 41 | */ 42 | .visuallyhidden.focusable:active, 43 | .visuallyhidden.focusable:focus { 44 | clip: auto; 45 | height: auto; 46 | margin: 0; 47 | overflow: visible; 48 | position: static; 49 | white-space: inherit; 50 | width: auto; 51 | } 52 | 53 | /* List styles */ 54 | .a11y-controls__list { 55 | bottom: 90px; 56 | list-style-type: none; 57 | margin: 0; 58 | padding: 0; 59 | position: absolute; 60 | right: 64px; 61 | } 62 | 63 | /* List item styles */ 64 | .a11y-controls__item { 65 | margin: 0; 66 | padding: 0; 67 | position: absolute; 68 | right: 0; 69 | top: 0; 70 | } 71 | 72 | /* Reset list item `before` styles */ 73 | .a11y-controls__item::before { 74 | content: ''; 75 | margin: 0; 76 | padding: 0; 77 | } 78 | -------------------------------------------------------------------------------- /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/fonts/montserrat-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/fonts/montserrat-bold.woff2 -------------------------------------------------------------------------------- /framework/fonts/montserrat-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/fonts/montserrat-regular.woff2 -------------------------------------------------------------------------------- /framework/fonts/opensans-light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/fonts/opensans-light.woff2 -------------------------------------------------------------------------------- /framework/fonts/opensans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/fonts/opensans.woff2 -------------------------------------------------------------------------------- /framework/fonts/pacifico.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/fonts/pacifico.woff2 -------------------------------------------------------------------------------- /framework/fonts/quicksand.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/fonts/quicksand.woff2 -------------------------------------------------------------------------------- /framework/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/.DS_Store -------------------------------------------------------------------------------- /framework/img/banner-home1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/banner-home1.jpg -------------------------------------------------------------------------------- /framework/img/banner-home2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/banner-home2.jpg -------------------------------------------------------------------------------- /framework/img/banner-home3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/banner-home3.jpg -------------------------------------------------------------------------------- /framework/img/banner-home4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/banner-home4.jpg -------------------------------------------------------------------------------- /framework/img/cc-by-nc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/cc-by-nc.png -------------------------------------------------------------------------------- /framework/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/favicon.ico -------------------------------------------------------------------------------- /framework/img/llc-fullcolour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/llc-fullcolour.png -------------------------------------------------------------------------------- /framework/img/llc-logo-stacked-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/llc-logo-stacked-white.png -------------------------------------------------------------------------------- /framework/img/llc-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/llc-logo-white.png -------------------------------------------------------------------------------- /framework/img/llc-wide-fullcolour.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/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/about-image-float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/about-image-float.png -------------------------------------------------------------------------------- /framework/img/workshop/atom-preferences.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/atom-preferences.jpg -------------------------------------------------------------------------------- /framework/img/workshop/atom-settings-pc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/atom-settings-pc.jpg -------------------------------------------------------------------------------- /framework/img/workshop/atom-settings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/atom-settings.jpg -------------------------------------------------------------------------------- /framework/img/workshop/atom-soft-wrap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/atom-soft-wrap.jpg -------------------------------------------------------------------------------- /framework/img/workshop/box-borders-example.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/box-borders-example.jpg -------------------------------------------------------------------------------- /framework/img/workshop/box-borders-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/box-borders-stack.png -------------------------------------------------------------------------------- /framework/img/workshop/box-model-layout.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/box-model-layout.jpg -------------------------------------------------------------------------------- /framework/img/workshop/css.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/css.gif -------------------------------------------------------------------------------- /framework/img/workshop/doughnuts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/doughnuts.jpg -------------------------------------------------------------------------------- /framework/img/workshop/editor-add-project-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/editor-add-project-1.jpg -------------------------------------------------------------------------------- /framework/img/workshop/editor-add-project-pc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/editor-add-project-pc.jpg -------------------------------------------------------------------------------- /framework/img/workshop/excited-baby.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/excited-baby.gif -------------------------------------------------------------------------------- /framework/img/workshop/exercise-1-fr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/exercise-1-fr.jpg -------------------------------------------------------------------------------- /framework/img/workshop/exercise-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/exercise-1.jpg -------------------------------------------------------------------------------- /framework/img/workshop/exercise-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/exercise-3.png -------------------------------------------------------------------------------- /framework/img/workshop/exercise-3_fr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/exercise-3_fr.png -------------------------------------------------------------------------------- /framework/img/workshop/final-project.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/final-project.jpg -------------------------------------------------------------------------------- /framework/img/workshop/final-project_fr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/final-project_fr.png -------------------------------------------------------------------------------- /framework/img/workshop/float-long-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/float-long-text.png -------------------------------------------------------------------------------- /framework/img/workshop/float-short-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/float-short-text.png -------------------------------------------------------------------------------- /framework/img/workshop/google-fonts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/google-fonts.png -------------------------------------------------------------------------------- /framework/img/workshop/graphical-z-index.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/graphical-z-index.gif -------------------------------------------------------------------------------- /framework/img/workshop/hover-transition.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/hover-transition.gif -------------------------------------------------------------------------------- /framework/img/workshop/john-mueller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/john-mueller.png -------------------------------------------------------------------------------- /framework/img/workshop/keyboard-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/keyboard-css.png -------------------------------------------------------------------------------- /framework/img/workshop/keyboard-css_fr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/keyboard-css_fr.jpg -------------------------------------------------------------------------------- /framework/img/workshop/keyboard-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/keyboard-html.png -------------------------------------------------------------------------------- /framework/img/workshop/keyboard-html_fr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/keyboard-html_fr.jpg -------------------------------------------------------------------------------- /framework/img/workshop/kids-dancing.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/kids-dancing.gif -------------------------------------------------------------------------------- /framework/img/workshop/link-margin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/link-margin.png -------------------------------------------------------------------------------- /framework/img/workshop/link-padding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/link-padding.png -------------------------------------------------------------------------------- /framework/img/workshop/llc-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/llc-css.jpg -------------------------------------------------------------------------------- /framework/img/workshop/llc-no-css.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/llc-no-css.jpg -------------------------------------------------------------------------------- /framework/img/workshop/theme-carpentry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/theme-carpentry.png -------------------------------------------------------------------------------- /framework/img/workshop/theme-coffee-shop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/theme-coffee-shop.png -------------------------------------------------------------------------------- /framework/img/workshop/theme-conference.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/theme-conference.png -------------------------------------------------------------------------------- /framework/img/workshop/theme-fashion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/theme-fashion.png -------------------------------------------------------------------------------- /framework/img/workshop/theme-food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/theme-food.png -------------------------------------------------------------------------------- /framework/img/workshop/theme-legal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/theme-legal.png -------------------------------------------------------------------------------- /framework/img/workshop/theme-portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/theme-portfolio.png -------------------------------------------------------------------------------- /framework/img/workshop/theme-sports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/theme-sports.png -------------------------------------------------------------------------------- /framework/img/workshop/victory-dance.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/img/workshop/victory-dance.gif -------------------------------------------------------------------------------- /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-home2.jpg) no-repeat; 7 | background-size: cover; 8 | } 9 | 10 | @mixin label($padding, $color) { 11 | padding-top: $padding+px; 12 | color: $color; 13 | border-left: 4px solid $color; 14 | } 15 | .page-layout { 16 | .screenshot, 17 | .labels { 18 | float: left; 19 | } 20 | .labels { 21 | margin-bottom: 200px; 22 | 23 | ul { 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | ul > li:before { 29 | content: ""; 30 | margin-left: 10px; 31 | } 32 | } 33 | .labels p { 34 | padding-left: 20px; 35 | margin-top: 0; 36 | margin-bottom: 15px; 37 | } 38 | .screenshot { 39 | margin-right: 20px; 40 | } 41 | .header { 42 | @include label(267, blue); 43 | } 44 | .about { 45 | @include label(326, green); 46 | } 47 | .loves { 48 | @include label(315, purple); 49 | } 50 | .footer { 51 | @include label(140, red); 52 | } 53 | } 54 | .essay-headings { 55 | ol ul { 56 | font-size: inherit; 57 | } 58 | } 59 | 60 | .first-website { 61 | background: linear-gradient(rgba($black, 0.3), 62 | rgba($black, 0.8)), url(../img/workshop/kids-dancing.gif) no-repeat 50%; 63 | background-size: cover; 64 | padding-top: 10px; 65 | 66 | .text { 67 | position: absolute; 68 | bottom: 60px; 69 | 70 | h1 { 71 | font-size: 120px; 72 | margin-bottom: 0; 73 | } 74 | p { 75 | margin-top: 0; 76 | font-size: 40px; 77 | color: white; 78 | } 79 | } 80 | } 81 | 82 | .css-gif { 83 | background: url(../img/workshop/css.gif) no-repeat 50%; 84 | background-size: contain; 85 | padding-top: 35%; 86 | 87 | h1 { 88 | color: black; 89 | font-size: 70px; 90 | background: rgba(255, 255, 255, 0.498039); 91 | } 92 | } 93 | .final-exercise { 94 | background: linear-gradient(rgba($black, 0.5), rgba($black, 0)), url(../img/workshop/excited-baby.gif) no-repeat 50%; 95 | background-size: cover; 96 | padding-top: 10px; 97 | 98 | h1 { 99 | font-weight: bold; 100 | font-size: 80px; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /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/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/framework/scripts/plugins/.DS_Store -------------------------------------------------------------------------------- /framework/scripts/plugins/a11y/plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * CSSS A11y Plugin 3 | * 4 | * Helps to make slides more keyboard and screen reader friendly by 5 | * providing the following: 6 | * 7 | * - Sets `role` for each slide for semantic context 8 | * - Sets `aria-roledescription` for each slide for extra context 9 | * - Sets `aria-label` for each slide to provide an accessible name 10 | * - Outputs a link list for keyboard controls to load previous and next slides 11 | * - Shifts focus to slide content container on link click 12 | * 13 | * @author Scott Vinkle 14 | * @version 0.1.0 15 | * @license MIT License 16 | */ 17 | 18 | (function() { 19 | var self = (window.a11y = { 20 | /** 21 | * Set slides to be more screen reader friendly. 22 | * 23 | * @return null 24 | */ 25 | setupSlides: function() { 26 | // Check for `slideshow.slides` object 27 | if (!window.slideshow.slides) { 28 | return; 29 | } 30 | 31 | // Local slide object 32 | var slide = { 33 | all: window.slideshow.slides, 34 | current: null, 35 | index: 0, 36 | next: null, 37 | prev: null, 38 | title: '', 39 | total: window.slideshow.slides.length 40 | }; 41 | 42 | // Iterarte over each slide available… 43 | for (; slide.index < slide.total; slide.index++) { 44 | // Cache current slide 45 | slide.current = slide.all[slide.index]; 46 | 47 | // Previous slide 48 | if (slide.index !== 0) { 49 | slide.prev = slide.all[slide.index - 1]; 50 | } 51 | 52 | // Next slide 53 | slide.next = slide.all[slide.index + 1]; 54 | 55 | // Cache current slide title 56 | slide.title = slide.current.getAttribute('data-title'); 57 | 58 | // Set current slide attributes 59 | slide.current.setAttribute('role', 'region'); 60 | slide.current.setAttribute('aria-roledescription', 'slide'); 61 | slide.current.setAttribute('aria-label', slide.index + 1 + ' - ' + slide.title); 62 | 63 | // Setup controls for current slide 64 | self.slideControls(slide.current, slide.prev, slide.next); 65 | } 66 | }, 67 | 68 | /** 69 | * Create and output the list of links for keyboard and screen reader 70 | * users. 71 | * 72 | * @param {Element} currentSlide Slide `section` HTML element 73 | * @param {Element} prevSlide Slide `section` HTML element 74 | * @param {Element} nextSlide Slide `section` HTML element 75 | * @return null 76 | */ 77 | slideControls: function(currentSlide, prevSlide, nextSlide) { 78 | // Create document fragment to hold list and controls 79 | var fragment = document.createDocumentFragment(); 80 | 81 | // Create list and controls 82 | var controls = { 83 | list: document.createElement('ul'), 84 | next: { 85 | item: document.createElement('li'), 86 | link: document.createElement('a') 87 | }, 88 | prev: { 89 | item: document.createElement('li'), 90 | link: document.createElement('a') 91 | }, 92 | strings: { 93 | next: 'Next ', 94 | nextAT: 'Next Slide', 95 | previous: ' Previous', 96 | previousAT: 'Previous Slide' 97 | } 98 | }; 99 | 100 | // List classes 101 | controls.list.setAttribute('role', 'list'); 102 | controls.list.classList.add('a11y-controls__list'); 103 | 104 | // List items classes 105 | controls.prev.item.classList.add('a11y-controls__item'); 106 | controls.next.item.classList.add('a11y-controls__item'); 107 | 108 | // Previous link classes 109 | controls.prev.link.classList.add('a11y-controls__link'); 110 | controls.prev.link.classList.add('visuallyhidden'); 111 | controls.prev.link.classList.add('focusable'); 112 | 113 | // Next link classes 114 | controls.next.link.classList.add('a11y-controls__link'); 115 | controls.next.link.classList.add('visuallyhidden'); 116 | controls.next.link.classList.add('focusable'); 117 | 118 | // Output previous link if available 119 | if (prevSlide !== null) { 120 | // Previous link attributes 121 | controls.prev.link.href = '#' + prevSlide.id; 122 | controls.prev.link.target = '_self'; 123 | controls.prev.link.innerHTML = controls.strings.previous; 124 | controls.prev.link.setAttribute('aria-label', controls.strings.previousAT); 125 | 126 | // Load previous slide on click 127 | controls.prev.link.addEventListener('click', function() { 128 | self.shiftFocus(prevSlide); 129 | }, false); 130 | 131 | // Output previous link within list item 132 | controls.prev.item.appendChild(controls.prev.link); 133 | controls.list.appendChild(controls.prev.item); 134 | } 135 | 136 | // Output next link if available 137 | if (nextSlide !== undefined) { 138 | // Next link attributes 139 | controls.next.link.href = '#' + nextSlide.id; 140 | controls.next.link.target = '_self'; 141 | controls.next.link.innerHTML = controls.strings.next; 142 | controls.next.link.setAttribute('aria-label', controls.strings.nextAT); 143 | 144 | // Load next slide on click 145 | controls.next.link.addEventListener('click', function() { 146 | self.shiftFocus(nextSlide); 147 | }, false); 148 | 149 | // Output next link within list item 150 | controls.next.item.appendChild(controls.next.link); 151 | controls.list.appendChild(controls.next.item); 152 | } 153 | 154 | // Output list and append to slide `section` 155 | fragment.appendChild(controls.list); 156 | currentSlide.appendChild(fragment); 157 | }, 158 | 159 | /** 160 | * Shift keyboard focus to the Slide on link click event. This helps 161 | * to provide greater context for screen reader users for when a 162 | * slide loads. 163 | * 164 | * @param {Element} slide Slide `section` HTML element 165 | * @return null 166 | */ 167 | shiftFocus: function(slide) { 168 | var addFocus = function(callback) { 169 | // Set `tabindex` on the slide in order for it to receive focus 170 | slide.setAttribute('tabindex', -1); 171 | 172 | // Send keyboard focus to the slide 173 | slide.focus(); 174 | 175 | // Remove focus 176 | callback(); 177 | } 178 | 179 | var removeFocus = function() { 180 | // Remove `tabindex` in order to not disrupt Slide keyboard navigation 181 | slide.removeAttribute('tabindex'); 182 | } 183 | 184 | addFocus(removeFocus); 185 | }, 186 | 187 | /** 188 | * Initialize the plugin by calling setupSlides method. 189 | * 190 | * @return null 191 | */ 192 | init: function() { 193 | // Check for `slideshow` object 194 | if (!window.slideshow) { 195 | return; 196 | } 197 | 198 | self.setupSlides(); 199 | } 200 | }); 201 | 202 | // Initialize the plugin when page content has loaded 203 | document.addEventListener('DOMContentLoaded', self.init); 204 | })(); 205 | -------------------------------------------------------------------------------- /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 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hi! I'm Laura Ipsum.

14 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

About Me

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

Love, Love, Love

31 |

Here are a few things that I really love.

32 | Ladies Learning Code logo 33 | doughnuts 34 | lovebot 35 |
36 | 37 | 38 |
39 |

Contact Me

40 |

Email me at hello@myemail.com or find me around the web!

41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /project/reference-en/exercise-11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hi! I'm Laura Ipsum.

14 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

About Me

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

Love, Love, Love

31 |

Here are a few things that I really love.

32 | Ladies Learning Code logo 33 | doughnuts 34 | lovebot 35 |
36 | 37 | 38 |
39 |

Contact Me

40 |

Email me at hello@myemail.com or find me around the web!

41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /project/reference-en/exercise-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /project/reference-en/exercise-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 |
11 |

Hi! I'm Laura Ipsum.

12 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

13 |
14 | 15 | 16 |
17 |

About Me

18 | 19 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

20 | 21 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

22 |
23 | 24 | 25 |
26 |

Love, Love, Love

27 |

Here are a few things that I really love.

28 |
29 | 30 | 31 |
32 |

Contact Me

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /project/reference-en/exercise-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 |
11 |

Hi! I'm Laura Ipsum.

12 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

13 |
14 | 15 | 16 |
17 | Laura Ipsum 18 | 19 |

About Me

20 | 21 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

22 | 23 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

24 |
25 | 26 | 27 |
28 |

Love, Love, Love

29 |

Here are a few things that I really love.

30 | Ladies Learning Code logo 31 | doughnuts 32 | lovebot 33 |
34 | 35 | 36 |
37 |

Contact Me

38 |

Email me at hello@myemail.com or find me around the web!

39 | 40 | 41 | 42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /project/reference-en/exercise-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hi! I'm Laura Ipsum.

14 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

About Me

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

Love, Love, Love

31 |

Here are a few things that I really love.

32 | Ladies Learning Code logo 33 | doughnuts 34 | lovebot 35 |
36 | 37 | 38 |
39 |

Contact Me

40 |

Email me at hello@myemail.com or find me around the web!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/reference-en/exercise-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hi! I'm Laura Ipsum.

14 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

About Me

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

Love, Love, Love

31 |

Here are a few things that I really love.

32 | Ladies Learning Code logo 33 | doughnuts 34 | lovebot 35 |
36 | 37 | 38 |
39 |

Contact Me

40 |

Email me at hello@myemail.com or find me around the web!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/reference-en/exercise-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hi! I'm Laura Ipsum.

14 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

About Me

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

Love, Love, Love

31 |

Here are a few things that I really love.

32 | Ladies Learning Code logo 33 | doughnuts 34 | lovebot 35 |
36 | 37 | 38 |
39 |

Contact Me

40 |

Email me at hello@myemail.com or find me around the web!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/reference-en/exercise-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hi! I'm Laura Ipsum.

14 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

About Me

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

Love, Love, Love

31 |

Here are a few things that I really love.

32 | Ladies Learning Code logo 33 | doughnuts 34 | lovebot 35 |
36 | 37 | 38 |
39 |

Contact Me

40 |

Email me at hello@myemail.com or find me around the web!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/reference-en/exercise-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Hi! I'm Laura Ipsum.

14 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

About Me

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

Love, Love, Love

31 |

Here are a few things that I really love.

32 | Ladies Learning Code logo 33 | doughnuts 34 | lovebot 35 |
36 | 37 | 38 |
39 |

Contact Me

40 |

Email me at hello@myemail.com or find me around the web!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/reference-en/final.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Designer & Developer 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Hi! I'm Laura Ipsum.

15 |

I'm a digital designer and developer with a penchant for gourmet doughnuts.

16 |
17 | 18 | 19 |
20 | Laura Ipsum 21 | 22 |

About Me

23 | 24 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

25 | 26 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

27 |
28 | 29 | 30 |
31 |

Love, Love, Love

32 |

Here are a few things that I really love.

33 | Ladies Learning Code logo 34 | doughnuts 35 | lovebot 36 |
37 | 38 | 39 |
40 |

Contact Me

41 |

Email me at hello@myemail.com or find me around the web!

42 | 43 | 44 | 45 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /project/reference-en/images/buildings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/buildings.jpg -------------------------------------------------------------------------------- /project/reference-en/images/doughnuts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/doughnuts.jpg -------------------------------------------------------------------------------- /project/reference-en/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/facebook.png -------------------------------------------------------------------------------- /project/reference-en/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/linkedin.png -------------------------------------------------------------------------------- /project/reference-en/images/logo-llc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/logo-llc.jpg -------------------------------------------------------------------------------- /project/reference-en/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/logo.png -------------------------------------------------------------------------------- /project/reference-en/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/profile.jpg -------------------------------------------------------------------------------- /project/reference-en/images/robots.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/robots.jpg -------------------------------------------------------------------------------- /project/reference-en/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/reference-en/images/twitter.png -------------------------------------------------------------------------------- /project/reference-en/themes/carpentry/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Liam Ipsum | Designer & Developer 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Hi! I'm Liam Ipsum.

25 |

I'm a digital designer, developer and woodworker!

26 |
27 | 28 |
29 | 34 | Liam Ipsum 35 | 36 |

About Me

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

Love, Love, Love

45 |

Here are a few things that I really love.

46 | Ladies Learning Code logo 47 | doughnuts 48 | lovebot 49 |
50 | 51 |
52 |

Contact Me

53 |

Email me at hello@myemail.com or find me around the web!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/reference-en/themes/carpentry/styles.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES 2 | -----------------------------------------*/ 3 | body { 4 | color: #111; 5 | background: url(../../../images/themes/carpentry/background.jpg) no-repeat fixed; 6 | } 7 | 8 | a { 9 | color: #fff0cb; 10 | } 11 | 12 | a:hover { 13 | color: #ffda80; 14 | } 15 | 16 | strong { 17 | color: #612940; 18 | } 19 | 20 | 21 | /* PAGE HEADER 22 | -----------------------------------------*/ 23 | header { 24 | background: #fff0cb; 25 | } 26 | 27 | /* ABOUT 28 | -----------------------------------------*/ 29 | .about { 30 | color: #eee; 31 | background: rgba(17, 17, 17, 0.5); 32 | } 33 | 34 | 35 | /* LOVES - things I love 36 | -----------------------------------------*/ 37 | .loves { 38 | background: #fff0cb; 39 | } 40 | 41 | /* FOOTER - contact info 42 | -----------------------------------------*/ 43 | footer { 44 | background: #1f1100; 45 | color: #eee; 46 | } 47 | -------------------------------------------------------------------------------- /project/reference-en/themes/coffee-shop/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Designer & Developer 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Hi! I'm Laura Ipsum.

25 |

I'm a digital designer, developer and I run my own coffee shop!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

About Me

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

Love, Love, Love

45 |

Here are a few things that I really love.

46 | Ladies Learning Code logo 47 | doughnuts 48 | lovebot 49 |
50 | 51 |
52 |

Contact Me

53 |

Email me at hello@myemail.com or find me around the web!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/reference-en/themes/coffee-shop/styles.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES 2 | -----------------------------------------*/ 3 | body { 4 | color: #111; 5 | background: url(../../../images/themes/coffee-shop/background.jpg) no-repeat fixed; 6 | } 7 | 8 | a { 9 | color: #ffe1c4; 10 | } 11 | 12 | a:hover { 13 | color: #e6be1b; 14 | } 15 | 16 | strong { 17 | color: #650202; 18 | } 19 | 20 | /* PAGE HEADER 21 | -----------------------------------------*/ 22 | header { 23 | background: #ffe1c4; 24 | } 25 | 26 | /* ABOUT 27 | -----------------------------------------*/ 28 | .about { 29 | color: #eee; 30 | background: rgba(17, 17, 17, 0.5); 31 | } 32 | 33 | /* LOVES - things I love 34 | -----------------------------------------*/ 35 | .loves { 36 | background: #ffe1c4; 37 | } 38 | 39 | /* FOOTER - contact info 40 | -----------------------------------------*/ 41 | footer { 42 | background: #111; 43 | color: #eee; 44 | } 45 | -------------------------------------------------------------------------------- /project/reference-en/themes/conference/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Designer & Developer 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Hi! I'm Laura Ipsum.

25 |

I'm a digital designer, developer and conference speaker!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

About Me

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

Love, Love, Love

45 |

Here are a few things that I really love.

46 | Ladies Learning Code logo 47 | doughnuts 48 | lovebot 49 |
50 | 51 |
52 |

Contact Me

53 |

Email me at hello@myemail.com or find me around the web!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/reference-en/themes/conference/styles.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES 2 | -----------------------------------------*/ 3 | body { 4 | color: #222; 5 | background: url(../../../images/themes/conference/background.jpg) no-repeat fixed; 6 | } 7 | 8 | a { 9 | color: #ffeb42; 10 | } 11 | 12 | a:hover { 13 | color: #ffd11a; 14 | } 15 | 16 | strong { 17 | color: #ffeb42; 18 | } 19 | 20 | /* PAGE HEADER 21 | -----------------------------------------*/ 22 | header { 23 | color: #eee; 24 | background: #1e3799; 25 | } 26 | 27 | /* ABOUT 28 | -----------------------------------------*/ 29 | .about { 30 | background: rgba(30, 54, 153, 0.5); 31 | } 32 | 33 | /* LOVES - things I love 34 | -----------------------------------------*/ 35 | .loves { 36 | background: #ddd; 37 | } 38 | 39 | /* FOOTER - contact info 40 | -----------------------------------------*/ 41 | footer { 42 | background: #1e3799; 43 | color: #eee; 44 | } 45 | -------------------------------------------------------------------------------- /project/reference-en/themes/fashion/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Liam Ipsum | Designer & Developer 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Hi! I'm Liam Ipsum.

25 |

I'm a digital designer, developer and fashion blogger.

26 |
27 | 28 |
29 | 34 | Liam Ipsum 35 | 36 |

About Me

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

Love, Love, Love

45 |

Here are a few things that I really love.

46 | Ladies Learning Code logo 47 | doughnuts 48 | lovebot 49 |
50 | 51 |
52 |

Contact Me

53 |

Email me at hello@myemail.com or find me around the web!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/reference-en/themes/fashion/styles.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES 2 | -----------------------------------------*/ 3 | body { 4 | background: url(../../../images/themes/fashion/background.jpg) no-repeat fixed; 5 | } 6 | 7 | a { 8 | color: #5982ff; 9 | } 10 | 11 | a:hover { 12 | color: #83a1fb; 13 | } 14 | 15 | strong { 16 | color: #000; 17 | } 18 | 19 | /* PAGE HEADER 20 | -----------------------------------------*/ 21 | header { 22 | background: #fff; 23 | } 24 | 25 | /* ABOUT 26 | -----------------------------------------*/ 27 | .about { 28 | color: #eee; 29 | background: rgba(89, 130, 255, 0.9); 30 | } 31 | 32 | /* LOVES - things I love 33 | -----------------------------------------*/ 34 | .loves { 35 | background: #fff; 36 | } 37 | 38 | /* FOOTER - contact info 39 | -----------------------------------------*/ 40 | footer { 41 | background: #000; 42 | color: #fff; 43 | } 44 | -------------------------------------------------------------------------------- /project/reference-en/themes/food/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Designer & Developer 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Hi! I'm Laura Ipsum.

25 |

I'm a digital designer, developer and foodie!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

About Me

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

Love, Love, Love

45 |

Here are a few things that I really love.

46 | Ladies Learning Code logo 47 | doughnuts 48 | lovebot 49 |
50 | 51 |
52 |

Contact Me

53 |

Email me at hello@myemail.com or find me around the web!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/reference-en/themes/food/styles.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES 2 | -----------------------------------------*/ 3 | body { 4 | color: #eee; 5 | background: url(../../../images/themes/food/background.jpg) no-repeat fixed; 6 | } 7 | 8 | a { 9 | color: #ffe1c4; 10 | } 11 | 12 | a:hover { 13 | color: #e6be1b; 14 | } 15 | 16 | strong { 17 | color: #ff5858; 18 | } 19 | 20 | /* PAGE HEADER 21 | -----------------------------------------*/ 22 | header { 23 | background: #003a28; 24 | } 25 | 26 | /* ABOUT 27 | -----------------------------------------*/ 28 | .about { 29 | color: #eee; 30 | background: rgba(17, 17, 17, 0.5); 31 | } 32 | 33 | /* LOVES - things I love 34 | -----------------------------------------*/ 35 | .loves { 36 | color: #222; 37 | background: #fff3f3; 38 | } 39 | 40 | /* FOOTER - contact info 41 | -----------------------------------------*/ 42 | footer { 43 | color: #eee; 44 | background: #003a28; 45 | } 46 | -------------------------------------------------------------------------------- /project/reference-en/themes/legal/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Designer & Developer 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Hi! I'm Laura Ipsum.

25 |

I'm a digital designer, developer and law student.

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

About Me

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

Love, Love, Love

45 |

Here are a few things that I really love.

46 | Ladies Learning Code logo 47 | doughnuts 48 | lovebot 49 |
50 | 51 |
52 |

Contact Me

53 |

Email me at hello@myemail.com or find me around the web!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/reference-en/themes/legal/styles.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES 2 | -----------------------------------------*/ 3 | body { 4 | color: #111; 5 | background: url(../../../images/themes/legal/background.jpg) no-repeat fixed; 6 | } 7 | 8 | a { 9 | color: #ffde5c; 10 | } 11 | 12 | a:hover { 13 | color: #ffcb00; 14 | } 15 | 16 | strong { 17 | color: #000146; 18 | } 19 | 20 | /* PAGE HEADER 21 | -----------------------------------------*/ 22 | header { 23 | background: #eee; 24 | } 25 | 26 | /* ABOUT 27 | -----------------------------------------*/ 28 | .about { 29 | color: #eee; 30 | background: rgba(0, 1, 70, 0.8); 31 | } 32 | 33 | /* LOVES - things I love 34 | -----------------------------------------*/ 35 | .loves { 36 | background: #eee; 37 | } 38 | 39 | /* FOOTER - contact info 40 | -----------------------------------------*/ 41 | footer { 42 | background: #000146; 43 | color: #eee; 44 | } 45 | -------------------------------------------------------------------------------- /project/reference-en/themes/portfolio/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Designer & Developer 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Hi! I'm Laura Ipsum.

25 |

I'm a digital designer, developer. Welcome to my portfolio!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

About Me

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

Love, Love, Love

45 |

Here are a few things that I really love.

46 | Ladies Learning Code logo 47 | doughnuts 48 | lovebot 49 |
50 | 51 |
52 |

Contact Me

53 |

Email me at hello@myemail.com or find me around the web!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/reference-en/themes/portfolio/styles.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES 2 | -----------------------------------------*/ 3 | body { 4 | color: #111; 5 | background: url(../../../images/themes/portfolio/background.jpg) no-repeat fixed; 6 | } 7 | 8 | a { 9 | color: #ff4747; 10 | } 11 | 12 | a:hover { 13 | color: #f71e1e; 14 | } 15 | 16 | strong { 17 | color: #ff4747; 18 | } 19 | 20 | /* PAGE HEADER 21 | -----------------------------------------*/ 22 | header { 23 | background: #fafafa; 24 | } 25 | 26 | /* ABOUT 27 | -----------------------------------------*/ 28 | .about { 29 | color: #eee; 30 | background: rgba(117, 0, 0, 0.8); 31 | } 32 | 33 | /* LOVES - things I love 34 | -----------------------------------------*/ 35 | .loves { 36 | background: #fafafa; 37 | } 38 | 39 | /* FOOTER - contact info 40 | -----------------------------------------*/ 41 | footer { 42 | background: #111; 43 | color: #eee; 44 | } 45 | -------------------------------------------------------------------------------- /project/reference-en/themes/sports/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Designer & Developer 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Hi! I'm Laura Ipsum.

25 |

I'm a digital designer, developer and athlete!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

About Me

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

Love, Love, Love

45 |

Here are a few things that I really love.

46 | Ladies Learning Code logo 47 | doughnuts 48 | lovebot 49 |
50 | 51 |
52 |

Contact Me

53 |

Email me at hello@myemail.com or find me around the web!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/reference-en/themes/sports/styles.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES 2 | -----------------------------------------*/ 3 | body { 4 | color: #111; 5 | background: url(../../../images/themes/sports/background.jpg) no-repeat fixed; 6 | } 7 | 8 | a { 9 | color: #ffff63; 10 | } 11 | 12 | a:hover { 13 | color: yellow; 14 | } 15 | 16 | strong { 17 | color: #61009a; 18 | } 19 | 20 | /* PAGE HEADER 21 | -----------------------------------------*/ 22 | header { 23 | background: #fafafa; 24 | } 25 | 26 | /* ABOUT 27 | -----------------------------------------*/ 28 | .about { 29 | color: #eee; 30 | background: rgba(17, 17, 17, 0.5); 31 | } 32 | 33 | /* LOVES - things I love 34 | -----------------------------------------*/ 35 | .loves { 36 | background: #fafafa; 37 | } 38 | 39 | /* FOOTER - contact info 40 | -----------------------------------------*/ 41 | footer { 42 | color: #eee; 43 | background: #30004c; 44 | } 45 | -------------------------------------------------------------------------------- /project/référence-fr/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/.DS_Store -------------------------------------------------------------------------------- /project/référence-fr/css/final.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/css/final.css -------------------------------------------------------------------------------- /project/référence-fr/css/styles10.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/css/styles10.css -------------------------------------------------------------------------------- /project/référence-fr/css/styles11.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/css/styles11.css -------------------------------------------------------------------------------- /project/référence-fr/css/styles5.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', sans-serif; 3 | font-weight: 300; 4 | } 5 | h1, h2 { 6 | font-family: 'Bad Script', cursive; 7 | } 8 | -------------------------------------------------------------------------------- /project/référence-fr/css/styles6.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/css/styles6.css -------------------------------------------------------------------------------- /project/référence-fr/css/styles7.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/css/styles7.css -------------------------------------------------------------------------------- /project/référence-fr/css/styles8.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/css/styles8.css -------------------------------------------------------------------------------- /project/référence-fr/css/styles9.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/css/styles9.css -------------------------------------------------------------------------------- /project/référence-fr/exercice-10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Salut, je m'appelle Laura Ipsum.

14 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

À propos

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

J'aime...

31 |

Voici quelques-uns de mes passe-temps.

32 | Logo de Femmes en programmation 33 | Beignes 34 | Lovebot 35 |
36 | 37 | 38 |
39 |

Contactez-moi

40 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Salut, je m'appelle Laura Ipsum.

14 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

À propos

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

J'aime...

31 |

Voici quelques-uns de mes passe-temps.

32 | Logo de Femmes en programmation 33 | Beignes 34 | Lovebot 35 |
36 | 37 | 38 |
39 |

Contactez-moi

40 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

41 | 42 | 43 | 44 | 45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 |
11 |

Salut, je m'appelle Laura Ipsum.

12 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

13 |
14 | 15 | 16 |
17 |

À propos

18 | 19 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

20 | 21 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

22 |
23 | 24 | 25 |
26 |

J'aime...

27 |

Voici quelques-uns de mes passe-temps.

28 |
29 | 30 | 31 |
32 |

Contactez-moi

33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 |
11 |

Salut, je m'appelle Laura Ipsum.

12 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

13 |
14 | 15 | 16 |
17 | Laura Ipsum 18 | 19 |

À propos

20 | 21 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

22 | 23 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

24 |
25 | 26 | 27 |
28 |

J'aime...

29 |

Voici quelques-uns de mes passe-temps.

30 | Logo de Femmes en programmation 31 | Beignes 32 | Lovebot 33 |
34 | 35 | 36 |
37 |

Contactez-moi

38 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

39 | 40 | 41 | 42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Salut, je m'appelle Laura Ipsum.

14 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

À propos

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

J'aime...

31 |

Voici quelques-uns de mes passe-temps.

32 | Logo de Femmes en programmation 33 | Beignes 34 | Lovebot 35 |
36 | 37 | 38 |
39 |

Contactez-moi

40 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Salut, je m'appelle Laura Ipsum.

14 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

À propos

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

J'aime...

31 |

Voici quelques-uns de mes passe-temps.

32 | Logo de Femmes en programmation 33 | Beignes 34 | Lovebot 35 |
36 | 37 | 38 |
39 |

Contactez-moi

40 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Salut, je m'appelle Laura Ipsum.

14 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

À propos

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

J'aime...

31 |

Voici quelques-uns de mes passe-temps.

32 | Logo de Femmes en programmation 33 | Beignes 34 | Lovebot 35 |
36 | 37 | 38 |
39 |

Contactez-moi

40 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Salut, je m'appelle Laura Ipsum.

14 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

À propos

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

J'aime...

31 |

Voici quelques-uns de mes passe-temps.

32 | Logo de Femmes en programmation 33 | Beignes 34 | Lovebot 35 |
36 | 37 | 38 |
39 |

Contactez-moi

40 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/référence-fr/exercice-9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Salut, je m'appelle Laura Ipsum.

14 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

15 |
16 | 17 | 18 |
19 | Laura Ipsum 20 | 21 |

À propos

22 | 23 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

24 | 25 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 |
27 | 28 | 29 |
30 |

J'aime...

31 |

Voici quelques-uns de mes passe-temps.

32 | Logo de Femmes en programmation 33 | Beignes 34 | Lovebot 35 |
36 | 37 | 38 |
39 |

Contactez-moi

40 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

41 | 42 | 43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /project/référence-fr/final.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Laura Ipsum | Conceptrice et développeuse 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Salut, je m'appelle Laura Ipsum.

15 |

Je suis conceptrice et développeuse numérique et une grande amatrice de beignes.

16 |
17 | 18 | 19 |
20 | Laura Ipsum 21 | 22 |

À propos

23 | 24 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

25 | 26 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

27 |
28 | 29 | 30 |
31 |

J'aime...

32 |

Voici quelques-uns de mes passe-temps.

33 | Logo de Femmes en programmation 34 | Beignes 35 | Lovebot 36 |
37 | 38 | 39 |
40 |

Contactez-moi

41 |

Envoyez-moi un courriel à allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

42 | 43 | 44 | 45 | 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /project/référence-fr/images/buildings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/buildings.jpg -------------------------------------------------------------------------------- /project/référence-fr/images/doughnuts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/doughnuts.jpg -------------------------------------------------------------------------------- /project/référence-fr/images/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/facebook.png -------------------------------------------------------------------------------- /project/référence-fr/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/linkedin.png -------------------------------------------------------------------------------- /project/référence-fr/images/logo-llc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/logo-llc.jpg -------------------------------------------------------------------------------- /project/référence-fr/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/logo.png -------------------------------------------------------------------------------- /project/référence-fr/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/profile.jpg -------------------------------------------------------------------------------- /project/référence-fr/images/robots.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/robots.jpg -------------------------------------------------------------------------------- /project/référence-fr/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/images/twitter.png -------------------------------------------------------------------------------- /project/référence-fr/thämes/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/.DS_Store -------------------------------------------------------------------------------- /project/référence-fr/thämes/café/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Conceptrice et développeuse 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Salut, je m'appelle Laura Ipsum.

25 |

Je suis conceptrice, développeuse et propriétaire d'un petit café!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

À propos

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

J'aime

45 |

Voici quelques-uns de mes passe-temps.

46 | logo de Femmes en programmation 47 | beignes 48 | lovebot 49 |
50 | 51 |
52 |

Contactez-moi

53 |

Envoyez-moi un courriel allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/référence-fr/thämes/café/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/café/styles.css -------------------------------------------------------------------------------- /project/référence-fr/thämes/conférence/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Conceptrice et développeuse 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Salut, je m'appelle Laura Ipsum.

25 |

Je suis conceptrice, développeuse et conférencière!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

À propos

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

J'aime

45 |

Voici quelques-uns de mes passe-temps.

46 | logo de Femmes en programmation 47 | beignes 48 | lovebot 49 |
50 | 51 |
52 |

Contactez-moi

53 |

Envoyez-moi un courriel allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/référence-fr/thämes/conférence/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/conférence/styles.css -------------------------------------------------------------------------------- /project/référence-fr/thämes/droit/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Conceptrice et développeuse 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Salut, je m'appelle Laura Ipsum.

25 |

Je suis conceptrice, développeuse et étudiante en droit!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

À propos

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

J'aime

45 |

Voici quelques-uns de mes passe-temps.

46 | logo de Femmes en programmation 47 | beignes 48 | lovebot 49 |
50 | 51 |
52 |

Contactez-moi

53 |

Envoyez-moi un courriel allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/référence-fr/thämes/droit/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/droit/styles.css -------------------------------------------------------------------------------- /project/référence-fr/thämes/menuiserie/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Conceptrice et développeuse 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Salut, je m'appelle Laura Ipsum.

25 |

Je suis conceptrice, développeuse et menuisière!

26 |
27 | 28 |
29 | 34 | Liam Ipsum 35 | 36 |

À propos

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

J'aime

45 |

Voici quelques-uns de mes passe-temps.

46 | logo de Femmes en programmation 47 | beignes 48 | lovebot 49 |
50 | 51 |
52 |

Contactez-moi

53 |

Envoyez-moi un courriel allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/référence-fr/thämes/menuiserie/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/menuiserie/styles.css -------------------------------------------------------------------------------- /project/référence-fr/thämes/mode/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Conceptrice et développeuse 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Salut, je m'appelle Laura Ipsum.

25 |

Je suis conceptrice, développeuse et bloggeuse mode!

26 |
27 | 28 |
29 | 34 | Liam Ipsum 35 | 36 |

À propos

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

J'aime

45 |

Voici quelques-uns de mes passe-temps.

46 | logo de Femmes en programmation 47 | beignes 48 | lovebot 49 |
50 | 51 |
52 |

Contactez-moi

53 |

Envoyez-moi un courriel allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/référence-fr/thämes/mode/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/mode/styles.css -------------------------------------------------------------------------------- /project/référence-fr/thämes/nourriture/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Conceptrice et développeuse 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Salut, je m'appelle Laura Ipsum.

25 |

Je suis conceptrice, développeuse et amatrice de bouffe!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

À propos

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

J'aime

45 |

Voici quelques-uns de mes passe-temps.

46 | logo de Femmes en programmation 47 | beignes 48 | lovebot 49 |
50 | 51 |
52 |

Contactez-moi

53 |

Envoyez-moi un courriel allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/référence-fr/thämes/nourriture/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/nourriture/styles.css -------------------------------------------------------------------------------- /project/référence-fr/thämes/portfolio/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Conceptrice et développeuse 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Salut, je m'appelle Laura Ipsum.

25 |

Je suis conceptrice et développeuse. Bienvenue sur mon site!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

À propos

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

J'aime

45 |

Voici quelques-uns de mes passe-temps.

46 | logo de Femmes en programmation 47 | beignes 48 | lovebot 49 |
50 | 51 |
52 |

Contactez-moi

53 |

Envoyez-moi un courriel allo@moncourriel.com ou suivez-moi sur les réseaux sociaux!

54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /project/référence-fr/thämes/portfolio/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/portfolio/styles.css -------------------------------------------------------------------------------- /project/référence-fr/thämes/sports/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | Laura Ipsum | Conceptrice et développeuse 11 | 12 | 13 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Salut, je m'appelle Laura Ipsum.

25 |

Je suis conceptrice, développeuse et athlète!

26 |
27 | 28 |
29 | 34 | Laura Ipsum 35 | 36 |

À propos

37 | 38 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

39 | 40 |

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

41 |
42 | 43 |
44 |

J'aime

45 |

Voici quelques-uns de mes passe-temps.

46 | logo de Femmes en programmation 47 | beignes 48 | lovebot 49 |
50 | 51 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /project/référence-fr/thämes/sports/styles.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/canadalearningcode/llc-html-css-one-page/3668642b149eacf293c6e6fc6449fc4e58963662/project/référence-fr/thämes/sports/styles.css --------------------------------------------------------------------------------