BRUTAL

MAGIC

Magic title code here:

/* ===== HTML + JS ===== */

<div class="kj-hero-title">
<h1>
<div class="kj-word">BRUTAL</div>
<div class="kj-word">MAGIC</div>
</h1>
</div>

// Mobile: se activa al tocar, se desactiva al soltar
document.querySelectorAll('.kj-word').forEach(word => {
word.addEventListener('touchstart', () => {
word.classList.add('kj-active');
}, { passive: true });

word.addEventListener('touchend', () => {
setTimeout(() => word.classList.remove('kj-active'), 150);
}, { passive: true });
});
</script>

/* ===== CSS ===== */

@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@700&display=swap');

/* Change --kj-ht-color (stroke), --kj-ht-hover (color in hover), --kj-ht-bg */
.kj-hero-title {
--kj-ht-bg: #030303 !important;
--kj-ht-color: #e0e0e0 !important;
--kj-ht-hover: #ccff00 !important;
background: var(--kj-ht-bg) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 60px 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}

.kj-hero-title h1 {
font-family: 'Syncopate', sans-serif !important;
font-size: clamp(48px, 16vw, 11vw) !important;
line-height: 0.85 !important;
text-transform: uppercase !important;
font-weight: 800 !important;
color: transparent !important;
-webkit-text-stroke: 2px var(--kj-ht-color) !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}

.kj-word {
display: block !important;
}

.kj-char {
display: inline-block !important;
transition: color 0.15s ease, -webkit-text-stroke 0.15s ease !important;
}

/* Desktop hover — char a char */
.kj-hero-title h1:hover .kj-char {
color: var(--kj-ht-hover) !important;
-webkit-text-stroke: 0px !important;
}

/* Mobile tap — toda la palabra */
.kj-word.kj-active .kj-char {
color: var(--kj-ht-hover) !important;
-webkit-text-stroke: 0px !important;
}

TESTIMONIAL CAROUSEL!

What students are saying

"I went from complete beginner to selling my first painting in 6 weeks."

— Sofia R., Illustrator

"My Spanish went from A2 to B2 in 4 months. Unreal results."

— James L., Language Learner

"Finally a course that doesn't talk down to you. Pure gold."

— Mia T., Digital Artist

"I've taken 5 online courses. This is the only one I finished."

— Carlos M., Student

"The community alone is worth 10x the price of the course."

— Elena B., Artist

"I went from complete beginner to selling my first painting in 6 weeks."

— Sofia R., Illustrator

"My Spanish went from A2 to B2 in 4 months. Unreal results."

— James L., Language Learner

"Finally a course that doesn't talk down to you. Pure gold."

— Mia T., Digital Artist

"I've taken 5 online courses. This is the only one I finished."

— Carlos M., Student

"The community alone is worth 10x the price of the course."

— Elena B., Artist

Testimonial code here:

/* ===== HTML ===== */

<section class="kj-marquee-section">
<h1 class="kj-marquee-label">What students are saying</h1>
<div class="kj-marquee-wrapper">
<div class="kj-marquee-track">

<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=1" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"I went from complete beginner to selling my first painting in 6 weeks."</p>
<span class="kj-marquee-name">— Sofia R., Illustrator</span>
</div>
</div>

<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=5" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"My Spanish went from A2 to B2 in 4 months. Unreal results."</p>
<span class="kj-marquee-name">— James L., Language Learner</span>
</div>
</div>

<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=9" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"Finally a course that doesn't talk down to you. Pure gold."</p>
<span class="kj-marquee-name">— Mia T., Digital Artist</span>
</div>
</div>

<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=12" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"I've taken 5 online courses. This is the only one I finished."</p>
<span class="kj-marquee-name">— Carlos M., Student</span>
</div>
</div>

<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=20" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"The community alone is worth 10x the price of the course."</p>
<span class="kj-marquee-name">— Elena B., Artist</span>
</div>
</div>

