index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS UI - The code samples</title>

	<!-- css -->
	<link rel="stylesheet" href="www/css/cssui.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
    	<!-- link to source on github -->
         <a href="https://github.com/css-ui/css-ui" class="github-corner" aria-label="View source on GitHub">
		<svg width="80" height="80" viewBox="0 0 250 250" class="svg" aria-hidden="true">
			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
			<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
			<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
		</svg>
	</a>

	<!-- website containter -->
	<div class="container">

		<!-- title -->
		<div class="title">CSS UI - The code samples</div>

		<!-- Content -->
		<div class="wrapper box">
			<div class="heading"><span>#</span>Content</div>
			<div class="text">Headings</div>
			<h1>Heading 1</h1>
			<h2>Heading 2</h2>
			<h3>Heading 3</h3>
			<h4>Heading 4</h4>
			<h5>Heading 5</h5>
			<h6>Heading 6</h6>
			<hr>
			<div class="text">Paragraphs</div>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</p>
			<p>
				<em>Duis aute irure <strong>dolor in reprehenderit in voluptate</strong> velit esse cillum <strong>dolore eu fugiat</strong> nulla pariatur.</em>
			</p>
			<hr>
			<div class="text">Lists</div>
			<ol>
				<li>Lorem ipsum</li>
				<li>Dolor sit amet
				    	<ul>
						<li>Lorem sed risus</li>
						<li>Eiusmod tempor</li>
					</ul>
				</li>
				<li>Consectetur
					<ul>
						<li>Lorem ipsum</li>
						<li>Dolor sit amet
							<ul>
								<li>Lorem sed risus</li>
								<li>Eiusmod tempor</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>Lorem ipsum</li>
				<li>Lorem sed risus</li>
			</ol>
			<hr>
			<div class="text">Quotes</div>
			<blockquote class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</blockquote>
			<hr>
			<div class="text">Table</div>
			<table class="full width">
				<tr>
					<th>One</th>
					<th>Two</th>
					<th>Three</th>
				</tr>
				<tr>
					<td>Three</td>
					<td>Two</td>
					<td>One</td>
				</tr>
				<tr>
					<td>One</td>
					<td>Two</td>
					<td>Three</td>
				</tr>
			</table>
		</div>

		<!-- buttons -->
		<div class="wrapper box">
			<div class="heading"><span>#</span>Buttons</div>
			<div class="text">Sample of individual buttons</div>
			<div class="wrapper">
				<a class="button">Hyperlink</a>
				<button class="button">Button</button>
				<input class="button" type="submit" value="Submit">
				<input class="button" type="reset" value="Reset">
			</div>
			<div class="text">Colors</div>
			<div class="wrapper">
				<a class="button common">Common</a>
				<a class="button primary">Primary</a>
				<a class="button success">Success</a>
				<a class="button warning">Warning</a>
				<a class="button danger">Danger</a>
			</div>
			<div class="wrapper">
				<a class="button common outline">Common</a>
				<a class="button primary outline">Primary</a>
				<a class="button success outline">Success</a>
				<a class="button warning outline">Warning</a>
				<a class="button danger outline">Danger</a>
			</div>
			<div class="text">Simple</div>
			<div class="wrapper">
				<a class="button white">White</a>
				<a class="button light">Light</a>
			</div>
		</div>

		<!-- messages -->
		<div class="wrapper box">
			<div class="heading"><span>#</span>Flash messages</div>
			<p class="message info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			<p class="message success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			<p class="message warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			<p class="message danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>

		<!-- forms -->
		<div class="wrapper box">

			<div class="heading"><span>#</span>Forms</div>

			<!-- search -->
			<div class="wrapper">
				<div class="text">Search</div>
				<form>
					<input type="search" placeholder="Search keywords" required class="inline">
					<input type="submit" value="Search" class="button primary">
				</form>
			</div>

			<!-- inline -->
			<div class="wrapper">
				<div class="text">Inline</div>
				<form class="clear">
					<input type="text" placeholder="Text" class="inline">
					<input type="password" placeholder="Password" required class="inline">
					<input type="submit"  value="Submit" class="inline button primary">
				</form>
			</div>

			<!-- group -->
			<div class="wrapper">
				<div class="text">Grouping</div>
				<form class="group">
					<input type="text" placeholder="Text" class="unite first">
					<input type="password" placeholder="Password" class="unite">
					<input type="email" placeholder="Email" class="unite last">
					<input type="submit" value="Submit" class="button primary">
				</form>
			</div>

			<!-- classic #1 -->
			<div class="wrapper">
				<div class="text">Classic #1</div>
				<form>
					<input type="text" placeholder="Text">
					<input type="password" placeholder="Password" required>
					<input type="submit" value="Submit" class="button primary">
				</form>
			</div>

			<!-- classic #2 -->
			<div class="wrapper">
				<div class="text">Classic #2</div>
				<form>
					<label for="text">Text</label>
					<input type="text" id="text" placeholder="Text">

					<label for="password">Password</label>
					<input type="password" id="password" placeholder="Password" required>
					<input type="submit" value="Submit" class="button primary">
				</form>
			</div>

			<!-- classic #3 -->
			<div class="wrapper">
				<div class="text">Classic #3</div>
				<form>
					<div class="row">
						<div class="six columns">
							<label for="text-2">Text</label>
							<input type="text" id="text-2" placeholder="Text" class="full width">
						</div>
						<div class="six columns">
							<label for="select">Select</label>
							<select id="select" required class="full width">
								<option value="">Choose an item</option>
								<option value="1">Woman</option>
								<option value="2">Man</option>
							</select>
						</div>
					</div>
					<label for="textarea">Textarea</label>
					<textarea placeholder="Textarea" id="textarea" class="full width"></textarea>
					<input type="submit" value="Submit" class="button primary">
				</form>
			</div>

			<!-- classic #4 -->
			<div class="wrapper">
				<div class="text">Classic #4</div>
				<form>
					<fieldset>
						<legend>Form in fieldset</legend>
						<div class="row">
							<div class="six columns">
								<input type="text" placeholder="Text" class="full width">
								<i class="help">This one help for text.</i>
							</div>
							<div class="six columns">
								<input type="password" placeholder="Password" required class="full width">
								<i class="help">This one help for password.</i>
							</div>
						</div>
						<div class="align right">
							<input type="submit" value="Submit" class="button primary">
						</div>
					</fieldset>
				</form>
			</div>

			<!-- radio inpits -->
			<div class="wrapper">
				<div class="text">Radio</div>
				<form>
					<div class="wrapper">
						<label class="radio">One
							<input type="radio" name="radio" checked="checked">
							<span class="checkmark primary"></span>
						</label>
					</div>
					<div class="wrapper">
						<label class="radio">Two
							<input type="radio" name="radio">
							<span class="checkmark primary"></span>
						</label>
					</div>
				</form>
			</div>

			<!-- checkbox inpits -->
			<div class="wrapper">
				<div class="text">Checkbox</div>
				<form>
					<div class="wrapper">
						<label class="check">One
							<input type="checkbox" name="checkbox" checked="checked">
							<span class="checkmark primary"></span>
						</label>
					</div>
					<div class="wrapper">
						<label class="check">Two
							<input type="checkbox" name="checkbox">
							<span class="checkmark primary"></span>
						</label>
					</div>
				</form>
			</div>

			<!-- readonly -->
			<div class="wrapper">
				<div class="text">Readonly</div>
				<form>
					<input type="text" placeholder="Readonly" readonly>
				</form>
			</div>

			<!-- disabled -->
			<div class="wrapper">
				<div class="text">Disabled</div>
				<form>
					<input type="text" placeholder="Disabled" disabled>
				</form>
			</div>
		</div>

		<!-- grid system -->
	    	<div class="wrapper box">
			<div class="heading"><span>#</span>Grid system</div>
			<div class="row view">
				<div class="one column">one</div>
				<div class="eleven columns">eleven</div>
			</div>
			<div class="row view">
				<div class="two columns">two</div>
				<div class="ten columns">ten</div>
			</div>
			<div class="row view">
				<div class="three columns">three</div>
				<div class="nine columns">nine</div>
			</div>
			<div class="row view">
				<div class="four columns">four</div>
				<div class="eight columns">eight</div>
			</div>
			<div class="row view">
				<div class="five columns">five</div>
				<div class="seven columns">seven</div>
			</div>
			<div class="row view">
				<div class="six columns">six</div>
				<div class="six columns">six</div>
			</div>
			<div class="row view">
				<div class="seven columns">seven</div>
				<div class="five columns">five</div>
			</div>
			<div class="row view">
				<div class="eight columns">eight</div>
				<div class="four columns">four</div>
			</div>
			<div class="row view">
				<div class="nine columns">nine</div>
				<div class="three columns">three</div>
			</div>
			<div class="row view">
				<div class="ten columns">ten</div>
				<div class="two columns">two</div>
			</div>
			<div class="row view">
				<div class="eleven columns">eleven</div>
				<div class="one column">one</div>
			</div>
			<div class="row view">
				<div class="twelve columns">twelve</div>
			</div>
			<div class="row view">
				<div class="one-third column">one third</div>
				<div class="one-third column">one third</div>
				<div class="one-third column">one third</div>
			</div>
			<div class="row view">
				<div class="two-thirds columns">two thirds</div>
			</div>
			<div class="row view">
				<div class="one-half column">one half</div>
				<div class="one-half column">one half</div>
			</div>
		</div>

		<div class="wrapper box">
			<div class="heading"><span>#</span>Grid system offset</div>
			<div class="row view">
				<div class="one column offset-eleven">one</div>
			</div>
			<div class="row view">
				<div class="two columns offset-ten">two</div>
			</div>
			<div class="row view">
				<div class="three columns offset-nine">three</div>
			</div>
			<div class="row view">
				<div class="four columns offset-eight">four</div>
			</div>
			<div class="row view">
				<div class="five columns offset-seven">five</div>
			</div>
			<div class="row view">
				<div class="six columns offset-six">six</div>
			</div>
			<div class="row view">
				<div class="seven columns offset-five">seven</div>
			</div>
			<div class="row view">
				<div class="eight columns offset-four">eight</div>
			</div>
			<div class="row view">
				<div class="nine columns offset-three">nine</div>
			</div>
			<div class="row view">
				<div class="ten columns offset-two">ten</div>
			</div>
			<div class="row view">
				<div class="eleven columns offset-one">eleven</div>
			</div>
			<div class="row view">
				<div class="twelve columns">twelve</div>
			</div>
			<div class="row view">
				<div class="one-third column offset-two-thirds">one third</div>
			</div>
			<div class="row view">
				<div class="one-third column offset-one-third">one third</div>
			</div>
			<div class="row view">
				<div class="one-third column">one third</div>
			</div>
			<div class="row view">
				<div class="one-half column offset-one-half">one half</div>
			</div>
			<div class="row view">
				<div class="one-half column">one half</div>
			</div>
		</div>

		<!-- responsive image -->
		<div class="wrapper box">
			<div class="heading"><span>#</span>Responsive image</div>
			<div class="align center">
				<img src="img/logo.png" alt="CSS UI Framework" class="max width">
			</div>
		</div>
	</div>
</body>
</html>