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

Add demo

Browse Source
This commit is contained in:
Kognise 2019-04-04 17:25:34 -04:00
parent 40543661d6
commit f76eafd7ae
No known key found for this signature in database
GPG Key ID: 19AA40F6884A36D6
1 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/index.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Water.css</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/water.min.css'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</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>
<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>
<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>
<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>
</body>
</html>