<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=1" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"I went from complete beginner to selling my first painting in 6 weeks."</p>
<span class="kj-marquee-name">— Sofia R., Illustrator</span>
</div>
</div>
<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=5" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"My Spanish went from A2 to B2 in 4 months. Unreal results."</p>
<span class="kj-marquee-name">— James L., Language Learner</span>
</div>
</div>
<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=9" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"Finally a course that doesn't talk down to you. Pure gold."</p>
<span class="kj-marquee-name">— Mia T., Digital Artist</span>
</div>
</div>
<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=12" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"I've taken 5 online courses. This is the only one I finished."</p>
<span class="kj-marquee-name">— Carlos M., Student</span>
</div>
</div>
<div class="kj-marquee-card">
<img src="https://i.pravatar.cc/80?img=20" alt="Student" class="kj-marquee-avatar">
<div>
<p class="kj-marquee-quote">"The community alone is worth 10x the price of the course."</p>
<span class="kj-marquee-name">— Elena B., Artist</span>
</div>
</div>

</div>
</div>
</section>

/* ===== CSS ===== */
/* Palette: cambiá --kj-m-bg, --kj-m-accent */
.kj-marquee-section {
--kj-m-bg: #0e0e0e !important;
--kj-m-card: #1a1a1a !important;
--kj-m-accent: #e8c87a !important;
--kj-m-text: #f0ede8 !important;
--kj-m-muted: #888 !important;
background: var(--kj-m-bg) !important;
padding: 60px 0 !important;
overflow: hidden !important;
font-family: 'DM Sans', sans-serif !important;
}

.kj-marquee-label {
text-align: center !important;
font-family: 'Playfair Display', serif !important;
font-style: italic !important;
font-size: 16px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--kj-m-accent) !important;
margin-bottom: 36px !important;
}

.kj-marquee-wrapper {
overflow: hidden !important;
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%) !important;
}

.kj-marquee-track {
display: flex !important;
gap: 20px !important;
width: max-content !important;
animation: kj-scroll 40s linear infinite !important;
}

.kj-marquee-track:hover {
animation-play-state: paused !important;
}

@keyframes kj-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

.kj-marquee-card {
background: var(--kj-m-card) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
border-radius: 16px !important;
padding: 24px 28px !important;
width: 370px !important;
height:180px;!important
flex-shrink: 0 !important;
display: flex !important;
gap: 16px !important;
align-items: flex-start !important;
}

.kj-marquee-avatar {
width: 58px !important;
height: 58px !important;
border-radius: 50% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
border: 2px solid var(--kj-m-accent) !important;
}

.kj-marquee-quote {
font-size: 16px !important;
line-height: 1.6 !important;
color: var(--kj-m-text) !important;
margin: 0 0 10px 0 !important;
font-family: 'DM Sans', sans-serif !important;
}

.kj-marquee-name {
font-size: 12px !important;
color: var(--kj-m-muted) !important;
font-family: 'DM Sans', sans-serif !important;
}

Text background 1

Most people don't fail because they lack talent. They fail because nobody ever showed them the right path. This course is that path.

Box Left color code here

Elegant text container

The promise

By the end of this course, you will have a finished piece you're proud of — and the tools to keep creating on your own.

Elegant box code here:

Bento grid

Master Fire & Water

Learn professional digital painting techniques.

8 Hours of Content

Step-by-step walkthroughs

25+ Brushes

Lifetime Access

Private Community

Connect with fellow artists

All Devices

Desktop, tablet, mobile

Bento grid code here:

Link for the icons: SVG Repo - Free SVG Vectors and Icons

The idea is to search for icons and reeplace them in the HTML code

/* ==HTML== */

<div class="bento-box bento-box-1">
<div class="bento-content">
<span class="bento-icon">

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 3l3 6l6 3l-6 3l-3 6l-3-6l-6-3l6-3z"/>
</svg>
</span>
<h3 class="bento-title">Master Fire & Water</h3>
<p class="bento-text">Learn professional digital painting techniques.</p>
</div>
</div>

<div class="bento-box bento-box-2">
<div class="bento-content">
<span class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M13 2L3 14h7l-1 8l10-12h-7z"/>
</svg>
</span>
<h3 class="bento-title">8 Hours of Content</h3>
<p class="bento-text">Step-by-step walkthroughs</p>
</div>
</div>

<div class="bento-box bento-box-3">
<div class="bento-content">
<span class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 2c2 3 4 5 4 8a4 4 0 1 1-8 0c0-3 2-5 4-8z"/>
</svg>
</span>
<h3 class="bento-title">25+ Brushes</h3>
</div>
</div>

<div class="bento-box bento-box-4">
<div class="bento-content">
<span class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 3l3 6l6 1l-4 4l1 7l-6-3l-6 3l1-7l-4-4l6-1z"/>
</svg>
</span>
<h3 class="bento-title">Lifetime Access</h3>
</div>
</div>

