mirror of
https://github.com/kognise/water.css.git
synced 2025-10-29 11:16:16 +01:00
64 lines
2.2 KiB
HTML
64 lines
2.2 KiB
HTML
<!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'>
|
|
<!-- 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>
|
|
|
|
<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>
|
|
<p>
|
|
Below I'm gonna put an <code><hr></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='•••••••••••'>
|
|
|
|
<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 placeholder='This is readonly'>
|
|
</body>
|
|
</html>
|