/* Meyer Reset */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* END RESET */ p{ font-family:helvetica; } body { padding:0px; margin:0px; } .block1 { position:relative; background-color: black; transition-duration: 1s; margin:0px; padding: 0px; float:top; width:100%; height: 25vh; display:block; min-height:0%; } .block1:active{ clear:float; background-color: #424242; height: 100vh; } .block2 { position:relative; background-color:#FF00FF; transition-duration: 1s; margin:0px; padding: 0px; float:top; width:100%; height: 25vh; display:block; min-height:0%; } .block2:active{ clear:float; height: 100vh; background-color: #ff99ff; } .block3 { position:relative; background-color:#00FFFF; transition-duration: 1s; margin:0px; padding: 0px; float:top; width:100%; height: 25vh; display:block; min-height:0%; } .block3:active{ clear:float; height: 100vh; background-color: #8FD8D8; } .block4 { position:relative; background-color:#FFFF00; transition-duration: 1s; margin:0px; padding: 0px; float:top; width:100%; height: 25vh; display:block; min-height:0%; } .block4:active{ clear:float; height: 100vh; background-color: #ffffb2; z-index:1000; position:absolute; top:0; left:0; width:100%; height:100%; } .colorblocks{ height 100%; margin: 0; padding: 0; min-height:0%; } .colorblocks>div>h1{ font-size: 100px; font-family: helvetica, arial, sans-serif; color: white; width: 100%; height: 50%; text-align: center; margin: auto; position: absolute; padding: 0; top: 0; left: 0; bottom: 0; right: 0; } a:link {text-decoration:none; color:white;} a:visited {text-decoration:none; color:white;} @media screen and (max-height:350px){ p{ font-family:helvetica; } body { padding:0px; margin:0px; } .block1 { position:relative; background-color: black; transition-duration: 0s; margin:0px; padding: 0px; float:top; width:100%; height: 25vh; display:block; min-height:0%; } .block1:active{ clear:float; background-color: black; height: 25vh; } .block2 { position:relative; background-color:#FF00FF; transition-duration: 0s; margin:0px; padding: 0px; float:top; width:100%; height: 25vh; display:block; min-height:0%; } .block2:active{ clear:float; height: 25vh; background-color: #FF00FF; } .block3 { position:relative; background-color:#00FFFF; transition-duration: 0s; margin:0px; padding: 0px; float:top; width:100%; height: 25vh; display:block; min-height:0%; } .block3:active{ clear:float; height: 25vh; background-color: #00FFFF; } .block4 { position:relative; background-color:#FFFF00; transition-duration: 0s; margin:0px; padding: 0px; float:top; width:100%; height: 25vh; display:block; min-height:0%; } .block4:active{ clear:float; height: 100vh; background-color: #ffffb2; z-index:1000; position:absolute; top:0; left:0; width:100%; height:100%; } .colorblocks{ height 100%; margin: 0; padding: 0; min-height:0%; } .colorblocks>div>h1{ font-size: 50px; font-family: helvetica, arial, sans-serif; color: white; width: 100%; height: 60%; text-align: center; margin: auto; position: absolute; padding: 0; top: 0; left: 0; bottom: 0; right: 0; } a:link {text-decoration:none; color:white;} a:visited {text-decoration:none; color:white;} } @media screen and (max-width:600px){ /* Meyer Reset */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* END RESET */ .block1 { transition-duration: 0s; position:relative; background-color: black; margin:0px; padding: 0px; float:left; width:50%; height: 50vh; display:block; } .block1:active{ clear:float; background-color: black; height: 50vh; } .block2 { transition-duration: 0s; position:relative; background-color:#FF00FF; margin:0px; padding: 0px; float:left; width:50%; height: 50vh; display:block; } .block2:active{ clear:float; background-color: #FF00FF; height: 50vh; } .block3 { transition-duration: 0s; position:relative; background-color:#00FFFF; margin:0px; padding: 0px; float:left; width:50%; height: 50vh; display:block; } .block3:active{ clear:float; background-color: #00FFFF; height: 50vh; } .block4 { transition-duration: 0s; position:relative; background-color:#FFFF00; margin:0px; padding: 0px; float:left; width:50%; height: 50vh; display:block; } .block4:active{ clear:float; background-color:#FFFF00; height: 100vh; } .colorblocks{ height 100%; margin: 0; padding: 0; } .colorblocks>div>h1{ margin: 0; font-size: 50pt; font-family: helvetica, arial, sans-serif; color: white; line-height: 60pt; letter-spacing: -5pt; text-align: center; hyphens: auto; margin: auto; position: absolute; padding: 0; top: 0; left: 0; bottom: 0; right: 0; } a:link {text-decoration:none; color:white;} a:visited {text-decoration:none; color:white;} }