Skip to content

Instantly share code, notes, and snippets.

@Codyzhao

Codyzhao/dabblet.css

Last active September 5, 2019 21:45
Show Gist options
  • Save Codyzhao/0ed7fcd8fff6c44a0d15f2c27a0583a2 to your computer and use it in GitHub Desktop.
Save Codyzhao/0ed7fcd8fff6c44a0d15f2c27a0583a2 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background: white;
color: #333;
font-size: 16px;
line-height: 1.2;
}
h1 {
text-align: center;
}
form {
width: 500px;
margin: 0 auto;
}
legend {
font-weight: bold;
font-size: 120%;
}
small {
font-size: 70%;
}
fieldset > div {
margin: 10px 0;
}
fieldset > div > label {
display: inline-block;
min-width: 100px;
vertical-align: top;
line-height: 27px;
}
input, textarea {
border: 1px solid #cecece;
padding: 5px 10px;
font-size: .8rem;
}
label.inline {
font-size: .8rem;
}
.mb-5 {
margin-bottom: 5px;
}
.inline-block {
display: inline-block;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1>Sign up</h1>
<form action="" method="post">
<fieldset>
<legend>Account Details</legend>
<div>
<label for="email">Email</label>
<input id="email" type="email" name="email" value="" placeholder="Email"/>
</div>
<div>
<label for="password">Password</label>
<input id="password" type="password" name="password" value="" placeholder="Password"/>
</div>
</fieldset>
<br>
<fieldset>
<legend>Personal Details</legend>
<div>
<label for="name">Name</label>
<input id="name" type="text" name="name" value="" placeholder="Full name"/>
</div>
<div>
<label for="tel">Telephone</label>
<input id="tel" type="tel" name="tel" value="" placeholder="Phone number"/>
<small>Format: 123-456-7890</small>
</div>
<div>
<label class="mb-5">Gender</label>
<div class="inline-block">
<input type="radio" id="male" name="gender" value="male"/>
<label class="inline" for="male">Male</label>
</div>
<div class="inline-block">
<input type="radio" id="female" name="gender" value="female"/>
<label class="inline" for="female">Female</label>
</div>
<div class="inline-block">
<input type="radio" id="other" name="gender" value="other"/>
<label class="inline" for="other">Other</label>
</div>
</div>
<div>
<label for="story">Your story</label>
<textarea id="story" class="inline-block" name="story" rows="5" cols="33"
placeholder="Please tell us your story"></textarea>
</div>
</fieldset>
<br>
<fieldset>
<legend>Address</legend>
<div>
<label for="street">Street</label>
<input id="street" type="text" name="street" value="" placeholder="Street"/>
</div>
<div>
<label for="city">City</label>
<input id="city" type="text" name="city" value="" placeholder="City"/>
</div>
<div>
<label for="country">Country</label>
<select id="country" name="country">
<option value="">Please select</option>
<option value="nz">New Zealand</option>
<option value="au">Australia</option>
<option value="cn">China</option>
<option value="us">USA</option>
</select>
</div>
</fieldset>
<br>
<div>
<input type="checkbox" id="tnc" name="tnc" value="tnc"/>
<label class="inline" for="tnc">I agree the <a href="#">terms and conditions</a></label>
</div>
<br>
<div>
<button class="inline-block" type="submit">Submit</button>
<button class="inline-block" type="reset">Reset</button>
</div>
</form>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment