gravitycss
Version:
Pre-built styling library.
54 lines • 4.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="gravity.css">
<title>..gravitycss/intercode//:3000p.template</title>
</head>
<body>
<button class="btn-primary">Click me</button>
<button class="btn-secondary">Click me</button>
<button class="btn-modern">Click me</button>
<button class="btn-default">Click me</button>
<h1 class="h-primary">Title</h1>
<h1 class="h-secondary">Title</h1>
<h1 class="h-modern">Title</h1>
<h1 class="h-default">Title</h1>
<input type="text" placeholder="Type here" class="text-primary">
<input type="text" placeholder="Type here" class="text-secondary">
<input type="text" placeholder="Type here" class="text-modern">
<input type="text" placeholder="Type here" class="text-default">
<br>
<input type="checkbox" class="check-primary">
<input type="checkbox" class="check-secondary">
<input type="checkbox" class="check-modern">
<input type="checkbox" class="check-default">
<div class="loader-primary"></div>
<div class="loader-secondary"></div>
<div class="loader-modern"></div>
<div class="loader-default"></div>
<br>
<input type="color" class="color-primary">
<input type="color" class="color-secondary">
<input type="color" class="color-modern">
<input type="color" class="color-default">
<br>
<a href="youtube.com" class="a-primary">Hello</a>
<a href="youtube.com" class="a-secondary">Hello</a>
<a href="youtube.com" class="a-modern">Hello</a>
<a href="youtube.com" class="a-default">Hello</a>
<p class="p-primary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quasi magni enim, suscipit quod a iusto reiciendis laborum voluptatibus consequatur! Cum nulla fugiat voluptatibus voluptatum atque numquam nemo explicabo ratione!</p>
<p class="p-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quasi magni enim, suscipit quod a iusto reiciendis laborum voluptatibus consequatur! Cum nulla fugiat voluptatibus voluptatum atque numquam nemo explicabo ratione!</p>
<p class="p-modern">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quasi magni enim, suscipit quod a iusto reiciendis laborum voluptatibus consequatur! Cum nulla fugiat voluptatibus voluptatum atque numquam nemo explicabo ratione!</p>
<p class="p-default">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam quasi magni enim, suscipit quod a iusto reiciendis laborum voluptatibus consequatur! Cum nulla fugiat voluptatibus voluptatum atque numquam nemo explicabo ratione!</p>
<p>What is <em class="em-primary">GravityCSS?</em></p>
<p>What is <em class="em-secondary">GravityCSS?</em></p>
<p>What is <em class="em-modern">GravityCSS?</em></p>
<p>What is <em class="em-default">GravityCSS?</em></p>
<blockquote class="bq-primary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error nam ad corrupti odit possimus necessitatibus obcaecati voluptatem, commodi doloremque consequuntur ipsam placeat maiores laudantium modi neque dignissimos, iusto corporis tempore!</blockquote>
<blockquote class="bq-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error nam ad corrupti odit possimus necessitatibus obcaecati voluptatem, commodi doloremque consequuntur ipsam placeat maiores laudantium modi neque dignissimos, iusto corporis tempore!</blockquote>
<blockquote class="bq-modern">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error nam ad corrupti odit possimus necessitatibus obcaecati voluptatem, commodi doloremque consequuntur ipsam placeat maiores laudantium modi neque dignissimos, iusto corporis tempore!</blockquote>
<blockquote class="bq-default">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error nam ad corrupti odit possimus necessitatibus obcaecati voluptatem, commodi doloremque consequuntur ipsam placeat maiores laudantium modi neque dignissimos, iusto corporis tempore!</blockquote>
</body>
</html>