js-tutorial-step-5

// src/components/Front.vue
<template>
   <div class="body" :style="{ backgroundImage: `url(${imgSrc})` }">
       ...
<div class="controls">
	<form @submit.prevent>
		<h2>Edit your template</h2>
		<div class="form-field">
			<label for="headerText">Header text:</label>
			<textarea id="headerText" v-model="headerText" />
		</div>
		<div class="form-field">
			<label for="logoText">Logo text:</label>
			<input id="logoText" v-model="logoText" />
		</div>
	</form>
</div>
   </div>
</template>
<style scoped>
...
.controls {
   position: absolute;
   top: 4.5in;
}

.form-field {
   display: flex;
   flex-direction: column;
}

label {
   text-align: left;
   margin-bottom: 8px;
   margin-top: 8px;
}
 
</style>