MoeRayo

<template>
  <div class="bg-washed-yellow vh-100">
  
    <header class="tc pv3 pv3-ns">
      <h1 class="mt2 mb0 baskerville i fw1 f2-ns f3 mid-gray">Custom Meetup Banner Generator</h1>
    </header>
    
    <section class="ph5 flex flex-wrap justify-between">
      <div class="w-100 w-50-ns">
        <h2 class="baskerville fw1 f4-ns f3">Select an image</h2>

MoeRayo

<template>
  <div class="bg-washed-yellow vh-100">
    <header class="tc pv3 pv3-ns">
     <!-- Header content -->
    </header>
    <section class="ph5 flex flex-wrap justify-between">
      <div class="w-100 w-50-ns">
        <div class="mv4 cb">
           <!-- form content -->
        </div>

MoeRayo

<template>
  <div class="ph4 pv3 bg-washed-red vh-100">
    <header class="tc pv3 pv3-ns">
      <h1 class="mt2 mb0 baskerville fw1 f2-ns f3">Contact Card Barcode Generator</h1>
    </header>
    <div class="flex flex-wrap justify-between">
      <form class="tc w-50-ns w-100 mt4 ph5-ns">
        <label for="contact-name" class="db tl">Contact name</label>
        <input id="contact-name" v-model="contactName" type="text" name="contact-name" class="db pa2 w-40-l w-80-m w-100 mt2 br2 ba b--black-50">
        <label for="contact-number" class="db tl mt4">Contact number</label>

MoeRayo

<template>
  <div class="ph4 pv3 bg-washed-red vh-100">
    <!-- header goes here -->

    <div class="flex flex-wrap justify-between">
      <form class="tc w-50-ns w-100 mt4 ph5-ns">
        <!-- form field goes here -->
        <button class="f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green pointer tl mv3" type="submit">Generate Barcode</button>
      </form>

MoeRayo

<template>
  <div class="ph4 pv3 bg-washed-red vh-100">
    <!-- header goes here -->

    <div class="flex flex-wrap justify-between">
      <form class="tc w-50-ns w-100 mt4 ph5-ns" @submit.prevent="upload">
         <!-- form field goes here --></div>
        <button class="f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green pointer tl mv3" type="submit">Generate Barcode</button>
      </form>

MoeRayo

<template>
  <div class="ph4 pv3 bg-washed-red vh-100">
    <!-- header goes here -->

    <div class="flex flex-wrap justify-between">
      <form class="tc w-50-ns w-100 mt4 ph5-ns" @submit.prevent="upload">
         <!-- form field goes here --></div>
        <button class="f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green pointer tl mv3" type="submit">Generate Barcode</button>
      </form>

MoeRayo

<template>
  <div class="bg-washed-blue vh-100 ph3 ph5-ns">
    <header class="tc pv3">
      <h1 class="tl  tc tl-ns  mt2 mb0 calisto fw5 f2-ns f3 mid-gray ">Custom Summer Concert Ticket Generator</h1>
    </header>
    <section class="flex flex-wrap justify-between">
      <div class="w-100 w-80-ns tc tl-ns">
        <h2 class="calisto fw1 f4-ns f3 ">Select an image</h2>

        <div v-for="ticket in tickets" :key="ticket.id" class="fl-ns db tc pa1 grow aspect-ratio--4x6 mb3" :class="ticket.id === imageId ? 'ba bw2 b--yellow ' : ''" @click="selectImage(ticket.id, ticket.publicId)">

MoeRayo

<template>
  <div class="bg-washed-blue vh-100 ph3 ph5-ns">
    <header class="tc pv3">
     <!-- Header content -->
    </header>
    <section class="ph5 flex flex-wrap justify-between">
      <div class="w-100 w-50-ns tc tl-ns">
        <div class="mv4 cb">
           <!-- form content -->
        </div>

MoeRayo

<template>
  <div class="bg-washed-green vh-100 ph3 ph5-ns">

    <header class="tc pv3">
      <h1 class="tl tc tl-ns mt2 mb0 calisto fw5 f2-ns f3 mid-gray">Music art covers using neural style transfer</h1>
    </header>

     <section class="flex flex-wrap justify-between">

      <div class="w-100 w-50-ns tc tl-ns br b--black-50">

MoeRayo

<template>
  <div class="bg-washed-green vh-100 ph3 ph5-ns">

    <header class="tc pv3">
      <!-- Header content -->
    </header>

     <section class="flex flex-wrap justify-between">

      <div class="w-100 w-50-ns tc tl-ns br b--black-50">