From ab1ddc1777382ce47758920a409ad7890ce1c24d Mon Sep 17 00:00:00 2001
From: HauErn Lien <lienhe81@gmail.com>
Date: Mon, 30 Sep 2024 06:55:48 +0000
Subject: [PATCH] Update file style.css
---
static/style.css | 62 ++++++++++++++++++++++++++++++++++--------------
1 file changed, 44 insertions(+), 18 deletions(-)
diff --git a/static/style.css b/static/style.css
index 11599780..26fe5bf6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,18 +1,44 @@
-body { padding-top: 56px; }
-.left-aligned { margin-left: auto; }
-.bg-dark { background-color: #343a40 !important; }
-.bg-hero { background-color: #45b06cff; }
-
-/* CALLOUT */
-.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
-.bd-callout h4 { margin-bottom:.25rem }
-.bd-callout p:last-child { margin-bottom:0 }
-.bd-callout code { border-radius:.25rem }
-.bd-callout+.bd-callout { margin-top:-.25rem }
-.bd-callout-info { border-left-color:#5bc0de }
-.bd-callout-warning { border-left-color:#f0ad4e }
-.bd-callout-danger { border-left-color:#d9534f }
-
-/* footer */
-footer a { color: white; font-weight: bold; text-decoration: none; }
-footer a:hover { color: white; text-decoration: underline; }
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #f0f0f0;
+ }
+
+ .sachet {
+ position: relative;
+ width: 150px;
+ height: 200px;
+ }
+
+ .bag {
+ width: 100%;
+ height: 100%;
+ background-image: url('https://static.igem.wiki/teams/5187/tie.png'); /* Change to your tied bag image */
+ background-size: contain;
+ background-repeat: no-repeat;
+ transition: background-image 1s ease-in-out;
+ }
+
+ .bag.untied {
+ background-image: url('https://static.igem.wiki/teams/5187/untie.png'); /* Change to your untied bag image */
+ }
+
+ .scent {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ top: -50px;
+ left: 25px;
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+ opacity: 0;
+ transform: scale(0.5);
+ transition: opacity 2s ease, transform 2s ease;
+ }
+
+ .scent.release {
+ opacity: 1;
+ transform: scale(1.5);
+ }
+
\ No newline at end of file
--
GitLab