mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-09-01 01:01:52 +02:00
Code Issues Releases Wiki Activity

Move demo out of docs folder

Browse Source
This commit is contained in:
Kognise
2019-04-05 12:47:56 -04:00
parent 725ff2aede
commit 901f911ea9
2 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
docs/index.html
View File

@@ -1,67 +0,0 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Water.css</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/water.css'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date())
gtag('config', 'UA-116663597-6')
</script>
</head>
<body>
<h1>Water.css</h1>
<p>
Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
<a href='https://github.com/kognise/water.css'>Get it already!</a>
</p>
<p>
Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
</p>
<a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img id='ph' src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150490&theme=dark' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
<h2>Is it responsive?</h2>
<p>
<strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile responsive.
Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive viewport tag</a> and you'll be good to go!
</p>
<p>
In fact, try resizing this page. Everything flows super nicely as you'll see.
</p>
<button id='switch'>Switch theme</button>
<h2>More elements</h2>
<p>
This is supposed to be a demo page so we need more elements!
</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>
Below I'm gonna put an <code>&lt;hr&gt;</code>, because why not?
</p>
<hr>
<form>
<label for='email'>Email</label>
<input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
<label for='password'>Password</label>
<input type='password' name='password' id='password' placeholder='&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;'>
<input type='checkbox' name='remember' id='remember' checked>
<label for='remember'>Remember me</label>
<input type='submit'>
</form>
<input disabled placeholder='This is disabled'>
<input readonly value='This is readonly'>
<script src='script.js'></script>
</body>
</html>