<template> <div class="flex flex-column flex-row-ns pa3 calisto bg-black-05"> <div class="w-50-ns w-100 ph3"> <!-- upload image --> ... </div> <section class="w-40-l w-50-m w-100 ph3 tl"> <h2>Transform Image</h2> <form class="ba b--black bw2 bg-white br2 mw6 center pv2 ph4 shadow-5 f6"> <div> <label for="height" class="dib mb2 mr2 black-70 f5 w-30" >Height</label > <input type="number" name="height" id="height" class="dib mb3 br2 pa2 ba bw1 b--black" v-model="height" /> </div> <div> <label class="dib mb2 mr2 black-70 f5 w-30" for="width">Width</label> <input type="number" name="width" id="width" class="dib mb3 br2 pa2 ba bw1 b--black" v-model="width" /> </div> <div> <label class="dib mb2 mr2 black-70 f5 w-30" for="sharpen" >Sharpen</label > <input type="number" name="sharpen" id="sharpen" class="dib mb3 br2 pa2 ba bw1 b--black" v-model="sharpen" min="1" max="10" /> </div> <div> <label class="dib mb2 mr2 black-70 f5 w-30" for="blur">Blur</label> <input type="number" name="blur" id="blur" class="dib mb3 br2 pa2 ba bw1 b--black" v-model="blur" min="1" max="250" /> </div> <button class="center db pv2 ph3 mb3 tracked bg-black ba br3 white hover-black hover-bg-black-30 bg-animate pointer f7"> Download </button> </form> </section> </div> </template> <script> export default { data() { return { height: 100, sharpen: 0, blur: 0, width: 100, }; }, }; </script>