<div class="bento-box bento-box-5">
<div class="bento-content">
<span class="bento-icon">
<svg fill="#000000" viewBox="0 0 128 128" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M64,42c-13.2,0-24,10.8-24,24s10.8,24,24,24s24-10.8,24-24S77.2,42,64,42z M64,82c-8.8,0-16-7.2-16-16s7.2-16,16-16 s16,7.2,16,16S72.8,82,64,82z"></path> <path d="M64,100.8c-14.9,0-29.2,6.2-39.4,17.1l-2.7,2.9l5.8,5.5l2.7-2.9c8.8-9.4,20.7-14.6,33.6-14.6s24.8,5.2,33.6,14.6l2.7,2.9 l5.8-5.5l-2.7-2.9C93.2,107.1,78.9,100.8,64,100.8z"></path> <path d="M97,47.9v8c9.4,0,18.1,3.8,24.6,10.7l5.8-5.5C119.6,52.7,108.5,47.9,97,47.9z"></path> <path d="M116.1,20c0-10.5-8.6-19.1-19.1-19.1S77.9,9.5,77.9,20S86.5,39.1,97,39.1S116.1,30.5,116.1,20z M85.9,20 c0-6.1,5-11.1,11.1-11.1s11.1,5,11.1,11.1s-5,11.1-11.1,11.1S85.9,26.1,85.9,20z"></path> <path d="M31,47.9c-11.5,0-22.6,4.8-30.4,13.2l5.8,5.5c6.4-6.9,15.2-10.7,24.6-10.7V47.9z"></path> <path d="M50.1,20C50.1,9.5,41.5,0.9,31,0.9S11.9,9.5,11.9,20S20.5,39.1,31,39.1S50.1,30.5,50.1,20z M31,31.1 c-6.1,0-11.1-5-11.1-11.1S24.9,8.9,31,8.9s11.1,5,11.1,11.1S37.1,31.1,31,31.1z"></path> </g> </g></svg>
</span>
<h3 class="bento-title">Private Community</h3>
<p class="bento-text">Connect with fellow artists</p>
</div>
</div>

<div class="bento-box bento-box-6">
<div class="bento-content">
<span class="bento-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
<rect x="7" y="2" width="10" height="20" rx="2"/>
<line x1="11" y1="18" x2="13" y2="18"/>
</svg>
</span>
<h3 class="bento-title">All Devices</h3>
<p class="bento-text">Desktop, tablet, mobile</p>
</div>
</div>

</div>

/* ==CSS== */

/* =====================================================
BENTO BOX GRID (Mobile-first + SVG Icons - Kajabi Safe)
===================================================== */

/* ===== VARIABLES EDITABLES ===== */
.bento-grid {
--bento-gap: 16px;
--bento-bg: #ffffff;
--bento-border: #e5e7eb;
--bento-hover: #6366f1;

/* ICONOS */
--bento-icon-color: #111;
--bento-icon-hover: #6366f1;
--bento-icon-size: 32px;

display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--bento-gap) !important;
padding: 16px !important;
}

/* ===== BOX ===== */
.bento-box {
background: var(--bento-bg) !important;
border: 1px solid var(--bento-border) !important;
border-radius: 16px !important;
padding: 24px !important;
transition: all 0.3s ease !important;
}

/* ===== CONTENT ===== */
.bento-content {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}

/* ===== ICONOS (SVG REAL) ===== */
.bento-icon svg {
width: var(--bento-icon-size) !important;
height: var(--bento-icon-size) !important;
stroke: var(--bento-icon-color) !important;
stroke-width: 2 !important;
display: block !important;
margin-bottom: 12px !important;
transition: all 0.3s ease !important;
}

/* ===== TEXT ===== */
.bento-title {
font-size: 20px !important;
font-weight: 700 !important;
margin: 0 !important;
color: #1f2937 !important;
}

.bento-text {
font-size: 14px !important;
color: #6b7280 !important;
margin: 0 !important;
}

/* ===== HOVER (desktop) ===== */
.bento-box:hover {
transform: translateY(-4px) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

.bento-box:hover .bento-icon svg {
stroke: var(--bento-icon-hover) !important;
transform: scale(1.1);
}

/* ===== TAP (mobile) ===== */
.bento-box:active {
transform: scale(0.98) !important;
}

.bento-box:active .bento-icon svg {
transform: scale(0.95);
}

/* ===== TABLET ===== */
@media (min-width: 768px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}

/* ===== DESKTOP ===== */
@media (min-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(4, 1fr) !important;
max-width: 1200px !important;
margin: 40px auto !important;
}

.bento-box-1 {
grid-column: span 2 !important;
grid-row: span 2 !important;
}

.bento-box-2,
.bento-box-5,
.bento-box-6 {
grid-column: span 2 !important;
}
}

