From 63a003e23ceea84b5a3e802ff328bafce68b1639 Mon Sep 17 00:00:00 2001 From: kinoko2k Date: Sun, 16 Jun 2024 09:46:03 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E3=83=95=E3=83=83=E3=82=BF?= =?UTF-8?q?=E3=83=BC=E3=81=AE=E5=9B=BA=E5=AE=9A=20=E2=9C=A8=20=E3=82=B0?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=97=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- group/kinokoteam.html | 66 +++++++++ group/style.css | 307 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 373 insertions(+) create mode 100644 group/kinokoteam.html create mode 100644 group/style.css diff --git a/group/kinokoteam.html b/group/kinokoteam.html new file mode 100644 index 0000000..5b51965 --- /dev/null +++ b/group/kinokoteam.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + KinokoTeam - GroupList + + + + +
+
+ +
+ + + + + + GitHub + +
+
+
+
+
+
+
+ service-icon +
+
+

KinokoTeam

+

これはサービスの説明です。これはサービスの説明です。これはサービスの説明です。これはサービスの説明です。これはサービスの説明です。これはサービスの説明です。これはサービスの説明です。これはサービスの説明です。これはサービスの説明です。これはサービスの説明です。

+
+
+
+
+ +
+
+
❓
+
+ サービスリスト + グループリスト + 色見本 + GitHub +
+
+ + + \ No newline at end of file diff --git a/group/style.css b/group/style.css new file mode 100644 index 0000000..cccdd59 --- /dev/null +++ b/group/style.css @@ -0,0 +1,307 @@ +/* style.css */ + +body, html { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + zoom: 120%; +} + +header { + background-color: #e49e61; + color: white; + padding: 10px 0; + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1000; + transition: background-color 0.3s ease, padding 0.3s ease; +} + +.header-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.logo img { + height: 40px; +} + +.search-bar { + display: flex; + align-items: center; +} + +.search-bar input { + padding: 5px 10px; + border: none; + border-radius: 4px; + margin-right: 10px; +} + +.search-bar a { + display: flex; + align-items: center; + margin-left: 10px; +} + +.search-bar .github-icon, +.search-bar .twitter-icon { + height: 24px; + cursor: pointer; + transition: transform 0.3s ease; +} + +.search-bar .github-icon:hover, +.search-bar .twitter-icon:hover { + transform: scale(1.1); +} + +.hero-image img { + width: 100%; + height: auto; + display: block; +} + +.content-list { + max-width: 1200px; + margin: 20px auto; + padding: 0 20px; +} + +.content-item { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 20px; + padding: 20px; + border-radius: 15px; + color: white; + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + background: linear-gradient(45deg, #1DA1F2, #0F1419); +} + +.content-item:hover { + transform: scale(1.02); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +.item-header { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin-bottom: 20px; +} + +.item-icon img { + height: 50px; + margin-bottom: 10px; +} + +.item-details h1 { + margin: 0; + font-size: 24px; + text-align: center; + position: relative; + display: inline-block; +} + +.item-details h1::after { + content: ''; + position: absolute; + width: 0; + height: 2px; + display: block; + margin-top: 5px; + right: 0; + background: white; + transition: width 0.3s ease, background-color 0.3s ease; +} + +.item-details h1:hover::after { + width: 100%; + left: 0; + background: white; +} + +.item-details .description { + font-size: 16px; + margin-top: 10px; +} + +.color-code-wrapper { + display: flex; + flex-direction: column; + align-items: flex-end; + margin-top: 20px; + width: 100%; +} + +.color-code { + font-size: 14px; + color: white; + margin-bottom: 10px; + text-align: right; + width: 100%; +} + +.copy-btn { + padding: 10px 20px; + font-size: 14px; + cursor: pointer; + border: none; + border-radius: 20px; + background-color: #ffcccb; + color: #333; + transition: background-color 0.3s ease, transform 0.3s ease; +} + +.copy-btn:hover { + background-color: #ff9999; + transform: scale(1.1); +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 10px 0; + position: fixed; + bottom: 0; + left: 0; + width: 100%; +} + +footer p { + margin: 0; + white-space: pre-wrap; +} + +footer a { + color: white; + text-decoration: none; +} + +/* 枠点滅 */ +@keyframes flash-border { + 0% { + border-color: rgba(255, 0, 0, 0); + } + 50% { + border-color: rgba(255, 0, 0, 1); + border-width: 3px; + } + 100% { + border-color: rgba(255, 0, 0, 0); + } +} + +.flash-border { + animation: flash-border 1s ease-in-out 2; +} + +.notification { + position: fixed; + bottom: -50px; + left: 50%; + transform: translateX(-50%); + background-color: #4267B2; + color: white; + padding: 10px 20px; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: bottom 0.3s ease; +} + +.notification.show { + bottom: 20px; +} + +.flower-menu { + position: fixed; + bottom: 20px; + left: 20px; + z-index: 1000; +} + +.menu-button { + background-color: #EEEEEE; + color: white; + font-size: 24px; + border: none; + border-radius: 50%; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.menu-button:hover { + transform: scale(1.1); +} + +.menu-content { + display: none; + flex-direction: column; + align-items: center; + margin-top: 10px; +} + +.menu-content a { + background-color: #ffeb3b; + color: #333; + padding: 10px; + border-radius: 50%; + margin: 5px 0; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; + text-decoration: none; +} + +.menu-content a:hover { + transform: scale(1.1); +} + +@media (max-width: 768px) { + .header-container { + flex-direction: column; + align-items: flex-start; + } + + .search-bar { + margin-top: 10px; + } + + .content-item { + flex-direction: column; + align-items: flex-start; + } + + .item-header { + flex-direction: column; + align-items: flex-start; + } + + .item-icon { + margin: 10px 0; + } + + .color-code-wrapper { + align-items: flex-start; + } + + .notification { + bottom: 80px; + } +} \ No newline at end of file