sagar007 commited on
Commit
4d9b874
·
verified ·
1 Parent(s): 2a256c2

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +38 -4
app.py CHANGED
@@ -219,6 +219,40 @@ css_and_html = """
219
  .gr-form {
220
  background-color: transparent !important;
221
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
222
  </style>
223
 
224
  <div id="app-header">
@@ -229,19 +263,19 @@ css_and_html = """
229
  <p>Unleash your imagination with AI-powered generative art</p>
230
  <div class="concept-container">
231
  <div class="concept">
232
- <img src="https://source.unsplash.com/random/150x120?illustration" alt="Illustration Style">
233
  <div class="concept-description">Illustration Style</div>
234
  </div>
235
  <div class="concept">
236
- <img src="https://source.unsplash.com/random/150x120?line-art" alt="Line Art">
237
  <div class="concept-description">Line Art</div>
238
  </div>
239
  <div class="concept">
240
- <img src="https://source.unsplash.com/random/150x120?digital-art" alt="Midjourney Style">
241
  <div class="concept-description">Midjourney Style</div>
242
  </div>
243
  <div class="concept">
244
- <img src="https://source.unsplash.com/random/150x120?anime" alt="Hanfu Anime">
245
  <div class="concept-description">Hanfu Anime</div>
246
  </div>
247
  </div>
 
219
  .gr-form {
220
  background-color: transparent !important;
221
  }
222
+ .concept {
223
+ position: relative;
224
+ transition: transform 0.3s, box-shadow 0.3s;
225
+ border-radius: 15px;
226
+ overflow: hidden;
227
+ background: rgba(255, 255, 255, 0.1);
228
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
229
+ width: 150px;
230
+ height: 150px;
231
+ display: flex;
232
+ flex-direction: column;
233
+ justify-content: center;
234
+ align-items: center;
235
+ }
236
+ .concept:hover {
237
+ transform: translateY(-10px) rotate(3deg);
238
+ box-shadow: 0 15px 30px rgba(0,0,0,0.4);
239
+ }
240
+ .concept-emoji {
241
+ font-size: 60px;
242
+ margin-bottom: 10px;
243
+ }
244
+ .concept-description {
245
+ background-color: rgba(110, 72, 170, 0.8);
246
+ color: white;
247
+ padding: 10px;
248
+ font-size: 0.9em;
249
+ text-align: center;
250
+ width: 100%;
251
+ position: absolute;
252
+ bottom: 0;
253
+ }
254
+
255
+
256
  </style>
257
 
258
  <div id="app-header">
 
263
  <p>Unleash your imagination with AI-powered generative art</p>
264
  <div class="concept-container">
265
  <div class="concept">
266
+ <div class="concept-emoji">🎨</div>
267
  <div class="concept-description">Illustration Style</div>
268
  </div>
269
  <div class="concept">
270
+ <div class="concept-emoji">✏️</div>
271
  <div class="concept-description">Line Art</div>
272
  </div>
273
  <div class="concept">
274
+ <div class="concept-emoji">🌌</div>
275
  <div class="concept-description">Midjourney Style</div>
276
  </div>
277
  <div class="concept">
278
+ <div class="concept-emoji">👘</div>
279
  <div class="concept-description">Hanfu Anime</div>
280
  </div>
281
  </div>