\n \n {currentPage === 'features' ? (\n \n ) : (\n \n )}\n \n setCurrentPage(page)} \n />\n \n );\n}",[],[175,182,189],{"_104":198,"_97":199,"_148":200,"_150":183,"_151":137,"_152":201,"_154":119,"_106":202,"_101":33,"_156":193,"_158":203,"_159":27,"_160":-5,"_161":204,"_100":205},"bf1f7e0e-0822-11f0-a9de-569c3dd06744","CourseDetailsPage.tsx","bf1f7ec2-0822-11f0-a9de-569c3dd06744",14,["D",1742760577684],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function CourseDetailsPage() {\n return (\n

\n {/* Hero Section */}\n

The Art of Visual Design

(Elizabeth's Version)

An ✨ all-inclusive ✨ fun and comprehensive journey into the world of visual design principles and practices.

\n \n {/* Testimonial Card */}\n

NEW MESSAGE FROM MICHELLE!

This course completely transformed how I approach design! Elizabeth's teaching style is engaging and the projects are both challenging and fun. I've already applied what I learned to my professional work and received amazing feedback. Highly recommend to anyone looking to level up their visual design skills!

\n \n {/* What Is Section */}\n

What is The Art of Visual Design?

Course Introduction Video

\n );\n}",[],[175,182,199],{"_104":207,"_97":208,"_148":209,"_150":183,"_151":137,"_152":210,"_154":119,"_106":211,"_101":33,"_156":193,"_158":212,"_159":27,"_160":-5,"_161":213,"_100":214},"b59186de-0822-11f0-875f-569c3dd06744","FeaturesPage.tsx","b591879c-0822-11f0-875f-569c3dd06744",13,["D",1742760561655],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function FeaturesPage() {\n return (\n

\n {/* Hero Section */}\n

In The Art of Visual Design, you will...

\n \n {/* Features Grid */}\n

\n {/* Feature 1 */}\n

No. 1

Discover your personal aesthetic!

Through guided exercises and creative exploration, you'll uncover your unique design sensibilities and learn how to express your individual style in every project.

\n \n {/* Feature Image (Center) */}\n

Cruella's Ball

June 1st at 9pm

\n Cruella\n

\n \n {/* Feature 2 */}\n

No. 2

Get inspo from art & design history!

We'll explore influential movements and creators throughout history, connecting their innovations to contemporary design practices.

\n \n {/* Feature 3 */}\n

No. 3

Not be bored!

Design is about practice and iteration. We'll keep things engaging with varied exercises and real-world applications that make learning both fun and practical.

\n \n {/* Feature 4 */}\n

No. 4

Analyze your work critically!

Learn to evaluate designs with the discerning eye of Miranda Priestly, developing the critical thinking skills essential for professional growth.

\n );\n}",[],[175,182,208],{"_104":216,"_97":217,"_148":218,"_150":183,"_151":137,"_152":219,"_154":119,"_106":220,"_101":33,"_156":193,"_158":221,"_159":27,"_160":-5,"_161":222,"_100":223},"a93ed468-0822-11f0-876e-569c3dd06744","Header.tsx","a93ed5b2-0822-11f0-876e-569c3dd06744",11,["D",1742760540980],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function Header() {\n return (\n

\n Login\n Enroll now\n

\n );\n}",[],[175,182,217],{"_104":225,"_97":226,"_148":227,"_150":183,"_151":137,"_152":228,"_154":119,"_106":229,"_101":33,"_156":193,"_158":230,"_159":27,"_160":-5,"_161":231,"_100":232},"ac7c261c-0822-11f0-9ea4-569c3dd06744","PageNav.tsx","ac7c26d0-0822-11f0-9ea4-569c3dd06744",12,["D",1742760546416],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface PageNavProps {\n currentPage: 'features' | 'details';\n onChangePage: (page: 'features' | 'details') => void;\n}\n\nexport function PageNav({ currentPage, onChangePage }: PageNavProps) {\n return (\n

\n \n \n

