2019-04-04 17:25:34 -04:00
<!DOCTYPE html>
< html lang = 'en' >
< head >
< title > Water.css< / title >
2019-04-05 12:47:56 -04:00
< link rel = 'stylesheet' href = 'water.css' >
2019-04-04 17:25:34 -04:00
< meta name = 'viewport' content = 'width=device-width, initial-scale=1.0' >
2019-04-05 12:47:56 -04:00
2019-04-05 01:05:12 -04:00
< 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 >
2019-04-04 17:25:34 -04:00
< / 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 >
2019-04-05 09:09:13 -04:00
< 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 >
2019-04-04 17:25:34 -04:00
< 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 >
2019-04-05 09:09:13 -04:00
< button id = 'switch' > Switch theme< / button >
2019-04-04 17:25:34 -04:00
< h2 > More elements< / h2 >
< p >
This is supposed to be a demo page so we need more elements!
< / p >
2019-04-05 14:59:12 -04:00
< img src = 'http://placekitten.com/408/287' alt = 'Example kitten' >
2019-04-04 17:25:34 -04:00
< ul >
< li > List item 1< / li >
< li > List item 2< / li >
< li > List item 3< / li >
< / ul >
2019-04-04 17:37:04 -04:00
< p >
Below I'm gonna put an < code > < hr> < / code > , because why not?
< / p >
2019-04-04 17:25:34 -04:00
< hr >
2019-04-05 13:17:18 -04:00
< textarea > Hello from a textarea!< / textarea >
2019-04-04 17:25:34 -04:00
< 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 >
2019-04-05 04:22:45 -04:00
< input disabled placeholder = 'This is disabled' >
2019-04-05 09:09:13 -04:00
< input readonly value = 'This is readonly' >
< script src = 'script.js' > < / script >
2019-04-04 17:25:34 -04:00
< / body >
2019-04-05 01:05:12 -04:00
< / html >
