siftal
Version:
CSS Framework, not bad ;)
195 lines (176 loc) • 6.84 kB
HTML
<html lang="en" dir="ltr">
<head>
<title>Siftal radio</title>
<meta charset="utf-8">
<meta name="description" content="Siftal, a simple CSS framework with usefull tools for Ermile projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0 maximum-scale=1.2, minimal-ui"/>
<link rel="shortcut icon" href="../dist/images/siftal/siftal.ico">
<link rel="icon" href="../dist/images/siftal/siftal.png" type="image/png">
<link rel="stylesheet" href="../dist/css/siftal.css">
<style>
body{background-color:#eee;}
</style>
</head>
<body class="ltr">
<div class="cn">
<div class="tbox">
<h2>Radio</h2>
<p>Easily use our simple radio</p>
</div>
<div class="cbox">
<h3>Radio type 1</h3>
<div class="example">
<h4>Default behaviour</h4>
<input type="radio" name="gender0" value="male" checked="">Male<br>
<input type="radio" name="gender0" value="female">Female<br>
<input type="radio" name="gender0" value="other">Other </div>
<div class="example">
<h4>Radio1</h4>
<div class="radio1">
<input type="radio" name="gender" value="male" id="sRd1">
<label for="sRd1">Male</label>
</div>
<div class="radio1">
<input type="radio" name="gender" value="female" id="sRd2">
<label for="sRd2">Female</label>
</div>
<div class="radio1">
<input type="radio" name="gender" value="none" id="sRd3">
<label for="sRd3">None</label>
</div>
</div>
<div class="example">
<h4>Colored Radio1</h4>
<div class="radio1">
<input type="radio" name="colors" id="sRdc1">
<label for="sRdc1">Blue (Default)</label>
</div>
<div class="radio1 red">
<input type="radio" name="colors" id="sRdc2" checked="">
<label for="sRdc2">Red</label>
</div>
<div class="radio1 yellow">
<input type="radio" name="colors" id="sRdc3">
<label for="sRdc3">Yellow</label>
</div>
<div class="radio1 green">
<input type="radio" name="colors" id="sRdc4">
<label for="sRdc4">Green</label>
</div>
<div class="radio1 black">
<input type="radio" name="colors" id="sRdc5">
<label for="sRdc5">Black</label>
</div>
</div>
</div>
<div class="cbox">
<div class="example">
<form action="">
<div class="radioRating togglable">
<div class="rateBox">
<input type="radio" name="star" id="star-1"/>
<label for="star-1"></label>
<input type="radio" name="star" id="star-2"/>
<label for="star-2"></label>
<input type="radio" name="star" id="star-3"/>
<label for="star-3"></label>
<input type="radio" name="star" id="star-4"/>
<label for="star-4"></label>
<input type="radio" name="star" id="star-5"/>
<label for="star-5"></label>
</div>
</div>
</form>
</div>
<div class="example">
<div class="radioRating heart txtC">
<div class="rateBox">
<input type="radio" name="star" id="star2-1"/>
<label for="star2-1"></label>
<input type="radio" name="star" id="star2-2"/>
<label for="star2-2"></label>
<input type="radio" name="star" id="star2-3"/>
<label for="star2-3"></label>
<input type="radio" name="star" id="star2-4"/>
<label for="star2-4"></label>
</div>
</div>
</div>
<div class="example">
<div class="radioRating bell txtC">
<div class="rateBox">
<input type="radio" name="star" id="star3-1"/>
<label for="star3-1">1</label>
<input type="radio" name="star" id="star3-2"/>
<label for="star3-2">2</label>
<input type="radio" name="star" id="star3-3"/>
<label for="star3-3">3</label>
</div>
</div>
</div>
<div class="example">
<div class="radioRating bookmark">
<div class="rateBox">
<input type="radio" name="star" id="star4-1"/>
<label for="star4-1"></label>
<input type="radio" name="star" id="star4-2"/>
<label for="star4-2"></label>
<input type="radio" name="star" id="star4-3"/>
<label for="star4-3"></label>
</div>
</div>
</div>
<div class="example">
<div class="radioRating flag">
<div class="rateBox">
<input type="radio" name="star" id="star5-1"/>
<label for="star5-1"></label>
<input type="radio" name="star" id="star5-2"/>
<label for="star5-2"></label>
<input type="radio" name="star" id="star5-3"/>
<label for="star5-3"></label>
</div>
</div>
</div>
<div class="example">
<div class="radioRating like">
<div class="rateBox">
<input type="radio" name="star" id="star6-1"/>
<label for="star6-1"></label>
<input type="radio" name="star" id="star6-2"/>
<label for="star6-2"></label>
<input type="radio" name="star" id="star6-3"/>
<label for="star6-3"></label>
</div>
</div>
</div>
<div class="example">
<div class="radioRating dislike">
<div class="rateBox">
<input type="radio" name="star" id="star7-1"/>
<label for="star7-1"></label>
<input type="radio" name="star" id="star7-2"/>
<label for="star7-2"></label>
<input type="radio" name="star" id="star7-3"/>
<label for="star7-3"></label>
</div>
</div>
</div>
<div class="example">
<div class="radioRating user1">
<div class="rateBox">
<input type="radio" name="star" id="star8-1"/>
<label for="star8-1"></label>
<input type="radio" name="star" id="star8-2"/>
<label for="star8-2"></label>
<input type="radio" name="star" id="star8-3"/>
<label for="star8-3"></label>
</div>
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>