\n );\n}",[],[175,182,226],[175,182],{"_104":235,"_97":236,"_148":237,"_150":176,"_151":137,"_152":238,"_154":119,"_106":239,"_101":33,"_156":240,"_158":241,"_159":27,"_160":-5,"_161":242,"_100":243},"a155e746-0822-11f0-9ea4-569c3dd06744","favicon.svg","a155e7fa-0822-11f0-9ea4-569c3dd06744",9,["D",1742760527710],"file","",[],[175,236],{"_104":245,"_97":246,"_148":247,"_150":176,"_151":137,"_152":248,"_154":119,"_106":249,"_101":167,"_156":240,"_158":250,"_159":27,"_160":-5,"_161":251,"_100":252},"8e627898-0822-11f0-be08-569c3dd06744","index.html","697ed12c-0820-11f0-84fc-569c3dd06744",7,["D",1742760495913],"\n\n \n \n \n The Art of Visual Design\n \n \n \n \n \n \n

\n \n \n \n",[],[175,246],{"_104":254,"_97":255,"_148":256,"_150":176,"_151":137,"_152":177,"_154":119,"_106":257,"_101":33,"_156":193,"_158":258,"_159":27,"_160":-5,"_161":259,"_100":260},"696cedc2-0820-11f0-a19f-569c3dd06744","index.tsx","696cee4e-0820-11f0-a19f-569c3dd06744",["D",1742759574911],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[175,255],{"_104":262,"_97":263,"_148":264,"_150":176,"_151":137,"_152":265,"_154":119,"_106":266,"_101":33,"_156":240,"_158":267,"_159":27,"_160":-5,"_161":268,"_100":269},"9ecaeac6-0822-11f0-b4b6-569c3dd06744","style.css","9ecaeb52-0822-11f0-b4b6-569c3dd06744",8,["D",1742760523444],"/* Reset and Base Styles */\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n font-size: 1rem;\n line-height: 1.6;\n color: #FFFFFF;\n overflow-x: hidden;\n}\n\n/* Color Schemes */\n.primary-bg {\n background: linear-gradient(135deg, #9c27b0 0%, #3f51b5 100%);\n min-height: 100vh;\n}\n\n.secondary-bg {\n background: linear-gradient(135deg, #e91e63 0%, #9c27b0 50%, #3f51b5 100%);\n min-height: 100vh;\n}\n\n/* Typography */\nh1, h2, h3, h4, h5, h6 {\n font-family: 'Playfair Display', serif;\n font-weight: 700;\n}\n\n.main-title {\n font-size: 5rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n text-align: center;\n}\n\n.section-title {\n font-size: 3rem;\n font-weight: 700;\n}\n\n.subheading {\n font-size: 2rem;\n font-weight: normal;\n}\n\n.italic-heading {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n}\n\n/* Layout */\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 2rem;\n}\n\n.section {\n margin-bottom: 5rem;\n}\n\n/* Buttons */\n.btn {\n background-color: #000000;\n color: #FFFFFF;\n padding: 0.75rem 2rem;\n border: none;\n border-radius: 2rem;\n font-family: 'Roboto', sans-serif;\n font-weight: 500;\n cursor: pointer;\n text-decoration: none;\n display: inline-block;\n transition: all 0.3s ease;\n}\n\n.btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n}\n\n/* Cards */\n.card {\n background-color: #000000;\n border-radius: 0.5rem;\n padding: 2rem;\n color: #FFFFFF;\n}\n\n/* Header */\nheader {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n padding: 1rem;\n z-index: 100;\n display: flex;\n justify-content: flex-end;\n gap: 1rem;\n}\n\n/* Hero Section */\n.hero {\n padding: 6rem 0 4rem;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 80vh;\n}\n\n.hero-title-underline {\n width: 200px;\n height: 1px;\n background-color: #FFFFFF;\n margin: 2rem auto;\n}\n\n/* Features Grid */\n.features-grid {\n display: grid;\n grid-template-columns: 1fr 2fr 1fr;\n grid-template-rows: auto auto;\n gap: 2rem;\n margin-top: 4rem;\n}\n\n.feature {\n padding: 1.5rem;\n}\n\n.feature-number {\n font-family: 'Playfair Display', serif;\n font-size: 1.2rem;\n margin-bottom: 0.5rem;\n}\n\n.feature-title {\n font-family: 'Playfair Display', serif;\n font-size: 1.8rem;\n margin-bottom: 1rem;\n}\n\n.feature-image {\n grid-column: 2;\n grid-row: 1 / span 2;\n background-color: #000000;\n padding: 2rem;\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.feature-image-content {\n border: 3px solid #FF4500;\n padding: 2rem;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n}\n\n.feature-image-title {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: 2.5rem;\n}\n\n.feature-image-subtitle {\n font-family: 'Roboto', sans-serif;\n font-size: 1.2rem;\n margin-bottom: 2rem;\n}\n\n.dalmatian-image {\n width: 200px;\n height: 200px;\n background-color: white;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 2rem;\n}\n\n.dalmatian-image::before {\n content: \"🐶\";\n font-size: 100px;\n}\n\n.badge {\n background-color: rgba(128, 128, 128, 0.5);\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n}\n\n/* Pixel Art Smiley */\n.pixel-smiley {\n width: 50px;\n height: 50px;\n background-color: white;\n position: relative;\n margin: 1rem 0;\n}\n\n.pixel-smiley::before {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: black;\n top: 15px;\n left: 10px;\n box-shadow: 20px 0 0 0 black, 10px 15px 0 0 black;\n}\n\n/* Testimonial Card */\n.testimonial-card {\n position: absolute;\n top: 120px;\n right: 5%;\n width: 350px;\n background-color: white;\n color: black;\n border: 3px solid #FF00FF;\n border-radius: 0.5rem;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n}\n\n.testimonial-header {\n background-color: #FF00FF;\n color: white;\n padding: 1rem;\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.profile-pic {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.profile-pic::before {\n content: \"👩\";\n font-size: 30px;\n}\n\n.testimonial-content {\n padding: 1.5rem;\n}\n\n.what-is-section {\n margin-top: 3rem;\n}\n\n.video-placeholder {\n background-color: rgba(255, 255, 255, 0.1);\n border-radius: 0.5rem;\n height: 400px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 2rem;\n}\n\n/* Navigation between pages */\n.page-nav {\n position: fixed;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 1rem;\n z-index: 100;\n}",[],[175,263],[175],{"_104":272,"_97":273,"_148":274,"_150":-5,"_151":137,"_152":167,"_154":119,"_106":275,"_101":33,"_156":240,"_158":276,"_159":27,"_160":-5,"_161":277,"_100":278},"6963f8fc-0820-11f0-b58f-569c3dd06744","README.md","6963f9b0-0820-11f0-b58f-569c3dd06744",["D",1742759574854],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[],[273],{"_104":280,"_97":246,"_148":281,"_150":-5,"_151":137,"_152":282,"_154":119,"_106":283,"_101":33,"_156":240,"_158":284,"_159":27,"_160":-5,"_161":285,"_100":286},"5f770eb8-0822-11f0-b788-569c3dd06744","5f770f4e-0822-11f0-b788-569c3dd06744",6,["D",1742760417198],"\n\n\n \n \n The Art of Visual Design\n \n \n \n \n \n\n\n \n

