diff --git a/css/creators.css b/css/creators.css new file mode 100644 index 0000000..0d65aef --- /dev/null +++ b/css/creators.css @@ -0,0 +1,170 @@ +/* Creators page - Discover creators, filter buttons, creator cards */ + +/* Full width layout */ +.layout > div[style*="flex:1"] { + margin: 0 !important; + max-width: 100% !important; + padding: 0 !important; + width: 100% !important; +} + +.creators-main { + background: transparent !important; + padding: 20px 32px !important; + margin: 0 auto !important; + width: 100%; + max-width: 1400px; +} + +/* Header */ +.creators-header { + text-align: center; + margin-bottom: 24px; +} +.creators-header h1 { + font-size: 2rem; + font-weight: 700; + margin-bottom: 8px; +} +.creators-header p { + color: #64748b; + font-size: 1rem; +} + +/* Filter buttons */ +.filter-buttons { + display: flex; + justify-content: center; + gap: 12px; + flex-wrap: wrap; + margin-bottom: 32px; + border-bottom: 1px solid #e5e7eb; + padding-bottom: 16px; +} +.filter-btn { + background: transparent; + border: none; + padding: 8px 20px; + font-size: 0.9rem; + font-weight: 600; + color: #64748b; + cursor: pointer; + border-radius: 30px; + transition: all 0.2s; +} +.filter-btn.active { + background: var(--gradient); + color: white; +} +.filter-btn:hover:not(.active) { + background: #f1f5f9; +} + +/* Creators grid */ +.creators-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 24px; +} + +/* Creator card */ +.creator-card { + background: #fff; + border-radius: 18px; + box-shadow: 0 2px 8px rgba(59,130,246,0.06); + padding: 20px; + display: flex; + gap: 16px; + transition: transform 0.2s, box-shadow 0.2s; +} +.creator-card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(59,130,246,0.12); +} + +.creator-avatar { + width: 70px; + height: 70px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; +} + +.creator-info { + flex: 1; +} +.creator-name { + font-size: 1.2rem; + font-weight: 700; + margin-bottom: 4px; +} +.creator-handle { + color: #64748b; + font-size: 0.85rem; + margin-bottom: 8px; +} +.creator-bio { + color: #334155; + font-size: 0.85rem; + line-height: 1.4; + margin-bottom: 12px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} +.creator-stats { + display: flex; + gap: 16px; + margin-bottom: 12px; + font-size: 0.8rem; + color: #64748b; +} +.creator-stats i { + margin-right: 4px; +} +.follow-btn { + background: var(--gradient); + color: white; + border: none; + border-radius: 14px; + padding: 6px 16px; + font-size: 0.8rem; + font-weight: 600; + cursor: pointer; + transition: opacity 0.2s; +} +.follow-btn:hover { + opacity: 0.85; +} + +/* Responsive */ +@media (max-width: 768px) { + .creators-main { + padding: 16px !important; + } + .filter-buttons { + gap: 8px; + } + .filter-btn { + padding: 6px 14px; + font-size: 0.8rem; + } +} + +@media (max-width: 480px) { + .creators-main { + padding: 12px !important; + } + .creator-card { + flex-direction: column; + align-items: center; + text-align: center; + } + .creator-stats { + justify-content: center; + } + .follow-btn { + width: 100%; + } +} \ No newline at end of file diff --git a/html/creators.html b/html/creators.html new file mode 100644 index 0000000..a58de0a --- /dev/null +++ b/html/creators.html @@ -0,0 +1,158 @@ + + + + + + OnlyPrompt - Discover Creators + + + + + + + + + +
+ + + +
+ +
+ +
+ + +
+

Discover Creators

+

Follow your favorite prompt artists and get inspired.

+
+ + +
+ + + + +
+ + +
+ + +
+ Sarah Jenkins +
+

Sarah Jenkins

+
@sarahj
+

AI Explorer | Prompt Curator | Exploring creativity through generative AI.

+
+ 42 prompts + 4.9 +
+ +
+
+ + +
+ Alex Chen +
+

Alex Chen

+
@alexchen
+

Digital artist & prompt engineer. Creating surreal landscapes.

+
+ 87 prompts + 4.8 +
+ +
+
+ + +
+ Mia Wong +
+

Mia Wong

+
@miawong
+

Midjourney master | UI/UX prompts | Design systems.

+
+ 124 prompts + 5.0 +
+ +
+
+ + +
+ Tom Rivera +
+

Tom Rivera

+
@tomrivera
+

3D artist | Character design | Sci-fi & fantasy prompts.

+
+ 33 prompts + 4.7 +
+ +
+
+ + +
+ Emma Watson +
+

Emma Watson

+
@emmawatson
+

Watercolor & pet portraits | Whimsical art prompts.

+
+ 56 prompts + 4.9 +
+ +
+
+ + +
+ Liam O'Brien +
+

Liam O'Brien

+
@liamob
+

Minimalist logo designer | Brand identity prompts.

+
+ 28 prompts + 4.6 +
+ +
+
+ +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/images/content/creator1.png b/images/content/creator1.png new file mode 100644 index 0000000..131423c Binary files /dev/null and b/images/content/creator1.png differ diff --git a/images/content/creator2.png b/images/content/creator2.png new file mode 100644 index 0000000..f4b0571 Binary files /dev/null and b/images/content/creator2.png differ diff --git a/images/content/creator4.png b/images/content/creator4.png new file mode 100644 index 0000000..b002bda Binary files /dev/null and b/images/content/creator4.png differ diff --git a/images/profil_cat.png b/images/profil_cat.png deleted file mode 100644 index 0ab3d84..0000000 Binary files a/images/profil_cat.png and /dev/null differ diff --git a/images/profile.png b/images/profile.png deleted file mode 100644 index b786126..0000000 Binary files a/images/profile.png and /dev/null differ