<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <style> @font-face { font-family: 'Bandeins Strange'; src: url('BandeinsStrangeVariableGX.ttf') format("truetype-variations"); font-weight: 1 999; } #mainframe{ position:absolute; top:30px; left:30px; bottom:30px; right:30px; margin:0; padding:10px; /*border:2px dashed #ff0066;*/ /* border:2px solid #703EC1; */ background: #B008E0; purple -webkit-box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1); -moz-box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1); box-shadow: -7px 7px 0px 0px rgba(80, 80, 80, 1); } /* input, button, textarea { border: 2px solid rgba(0, 0, 0, 0.6); background-image:none; background-color: #dadad3; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 5px;} */ body{ margin:0; padding:0; width:100%; height:100vh; overflow: hidden; /* background: #F34146; color: #F34146; red*/ background: #F34146; color: black; background-image: linear-gradient(rgba(0, 0, 0, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 1) 1px, transparent 1px); background-size: 2em 2em; /* background-size: 30px; */ /* background-image: url('https://d7hftxdivxxvm.cloudfront.net/?resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2F2RNK1P0BYVrSCZEy_Sd1Ew%252F3417757448_4a6bdf36ce_o.jpg&width=1200&quality=80'); */ } h1{ font-family:"Bandeins Strange"; font-size:8vw; font-variation-settings:"wght" 800, "wdth" 421; margin:0; padding:0; word-wrap: break-word; margin-top: -1%; margin-left: 0px; line-height: 7vw; /* -webkit-transform: rotate(-100deg) skew(0, -10deg); -moz-transform: rotate(-100deg) skew(0, -10deg); -ms-transform: rotate(-10deg) skew(-10deg, 0); -o-transform: rotate(-10deg) skew(-10deg, 0); */ transform: rotate(10deg) skew(-10deg, 0deg); color: #FFEED0; } h2{ font-family:"Bandeins Strange"; font-size:8vw; font-variation-settings:"wght" 600, "wdth" 421; margin:0; padding:0; } h3{ font-family:"Bandeins Strange"; font-size:3vw; font-variation-settings:"wght" 400, "wdth" 221; margin:0; padding:0; color: #FFEED0; } h5{ font-family:"Bandeins Strange"; font-size:2vw; font-variation-settings:"wght" 400, "wdth" 121; margin:0; padding:0; color: #FFEED0; } h5{ list-style: none; } #fontslider{ margin-top: 10px; z-index: 999999; } /*margins*/ #m1{ display:block; position:absolute; top: 5px; left: 50%; width:50px; margin-left:-25px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); z-index: 999; } #m2{ display:block; position:absolute; top: 50%; left: -15px; width:50px; margin-top:-25px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); z-index: 999; } #m3{ display:block; position:absolute; top: 50%; right: -15px; width:50px; margin-top:-25px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 999; } #m4{ display:block; position:absolute; bottom: 5px; left: 50%; width:50px; margin-left:-25px; z-index: 999; } #asciibox{ display:block; position:absolute; bottom:15px; right: 10px; line-height: 13px; } input[type="number"]{ border: 1px solid black; /* border: none; */ padding: 3px; font-family:"Bandeins Strange"; background-color: lightgrey; } #place{ position: absolute; right: 15px; font-size: 20px; top: 60%; } #place2{ position: absolute; right: 15px; font-size: 20px; top: 65%; } #place3{ position: absolute; right: 15px; font-size: 20px; top: 70%; } input[type="checkbox"] { transform: scale(1); margin: -1px; } @media only screen and (max-width: 900px) { input[type="checkbox"]{ transform: scale(0.8); margin: -2px; } #asciibox{ line-height: 12px; } select{ transform: scale(0.7); margin: -50px; } h1{ font-size:12vw; line-height: 10vw; } } </style> </head> <body> <!--margin settings dials --> <input type="number" name="m1" id="m1" step="10" value="100"> <input type="number" name="m2" id="m2" step="10" value="100"> <input type="number" name="m3" id="m3" step="10" value="40"> <input type="number" name="m4" id="m4" step="10" value="40"> <!--div class="quantity"> <input type="number" min="1" max="9" step="1" value="1"> </div--> <div id="mainframe"> <h1>UPSETTING SETTINGS</h1> <input type="range" min="0" max="100" value="40" class="slider" id="fontslider"> <input type="range" min="0" max="10" value="3" class="slider" id="fontslider2"> <h3>Graduation Show, Piet Zwart Institute, <br>Experimental Publishing</h3> <br> <br> <h5> <input type="radio" name="" value="Settings" checked> Natasha Berting<br> <input type="radio" name="" value="Settings" checked> Angeliki Diakrousi<br> <input type="radio" name="" value="Settings" checked> Joca van der Horst<br> <input type="radio" name="" value="Settings" checked> Alexander Roidl<br> <input type="radio" name="" value="Settings" checked> Alice Strete<br> <input type="radio" name="" value="Settings" checked> Zalán Szakács<br> </h5> <br> <select id="place" name="selection"> <option value="1">July 12–13, 2019</option> <option value="2">UBIK + SLASH GALLERY</option> <option value="3">Boomgaardsstraat 69, Rotterdam</option> </select> <select id="place2" name="selection"> <option value="1">July 12–13, 2019</option> <option value="2" selected>UBIK + SLASH GALLERY</option> <option value="3">Boomgaardsstraat 69, Rotterdam</option> </select> <select id="place3" name="selection"> <option value="1">July 12–13, 2019</option> <option value="2">UBIK + SLASH GALLERY</option> <option value="3" selected>Boomgaardsstraat 69, Rotterdam</option> </select> <!--textarea name="message" rows="10" cols="30"> July 12–13, 2019 UBIK + SLASH GALLERY Boomgaardsstraat 69, Rotterdam </textarea--> <span id="asciibox"> <input type="checkbox" name="" value="" checked id="colorchanger"> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" > <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""> <br> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value="" > <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""checked> <br> <input type="checkbox" name="" value="" > <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""> <br> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" > <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""checked> <br> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value="" > <input type="checkbox" name="" value="" > <input type="checkbox" name="" value="" checked> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""checked> <input type="checkbox" name="" value=""> <br> </span> </div> </body> <script> $( document ).ready(function() { var newvalue = $("#m1").val() + "px" $("#mainframe").css("top",newvalue) var newvalue = $("#m2").val() + "px" $("#mainframe").css("left",newvalue) var newvalue = $("#m3").val() + "px" $("#mainframe").css("right",newvalue) var newvalue = $("#m4").val() + "px" $("#mainframe").css("bottom",newvalue) var newvalue = $("#fontslider").val() $("h1").css("font-variation-settings", "'wght' 800, 'wdth' "+newvalue*10) var newvalue = $("#fontslider2").val() $("h1").css("transform", "rotate("+newvalue*1.3 +"deg) skew("+newvalue*-6+"deg, 0deg)") }); $("#m1,#m2,#m3,#m4").change(function(){ var newvalue = $(this).val() + "px" console.log(newvalue) if($(this).attr('id') == "m1" ) $("#mainframe").css("top",newvalue) if($(this).attr('id') == "m2" ) $("#mainframe").css("left",newvalue) if($(this).attr('id') == "m3" ) $("#mainframe").css("right",newvalue) if($(this).attr('id') == "m4" ) $("#mainframe").css("bottom",newvalue) } ) $("#fontslider").change(function(){ var newvalue = $(this).val() $("h1").css("font-variation-settings", "'wght' 800, 'wdth' "+newvalue*10) }) $("#fontslider2").change(function(){ var newvalue = $(this).val() $("h1").css("transform", "rotate("+newvalue*1.3 +"deg) skew("+newvalue*-6+"deg, 0deg)") }) $("#colorchanger").change(function(){ if($(this).is(":checked")) { $("#mainframe").css("background","#B008E0") $("body").css("background-color","#F34146") $("h3,h5").css("color","#FFEED0") $("h1").css("color","#FFEED0") } else{ $("#mainframe").css("background","lightgrey") $("body").css("background-color","white") $("h3,h5").css("color","black") $("h1").css("color","black") } }) //transform: rotate(10deg) skew(-10deg, 0deg); // jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input'); // jQuery('.quantity').each(function() { // var spinner = jQuery(this), // input = spinner.find('input[type="number"]'), // btnUp = spinner.find('.quantity-up'), // btnDown = spinner.find('.quantity-down'), // min = input.attr('min'), // max = input.attr('max'); // // btnUp.click(function() { // var oldValue = parseFloat(input.val()); // if (oldValue >= max) { // var newVal = oldValue; // } else { // var newVal = oldValue + 1; // } // spinner.find("input").val(newVal); // spinner.find("input").trigger("change"); // }); // // btnDown.click(function() { // var oldValue = parseFloat(input.val()); // if (oldValue <= min) { // var newVal = oldValue; // } else { // var newVal = oldValue - 1; // } // spinner.find("input").val(newVal); // spinner.find("input").trigger("change"); // }); // // }); </script> </html>