45 lines
989 B
HTML
45 lines
989 B
HTML
|
{% extends "layouts/minimal.html" %}
|
||
|
|
{% block title %}{_ "Workbench" _}{% endblock %}
|
||
|
|
{% block content %}
|
||
|
|
<style>
|
||
|
|
body, html {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||
|
|
background-size: 400% 400%;
|
||
|
|
animation: gradient 15s ease infinite;
|
||
|
|
height: 100vh;
|
||
|
|
}
|
||
|
|
@keyframes gradient {
|
||
|
|
0% {
|
||
|
|
background-position: 0% 50%;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
background-position: 100% 50%;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
background-position: 0% 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<section class="hero">
|
||
|
|
<div class="hero-body">
|
||
|
|
<p class="title">
|
||
|
|
Pure CSS Gradient Background Animation
|
||
|
|
</p>
|
||
|
|
<p class="subtitle">
|
||
|
|
<a href="https://manuel.pinto.dev" class="text-decoration-none">
|
||
|
|
Pen by Manuel Pinto
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
<p class="subtitle">
|
||
|
|
<a href="https://codepen.io/P1N2O/full/pyBNzX">
|
||
|
|
Source Code
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
{% endblock %}
|