build: add data for deployment

.gitignore

@@ -7,7 +7,6 @@ __pycache__/
 venv/
 
 # Project specific
-designs/
 .chainlit/
 dist/
 
@@ -20,6 +19,4 @@ dist/
 
 .ipynb_checkpoints
 
-.chainlit/cache
-
-src/data
+.chainlit/cache

src/data/designs/001/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "001",
+  "url": "https://www.csszengarden.com/001",
+  "css_url": "https://www.csszengarden.com/001/001.css",
+  "description": "The Zen Garden design exemplifies a serene and elegant layout featuring muted color tones and delicate floral watermark accents, reflecting a harmonious balance between text and design. The asymmetrical placement and soft gradients complement the main content, while a clean and sophisticated typeface enhances readability, setting a contemplative mood.",
+  "categories": [
+    "web aesthetics",
+    "minimalist design",
+    "zen aesthetics",
+    "typography focus",
+    "serene theme"
+  ],
+  "visual_characteristics": [
+    "muted color palette",
+    "asymmetrical layout",
+    "floral accents",
+    "elegant typography",
+    "soft gradients"
+  ]
+}

src/data/designs/001/style.css

@@ -0,0 +1,207 @@
+/* css Zen Garden default style - 'Tranquille' by Dave Shea - http://www.mezzoblue.com/ */
+/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
+/* All associated graphics copyright 2003, Dave Shea */
+/* Added: May 7th, 2003 */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the 
+   designer's written permission. However, feel free to study the CSS and use 
+   techniques you learn from it elsewhere. */
+
+
+/* The Zen Garden default was the first I put together, and almost didn't make the cut. I briefly flirted with using
+    'Salmon Cream Cheese' as the main style for the Garden, but switched back to this one before launch.
+
+    All graphics in this design were illustrated by me in Photoshop. Google Image Search provided inspiration for
+    some of the elements. I did a bit of research on Kanji to come up with the characters on the top left. Anyone who
+    can read that will most likely tell you it makes no sense, but the best I could do was putting together the
+    characters for 'beginning' 'complete' and 'skill' to roughly say something like 'we're breaking fresh ground.'
+
+    It's a stretch. */
+
+
+/* basic elements */
+html {
+	margin: 0;
+	padding: 0;
+	}
+body { 
+	font: 75% georgia, sans-serif;
+	line-height: 1.88889;
+	color: #555753; 
+	background: #fff url(blossoms.jpg) no-repeat bottom right; 
+	margin: 0; 
+	padding: 0;
+	}
+p { 
+	margin-top: 0; 
+	text-align: justify;
+	}
+h3 { 
+	font: italic normal 1.4em georgia, sans-serif;
+	letter-spacing: 1px; 
+	margin-bottom: 0; 
+	color: #7D775C;
+	}
+a:link { 
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #B7A5DF;
+	}
+a:visited { 
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #D4CDDC;
+	}
+a:hover, a:focus, a:active { 
+	text-decoration: underline; 
+	color: #9685BA;
+	}
+abbr {
+	border-bottom: none;
+	}
+
+
+/* specific divs */
+.page-wrapper { 
+	background: url(zen-bg.jpg) no-repeat top left; 
+	padding: 0 175px 0 110px;  
+	margin: 0; 
+	position: relative;
+	}
+
+.intro { 
+	min-width: 470px;
+	width: 100%;
+	}
+
+header h1 { 
+	background: transparent url(h1.gif) no-repeat top left;
+	margin-top: 10px;
+	display: block;
+	width: 219px;
+	height: 87px;
+	float: left;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+header h2 { 
+	background: transparent url(h2.gif) no-repeat top left; 
+	margin-top: 58px; 
+	margin-bottom: 40px; 
+	width: 200px; 
+	height: 18px; 
+	float: right;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+header {
+	padding-top: 20px;
+	height: 87px;
+}
+
+.summary {
+	clear: both; 
+	margin: 20px 20px 20px 10px; 
+	width: 160px; 
+	float: left;
+	}
+.summary p {
+	font: italic 1.1em/2.2 georgia; 
+	text-align: center;
+	}
+
+.preamble {
+	clear: right; 
+	padding: 0px 10px 0 10px;
+	}
+.supporting {	
+	padding-left: 10px; 
+	margin-bottom: 40px;
+	}
+
+footer { 
+	text-align: center; 
+	}
+footer a:link, footer a:visited { 
+	margin-right: 20px; 
+	}
+
+.sidebar {
+	margin-left: 600px; 
+	position: absolute; 
+	top: 0; 
+	right: 0;
+	}
+.sidebar .wrapper { 
+	font: 10px verdana, sans-serif; 
+	background: transparent url(paper-bg.jpg) top left repeat-y; 
+	padding: 10px; 
+	margin-top: 150px; 
+	width: 130px; 
+	}
+.sidebar h3.select { 
+	background: transparent url(h3.gif) no-repeat top left; 
+	margin: 10px 0 5px 0; 
+	width: 97px; 
+	height: 16px; 
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar h3.archives { 
+	background: transparent url(h5.gif) no-repeat top left; 
+	margin: 25px 0 5px 0; 
+	width:57px; 
+	height: 14px; 
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar h3.resources { 
+	background: transparent url(h6.gif) no-repeat top left; 
+	margin: 25px 0 5px 0; 
+	width:63px; 
+	height: 10px; 
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+
+.sidebar ul {
+	margin: 0;
+	padding: 0;
+	}
+.sidebar li {
+	line-height: 1.3em; 
+	background: transparent url(cr1.gif) no-repeat top center; 
+	display: block; 
+	padding-top: 5px; 
+	margin-bottom: 5px;
+	list-style-type: none;
+	}
+.sidebar li a:link {
+	color: #988F5E;
+	}
+.sidebar li a:visited {
+	color: #B3AE94;
+	}
+
+
+.extra1 {
+	background: transparent url(cr2.gif) top left no-repeat; 
+	position: absolute; 
+	top: 40px; 
+	right: 0; 
+	width: 148px; 
+	height: 110px;
+	}

src/data/designs/002/metadata.json

@@ -0,0 +1,18 @@
+{
+  "id": "002",
+  "url": "https://www.csszengarden.com/002",
+  "css_url": "https://www.csszengarden.com/002/002.css",
+  "description": "The design embodies a serene and focused aesthetic with a soft, warm color scheme and straightforward typography. A prominent header creates an inviting entry point, while the balanced layout effectively organizes the content. Subtle shadows and borders provide depth, enhancing visual appeal without overwhelming the viewer.",
+  "categories": [
+    "Web Design",
+    "Minimalism",
+    "Typography",
+    "Navigation"
+  ],
+  "visual_characteristics": [
+    "Warm color palette",
+    "Minimalistic layout",
+    "Simplicity",
+    "Balanced whitespace"
+  ]
+}

src/data/designs/002/style.css

@@ -0,0 +1,225 @@
+/* css Zen Garden submission 002 - 'Salmon Cream Cheese' by Dave Shea - http://www.mezzoblue.com/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, Dave Shea */
+/* Added: May 7th, 2003 */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/* If you're familiar with the life cycle of salmon, you'll know that at the end of their lives they fight their way upstream to
+    the rivers where they were born, to spawn and then die. Growing up close to one of these so-called 'salmon runs', I
+    once had a class field trip to the river for the afternoon to learn about the process. The funny thing about a bunch of
+    dead salmon is that they stink. Quite bad. The second worst memory of that day was the smell of the fish.
+
+    The worst memory of the day was opening my lunch to find my considerate mother had packed bagels. With, as you
+    have guessed by now, salmon cream cheese. I rarely hear the word 'salmon' anymore without the 'cream cheese'
+    playing in my head as an afterthought. Hence, this style is Salmon Cream Cheese. */
+
+
+/* basic elements */
+body {
+	font: 11px/14px verdana, sans-serif;
+	color: #AD7C77;
+	background: #FFD7C4 url(/002/bg1.gif) top left repeat-x;
+	padding: 65px 0px 0px 224px;
+	margin: 0px;
+	}
+p {
+	font: 11px/14px verdana, sans-serif;
+	text-align: justify;
+	margin-top: 0px;
+	}
+h3 {
+	font: bold 16px 'arial narrow', sans-serif;
+	text-transform: lowercase;
+	margin-bottom: 0px;
+	}
+abbr {
+	border-bottom: dotted 1px #B27F66;
+	}
+a:link {
+	font-weight: bold;
+	text-decoration: none;
+	color: #E98376;
+	}
+a:visited {
+	font-weight: bold;
+	text-decoration: none;
+	color: #AD7C77;
+	}
+a:active, a:hover {
+	text-decoration: underline;
+	}
+
+
+/* specific divs */
+
+
+/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
+header {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 770px;
+	}
+header h1 {
+	background: transparent url(/002/h1.gif) no-repeat top left;
+	width: 258px;
+	height: 61px;
+	float: left;
+	margin: 1px 0px 0px 3px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+header h2 {
+	background: transparent url(/002/h2.gif) no-repeat top left;
+	width: 206px;
+	height: 28px;
+	float: right;
+	margin: 22px 15px 0px 0px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+/* sets up our floating area on the right. Kind of a hack, since there's a physical separation between
+	two divs, filled in by tricky margins and compensated for with tricky padding, but it seems to hold up okay. */
+.intro {
+	background: #FFC5A9 url(/002/bg2.gif) top left repeat-x;
+	}
+.preamble {
+	padding: 0px 40px 0px 40px;
+	}
+.preamble p:nth-child(4) {
+	margin-bottom: 0px;
+	}
+.supporting {
+	background-color: #FFC5A9;
+	margin: 0px;
+	padding: 0px 40px 0px 40px;
+	}
+.supporting .explanation h3 {
+	margin-top: 0px;
+	padding-top: 20px;
+	}
+
+.summary {
+	padding-top: 47px;
+	}
+
+.summary p:first-child {
+	width: 430px;
+	height: 195px;
+	background: transparent url(/002/splash.jpg) top left no-repeat;
+	padding: 182px 0px 0px 10px;
+	position: absolute;
+	top: 93px;
+	left: 244px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.summary p:last-child {
+	font-size: 9px;
+	line-height: 22px;
+	text-align: left;
+	color: #B27F66;
+	background-color: #FFD7C4;
+	display: block;
+	border: solid 1px #FFBEA1;
+	padding: 40px 15px 0px 419px;
+	margin: 0px 10px 0px 40px;
+	height: 140px;
+	}
+.summary p:last-child a:link {	
+	color: #B27F66;
+	}
+
+footer {
+	text-align: right;
+	border-top: solid 1px #FFCDB5;
+	padding-top: 10px;
+	}
+footer a:link, footer a:visited {
+	padding: 2px 6px 2px 6px;
+	}
+footer a:hover {
+	background-color: #FFD7BF;
+	text-decoration: none;
+	}
+
+
+.sidebar {
+	background: transparent url(/002/cr1.gif) bottom right no-repeat;
+	padding-bottom: 76px;
+	position: absolute;
+	top: 65px;
+	left: 0px;
+	}
+.sidebar .wrapper {
+	padding: 40px 0px 10px 0px;
+	width: 200px;
+	}
+.sidebar .wrapper h3.select {
+	background: transparent url(/002/h3.gif) no-repeat top left;
+	width: 195px;
+	height: 21px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar .wrapper h3.favorites{
+	background: transparent url(/002/h4.gif) no-repeat top left;
+	width: 195px;
+	height: 21px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar .wrapper h3.archives{
+	background: transparent url(/002/h5.gif) no-repeat top left;
+	width: 195px;
+	height: 21px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar .wrapper h3.resources{
+	background: transparent url(/002/h6.gif) no-repeat top left;
+	width: 195px;
+	height: 21px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar .iL, .sidebar li {
+	font-size:	10px;
+	line-height: 2.5ex;
+	display: block;
+	padding: 2px 0px 0px 25px;
+	margin-bottom: 5px;
+	}
+.sidebar .zen-resources li {
+	margin-bottom: 0px;
+	}
+
+.sidebar ul {
+	margin: 0px;
+	padding: 0px;
+	}
+
+.sidebar li {
+	list-style-type: none;
+	}

src/data/designs/003/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "003",
+  "url": "https://www.csszengarden.com/003",
+  "css_url": "https://www.csszengarden.com/003/003.css",
+  "description": "This design features a serene and calming aesthetic, employing a monochromatic blue-gray color palette that evokes a sense of tranquility. The layout is structured and organized, with a notable emphasis on clean typography and spaciousness. Each section is clearly delineated, contributing to an overall coherent and harmonious visual experience, while the soft textures in the background enhance the serene mood.",
+  "categories": [
+    "minimalism",
+    "typography",
+    "print design",
+    "web interface",
+    "aesthetic design"
+  ],
+  "visual_characteristics": [
+    "monochromatic palette",
+    "serene mood",
+    "structured layout",
+    "clean typography",
+    "spaciousness"
+  ]
+}

src/data/designs/003/style.css

@@ -0,0 +1,228 @@
+/* css Zen Garden submission 003 - 'Stormweather' by Dave Shea - http://www.mezzoblue.com/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, Dave Shea */
+/* Added: May 7th, 2003 */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/* Credit to Phillipe Wittenbergh at http://www.l-c-n.com/ for Mac testing */
+
+/* The photos in this design come from my digital library. All were taken in Vancouver, BC. The car is on the
+    Granville St. Bridge, the leaves are West 6th Ave, and the snow/tree is West 10th Ave. Guess which
+    part of town I live in...
+
+    I'm still rather fond of this design. I'm glad Phillipe was able to iron out the various CSS bugs */
+
+
+/* basic elements */
+body {
+	font: 11px/15px georgia, serif;
+	text-align: center;
+	color: #fff;
+	background: #748A9B url(bg2.gif) 0 0 repeat-y;
+	margin: 0px;
+	}
+p {
+	/*font: 11px/15px georgia, serif;*/
+	text-align: justify;
+	margin-top: 0;
+	}
+h3 {
+	font: bold 14px georgia, serif;
+	text-transform: lowercase;
+	margin-bottom: 0;
+	}
+abbr { 
+	border-bottom: dotted 1px #fff; 
+	}
+a:link { 
+	font-weight: bold; 
+	text-decoration: underline; 
+	color: #A7D3F6;
+	}
+a:visited {
+	font-weight: bold;
+	text-decoration: underline;
+	color: #D1E9FC;
+	}
+a:active, a:hover {
+	text-decoration: underline;
+	color: #fff;
+	}
+
+
+/* specific divs */
+
+.page-wrapper {
+	background: #849AA9 url(bg1.gif) top left repeat-y;
+	text-align: left;
+	width: 750px; margin: 0px auto;
+	position: relative;
+	} 
+.supporting {
+	/*position: relative; top: -120px;*/
+	padding: 0px 40px 0px 0;
+	/*clear:right;*/
+	float:right;
+	width:430px;
+	}
+
+/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
+header h1 {
+	background: transparent url(h1.jpg) no-repeat top left;
+	width: 750px;
+	height: 142px;
+	margin: 0px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+header h2 {
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+.summary { 
+	width: 685px; 
+	margin: 0px auto; 
+	position: relative; 
+	top: -50px;
+	}
+html>body .summary {
+	margin-top:-50px; 
+	top: 0;
+	}
+.summary p:first-child {
+	font-size: 1px;
+	color: white;
+	background: transparent url(panel1-2.jpg) no-repeat top left;
+	width: 449px; 
+	padding: 10px 0px 0px 5px; float: left; 
+	height: 268px; 
+	voice-family: "\"}\""; 
+	voice-family:inherit;
+	height: 258px; 
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.summary p:last-child {
+	color: #7593A7;
+	background: transparent url(panel3.jpg) no-repeat 0 0;
+	padding: 90px 45px 0px 45px;
+	float: right; 
+	width: 214px;
+	height: 338px; 
+	voice-family: "\"}\""; 
+	voice-family:inherit;
+	width: 124px;
+	height: 178px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.summary p:last-child a:link, .summary p:last-child a:visited {
+	color: #7593A7;
+	}
+.summary p:last-child a:hover {
+	color: #85ABC5;
+	}
+
+.preamble { 
+	/*position: relative; top: -120px; */
+	padding: 0px 0px 70px 33px; 
+	margin: 0px 0 20px 0px; 
+	width: 210px;
+	float: left;
+	background: transparent url(tag.gif) 50% 100% no-repeat;
+	}
+.preamble h2 { 
+	font: bold 14px georgia, serif; 
+	margin-top: 0px;
+	padding: 0px;
+	}
+.preamble p {
+	font: italic 12px/20px georgia, serif;
+	}
+
+footer {
+	text-align: right;
+	clear: both;
+	}
+footer a {
+	font-weight: normal;
+	text-decoration: none;
+	margin-right: 10px;
+	border: solid 1px #859BAA;
+	padding: 6px;
+	}
+footer a:hover {
+	color: #7E868D;
+	background-color: #fff;
+	border-right: solid 1px #6F818D;
+	border-bottom: solid 1px #6F818D;
+	}
+
+.design-selection {
+	position: absolute;
+	top: 15px;
+	left: 0px;
+	padding-left: 350px;
+	margin: 0px auto;
+	width: 730px;
+	voice-family: "\"}\"";
+	voice-family:inherit;
+	width: 380px;
+	}
+.sidebar h3 {
+	display: inline;
+	margin-right: 5px;
+	}
+
+.sidebar ul {
+	margin: 0px;
+	padding: 0px;
+	}
+.sidebar li {
+	font-size: 10px;
+	margin-right: 5px;
+	list-style-type: none;
+	display: inline;
+	}
+.sidebar li a {
+	font-weight: normal;
+	}
+
+.design-selection h3 {
+	font: bold 11px georgia;
+	letter-spacing: -1px;
+	}
+.design-selection li {
+	font: 11px/12px georgia;
+	letter-spacing: -1px;
+	color: #758C9B;
+	}
+.design-selection li a:link, .design-selection li a:visited {
+	font-weight: normal;
+	color: #fff;
+	text-decoration: none;
+	}
+.design-selection li a:hover {
+	color: #D1E9FC;
+	text-decoration: underline;
+	}
+
+.zen-resources, .design-archives, #lfavorites {
+	padding: 0px 40px 0px 266px;
+	clear: both;
+	/*position: relative; top: -20px;*/
+	}

src/data/designs/004/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "004",
+  "url": "https://www.csszengarden.com/004",
+  "css_url": "https://www.csszengarden.com/004/004.css",
+  "description": "The design features a structured layout with a calming blue and white color scheme that conveys clarity and modernity. The large, fluid background image adds a touch of elegance, while the clear typography and organized sections contribute to the aesthetic appeal. Highlighted text links in green and orange draw attention, creating a dynamic yet harmonious look.",
+  "categories": [
+    "Modern",
+    "Web Design",
+    "Instructional",
+    "Clean",
+    "Professional"
+  ],
+  "visual_characteristics": [
+    "Blue and White Palette",
+    "Fluid Background Image",
+    "Clear Typography",
+    "Highlighted Text Links",
+    "Structured Layout"
+  ]
+}

src/data/designs/004/style.css

@@ -0,0 +1,192 @@
+/* css Zen Garden submission 004 - 'arch4.20' by Dave Shea - http://www.mezzoblue.com/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, Dave Shea */
+/* Added: May 7th, 2003 */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/* The photo was taken inside the Vancouver Public Library. It has been mentioned the colours have a vaguely
+    MetaFilter-like feel. I suppose they do... Unintentional. */
+
+
+/* basic elements */
+body {
+	font: 11px tahoma, verdana, sans-serif;
+	color: #fff;
+	background: #005D87 url(bg1.gif) top left repeat-x;
+	margin: 0px;
+	}
+p {
+	font: 11px/14px verdana, sans-serif;
+	text-align: justify;
+	margin-top: 0px;
+	}
+h3 {
+	font: bold 13px verdana, sans-serif;
+	margin-bottom: 0px;
+	}
+abbr {
+	border-bottom: dotted 1px #fff;
+	}
+a:link {
+	font-weight: bold;
+	text-decoration: none;
+	color: #8AF44F;
+	}
+a:visited {
+	font-weight: bold;
+	text-decoration: none;
+	color: #55AB26;
+	}
+a:active, a:hover {
+	color: #8AF44F;
+	text-decoration: underline;
+	}
+
+/* specific divs */
+.preamble {
+	padding: 0px 180px 0px 25px;
+	}
+.supporting {
+	padding: 0px 180px 0px 25px;
+	}
+
+header {
+	width: 100%;
+	height: 217px;
+	background: #fff url(cr1.jpg) top left no-repeat;
+	margin-top: 47px;
+	}
+header h1 {
+	background: transparent url(h1.gif) no-repeat top left;
+	width: 296px;
+	height: 46px;
+	position: absolute;
+	top: 185px;
+	right: 10px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+header h2 {
+	background: transparent url(h2.gif) no-repeat top left;
+	width: 229px;
+	height: 16px;
+	position: absolute;
+	top: 230px;
+	right: 12px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+.summary p:first-child {
+	font: 11px tahoma, verdana, sans-serif;
+	line-height: 18px;
+	color: #7799AC;
+	background-color: #fff;
+	padding: 2px;
+	position: absolute;
+	top: 65px;
+	right: 10px;
+	width: 150px;
+	}
+.summary p:last-child {
+	font: 10px tahoma, verdana, sans-serif;
+	color: #7799AC;
+	position: absolute;
+	top: 32px;
+	right: 5px;
+	}
+.summary p:last-child a:link, .summary p:last-child a:visited {
+	color: #7799AC;
+	text-decoration: underline;
+	}
+.summary p:last-child a:active, .summary p:last-child a:hover {
+	color: #8AF44F;
+	}
+
+.sidebar{
+	font: 11px tahoma, verdana, sans-serif;
+	line-height: 18px;
+	color: #7799AC;
+	position: absolute;
+	top: 285px;
+	right: 0px;
+	width: 150px;
+	}
+.sidebar .wrapper h3.select {
+	background: transparent url(h3.gif) no-repeat top left;
+	width: 157px;
+	height: 14px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar .wrapper h3.favorites{
+	background: transparent url(h5.gif) no-repeat top left;
+	width: 157px;
+	height: 14px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar .wrapper h3.archives{
+	background: transparent url(h6.gif) no-repeat top left;
+	width: 157px;
+	height: 14px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar .wrapper h3.resources{
+	background: transparent url(h4.gif) no-repeat top left;
+	width: 157px;
+	height: 14px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar li {
+	font-size: 10px;
+	line-height: 2.5ex;
+	display: block;
+	padding: 2px 10px 0px 0px;
+	margin-bottom: 5px;
+	}
+.sidebar .zen-resources li {
+	margin-bottom: 0px;
+	}
+
+.sidebar ul {
+	margin: 0px;
+	padding: 0px;
+	}
+
+.sidebar li {
+	list-style-type: none;
+	}
+
+
+footer {
+	text-align: right; border-top: solid 1px #1E5E82;
+	padding-top: 10px;
+	}
+footer a:link, footer a:visited {
+	padding: 2px 6px 2px 6px;
+	}
+footer a:hover {
+	background: transparent url(bg2.gif) top left repeat-x;
+	text-decoration: none;
+	}

src/data/designs/005/metadata.json

@@ -0,0 +1,18 @@
+{
+  "id": "005",
+  "url": "https://www.csszengarden.com/005",
+  "css_url": "https://www.csszengarden.com/005/005.css",
+  "description": "This design features a creative and eclectic layout with an abstract artistic background showcasing vintage red and black tones. The main heading is presented in a graceful cursive font, adding a touch of elegance. The layout uses a mix of serif and sans-serif fonts, creating a dynamic textual experience. The asymmetrical composition and overlapping elements demonstrate a bold, experimental design approach.",
+  "categories": [
+    "abstract",
+    "experimental",
+    "vintage",
+    "typography-focused"
+  ],
+  "visual_characteristics": [
+    "asymmetrical layout",
+    "cursive typography",
+    "red and black color palette",
+    "textured background"
+  ]
+}

src/data/designs/005/style.css

@@ -0,0 +1,220 @@
+/* css Zen Garden submission 005 - 'Blood Lust' by Dave Shea - http://www.mezzoblue.com/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, Dave Shea */
+/* Added: May 7th, 2003 */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/* love it or hate it. This one is one of my favourites because I don't generally design this way. It reaches into the past
+    for a vaguely Futurist style, complete with duotone for that screenprint feel, combined with modern GIF 
+    patterned-dithering to really mess with tradition.
+
+    You may find it challenging, silly, visually stimulating, or a mess. I didn't do it for you, I did it for me. */
+
+
+/* basic elements */
+body {
+	font: 12px/13px courier, monospace;
+	color: #000;
+	background-color: #fff;
+	margin: 0px;
+	}
+p {
+	font: 12px/13px courier, monospace;
+	text-align: justify;
+	}
+h3 {
+	font:bold 14px courier, monospace;
+	letter-spacing: 1px;
+	margin-bottom: 0px;
+	color: #000;
+	}
+a:link {
+	font-weight: bold;
+	text-decoration: underline;
+	color: #FF4F3E;
+	}
+a:visited {
+	font-weight: bold;
+	text-decoration: underline;
+	color: #FF4F3E;
+	}
+a:hover, a:active {
+	text-decoration: underline;
+	color: #000;
+	}
+abbr {
+	border-bottom: none;
+	}
+
+
+/* specific divs */
+.page-wrapper {
+	background: #fff url(bloodlust.gif) no-repeat top left;
+	margin: 50px 0px 0px 0px;
+	padding: 150px 0px 0px 200px;
+	}
+
+/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
+header h1 {
+	background: transparent url(h1.gif) no-repeat top left;
+	margin-top: 10px;
+	width: 461px;
+	height: 116px;
+	position: absolute;
+	top: 20px;
+	left: 305px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+header h2 {
+	background: transparent url(h2.gif) no-repeat top left;
+	width: 253px;
+	height: 34px;
+	position: absolute;
+	top: 150px;
+	left: 216px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+
+.summary p:first-child {
+	font: 400 18px/16px 'arial black', sans-serif;
+	text-align: right;
+	width: 340px;
+	float: left;
+	margin: 40px 20px 20px 0px;
+	}
+.summary p:last-child {
+	font: 9px verdana, sans-serif;
+	text-align: left;
+	line-height: 24px;
+	width: 295px;
+	position: absolute;
+	top: 20px;
+	left: 25px;
+	}
+.preamble {
+	width: 170px;
+	float: right;
+	margin-top: 50px;
+	clear: left;
+	position: relative;
+	top: -270px;
+	}
+.preamble h3 {
+	font: bold 12pt/10pt 'trebuchet ms', sans-serif;
+	text-align: right;
+	}
+.preamble p {
+	font: bold 10pt/11pt arial, sans-serif;
+	text-align: right;
+	}
+.supporting {
+	clear: left;
+	}
+.explanation h3 {
+	font: bold 18px courier, monospace;
+	}
+.explanation p:nth-child(2) {
+	font: 18px courier, monospace;
+	line-height: 5ex;
+	}
+.explanation p:nth-child(3) {
+	font: 11px/16px courier, monospace;
+	width: 220px;
+	float: left;
+	margin-right: 10px;
+	}
+.explanation p:nth-child(4) {
+	font: 14px/14px courier, monospace;
+	margin-top: 30px;
+	}
+
+.participation h3 {
+	background: transparent url(h3.gif) no-repeat top left;
+	width: 174px;
+	height: 66px;
+	margin: 0px;
+	float: left;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.participation p:nth-child(2):first-line {
+	font: 16px 'arial black', sans-serif;
+	}
+.participation p:nth-child(3) {
+	line-height: 16px;
+	text-align: right;
+	float: left;
+	width: 200px;
+	margin: 0px 5px 15px 0px;
+	}
+.participation p:nth-child(4) {
+	font-family: arial, sans-serif;
+	}
+
+.benefits h3 {
+	background: transparent url(h4.gif) no-repeat top left;
+	width: 107px;
+	height: 26px;
+	margin: 0px;
+	float: left;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+
+.requirements h3 {
+	font: bold 18px 'arial black', sans-serif;
+	clear: left;
+	float: right;
+	}
+.requirements p:nth-child(2) {
+	font: bold 11px/16px trebuchet ms, sans-serif;
+	float: left;
+	width: 300px;
+	margin-right: 10px;
+	}
+.requirements p:nth-child(4) {
+	font: 12px/11px arial, sans-serif;
+	}
+
+.sidebar {
+	position: absolute;
+	top: 0px;
+	left: 20px;
+	}
+.sidebar .wrapper {
+	font: 12px courier, monospace;
+	padding: 10px;
+	margin-top: 115px;
+	width: 130px;
+	}
+
+.sidebar li {
+	line-height: 2.5ex;
+	display: block;
+	padding-top: 5px;
+	margin-bottom: 5px;
+	list-style-type: none;
+	}
+
+.sidebar ul {
+	margin: 0px;
+	padding: 0px;
+	}

src/data/designs/006/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "006",
+  "url": "https://www.csszengarden.com/006",
+  "css_url": "https://www.csszengarden.com/006/006.css",
+  "description": "The design employs a minimalist and structured layout with a focus on typographic hierarchy and a cohesive color scheme of blue and orange accents. The simple background and strategic use of whitespace enhance readability while guiding the viewer\u2019s attention effectively.",
+  "categories": [
+    "minimalism",
+    "typography",
+    "color contrast",
+    "web design inspiration",
+    "clean layout"
+  ],
+  "visual_characteristics": [
+    "blue color palette",
+    "structured typography",
+    "use of whitespace",
+    "orange accent highlights",
+    "simple background"
+  ]
+}

src/data/designs/006/style.css

@@ -0,0 +1,198 @@
+/* css Zen Garden submission 006 - 'Wicked Grove' by D. Keith Robinson, http://www.7nights.com/asterisk/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, D. Keith Robinson */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/* basic elements */
+body { 
+	font: 10pt/14pt "Trebuchet MS", sans-serif; 
+	color: #000033; 
+	background: #69f;
+	margin: 0px; 
+	}
+p { 
+	font: 10pt/16pt "Trebuchet MS", sans-serif; 
+	margin-top: 0px; 
+	text-align: justify;
+	}
+h3 {
+	font: bold normal 12pt "Trebuchet MS", sans-serif;
+	letter-spacing: 3px;
+	margin-bottom: 2px;
+	color: #333333;
+	text-align: left;
+	}
+a:link { 
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #FF6600;
+	}
+a:visited { 
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #CC0000;
+	}
+a:hover, a:active { 
+	text-decoration: underline; 
+	color: #FF6600;
+	}
+
+
+/* specific divs */
+.page-wrapper { 
+	background: #9cf url(trees.jpg) no-repeat left top; 
+	padding: 200px 0px 0px 0px;  
+	margin: 0px auto; 
+	width:800px;
+	border-left: 2px dashed #fff;
+	border-right: 2px dashed #fff;
+	}
+
+header { 
+	margin-bottom: 10px;
+	}
+
+/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
+header h1 { 
+	background: transparent; 
+	margin-top: -180px; 
+	width: 500px; 
+	height: 87px; 
+	float: left;
+	color:#fff;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+header h2 { 
+	background: transparent url(tag.gif) no-repeat top left; 
+	width: 300px; 
+	margin-top:-60px;
+	margin-left:-190px;
+	height: 100px; 
+	float: right;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+.summary {
+	width: 130px;
+	float: left;
+	padding:5px;
+	margin-right:15px;
+	background:#0099FF;
+	
+	}
+.summary p {
+	font: bold 8pt/12pt verdana, sans-serif; 
+	text-align:right;
+	color:#fff;
+	}
+	
+.summary a:link { 
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #003;
+	}
+.summary a:visited { 
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #006;
+	}
+.summary a:hover, .summary a:active { 
+	text-decoration: underline; 
+	color: #FF6600;
+	}
+	
+.preamble, #supporting text, .explanation, .participation, .benefits, .requirements {
+	padding: 0px 170px 0px 30px;
+}
+
+footer { 
+	text-align: center; 
+	}
+footer a:link, footer a:visited { 
+	margin-right: 20px; 
+	}
+
+.sidebar {
+    background: transparent url(menu.gif) top left no-repeat; 
+	position: absolute;
+	top: 0px;
+	padding: 15px; 
+	margin-top: 200px; 
+	margin-left: 650px;
+	width: 130px; 
+	}
+	
+.sidebar .wrapper { 
+	font: 10px verdana, sans-serif;
+	padding-top:35px; 
+	}
+.sidebar h3.select { 
+	background: transparent url(select.gif) top left no-repeat;  
+	width: 130px; 
+	height: 25px; 
+	margin-left:-8px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar h3.archives { 
+	background: transparent url(archives.gif) top left no-repeat;  
+	width: 130px; 
+	height: 25px; 
+	margin-left:-8px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar h3.resources { 
+	background: transparent url(resources.gif) top left no-repeat;  
+	width: 130px; 
+	height: 25px; 
+	margin-left:-8px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+.sidebar ul {
+	margin: 0px;
+	padding: 0px;
+	}
+.sidebar li {
+	line-height: 2.5ex; 
+	background: transparent; 
+	display: block; 
+	padding-top: 5px; 
+	margin-bottom: 5px;
+	list-style-type: none;
+	}
+.sidebar li a:link { 
+	color: #FF3300;
+	}
+.sidebar li a:visited {
+	color: #FF0000;
+	}
+
+.extra1 { 
+	background: transparent;
+	position: absolute; 
+	top: 40px; 
+	right: 0px; 
+	width: 148px; 
+	height: 110px; 
+	}

src/data/designs/007/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "007",
+  "url": "https://www.csszengarden.com/007",
+  "css_url": "https://www.csszengarden.com/007/007.css",
+  "description": "This zen-themed design artfully combines minimalist visuals with grayscale imagery and bold typography, evoking a calm, introspective mood. The subtle overlay of an elegant black-and-white nature image with flowing lines adds depth, while the use of orange accents in the text enhances readability and attention. The overall layout is spacious and neatly sectioned, contributing to an organized and serene visual experience.",
+  "categories": [
+    "Zen",
+    "Minimalist",
+    "Typography",
+    "Nature",
+    "Grayscale"
+  ],
+  "visual_characteristics": [
+    "Minimalist layout",
+    "Grayscale theme",
+    "Highlight color accents",
+    "Nature-inspired imagery",
+    "Bold typography"
+  ]
+}

src/data/designs/007/style.css

@@ -0,0 +1,276 @@
+/* css Zen Garden submission 007 - 'deep thought' by Jason Estes, http://www.bewb.org/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, Jason Estes */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/* basic elements */
+body#css-zen-garden { 
+	background-color:#424242;
+	font-size:75%;
+	font-family:arial, verdana, sans-serif;
+	margin:0;
+	padding:0;
+	color:#fff;
+	background-image:url(background.jpg);
+	background-repeat:no-repeat;
+	background-position:150px 50px;
+	}
+
+a:link { 
+	color:#FF9638;
+		background-color:transparent;
+	}
+a:visited { 
+		color:#FF9638;
+		background-color:transparent;
+	}
+a:hover, a:active { 
+		color:#FF9638;
+		background-color:transparent;
+	}
+/* specific divs */
+
+
+/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
+header h1 {
+	margin:10px 15px;
+	background-image:url(logo.gif);
+	height:83px; 
+	background-color:transparent;
+	width:480px;
+	background-repeat:no-repeat;
+	background-position:top right;
+	color:#000;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+header h2 { 
+	display:none;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.summary {
+	display:block;
+	}
+.summary p:first-child {
+display:none;
+	}
+.summary p:last-child {
+ 	position:absolute;
+	top:0px;
+	left:300px;
+	padding:0;margin:0;
+	}
+.preamble {
+	border-top:1px solid #fff;
+	background-image:url(halfscreen-gray.gif);
+	width:250px;
+	margin-left:30px;
+	position:absolute;
+	top:18px;
+	right:10px;
+		}
+.preamble p{
+	margin:10px;
+	}
+.preamble h3{
+	font-style:oblique;
+	margin:10px;
+	}
+.supporting {
+	margin:350px auto 0 auto;
+	width:90%;
+	}
+.supporting div {
+	/*background-image:url(halfscreen-gray.gif);*/
+	border-top:1px solid #fff;
+	clear:both;
+	}
+
+.supporting p {
+	padding:5px 10px;
+	line-height:150%;
+	}
+.explanation h3{
+	float:left;
+	background-image:url(about.gif);
+	width:46px;
+	height:234px;
+	padding:0;
+	margin:0 10px 0px 0px;
+	border-right:1px solid white;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.explanation p{
+		margin:0px 0px 0px 43px;
+		}
+.supporting div.explanation {
+	margin:20px 10px 0 200px;
+	background:url(about_background.gif) no-repeat 100% 100%;
+	min-height:234px;
+	height:234px;
+	clear:none;
+	}
+.supporting .explanation[id] {
+	height:auto;
+	}
+.participation h3{
+	float:right;
+	background-image:url(participation.gif);
+	width:46px;
+	height:234px;
+	padding:0;
+	margin:0 0px 0px 10px;
+	border-left:1px solid white;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.supporting .participation {
+	margin:20px 200px 0 10px;
+	min-height:234px;
+	height:234px;
+	background:url(participation_back.gif) no-repeat 0 100%;
+	}
+.participation p{
+		margin:0px 43px 0px 0px;
+		}
+.supporting .participation[id] {
+	height:auto;
+	}
+.benefits h3{
+	float:left;
+	background-image:url(benefits.gif);
+	width:46px;
+	height:133px;
+	padding:0;
+	margin:0 10px 0px 0px;
+	border-right:1px solid white;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.benefits p{
+		margin:0px 0px 0px 43px;
+		}
+.supporting .benefits {
+	margin:20px 10px 0 200px;
+	min-height:133px;
+	height:133px;
+	background:url(benefits_back.gif) no-repeat 100% 100%;
+	}
+.supporting .benefits[id] {
+	height:auto;
+	}
+.requirements h3{
+	float:right;
+	background-image:url(Requirements.gif);
+	width:46px;
+	height:234px;
+	padding:0;
+	margin:0 0px 0px 10px;
+	border-left:1px solid white;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.requirements p{
+		margin:0px 43px 0px 0px;
+		}
+.supporting .requirements {
+	margin:20px 200px 30px 10px;
+	min-height:234px;
+	height:234px ;
+	background:url(requirements_back.gif) no-repeat 0 100%;
+	}
+.supporting .requirements[id] {
+	height:auto;
+	}
+.supporting footer { 
+	text-align:center;
+	padding-top:3px;
+	}
+footer a:link, footer a:visited { 
+	font-weight:bold;
+	text-decoration:none;
+	}
+.sidebar {
+	position:absolute;
+	top:98px;
+	left:30px;
+	width:198px;
+	}
+
+.sidebar h3.select { 
+	height:53px;
+	background-image:url(select.gif);
+	margin:0px;
+	padding:0px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar h3.archives { 
+	height:53px;
+	background-image:url(archives.gif);
+	margin:0px;
+	padding:0px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+.sidebar h3.resources { 
+	height:53px;
+	background-image:url(resources.gif);
+	margin:0px;
+	padding:0px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+	}
+
+
+.sidebar ul {
+	margin: 0px;
+	padding: 0px;
+	}
+.sidebar li {
+	display:block;
+	background-image:url(halfscreen-gray.gif);
+	padding:3px;
+	margin:1px 0;
+	list-style-type: none;
+	}
+.sidebar li a:link, .sidebar li a:visited { 
+	color:#fff;
+	background-color:transparent;
+	}
+
+.extra1 { 
+	clear:both;
+	}
+abbr {
+	color:#FF9638;
+	background-color:transparent;
+	border:0;
+	cursor:help;
+	}

src/data/designs/008/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "008",
+  "url": "https://www.csszengarden.com/008",
+  "css_url": "https://www.csszengarden.com/008/008.css",
+  "description": "This design features a striking use of vibrant red gradients complemented by an abstract, fiery artwork that creates a dynamic and futuristic aesthetic. The layout is well-structured, showcasing a clear hierarchy with text aligned within well-defined boxes, ensuring readability against the intense background. The typography is bold and modern, enhancing the overall edgy and creative theme of the design.",
+  "categories": [
+    "abstract design",
+    "futuristic",
+    "vibrant",
+    "creative layout",
+    "typography"
+  ],
+  "visual_characteristics": [
+    "vibrant red gradients",
+    "abstract artwork",
+    "clear text hierarchy",
+    "bold typography",
+    "dynamic aesthetic"
+  ]
+}

src/data/designs/008/style.css

@@ -0,0 +1,113 @@
+/* css Zen Garden submission 008 - 'RPM' by Bruno Cunha, http://www.kaosboy.net/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* Main image from http://www.karborn.com/FinalV6Old/Series/RPM/RPMImages.htm */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+body {
+	background-image:url(bg.jpg);
+	background-color:#fff;
+	font-family:arial, sans serif;
+	font-size:11px;
+	line-height:15px;
+	color:#fff;
+	margin:0px;
+	}
+
+.page-wrapper {
+	margin-left:0px;
+	margin-top:0px;
+	padding:0px;
+	width:684px;
+	z-index:1;
+	}
+
+.intro {
+	width:275px;
+	position:absolute;
+	left:88px;
+	top:902px;
+	z-index:2;
+	}
+
+.supporting {
+	width:450px;
+	position:absolute;
+	left:411px;
+	top:535px;
+	z-index:2;
+	}
+.explanation, .participation, .requirements, .benefits, footer, .summary, .preamble, .design-selection, #lfavorites, .zen-resources, .design-archives {
+	padding:7px;
+	margin:5px;
+	border-left:1px solid #aaa;
+	border-top:1px solid #aaa;
+	border-right:1px solid #333;
+	border-bottom:1px solid #333;
+	background-image:url(transparent.gif);
+	}
+
+.sidebar .wrapper {
+	width:275px;
+	position:absolute;
+	left:88px;
+	top:1244px;
+	z-index:2;
+	}
+
+.extra1 {
+	background-image:url(tunami2.jpg);
+	position:absolute;
+	left:0px;
+	top:0px;
+	width:684px;
+	height:1515px;
+	z-index:1;
+	}
+header {
+	display:none;
+	}
+h3 {
+	font-family:arial, sans serif;
+	color:#fff;
+	font-size:11px;
+	font-weight:bold;
+	margin-top:3px;
+	margin-bottom:0px;
+	}
+p {
+	margin:6px;
+	}
+
+a {
+	color:#e2e2e2;
+	text-decoration:underline;
+	}
+a:link {
+	color:#e2e2e2;
+	text-decoration:underline;
+	}
+a:hover {
+	color:#fff;
+	font-weight:bold;
+	text-decoration:underline;
+	}
+a:visited {
+	color:#e2e2e2;
+	text-decoration:underline;
+	}
+
+
+	margin: 0px;
+	padding: 0px;
+	}
+
+.sidebar li {
+	list-style-type: none;
+	display: inline;
+	}

src/data/designs/009/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "009",
+  "url": "https://www.csszengarden.com/009",
+  "css_url": "https://www.csszengarden.com/009/009.css",
+  "description": "This design features a clean and organized layout with a classic monochrome color palette, emphasizing the elegance of CSS design. It uses serif typography for a traditional feel, with strong visual separation of sections, enhancing readability. The design incorporates ornamental graphics at the top and bottom, adding a touch of sophistication. The ample use of whitespace contributes to a serene and uncluttered experience, inviting users to engage with the content.",
+  "categories": [
+    "Web Design",
+    "Typography",
+    "Minimalism",
+    "Ornamental Design",
+    "Monochrome"
+  ],
+  "visual_characteristics": [
+    "Serif Typography",
+    "Monochromatic Palette",
+    "Ornamental Graphics",
+    "Whitespace Usage",
+    "Classic Layout"
+  ]
+}

src/data/designs/009/style.css

@@ -0,0 +1,318 @@
+/* css Zen Garden submission 009 - 'Dead or Alive' by Michael Pick, http://www.mikepick.com/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, Michael Pick */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/* basic elements */
+body {
+	color: #000;
+	background: #fff url(body-bg.png);
+	margin: 0px auto;
+	}
+
+p {
+	font: 12px/15px georgia, serif;
+	text-align: justify;
+	margin-top: 0;
+	}
+	
+a:link { 
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #000;
+	}
+
+a:visited { 
+	font-weight: bold; 
+	text-decoration: none; 
+	color: #333;
+	}
+
+a:hover, a:active { 
+	text-decoration: underline; 
+	}
+	
+/* specific divs */
+
+.page-wrapper { 
+	background: url(frill-bg.png) repeat-x;
+	border-right: 1px solid #333;
+	width: 800px;
+	margin: 0px;
+	}
+	
+.intro { 
+	min-width: 470px;
+	}
+
+header { 
+	width: 280px;
+	float: left;
+	margin-top: 40px;
+	}
+	
+	h1 { 
+		background: transparent url(pageheader-bg.png) no-repeat; 
+		margin-left: 40px;
+		width: 240px; 
+		height: 220px; 
+
+		text-indent: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+
+	h2 {
+		display: none;
+		}
+		
+.summary {
+	clear:both;
+	width: 280px; 
+	float: left;
+	margin-bottom: 20px;
+	}
+	
+	.summary p {
+		font-family: georgia, times, serif;
+		font-size: 10px;
+		text-transform: uppercase; 
+		text-align:center;
+		padding-left: 60px;
+		padding-right: 20px;
+		}
+		
+.preamble {
+	margin-left: 280px;
+	width: 460px;
+	padding-top: 90px;
+	}
+	
+	.preamble h3 {
+		background: transparent url(preamble.png) no-repeat; 
+		width: 460px; 
+		height: 70px;
+
+		text-indent: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+		
+	.preamble a:link {
+		color: #600;
+		}
+		
+	.preamble p {
+		line-height: 150%;
+		}
+		
+.supporting {
+	margin-left: 0px;
+	}
+	
+	.supporting a:link {
+		color: #600;
+		}
+	
+.explanation {
+	margin-left: 280px;
+	width: 460px;
+	}
+	
+	.explanation h3 {
+		background: transparent url(sowhat.png) no-repeat; 
+		width: 460px; 
+		height: 50px;
+		margin-bottom: 20px;
+		
+		text-indent: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+		
+	.explanation p {
+		line-height: 150%;
+		}
+	
+.participation {
+	width: 460px;
+	}
+	
+	.participation h3 {
+		background: transparent url(participation.png) no-repeat; 
+		width: 460px; 
+		height: 50px;
+		margin-bottom: 20px;
+
+		text-indent: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+		
+	.participation p {
+		line-height: 150%;
+		}
+	
+.benefits {
+	width: 460px;
+	}
+	
+	.benefits h3 {
+		background: transparent url(benefits.png) no-repeat; 
+		width: 460px; 
+		height: 50px;
+		margin-bottom: 20px;
+
+		text-indent: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+		
+	.benefits p {
+		line-height: 140%;
+		}
+	
+.requirements {
+	width: 460px;
+	}
+	
+	.requirements h3 {
+		background: transparent url(requirements.png) no-repeat; 
+		width: 460px; 
+		height: 50px;
+		margin-bottom: 20px;
+
+		text-indent: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+		
+	.requirements p {
+		line-height: 140%;
+		}
+		
+footer {
+	margin-top: 40px;
+	background: transparent url(footer.png) repeat-x;
+	height: 58px;
+	width: 800px;
+	text-align: center;
+	margin-left: -280px;
+	}
+		
+.sidebar {
+	position: absolute; 
+	top: 28em;
+	left: 40px;
+	width: 240px;
+	}
+	
+.sidebar .wrapper { 
+	font: 10px georgia, times, serif;
+	text-transform: uppercase;
+	}
+	
+	.sidebar h3.select { 
+		background: transparent url(select.png) no-repeat top left; 
+		margin: 10px 0px 5px 0px; 
+		width: 240px; 
+		height: 50px;
+		margin-bottom: 10px;
+		}
+		
+	.design-selection {
+		padding-bottom: 20px;
+		}
+
+	.sidebar h3.select {
+		text-indent: 200%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+
+	.sidebar h3.archives { 
+		background: transparent url(archives.png) no-repeat top left; 
+		width: 240px; 
+		height: 50px;
+		margin-bottom: 10px;
+
+		text-indent: 200%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+
+	.sidebar h3.resources { 
+		background: transparent url(resources.png) no-repeat top left; 
+		width: 250px; 
+		height: 50px;
+		margin-bottom: 10px;
+
+		text-indent: 200%;
+		white-space: nowrap;
+		overflow: hidden;
+		}
+	
+
+	.sidebar ul {
+		margin: 0px;
+		padding: 0px;
+		}
+
+	.sidebar li {
+		line-height: 2.5ex; 
+		display: block;
+		text-align: center;
+		padding-top: 5px;
+		padding-left: 20px;
+		padding-right: 20px;
+		margin-bottom: 5px;
+		list-style-type: none;
+		}
+	
+	.sidebar li a:link { 
+		color: #000;
+		}
+	
+	.sidebar li a:visited {
+		color: #333;
+		}
+			
+.extra1 { 
+	background: transparent url(certified.png) top left no-repeat; 
+	position: absolute; 
+	top: 160px; 
+	left: 0px; 
+	width: 100px; 
+	height: 110px;
+	z-index: 0;
+	}
+	
+/* hidden from IE 5 mac */
+	
+@media all {
+	.explanation {
+		margin-left: 280px;
+		}
+		
+	.participation {
+		margin-left: 280px;
+		}
+		
+	.benefits {
+		margin-left: 280px;
+		}
+		
+	.requirements {
+		margin-left: 280px;
+		}
+		
+	footer {
+		margin-left: 0px;
+	}
+}

src/data/designs/010/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "010",
+  "url": "https://www.csszengarden.com/010",
+  "css_url": "https://www.csszengarden.com/010/010.css",
+  "description": "The design utilizes a clean and structured layout with a neutral color palette, employing a sidebar for navigation and a main content area for information. The typography is clear and well-organized, enhancing readability, while subtle background textures add depth without distraction.",
+  "categories": [
+    "Web Design",
+    "Typography",
+    "Minimalist Design",
+    "Navigation Layout",
+    "Informational"
+  ],
+  "visual_characteristics": [
+    "Neutral Colors",
+    "Structured Layout",
+    "Clear Typography",
+    "Sidebar Navigation",
+    "Subtle Textures"
+  ]
+}

src/data/designs/010/style.css

@@ -0,0 +1,235 @@
+/* css Zen Garden submission 010 - 'A Garden Apart' by Dan Cederholm, http://www.simplebits.com/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, Dan Cederholm */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+body 
+	{ 
+		font-family: trebuchet ms, verdana, sans-serif;
+		font-size: 12px;
+		line-height: 1.5em; 
+		color: #333; 
+		background: #cccc99;
+		margin: 0;
+		padding: 0;
+		text-align: center;
+	}
+
+p 
+	{ 
+		margin-top: 0px; 
+	}
+	
+h3 
+	{ 
+		font: bold 140% trebuchet ms;
+		letter-spacing: -1px; 
+		margin-bottom: 0; 
+		color: #c96;
+	}
+	
+a:link 
+	{ 
+		text-decoration: none;
+		border-bottom: 1px dotted #369; 
+		color: #369;
+	}
+	
+a:visited 
+	{ 
+		text-decoration: none;
+		border-bottom: 1px dotted #369; 
+		color: #369;
+	}
+	
+a:hover, a:active 
+	{ 
+		text-decoration: none;
+		border-bottom: 1px solid #036; 
+		color: #036;
+	}
+
+/* ---( specific divs )----------------------------- */
+
+.page-wrapper 
+	{
+		position: relative;
+		background: #FFFBDF url(fade.gif) no-repeat 0 92px;
+		margin: 0 auto 10px auto;
+		border-left: 1px solid #000;
+		border-right: 1px solid #000;
+		border-bottom: 1px solid #000;
+		text-align: left;
+ 		width: 800px;
+	}
+
+header
+	{
+		height: 92px;
+		background: url(top.gif) no-repeat top left;
+	}
+
+header h1
+	{ 
+		display: none;	
+	}
+	
+header h2 
+	{ 
+		position: absolute;
+		top: 110px;
+		left: 20px;
+		padding: 0;
+		margin: 0;
+		background: url(tagline.gif) no-repeat top left;
+		width: 528px;
+		height: 74px;
+
+		text-indent: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+/* ---( quick summary)---------------------------- */
+
+.summary 
+	{
+		position: absolute;
+		top: 92px;
+		right: 0;
+		left: auto;
+		z-index: 2;
+		width: 298px; 
+  		voice-family: "\"}\""; 
+  		voice-family:inherit;
+ 		width: 300px;
+	}
+
+html>body .summary
+	{
+  		width: 300px;
+	} 
+
+.summary p 
+	{
+		margin: 15px 15px 15px 15px; 
+		font-style: italic;
+		font-size: 140%; 
+		font-family: "trebuchet ms";
+		font-weight: bold;
+		line-height: 1.5em;
+		color: #444;
+	}
+
+.summary p:last-child 
+	{
+		font-style: normal;
+		font-weight: normal;
+		font-size: 100%;
+		margin-top: 0;
+	}
+
+.preamble 
+	{
+		margin: 104px 340px 0px 20px;
+	}
+	
+.supporting 
+	{
+		padding-left: 20px; 
+		margin: 0 350px 40px 0;
+	}
+
+footer 
+	{ 
+		border-top: 1px dotted #CDC4AC;
+		padding-top: 6px;
+		text-align: center;
+	}
+	
+footer a:link, footer a:visited 
+	{ 
+		margin-right: 6px;
+	}
+
+/* ---( right side nav)----------------------------- */
+
+.sidebar 
+	{
+		position: absolute; 
+		top: 92px; 
+		right: 0;
+		left: auto;
+		width: 300px;
+		padding: 0;
+		border-left: 1px solid #CDC4AC;
+		border-bottom: 1px solid #CDC4AC;
+		background: #E5E0D4 url(zen.gif) no-repeat;
+		z-index: 1;
+	}
+	
+.sidebar .wrapper 
+	{ 
+		margin: 190px 15px 15px 15px; 
+	}
+
+.sidebar h3
+	{
+		color: #635F57;
+		font-family: trebuchet ms;
+		font-size: 120%;
+		margin: 0 0 6px 0;
+		padding: 0;
+	}	
+	
+.sidebar ul
+	{
+		margin: 0px;
+		padding: 0px;
+	}
+.sidebar li
+	{
+		display: block; 
+		margin-bottom: 2px;
+		padding-left: 14px;
+		background: url(arrow.gif) no-repeat 0 5px;
+		list-style-type: none;
+	}
+	
+.sidebar li a:link
+	{ 
+		color: #c96;
+		border-bottom: none;
+	}
+	
+.sidebar li a:visited
+	{
+		color: #c96;
+		border-bottom: none;
+	}
+	
+.sidebar li a:hover
+	{
+		color: #963;
+	}
+
+
+
+
+.design-selection
+	{
+		padding: 12px 0 12px 0;
+		border-top: 1px dashed #CDC4AC;
+		border-bottom: 1px dashed #CDC4AC;
+	}
+	
+.zen-resources
+	{
+		margin-top: 12px;
+	}

src/data/designs/011/metadata.json

@@ -0,0 +1,22 @@
+{
+  "id": "011",
+  "url": "https://www.csszengarden.com/011",
+  "css_url": "https://www.csszengarden.com/011/011.css",
+  "description": "The design features a harmonious blend of text and imagery, utilizing a soft color palette with blue and orange highlights. The layout is structured yet fluid, encouraging readability and engagement. Elegant typography and an artistic illustration enhance the page's aesthetics, appealing to a design-conscious audience.",
+  "categories": [
+    "Web Design",
+    "Typography",
+    "Graphic Design",
+    "Artistic Design",
+    "Minimalism",
+    "Usability"
+  ],
+  "visual_characteristics": [
+    "Soft Color Palette",
+    "Elegant Typography",
+    "Fluid Layout",
+    "Artistic Illustration",
+    "Text-Centric",
+    "Readability Focus"
+  ]
+}

src/data/designs/011/style.css

@@ -0,0 +1,220 @@
+/* css Zen Garden submission 011 - 'meliorism' by Brett J. Gilbert - www.paragraphic.co.uk */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* 'tree' graphic adapted from 'Bending Tree' by Robert Priseman, used with permission */
+/* All other graphics copyright 2003, Brett J. Gilbert */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/*----------------------------------------*
+**  Global
+**----------------------------------------*/
+
+body {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  color: #000;
+  background: #f1f8f3 url(gradSky.jpg) repeat-x;
+  }
+div,p,h1,h2,h3,ul,li {
+  margin: 0;
+  padding: 0;
+  }
+h1, h2, h3 {
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  }
+
+/*----------------------------------------*
+**  Layout
+**----------------------------------------*/
+
+.page-wrapper {
+  position: relative;
+  width: 760px;
+  margin: 0 auto;
+  text-align: left;
+  }
+.intro {
+  position: absolute;
+  top: 28px;
+  left: 0;
+  width: 310px;
+  }
+.supporting {
+  width: 690px;
+  }
+.sidebar {
+  position: absolute;
+  top: 40px;
+  left: 585px;
+  width: 235px;
+  }
+
+/*----------------------------------------*
+**  Links
+**----------------------------------------*/
+
+a:link,
+a:visited { color: #49f; background-color: transparent; text-decoration: none; }
+a:hover   { color: #f00; background-color: transparent; text-decoration: none; }
+
+.summary p:last-child a:link,
+.summary p:last-child a:visited { color: #348633; background-color: transparent; }
+.summary p:last-child a:hover   { color: #f00; background-color: transparent; }
+
+footer a:link,
+footer a:visited { color: #348633; background-color: transparent; }
+footer a:hover   { color: #f00; background-color: transparent; }
+
+.sidebar a.designer-name:link,
+.sidebar a.designer-name:visited { color: #fa5; background-color: transparent; }
+.sidebar a.designer-name:hover   { color: #f00; background-color: transparent; }
+
+/*----------------------------------------*
+**  .intro
+**----------------------------------------*/
+
+.intro {
+  font: italic 11px/150% Georgia, Times, "Times New Roman", serif;
+  color: #888;
+  background-color: transparent;
+  }
+header h1 {
+  margin-left: 4px; 
+  background: transparent url(introGarden.gif) no-repeat 0 0;
+  width: 115px; 
+  height: 12px; 
+  }
+header h2 {
+  margin-top: 80px; 
+  background: transparent url(introBeauty.gif) no-repeat 0 0; 
+  width: 195px; 
+  height: 73px; 
+  }
+.summary p:first-child {
+  margin: 5px 0 55px 4px;
+  color: #fa0;
+  background-color: transparent;
+  line-height: 160%;
+  }
+.summary p:last-child {
+  margin: 0 150px 0 4px;
+  padding: 5px 25px 5px 10px;
+  background: transparent url(gradGreen.jpg) repeat-y;
+  border-left: 1px solid #a7d9a8;
+  color: #888;
+  line-height: 130%;
+  }
+.preamble {
+  margin-left: 4px;
+  padding: 20px 0 0 15px;
+  border-left: 1px solid #a7d9a8;
+  }
+.preamble h3 {
+  background: transparent url(introEnlightenment.gif) no-repeat 0 0; 
+  width: 138px; 
+  height: 37px; 
+  }
+.preamble p {
+  margin: 10px 140px 0 0;
+  }
+
+/*----------------------------------------*
+**  .supporting
+**----------------------------------------*/
+
+.supporting {
+  padding: 430px 0 40px 0;
+  font: 13px/140% Georgia, Times, "Times New Roman", serif;
+  color: #888;
+  background: transparent url(textBack.jpg) no-repeat 0 40px;
+  }
+.supporting p {
+  margin: 0 125px 10px 221px;
+  }
+.supporting h3 {
+  margin: 25px 0 6px 220px;
+  width: 206px; 
+  height: 21px; 
+  }
+.explanation h3   { background: transparent url(textAbout.gif)         no-repeat 0 0; margin-top: 0; }
+.participation h3 { background: transparent url(textParticipation.gif) no-repeat 0 0; }
+.benefits h3      { background: transparent url(textBenefits.gif)      no-repeat 0 0; }
+
+/*----------------------------------------*
+**  .supporting > .requirements
+**----------------------------------------*/
+
+.requirements {
+  margin: 30px 0 0 221px;
+  padding: 0 0 15px 0;
+  border-left: 1px solid #a7d9a8;
+  font: italic 11px/150% Georgia, Times, "Times New Roman", serif;
+  color: #888;
+  background-color: transparent;
+  }
+.requirements h3 {
+  margin: 0 0 13px 0;
+  background: transparent url(textRequirements.jpg) no-repeat 0 0;
+  width: 175px;
+  height: 25px;
+  }
+.requirements p {
+  margin: 9px 0 0 15px;
+  }
+
+/*----------------------------------------*
+**  .supporting > footer
+**----------------------------------------*/
+
+footer {
+  margin: 0 0 0 221px;
+  padding: 4px 0 5px 15px;
+  background: transparent url(gradGreen.jpg) repeat-y; 
+  border-left: 1px solid #a7d9a8;
+  font: italic 11px/140% Georgia, Times, "Times New Roman", serif;
+  }
+
+/*----------------------------------------*
+**  .sidebar
+**----------------------------------------*/
+
+.sidebar {
+  border-left: 1px solid #8bf;
+  font: italic 11px/130% Georgia, Times, "Times New Roman", serif;
+  color: #999;
+  background: transparent url(linksBack.jpg) no-repeat;
+  }
+.design-selection h3 {
+  background: transparent url(linksSelect.gif) no-repeat 0 0; 
+  margin: 240px 0 10px 14px; 
+  width: 118px; 
+  height: 73px; 
+  }
+div.design-selection {
+  margin-bottom: 50px;
+  }
+.sidebar ul {
+  margin-left: 15px;
+  }
+.sidebar li {
+  list-style-type: none;
+  margin-top: 5px;
+  }
+.zen-resources h3,
+#lfavorites h3,
+.design-archives h3 {
+  margin: 25px 0 8px 0; 
+  width: 175px; 
+  height: 25px; 
+  }
+.zen-resources h3 { background: transparent url(linksResources.jpg) no-repeat 0 0; }
+#lfavorites h3 { background: transparent url(linksFavorites.jpg) no-repeat 0 0; }
+.design-archives h3  { background: transparent url(linksArchives.jpg)  no-repeat 0 0; }

src/data/designs/012/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "012",
+  "url": "https://www.csszengarden.com/012",
+  "css_url": "https://www.csszengarden.com/012/012.css",
+  "description": "The design features a dark and futuristic aesthetic with a strong emphasis on the color combination of black and yellow/orange. The layout includes sections for navigation and informational content, using a structured grid that balances text blocks with vibrant background graphics. The style is reminiscent of a sci-fi interface, creating an engaging and modern visual experience.",
+  "categories": [
+    "Futuristic",
+    "Dark Theme",
+    "Tech-oriented",
+    "Informational",
+    "Structured Layout"
+  ],
+  "visual_characteristics": [
+    "Dark Background",
+    "Contrast Highlights",
+    "Structured Grid",
+    "Modern Typography",
+    "Vibrant Graphics"
+  ]
+}

src/data/designs/012/style.css

@@ -0,0 +1,317 @@
+/* css Zen Garden submission 012 - 'TechnOhm' by Joshua Ambrutis - http://www.visualcss.com/ */
+/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/  */
+/* All associated graphics copyright 2003, Joshua Ambrutis */
+
+
+/* IMPORTANT */
+/* This design is not a template. You may not reproduce it elsewhere without the designer's written permission. */
+/* The CSS itself may freely be used for anything you wish, but the associated graphics belong to the designer. */
+/* What you may use - .css files. What you may not use - .jpg, .gif, and .png files. */
+
+
+/* I've tried to keep the CSS in the sequence which I built it in... just to give another perspective 
+of how others tackle this, you'll see in some spots I'll define an elements main box just to get it 
+in the right place etc.. then refine it with specifics later in the stylesheet.  I'm not saying this is right, 
+just the way I usually go about it.   There are also comments thrown in here and there to hopefully
+explain some of the strangeness */
+
+body {
+	margin: 0px;
+	padding: 0px;
+	background: url(to_pageback.gif) repeat fixed;
+	color: #CCCCCC;
+	font: 76% Arial, Helvetica, sans-serif;
+	text-align: center;
+}
+
+div, p, ul, li, h1, h2, h3, h4, h5, h6 { margin: 0px; padding: 0px; }
+/* Why do I do that?  ...hmm.. since switching from Tables to CSS, I've learned it is easier 
+for MY feeble brain to lay out the design first with just colored boxes THEN paint it in photoshop, this just helps me 
+to get the layout of the elements first.  Then I refine theses values with more specifics through 
+IDs and Classes when the graphics call for it, in my case the barebones basic layout comes 
+first with designs in my head BEFORE I open PhotoShop... but that's just me */
+
+h1, h2, h3, h4, h5, h6 { color: #FFAE00; }
+.page-wrapper {
+	margin: 0px auto 60px;
+	width: 760px;
+	border-top: 0px solid #000000;
+	border-right: 2px solid #000000;
+	border-bottom: 2px solid #000000;
+	border-left: 2px solid #000000;
+	padding: 0px 0px 150px;
+	background: #404040 url(bandwidthkiller.jpg) no-repeat center bottom;
+	text-align: left;
+	position: relative;
+}
+header h1 {
+	margin-bottom: 12px;
+	background: url(to_header_01.jpg) no-repeat;
+	height: 186px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+/* Above: That's just for dumping the text allowing the backround image in it's containing element to show through*/
+
+header h2 {
+	width: 261px;
+	background: url(to_beauty.gif) no-repeat;
+	position: absolute;
+	height: 17px;
+	top: 2px;
+	right: 5px;
+	cursor: text; /* just goofing off */
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+}
+header { position: relative; }
+.summary {
+	margin: 0px;
+	border: 0px none;
+	padding: 0px;
+	width: 220px;
+	background: url(to_sumarytop_02.jpg) no-repeat;
+	position: absolute;
+	z-index: 1;
+	left: 0px;
+	height: 266px;
+}
+.preamble {
+	margin: 10px 0px 30px 235px;
+	width: 510px;
+	border: 2px solid #000000;
+	padding: 10px 0px;
+	background: #60676F url(zen-image.jpg) repeat center top;
+	text-align: center;
+	position: relative;
+	top: 0px;
+	left: 0px;
+	z-index: 3;
+}
+.preamble p {
+	padding: 0px 0px 1.3em;
+	margin: 0px auto;
+	width: 320px;
+	color: #F2F2F2;
+	font: bold 1.2em/1em "Trebuchet MS", Arial, Helvetica, sans-serif;
+	letter-spacing: 0.08em;
+	text-align: left;
+}
+.preamble p:nth-child(4) { padding-bottom: 0px; }
+.preamble h3 {
+	width: 400px;
+	margin: 0px;
+	padding: 0px 0px 0px 34px;
+	background: url(to_h3back_04.gif) no-repeat left top;
+	font-size: 16px;
+	line-height: 24px;
+	text-align: left;
+	position: absolute;
+	top: -24px;
+	z-index: 1;
+	left: -3px;
+	height: 23px;
+}
+.supporting {
+	margin: 0px 0px 0px 235px;
+	width: 510px;
+	padding: 0px;
+	position: relative;
+}
+.sidebar {
+	margin: 7em 10px 0px 12px;
+	padding: 0px;
+	width: 200px;
+	background: url(ani2.gif) no-repeat;  /* this is just here as a preloader for the nav mouseover to kill the delay when it's first hit.. it can't be seen in this position because of an overlaying background image*/
+	position: absolute;
+	left: 0px;
+	top: 360px;
+	z-index: 2;
+}
+.supporting p { padding: 5px 12px 1em; }
+.supporting div {
+	border: 1px solid #000000;
+	padding: 0px;
+	margin: 22px 0px 40px;
+	width: 510px;
+	background: #61605F;
+	position: relative;
+	z-index: 2;
+}
+.supporting h3 {
+	width: 400px;
+	margin: 0px;
+	padding: 0px 0px 0px 34px;
+	background: url(to_h3back_04.gif) no-repeat left top;
+	font-size: 16px;
+	line-height: 24px;
+	position: absolute;
+	top: -24px;
+	z-index: 1;
+	height: 23px;
+	left: -2px;
+}
+.intro a {
+	color: #FFCC00;
+	font-weight: bold;
+	text-decoration: none;
+}
+.supporting a {
+	color: #FFAE00;
+	font-weight: bold;
+	text-decoration: none;
+}
+.supporting a:hover { border-bottom: 2px dashed #FFAE00; color: #CCCCCC; }
+.supporting a:active { border-bottom: 2px dashed #333333; background: #5A6269; }
+.supporting .requirements {
+	margin-bottom: 0px;
+	background: #61605F url(bandwidthkiller-alpha.jpg) no-repeat center bottom;
+}
+/* the background image above is what gives the transparency effect, 
+it's just a carefully cut out chunk of the .page-wrapper divs background image
+with a semi-transparent overlay on it.   Oh... I can't wait for true PNG surrport*/
+
+.supporting footer {
+	width: 200px;
+	border-top: 0px none #000000;
+	border-right: 0px none #000000;
+	border-bottom: 1px solid #000000;
+	border-left: 0px none #000000;
+	padding-top: 36px;
+	padding-bottom: 12px;
+	margin: 0px;
+	background: transparent url(to_footerback_07.gif) no-repeat left top;
+	text-align: center;
+	position: relative;
+	left: -220px;
+	top: -64px;
+}
+.summary p {
+	margin: 0px 20px 10px 25px;
+	color: #A3A3A3;
+	font: bolder small-caps 1.1em/1em "Trebuchet MS", Arial, Helvetica, sans-serif;
+}
+.summary p:first-child {
+	margin-top: 20px;
+	border: 1px solid #23282C;
+	padding: 10px;
+	color: #FFAE00;
+}
+.summary p:last-child {
+	color: #999999;
+	font-weight: normal;
+	text-align: center;
+}
+.summary p a {
+	color: #CCCCCC;
+	font-weight: normal;
+	text-decoration: none;
+}
+.design-selection, #lfavorites, .design-archives, .zen-resources {
+	border: 1px solid #000000;
+	padding: 0px;
+	margin: 0px 0px 60px;
+	background: #60676F;
+	font-size: .9em;
+	position: relative;
+}
+.sidebar h3 {
+	width: 200px;
+	border-top: 0px #000000;
+	border-right: 1px solid #000000;
+	border-bottom: 0px #000000;
+	border-left: 0px #000000;
+	margin: 0px;
+	padding: 0px;
+	background: url(to_h3back_04.gif) no-repeat left top;
+	font-size: 16px;
+	line-height: 24px;
+	position: absolute;
+	top: -24px;
+	z-index: 1;
+	left: -2px;
+	height: 23px;
+
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.design-selection a.designer-name {
+	margin: 0px 0px -15px; /* seemed to have to do that because of the extra   in each li item */
+	padding: 0px 15px 0px 0px;
+	display: inline;
+	background-image: none;
+	color: #FFCC00;
+	font-weight: normal;
+	font-variant: normal;
+	font-size: 1em;
+	text-decoration: none;
+	text-transform: capitalize;
+	text-align: center;
+}
+/* The following 4 divs all use the same background file...
+ it's larger than it needs to be to allow the text to resize PLUS you can 
+ use the background-position to offset it in different divs for the illusion 
+ of more than one file without the bandwith loss*/
+ 
+.design-selection {
+	background: url(to_leftcol_02.jpg) repeat-y -50px -60px;
+	color: #999999;
+}
+.design-selection h3 {
+	text-indent: 34px;
+}
+.zen-resources {
+	background: url(to_leftcol_02.jpg) no-repeat -5px -20px;
+	text-align: left;
+}
+.design-archives {
+	background: url(to_leftcol_02.jpg) no-repeat -40px -220px;
+}
+/* Bahaaa!  Somebody switched the menus to an unordered list structure, 
+good bye spans! I have to jump back a few 
+steps here and do the lists, I'll try to reorder the css later to make incremental sense */
+.sidebar ul { list-style: none; text-align: center; }
+.sidebar li { margin: 0px; padding: 6px 0px; }
+.sidebar a {
+	padding-left: 32px;
+	margin-left: 6px;
+	display: block;
+	background: url(ani1.gif) no-repeat left center;
+	color: #BBBBBB;
+	font-weight: bold;
+	font-size: 1.1em;
+	text-transform: uppercase;
+	text-decoration: none;
+	text-align: left;
+}
+.sidebar a:hover {
+	background: url(ani2.gif) no-repeat left center;
+	color: #EBEBEB;
+}
+.design-selection a.designer-name:hover {
+	background: none;
+	color: #CCCCCC;
+	font-style: italic;
+	text-decoration: none;
+}
+.sidebar .zen-resources a {
+	margin: 0px 0px -10px;
+	padding: 0px;
+	display: inline;
+	background: url(none);
+	text-transform: capitalize;
+}
+.sidebar .zen-resources ul { margin: 0px; padding-left: 15px; text-align: left; }
+/* Stupid IE5, almost made it without a hack, but don't have time figure 
+out how to get rid of extra pixels from the border or even if I can without 
+resorting to a hack.  By the way, this is called the SBMH short for Simple
+Box Model Hack, just Google it for more info if you need*/
+.sidebar h3 { \left: -1px; lef\t: -2px; \width: 201px; w\idth: 200px; }
+

src/data/designs/013/metadata.json

@@ -0,0 +1,20 @@
+{
+  "id": "013",
+  "url": "https://www.csszengarden.com/013",
+  "css_url": "https://www.csszengarden.com/013/013.css",
+  "description": "The design showcases a blend of modern and vintage aesthetics with a primarily neutral color palette accented by subtle decorative details. Featuring evenly spaced typography that guides the reader down the page, it integrates ornate flourishes that add elegance to key headings. The minimalistic sidebar juxtaposes the main text block, providing a functional and complementary contrast. The overall layout preserves clarity and readability while incorporating decorative elements that enhance visual interest without overwhelming the content.",
+  "categories": [
+    "web aesthetics",
+    "typography design",
+    "vintage style",
+    "content layout",
+    "minimalist design"
+  ],
+  "visual_characteristics": [
+    "neutral color palette",
+    "elegant flourishes",
+    "decorative typography",
+    "balanced whitespace",
+    "ornate headings"
+  ]
+}