Auto written heading

Auto written code here:

Slide reveal image cards

Outcome 01

Paint Confidently

Create portraits inspired by anatomy, light and shadow — capturing a true likeness with technical ease.

Outcome 02

Observe Fresh

Shapes and textures become your guide as you learn to observe and translate them onto the canvas.

Outcome 03

Playfully Explore

Your portraits become a space to experiment, develop your style and fall in love with watercolor.

Slide reveal image code here:

.reveal-card {
position: relative;
border-radius: 16px;
overflow: hidden;
cursor: pointer;
}

/* ===== IMAGE ===== */
.reveal-card img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}

.reveal-card:hover img {
transform: scale(1.05);
}

/* ===== OVERLAY ===== */
.reveal-overlay {
position: absolute;
inset: 0;
background: #2a5f7a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 20px;
text-align: center;
transform: translateY(100%);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-card:hover .reveal-overlay {
transform: translateY(0);
}

/* ===== TEXT ===== */
.reveal-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #9fe1cb;
margin-bottom: 40px;
}

.reveal-title {
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 700;
color: #f5f0e8;
margin-bottom: 10px;
}

.reveal-desc {
font-size: 12px;
color: rgba(245,240,232,0.7);
line-height: 1.65;
}

/* =====================================================
✨ GLOW + SHIMMER
===================================================== */

.reveal-card::after {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), transparent 60%);
opacity: 0.6;
animation: pulse-glow 3s ease-in-out infinite;
}

.reveal-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.25),
transparent
);
transform: skewX(-20deg);
animation: shimmer 2.8s infinite;
pointer-events: none;
}

.reveal-card:hover::before,
.reveal-card:hover::after {
opacity: 0;
animation: none;
}

@keyframes shimmer {
0% { left: -100%; }
100% { left: 150%; }
}

@keyframes pulse-glow {
0%,100% { opacity: 0.4; }
50% { opacity: 0.8; }
}

/* =====================================================
🖱️ CURSOR HINT (TRENDY)
===================================================== */

.reveal-card .cursor-hint {
position: absolute;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.7);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0.9;
animation: float 2.5s ease-in-out infinite;
}

/* Lo centramos automáticamente */
.reveal-card {
display: flex;
align-items: center;
justify-content: center;
}

/* Flecha simple */
.reveal-card .cursor-hint::after {
content: "›";
font-size: 20px;
color: #fff;
transform: rotate(90deg);
}

/* Hover = desaparece */
.reveal-card:hover .cursor-hint {
opacity: 0;
transform: scale(0.8);
}

@keyframes float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}

/* =====================================================
📱 MOBILE
===================================================== */

@media (max-width: 768px) {

.reveal-overlay {
transform: translateY(70%);
}

.reveal-card:active .reveal-overlay {
transform: translateY(0);
}

.reveal-card .cursor-hint {
width: 36px;
height: 36px;
opacity: 0.7;
}
}

@media (max-width: 560px) {
.reveal-grid { grid-template-columns: 1fr; }
.reveal-card img { height: 200px; }
}
</style>

<div class="reveal-card">
<img src="https://img.ge/i/bDrUy37.png" alt="Paint Confidently"/>
<div class="reveal-overlay">
<div class="reveal-tag">Outcome 01</div>
<div class="reveal-title">Paint Confidently</div>
<div class="reveal-desc">Create portraits inspired by anatomy, light and shadow — capturing a true likeness with technical ease.</div>
</div>
</div>

<div class="reveal-card">
<img src="https://img.ge/i/FRgwY25.png" alt="Observe Fresh"/>
<div class="reveal-overlay" style="background:#1a3a4a">
<div class="reveal-tag">Outcome 02</div>
<div class="reveal-title">Observe Fresh</div>
<div class="reveal-desc">Shapes and textures become your guide as you learn to observe and translate them onto the canvas.</div>
</div>
</div>

