butonun çerçevesinde efekt olsun rgb - Follow Up Deployment
Browse files- index.html +26 -15
index.html
CHANGED
|
@@ -139,13 +139,7 @@
|
|
| 139 |
}
|
| 140 |
}
|
| 141 |
.inbox-count {
|
| 142 |
-
background:
|
| 143 |
-
#FF0000,
|
| 144 |
-
#FFFF00,
|
| 145 |
-
#00FF00,
|
| 146 |
-
#FF0000);
|
| 147 |
-
background-size: 200vw 100%;
|
| 148 |
-
animation: gradientSlide 4s linear infinite;
|
| 149 |
border-radius: 9999px;
|
| 150 |
padding: 0.25rem 1.5rem;
|
| 151 |
transition: all 0.3s ease;
|
|
@@ -154,11 +148,30 @@
|
|
| 154 |
min-width: 60px;
|
| 155 |
text-align: center;
|
| 156 |
font-weight: bold;
|
| 157 |
-
border:
|
|
|
|
| 158 |
}
|
| 159 |
.inbox-count:hover {
|
| 160 |
transform: scale(1.1);
|
| 161 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 162 |
</style>
|
| 163 |
</head>
|
| 164 |
<body class="bg-dark text-gray-100 min-h-screen">
|
|
@@ -181,7 +194,7 @@
|
|
| 181 |
|
| 182 |
<div class="dropdown-menu py-2 mt-2">
|
| 183 |
<div id="login-form" class="px-4 py-3">
|
| 184 |
-
<h3 class="text-primary font-bold mb-2">
|
| 185 |
<input type="email" placeholder="Email" class="w-full bg-secondary border border-primary rounded px-3 py-2 mb-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
| 186 |
<input type="password" placeholder="Password" class="w-full bg-secondary border border-primary rounded px-3 py-2 mb-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
| 187 |
<button class="btn-primary text-sm w-full py-2 rounded font-bold">Sign In</button>
|
|
@@ -222,6 +235,10 @@
|
|
| 222 |
</div>
|
| 223 |
<p id="temp-password" class="text-sm font-bold">t3mpP@ss<span class="text-accent">123</span></p>
|
| 224 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 225 |
</div>
|
| 226 |
|
| 227 |
|
|
@@ -241,12 +258,6 @@
|
|
| 241 |
<span>Starred</span>
|
| 242 |
</a>
|
| 243 |
</li>
|
| 244 |
-
<li>
|
| 245 |
-
<button class="w-full flex items-center text-gray-300 hover-text-primary bg-primary hover:bg-primary-dark text-dark text-sm px-4 py-2 rounded-lg font-bold">
|
| 246 |
-
<i class="fas fa-sync-alt mr-3"></i>
|
| 247 |
-
<span>Refresh Inbox</span>
|
| 248 |
-
</button>
|
| 249 |
-
</li>
|
| 250 |
<li>
|
| 251 |
<a href="#" class="flex items-center text-gray-300 hover-text-accent">
|
| 252 |
<i class="fas fa-trash mr-3 text-accent"></i>
|
|
|
|
| 139 |
}
|
| 140 |
}
|
| 141 |
.inbox-count {
|
| 142 |
+
background: #03DAC6;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 143 |
border-radius: 9999px;
|
| 144 |
padding: 0.25rem 1.5rem;
|
| 145 |
transition: all 0.3s ease;
|
|
|
|
| 148 |
min-width: 60px;
|
| 149 |
text-align: center;
|
| 150 |
font-weight: bold;
|
| 151 |
+
border: 2px solid transparent;
|
| 152 |
+
position: relative;
|
| 153 |
}
|
| 154 |
.inbox-count:hover {
|
| 155 |
transform: scale(1.1);
|
| 156 |
}
|
| 157 |
+
.inbox-count:hover::after {
|
| 158 |
+
content: '';
|
| 159 |
+
position: absolute;
|
| 160 |
+
top: -4px;
|
| 161 |
+
left: -4px;
|
| 162 |
+
right: -4px;
|
| 163 |
+
bottom: -4px;
|
| 164 |
+
border-radius: 9999px;
|
| 165 |
+
padding: 2px;
|
| 166 |
+
background: linear-gradient(90deg,
|
| 167 |
+
#FF0000,
|
| 168 |
+
#FFFF00,
|
| 169 |
+
#00FF00,
|
| 170 |
+
#FF0000);
|
| 171 |
+
background-size: 200vw 100%;
|
| 172 |
+
animation: gradientSlide 4s linear infinite;
|
| 173 |
+
z-index: -1;
|
| 174 |
+
}
|
| 175 |
</style>
|
| 176 |
</head>
|
| 177 |
<body class="bg-dark text-gray-100 min-h-screen">
|
|
|
|
| 194 |
|
| 195 |
<div class="dropdown-menu py-2 mt-2">
|
| 196 |
<div id="login-form" class="px-4 py-3">
|
| 197 |
+
<h3 class="text-primary font-bold mb-2">Gir</h3>
|
| 198 |
<input type="email" placeholder="Email" class="w-full bg-secondary border border-primary rounded px-3 py-2 mb-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
| 199 |
<input type="password" placeholder="Password" class="w-full bg-secondary border border-primary rounded px-3 py-2 mb-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
|
| 200 |
<button class="btn-primary text-sm w-full py-2 rounded font-bold">Sign In</button>
|
|
|
|
| 235 |
</div>
|
| 236 |
<p id="temp-password" class="text-sm font-bold">t3mpP@ss<span class="text-accent">123</span></p>
|
| 237 |
</div>
|
| 238 |
+
<button class="w-full flex items-center justify-center text-gray-300 hover-text-primary bg-primary hover:bg-primary-dark text-dark px-6 py-3 rounded-lg font-bold text-lg mt-4">
|
| 239 |
+
<i class="fas fa-sync-alt mr-3"></i>
|
| 240 |
+
<span>Refresh Inbox</span>
|
| 241 |
+
</button>
|
| 242 |
</div>
|
| 243 |
|
| 244 |
|
|
|
|
| 258 |
<span>Starred</span>
|
| 259 |
</a>
|
| 260 |
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 261 |
<li>
|
| 262 |
<a href="#" class="flex items-center text-gray-300 hover-text-accent">
|
| 263 |
<i class="fas fa-trash mr-3 text-accent"></i>
|