gravitycss
Version:
Pre-built styling library.
267 lines (233 loc) • 8.03 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gravityCSS</title>
<style>
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #282c35;
color: #fff;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
color: #61dafb;
text-align: center;
animation: slideInDown 1s ease-out forwards;
}
@keyframes slideInDown {
from {
transform: translateY(-50px);
}
to {
transform: translateY(0);
}
}
h1:hover {
color: #fd5e53;
transform: scale(1.1);
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
p {
font-size: 1.5rem;
line-height: 1.8;
margin-bottom: 20px;
text-align: center;
animation: fadeInUp 1s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.background-highlight {
background-color: #444;
padding: 15px;
margin: 0;
border-radius: 8px;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.background-highlight:hover {
background-color: #1abc9c;
transition: background-color 0.3s ease-in-out;
}
.background-highlight:hover::after {
content: ' gravityCSS makes styling easier';
color: #fff;
display: block;
font-size: 1.2rem;
margin-top: 10px;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
h2 {
font-size: 2.5rem;
margin-top: 40px;
margin-bottom: 20px;
color: #61dafb;
text-align: center;
animation: fadeInUp 1s ease-out forwards;
}
h2:hover {
color: #fd5e53;
transform: scale(1.1);
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
a {
font-size: 2rem;
text-decoration: none;
color: #61dafb;
transition: color 0.3s ease-in-out;
animation: fadeIn 1s ease-out forwards;
}
a:hover {
color: #fd5e53;
}
.credits {
margin-top: 40px;
text-align: center;
animation: fadeInUp 1s ease-out forwards;
}
.credits p {
font-size: 1.2rem;
margin: 5px;
opacity: 0.8;
}
.credits a {
color: #61dafb;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
.credits a:hover {
color: #fd5e53;
}
.scroll-to-top-btn {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #61dafb;
color: #fff;
border: none;
border-radius: 50%;
width: 50px; /* Adjust the size as needed */
height: 50px; /* Adjust the size as needed */
font-size: 24px;
line-height: 50px; /* Should be equal to height for vertical centering */
text-align: center;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease-in-out;
}
.scroll-to-top-btn:hover {
background-color: #fd5e53;
}
.code-block {
background-color: #000;
color: #fff;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
.code-block button,
.code-block h1,
.code-block input,
.code-block checkbox,
.code-block div,
.code-block a,
.code-block p,
.code-block em,
.code-block blockquote {
display: block;
margin-bottom: 10px;
}
::-webkit-scrollbar {
background-color: #282c35;
width: 0.6rem;
}
::-webkit-scrollbar-track {
background-color: #282c35;
}
::-webkit-scrollbar-thumb {
background-color: #39496e;
border-radius: 10rem;
}
</style>
</head>
<body>
<h1>gravityCSS</h1>
<p>GravityCSS is a CSS library designed to streamline and enhance the styling of HTML elements.
This library offers a collection of pre-made styles to facilitate the process of styling your web pages with ease and efficiency.</p>
<p class="background-highlight">Easy is best.</p>
<h2>Why should you use gravityCSS?</h2>
<p class="p-secondary">
GravityCSS is a user-friendly CSS library designed to provide ready-made styles. It enables you to effortlessly build quick and responsive web pages without facing significant challenges. If the default colors, sizes, or other elements don't suit your preferences, you can easily customize them using the style attribute. This way, you can create your web pages without any worries!
</p>
<h2>Copyright?</h2>
<p class="p-secondary">
GravityCSS is free to use without any copyright restrictions. You can use it for both personal and commercial purposes without any cost – no need to spend a single penny! While it would be appreciated if you give credit when using GravityCSS, it's not mandatory. Just feel free to enjoy using gravityCSS without any worries.
</p>
<h2 class="h-primary">Themes</h2>
<p style="font-size: 40px;" class="p-secondary">
gravityCSS has 4 color themes by default:
</p>
<ul style="list-style-type: none; padding: 0; text-align: center;">
<li style="font-size: 32px; margin-bottom: 10px; color: #61dafb;">-primary: Royal Blue</li>
<li style="font-size: 32px; margin-bottom: 10px; color: #673ab7;">-secondary: Deep Purple</li>
<li style="font-size: 32px; margin-bottom: 10px; color: #000;">-modern: Black</li>
<li style="font-size: 32px; margin-bottom: 10px; color: #808080;">-default: Gray</li>
</ul>
<script>
// Get the button
var scrollToTopBtn = document.getElementById("scrollToTopBtn");
// Show the button when scrolling down
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}
}
// Smooth scroll to the top
function scrollToTop() {
var currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
if (currentPosition > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, currentPosition - currentPosition / 8);
}
}
</script>
<!-- Credits Section -->
<div class="credits">
<p>gravityCSS by</p>
<a href="https://www.youtube.com/channel/UC19dtbNLK90dnJFASMxU--A">ArtOperator</a>
<p>Enjoy using gravityCSS!</p>
</div>
</body>
</html>