Add some style

This commit is contained in:
Guille 2024-05-13 11:35:46 +02:00
parent 63342a02c1
commit d810fee04d
4 changed files with 72 additions and 3 deletions

View File

@ -62,4 +62,73 @@ h1 {
.left {
width: auto;
overflow: hidden;
}
/* CSS */
.home {
padding: 0.6em 2em;
border: none;
outline: none;
color: black;
background: white;
cursor: pointer;
position: relative;
z-index: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
font-size: large;
font-weight: bolder;
}
.home:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
-webkit-filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing-home 120s linear infinite;
transition: opacity 0.3s ease-in-out;
}
@keyframes glowing-home {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.home:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: white;
left: 0;
top: 0;
}

View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../css/styles.css">
</head>
<body>
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
<a href="../../index.html" class="nav-link home"><i class="bi bi-house-fill"></i> Home</a>
<h1><img src="logo/logo.png" id="img_logo">Energy+ workflow</h1>
<div class="container">
<div class="right">

View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../css/styles.css">
</head>
<body>
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
<a href="../../index.html" class="nav-link home"><i class="bi bi-house-fill"></i> Home</a>
<h1><img src="logo/logo.png" id="img_logo">INSEL monthly energy balance workflow</h1>
<div class="container">
<div class="right">

View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../css/styles.css">
</head>
<body>
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
<a href="../../index.html" class="nav-link home"><i class="bi bi-house-fill"></i> Home</a>
<h1><img src="logo/logo.png" id="img_logo"> Retrofit workflow</h1>
<div class="container">
<div class="right">