Hugging Face's logo

hollowstrawberry
/
holymix

anime
illustration
art
fantasy
Model card Files Community
hollowstrawberry commited on
Commit
fee91dc
·
verified ·
1 Parent(s): b579421

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +62 -60
README.md CHANGED
@@ -10,87 +10,89 @@ tags:
10
  ---
11
 
12
  <style>
13
- .title-container {
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- height: 20vh;
18
- text-align: center;
19
- letter-spacing: -0.02em;
20
- line-height: 1.2;
21
- padding: 0.5em 0;
22
- }
23
- .title {
24
- font-size: 3em;
25
- }
26
- .subtitle {
27
- font-size: 1em;
28
- }
29
- .custom-table {
30
- table-layout: fixed;
31
- width: 100%;
32
- border-collapse: separate;
33
- border-spacing: 1em;
34
- margin-top: 2em;
35
- }
36
- .custom-table td {
37
- width: 33.333%;
38
- vertical-align: top;
39
- padding: 0;
40
- }
41
- .custom-image-container {
42
- position: relative;
43
- width: 100%;
44
- height: 100%
45
- margin-bottom: 2em;
46
- overflow: hidden;
47
- align-items: center;
48
- border-radius: 15px;
49
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
50
- transition: all 0.3s ease;
51
- }
52
- .custom-image {
53
- width: 100%;
54
- height: auto;
55
- object-fit: cover;
56
- transition: transform 0.25s;
57
- }
58
- .custom-image-container:hover .custom-image {
59
- transform: scale(1.2);
60
- }
61
  </style>
62
  <div class="title-container">
63
- <div>
64
- <h1 class="title">Holy Mix</h1>
65
- <p>
66
- <h1 class="subtitle">Based on illustrious XL 0.1</h>
67
  </div>
68
  </div>
69
- <table class="custom-table">
70
  <tr>
71
  <td>
72
  <div class="custom-image-container">
73
  <img class="custom-image" src="previews/1.png" alt="Preview">
74
  </div>
75
- <br>
76
- <div class="custom-image-container">
77
- <img class="custom-image" src="previews/3.png" alt="Preview">
78
- </div>
79
  </td>
80
  <td>
81
  <div class="custom-image-container">
82
  <img class="custom-image" src="previews/2.png" alt="Preview">
83
  </div>
84
- <br>
 
85
  <div class="custom-image-container">
86
- <img class="custom-image" src="previews/5.png" alt="Preview">
87
  </div>
88
  </td>
 
 
89
  <td>
90
  <div class="custom-image-container">
91
  <img class="custom-image" src="previews/4.png" alt="Preview">
92
  </div>
93
- <br>
 
 
 
 
 
 
94
  <div class="custom-image-container">
95
  <img class="custom-image" src="previews/6.png" alt="Preview">
96
  </div>
 
10
  ---
11
 
12
  <style>
13
+ .title-container {
14
+ display: flex;
15
+ flex-direction: row;
16
+ align-items: center;
17
+ text-align: center;
18
+ justify-content: center;
19
+ }
20
+ .title-icon {
21
+ font-size: 4em;
22
+ margin-right: 0.25em;
23
+ }
24
+ .title-text {
25
+ display: flex;
26
+ flex-direction: column;
27
+ align-items: flex-start;
28
+ }
29
+ .title {
30
+ font-size: 3em;
31
+ display: flex;
32
+ flex-direction: column;
33
+ align-items: flex-start;
34
+ }
35
+ .subtitle {
36
+ font-size: 1em;
37
+ display: flex;
38
+ flex-direction: column;
39
+ align-items: flex-start;
40
+ }
41
+ .custom-image-container {
42
+ position: relative;
43
+ width: 100%;
44
+ height: 100%;
45
+ border-radius: 0.5em;
46
+ overflow: hidden;
47
+ align-items: center;
48
+ }
49
+ .custom-image {
50
+ width: 100%;
51
+ height: auto;
52
+ border-radius: 0.5em;
53
+ transition: transform 0.25s;
54
+ }
55
+ .custom-image-container:hover .custom-image {
56
+ transform: scale(1.2);
57
+ }
 
 
 
58
  </style>
59
  <div class="title-container">
60
+ <div class="title-icon">🕊️</div>
61
+ <div class="title-text">
62
+ <div class="title">Holy Mix</div>
63
+ <div class="subtitle">Based on illustrious XL 0.1</div>
64
  </div>
65
  </div>
66
+ <table>
67
  <tr>
68
  <td>
69
  <div class="custom-image-container">
70
  <img class="custom-image" src="previews/1.png" alt="Preview">
71
  </div>
 
 
 
 
72
  </td>
73
  <td>
74
  <div class="custom-image-container">
75
  <img class="custom-image" src="previews/2.png" alt="Preview">
76
  </div>
77
+ </td>
78
+ <td>
79
  <div class="custom-image-container">
80
+ <img class="custom-image" src="previews/3.png" alt="Preview">
81
  </div>
82
  </td>
83
+ </tr>
84
+ <tr>
85
  <td>
86
  <div class="custom-image-container">
87
  <img class="custom-image" src="previews/4.png" alt="Preview">
88
  </div>
89
+ </td>
90
+ <td>
91
+ <div class="custom-image-container">
92
+ <img class="custom-image" src="previews/5.png" alt="Preview">
93
+ </div>
94
+ </td>
95
+ <td>
96
  <div class="custom-image-container">
97
  <img class="custom-image" src="previews/6.png" alt="Preview">
98
  </div>