<div class="reveal-card">
<img src="https://img.ge/i/ASBJQ31.png" alt="Playfully Explore"/>
<div class="reveal-overlay" style="background:#2a5f7a">
<div class="reveal-tag">Outcome 03</div>
<div class="reveal-title">Playfully Explore</div>
<div class="reveal-desc">Your portraits become a space to experiment, develop your style and fall in love with watercolor.</div>
</div>
</div>

</div>

the rotating gradient border

🎨

Paint Confidently

Create portraits inspired by anatomy, light and shadow — capturing a true likeness with technical ease.

👁️

Observe Fresh

Shapes and textures become your guide as you learn to observe and translate them onto the canvas.

✨

Playfully Explore

Your portraits become a space to experiment, develop your personal style and fall in love with watercolor.

Rotating gradient border code here:

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&display=swap" rel="stylesheet"/>

/* The gradient wrap acts as the border */
.gc-wrap {
padding: 2px;
border-radius: 18px;
transition: transform 0.2s, box-shadow 0.2s;
cursor: default;
}

.gc-wrap:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(42,95,122,0.15);
}

/* Inner card sits on top of the gradient border */
.gc-inner {
background: #f5f0e8;
border-radius: 16px;
padding: 28px 20px;
text-align: center;
height: 100%;
}

.gc-icon {
font-size: 28px;
margin-bottom: 14px;
display: block;
}

.gc-title {
font-family: 'Playfair Display', serif;
font-size: 16px;
font-weight: 700;
color: #1a3a4a;
margin-bottom: 8px;
}

.gc-desc {
font-size: 13px;
color: #5a7a8a;
line-height: 1.65;
}

/* Responsive */
@media (max-width: 560px) {
.gc-grid { grid-template-columns: 1fr; }
}
</style>

<div class="gc-wrap" style="background: linear-gradient(135deg, #2a5f7a, #9fe1cb);">
<div class="gc-inner">
<span class="gc-icon">🎨</span>
<div class="gc-title">Paint Confidently</div>
<div class="gc-desc">Create portraits inspired by anatomy, light and shadow — capturing a true likeness with technical ease.</div>
</div>
</div>

<div class="gc-wrap" style="background: linear-gradient(135deg, #9fe1cb, #f5c4b3);">
<div class="gc-inner">
<span class="gc-icon">👁️</span>
<div class="gc-title">Observe Fresh</div>
<div class="gc-desc">Shapes and textures become your guide as you learn to observe and translate them onto the canvas.</div>
</div>
</div>

<div class="gc-wrap" style="background: linear-gradient(135deg, #f5c4b3, #2a5f7a);">
<div class="gc-inner">
<span class="gc-icon">✨</span>
<div class="gc-title">Playfully Explore</div>
<div class="gc-desc">Your portraits become a space to experiment, develop your personal style and fall in love with watercolor.</div>
</div>
</div>

</div>

Paint stroke effect

Mastering watercolor portraits is a natural gift

Maybe you think artists who create lifelike portraits are just naturally gifted. Maybe you’ve told yourself, “I don’t have the technical eye to paint a face.”

But here’s the truth: watercolor portraiture is a structured process not magic.

You don’t need to be a “natural” to start. You need clear guidance, and the confidence to lay down your first wash.

BRUTAL

MAGIC

Magic title code here:

TESTIMONIAL CAROUSEL!

What students are saying

Testimonial code here:

Text background 1

Box Left color code here

Elegant text container

Elegant box code here:

Bento grid

Master Fire & Water

8 Hours of Content

25+ Brushes

Lifetime Access

Private Community

All Devices

Bento grid code here:

Auto written heading

Auto written code here:

Slide reveal image cards

Slide reveal image code here:

the rotating gradient border

Rotating gradient border code here:

Paint stroke effect

Mastering watercolor portraits is a natural gift

Your Accordion Heading Goes Here

Join Our Free Trial

BRUTAL MAGIC

Magic title code here:

TESTIMONIAL CAROUSEL!

What students are saying

Testimonial code here:

Text background 1

Box Left color code here

Elegant text container

Elegant box code here:

Bento grid

Master Fire & Water

8 Hours of Content

25+ Brushes

Lifetime Access

Private Community

All Devices

Bento grid code here:

Auto written heading

Auto written code here:

Slide reveal image cards

Slide reveal image code here:

the rotating gradient border

Rotating gradient border code here:

Paint stroke effect

Mastering watercolor portraits is a natural gift

Your Accordion Heading Goes Here

Join Our Free Trial

BRUTAL

MAGIC