ECMS Quote Widget box

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<div class="container">

  <h1>
    Quote Box
  </h1>

  <p>
    When quoting someone, make sure you have the Who, What, Where and When.
  </p>

  <form action="/action_page.php">

    <h2>Who</h2>

    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" placeholder="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" placeholder="Doe"><br><br>

    <label for="homepage">Author page:</label>
    <input type="url" id="homepage" name="homepage" placeholder="url">

    <h2>What</h2>


    <label for="what">Quote:</label>
    <textarea id="what" name="homewhatpage" placeholder="Quoted text"></textarea>

  </form>


  <h2>Where</h2>

  <label for="where">Link to quoted text:</label>
  <input type="url" id="where" name="where" placeholder="url">

  <h2>When</h2>

  <label for="birthdaytime">Date and Time:</label>
  <input type="datetime-local" id="when" name="when">

  <br>
  <div class="button">
    Generate
  </div>
  <br><br>


  <h1>OUTPUT</h1>

  <label for="quote">Quote Style:</label>

  <select name="quote" id="quote">
    <option value="style1">style1</option>
    <option value="style2">style2</option>
    <option value="style3">style3</option>
    <option value="style4">style4</option>
  </select>



  <p>
    The above form outputs the following
  </p>

  <blockquote cite="https://www.omglinux.com/gnome-43-makes-it-much-easier-to-switch-audio-device/">"Switching between...

CSS

html,
body {
  color: #454545;
}

.container {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  padding: 20px 30px;
  margin-top: 5%;
  margin-bottom: 5%;
  box-shadow: 1px 1px 1px #454545;
}

h1 {
  text-align: center;
  border-bottom: 1px solid #CCCCCC;
}


input,
textarea {
  width: 100%;
}

textarea {
  min-height: 150px;
  max-height: 250px;
  height: auto;

  min-width: 100%;
  max-width: 100%;
  width: auto;
}

.button {
  background: #FFFFFF;
  width: 100%;
}

blockquote {
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding: 20px 30px;
  margin: 20px 30px;
}