Skip to content

Instantly share code, notes, and snippets.

@chrisvfritz

chrisvfritz/index.html Secret

Last active February 17, 2022 15:05
Show Gist options
  • Save chrisvfritz/1b25d9037fb64e3486ea2df8179f9ce8 to your computer and use it in GitHub Desktop.
Save chrisvfritz/1b25d9037fb64e3486ea2df8179f9ce8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is a title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet">
<style>
/* Wrap code blocks instead of overflowing */
pre > code {
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="container">
<h1>Dating profile generator</h1>
<p class="tagline">
Create your own dating profile, that you fully own! Simply enter your personal information below and the HTML for your profile will start writing itself automatically.
</p>
<h2>Personal</h2>
<div class="row">
<div class="six columns">
<label>First name</label>
<input type="text" class="u-full-width">
</div>
<div class="six columns">
<label>Last name</label>
<input type="text" class="u-full-width">
</div>
</div>
<label>Briefly describe yourself</label>
<textarea class="u-full-width"></textarea>
<h2>Contact</h2>
<div class="row">
<div class="six columns">
<label>Email</label>
<input type="email" class="u-full-width">
</div>
<div class="six columns">
<label>Phone</label>
<input type="tel" class="u-full-width">
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="six columns">
<h2>Preview</h2>
<div>
THIS IS WHERE THE HTML PREVIEW SHOULD APPEAR
</div>
</div>
<div class="six columns">
<h2>Generated HTML</h2>
<pre><code>
THIS IS WHERE THE RAW HTML SHOULD APPEAR
</code></pre>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment