u-fit/frontend/pages/styles.tsx

import { AdminPage } from '../src/app'
import theme from '../src/styles/theme'

const StylePage = () => {
  return (
    <div className='page'>
      <section className='presentation'>
        <h1>This is the main title.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, sed
          perspiciatis. Molestias iusto, dolorem expedita deserunt saepe nostrum
          ex voluptas, illo consequuntur inventore eius impedit.
        </p>
      </section>

      <article>
        <nav>
          <h2>Mobile navigation</h2>
          <ul>
            <li>This is a mobile navigation item.</li>
          </ul>
        </nav>
      </article>

      <article className='program'>
        <h2>Program title</h2>
        <p>stuff</p>
      </article>

      <article>
        <form>
          <fieldset>
            <label htmlFor='text'>text</label>
            <input type='text' name='text' id='text' placeholder='text' />
            <label htmlFor='search'>search</label>
            <input
              type='search'
              name='search'
              id='search'
              placeholder='search'
            />
            <label htmlFor='password'>password</label>
            <input
              type='password'
              name='password'
              id='password'
              placeholder='password'
            />
            <label htmlFor='tel'>tel</label>
            <input type='tel' name='tel' id='tel' placeholder='tel' />
            <label htmlFor='url'>url</label>
            <input type='url' name='url' id='url' placeholder='url' />
            <label htmlFor='email'>email</label>
            <input type='email' name='email' id='email' placeholder='email' />
            <label htmlFor='number'>number</label>
            <input
              type='number'
              name='number'
              id='number'
              placeholder='number'
            />
            <label htmlFor='range'>range</label>
            <input type='range' name='range' id='range' placeholder='range' />
            <label htmlFor='date'>date</label>
            <input type='date' name='date' id='date' placeholder='date' />
            <label htmlFor='time'>time</label>
            <input type='time' name='time' id='time' placeholder='time' />
          </fieldset>
          <fieldset>
            <label htmlFor='checkbox'>checkbox</label>
            <input
              type='checkbox'
              name='checkbox'
              id='checkbox'
              placeholder='checkbox'
            />

            <label htmlFor='radio'>radio</label>
            <input
              type='radio'
              name='radio'
              id='radio'
              value='radio1'
              placeholder='radio'
            />
            <label htmlFor='radio'>radio</label>
            <input
              type='radio'
              name='radio'
              id='radio'
              value='radio2'
              placeholder='radio'
            />
            <label htmlFor='radio'>radio</label>
            <input
              type='radio'
              name='radio'
              id='radio'
              value='radio3'
              placeholder='radio'
            />
            <label htmlFor='radio'>radio</label>
            <input
              type='radio'
              name='radio'
              id='radio'
              value='radio4'
              placeholder='radio'
            />

            <select name='select' id='select'>
              <optgroup label='Option Group 1'>
                <option value='option1-1'>1-1</option>
                <option value='option1-2'>1-2</option>
                <option value='option1-3'>1-3</option>
              </optgroup>
              <optgroup label='Option Group 2'>
                <option value='option2-1'>2-1</option>
                <option value='option2-2'>2-2</option>
                <option value='option2-3'>2-3</option>
              </optgroup>
            </select>

            <textarea
              name='textarea'
              id='textarea'
              rows={8}
              cols={50}
              placeholder='textarea'
            ></textarea>
          </fieldset>
          <button type='submit'>Submit</button>
          <button type='reset'>Reset</button>
        </form>
      </article>

      <style jsx>{`
        .page {
          position: relative;
          background-image: linear-gradient(
            to bottom,
            #84cae7,
            #84cae7 400px,
            #ababab 400px,
            #ebebeb 406px,
            #ebebeb 406px
          );
        }
        .presentation {
          height: 300px;
          padding: 2em 3em;
          color: ${theme.colors.presentation};
          background: ${theme.colors.presentationBackground};
        }
        .presentation h1 {
          color: ${theme.colors.presentation};
          font-size: 4rem;
          line-height: 1;
          margin: 0;
          padding: 0;
        }
        .presentation p {
          max-width: 40%;
        }

        .program {
          position: absolute;
          right: 3em;
          width: 40%;
          min-width: 300px;
          background: ${theme.colors.background};
          box-shadow: ${theme.bs};
        }
      `}</style>
    </div>
  )
}

export default StylePage