31 | Our students take interfaces out of the screen with #makeymakey
34 |
37 | More fun than brainstorming
40 |At Web Media you will learn how to become a Web maker.
50 |Join a community of web designers, coders and online content producers and learn how to make cool stuff on the Web.
51 |
20 | As a player, you control a bee colony.
31 | 32 |All colonies operate in the garden of Commons.
33 | 34 |Throughout the game, you can deploy different beesness models: from converting flowers' nectar into honey, to stealing other colonies' honey, privatising flowers and other nasty moves..
35 | 36 |To have the most honey at the end of the year!
39 | 40 |
20 | As a player, you control a bee colony.
31 | 32 |All colonies operate in the garden of Commons.
33 | 34 |Throughout the game, you can deploy different beesness models: from converting flowers' nectar into honey, to stealing other colonies' honey, privatising flowers and other nasty moves..
35 | 36 |To have the most honey at the end of the year!
39 | 40 |34 | 18) { 38 | echo("You can come in"); 39 | } else { 40 | echo("Too young, go back home"); 41 | } 42 | ?> 43 |
44 | 45 | -------------------------------------------------------------------------------- /resources/html5-boilerplate-animation-transition/css/style.css: -------------------------------------------------------------------------------- 1 | /* BASE STYLES */ 2 | 3 | html 4 | { 5 | /* make fonts look smooth*/ 6 | -webkit-font-smoothing: antialiased; 7 | } 8 | 9 | ul 10 | { 11 | list-style: none; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | li 17 | { 18 | padding: 1em; 19 | 20 | box-sizing: border-box; 21 | 22 | /* embellishments */ 23 | background: #eee; 24 | border-bottom: 1px solid #ddd; 25 | border-top: 1px solid white; 26 | } 27 | 28 | img 29 | { 30 | /* center it horizontally */ 31 | display: block; 32 | margin: auto; 33 | 34 | /* turn it into a circle */ 35 | max-width: 50%; 36 | border-radius: 50%; 37 | } 38 | 39 | a.button 40 | { 41 | /* make it look like a button */ 42 | padding: 1em; 43 | border-radius: .3em; 44 | background: greenyellow; 45 | cursor: pointer; 46 | display: block; 47 | } 48 | 49 | /* TRANSITION */ 50 | 51 | /* http://tympanus.net/codrops/css_reference/transition*/ 52 | 53 | li 54 | { 55 | transition: .5s; 56 | } 57 | li:hover 58 | { 59 | background: #ddd; 60 | } 61 | 62 | a.button 63 | { 64 | transition: .3s; 65 | } 66 | a:hover 67 | { 68 | background: black; 69 | color: greenyellow; 70 | } 71 | 72 | /* ANIMATION */ 73 | 74 | /* 75 | 76 | BROWSER VENDOR PREFIXES 77 | 78 | -webkit will work for Chrome and Safari 79 | -moz for Firefox 80 | -o for Opera 81 | 82 | */ 83 | 84 | /* from https://github.com/daneden/animate.css/blob/master/source/attention_seekers/shake.css */ 85 | /* for Chrome and Safari */ 86 | @-webkit-keyframes shake 87 | { 88 | 0%, 100% { 89 | transform: translate3d(0, 0, 0); 90 | } 91 | 92 | 10%, 30%, 50%, 70%, 90% { 93 | transform: translate3d(-10px, 0, 0); 94 | } 95 | 96 | 20%, 40%, 60%, 80% { 97 | transform: translate3d(10px, 0, 0); 98 | } 99 | } 100 | /* for all other browsers */ 101 | @keyframes shake 102 | { 103 | 0%, 100% { 104 | transform: translate3d(0, 0, 0); 105 | } 106 | 107 | 10%, 30%, 50%, 70%, 90% { 108 | transform: translate3d(-10px, 0, 0); 109 | } 110 | 111 | 20%, 40%, 60%, 80% { 112 | transform: translate3d(10px, 0, 0); 113 | } 114 | } 115 | 116 | img:hover 117 | { 118 | /* for Chrome and Safari*/ 119 | -webkit-animation-name: shake; 120 | -webkit-animation-duration: 1s; 121 | 122 | /* for all other browsers? */ 123 | animation-name: shake; 124 | animation-duration: 1s; 125 | 126 | /* more properties to tweak your animations */ 127 | /*-webkit-animation-timing-function: ease-in-out;*/ 128 | /*-webkit-animation-delay: 1s;*/ 129 | /*-webkit-animation-iteration-count: infinite;*/ 130 | } 131 | 132 | /* RESPONSIVE DESIGN */ 133 | 134 | @media (min-width:600px) 135 | { 136 | li 137 | { 138 | float: left; 139 | width: 50%; 140 | 141 | border-right: 1px solid white; 142 | } 143 | } -------------------------------------------------------------------------------- /resources/html5-boilerplate-animation-transition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
29 | A short blurb about this person. Or is it a product?
31 | Get in touch 32 |
35 | A short blurb about this person. Or is it a product?
37 | Buy her 38 |
41 | A short blurb about this person. Or is it a product?
43 | Ask him out 44 |
47 | A short blurb about this person. Or is it a product?
49 | Enslave him 50 |Find millions of recipes just by typing in what's in your fridge
22 | 23 | 24 | 25 |