├── README.md ├── favicon.ico ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # rothkode 2 | Rothko in Code 3 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maya/rothkode/62951fa0c3194442ca9b6c1de35d9addc23c752e/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rothkode 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

15 |

16 |

17 |

Rothkode

18 |

by Maya Benari

19 |

Experiments with CSS gradients

20 |

Inspired by the paintings of Mark Rothko

21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 |

30 |

31 |

32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 |

40 |

41 |

42 | 43 | 57 |

58 | 59 | 62 |

63 | 64 | 65 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | body { 51 | font-family: "Apercu Regular",sans-serif; 52 | } 53 | header { 54 | margin-top: 30px; 55 | } 56 | h1 { 57 | font-size: 2em; 58 | line-height: 1.5; 59 | } 60 | p { 61 | line-height: 1.6; 62 | } 63 | 64 | a { 65 | border-bottom: 2px solid rgba(212, 80, 210, 0.2); 66 | color: #c05600; 67 | text-decoration: none; 68 | } 69 | 70 | a:hover { 71 | border-color: #456fdb; 72 | color: #456fdb; 73 | } 74 | 75 | .ro { 76 | max-width: 500px; 77 | height: 550px; 78 | margin: 0 auto; 79 | margin-top: 50px; 80 | } 81 | #one { 82 | background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(242,114,97,1) 41%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(196,37,25,1) 100%); 83 | } 84 | 85 | #two { 86 | background: linear-gradient(to bottom, rgba(255,185,141,1) 0%, rgba(255,185,141,1) 33%, rgba(242,190,153,1) 38%, rgba(249,120,105,1) 44%, rgba(249,82,90,1) 49%, rgba(224,81,45,1) 55%, rgba(175,82,39,1) 62%, rgba(175,82,39,1) 100%); 87 | } 88 | 89 | #three { 90 | background: linear-gradient(to bottom, rgba(72,22,33,1) 0%, rgba(72,22,33,1) 14%, rgba(52,16,32,1) 43%, rgba(38,39,93,1) 46%, rgba(57,87,178,1) 49%, rgba(57,87,178,1) 65%, rgba(53,49,81,1) 73%, rgba(53,49,81,1) 100%); 91 | box-shadow: inset 0px 0px 10px 15px rgba(42,45,102,1); 92 | } 93 | 94 | #four { 95 | background: linear-gradient(to bottom, rgba(148,44,28,1) 0%, rgba(197,52,36,1) 8%, rgba(214,60,43,1) 34%, rgba(197,52,36,1) 57%, rgba(33,27,50,1) 75%, rgba(33,27,50,1) 100%); 96 | box-shadow: inset 0px -8px 5px 17px rgba(61,34,43,1); 97 | } 98 | 99 | #five { 100 | background: linear-gradient(to bottom, rgba(230,148,4,1) 0%, rgba(244,176,3,1) 5%, rgba(244,176,3,1) 29%, rgba(234,139,4,1) 38%, rgba(215,48,6,1) 48%, rgba(215,48,6,1) 100%); 101 | box-shadow: inset 0px 8px 8px 25px rgba(220,107,4,1); 102 | } 103 | 104 | #six { 105 | background: linear-gradient(to bottom, rgba(99,149,171,1) 0%, rgba(201,82,120,1) 4%, rgba(222,89,144,1) 38%, rgba(201,82,120,1) 41%, rgba(40,46,57,1) 46%, rgba(43,53,71,1) 86%, rgba(37,43,54,1) 96%, rgba(178,130,67,1) 98%, rgba(118,160,122,1) 100%); 106 | } 107 | 108 | #seven { 109 | background: linear-gradient(to bottom, rgba(222,47,114,1) 0%, rgba(240,70,169,1) 12%, rgba(240,70,169,1) 53%, rgba(253,169,95,1) 59%, rgba(253,169,95,1) 64%, rgba(249,39,32,1) 70%, rgba(249,39,32,1) 100%); 110 | box-shadow: -1px -7px 13px 7px rgba(244, 167, 93, 1) inset; 111 | } 112 | 113 | #eight { 114 | background: linear-gradient(to bottom, rgba(41,58,186,1) 0%, rgba(41,58,186,1) 4%, rgba(68,40,121,1) 7%, rgba(219,73,180,1) 19%, rgba(237,113,233,1) 47%, rgba(219,73,180,1) 58%, rgba(68,40,121,1) 64%, rgba(41,58,186,1) 65%, rgba(68,40,121,1) 66%, rgba(247,145,169,1) 68%, rgba(226,74,94,1) 98%, rgba(41,58,186,1) 100%); 115 | } 116 | #nine { 117 | background: linear-gradient(to bottom, rgba(233,239,235,1) 0%, rgba(233,239,235,1) 3%, rgba(153,189,219,1) 7%, rgba(199,224,237,1) 46%, rgba(175,203,224,1) 73%, rgba(106,140,163,1) 84%, rgba(93,127,150,1) 100%); 118 | box-shadow: inset -3px 3px 13px 18px rgba(244,245,239,1); 119 | } 120 | #ten { 121 | background: linear-gradient(to bottom, rgba(212,145,11,1) 0%, rgba(212,145,11,1) 1%, rgba(136,106,6,1) 11%, rgba(5,8,1,1) 13%, rgba(15,64,177,1) 15%, rgba(15,64,177,1) 66%, rgba(5,8,1,1) 68%, rgba(247,144,10,1) 71%, rgba(233,111,4,1) 93%, rgba(233,111,4,1) 100%); 122 | box-shadow: inset 0px -12px 11px 3px rgba(255,192,7,.9); 123 | } 124 | 125 | .grid { 126 | text-align: center; 127 | } 128 | 129 | footer { 130 | padding: 50px 0 20px; 131 | text-align: center; 132 | } 133 | 134 | /* make a grid */ 135 | 136 | [class*='col-'] { 137 | float: left; 138 | } 139 | .grid:after { 140 | content: ""; 141 | display: table; 142 | clear: both; 143 | } 144 | .grid { 145 | margin-left: -10px; 146 | margin-right: -10px; 147 | } 148 | [class*='col-'] { 149 | padding-left: 10px; 150 | padding-right: 10px; 151 | } 152 | .col-half { 153 | width: 50%; 154 | } 155 | .col-third { 156 | width: 33.33%; 157 | } 158 | .col-two-thirds { 159 | width: 66.66%; 160 | } 161 | .col-fourth { 162 | width: 25%; 163 | } 164 | .container { 165 | max-width: 980px; 166 | margin: 0 auto; 167 | padding: 0 22px; 168 | position: relative; 169 | } 170 | 171 | @media all and (max-width: 550px) { 172 | [class*='col-'] { 173 | width: 100%; 174 | } 175 | .container { 176 | max-width: 100%; 177 | } 178 | .ro { 179 | width: 100%; 180 | max-height: 65vh; 181 | } 182 | header { 183 | margin-top: 15px; 184 | } 185 | #one { 186 | margin-top: 25px; 187 | } 188 | } 189 | --------------------------------------------------------------------------------