\n Login\n Enroll now\n

\n \n \n

\n \n

In The Art of Visual Design, you will...

\n \n \n

\n \n

No. 1

Discover your personal aesthetic!

Through guided exercises and creative exploration, you'll uncover your unique design sensibilities and learn how to express your individual style in every project.

\n \n \n

Cruella's Ball

June 1st at 9pm

\n Cruella\n

\n \n \n

No. 2

Get inspo from art & design history!

We'll explore influential movements and creators throughout history, connecting their innovations to contemporary design practices.

\n \n \n

No. 3

Not be bored!

Design is about practice and iteration. We'll keep things engaging with varied exercises and real-world applications that make learning both fun and practical.

\n \n \n

No. 4

Analyze your work critically!

Learn to evaluate designs with the discerning eye of Miranda Priestly, developing the critical thinking skills essential for professional growth.

\n \n \n

\n \n

The Art of Visual Design

(Elizabeth's Version)

An ✨ all-inclusive ✨ fun and comprehensive journey into the world of visual design principles and practices.

\n \n \n

NEW MESSAGE FROM MICHELLE!

\n \n \n

What is The Art of Visual Design?

Course Introduction Video

\n \n \n

\n \n \n\n",[],[246],"files",[145,163,173,180,187,197,206,215,224,234,244,253,261,271,279],"counts",{"_291":33,"_292":167,"_293":33,"_294":33},"pulls","branches","forks","envVars","contents",[297,300,303,306],{"_104":146,"_97":147,"_148":149,"_150":-5,"_151":137,"_152":153,"_154":119,"_106":298,"_101":33,"_156":157,"_158":-5,"_159":27,"_160":-5,"_100":299},["D",1742759574981],[147],{"_104":174,"_97":175,"_148":176,"_150":-5,"_151":137,"_152":177,"_154":119,"_106":301,"_101":33,"_156":157,"_158":-5,"_159":27,"_160":-5,"_100":302},["D",1742759574911],[175],{"_104":272,"_97":273,"_148":274,"_150":-5,"_151":137,"_152":167,"_154":119,"_106":304,"_101":33,"_156":240,"_158":276,"_159":27,"_160":-5,"_100":305},["D",1742759574854],[273],{"_104":280,"_97":246,"_148":281,"_150":-5,"_151":137,"_152":282,"_154":119,"_106":307,"_101":33,"_156":240,"_158":284,"_159":27,"_160":-5,"_100":308},["D",1742760417198],[246],"upstream","screenshots","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_95":96,"_97":98,"_99":43,"_102":315,"_319":320,"_412":33,"_413":27},{"_104":105,"_97":98,"_106":316,"_108":-5,"_109":27,"_110":111,"_112":113,"_114":-5,"_12":115,"_116":117,"_118":119,"_120":-5,"_121":33,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":27,"_21":317,"_134":318},["D",1742759574747],{"_95":96,"_132":133},{"_101":136,"_97":43,"_104":137,"_138":105,"_139":-5,"_140":-5,"_141":-5,"_142":-5},"history",[321,326,331,336,341,346,351,356,361,366,371,381,389,399,407],{"_148":117,"_101":136,"_106":322,"_151":137,"_287":323},["D",1742760595522],[324],{"_104":164,"_151":137,"_148":117,"_97":165,"_158":169,"_156":168,"_101":167,"_150":149,"_106":322,"_152":136,"_160":-5,"_154":119,"_159":27,"_100":325},[147,165],{"_148":200,"_101":201,"_106":327,"_151":137,"_287":328},["D",1742760577684],[329],{"_104":198,"_151":137,"_148":200,"_97":199,"_158":203,"_156":193,"_101":33,"_150":183,"_106":327,"_152":201,"_160":-5,"_154":119,"_159":27,"_100":330},[175,182,199],{"_148":209,"_101":210,"_106":332,"_151":137,"_287":333},["D",1742760561655],[334],{"_104":207,"_151":137,"_148":209,"_97":208,"_158":212,"_156":193,"_101":33,"_150":183,"_106":332,"_152":210,"_160":-5,"_154":119,"_159":27,"_100":335},[175,182,208],{"_148":227,"_101":228,"_106":337,"_151":137,"_287":338},["D",1742760546416],[339],{"_104":225,"_151":137,"_148":227,"_97":226,"_158":230,"_156":193,"_101":33,"_150":183,"_106":337,"_152":228,"_160":-5,"_154":119,"_159":27,"_100":340},[175,182,226],{"_148":218,"_101":219,"_106":342,"_151":137,"_287":343},["D",1742760540980],[344],{"_104":216,"_151":137,"_148":218,"_97":217,"_158":221,"_156":193,"_101":33,"_150":183,"_106":342,"_152":219,"_160":-5,"_154":119,"_159":27,"_100":345},[175,182,217],{"_148":190,"_101":191,"_106":347,"_151":137,"_287":348},["D",1742760535899],[349],{"_104":188,"_151":137,"_148":190,"_97":189,"_158":194,"_156":193,"_101":167,"_150":183,"_106":347,"_152":191,"_160":-5,"_154":119,"_159":27,"_100":350},[175,182,189],{"_148":237,"_101":238,"_106":352,"_151":137,"_287":353},["D",1742760527710],[354],{"_104":235,"_151":137,"_148":237,"_97":236,"_158":241,"_156":240,"_101":33,"_150":176,"_106":352,"_152":238,"_160":-5,"_154":119,"_159":27,"_100":355},[175,236],{"_148":264,"_101":265,"_106":357,"_151":137,"_287":358},["D",1742760523444],[359],{"_104":262,"_151":137,"_148":264,"_97":263,"_158":267,"_156":240,"_101":33,"_150":176,"_106":357,"_152":265,"_160":-5,"_154":119,"_159":27,"_100":360},[175,263],{"_148":247,"_101":248,"_106":362,"_151":137,"_287":363},["D",1742760495913],[364],{"_104":245,"_151":137,"_148":247,"_97":246,"_158":250,"_156":240,"_101":167,"_150":176,"_106":362,"_152":248,"_160":-5,"_154":119,"_159":27,"_100":365},[175,246],{"_148":281,"_101":282,"_106":367,"_151":137,"_287":368},["D",1742760417198],[369],{"_104":280,"_151":137,"_148":281,"_97":246,"_158":284,"_156":240,"_101":33,"_150":-5,"_106":367,"_152":282,"_160":-5,"_154":119,"_159":27,"_100":370},[246],{"_148":190,"_101":184,"_106":372,"_151":137,"_287":373},["D",1742759575085],[374,378],{"_104":375,"_151":137,"_148":190,"_97":189,"_158":376,"_156":193,"_101":33,"_150":183,"_106":372,"_152":184,"_160":-5,"_154":27,"_159":27,"_100":377},"69879a46-0820-11f0-9fb5-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[175,182,189],{"_104":181,"_151":137,"_148":183,"_97":182,"_158":-5,"_156":157,"_101":33,"_150":176,"_106":379,"_152":184,"_160":-5,"_154":119,"_159":27,"_100":380},["D",1742759575085],[175,182],{"_148":247,"_101":382,"_106":383,"_151":137,"_287":384},4,["D",1742759575033],[385],{"_104":386,"_151":137,"_148":247,"_97":246,"_158":387,"_156":240,"_101":33,"_150":176,"_106":383,"_152":382,"_160":-5,"_154":27,"_159":27,"_100":388},"697ed082-0820-11f0-84fc-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[175,246],{"_148":117,"_101":153,"_106":390,"_151":137,"_287":391},["D",1742759574981],[392,396],{"_104":393,"_151":137,"_148":117,"_97":165,"_158":394,"_156":168,"_101":33,"_150":149,"_106":390,"_152":153,"_160":-5,"_154":27,"_159":27,"_100":395},"697754d8-0820-11f0-baab-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@64-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err, c) => {\n throw err;\n});\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[147,165],{"_104":146,"_151":137,"_148":149,"_97":147,"_158":-5,"_156":157,"_101":33,"_150":-5,"_106":397,"_152":153,"_160":-5,"_154":119,"_159":27,"_100":398},["D",1742759574981],[147],{"_148":256,"_101":177,"_106":400,"_151":137,"_287":401},["D",1742759574911],[402,404],{"_104":254,"_151":137,"_148":256,"_97":255,"_158":258,"_156":193,"_101":33,"_150":176,"_106":400,"_152":177,"_160":-5,"_154":119,"_159":27,"_100":403},[175,255],{"_104":174,"_151":137,"_148":176,"_97":175,"_158":-5,"_156":157,"_101":33,"_150":-5,"_106":405,"_152":177,"_160":-5,"_154":119,"_159":27,"_100":406},["D",1742759574911],[175],{"_148":274,"_101":167,"_106":408,"_151":137,"_287":409},["D",1742759574854],[410],{"_104":272,"_151":137,"_148":274,"_97":273,"_158":276,"_156":240,"_101":33,"_150":-5,"_106":408,"_152":167,"_160":-5,"_154":119,"_159":27,"_100":411},[273],"page","hasNext","routes/_app","actionData","errors"]

History