diff --git a/src/chains/design_rag.py b/src/chains/design_rag.py deleted file mode 100644 index 9391e187fb616fab530bc4e6915d471e7139875e..0000000000000000000000000000000000000000 --- a/src/chains/design_rag.py +++ /dev/null @@ -1,160 +0,0 @@ -from langchain_core.runnables import RunnablePassthrough -from langchain_core.output_parsers import StrOutputParser -from langchain_openai import ChatOpenAI, OpenAIEmbeddings -from langchain.smith import RunEvalConfig, run_on_dataset -import os - -from langchain_community.vectorstores import FAISS -from langchain.prompts import ChatPromptTemplate -from pathlib import Path -import json -from typing import Dict, List, Optional -from langchain_core.documents import Document -from langchain.callbacks.tracers import ConsoleCallbackHandler - -class DesignRAG: - def __init__(self): - # Get API keys from environment - api_key = os.getenv("OPENAI_API_KEY") - if not api_key: - raise ValueError( - "OPENAI_API_KEY environment variable not set. " - "Please set it in HuggingFace Spaces settings." - ) - - # Initialize embedding model with explicit API key - self.embeddings = OpenAIEmbeddings( - openai_api_key=api_key - ) - - # Load design data and create vector store - self.vector_store = self._create_vector_store() - - # Create retriever with tracing - self.retriever = self.vector_store.as_retriever( - search_type="similarity", - search_kwargs={"k": 1}, - tags=["design_retriever"] # Add tags for tracing - ) - - # Create LLM with tracing - self.llm = ChatOpenAI( - temperature=0.2, - tags=["design_llm"] # Add tags for tracing - ) - - def _create_vector_store(self) -> FAISS: - """Create FAISS vector store from design metadata""" - try: - # Update path to look in data/designs - designs_dir = Path(__file__).parent.parent / "data" / "designs" - - documents = [] - - # Load all metadata files - for design_dir in designs_dir.glob("**/metadata.json"): - try: - with open(design_dir, "r") as f: - metadata = json.load(f) - - # Create document text from metadata with safe gets - text = f""" - Design {metadata.get('id', 'unknown')}: - Description: {metadata.get('description', 'No description available')} - Categories: {', '.join(metadata.get('categories', []))} - Visual Characteristics: {', '.join(metadata.get('visual_characteristics', []))} - """ - - # Load associated CSS - ''' - css_path = design_dir.parent / "style.css" - if css_path.exists(): - with open(css_path, "r") as f: - css = f.read() - text += f"\nCSS:\n{css}" - ''' - - # Create Document object with minimal metadata - documents.append( - Document( - page_content=text.strip(), - metadata={ - "id": metadata.get('id', 'unknown'), - "path": str(design_dir.parent) - } - ) - ) - except Exception as e: - print(f"Error processing design {design_dir}: {e}") - continue - - if not documents: - print("Warning: No valid design documents found") - # Create empty vector store with a placeholder document - return FAISS.from_documents( - [Document(page_content="No designs available", metadata={"id": "placeholder"})], - self.embeddings - ) - - print(f"Loaded {len(documents)} design documents") - # Create and return vector store - return FAISS.from_documents(documents, self.embeddings) - except Exception as e: - print(f"Error creating vector store: {str(e)}") - raise - - async def query_similar_designs(self, conversation_history: List[str], num_examples: int = 1) -> str: - """Find similar designs based on conversation history""" - from langsmith import Client - from langchain.callbacks.tracers import ConsoleCallbackHandler - - # Create LangSmith client - client = Client() - - # Create query generation prompt with tracing - query_prompt = ChatPromptTemplate.from_template( - """Based on this conversation history: - {conversation} - Extract the key design requirements and create a search query to find similar designs. - Focus on: - 1. Visual style and aesthetics mentioned - 2. Design categories and themes discussed - 3. Key visual characteristics requested - 4. Overall mood and impact desired - 5. Any specific preferences or constraints - Return only the search query text, no additional explanation or analysis.""" - ).with_config(tags=["query_generation"]) - - # Format conversation history - conversation_text = "\n".join([ - f"{'User' if i % 2 == 0 else 'Assistant'}: {msg}" - for i, msg in enumerate(conversation_history) - ]) - - # Generate optimized search query with tracing - query_response = await self.llm.ainvoke( - query_prompt.format( - conversation=conversation_text - ) - ) - - print(f"Generated query: {query_response.content}") - - # Get relevant documents with tracing - docs = self.retriever.get_relevant_documents( - query_response.content, - k=num_examples, - callbacks=[ConsoleCallbackHandler()] # Use standard callback instead - ) - - # Format examples - examples = [] - for doc in docs: - design_id = doc.metadata.get("id", "unknown") - content_lines = doc.page_content.strip().split("\n") - examples.append( - "\n".join(line.strip() for line in content_lines if line.strip()) + - f"\nURL: https://csszengarden.com/{design_id}" - ) - - return "\n\n".join(examples) \ No newline at end of file diff --git a/data/csszengardenhtml.html b/src/data/csszengardenhtml.html similarity index 100% rename from data/csszengardenhtml.html rename to src/data/csszengardenhtml.html diff --git a/data/csszengardenstyle.css b/src/data/csszengardenstyle.css similarity index 100% rename from data/csszengardenstyle.css rename to src/data/csszengardenstyle.css diff --git a/src/data/designs/001/metadata.json b/src/data/designs/001/metadata.json deleted file mode 100644 index df9ed6190c94abf7a68e468346496b2b2c9bc37e..0000000000000000000000000000000000000000 --- a/src/data/designs/001/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/001/screenshot_desktop.png b/src/data/designs/001/screenshot_desktop.png deleted file mode 100644 index 7b0e1e6418c8aaee08f57ffe21cd36c720e441c1..0000000000000000000000000000000000000000 --- a/src/data/designs/001/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fddb7b18ebd0b874d02682b1a8b1d38f0da01ed1fe143a1f85223182a9527e8a -size 505261 diff --git a/src/data/designs/001/screenshot_mobile.png b/src/data/designs/001/screenshot_mobile.png deleted file mode 100644 index 182652948ad41cc45abaa22661d6e85a507c5e14..0000000000000000000000000000000000000000 --- a/src/data/designs/001/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f12bd70b2aa9e536455d6152ece7aa321025bc5afc6ed1574ecf6fccdf374eca -size 587996 diff --git a/src/data/designs/001/style.css b/src/data/designs/001/style.css deleted file mode 100644 index 6136d397e29f5d687e9cfb5e428f51a2076b26eb..0000000000000000000000000000000000000000 --- a/src/data/designs/001/style.css +++ /dev/null @@ -1,207 +0,0 @@ -/* 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; - } \ No newline at end of file diff --git a/src/data/designs/002/metadata.json b/src/data/designs/002/metadata.json deleted file mode 100644 index 346fac7044b3618546b4a5745d6677bb9bc5700d..0000000000000000000000000000000000000000 --- a/src/data/designs/002/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/002/screenshot_desktop.png b/src/data/designs/002/screenshot_desktop.png deleted file mode 100644 index b85b9d1732fd18e440da9ac59c9e32d54cedfcca..0000000000000000000000000000000000000000 --- a/src/data/designs/002/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7f176aa172a455bad9c3676042583b13cb0523b1f063eb3ebaf6ba85b63869b7 -size 432137 diff --git a/src/data/designs/002/screenshot_mobile.png b/src/data/designs/002/screenshot_mobile.png deleted file mode 100644 index 387635f8e3164135c80b8274c7697afd90eb2e7d..0000000000000000000000000000000000000000 --- a/src/data/designs/002/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:50f6641e3b8e134302a78c83c4b791bd77c4655f6edb727c9bdb601862d35c79 -size 507357 diff --git a/src/data/designs/002/style.css b/src/data/designs/002/style.css deleted file mode 100644 index 7078cccbecf08df00ada022860798b72ca7d4791..0000000000000000000000000000000000000000 --- a/src/data/designs/002/style.css +++ /dev/null @@ -1,225 +0,0 @@ -/* 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; - } diff --git a/src/data/designs/003/metadata.json b/src/data/designs/003/metadata.json deleted file mode 100644 index 9a8398b7399c3dba80f5a6ece23664fa5616bffa..0000000000000000000000000000000000000000 --- a/src/data/designs/003/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/003/screenshot_desktop.png b/src/data/designs/003/screenshot_desktop.png deleted file mode 100644 index e53401241cb14030b164ac306fb52b8347b26d09..0000000000000000000000000000000000000000 --- a/src/data/designs/003/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9b85310d0d91f756b026ba2372cbe3b3bb782cabd7c7aa4fb891622d711af866 -size 1319150 diff --git a/src/data/designs/003/screenshot_mobile.png b/src/data/designs/003/screenshot_mobile.png deleted file mode 100644 index f0bd5371857077d945e3f7dd957bf1118102af62..0000000000000000000000000000000000000000 --- a/src/data/designs/003/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c5c5c647d836854817193276a89bd7925073dede5dac03e255774e707012fa64 -size 1078613 diff --git a/src/data/designs/003/style.css b/src/data/designs/003/style.css deleted file mode 100644 index 5c156b02129aa8a220224df427076441f5eeb84d..0000000000000000000000000000000000000000 --- a/src/data/designs/003/style.css +++ /dev/null @@ -1,228 +0,0 @@ -/* 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;*/ - } \ No newline at end of file diff --git a/src/data/designs/004/metadata.json b/src/data/designs/004/metadata.json deleted file mode 100644 index d0603f8a2a45678bae0588c0b983bb4e398e4cad..0000000000000000000000000000000000000000 --- a/src/data/designs/004/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/004/screenshot_desktop.png b/src/data/designs/004/screenshot_desktop.png deleted file mode 100644 index dad0caf60ac06423e0e08876c2f4927dcd14df90..0000000000000000000000000000000000000000 --- a/src/data/designs/004/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f4820102deb38d785f15a105c0b17ff47fc68217c3af7ab6a8e77e7ad8d65d18 -size 401648 diff --git a/src/data/designs/004/screenshot_mobile.png b/src/data/designs/004/screenshot_mobile.png deleted file mode 100644 index 8ddfb39636c0fcf4f3f37f2bcaf29db7b97147f5..0000000000000000000000000000000000000000 --- a/src/data/designs/004/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:59a990f8aaff36487583918a011eb7ff9131792608ad024fa8cc160c9fc4c5ed -size 382972 diff --git a/src/data/designs/004/style.css b/src/data/designs/004/style.css deleted file mode 100644 index 61f4b3b30f9b004e9b3758343a54873a200e9947..0000000000000000000000000000000000000000 --- a/src/data/designs/004/style.css +++ /dev/null @@ -1,192 +0,0 @@ -/* 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; - } \ No newline at end of file diff --git a/src/data/designs/005/metadata.json b/src/data/designs/005/metadata.json deleted file mode 100644 index edc751b622020128d6e2b6d394432a1dc2d9a87c..0000000000000000000000000000000000000000 --- a/src/data/designs/005/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/005/screenshot_desktop.png b/src/data/designs/005/screenshot_desktop.png deleted file mode 100644 index b8ac5d393996e2b4bbc1aac9b300c2696ed0c6af..0000000000000000000000000000000000000000 --- a/src/data/designs/005/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:223b7e9ce6e9795b90d78ce3afaa71379a69b281ef2febe2a464ad55d2b116bc -size 513789 diff --git a/src/data/designs/005/screenshot_mobile.png b/src/data/designs/005/screenshot_mobile.png deleted file mode 100644 index d647cc960694a9500ab15369836fcc22a1e2937f..0000000000000000000000000000000000000000 --- a/src/data/designs/005/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ce0d142bf917b1372a84029dcd90101ba97785f3b80b9f7c8d42b0a9ff3e3ce1 -size 433058 diff --git a/src/data/designs/005/style.css b/src/data/designs/005/style.css deleted file mode 100644 index 4248627d41883a671adffe4ab1fb43b6cda465fe..0000000000000000000000000000000000000000 --- a/src/data/designs/005/style.css +++ /dev/null @@ -1,220 +0,0 @@ -/* 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; - } \ No newline at end of file diff --git a/src/data/designs/006/metadata.json b/src/data/designs/006/metadata.json deleted file mode 100644 index 459e02b1ebbadbd50a97f5098cc80203bc9aabe7..0000000000000000000000000000000000000000 --- a/src/data/designs/006/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/006/screenshot_desktop.png b/src/data/designs/006/screenshot_desktop.png deleted file mode 100644 index 6c3f65197068488423e9d249ed32ecddffd76860..0000000000000000000000000000000000000000 --- a/src/data/designs/006/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3416dd95eeffb379e74398926634044d76318ea57f1ea4682a72f68656cb0e0e -size 622451 diff --git a/src/data/designs/006/screenshot_mobile.png b/src/data/designs/006/screenshot_mobile.png deleted file mode 100644 index 590323e2762305d504742f2497cea58abe3b4afa..0000000000000000000000000000000000000000 --- a/src/data/designs/006/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8c4bcd170280361f5f870df5f245ebe6758cc7ae3e7834fbf904deb70b99b20e -size 598235 diff --git a/src/data/designs/006/style.css b/src/data/designs/006/style.css deleted file mode 100644 index a7c25ef2ea6fc81e7905807fe3f3e982fbfe1157..0000000000000000000000000000000000000000 --- a/src/data/designs/006/style.css +++ /dev/null @@ -1,198 +0,0 @@ -/* 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; - } diff --git a/src/data/designs/007/metadata.json b/src/data/designs/007/metadata.json deleted file mode 100644 index b976bf121c36d14f99b8d6f7864f9236f6d3fcc4..0000000000000000000000000000000000000000 --- a/src/data/designs/007/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/007/screenshot_desktop.png b/src/data/designs/007/screenshot_desktop.png deleted file mode 100644 index ad9725d2db0e97939773cbc8e28161001517888a..0000000000000000000000000000000000000000 --- a/src/data/designs/007/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9153167f7d8abaab0db785bef25e7b22b2e62d29a8a8635cf3581a76cb99aa46 -size 528882 diff --git a/src/data/designs/007/screenshot_mobile.png b/src/data/designs/007/screenshot_mobile.png deleted file mode 100644 index 2426ba24368145c4133ef4f52b5954766caee49b..0000000000000000000000000000000000000000 --- a/src/data/designs/007/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6c34e546ceea75865ff6b8f9123c80bbe34b702b7eb1d6f61ebad8038d260f15 -size 489124 diff --git a/src/data/designs/007/style.css b/src/data/designs/007/style.css deleted file mode 100644 index 97967ccc67bd6e5379bbd63daf917833da8d3406..0000000000000000000000000000000000000000 --- a/src/data/designs/007/style.css +++ /dev/null @@ -1,276 +0,0 @@ -/* 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; - } \ No newline at end of file diff --git a/src/data/designs/008/metadata.json b/src/data/designs/008/metadata.json deleted file mode 100644 index 45092a793d25051478d45aa58266ba350c7da5ca..0000000000000000000000000000000000000000 --- a/src/data/designs/008/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/008/screenshot_desktop.png b/src/data/designs/008/screenshot_desktop.png deleted file mode 100644 index 435ccf4d004d719ae2c5a3068d0b95931042a782..0000000000000000000000000000000000000000 --- a/src/data/designs/008/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:684222b3b6b16bf990c10ed7b130c2fd0fbd4a4a64d24854aee0a2880872c1c5 -size 1152416 diff --git a/src/data/designs/008/screenshot_mobile.png b/src/data/designs/008/screenshot_mobile.png deleted file mode 100644 index ada3173c3755b27020531bb166cc65aa18c020da..0000000000000000000000000000000000000000 --- a/src/data/designs/008/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:29564f5b25f205adb206922921399ae7fddc2d229906972304023fbee8729512 -size 865211 diff --git a/src/data/designs/008/style.css b/src/data/designs/008/style.css deleted file mode 100644 index 2d34ed7c68a0721b6ac036d72839584774ab37a6..0000000000000000000000000000000000000000 --- a/src/data/designs/008/style.css +++ /dev/null @@ -1,113 +0,0 @@ -/* 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; - } - - .sidebar ul { - margin: 0px; - padding: 0px; - } - -.sidebar li { - list-style-type: none; - display: inline; - } diff --git a/src/data/designs/009/metadata.json b/src/data/designs/009/metadata.json deleted file mode 100644 index 57755b703efc8a8f2e042bcc311ec54996e50f96..0000000000000000000000000000000000000000 --- a/src/data/designs/009/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/009/screenshot_desktop.png b/src/data/designs/009/screenshot_desktop.png deleted file mode 100644 index be83ecd30bb8fd611a93c2e322ec4a516102d8c8..0000000000000000000000000000000000000000 --- a/src/data/designs/009/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2b11c7833d1f43e01fcd9092dd83a6b733908b82aceb7634d7944ebedfa30cec -size 848995 diff --git a/src/data/designs/009/screenshot_mobile.png b/src/data/designs/009/screenshot_mobile.png deleted file mode 100644 index e7ab44198c6b38ee00302ded90e96f7db388ea92..0000000000000000000000000000000000000000 --- a/src/data/designs/009/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:271ee3e903c6f2794542b7a3f26beab9999cfbe970800924c3fd26d11ed072d8 -size 746383 diff --git a/src/data/designs/009/style.css b/src/data/designs/009/style.css deleted file mode 100644 index 1d7cb4c042f1a12202d866d7fabfdb7dae46423e..0000000000000000000000000000000000000000 --- a/src/data/designs/009/style.css +++ /dev/null @@ -1,318 +0,0 @@ -/* 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; - } -} \ No newline at end of file diff --git a/src/data/designs/010/metadata.json b/src/data/designs/010/metadata.json deleted file mode 100644 index ba7527951f11890c03a33d7371ac9c0b49f89413..0000000000000000000000000000000000000000 --- a/src/data/designs/010/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/010/screenshot_desktop.png b/src/data/designs/010/screenshot_desktop.png deleted file mode 100644 index 65f6178db5e85bd32bf72cc5b6ab6e6ff58956e5..0000000000000000000000000000000000000000 --- a/src/data/designs/010/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:28c6fd944f87fcb17e9cb0f9659f312e8a44cee0731d837e0bd953d85276cf65 -size 475702 diff --git a/src/data/designs/010/screenshot_mobile.png b/src/data/designs/010/screenshot_mobile.png deleted file mode 100644 index aa1a405ba0bf879704218997bf94b148d4da2b0b..0000000000000000000000000000000000000000 --- a/src/data/designs/010/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a1da9a8b9d1006ade6ab6eacb79b206f42b21d6324327a1f42f6ea1a024e2a59 -size 428848 diff --git a/src/data/designs/010/style.css b/src/data/designs/010/style.css deleted file mode 100644 index 836d5d7fe0dbedbe06bd1de8cb36018429ccabd3..0000000000000000000000000000000000000000 --- a/src/data/designs/010/style.css +++ /dev/null @@ -1,235 +0,0 @@ -/* 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; - } \ No newline at end of file diff --git a/src/data/designs/011/metadata.json b/src/data/designs/011/metadata.json deleted file mode 100644 index d6fede8122ea861c86faa327774248d422a24333..0000000000000000000000000000000000000000 --- a/src/data/designs/011/metadata.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/011/screenshot_desktop.png b/src/data/designs/011/screenshot_desktop.png deleted file mode 100644 index f29c05a848a1dcc189ec653670091a2b50450141..0000000000000000000000000000000000000000 --- a/src/data/designs/011/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:08849c9278a4eb7f29e6d16364051789356993288576bdd7a17d5e8433813ff0 -size 732712 diff --git a/src/data/designs/011/screenshot_mobile.png b/src/data/designs/011/screenshot_mobile.png deleted file mode 100644 index 3e9d9e371b93f636e836013ec58ff8d67e2e605c..0000000000000000000000000000000000000000 --- a/src/data/designs/011/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b2a0be3149dab13242744de7ac2a4c6d9895a7422e1f5bf751ebf31e90a1bc83 -size 784536 diff --git a/src/data/designs/011/style.css b/src/data/designs/011/style.css deleted file mode 100644 index a4ad3b4e63f70df2e4b5bf9f8f0ebd6ed37623da..0000000000000000000000000000000000000000 --- a/src/data/designs/011/style.css +++ /dev/null @@ -1,220 +0,0 @@ -/* 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; } diff --git a/src/data/designs/012/metadata.json b/src/data/designs/012/metadata.json deleted file mode 100644 index ee4ecab2612076007abcb7d9d11b87ad5b79df9f..0000000000000000000000000000000000000000 --- a/src/data/designs/012/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/012/screenshot_desktop.png b/src/data/designs/012/screenshot_desktop.png deleted file mode 100644 index 587f5bddad5b0703b2d0c8acc4dc0ff2b1cfb4f9..0000000000000000000000000000000000000000 --- a/src/data/designs/012/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8c74512b9393f26a3ea3a69d430da1c16379becd885e7c9dfce17a542ceac277 -size 1083707 diff --git a/src/data/designs/012/screenshot_mobile.png b/src/data/designs/012/screenshot_mobile.png deleted file mode 100644 index 6f720118313aa677bcd64f29584213e1579a4a5e..0000000000000000000000000000000000000000 --- a/src/data/designs/012/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:60af5bf70b031e7e3ab0442293deaa20f3bdeb4207a8641b7f15f9bf94c5f97e -size 588023 diff --git a/src/data/designs/012/style.css b/src/data/designs/012/style.css deleted file mode 100644 index 753dd23c967761aa07487821f3914ab8dc617890..0000000000000000000000000000000000000000 --- a/src/data/designs/012/style.css +++ /dev/null @@ -1,317 +0,0 @@ -/* 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; } - diff --git a/src/data/designs/013/metadata.json b/src/data/designs/013/metadata.json deleted file mode 100644 index ba40e87427774b7cfe464b8bbb3a9996627d06de..0000000000000000000000000000000000000000 --- a/src/data/designs/013/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "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" - ] -} \ No newline at end of file diff --git a/src/data/designs/013/screenshot_desktop.png b/src/data/designs/013/screenshot_desktop.png deleted file mode 100644 index 11c401520ddce9ed91c1213e1366b1c45764ac92..0000000000000000000000000000000000000000 --- a/src/data/designs/013/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3614c3229248e4a2fd87588584b8db6c823a300b403bdb1cc3868cf9730842a8 -size 509493 diff --git a/src/data/designs/013/screenshot_mobile.png b/src/data/designs/013/screenshot_mobile.png deleted file mode 100644 index 6c2541621c162b5142aae9550fc8d11b241f80dd..0000000000000000000000000000000000000000 --- a/src/data/designs/013/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4675392ec9ae5b45b28d8fb7f739951f72c76c1d8c7fdab3393919579b4a36f7 -size 487020 diff --git a/src/data/designs/013/style.css b/src/data/designs/013/style.css deleted file mode 100644 index 6b761b08c3eb6cb02f97081bf325fbb10d438a61..0000000000000000000000000000000000000000 --- a/src/data/designs/013/style.css +++ /dev/null @@ -1,260 +0,0 @@ -/* css Zen Garden submission 013 - 'Coastal Breeze' 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*/ - - -/* 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. */ - - -/* These illustrations were done by hand in Photoshop. No photos harmed in the - making of this design. They were put together about two years ago for a former - portfolio site, and luckily I still had the .PSD on hand. It felt like a good - idea to convert this into a Zen Garden design. - - It has been said that this particular combination of objects has a west-coast - British Columbia feel to it. I'm inclined to agree. - */ - -/* basic elements */ -body { - font: 8pt/16pt georgia, serif; - text-align: center; - color: #464128; - background: #fff url(coastal2.jpg) bottom center no-repeat; - margin: 0px; -} -p { - font: 8pt/16pt georgia, serif; - color: #464128; - background-color: transparent; - margin-top: 0px; - text-align: right; -} -h3 { - font: bold 8pt/16pt georgia, serif; - text-align: right; - margin-bottom: 0px; - background: transparent url(futz.gif) center right no-repeat; - padding-right: 14px; -} -a { - color: #464128; - background-color: transparent; -} -a:visited { - color: #000; - background-color: transparent; -} -a:hover { - color: #A29D66; - background-color: transparent; -} -abbr { - border-bottom: none; - } - - -/* specific elements */ -.intro { - background: transparent url(coastal.jpg) top left no-repeat; - width: 700px; - margin-left: auto; - margin-right: auto; -} -header { - text-align: right; - padding: 70px 60px 0px 0px; -} -header h1 { - background: transparent url(papier.jpg) top left no-repeat; - width: 192px; - height: 70px; - margin: 0px 0px 0px 448px;; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h2 { - background: transparent url(beauty.gif) top left no-repeat; - width: 83px; - height: 14px; - margin: 0px 90px 0px 477px; - position: relative; - top: -17px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.preamble { - position: relative; - top: -80px; - padding-right: 250px; - padding-left: 140px; - -} -.summary { - float: right; - text-align: left; - padding-right: 70px; - width: 230px; - voice-family: "\"}\""; - voice-family: inherit; - width: 160px; -} -/* over-clarified to fix IE5/Win */ -.summary p, .summary p:first-child, .summary p:last-child { - font: italic 13pt/18pt garamond, serif; - text-align: left; - color: #A29D66; - background-color: transparent; -} -.supporting { - margin-left: auto; - margin-right: auto; - padding-right: 250px; - padding-left: 140px; - position: relative; - top: -70px; - width: 700px; - voice-family: "\"}\""; - voice-family: inherit; - width: 310px; -} - - - -.sidebar { - font: italic 9pt/14pt garamond, georgia, serif; - text-transform: lowercase; - text-align: left; - color: #A29D66; - background-color: transparent; - position: absolute; - top: 33em; /*380px;*/ - left: 0px; - width: 100%; -} -.sidebar .wrapper { - padding-left: 470px; - padding-right: 70px; - margin-left: auto; - margin-right: auto; - width: 700px; - voice-family: "\"}\""; - voice-family: inherit; - width: 160px; -} -.sidebar h3 { - font: italic 12pt/15pt garamond, georgia, serif; - text-transform: capitalize; - color: #464128; - background-color: transparent; - text-align: left; - background-image: none; -} -.sidebar a { - font: italic 11pt/14pt garamond, georgia, serif; - color: #A29D66; - background-color: transparent; - text-decoration: none; -} -.sidebar a:hover { - color: #464128; - background-color: transparent; - text-decoration: underline; -} - -.sidebar a.designer-name { - font: italic 9pt/14pt garamond, georgia, serif; -} -.sidebar ul { - margin: 0px; - padding: 0px; -} -.sidebar li { - text-align: left; - list-style-type: none; -} - -.sidebar h3 { - margin-right: auto; - margin-left: 0px; - margin-top: 25px; - - text-indent: 125%; - white-space: nowrap; - overflow: hidden; -} -.sidebar h3.select { - width: 113px; - height: 19px; - background: transparent url(h-select.gif) top left no-repeat; -} -.sidebar h3.archives { - width: 134px; - height: 17px; - background: transparent url(h-archives.gif) top left no-repeat; -} -.sidebar h3.favorites { - width: 76px; - height: 23px; - background: transparent url(h-favorites.gif) top left no-repeat; - position: relative; - left: -10px; -} -.sidebar h3.resources { - width: 125px; - height: 13px; - background: transparent url(h-resources.gif) top left no-repeat; - position: relative; - left: -10px; -} - -footer a { - font: italic 11pt/14pt garamond, georgia, serif; - color: #A29D66; - background-color: transparent; - text-decoration: none; - padding-left: 15px; -} -footer a:hover { - color: #464128; - background: transparent url(fleurdelis.gif) center left no-repeat; - text-decoration: none; - border-bottom: dotted 1px #464128; -} - -.accesskey { - font-weight: bold; - text-decoration: underline; - } - - -/* extra bits on the last paragraph in each text block */ -.preamble p:nth-child(4), .explanation p:nth-child(3), .participation p:nth-child(4), .benefits p:nth-child(2), .requirements p:nth-child(5) { - background: transparent url(filler.gif) bottom center no-repeat; - padding-bottom: 25px; -} - -.extra1 { - text-align: center; - position: absolute; - top: 0px; - left: 0px; - width: 100%; -} -.extra1::before { - content: " "; - display: block; - width: 600px; - height: 82px; - margin-left: auto; - margin-right: auto; - background: transparent url(fleur.gif) top right no-repeat; -} diff --git a/src/data/designs/014/metadata.json b/src/data/designs/014/metadata.json deleted file mode 100644 index 0f6ee99e18cce40ab82d5a4f2abbc736117a105e..0000000000000000000000000000000000000000 --- a/src/data/designs/014/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "014", - "url": "https://www.csszengarden.com/014", - "css_url": "https://www.csszengarden.com/014/014.css", - "description": "The design employs a structured and harmonious use of earth tones to create a nostalgic and reflective mood while exploring the potential of CSS-based design. The layout maintains a clean, organized appearance, with clear, legible typography that enhances readability and navigation. A subtle use of textures in the background adds depth and a touch of sophistication, aligning with the theme of simplicity and elegance.", - "categories": [ - "web design", - "typography", - "color scheme", - "user experience", - "layout" - ], - "visual_characteristics": [ - "earth tone palette", - "structured layout", - "clear typography", - "subtle textures", - "retro aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/014/screenshot_desktop.png b/src/data/designs/014/screenshot_desktop.png deleted file mode 100644 index bb945875cf4777b15be47e795191d3d905d98cc8..0000000000000000000000000000000000000000 --- a/src/data/designs/014/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9de2668e36cf975e8dedcb76fa66b26092a808b2da096fcbcaf5ee043a2f4f0b -size 406557 diff --git a/src/data/designs/014/screenshot_mobile.png b/src/data/designs/014/screenshot_mobile.png deleted file mode 100644 index b9aa06597168845df28199fbc18160cdb8df9bef..0000000000000000000000000000000000000000 --- a/src/data/designs/014/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d07937025aa1f91b0e5a2ed52c81337f5818d085a46b44f5cb69d97797f6263e -size 564699 diff --git a/src/data/designs/014/style.css b/src/data/designs/014/style.css deleted file mode 100644 index 56807999f32f0bc2ad7de1e17483f37a8b9df32e..0000000000000000000000000000000000000000 --- a/src/data/designs/014/style.css +++ /dev/null @@ -1,289 +0,0 @@ -/* css Zen Garden submission 014 - 'Samuraai' by Minz Meyer, http://www.minzweb.de/ */ -/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ -/* All associated graphics copyright 2003, Minz Meyer */ - - -/* 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(background_body.jpg); - background-color: #000; - color: #D8E0BC; - margin-top: 10px; - margin-left: 50px; - margin-right: 50px; - margin-bottom: 10px; - padding: 0; - font: 12px/1.5 Verdana, sans-serif; -} - -/* Basic styles */ - -h3 { - background-color: #B1AD72; - color: inherit; - margin-top: 0; - border-right: 4px solid #818343; - border-bottom: 1px solid #818343; - height: 25px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -div.preamble p:nth-child(4) { - padding-bottom: 15px; -} - -/* Main div styling */ -div.page-wrapper { - background-color: #2F2F13; - color: inherit; - background-image: url(container_background.jpg); - background-position: right; - background-repeat: repeat-y; - border-left: 1px solid #8F8C4E; - border-bottom: 1px solid #8F8C4E; -} - -.intro { - position: relative; - overflow: hidden; -} - -header { - background-color: #000; - color: inherit; - background-image: url(umbrella.jpg); - background-repeat: no-repeat; - border-top: 1px solid #8F8C4E; - border-bottom: 1px solid #8F8C4E; - border-right: 1px solid #8F8C4E; - height: 50px; - margin-bottom: 15px; - overflow: hidden; -} - -header h1 { - margin-top: 0px; - margin-bottom: 0px; - width: 500px; - height: 46px; - float: left; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -header h2 { - background-image: url(beauty_background.gif); - background-repeat: no-repeat; - margin-top: 5px; - margin-left: 0px; - width: 348px; - height: 39px; - float: right; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -div.summary { - position: relative; - float:left; - width: 150px; - margin-top: -10px; - padding: 8px; - background-color: transparent; - color: inherit; -} - -div.summary p { - margin-top: 0px; - font: italic 14px Verdana, sans-serif; - text-align: center; -} - -div.summary p:last-child { - font: italic 11px Verdana, sans-serif; -} - -div.preamble { - border-bottom: 1px solid #8F8C4E; - margin-top: -16px; - margin-right: 222px; - background-image: url(background-preamble.jpg); - background-repeat: no-repeat; - background-color: #000; - color: inherit; - -} -div.preamble h3 { - background-image: url(preamble_h3_background.jpg); - background-repeat: no-repeat; - margin-top: 0px; - margin-left: 170px; -} - -div.preamble p { - padding-right: 30px; - margin-left: 200px; - color: inherit; - background-color: transparent; - font: 14px/1.6 Verdana, sans-serif; - text-align: justify; - width: auto; -} - -.supporting { - margin-top: 0px; -} - -div.explanation, div.participation, div.benefits, div.requirements { - margin-right: 222px; - margin-bottom: 30px; -} - - -.supporting p { - padding-left: 30px; - padding-right: 30px; -} - -div.explanation h3 { - background-image: url(explanation_h3_background.jpg); - background-repeat: no-repeat; -} - -div.participation h3 { - background-image: url(participation_h3_background.jpg); - background-repeat: no-repeat; -} - -div.benefits h3 { - background-image: url(benefits_h3_background.jpg); - background-repeat: no-repeat; -} - -div.requirements h3 { - background-image: url(requirements_h3_background.jpg); - background-repeat: no-repeat; -} - - -.sidebar { - position: absolute; - top: 62px; - right: 50px; - width: 220px; - background-color: transparent; - color: inherit; - font: 10px/1.5 Verdana, sans-serif; -} - -.sidebar h3.select { - background-color: #2F2F13; - background-image: url(select_h3_background.jpg); - background-repeat: no-repeat; - color: inherit; - margin-top: 0; - border-right: 4px solid #818343; - border-bottom: 1px solid #818343; - height: 25px; - -} - -.sidebar h3.resources { - background-image: url(resource_h3_background.jpg); - background-repeat: no-repeat; -} - -.sidebar h3.archives { - background-image: url(archives_h3_background.jpg); - background-repeat: no-repeat; -} - -.sidebar h3.favorites { - background-image: url(favorites_h3_background.jpg); - background-repeat: no-repeat; -} - -.sidebar h3 { - background-color: #2F2F13; - color: inherit; - margin-top: 20px; - border-right: 4px solid #818343; - border-bottom: 1px solid #818343; - height: 25px; - -} -.sidebar ul { - list-style: none; -} - -.sidebar li { - margin-left: -15px; - margin-bottom: 10px; - line-height: 1.5; -} - -a:link { - color: #9BB574; - background-color: transparent; - text-decoration: none; - font-weight: bold; - padding: 2px; - border-bottom: 1px solid; - line-height: 1.5; -} - -a:visited { - color: #C6D2B3; - background-color: transparent; - text-decoration: line-through; - font-weight: bold; - padding: 2px; - border-bottom: 1px solid; - line-height: 1.5; -} - -a:hover, a:focus { - color: #D8E2C7; - background-color: #828330; - text-decoration: none; - font-weight: bold; - padding: 2px; - border-bottom: 1px solid; - line-height: 1.5; -} - -footer { - clear: both; - background-color: #000; - color: inherit; - background-image: url(umbrella2.jpg); - background-repeat: no-repeat; - background-position: right; - border-top: 1px solid #8F8C4E; - border-right: 1px solid #8F8C4E; - height: 50px; - padding-left: 30px; - vertical-align: bottom; - overflow: hidden; -} - -.supporting footer a { - line-height: 40px; -} - -abbr { - border-bottom: none; - cursor: help; -} \ No newline at end of file diff --git a/src/data/designs/015/metadata.json b/src/data/designs/015/metadata.json deleted file mode 100644 index 6854a76fa2c5207821142372af98b136c9d058cb..0000000000000000000000000000000000000000 --- a/src/data/designs/015/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "015", - "url": "https://www.csszengarden.com/015", - "css_url": "https://www.csszengarden.com/015/015.css", - "description": "This design features an earthy and minimalistic aesthetic with a strong emphasis on natural colors and traditional calligraphy elements. The olive green background sets a serene tone, complemented by the use of light brown and cream hues. The layout includes a sidebar for navigation and a main content area, creating a balanced structure. The incorporation of Japanese-style typography adds an artistic flair, giving it an authentic and culturally rich appearance.", - "categories": [ - "minimalist", - "traditional", - "nature-inspired", - "cultural", - "text-based" - ], - "visual_characteristics": [ - "earthy color palette", - "calligraphy elements", - "balanced layout", - "serene mood", - "artistic typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/015/screenshot_desktop.png b/src/data/designs/015/screenshot_desktop.png deleted file mode 100644 index 3fe942a1997581e92c95727cb42752fabdb0324c..0000000000000000000000000000000000000000 --- a/src/data/designs/015/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4fe61a0fa9ff7be489ec076a8c4558fb423fec4c89b0db75f8f34bdef48b76d3 -size 374326 diff --git a/src/data/designs/015/screenshot_mobile.png b/src/data/designs/015/screenshot_mobile.png deleted file mode 100644 index 1c4e042abfaaddd5acabab22b5d5b29905260447..0000000000000000000000000000000000000000 --- a/src/data/designs/015/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b540be464888e86bc796e156f94ca5db78ef023f075961757f2d2df97605a9c2 -size 702219 diff --git a/src/data/designs/015/style.css b/src/data/designs/015/style.css deleted file mode 100644 index 32bd67353afe15247d7717b8e073d0ff8cee79ef..0000000000000000000000000000000000000000 --- a/src/data/designs/015/style.css +++ /dev/null @@ -1,336 +0,0 @@ -/* css Zen Garden submission 015 - 'boddhidarma' by Michael Angeles - http://studioid.com/ */ -/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ -/* All associated graphics copyright 2003, Michael Angeles */ - - -/* 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 and type */ - -html { - background: rgb(93, 105, 40) url(bg_boddhidarma2.gif) no-repeat top left; -} -/* basic elements */ -body { - font: 9pt/16pt verdana, helvetica, sans-serif; - color: #ffc; - margin: 0 0 30px 0; - } -p { - font: 9pt/16pt verdana, helvetica, sans-serif; - padding-bottom: 5px; - } -h3 { - font-size: 16pt; - letter-spacing: 1px; - margin: 0; - padding: 0; - color: #cc9; - } -a:link { - font-weight: bold; - text-decoration: none; - color: #fe9201; - } -a:visited { - font-weight: bold; - text-decoration: none; - color: #fe9201; - border: none; - } -a:hover, a:active { - color: #fe9201; - } - - -/* layout */ - -.page-wrapper { - text-align: left; - background: url(sig.gif) no-repeat bottom right; -} - -.intro { - min-width: 400px; - } - -/* 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 0 0 410px; - padding: 0 0 0 0; - width: 257px; - height: 18px; - background: transparent url(hd_zengarden.gif) no-repeat 0 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -header h2 { - padding: 0; - margin: 210px 0 0 410px; - width: 289px; - height: 70px; - background: transparent url(hd_beauty.gif) no-repeat 0 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.summary p:first-child { - position: absolute; - top: 30px; - left: 410px; - margin: 0; - padding: 0 50px 0 0; - font: 14pt/18pt verdana, helvetica, sans-serif; - text-transform: lowercase; - color: #869152; -} -.summary p:last-child { - position: absolute; - top: 850px; - left: 0; - width: 320px; - margin: 0; - padding: 15px 20px 15px 20px; - text-align: left; - font-size: 1.1em; - font-weight: bold; - background: #677235; -} - -.preamble { - margin: 10px 50px 40px 410px; - padding: 20px 0 40px 0; - border-top: 1px dotted #869152; - background: url(koi.gif) no-repeat bottom center; - } -.preamble h3 { - background: url(hd_enlighten.gif) no-repeat 0 0; - width: 301px; - height: 23px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.supporting { - margin: 0 50px 0 410px; - } -.explanation { - padding-bottom: 40px; - background: url(koi.gif) no-repeat bottom center; -} -.explanation h3 { - background: url(hd_about.gif) no-repeat 0 0; - width: 302px; - height: 19px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.participation { - margin-top: 20px; - padding-bottom: 40px; - background: url(koi.gif) no-repeat bottom center; -} -.participation h3 { - background: transparent url(hd_participation.gif) no-repeat 0 0; - width: 140px; - height: 23px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.benefits { - margin-top: 20px; - padding-bottom: 40px; - background: url(koi.gif) no-repeat bottom center; -} -.benefits h3 { - background: transparent url(hd_benefits.gif) no-repeat 0 0; - width: 106px; - height: 24px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.requirements { - margin-top: 20px; - padding-bottom: 40px; -} -.requirements h3 { - background: transparent url(hd_requirements.gif) no-repeat 0 0; - width: 155px; - height: 23px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -footer { - margin-top: 20px; -} -footer a:link, footer a:visited { - margin-right: 20px; - } - -/* navigation / links */ - -.sidebar { - position: absolute; - top: 940px; - left: 0; - width: 360px; - text-align: left; - padding: 0; - margin: 0; - font-size: .9em; -} - -/* linklist WITHOUT favorites */ -/* NOTE: keep this linklist CSS if favorites remains hidden */ -.design-selection { - clear: none; - float: left; - width: 180px; - padding: 0 19px 0 20px; - margin: 0 0 30px 0; - border-right: 1px solid #677235; - voice-family: "\"}\""; - voice-family: inherit; - width: 140px; - } -html>body .design-selection { - width: 140px; - } -.design-archives { - float: right; - width: 180px; - padding: 0 0 0 20px; - margin: 0 0 30px 0; - voice-family: "\"}\""; - voice-family: inherit; - width: 160px; - } -html>body .design-archives { - width: 160px; - } -.zen-resources { - float: left; - width: 170px; - padding: 0 0 0 20px; - margin: 0 0 30px 0; - voice-family: "\"}\""; - voice-family: inherit; - width: 160px; - } -html>body .zen-resources { - width: 160px; - } -/* /end linklist WITHOUT favorites */ - -/* linklist WITH #lfavorites */ -/* NOTE: in case you decide to uncomment #lfavorites div, comment the above link list CSS and uncomment the below -.design-selection { - float: left; - width: 150px; - padding: 0 19px 0 20px; - margin: 0 0 30px 0; - border-right: 1px solid #677235; -} -#lfavorites { - float: left; - width: 150px; - padding: 0 0 0 20px; - margin: 0 0 30px 0; -} -.design-archives { - float: left; - width: 150px; - padding: 0 19px 0 20px; - margin: 0 0 30px 0; - border-right: 1px solid #677235; -} -.zen-resources { - float: left; - width: 150px; - padding: 0 0 0 20px; - margin: 0 0 30px 0; -} -end linklist WITH #lfavorites */ - -.sidebar h3.select { - background: url(hd_select.gif); - margin: 0; - width: 96px; - height: 12px; - border: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar h3.archives { - background: url(hd_archives.gif); - margin: 0; - width: 53px; - height: 10px; - border: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar h3.resources { - background: url(hd_resources.gif); - margin: 0; - width: 66px; - border: 0; - height: 10px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar ul { - margin: 0px; - padding: 0px; -} -.sidebar li { - list-style-type: none; - display: block; - padding-top: 2px; - margin-bottom: 2px; -} -.sidebar li a:link { - text-decoration: none; - border: none; -} -.sidebar li a:visited { - text-decoration: none; - border: none; -} - -.sidebar li a.designer-name { - text-decoration: none; - border: none; -} - -/* extra divs */ -.extra1 { - margin: 10px 0 0 410px; - background: url(sig.gif) no-repeat bottom right; -} - diff --git a/src/data/designs/016/metadata.json b/src/data/designs/016/metadata.json deleted file mode 100644 index 1211262958ad33c0d0a9a767157d445ac240a8ce..0000000000000000000000000000000000000000 --- a/src/data/designs/016/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "016", - "url": "https://www.csszengarden.com/016", - "css_url": "https://www.csszengarden.com/016/016.css", - "description": "The design features a serene and contemplative theme centered around blue tones that evoke calmness and clarity. Text elements are highlighted through varied font sizes and boldness, generating a clear visual hierarchy, while round graphic elements add a modern and dynamic touch. The use of diver imagery and aquatic motifs reinforces the theme of exploration and depth.", - "categories": [ - "Zen", - "Modern", - "Minimalist", - "Web Design" - ], - "visual_characteristics": [ - "Blue Color Palette", - "Graphic Elements", - "Hierarchical Typography", - "Aquatic Imagery" - ] -} \ No newline at end of file diff --git a/src/data/designs/016/screenshot_desktop.png b/src/data/designs/016/screenshot_desktop.png deleted file mode 100644 index cd93466184b9a6d3d48f3b673b63552c9cdc00f0..0000000000000000000000000000000000000000 --- a/src/data/designs/016/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:96a7ffafa99081a0a9da57883a1a115a0451cb29c1a436df155c7271fa5aa68d -size 688551 diff --git a/src/data/designs/016/screenshot_mobile.png b/src/data/designs/016/screenshot_mobile.png deleted file mode 100644 index 5e27c860e320a59558316288b666586b5e63becc..0000000000000000000000000000000000000000 --- a/src/data/designs/016/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:509595bc26918382aa04f2eff8b0cc2f4c68b4d607cb82a295cdef45d4b01cd4 -size 785821 diff --git a/src/data/designs/016/style.css b/src/data/designs/016/style.css deleted file mode 100644 index f74885f4dfc2a97fc85c0c2ce65d1eb36f098f4f..0000000000000000000000000000000000000000 --- a/src/data/designs/016/style.css +++ /dev/null @@ -1,391 +0,0 @@ -/* css Zen Garden submission 016 - 'The Garden Beneath' by Minz Meyer - www.minzweb.de */ -/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ -/* All associated graphics copyright 2003, Minz Meyer */ - - -/* 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(deepblue.jpg); - background-position: top right; - background-color: #172E52; - background-repeat: no-repeat; - margin-top: 20px; - padding: 0px; - color: #88A3C9; - font: 0.8em/1.6 Tahoma, sans-serif; - letter-spacing: 0.1em; -} - -.page-wrapper { - background-color: transparent; - background-position: bottom left; - background-image: url(manta.jpg); - background-repeat: no-repeat; - width: 99%; - height: 100%; - margin: 0; - padding: 0; -} - -header h1 { - background-image: url(zengarden.gif); - background-repeat: no-repeat; - width: 306px; - height: 36px; - margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -header h2 { - background-image: url(thebeauty.gif); - background-repeat: no-repeat; - width: 306px; - height: 24px; - margin: 0px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -header { - position: absolute; - right: 28px; - top: 195px; - width: 306px; -} - -.extra3 { - position: absolute; - right: 30px; - top: 280px; - background-image: url(preamble.gif); - background-repeat: no-repeat; - height: 156px; - width: 300px; - padding-bottom: 20px; - overflow: hidden; -} - -.preamble { - margin-right: 420px; - margin-left: 25px; - padding: 5px; - border-top: 1px solid; - border-right: 1px solid; -} - -.preamble h3 { - width: 190px; - height: 190px; - margin-top: 0; - display: inline; - float: left; - background-image: url(theroad.jpg); - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.preamble p { - margin-left: 25px; - margin-right: 15px; - font-style: italic; - text-align: justify; -} - -.explanation { - margin-left: 10px; - margin-top: 30px; - margin-bottom: 100px; - margin-right: 370px; - padding: 5px; - border-top: 1px solid; - border-left: 1px solid; -} - -.explanation h3 { - width: 150px; - height: 140px; - display: inline; - float: left; - background-image: url(whatabout.jpg); - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.explanation p { - margin-left: 25px; - margin-right: 15px; - text-align: justify; -} - -.benefits { - margin-left: 150px; - margin-top: 30px; - margin-bottom: 100px; - margin-right: 340px; - padding: 5px; - border-top: 1px solid; - border-left: 1px solid; -} - -.benefits h3 { - width: 150px; - height: 150px; - display: inline; - float: right; - background-image: url(benefits.jpg); - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.benefits p { - margin-left: 15px; - margin-right: 25px; - text-align: justify; -} - -.participation { - margin-top: 30px; - margin-bottom: 110px; - margin-left: 50px; - margin-right: 335px; - padding: 5px; - border-top: 1px solid; - border-right: 1px solid; -} - -.participation h3 { - width: 160px; - height: 155px; - margin-top: 15px; - display: inline; - float: left; - background-image: url(participate.jpg); - background-repeat: no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation p { - margin-left: 25px; - margin-right: 15px; - text-align: justify; -} - -.requirements { - margin-top: 30px; - margin-bottom: 100px; - margin-left: 130px; - margin-right: 150px; - padding: 5px; - border-top: 1px solid; - border-right: 1px solid; -} - -.requirements h3 { - margin-top: 15px; - width: 160px; - height: 160px; - display: inline; - float: left; - background-image: url(requirements.jpg); - background-repeat: no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.requirements p { - margin-left: 25px; - margin-right: 15px; - text-align: justify; -} - -.supporting { - margin-top: 100px; - -} - -.sidebar { - position: absolute; - color: #425162; - background-color: transparent; - top: 437px; - right: 30px; - width: 300px; - height: 450px; - background-image: url(navigation.gif); - background-repeat: no-repeat; - background-position: right; - -} - -.sidebar .wrapper { - margin-top: 30px; - margin-left: 20px; - margin-right: 25px; - width: 260px; - height: 350px; - overflow: auto; - font: 11px "Courier New", monospace; - color: #95A5BB; - background-color: transparent; -} - -h3.select { - font: bold 12px "Courier New", monospace; - border: 1px solid; - margin-top: 10px; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 0; - padding-left: 5px; - padding-right: 5px; - color: #1D2139; - background-color: #555764; -} - -h3.archives { - font: bold 12px "Courier New", monospace; - border: 1px solid; - margin-top: 10px; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 0; - padding-left: 5px; - padding-right: 5px; - color: #1D2139; - background-color: #555764; -} - -h3.resources { - font: bold 12px "Courier New", monospace; - border: 1px solid; - margin-top: 10px; - margin-left: 10px; - margin-right: 10px; - margin-bottom: 0; - padding-left: 5px; - padding-right: 5px; - color: #1D2139; - background-color: #555764; -} - -.sidebar ul { - list-style: none; - margin-top: 0; -} - -li { - margin-left: -15px; - margin-right: 15px; - margin-bottom: 0px; -} - -li:hover { - margin-left: -15px; - margin-right: 15px; - background-color: #555764; - color: #1D2139; -} - -a:link { - color: #C6B768; - background-color: transparent; - text-decoration: none; -} - -a:visited { - color: #867833; - background-color: transparent; - text-decoration: line-through; -} - -a:hover, a:focus { - color: #EBD678; - background-color: transparent; - text-decoration: underline; -} - -.extra1 { - position: absolute; - background-image: url(validation.gif); - background-repeat: no-repeat; - top: 887px; - right: 30px; - width: 300px; - height: 100px; - z-index: 1; -} - -* html footer { - width: 260px; - w\idth: 228px; -} -footer { - font: 11px "Courier New", monospace; - position: absolute; - top: 922px; - right: 50px; - z-index: 2; - padding: 8px 15px; - height: 20px; - overflow: auto; - width: 228px; -} - -.extra2 { - position: absolute; - background-image: url(download.gif); - background-repeat: no-repeat; - top: 987px; - right: 30px; - width: 300px; - height: 100px; - z-index: 1; -} -* html .summary { - width: 260px; - w\idth: 228px; -} -.summary { - width: 228px; - position: absolute; - top: 1022px; - right: 50px; - z-index: 2; - padding: 0 15px; - height: 40px; - overflow: auto; -} - - -.summary p:first-child { - display: none; -} - -.summary p:last-child { - margin-top: 4px; - color: #95A5BB; - background-color: transparent; - font: 11px "Courier New", monospace; -} \ No newline at end of file diff --git a/src/data/designs/017/metadata.json b/src/data/designs/017/metadata.json deleted file mode 100644 index 10c4045917bf21974ea3eab80d56accb8c6eb1a2..0000000000000000000000000000000000000000 --- a/src/data/designs/017/metadata.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "id": "017", - "url": "https://www.csszengarden.com/017", - "css_url": "https://www.csszengarden.com/017/017.css", - "description": "The design features a harmonious blend of earthy tones and structured grids, effectively showcasing the power of CSS styling. A vibrant yellow-green header with organic patterns contrasts with the otherwise neutral cream background, creating a soothing yet dynamic visual hierarchy. Bold and stylized typography, complemented by consistent navigation links on the left, provides an elegant, classic feel suitable for a digital audience interested in design and aesthetics.", - "categories": [ - "Web Design", - "Typography", - "Color Theory", - "User Experience", - "Visual Hierarchy", - "Digital Aesthetics" - ], - "visual_characteristics": [ - "Earthy Color Palette", - "Structured Grid Layout", - "Stylized Typography", - "Organic Patterns", - "Elegant Navigation", - "Dynamic Visual Contrast" - ] -} \ No newline at end of file diff --git a/src/data/designs/017/screenshot_desktop.png b/src/data/designs/017/screenshot_desktop.png deleted file mode 100644 index d9d788e77cfbe00b61f7de75fadfd2bbd768a4d2..0000000000000000000000000000000000000000 --- a/src/data/designs/017/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4c42f4823e2b5b4482d19c98c29a5e3f0541ca9bb575e1bcc73575933f87ef28 -size 850595 diff --git a/src/data/designs/017/screenshot_mobile.png b/src/data/designs/017/screenshot_mobile.png deleted file mode 100644 index 42f5ad463042e0f7e1006d62f7ce4efce303bce3..0000000000000000000000000000000000000000 --- a/src/data/designs/017/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:95e7ed2fdf81a2c600aad4f74e8fa06d85b870987e45b39560b81d88ad38c851 -size 629948 diff --git a/src/data/designs/017/style.css b/src/data/designs/017/style.css deleted file mode 100644 index 5ef8176a55ab92eb32852c75d3d5ac87f1681ff1..0000000000000000000000000000000000000000 --- a/src/data/designs/017/style.css +++ /dev/null @@ -1,223 +0,0 @@ -/* css Zen Garden submission 017 - 'Golden Mean' by Douglas Bowman, http://www.stopdesign.com/ */ -/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ -/* All associated graphics copyright 2003, Douglas Bowman*/ - - -/* 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. */ - - -/* Design and CSS created by Douglas Bowman */ -/* www.stopdesign.com */ - -/* structure ---------------------------------- */ -body { - margin:0; - padding:0; - background:#EBE8D0 url("bg_body.gif") repeat-x left top; - color:#333; - text-align:center; - font:x-small Georgia,Serif; - voice-family: "\"}\""; voice-family:inherit; - font-size:small; - } html>body {font-size:small;} -.page-wrapper { - position:relative; - width:732px; - margin:0 auto; - text-align:left; - } -.intro { - border:1px solid #A79355; - border-width:0 1px; - } - - -/* hidden text ---------------------------------- */ -h1, h2, h3 { - margin:0; - background-repeat:no-repeat; - background-position:left top; - } -h1, h2, h3, .summary p:first-child { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - -/* header and summary ---------------------------------- */ -header h1 { - height:71px; - background:url("bg_zengarden.gif") no-repeat 35px 42px; - } -header h2 { - height:115px; - background:url("bg_beautyof.jpg") no-repeat left top; - } -.summary p:first-child { - height:76px; - margin:0; - background:url("bg_quicksum.gif") no-repeat 35px 18px; - } -.summary p:last-child { - position:absolute; - top:78px; - right:35px; - width:200px; - margin:0; - font-size:93%; - line-height:1.3em; - text-align:right; - color:#A79355; - background-color:transparent; - } -.summary p:last-child a:link, .summary p:last-child a:visited { - white-space:nowrap; - font:bold 92%/1.3em Verdana,Arial,Sans-serif; - text-transform:uppercase; - } - - -/* preamble ---------------------------------- */ -.preamble { - position:absolute; - top:304px; - right:0; - width:180px; - } -.preamble h3 { - height:44px; - background-image:url("bg_road.gif"); - } -.preamble p { - margin:.5em 0; - font-size:93%; - font-style:italic; - line-height:1.7em; - color:#66472E; - background-color:transparent; - } - - -/* supporting text ---------------------------------- */ -.supporting { - margin:0 200px; - border:1px solid #A79355; - border-width:0 1px; - padding-bottom:8px; - border-bottom:8px solid #BDAF83; - } -.supporting p { - margin:.75em 0; - line-height:1.5em; - padding:0 20px; - } -.supporting h3 { - height:40px; - border:1px solid #A79355; - border-width:1px 0; - margin:1em 0 .5em; - background-color:#D9D98B; - } -.explanation h3 { - height:80px; - background-image:url("bg_what.jpg"); - border-top-width:0; - margin:0 0 10px; - } -.participation h3 {background-image:url("bg_participation.jpg");} -.benefits h3 {background-image:url("bg_benefits.jpg");} -.requirements h3 {background-image:url("bg_requirements.jpg");} - - -/* link list ---------------------------------- */ -.sidebar { - position:absolute; - top:306px; - left:0; - width:180px; - } -.sidebar h3 {height:23px;} -.design-selection h3 { - height:41px; - background-image:url("bg_select.gif"); - } -.design-archives h3 {background-image:url("bg_archives.gif");} -.zen-resources h3 {background-image:url("bg_resources.gif");} -.sidebar ul { - margin:1em 0 1.5em; - padding:0; - font-size:93%; - list-style:none; - } -.design-archives li, .zen-resources li {text-transform:lowercase;} -.sidebar ul li { - background:url("icon_diamond.gif") no-repeat 2px 50%; - margin:0 0 .5em; - padding:0 0 0 14px; - line-height:1.5em; - } -.sidebar li a:link, .sidebar li a:visited { - font-family:Verdana,Arial,Sans-serif; - font-weight:bold; - } -.sidebar .design-selection li { - background:url("icon_pg.gif") no-repeat 0 15%; - color:#A79355; - } -.sidebar .design-selection a:link, .sidebar .design-selection a:visited {display:block;} -.sidebar .design-selection a.designer-name:link, .sidebar .design-selection a.designer-name:visited { - display:inline; - font-family:Georgia,Serif; - font-weight:normal; - color:#616623; - background-color:transparent; - text-transform:lowercase; - } - - -/* footer ---------------------------------- */ -footer { - background:#D9D98B url("bg_pattern.gif"); - color:#fff; - margin:1.75em 0 0; - padding:10px 20px; - border:1px solid #A79355; - border-width:1px 0; - font:85% Verdana,Arial,Sans-serif; - text-align:center; - } -footer a:link, footer a:visited { - padding:0 5px; - font-weight:normal; - } - - -/* links ---------------------------------- */ -a:link, a:visited { - color:#703F0E; - background-color:transparent; - font-weight:bold; - text-decoration:none; - } -a:hover { - color:#616623; - background-color:transparent; - text-decoration:underline; - } - - -/* misc ---------------------------------- */ -abbr {border-width:0;} \ No newline at end of file diff --git a/src/data/designs/018/metadata.json b/src/data/designs/018/metadata.json deleted file mode 100644 index d2a457a4172b6480ef18f7b8c7d70d481920ba4d..0000000000000000000000000000000000000000 --- a/src/data/designs/018/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "018", - "url": "https://www.csszengarden.com/018", - "css_url": "https://www.csszengarden.com/018/018.css", - "description": "The visual design of 'CSS Zen Garden' is characterized by its elegant and refined layout that merges modern typography with a vintage aesthetic. The page utilizes earthy tones, creating a harmonious balance that draws inspiration from nature, while the textured backgrounds and detailed borders add depth and interest. A combination of structured and spontaneous elements smoothly guide the viewer through the content, highlighting key areas such as navigation and sections of importance.", - "categories": [ - "Web Design", - "Typography", - "Minimalist", - "Retro", - "Nature-Inspired" - ], - "visual_characteristics": [ - "Textured Background", - "Earthy Color Palette", - "Vintage Theme", - "Structured Layout", - "Elegant Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/018/screenshot_desktop.png b/src/data/designs/018/screenshot_desktop.png deleted file mode 100644 index aebe5949ce53ff316c0cfda5af1eae19f4540496..0000000000000000000000000000000000000000 --- a/src/data/designs/018/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2fad139eb399967ee773084455342926af1c890bc8266396fbe7c729fb4876ec -size 971605 diff --git a/src/data/designs/018/screenshot_mobile.png b/src/data/designs/018/screenshot_mobile.png deleted file mode 100644 index a092ad58449763cb569b72ee17b0e099e030dda4..0000000000000000000000000000000000000000 --- a/src/data/designs/018/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:366065c95f2be0bd4557c03d608e4137de2cfcb68f819f7baa1a618ced339db8 -size 1027250 diff --git a/src/data/designs/018/style.css b/src/data/designs/018/style.css deleted file mode 100644 index 294e414d5e7c43de2c0cfb7fe57a1e89df59d81c..0000000000000000000000000000000000000000 --- a/src/data/designs/018/style.css +++ /dev/null @@ -1,187 +0,0 @@ -/* css Zen Garden submission 018 - 'Wrapped in Burlap' by John Simons, http://www.royalbarrel.com/ */ -/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ -/* All associated graphics copyright 2003, John Simons*/ - - -/* 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. */ - - -/* Top-level stuff -------------------------------*/ -body { - margin:10px 0 0 0; - padding:0; - font-family:verdana; - font-size:85%; - background-color:#fff; - } -p { - margin-top:0; - } -.page-wrapper { - width:745px; - margin-left:30px; - position:relative; - background-color:#F7F0E9; - } - -/* Intro section -------------------------------*/ -.intro { - position:relative; - background-color:white; - } -header { - background-image:url("title.gif"); - background-repeat:no-repeat; - height:181px; - } -header h1 { - display:none; - } -header h2 { - width:75px; - height:84px; - background-image:url("small_tree.gif"); - background-repeat:no-repeat; - position:absolute; - top:-10px; - left:690px; - margin:0;padding:0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.summary { - text-align:right; - position:absolute; - top:75px; - left:500px; - width:245px; - font-size:100%; - font-style:italic; - font-family:times new roman, serif; - } -.summary p { - margin-bottom:0px; - } -.summary a { - color:#C52E00; - } - -/* Left-hand column -------------------------*/ -.supporting, .preamble { - width:505px; - background-image:url("burlap.jpg"); - color:white; - line-height:140%; - } - -.supporting p, .preamble p { - margin:0; - padding:4px 10px 10px 10px; - } -.supporting a, .preamble a { - color:#FFAF7F; - } - -.preamble h3, .supporting h3 { - height:44px; - margin:0; - padding:0; - border-top:1px solid #F7F0E9; - border-bottom:1px solid #F7F0E9; - border-left:1px solid #735B5A; - } -.preamble h3 { border-top-width:0px; } - -.preamble h3, .supporting h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.preamble h3 { background-image:url("enlightenment.gif"); } -.explanation h3 { background-image:url("whatabout.gif"); } -.participation h3 { background-image:url("participation.gif"); } -.benefits h3 { background-image:url("benefits.gif"); } -.requirements h3 { background-image:url("requirements.gif"); } - -/* Footer ------------------------------*/ -footer { - text-align:center; - background:#F7F0E9 url("footer_bg.jpg"); - padding:8px 0px; - font-size:120%; - font-weight:bold; - } -footer a { - color:#583C3B; - text-decoration:none; - } -footer a:hover { - color:#D17B00; - } - - -/* Link List -------------------------------------*/ -.sidebar { - position:absolute; - top:181px; - left:505px; - width:240px; - background-image:url("right_bg.jpg"); - background-repeat:no-repeat; - color:#774747; - border-top:1px solid #E0D5CA; - font-weight:bold; - padding-bottom:200px; - line-height:140%; - } -.sidebar ul { - padding-left:30px; - margin-left:0px; - } -.sidebar li { - margin-bottom:15px; - } -.sidebar a { - color:#686057; - text-decoration:none; - } -.sidebar a:hover { - text-decoration:underline; - } -.sidebar a:visited { - color:#999189; - } - -/* To get a linebreak between title and author */ -.sidebar .design-selection a { display:block; } -.sidebar .design-selection a:hover {color:#C52E00; } -.sidebar .design-selection a.designer-name { display:inline; } -.sidebar .design-selection a.designer-name:hover {color:#686057; } - -.sidebar h3 { - margin:0; padding:0; - background-repeat:no-repeat; - height:46px; - } -.sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar h3.select { background-image:url("select.gif"); } -.sidebar h3.archives { background-image:url("archives.gif"); } -.sidebar h3.resources { background-image:url("resources.gif"); } - - diff --git a/src/data/designs/019/metadata.json b/src/data/designs/019/metadata.json deleted file mode 100644 index 32c68f1e7823fb85e30140ec8f6afad41b128be7..0000000000000000000000000000000000000000 --- a/src/data/designs/019/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "019", - "url": "https://www.csszengarden.com/019", - "css_url": "https://www.csszengarden.com/019/019.css", - "description": "This design showcases a minimalist aesthetic with a focus on typography and a dark color scheme. The bold, grungy text at the top captures attention, reflecting a modern and edgy look. The layout is evenly distributed with a strong emphasis on text clarity, balancing various sections across a predominantly black background that enhances readability. Intriguing texture effects on the title further accentuate the modern yet retro style, making the design captivating for those interested in creative and functional typography.", - "categories": [ - "Typography", - "Minimalism", - "Modern", - "Dark Theme", - "Textured" - ], - "visual_characteristics": [ - "Bold Typography", - "Grunge Texture", - "Dark Background", - "Column Layout", - "High Contrast Text" - ] -} \ No newline at end of file diff --git a/src/data/designs/019/screenshot_desktop.png b/src/data/designs/019/screenshot_desktop.png deleted file mode 100644 index ab80009db6c2cf5394e1c5b0e4a6ccdcde64007e..0000000000000000000000000000000000000000 --- a/src/data/designs/019/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7bc03bc007038068f810626e12eba92c2eca42eff7848ed6e7bbca33ea2dd3b4 -size 484312 diff --git a/src/data/designs/019/screenshot_mobile.png b/src/data/designs/019/screenshot_mobile.png deleted file mode 100644 index ab80009db6c2cf5394e1c5b0e4a6ccdcde64007e..0000000000000000000000000000000000000000 --- a/src/data/designs/019/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7bc03bc007038068f810626e12eba92c2eca42eff7848ed6e7bbca33ea2dd3b4 -size 484312 diff --git a/src/data/designs/019/style.css b/src/data/designs/019/style.css deleted file mode 100644 index 5c4737d1f61d885e41affef13b35851166c58e85..0000000000000000000000000000000000000000 --- a/src/data/designs/019/style.css +++ /dev/null @@ -1,274 +0,0 @@ -/* css Zen Garden submission 019 - 'What Lies Beneath' v1.01 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, Mike 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 { - font: 11px/18px verdana; - color: #ffffff; - background: #000000 url(body-background.jpg) repeat-x; - margin: 0px; - margin-bottom: 20px; - width: 2300px; - } -p { - font: 11px/18px verdana; - margin-top: 0px; - text-align: left; - } -h3 { - font: 12pt georgia; - margin-top: 0px; - margin-bottom: 5px; - color: #ffffff; - } -a:link { - font-weight: bold; - text-decoration: none; - color: #E8AD62; - } -a:visited { - font-weight: bold; - text-decoration: none; - color: #E0922F; - } -a:hover, a:active { - text-decoration: underline; - color: #FFCC00; - } - - -/* specific divs */ - -header { - } - -/* 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(title.jpg) no-repeat top left; - width: 2300px; - height: 85px; - margin-top: 70px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -header h2 { - display:none; - } - -.summary { - position: absolute; - left: 55px; - top: 170px; - width: 250px; - z-index: 2; - } - -.summary p { - font: italic 10px/16px georgia; - text-align: right; - } - -.preamble { - position: absolute; - background: transparent url(femur.jpg) no-repeat bottom left; - top: 170px; - left: 545px; - width: 300px; - height: 431px; - z-index: 2; - } - -.preamble h3 { - background: transparent url(the_road.jpg) no-repeat top left; - width: 300px; - height: 25px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } - -.supporting { - } - -.explanation { - position: absolute; - top: 170px; - left: 865px; - width: 300px; - z-index: 2; - } - -.explanation h3 { - background: transparent url(so_what.jpg) no-repeat top left; - width: 300px; - height: 25px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } - -.participation { - position: absolute; - background: transparent url(tin_can.jpg) no-repeat top left; - top: 170px; - left: 1185px; - width: 300px; - z-index: 2; - padding-bottom: 40px; - } - -.participation h3 { - background: transparent url(participation.jpg) no-repeat top left; - width: 300px; - height: 25px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } - -.benefits { - background: transparent url(ants.jpg) no-repeat top left; - position: absolute; - top: 170px; - height: 450px; - left: 1505px; - width: 300px; - z-index: 2; - } - -.benefits h3 { - background: transparent url(benefits.jpg) no-repeat top left; - width: 300px; - height: 25px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } - -.requirements { - position: absolute; - top: 170px; - left: 1825px; - width: 300px; - z-index: 2; - padding-bottom: 40px; - } - -.requirements h3 { - background: transparent url(requirements.jpg) no-repeat top left; - width: 300px; - height: 25px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } - -.requirements p { - font: 9px/15px verdana; - } - -footer { - position: absolute; - background: transparent url(worm.jpg) no-repeat; - text-align: right; - top: 170px; - left: 2145px; - width: 100px; - height: 325px; - z-index: 2; - } - -footer a:link, footer a:visited { - display: block; - } - -.sidebar { - position: absolute; - left: 325px; - top: 170px; - width: 200px; - z-index: 2; - } - -.sidebar .wrapper { - font: 9px verdana, sans-serif; - } - -.sidebar h3.select { - background: transparent url(select.jpg) no-repeat top left; - width: 200px; - height: 25px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } -.sidebar h3.archives { - background: transparent url(archives.jpg) no-repeat top left; - margin-top: 15px; - width: 200px; - height: 25px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } -.sidebar h3.resources { - background: transparent url(resources.jpg) no-repeat top left; - margin-top: 15px; - width: 200px; - height: 25px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } - - -.sidebar ul { - margin: 0px; - padding: 0px; - } -.sidebar li { - line-height: 2.5ex; - list-style-type: none; - display: block; - padding-top: 5px; - margin-bottom: 5px; - } -.sidebar li a:link { - color: #E8AD62; - } -.sidebar li a:visited { - color: #E0922F; - } -.sidebar li a:hover, a:active { - color: #00CCFF; - } - -.extra1 { - background: transparent url(mole.jpg) bottom left no-repeat; - position: absolute; - top: 0px; - left: 0px; - width: 2300px; - height: 630px; - z-index: 1; - } \ No newline at end of file diff --git a/src/data/designs/020/metadata.json b/src/data/designs/020/metadata.json deleted file mode 100644 index 7d4f56b6b7fcba6ec567add9c2f525bc6603d337..0000000000000000000000000000000000000000 --- a/src/data/designs/020/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "020", - "url": "https://www.csszengarden.com/020", - "css_url": "https://www.csszengarden.com/020/020.css", - "description": "The design features a serene and professional layout with a muted color palette, emphasizing clean lines and minimalist aesthetics. It balances a centered, text-focused main content area with a sidebar offering functional navigation and supplementary information. The harmonious integration of serene imagery and subtle blue accents promotes a calm and reflective visual experience.", - "categories": [ - "minimalist design", - "web aesthetics", - "informational layout", - "professional tone", - "navigation focus" - ], - "visual_characteristics": [ - "muted color palette", - "serene imagery", - "clean typography", - "balanced layout", - "subtle blue accents" - ] -} \ No newline at end of file diff --git a/src/data/designs/020/screenshot_desktop.png b/src/data/designs/020/screenshot_desktop.png deleted file mode 100644 index 6310fddc2a7d2a80e36772b90b0c297755ec7b73..0000000000000000000000000000000000000000 --- a/src/data/designs/020/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:70141317bced77318692adf39517534e3107794348d5239dbe04cadb44ef396d -size 635916 diff --git a/src/data/designs/020/screenshot_mobile.png b/src/data/designs/020/screenshot_mobile.png deleted file mode 100644 index f3493163398e19a787f0cc3d0cce56a915a34e63..0000000000000000000000000000000000000000 --- a/src/data/designs/020/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f77cba17eae09f1c1a406cba1626226073cafb2d18f19d4ec4712288f44d69e8 -size 708427 diff --git a/src/data/designs/020/style.css b/src/data/designs/020/style.css deleted file mode 100644 index a58674ec39749ccb71201b9d6ab5aa6055a8a64d..0000000000000000000000000000000000000000 --- a/src/data/designs/020/style.css +++ /dev/null @@ -1,331 +0,0 @@ -/* css Zen Garden submission 020 - 'Friendly Beaches' by Sophie G - www.sophie-g.net */ -/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ -/* All associated graphics copyright 2003, Sophie G */ - - -/* 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-color: #FFF; - margin: 0px; - padding: 10px; - font-family: Georgia, "Times New Roman", Times, serif; - font-size: 90%; -} - -p { - line-height: 180%; - } -.page-wrapper { - background-color: #EDEEF0; - border: 1px solid #DAD5D9; - padding: 0px; - margin: 0px; -} -abbr { - border-bottom: 1px #6BA0D2 dashed; -} -header { - font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; - background-color: #A4ACB3; -} -header h1 { - height: 190px; - margin: 0px; - background-image: url(headerh1.jpg); - background-repeat: no-repeat; -} -header h1, header h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h2 { - background-color: #EDEEF0; - margin: 0px; - height: 24px; - padding: 0px 14px 2px 14px; - background-image: url(headerh2.gif); - background-repeat: no-repeat; -} -header h2 abbr { - color: #FFF; - border-bottom: 1px #FFF dashed; -} -.summary p:first-child { - position: absolute; - right: 21px; - top: 21px; - width: 12em; - height: 165px; - padding: 3px 0 0 0; - margin: 0px; - border: 1px solid #0C2953; - text-align: center; - font-size: 90%; - font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; - line-height: 110%; - color: #FFF; - background-image: url(summary.jpg); - background-repeat: no-repeat; - background-position: 50% 100%; - background-color: #0C2953; -} -.preamble { - padding: 0px 15em 0px 3em; -} -.preamble h3 { - margin: 15px 0px 0px 0px; - padding: 6px 20px 2px 6px; - text-align: left; - font-size: 180%; - font-variant: small-caps; - color: #6BA0D2; - background-image: url(bordDroitPreambleh3.gif); - background-repeat: no-repeat; - background-position: 100% 0px; - background-color: #F6F7F7; -} -.preamble h3::before { - content: " "; - display: inline-block; - padding: 35px 0px 30px 48px; - background-image: url(preambleShell.jpg); - background-repeat: no-repeat; - background-position: 0px 50%; - vertical-align: middle; -} -.preamble p { - text-align: justify; -} -.preamble p:nth-child(2), .preamble p:nth-child(3) { - margin: 0px; - padding: 10px 20px 2px 6px; - background-image: url(bordDroitPreamble.gif); - background-repeat: repeat-y; - background-position: 100% 0px; - background-color: #F6F7F7; -} -.preamble p:nth-child(4) { - margin: 0px; - padding: 0px; - background-image: url(bordBasPreamble.gif); - background-repeat: no-repeat; - background-position: 100% 100%; - background-color: #F6F7F7; - padding: 10px 20px 20px 6px; -} -.preamble p:nth-child(4)::after { - content: " "; - display: block; - margin: 0px; - padding: 0 20px 0 6px; - background-image: url(bordBasPreambleGauche.gif); - background-repeat: no-repeat; - background-position: 0% 100%; -} -.preamble p:first-letter { - color: #6BA0D2; - font-size: 140%; - font-weight: bold; - margin: 0px 2px 0px 0px; -} -.supporting { - margin: 0px; - padding: 10px 16em 0px 1em; - font-size: 90%; -} -.explanation, .participation, .benefits, .requirements { - border: 2px solid #FFF; - padding: 0px; -} -.explanation { - margin: 0px 0px 10px 0px; -} -.participation { - margin: 0px 0px 10px 0px; - float: left; - width: 30%; -} -.benefits { - margin: 0px 0px 10px 32%; -} -.requirements { - margin: 0px 0px 10px 32%; -} -.supporting h3 { - margin: 0px; - padding: 5px 30px 1px 2px; - text-align: left; - font-size: 120%; - font-variant: small-caps; - color: #6BA0D2; - border-bottom: 1px solid #6BA0D2; - background-color: #F6F7F7; - background-repeat: no-repeat; - background-position: 100% 50%; -} -.explanation h3 { - background-image: url(explanationShell.jpg); -} -.participation h3 { - background-image: url(participationShell.jpg); -} -.benefits h3 { - background-image: url(benefitsShell.jpg); -} -.requirements h3 { - background-image: url(requirementsRock.jpg); -} -.supporting p { - text-align: justify; - margin: 10px 0px 0px 0px; - padding: 1px 3px 2px 3px; -} -.supporting p:first-letter { - font-weight: bold; -} -.supporting a:link { - color: #0083FF; - font-weight: bold; -} -.supporting a:visited { - color: #204160; - font-weight: bold; -} -.supporting a:hover, .supporting a:active { - color: #8C0000; - font-weight: bold; - text-decoration: none; -} -.sidebar, .summary p:last-child { - font-size: 90%; - font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; - position: absolute; - right: 21px; - width: 12em; - border: 1px solid #0C2953; - padding: 0px; - margin: 0px; - background-color: #A4ACB3; -} -.summary p:last-child { - height: 50px; - text-align: center; - top: 217px; - font-size: 90%; - display: block; - padding: 3px 0; - color: #FFF; -} -.sidebar { - top: 266px; -} -.sidebar h3 { - background-color: #0C2953; - color: #FFF; - margin: 0px; - padding: 30px 1px 1px 1px; - background-repeat: no-repeat; -} -.sidebar h3.select { - background-image: url(selecth3.jpg); - background-position: 50% 0%; -} -.sidebar h3.favorites { - border-top: 1px solid #0C2953; - background-image: url(favoritesh3.jpg); - background-position: 40% 100%; -} -.sidebar h3.archives { - border-top: 1px solid #0C2953; - background-image: url(archivesh3.jpg); - background-position: 40% 100%; -} -.sidebar h3.resources { - border-top: 1px solid #0C2953; - background-image: url(resourcesh3.jpg); - background-position: 50% 30%; -} -.sidebar h3:first-letter { - color: #FFF; - font-size: 160%; -} -.sidebar ul { - list-style-type: none; - font-size: 90%; - color: #FFF; - margin: 0px; - padding: 0px; - background-color: #A4ACB3; -} -.sidebar li { - padding: 3px 2px 3px 2px; - margin-bottom: 4px; -} -.sidebar li:hover { - padding: 2px 1px 2px 1px; - border: 1px dotted #0C2953; - background-color: #6BA0D2; -} -.summary p:last-child a:link { - color: #FFF; - font-weight: bold; -} -.summary p:last-child a:visited { - color: #204160; -} -.summary p:last-child a:hover, .summary p:last-child a:active { - color: #FFD800; - font-weight: bold; - text-decoration: none; -} -.sidebar a:link, .sidebar a:visited { - border-left: 6px solid #FFF; - padding-left: 2px; - font-weight: bold; - color: #FFF; -} -.sidebar a:visited { - color: #204160; -} -.sidebar a:hover, .sidebar a:active { - border-left: 6px solid #FFD800; - padding-left: 2px; - color: #FFD800; - text-decoration: none; - font-weight: bold; -} -.sidebar a.designer-name:link, .sidebar a.designer-name:visited { - border-left: none; - padding-left: 0px; - font-weight: normal; - color: #FFF; -} -.sidebar a.designer-name:hover, .sidebar a.designer-name:active { - border-left: none; - padding-left: 0px; - color: #FFD800; - text-decoration: none; -} -.sidebar abbr { - border-bottom: 1px #FFF dashed; -} -footer { - clear: both; - text-align: right; - margin: 0px -16em 0px 0px; - padding: 25px 0px 0px 0px; - background-repeat: no-repeat; - background-image: url(signSoph.gif); - background-position: 0% 95%; -} -footer a { - font-size: 70%; - font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; -} \ No newline at end of file diff --git a/src/data/designs/100/metadata.json b/src/data/designs/100/metadata.json deleted file mode 100644 index 60d217e512f5c2443ab852a0d94422aeda0cbc99..0000000000000000000000000000000000000000 --- a/src/data/designs/100/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "100", - "url": "https://www.csszengarden.com/100", - "css_url": "https://www.csszengarden.com/100/100.css", - "description": "The design exemplifies a serene and harmonious aesthetic, combining a subtle pastel color palette with botanical imagery, creating a tranquil and inviting atmosphere. The layout is clean and organized, featuring neatly aligned text blocks that enhance readability. The use of elegant typography adds sophistication, while decorative elements like floral images provide visual interest and contribute to the overall theme of nature and peace.", - "categories": [ - "serene", - "nature-inspired", - "elegant", - "tranquil", - "informative" - ], - "visual_characteristics": [ - "pastel color palette", - "botanical imagery", - "elegant typography", - "clean layout", - "decorative elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/100/screenshot_desktop.png b/src/data/designs/100/screenshot_desktop.png deleted file mode 100644 index e9fee7f8acd356af9afa753f179b9dc69b8c1bf1..0000000000000000000000000000000000000000 --- a/src/data/designs/100/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:85bb5c03b2d2499cb52e0549e8d0f705f11f9c6275177e1749e604a2e4bac688 -size 1010596 diff --git a/src/data/designs/100/screenshot_mobile.png b/src/data/designs/100/screenshot_mobile.png deleted file mode 100644 index 8b9d0bf7a43e5fe6d547cb22db6685cf5fab7cb5..0000000000000000000000000000000000000000 --- a/src/data/designs/100/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:16368a93aa6a8d2b71acd011c6636080a7e30d72374b81a34b01682a5a74fe19 -size 545032 diff --git a/src/data/designs/100/style.css b/src/data/designs/100/style.css deleted file mode 100644 index 9ac7ad4ce7cf91e8af30f0ede1c8d09cd798ff34..0000000000000000000000000000000000000000 --- a/src/data/designs/100/style.css +++ /dev/null @@ -1,110 +0,0 @@ -/* css Zen Garden submission 100 - '15 Petals', by Eric Meyer and Dave Shea, - http://www.meyerweb.com/ and http://www.mezzoblue.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All photos copyright 2004, Eric Meyer */ -/* All other graphics copyright 2004, Dave Shea */ -/* Added: April 14th, 2004 */ - -/* 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. */ - - -/* - This design built specifically for 'More Eric Meyer on CSS'. - http://more.ericmeyeroncss.com/ - - Don't miss chapter 10, "Designing in the Garden", which explores step by - step the creation of this CSS Zen Garden design. -*/ - -body {margin: 0; padding: 0; text-align: center; - color: #000; background: #FFF;} -abbr {border: none;} -a {text-decoration: none;} -a:link {color: rgb(179,63,96);} -a:visited {color: rgb(90,32,48);} -a:hover {text-decoration: underline;} - -.page-wrapper {width: 647px; margin: 75px auto 0; padding: 0; - position: relative; text-align: left;} - -header {background: url(pageHeader2.jpg) 0 0 no-repeat; - height: 157px; width: auto; position: relative; z-index: 10;} -header h1 {background: url(ph-flower.gif) 0 0 no-repeat; - height: 330px; width: 250px; position: absolute; z-index: 101; - top: -95px; right: -80px; margin: 0;} -html>body header h1 {background-image: url(ph-flower2.png);} - - -header h1 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h2 {position: absolute; z-index: 102; - top: 134px; right: 140px; margin: 0; padding: 0; - color: rgb(91,131,104); - text-transform: lowercase; letter-spacing: 0.2em; - font: bold italic 1.1em/1em Times, serif; text-align: right;} -header abbr {text-transform: uppercase;} - -.summary {font: italic 1em/2 Times, "Times New Roman", serif; - color: rgb(42,92,42); - background: rgb(94%,98%,96%) url(quickSummary.jpg) 0 100% no-repeat; - margin: 1px 0; padding: 1em 180px 1.5em 1.5em;} -.summary p {display: inline;} - -.preamble, .supporting {padding-right: 217px;} -.preamble {background: url(side.jpg) 100% 100% repeat-y;} -.supporting {background: url(side.jpg) 100% 0 repeat-y;} - -.preamble, .explanation, .participation, .benefits, .requirements { - border-left: 1px solid rgb(184,214,194); - padding-top: 1px; padding-bottom: 1px;} -.preamble {border-top: 1px solid rgb(184,214,194); padding-top: 0.5em;} -.preamble p, .supporting p {font-size: 90%; line-height: 1.66em; - margin: 0 1.5em; padding: 0.5em 0;} -.preamble h3, .supporting h3 {letter-spacing: 0.1em; - font: italic 1.2em Times, "Times New Roman", serif; - color: rgb(107,153,139); margin: 1em 0 0.5em 0.5em;} -.requirements {border-bottom: 1px solid rgb(184,214,194); padding-bottom: 100px; - background: url(main.jpg) 0 100% no-repeat;} - -footer {background: #FFF url(footer.jpg) 0 1px no-repeat; - margin: 0 -217px 0 4px; height: 123px; - padding: 60px 1em 0 0.5em;} -html>body footer {margin-left: 0;} -footer a:link, footer a:visited {color: rgb(207,216,214); line-height: 1em; - font-size: 1.25em; font-weight: 100;} - -.sidebar {position: absolute; z-index: 11; - width: 216px; top: 157px; right: 0; - margin-top: 8.6em;} -.sidebar a {color: rgb(99,131,101); - font: italic 1.15em Times, serif; - text-transform: lowercase;} -.sidebar ul {margin: 0.5em 1em 0 2em; padding: 0;} -.sidebar li {list-style: none;} - -.sidebar h3 {margin: 1em 0 0; width: 216px; height: 35px; - background: url(resources.gif) 10px 50% no-repeat;} -.design-selection h3 {background-image: url(design-list.gif);} -.design-archives h3 {background-image: url(archives.gif);} -.sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.design-selection li {font-size: 85%; margin-bottom: 1.5em;} -.design-selection li a {display: block; - font: bold italic 1.15em Times, serif; - letter-spacing: 0.2em; text-transform: lowercase;} -.design-selection li a.designer-name {display: inline; - font: bold 1em Times, serif; - letter-spacing: 0; text-transform: none;} - -.design-archives li, .zen-resources li {margin-bottom: 0.5em;} -.design-archives li a, .zen-resources li a {color: rgb(126,164,139);} \ No newline at end of file diff --git a/src/data/designs/101/metadata.json b/src/data/designs/101/metadata.json deleted file mode 100644 index 917d97acb700abc4c6924028ca3ff59d374b7958..0000000000000000000000000000000000000000 --- a/src/data/designs/101/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "101", - "url": "https://www.csszengarden.com/101", - "css_url": "https://www.csszengarden.com/101/101.css", - "description": "The design presents a clean, minimalistic layout with a focus on text-heavy content, emphasizing informative and instructional text through strategic alignment and font weight variation. The use of a soft color palette with subtle text highlights adds visual interest without overwhelming the content, making it suitable for an educational or informational context.", - "categories": [ - "Minimalism", - "Typography", - "Informational", - "Educational", - "Web Design" - ], - "visual_characteristics": [ - "Text-centered layout", - "Subtle color palette", - "Clean typography", - "Strategic whitespace", - "Subtle highlights" - ] -} \ No newline at end of file diff --git a/src/data/designs/101/screenshot_desktop.png b/src/data/designs/101/screenshot_desktop.png deleted file mode 100644 index d023baea801cb1e1b237d0c5fd4c9beed964a4c3..0000000000000000000000000000000000000000 --- a/src/data/designs/101/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4b6c6f85e8ff5572831b0ac2a777d42962f9e87a6541a964c8c1fa6ffe632934 -size 301134 diff --git a/src/data/designs/101/screenshot_mobile.png b/src/data/designs/101/screenshot_mobile.png deleted file mode 100644 index 31c31b2a83604944bf9e726f0b73f72998511795..0000000000000000000000000000000000000000 --- a/src/data/designs/101/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5b9fa2a1931b4b3e34af70d57960f65c0ed5845b089e7b0acf7d9d0455345154 -size 315697 diff --git a/src/data/designs/101/style.css b/src/data/designs/101/style.css deleted file mode 100644 index a23e1e4e39a28aa443b596868b389efddbdbd7ea..0000000000000000000000000000000000000000 --- a/src/data/designs/101/style.css +++ /dev/null @@ -1,374 +0,0 @@ -/* css Zen Garden submission 101 - 'punkass', by Mikhel Proulx, http://www.mikhel.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Mikhel Proulx */ -/* Added: May 3rd, 2004 */ - -/* 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. */ - - - -body { - margin: 0; - padding: 0; - background: transparent url(bg.gif) no-repeat top left; - background-color: #ffffff; - width: 1972px; - height: 667px; - font-family: Verdana; - font-size: 11px; - line-height: 110%; - color: #333333; -} - -a:link { - font-weight: bold; - color: #075E7B; - text-decoration: none; -} - -a:visited { - font-weight: bold; - color: #075E7B; - text-decoration: none; -} - -a:hover, a:active { - font-weight: bold; - color: #737373; - text-decoration: underline; -} - - -.page-wrapper { - position: absolute; - margin: 0px; - padding: 0px; -} - -.intro { - position: absolute; - margin: 0px; - padding: 0px; - z-index: 1; -} - -header { - position: absolute; - margin: 0px; - padding: 0px; -} - -header h1 { - z-index: 1; - position: absolute; - margin: 0px; - padding: 0px; - background: transparent url(tit.gif) no-repeat top left; - width: 278px; - height: 186px; - left: 25px; - top: 165px; - - text-indent: -9999px; - overflow: hidden; -} - -header h2 { - z-index:1; - position: absolute; - margin: 0px; - padding: 0px; - background: #fff url(cat.gif) no-repeat top left; - width: 193px; - height: 18px; - left: 225px; - top: 40px; - opacity: .70; - - text-indent: -9999px; - overflow: hidden; -} - -.summary { - - position: absolute; - margin: 0px; - padding: 0px; - width: 300px; - left: 230px; - top: 50px; -background: #fff; - opacity: .70; -} - -.summary p { - z-index:2; - position: relative; - margin: 0px; - padding: 6px 0px 6px 0px; - -} - -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { - text-indent: -9999px; - overflow: hidden; -} - -.preamble p, .explanation p, .participation p, .benefits p, .requirements p { - position: relative; - margin: 0px; - padding: 6px 0px 6px 15px; -} - -.preamble { - position: absolute; - margin: 0px; - padding: 0px; - background: #fff; - width: 260px; - height: 300px; - left: 560px; - top: 29px; - opacity: .70; -} - -.preamble h3 { - position: relative; - margin: 0px; - padding: 0px; - background: transparent url(read.gif) no-repeat top left; - width: 298px; - height: 25px; -} - -.supporting { - position: absolute; - margin: 0px; - padding: 0px; - z-index: 0; -} - -.explanation { - position: absolute; - margin: 0px; - padding: 0px; - width: 300px; - height: 300px; - left: 773px; - top: 360px; - background: #fff; - opacity: .70; -} - -.explanation h3 { - position: relative; - margin: 0px; - padding: 0px; - background: transparent url(head_explanation.gif) no-repeat top left; - width: 241px; - height: 25px; -} - -.participation { - position: absolute; - left: 1059px; - top: 10px; - padding: 0px; - width: 300px; - height: 400px; - background: #fff; - opacity: .70; -} - -.participation h3 { - position: relative; - margin: 0px 0px 0px 0px; - padding: 0px; - background: transparent url(head_participation.gif) no-repeat bottom left; - width: 142px; - height: 25px; -} - -.benefits { - position: absolute; - left: 1260px; - top: 470px; - padding: 0px; - background: transparent; - width: 300px; - height: 170px; - background: #fff; - opacity: .70; -} - -.benefits h3 { - position: relative; - margin: 0px; - padding: 0px; - background: transparent url(head_benefits.gif) no-repeat top left; - width: 94px; - height: 25px; -} - -.requirements { - position: absolute; - margin: 0px; - padding: 0px; - background: transparent; - width: 300px; - height: 300px; - left: 1593px; - top: 23px; - background: #fff; - opacity: .70; -} - - -.requirements h3 { - position: relative; - margin: 0px; - padding: 0px; - background: transparent url(head_requirements.gif) no-repeat top left; - width: 153px; - height: 25px; -} - -footer { - position: absolute; - margin: 0px; - padding: 0px; - background: transparent; - width: 300px; - left: 1650px; - top: 633px; - background: #fff; - opacity: .70; -} - -.sidebar { - margin: 0px; - padding: 0px; - -} - -.sidebar ul { - position: relative; - margin: 0px; - padding: 2px 0px 0px 23px; - list-style-type: none; -} - -.sidebar li { - position: relative; - margin: 0px; - padding: 2px 0px 1px 0px; -} - -.sidebar a { - font-weight: normal; -} - -.sidebar .wrapper { - position: relative; - margin: 0px; - padding: 0px; -} - - -.design-selection h3, .design-archives h3, .zen-resources h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -.design-selection { - position: absolute; - margin: 0px; - padding: 0px; - width: 145px; - left: 360px; - top: 189px; - background: #fff; - opacity: .70; -} - -.design-selection h3 { - position: relative; - margin: 0px; - padding: 0px; - background: transparent url(head_select.gif) no-repeat top left; - width: 127px; - height: 19px; -} - -.design-selection a { - margin: 0px; - padding: 4px 0px 0px 0px; - font-weight: bold; - display:block; -} - -.design-selection a.designer-name { - margin: 0px; - padding: 0px; - font-weight: normal; - display:inline; -} - -.design-archives { - position: absolute; - margin: 0px; - padding: 0px; - width: 270px; - left: 30px; - top: 461px; - background: #fff; - opacity: .70; -} - -.design-archives h3 { - position: relative; - margin: 0px; - padding: 0px; - background: transparent url(head_archives.gif) no-repeat top left; - width: 72px; - height: 19px; -} - -.zen-resources { - position: absolute; - left: 45px; - top: 535px; - padding: 0px; - width: 270px; - background: #fff; - opacity: .70; -} - -.zen-resources h3 { - position: relative; - margin: 0px; - padding: 0px; - background: transparent url(head_resources.gif) no-repeat top left; - width: 88px; - height: 19px; -} - -.extra1 { - position: absolute; - margin: 0px; - padding: 0px; - background: transparent; - width: 5px; - height: 258px; - left: 1095px; - top: 117px; -} - -.extra2, .extra3, .extra4, .extra5, .extra6 { - display: none; -} \ No newline at end of file diff --git a/src/data/designs/102/metadata.json b/src/data/designs/102/metadata.json deleted file mode 100644 index 0949817fed240cb6ff69d7d3952ef6d907c42c69..0000000000000000000000000000000000000000 --- a/src/data/designs/102/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "102", - "url": "https://www.csszengarden.com/102", - "css_url": "https://www.csszengarden.com/102/102.css", - "description": "The design showcases a striking balance between modern aesthetics and functional typography, featuring a bold and textured header with artistic elements that evoke a sense of creativity. The layout is clean, with a left-aligned navigation menu and ample white space, guiding the viewer\u2019s eye smoothly through the content. A red and black color palette underscores the dynamic yet refined mood, while the serif fonts lend a classical touch, enhancing readability against the textured background.", - "categories": [ - "Web Design", - "Typography", - "Modern Aesthetic", - "Artistic Design", - "Color Palette" - ], - "visual_characteristics": [ - "Bold Header", - "Textured Background", - "Monochromatic Colors", - "Serif Fonts", - "Left-aligned Navigation" - ] -} \ No newline at end of file diff --git a/src/data/designs/102/screenshot_desktop.png b/src/data/designs/102/screenshot_desktop.png deleted file mode 100644 index 337526e5c8359cef70b46a4cb550095a872432fa..0000000000000000000000000000000000000000 --- a/src/data/designs/102/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bdaa75e210bcb37a82e5f42457df4ca2aea8cad54bc03a3641a2d279bc2487dc -size 895132 diff --git a/src/data/designs/102/screenshot_mobile.png b/src/data/designs/102/screenshot_mobile.png deleted file mode 100644 index c781e03188f865297808d8fadfb25fc1b1b422ed..0000000000000000000000000000000000000000 --- a/src/data/designs/102/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c3f9e7e5f81b08c79f2b3186b8d9f37d908409a866cab23698c6e53de0e1ccdc -size 1586357 diff --git a/src/data/designs/102/style.css b/src/data/designs/102/style.css deleted file mode 100644 index d7c92f9bb39a6f2c9336a69bfe3aa7c68ecb32b7..0000000000000000000000000000000000000000 --- a/src/data/designs/102/style.css +++ /dev/null @@ -1,237 +0,0 @@ -/* css Zen Garden submission 102 - 'Revolution!', by David Hellsing, http://www.monc.se/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, David Hellsing */ -/* Added: May 3rd, 2004 */ - -/* 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. */ - - - -/* This design was made by David Hellsing for monc. */ - -/* -////////// GENERAL ////////// -*/ - -body { - background: #e15 url(body_bg.gif) fixed; - margin: 0; - padding: 0; -} - -/* -////////// TYPOGRAPHY ////////// -*/ - -p,ul,ol,li,dt,dl,dd,h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0;} - -p { font: small/1.8em georgia, tahoma, verdana, tahoma, arial, helvetica, sans-serif; color: #333; } - -h1,h2,h3,h4,h5,h6 { font: 100% Arial Black, verdana, tahoma, sans-serif; } - -p { margin-bottom: 9px; } - -a { - color: #26a; - text-decoration: none; - font-weight: bold; -} - -a:active { - color: #000; - border-bottom: 1px dotted #000; -} - -a:visited { - color: #048; -} - -a:hover { - color: #c32; - border-bottom: 1px dotted #c32; -} - -h3 { - height: 20px; - width: 240px; - margin: 20px 0 7px 0; -} - -.preamble h3 { background: url(head_theroad.gif) no-repeat; } -.explanation h3 { background: url(head_sowhat.gif) no-repeat;} -.participation h3 { background: url(head_participation.gif) no-repeat;} -.benefits h3 { background: url(head_benefits.gif) no-repeat;} -.requirements h3 { background: url(head_requirements.gif) no-repeat;} - -p:nth-child(2),p:nth-child(3),p:nth-child(4),p:nth-child(5),p:nth-child(6) { padding: 0 30px 0 20px; } - -abbr { - font-style: normal; - font-size: 90%; - letter-spacing: 1px; - font-weight: bold; - border: none; -} - -header h1 { - width: 100%; - height: 100%; - background: transparent url(top.jpg) no-repeat; -} - -.summary p:last-child { - margin: 10px 30px 0 0; - padding: 0 0 8px 0; - text-transform: uppercase; - font: 9px/20px georgia, tahoma, verdana, arial, sans-serif; - border-bottom: 1px dotted #333; -} - -.summary p:last-child letter-spacing { text-transform: uppercase; } /* IE5/win */ - -footer a { - margin: 5px 20px 0 0; - padding: 2px 5px; - border-left: 1px solid #26a; - border-right: 1px solid #26a; - font: 9px/20px georgia, tahoma, verdana, arial, sans-serif; - text-transform: uppercase; -} - -footer a:hover { - background: #26a; - color: #fff; -} - -header h2, .summary p:first-child { display: none; } - -header h1, h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/* -////////// CONTAINERS ////////// -*/ - - -.page-wrapper { - margin: 0 6%; - background: #f4f2ea url(container_bg.jpg); - border-left: solid 8px #000; - border-right: solid 8px #000; - border-bottom: solid 32px #000; -} - -header { - margin: 0; - background: #000 url(top_bg.jpg); - height: 462px; -} - -footer { - margin: 20px 30px 50px 20px; - padding-top: 10px; - border-top: 1px dotted #000; -} - -.summary { margin-left: 250px; } - -.preamble { - position: relative; - margin-left: 230px; - text-align: left; -} - -.supporting { - position: relative; - margin-left: 230px; - text-align: left; -} - - -/* -////////// LISTS ////////// -*/ - - -.sidebar { - position: absolute; - top: 480px; - margin-left: 30px; - background: url(left_bg2.jpg) repeat-y top left; - width: 180px; - -} - -.sidebar .wrapper { - font: 9px/12px georgia, tahoma, verdana, arial, helvetica, sans-serif; - text-transform: uppercase; - color: #333; - border-bottom: 5px solid #000; - width: 170px; -} - -.sidebar ul { list-style: none; } - -.sidebar li { - margin: 0 15px; - border-top: 1px dotted #333; - padding: 8px 0; - text-transform: uppercase; -} - -.sidebar li a { - display: block; - color: #c32; - font: bold 11px/16px georgia, tahoma, verdana, arial, helvetica, sans-serif; - text-transform: none; -} - -.sidebar li a:hover { - color: #000; - border: none; -} - -.sidebar li a.designer-name { - color: #333; - font-size: 9px; - font-weight: normal; - display: inline; - padding: 0; - text-transform: uppercase; -} - -.sidebar li a.designer-name:hover { color: #888; } - - -.design-archives li a, .zen-resources li a { - display: inline; - font-weight: normal; - font-size: 9px; - line-height: 15px; - padding: 0; - margin: 0; - text-transform: uppercase; -} - -.design-selection h3, .design-archives h3, #lfavorites h3, .zen-resources h3 { - width: 170px; - height: 30px; - margin: 0 0 -1px 0; -} - -.design-selection h3 { background: transparent url(left_lselect.gif) no-repeat; } - -.design-archives h3 { background: transparent url(left_larchives.gif) no-repeat; } - -#lfavorites h3 { background: transparent url(left_lfavorites.gif) no-repeat; } - -.zen-resources h3 { background: transparent url(left_lresources.gif) no-repeat; } - - -/* END OF PAGE --> */ \ No newline at end of file diff --git a/src/data/designs/103/metadata.json b/src/data/designs/103/metadata.json deleted file mode 100644 index a3f5c3bded7b16bc30423c23603bfc456781a06b..0000000000000000000000000000000000000000 --- a/src/data/designs/103/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "103", - "url": "https://www.csszengarden.com/103", - "css_url": "https://www.csszengarden.com/103/103.css", - "description": "This design features a rich and dramatic aesthetic, utilizing a dark burgundy background with gold accents to create a classical and elegant visual appeal. The use of ornate graphic elements and traditional typography reinforces a vintage and scholarly theme, capturing a sense of an 'epic journey' as suggested by the design's concept. The layout is structured with a clear side section for text that guides the viewer's focus, while decorative motifs add ornamental flair.", - "categories": [ - "vintage", - "classical", - "dramatic", - "ornate", - "elegant" - ], - "visual_characteristics": [ - "dark color palette", - "gold accents", - "traditional typography", - "ornate motifs", - "structured layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/103/screenshot_desktop.png b/src/data/designs/103/screenshot_desktop.png deleted file mode 100644 index d3a7012825c334cb16eb6d84730026ae0d2da6ba..0000000000000000000000000000000000000000 --- a/src/data/designs/103/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:73322840555c3539b6263c2b657d188cc73999ea046c33e44f002c5dc5f64a10 -size 875284 diff --git a/src/data/designs/103/screenshot_mobile.png b/src/data/designs/103/screenshot_mobile.png deleted file mode 100644 index 80a42f186716480008748c5761c193bf63b55b06..0000000000000000000000000000000000000000 --- a/src/data/designs/103/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9e3509d1b3a76fa27683f15a992e12f058431b8e609a6974adbc83afe9874715 -size 806394 diff --git a/src/data/designs/103/style.css b/src/data/designs/103/style.css deleted file mode 100644 index 190f8a57f016a7b6f63afa0a24a3f0964d007730..0000000000000000000000000000000000000000 --- a/src/data/designs/103/style.css +++ /dev/null @@ -1,401 +0,0 @@ -/* css Zen Garden submission 103 - 'Odyssey', by Terrence Conley, http://www.liquidarch.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Terrence Conley */ -/* Added: May 3rd, 2004 */ - -/* 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. */ - - -/* Inspired by Homer's Odyssey*/ -/* All original artwork copyright 2004, Terrence Conley */ - - -/*B A S I C T A G R U L E S */ - -body { -color: #000; -background:url(ody-bg3.jpg) repeat-y #000 fixed; -margin:0; -padding:0; -} - -h1, h2, h3 { -margin:0; -padding:0; -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} - -h3, h2, h1, p{ -margin:0; -padding:0; -} - -a:link, a:visited { -text-decoration: none; -color: #C29E47; -} - -a:hover, a:active { -text-decoration: underline; -color: #FFEAC8; -} - -abbr{ -margin:0; -cursor:help; -} - - -ul{ -list-style:none; -margin:0; -padding:0 0 10px 0; -} - -/* M A C R O R U L E S */ - -.page-wrapper { -position: relative; -margin-bottom: 0px; -margin-left:auto; -margin-right:auto; -} - - -.intro { -position:relative; -width:auto; -margin-bottom:0px; -margin-left:35px; -background:url(intro-bg.gif) top left repeat-x transparent; -} - - - -.supporting{ -width:424px; -margin-left:33px; -text-align:center; -font:.8em/1.5em arial,sans-serif; -} - -.supporting p{ -text-align:left; -margin:20px 105px 20px 30px; -padding:0; -} - -.supporting p:nth-child(2){ -padding:0; -margin-top:-40px; -} - -* html .supportingp:nth-child(2) {margin-top:0px;} - -.supporting p:nth-child(6){ -margin-bottom:10px; -font:11px/14px arial, sans-serif; -font-style:italic; -} - -.sidebar{ -background:transparent; -position:absolute; -left:405px; -right:0px; -top:98px; -height:320px; -color:#73552A; -font-size:.6em; -font-family:arial, sans-serif; -overflow:hidden; -background:url(list-bg.gif) bottom right repeat-y; -} - -* html .sidebar {left:375px; right:36px} - -.sidebar .wrapper{ -height:100%; -background:url(blend.gif) repeat-y; -padding:12px 25px 5px 15px; -} - -/* M I C R O R U L E S */ - -header{ -height:98px; -background:url(title2.gif) -2px 0px no-repeat; -margin-left:0px; -} - -header h1, header h2{ -display:none; -} - - -.summary{ -position:absolute; -left:425px; -top:425px; -text-align:left; -width:18em; -height:95px; -color:#AF9874; -padding:0px 10px; -} - -* html .summary{top:435px;} - - -.summary p{ -font:.7em/1.2em arial, sans-serif; -font-style:italic; -} - -.summary p:last-child{ -color:#E4CF9D; -line-height:10px; -line-height:30px; -} - -.preamble{ -height:450px; -width:424px; -font:12px/15px arial, georgia, serif; -font-style:italic; -position:relative; -color:#AF9874; -background:url(preamb2.gif) -2px 231px no-repeat; -text-align:left; -overflow:hidden; - -} - -.preamble p{ -margin-top:4px; -margin-left:20px; -width:310px; -text-indent:10px; -} - -.preamble h3{ -color:#E4CF9D; -height:20px; -padding-top:20px; -margin:0px; -margin-left:20px; -background:url(preamb_title.gif) bottom left no-repeat; -} - -.preamble abbr, .summary abbr{ -color:#E4CF9D; -} - -.explanation p:nth-child(2){ -text-indent:10px; -margin-top:-90px; -} - - -.explanation{ -color:#E4CF9D; -padding:0; -margin-bottom:-30px; -} - - - -.explanation h3{ -margin:0; -background:url(hd-explain.gif) 0 0 no-repeat transparent; -height:134px; -} - -.participation{ -margin-bottom:-30px; -margin-top:2em; -color:#E4CF9D; -padding:0; -} - -.participation h3{ -background:url(hd-partic.gif) 0 0 no-repeat transparent; -height:134px; -} - - -.benefits{ -margin-bottom:-30px; -margin-top:2em; -color:#E4CF9D; -padding:0; -} - -.benefits h3{ -background:url(hd-benefits.gif) 0 0 no-repeat transparent; -height:134px; -} - - -.requirements{ -margin-top:2em; -color:#E4CF9D; -padding:0; -} - -.requirements h3{ -background:url(hd-require.gif) 0 0 no-repeat transparent; -height:134px; -} - -footer{ -background:url(footer.gif) top left no-repeat black; -height:56px; -text-align:left; -padding-left:30px; -} - - -footer a:link, footer a:visited { -color: #C29E47; -text-transform:uppercase; -font:11px/54px arial, serif; -} - -footer a:hover{ -text-decoration: none; -color: #FFEAC8; -text-transform:uppercase; -} - -/* T H E L I S T S */ - - -.design-selection h3, .design-archives h3, #lfavorites h3, .zen-resources h3 { -color:#E4CF9D; -padding-left:12px; -} - -.design-selection h3{ -background:url(select.gif) 0 0 no-repeat; -height:17px; -} - -* html .design-selection h3 {height:17px;} - -.design-archives h3{ -background:url(archives.gif) 0 0 no-repeat; -height:17px; -} - -* html .design-archives h3 {height:17px;} - -#lfavorites h3{ -background:url(favorites.gif) 0 0 no-repeat; -height:17px; - -} - -* html #lfavorites h3 {height:17px;} - - -.zen-resources h3{ -background:url(resources.gif) 0 0 no-repeat; -height:17px; - -} - -* html .zen-resources h3 {height:17px;} - -.design-selection, #lfavorites{ -float:left; -margin-right:0px; -width:18em; -} - -.design-archives{ -float:left; -margin-right:0px; -width:14em; -} -.zen-resources{ -float:left; -margin-right:0px; -width:16em; -} - -.design-selection h3, .design-archives h3, .zen-resources h3, #lfavorites h3{ -margin:0 0 4px 0; -} - -.design-selection li, #lfavorites li{ -padding-bottom:6px; -padding-left:25px; -background:url(bullet.gif) 14px .4em no-repeat; -} - -.design-selection li a, #lfavorites li a{ -display:inline; -} - -.design-archives li, .zen-resources li{ -padding-bottom:2px -} - -.design-selection a:link, .design-selection a:visited, #lfavorites a:link, #lfavorites a:visited{ -font-family:georgia,"times new roman", serif; -font-size:120%; -padding-bottom:2px; -color:#E4CF9D; - - -text-transform:capitalize; -} - -.design-selection a:hover, #lfavorites a:hover{ -font-family:georgia,"times new roman", serif; -font-size:120%; -color:#C29E47; -padding-bottom:2px; -text-transform:capitalize; -text-decoration:none; -} -.design-selection a.designer-name:link, .design-selection a.designer-name:visited, #lfavorites a.designer-name:link, #lfavorites a.designer-name:visited{ -background:transparent; -font-size:100%; -color:#AF9874; -padding:0; -display:inline; -} - -.design-selection a.designer-name:hover, #lfavorites a.designer-name:hover{ -background:transparent; -font-size:100%; -color:#C29E47; -display:inline; -padding:0; -} - -.design-archives a,.zen-resources a{ -font-family:georgia,"times new roman", serif; -color:#E4CF9D; -text-transform:capitalize;; -font-size:100%; -padding:0 0 10px 30px; -} - -.design-archives a:hover,.zen-resources a:hover{ -color:#C29E47; -} - - - - -/* E X T R A D I V S */ - -.extra1, .extra2, .extra3, .extra4, .extra5, .extra6 {display:none} \ No newline at end of file diff --git a/src/data/designs/104/metadata.json b/src/data/designs/104/metadata.json deleted file mode 100644 index b7927424c63268dd4eae3d2113467135017fc8ce..0000000000000000000000000000000000000000 --- a/src/data/designs/104/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "104", - "url": "https://www.csszengarden.com/104", - "css_url": "https://www.csszengarden.com/104/104.css", - "description": "The CSS Zen Garden design emphasizes a harmonious blend of minimalism and elegance, using a subtle color palette of earthy tones to convey tranquility. The typography is refined, with classic serif fonts that enhance readability and lend a formal tone. The layout is clean and well-structured, with ample white space providing visual relief and guiding viewers through the content logically. The use of horizontal lines as separators adds structure without clutter, and the background floral motif adds a delicate, organic touch.", - "categories": [ - "minimalism", - "elegance", - "typography", - "web design concept", - "informative" - ], - "visual_characteristics": [ - "subtle color palette", - "classic serif fonts", - "clean layout", - "organic motifs", - "ample white space" - ] -} \ No newline at end of file diff --git a/src/data/designs/104/screenshot_desktop.png b/src/data/designs/104/screenshot_desktop.png deleted file mode 100644 index 0164e2558d4f869624512aef1470e395b920e083..0000000000000000000000000000000000000000 --- a/src/data/designs/104/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8af5b61e304d9686da8322ca43661130615b428c652ac290b20b2efd9b27adbb -size 486194 diff --git a/src/data/designs/104/screenshot_mobile.png b/src/data/designs/104/screenshot_mobile.png deleted file mode 100644 index db0cf1fe84f16ed0a7b03383310c3e2640685f97..0000000000000000000000000000000000000000 --- a/src/data/designs/104/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3eb8f105afa7c6cc254da60cbd8a7ff327c2857e36046dbde34e9d19e64dbae3 -size 522414 diff --git a/src/data/designs/104/style.css b/src/data/designs/104/style.css deleted file mode 100644 index 2ee918d1d62f488832eea9b4e86be309cc98e8cc..0000000000000000000000000000000000000000 --- a/src/data/designs/104/style.css +++ /dev/null @@ -1 +0,0 @@ -/* css Zen Garden submission 104 - 'Invitation', by Brad Dailey, http://bradleyboy.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, Brad Dailey */ /* Added: May 31st, 2004 */ /* 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. */ body { background:#968354 url(zen_bg.gif) repeat-y center; margin:0; padding:0; font: 13px/15px georgia; text-align:center; } p:nth-child(2) { margin-top:0px; } p { margin-left:15px; } a { color:#968354; } a:hover { color:#7e7e7e; } h1 { background:#ffffff url(head.gif); width:710px; height:200px; margin:10px 0 0 0; padding:0; text-indent: 100%; white-space: nowrap; overflow: hidden; } h2 { display:none; } .page-wrapper { position:relative; width:710px; margin:0 auto 0; padding:0; text-align:justify; } .summary { text-align:center; font-style:italic; color:#7e7e7e; width:500px; margin:0 105px 0; font-size:11px; } .summary a { color:#7e7e7e; } .summary a:hover { color:#333333; } .summary p:first-child { margin-top:8px; margin-bottom:0; } .summary p:last-child { margin-top: 5px; } .summary p { margin-left:0; } .preamble { width:450px; margin-top:20px; } .preamble h3 { background:transparent url(1.gif) no-repeat; height:35px; margin:0; padding:0; text-indent: 100%; white-space: nowrap; overflow: hidden; } .explanation h3 { background:transparent url(2.gif) no-repeat; height:35px; margin:0; padding:0; text-indent: 100%; white-space: nowrap; overflow: hidden; } .supporting { width:450px; margin-top:15px; } .participation h3 { background:transparent url(3.gif) no-repeat; height:35px; margin:0; padding:0; text-indent: 100%; white-space: nowrap; overflow: hidden; } .benefits h3 { background:transparent url(4.gif) no-repeat; height:35px; margin:0; padding:0; text-indent: 100%; white-space: nowrap; overflow: hidden; } .requirements h3 { background:transparent url(5.gif) no-repeat; height:35px; margin:0; padding:0; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar { position:absolute; top:310px; left:50%; margin-left:112px; width:240px; background: url(side_02.gif) repeat-y; text-align:left; } .design-selection h3 { background:transparent url(side_01.gif) no-repeat center; height:51px; margin:0; padding:0; text-indent: 100%; white-space: nowrap; overflow: hidden; } .design-selection ul, .design-archives ul, .zen-resources ul { list-style:none; margin:12px 0 0 0; padding:0 18px 0 18px; } .design-selection ul li, .design-archives ul li, .zen-resources ul li { padding:0 0 0 16px; margin: 0 0 12px 5px; background: url(bull.gif) no-repeat 0 2px; } .design-archives a, .zen-resources a { font-weight:bold; } .design-selection a:hover, .design-archives a:hover, .zen-resources a:hover { color:#000; } .design-selection a { display:block; margin-bottom:5px; font-weight:bold; } .design-selection a.designer-name { display:inline; text-decoration:none; color:#7e7e7e; border:0; font-weight:normal; } .design-selection a.designer-name:hover { color:#333333; text-decoration:none; border:0; } .zen-resources { background: url(side_03.gif) no-repeat bottom right; padding-bottom:10px; } .zen-resources h3 { background:transparent url(res.gif) no-repeat center; height:40px; margin:0; padding:0; text-indent: 100%; white-space: nowrap; overflow: hidden; } .design-archives h3 { display:none; } footer { text-align:center; padding-bottom:10px; } footer a { text-decoration:none; font-weight:bold; } footer a:hover { text-decoration:underline; color:#000; } .extra1 { position:absolute; top:1325px; width:240px; height:174px; background-image: url(env.jpg); left:50%; margin-left:112px } \ No newline at end of file diff --git a/src/data/designs/105/metadata.json b/src/data/designs/105/metadata.json deleted file mode 100644 index 07ac5f2676abb37a06bea1f931358002506646f1..0000000000000000000000000000000000000000 --- a/src/data/designs/105/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "105", - "url": "https://www.csszengarden.com/105", - "css_url": "https://www.csszengarden.com/105/105.css", - "description": "This design features a moody, monochromatic color scheme with bold, red accents to highlight key text elements. The layout is minimalistic, placing emphasis on the primary image\u2014a black-and-white photograph with a strong narrative presence. Typography is clean and sans-serif, enhancing readability while complementing the modern, minimalist aesthetic.", - "categories": [ - "minimalism", - "modern", - "photography", - "creative" - ], - "visual_characteristics": [ - "monochrome", - "bold accents", - "minimal layout", - "strong imagery" - ] -} \ No newline at end of file diff --git a/src/data/designs/105/screenshot_desktop.png b/src/data/designs/105/screenshot_desktop.png deleted file mode 100644 index f0105c17b87b257f8c5f370450472e6ebc47629f..0000000000000000000000000000000000000000 --- a/src/data/designs/105/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4ed9de9090d992a1dce38fbec5833b0c6aaf03880f560e24b8f7612e6fab71ec -size 49409 diff --git a/src/data/designs/105/screenshot_mobile.png b/src/data/designs/105/screenshot_mobile.png deleted file mode 100644 index 45a328a24b7efc4569676beacf3c60bde654bda8..0000000000000000000000000000000000000000 --- a/src/data/designs/105/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ae7179aa3ef64b5d949af8b208a83175e0cedc2c80a32c6a9e0c21810289a509 -size 128919 diff --git a/src/data/designs/105/style.css b/src/data/designs/105/style.css deleted file mode 100644 index 41bd934d55990597082dde9e88b8b54e1e79643a..0000000000000000000000000000000000000000 --- a/src/data/designs/105/style.css +++ /dev/null @@ -1,260 +0,0 @@ -/* css Zen Garden submission 105 - 'Austrian's Dark Side', by Rene Grassegger, http://www.grassegger.at/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Rene Grassegger */ -/* Added: May 31st, 2004 */ - -/* 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. */ - - -body { - font: 12px/16pt "Courier New",monospace !important; - color: #fff; - background: #000 url(body_bg2.jpg) no-repeat bottom right; -} - -html, body, p, h1, h2, h3, div, ul { - margin: 0; - padding: 0; -} - -abbr { - cursor: help; - color: #900; - border-bottom: 1px dotted #900; -} - -abbr:hover { - border-bottom: 3px solid #f00; - font-size: 1.5em; - color: #f00; - font-weight: bold; -} - -h1, h2, h3 { - display: none; -} - -a:link { - font-weight: bold; - text-decoration: none; - color: #f00; -} - -a:visited { - font-weight: bold; - text-decoration: none; - color: #f00; -} - -a:hover, a:active { - text-decoration: underline; - color: #f00; -} - -/* specific divs */ -.page-wrapper { - background: url(csszengarden_bg.jpg) no-repeat top left; - position: absolute; - top: 0; - left: 0; - width: 100%; -} - -.summary { - position: absolute; - top: 20px; - left: 350px; - background: url(starttext_bg.jpg) no-repeat; - clear: both; - margin: 0; - width: 350px; - float: left; -} - -.summary p:first-child { - font: 12px "Courier New" !important; - color: #000; - padding: 23px 10px 0 30px; - height: 95px; -} - -.summary p:last-child { - position: absolute; - top: -20px; - left: 35px; - color: #fff; -} - -.preamble { - position: absolute; - top: 155px; - left: 280px; - background: url(roadtoenlightment.jpg) no-repeat; - height: 416px; - width: 466px; - margin: 0; - padding: 0; -} - - -.preamble p { - font: 12px "Courier New" !important; - color: #000; - margin: 0 0 0px 0; - padding: 20px 45px 0px 150px; -} - -.preamble p:nth-child(2) { - margin-top: 35px; -} - -.explanation { - position: absolute; - top: 582px; - left: 268px; - background: url(sowhatisitabout_bg.jpg) no-repeat; - height: 465px; - width: 476px; - margin: 0; - padding: 0; -} - -.explanation p { - font: 12px "Courier New" !important; - color: #000; - margin: 40px 0 -35px 0; - padding: 20px 45px 0px 150px; -} - -.participation { - position: absolute; - top: 1042px; - left: 268px; - background: url(partcipation_bg.jpg) no-repeat; - width: 484px; - height: 532px; - margin: 0; - padding: 0; -} - -.participation p { - font: 12px "Courier New" !important; - color: #000; - margin: 40px 0 -35px 0; - padding: 20px 45px 0px 150px; -} - -.benefits { - position: absolute; - top: 1582px; - left: 168px; - background: url(benefits_bg.jpg) no-repeat; - width: 586px; - height: 192px; - margin: 0; - padding: 0; -} - -.benefits p { - font: 12px "Courier New" !important; - color: #000; - margin: 40px 0 -35px 0; - padding: 10px 45px 0px 180px; -} - -.requirements { - position: absolute; - top: 1802px; - left: 68px; - background: url(requirements_bg.jpg) no-repeat; - width: 677px; - height: 586px; - margin: 0 0 0 0; - padding: 0; -} - -.requirements p { - font: 12px "Courier New" !important; - color: #000; - margin: 40px 0 -35px 0; - padding: 10px 45px 0px 180px; -} - -footer { - text-align: center; -} - -footer a:link, footer a:visited { - margin-right: 20px; -} - -footer { - position: absolute; - top: 2700px; - left: 30%; -} - -.sidebar { - background: url(sidebar_bg2.jpg) no-repeat top center; - position: relative; - top: 349px; - left: 15px; - margin: 0; - padding: 0; - height: 950px; - width: 211px; - color: #000; -} - -.sidebar a { - font-weight: normal; -} - -.sidebar .wrapper { - font: 11px "Courier New", Courier, monospace; - position: absolute; - top: 105px; - left: 25px; -} - -.design-selection { - width: 162px; - background: url(archives_bg.gif) no-repeat bottom center; - padding-bottom: 100px; -} - -.design-archives { -background: url(resourcen_bg.gif) no-repeat bottom right; - padding-bottom: 100px; - width: 142px; - text-align: center; -} - -.zen-resources { - width: 160px; - text-align: center; -} - -.sidebar ul { - margin: 0px; - padding: 0px; -} - -.sidebar li { - line-height: 2.5ex; - list-style-type: none; - padding-top: 5px; - margin-bottom: 5px; -} - -.sidebar li a:link { - color: #ea0000; -} - -.sidebar li a:visited { - color: #ea0000; -} - diff --git a/src/data/designs/106/metadata.json b/src/data/designs/106/metadata.json deleted file mode 100644 index 60cc9f8f64748e08808e42d448eb5e35a7247ef6..0000000000000000000000000000000000000000 --- a/src/data/designs/106/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "106", - "url": "https://www.csszengarden.com/106", - "css_url": "https://www.csszengarden.com/106/106.css", - "description": "This design features a minimalist and retro aesthetic with a muted color palette predominantly composed of olive green and subtle contrasts. The layout utilizes clean, sans-serif typography and a straightforward column format to present information in a clear and organized manner. The overall style evokes a calm and contemplative mood, reminiscent of classic web designs, with an emphasis on simplicity and readability.", - "categories": [ - "Minimalism", - "Retro", - "Web Design", - "Typography", - "Information Design" - ], - "visual_characteristics": [ - "Muted color palette", - "Clean typography", - "Column layout", - "Simple navigation", - "Classic aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/106/screenshot_desktop.png b/src/data/designs/106/screenshot_desktop.png deleted file mode 100644 index 1709922ccd91e09b79058a2d4dc956420d8c9b37..0000000000000000000000000000000000000000 --- a/src/data/designs/106/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7cfcc18652d5368de283845667a65d8f80d7583c639327fe57fb4b993cba025c -size 427897 diff --git a/src/data/designs/106/screenshot_mobile.png b/src/data/designs/106/screenshot_mobile.png deleted file mode 100644 index 9eb1044579ca19c0362a1d7e5fef03df60496524..0000000000000000000000000000000000000000 --- a/src/data/designs/106/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4431987b77da5910f50f88b8d92f418b90772fde626a64e5ae243227e8e7268c -size 275776 diff --git a/src/data/designs/106/style.css b/src/data/designs/106/style.css deleted file mode 100644 index a31b15e96a893879317e77c4df88330c43b6be9c..0000000000000000000000000000000000000000 --- a/src/data/designs/106/style.css +++ /dev/null @@ -1,223 +0,0 @@ -/* css Zen Garden submission 106 - 'Mediterranean', by John Whittet, http://www.basseq.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, John Whittet */ -/* Added: May 31st, 2004 */ - -/* 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. */ - - -/* - image: Erdogan Ergun - http://yunus.hacettepe.edu.tr/~ergun/ - http://www.sxc.hu -*/ - -/* - Works as expected in: - Mozilla 1.6 Mac - Safari 1.0 Mac - Firefox 0.8 Mac - - Small loss of effects in: - IE 5.2 Mac - IE 5.0 PC - - Errors in: - Opera 6.03 Mac - link colors incorrect - - overline instead of underline (??) - -*/ - -/* Basic Default Styles */ -body { - font: 12px Verdana; - color: #000; - background: #DFE3BA; margin: 5px 0 5px 50%; -} -a:link, a:visited { - font: 12px "Trebuchet MS", Verdana; - text-decoration: underline; - color: #000; -} -a:hover, a:active { - font: 12px "Trebuchet MS", Verdana; - text-decoration: none; - color: #A03E19; -} -/* I probably would have left off the border on the container, but - Safari puts some sort of weird top margin on the div if there's - no border. Silly, really. */ -.page-wrapper { - position: relative; - width: 700px; - background: #ADB583 url(header.jpg) no-repeat top left; - margin: 0 0 0 -350px; - /* Could also use margin-left and -right: auto - but IE 5 PC doesn't like that */ - border: 5px solid #FFF; -} -h3 { - color: #A03E19; - font: 22px "Trebuchet MS", Verdana; - margin: 0; - text-transform: lowercase; -} -abbr { - border: 0; - font-style: normal; -} - -/* Header - just provides space */ -header { - height: 350px; -} -h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/* Content */ -.summary { - margin-top: 50px; - width: 430px; - margin-left: 250px; - color: #42443A; -} -.summary a:link, .summary a:visited { - color: #42443A; -} -.summary a:hover, .summary a:active { - color: #42443A; -} -/* This p:nth-child(2) info is in the header image... */ -.summary p:first-child { - display: none; -} -.preamble, .supporting { - width: 430px; - margin-left: 250px; - margin-top: 15px; -} -footer { - position: relative; - left: -250px; - width: 400px; - height: 20px; - padding: 78px 0 0 50px; - background: #ADB583 url(footer.jpg) no-repeat top left; -} -footer a:link, footer a:visited { - color: #61A7BC; - text-decoration: none; -} -footer a:hover, footer a:active { - color: #61A7BC; - text-decoration: underline; -} -.extra1, .extra2, .extra3, .extra4, .extra5, .extra6 { - display: none; -} - -/* Left Bar */ -.page-wrapper .sidebar { - position: absolute; - left: 18px; - top: 340px; - width: 198px; - font: 10px "Trebuchet MS", Verdana; -} -.sidebar h3 { - width: 198px; - height: 18px; - margin-top: 20px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/* left header images */ -.sidebar h3.select { - background: url(left_select.gif) no-repeat top left; -} -.sidebar h3.archives { - background: url(left_archive.gif) no-repeat top left; -} -.sidebar h3.resources { - background: url(left_resources.gif) no-repeat top left; -} -.sidebar h3.favorites { - background: url(left_favorites.gif) no-repeat top left; -} - -.sidebar ul { - list-style: none; - padding: 0 0 18px 0; - margin: 0; - background: url(left_footer.gif) no-repeat bottom left; -} -.sidebar ul li { - padding: 5px 10px 5px 10px; - background: url(li_bg.png) bottom left; - border-bottom: 1px solid #1A4861; - margin: 0; -} -/* li:hover style... have to replace the BG so the color will show up. */ -.sidebar ul li:hover { - background: #A03E19 url(spacer.gif); - color: #FFF; -} -/* bunch of crazy styles... so IE will still look ok when it - doesn't parse :hover. */ -.sidebar .design-selection { - color: #666; -} -.sidebar ul li a { - /* this would be block, save for the nbsp at the end of the - link for "accessibility" purposes. :P */ - display: inline; - color: #000; - text-transform: lowercase; -} -.sidebar .design-selection ul li a { - font: 14px "Trebuchet MS", Verdana; - display: block; - color: #000; - text-transform: lowercase; -} - -.sidebar .design-selection ul li a.designer-name, .sidebar ul li a.designer-name { - display: inline; - font: 10px "Trebuchet MS", Verdana; - color: #666; - text-transform: none; -} -/* if the browser doesn't read the :hover pseudoclass, this - shouldn't render and the text shouldn't change color */ -.sidebar ul li:hover a, .sidebar .design-selection ul li:hover a { - color: #FFF; -} - -/* Crazy :Hovers Experimentation - uncomment for fun */ - -/* -.preamble p, .explanation p, .participation p, -.benefits p, .requirements p { - display: none; -} -.preamble:hover p, .explanation:hover p, .participation:hover p, -.benefits:hover p, .requirements:hover p { - display: block; -} -.design-selection ul, .design-archives ul, .zen-resources ul { - display: none; -} -.design-selection:hover ul, .design-archives:hover ul, .zen-resources:hover ul { - display: block; -} -*/ \ No newline at end of file diff --git a/src/data/designs/107/metadata.json b/src/data/designs/107/metadata.json deleted file mode 100644 index b76145c3e41b67efb0a1ca7902bb13aecf31f78a..0000000000000000000000000000000000000000 --- a/src/data/designs/107/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "107", - "url": "https://www.csszengarden.com/107", - "css_url": "https://www.csszengarden.com/107/107.css", - "description": "The design showcases a bold and striking use of red and black, creating a highly dramatic and rebellious atmosphere. The artistic style is chaotic and intense, utilizing grunge elements and distressed textures to convey a sense of defiance. The layout features interwoven text and imagery, offering an avant-garde approach that emphasizes creativity over conventional readability. The typography is a mix of hand-drawn and digital styles, adding to the raw and edgy aesthetic of the design.", - "categories": [ - "Rebellion", - "Grunge", - "Avant-Garde", - "Artistic Expression", - "Dramatic" - ], - "visual_characteristics": [ - "Bold Color Contrast", - "Chaotic Layout", - "Distressed Textures", - "Hand-drawn Typography", - "Rebellious Imagery" - ] -} \ No newline at end of file diff --git a/src/data/designs/107/screenshot_desktop.png b/src/data/designs/107/screenshot_desktop.png deleted file mode 100644 index 1eb38d0cfd95ece0e0360d1ba00556c55a6be2fa..0000000000000000000000000000000000000000 --- a/src/data/designs/107/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:37b5f7bfd8279fb9615831e863b88d52a3bc8b864582e5e1d708f1618ad77072 -size 56027 diff --git a/src/data/designs/107/screenshot_mobile.png b/src/data/designs/107/screenshot_mobile.png deleted file mode 100644 index 03942898b98c78dbadb493bac2be77c90fdddbfe..0000000000000000000000000000000000000000 --- a/src/data/designs/107/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9254caa69c6475adc0c73f1d6b5271531727d50db797610c83d6b593f46c8a15 -size 308354 diff --git a/src/data/designs/107/style.css b/src/data/designs/107/style.css deleted file mode 100644 index 0c707bf3d44d19e83c6167c3c15dc84d936125a1..0000000000000000000000000000000000000000 --- a/src/data/designs/107/style.css +++ /dev/null @@ -1,296 +0,0 @@ -/* css Zen Garden submission 107 - 'Defiance', by Angelo Paralos, http://www.ehlydesign.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Angelo Paralos */ -/* Added: June 21st, 2004 */ - -/* 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. */ - - -/* BASE Elements */ - -a { - font-family:Verdana, Arial, Helvetica, sans-serif; - font-size:x-small; - font-weight:bold; - color:#000000; -} - -a:active { - text-decoration:line-through; -} - -a:visited { - text-decoration:line-through; -} - -a:hover { - text-decoration:line-through; -} - -body { - background:#000000 url("screwoff.gif") no-repeat top left; -} - -h1 { - margin:0px; - padding:0px; -} - -h2 { - margin:0px; - padding:0px; -} - -h3 { - margin:0px; - padding:0px; -} - -p { - font-family:Verdana, Arial, Helvetica, sans-serif; - font-size:x-small; - color:#000000; - font-weight:bold; - padding:0px; - margin:0px 0px 10px 0px; -} - -\ -#css-zen-garden { - padding:0px; - margin:0px; -} - -.page-wrapper { - width:760px; - height:3000px; - padding:0px; - margin:0px; -} - - -.intro h1 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.intro h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:first-child { - width:115px; - position:absolute; - left:15px; - top:588px; - color:#FFFFFF; -} - -.summary p:last-child { - position:absolute; - left:5px; - top:2985px; - color:#FFFFFF; -} - -.summary a:link { - color:#FFFFFF; -} - -.summary a:active { - color:#FF0000; - text-decoration:line-through; -} - -.summary a:visited { - color:#FF0000; - text-decoration:line-through; -} - -.summary a:hover { - color:#FF0000; - text-decoration:line-through; -} - -.preamble { - width:195px; - position:absolute; - left:215px; - top:700px; -} - -.preamble p:nth-child(2){ - position:absolute; - left:-50px; -} - -.preamble p:nth-child(3){ - position:absolute; - top:55px; - left:-30px; -} - -.preamble p:nth-child(4){ - position:absolute; - top:120px; - left:20px; -} - - -.preamble h3 { - display: none; -} - -.explanation h3 { - display: none; -} - -.explanation { - width:455px; - position:absolute; - top:1190px; - left:265px; -} - -.participation h3 { - display: none; -} - -.participation { - width:100px; - position:absolute; - top:1412px; - left:23px; -} - -.benefits h3 { - display: none; -} - -.benefits { - width:577px; - position:absolute; - top:1932px; - left:155px; -} - -.requirements h3 { - display: none; -} - -.requirements { - width:520px; - position:absolute; - top:2408px; - left:197px; - text-align:right; -} - -.requirements p:nth-child(6){ - width:520px; - position:absolute; - top:550px; - left:-100px; - text-align:right; - color:#FFFFFF; -} - -.requirements p:nth-child(6) a { - color:#FFFFFF; -} - -.requirements p:nth-child(6) a:active { - color:#FF0000; - text-decoration:line-through; -} - -.requirements p:nth-child(6) a:visited { - color:#FF0000; - text-decoration:line-through; -} - -.requirements p:nth-child(6) a:hover { - color:#FF0000; - text-decoration:line-through; -} - -footer { - position:absolute; - top:2985px; - left:600px; -} - -footer a { - color:#FF0000; - text-decoration:none; -} - -footer a:active { - text-decoration:line-through; -} - -footer a:visited { - text-decoration:line-through; -} - -footer a:hover { - text-decoration:line-through; -} - -.sidebar { - position:absolute; - top:710px; - left:0px; - color:#FF0000; - font-family:Verdana, Arial, Helvetica, sans-serif; - font-size:x-small; - font-weight:bold; -} - -.sidebar h3 { - margin:0px; - padding:0px; - color:#FF0000; - font-family:Verdana, Arial, Helvetica, sans-serif; - font-size:x-small; - font-weight:bold; -} - -.sidebar ul { - margin:0px; - padding:0px; -} - -.sidebar li { - margin:0px 0px 0px 5px; - padding:0px; - list-style-type:none; - line-height:9px; -} - -.sidebar a { - display:block; - margin:0px; - padding:0px; - color:#FF0000; - text-decoration:none; - -} - -.sidebar a:active { - text-decoration:line-through; -} - -.sidebar a:visited { - text-decoration:line-through; -} - -.sidebar a:hover { - text-decoration:line-through; -} \ No newline at end of file diff --git a/src/data/designs/108/metadata.json b/src/data/designs/108/metadata.json deleted file mode 100644 index 064869a3109fc8122b17f65b78c2e7fbc4571b2e..0000000000000000000000000000000000000000 --- a/src/data/designs/108/metadata.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "id": "108", - "url": "https://www.csszengarden.com/108", - "css_url": "https://www.csszengarden.com/108/108.css", - "description": "This design is a minimalist and clean web layout focusing heavily on text-based content with clear typographic hierarchy. Dominated by black and white colors, it employs bold headings and a simple hyperlink structure to effectively present information, creating a professional and educational aesthetic.", - "categories": [ - "web design", - "minimalism", - "typography", - "educational", - "professional", - "CSS" - ], - "visual_characteristics": [ - "minimalist layout", - "black and white palette", - "bold typography", - "clear hierarchy", - "text-focused", - "professional aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/108/screenshot_desktop.png b/src/data/designs/108/screenshot_desktop.png deleted file mode 100644 index 1ea83fe93a436b68101bed3878b37f3b75171d60..0000000000000000000000000000000000000000 --- a/src/data/designs/108/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e331ff1966f22e102f4ca3c7f3266c251ea1101a5cf2d9070d65e2c97ad24d0d -size 403861 diff --git a/src/data/designs/108/screenshot_mobile.png b/src/data/designs/108/screenshot_mobile.png deleted file mode 100644 index e18bcc75c1bc87f40fe2f8730163c54f75bb08e7..0000000000000000000000000000000000000000 --- a/src/data/designs/108/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:409ac6e3ad005c1416173466c6dcc32530e94327361f2bf70d6491874a849e9d -size 337381 diff --git a/src/data/designs/108/style.css b/src/data/designs/108/style.css deleted file mode 100644 index 321a5510890a06658620eb74a04135b6732b5591..0000000000000000000000000000000000000000 --- a/src/data/designs/108/style.css +++ /dev/null @@ -1,9 +0,0 @@ - -
-The requested URL was not found on this server.
-Additionally, a 404 Not Found -error was encountered while trying to use an ErrorDocument to handle the request.
- diff --git a/src/data/designs/109/metadata.json b/src/data/designs/109/metadata.json deleted file mode 100644 index ec7c957a97525a5272506f4082ad962dd2094560..0000000000000000000000000000000000000000 --- a/src/data/designs/109/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "109", - "url": "https://www.csszengarden.com/109", - "css_url": "https://www.csszengarden.com/109/109.css", - "description": "This design effectively uses a dual-column layout with a calming color palette dominated by gradients of light blues and grays. The typography is understated and modern, providing clear readability. A vibrant header image adds contrast and visual interest, while the sidebar enhances navigation with neatly organized links.", - "categories": [ - "Modern Design", - "Minimalist Aesthetic", - "Informative Layout", - "Web Design Inspiration", - "Educational Resource" - ], - "visual_characteristics": [ - "Dual-Column Layout", - "Light Blue and Gray Color Palette", - "Vibrant Contrast Image", - "Simple Typography", - "Organized Navigation" - ] -} \ No newline at end of file diff --git a/src/data/designs/109/screenshot_desktop.png b/src/data/designs/109/screenshot_desktop.png deleted file mode 100644 index 345bf10407a400307c266676965e8492eaa9c906..0000000000000000000000000000000000000000 --- a/src/data/designs/109/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1cfa2212fc9e8951690a5b0ec57569dc98aff5b274150613b2de1a8f54217d58 -size 502692 diff --git a/src/data/designs/109/screenshot_mobile.png b/src/data/designs/109/screenshot_mobile.png deleted file mode 100644 index 5203212dbf34f61a0db575882a6632b6d5015f8b..0000000000000000000000000000000000000000 --- a/src/data/designs/109/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:56149a29559dbcea588176b372b6e7d2fda85cd957a28bad273b8518882f4e05 -size 289374 diff --git a/src/data/designs/109/style.css b/src/data/designs/109/style.css deleted file mode 100644 index be90abd1d23887b46dd6a6c494c3bc8d1d6776d4..0000000000000000000000000000000000000000 --- a/src/data/designs/109/style.css +++ /dev/null @@ -1,110 +0,0 @@ -/* css Zen Garden submission 109 - 'Pneuma', by Adam Polselli, http://www.adampolselli.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Adam Polselli */ -/* Added: June 21st, 2004 */ - -/* 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. */ - - - -/* basic elements -------------------------------------*/ - -a { font-weight: bold; } -a:link, a:visited { text-decoration: none; color: #333; } -a:hover, a:active { text-decoration: underline; color: #F36; } - -abbr { border: none; cursor: help; } - -body { background: #414141 url(pagebg.gif) repeat-y top center; font: 69%/1.5em 'Lucida Sans Unicode', 'Lucida Grande', verdana, arial, sans-serif; color: #333; margin: 0; padding: 0; text-align: center; } - -p { margin: 0 0 10px; } - -/* specific divs --------------------------------------*/ - -.page-wrapper { position: relative; background: transparent; margin: 0 auto; text-align: justify; width: 600px; } -.page-wrapper h3 { font-size: 110%; font-weight: bold; margin-bottom: 10px; margin-top: 10px; } - -header { margin: 0; padding-top: 15px; height: 300px; background: #FFF url(header.jpg) no-repeat bottom; border-bottom: 15px solid #FFF; } -header h1, header h2 { margin: 0; padding: 0; display: none; } - -.summary { position: absolute; bottom: 0; right: 0; z-index: 2; width: 170px; padding: 0 6px 5px; margin: 0; } -.summary a { color: #377774; } -.summary p { font-size: 90%; text-align: left; color: #377774; margin: 0; } -.summary p:first-child { margin: 0; padding: 0; display: none; } - -.preamble { background: url(preamblebg.gif) repeat-y; position: absolute; top: 330px; right: 0; z-index: 2; width: 190px; font-size: 90%; color: #FFF; text-align: left; border-bottom: 15px solid #FFF; line-height: 14px; } -.preamble p { margin: 0 17px 15px 15px; } -.preamble h3 { height: 58px; margin: 0; padding: 0; background: url(preambleheader.jpg) no-repeat top; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.supporting { margin: 0 205px 0 0; background: #D8FBFC url(suptextbg.gif) repeat-y; } -.supporting p { margin: 0 20px 15px 20px; } - -.explanation h3 { height: 46px; margin: 0; padding: 0; background: url(explanation.gif) no-repeat top; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation h3 { height: 37px; margin: 0; padding: 0; background: url(participation.gif) no-repeat top left; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.benefits h3 { height: 37px; margin: 0; padding: 0; background: url(benefits.gif) no-repeat top left; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.requirements h3 { height: 37px; margin: 0; padding: 0; background: url(requirements.gif) no-repeat top left; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -footer { background: #999 url(footerbg.gif) repeat-y 0 0; border-top: 15px solid #FFF; padding: 10px 15px 10px 10px; text-align: right; margin: 0; } -footer a { margin-left: 20px; color: #CCC; } -footer a:hover, footer a:active { color: #FFF; } - -.sidebar { background: transparent; padding: 0; margin: 0; width: 190px; position: absolute; top: 704px; right: 0; font-size: 90%; } - -.sidebar ul { margin: 0; padding: 0; list-style: none; } -.design-selection ul, .design-archives ul, .zen-resources ul { margin-top: -10px; margin-bottom: -10px; } -.sidebar li { display: block; padding: 8px 0 7px 12px; margin: 0; line-height: 160%; border-bottom: 1px solid #FFF; } - -.sidebar li a { color: #333; font: bold 110% arial, helvectica, sans-serif; } -.sidebar li:hover { background: url(selecthoverbg.gif) 0 0; } -.sidebar li:hover a { color: #FFF; } - -.design-selection { color: #377774; } -.design-selection li:hover { background: url(selecthoverbg.gif); color: #FFB9CB; } -.design-selection li a { text-transform: uppercase; font: bold 110% arial, helvectica, sans-serif; display: block; margin: 0; padding: 0; } -.design-selection li:hover a { color: #FFF; } -.design-selection li a.designer-name:link, .design-selection li a.designer-name:visited { display: inline; font-weight: normal; text-transform: none; font-size: 100%; color: #377774; } -.design-selection li:hover a.designer-name { color: #FFB9CB; } - -h3.select { height: 29px; margin: 0; padding: 0; background: url(select.gif) no-repeat; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -h3.archives { height: 30px; margin: 0; padding: 0; background: url(archives.gif) no-repeat; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -h3.resources { height: 26px; margin: 0; padding: 0; background: url(resources.gif) no-repeat; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} diff --git a/src/data/designs/110/metadata.json b/src/data/designs/110/metadata.json deleted file mode 100644 index 07c940579b2e90456b5c19225b9e7435020daf29..0000000000000000000000000000000000000000 --- a/src/data/designs/110/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "110", - "url": "https://www.csszengarden.com/110", - "css_url": "https://www.csszengarden.com/110/110.css", - "description": "The design features a vibrant orange background with a pink textured header, creating a striking contrast. The typography is varied, with elegant serif fonts for headings and sans-serif fonts for body text. The layout is structured, with a clear hierarchical organization and distinct sections. This design evokes a modern and artistic atmosphere, emphasizing creativity and structure.", - "categories": [ - "modern", - "artistic", - "creative", - "structured", - "contrast" - ], - "visual_characteristics": [ - "vibrant colors", - "textured header", - "contrasting typography", - "hierarchical layout", - "elegant fonts" - ] -} \ No newline at end of file diff --git a/src/data/designs/110/screenshot_desktop.png b/src/data/designs/110/screenshot_desktop.png deleted file mode 100644 index 714b135f25679a14cd133a312705f11a1704ecbb..0000000000000000000000000000000000000000 --- a/src/data/designs/110/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d7f73b05b881be6af1ab0ec85e386eb4e272ff66f04a412f157d5cc06e5bc806 -size 378486 diff --git a/src/data/designs/110/screenshot_mobile.png b/src/data/designs/110/screenshot_mobile.png deleted file mode 100644 index 34cd8182db5ab4986fcfcea7bf56af918925f6c0..0000000000000000000000000000000000000000 --- a/src/data/designs/110/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a43eb747d4d56cdfad013fad432c86dea2bf5f64256d4ef51ec480c7764eabbd -size 279258 diff --git a/src/data/designs/110/style.css b/src/data/designs/110/style.css deleted file mode 100644 index 5ea3afba8b99d0b03e77b17312b5e9fbdc88e599..0000000000000000000000000000000000000000 --- a/src/data/designs/110/style.css +++ /dev/null @@ -1,287 +0,0 @@ -/* css Zen Garden submission 110 - 'Perfume de Gardenias', by Armando Sosa, http://nolimit-studio.com/yosoysosa/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Armando Sosa */ -/* Added: June 21st, 2004 */ - -/* 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. */ - - - -/* basic elements */ -body { - font: 10px/16px verdana; - color: 333; - margin: 0px; - background:#f60 url('bg.gif') repeat-y; - } - -h3 { - font-family:georgia; - font-style:italic; - font-size:14px; - letter-spacing: 1px; - margin-bottom: 0px; - text-align:center; - color:#c00; - } - -a:link { - font-family:"courier new",verdana; - font-weight: bold; - text-decoration: none; - color:#c00; - text-transform:uppercase; - } -a:visited { - font-weight: bold; - text-decoration: none; - } -a:hover, a:active { - text-decoration: underline; - } - - - -/* specific divs */ -.page-wrapper { -position:absolute; -top:0; -left:50px; -width:90%; -color:#333; -padding:0 30px; - } - -.intro,.supporting{ -text-align:justify; -} - -.intro abbr,.intro abbr .supporting abbr,.supporting abbr{ - font-family:"courier new",verdana; - text-transform:uppercase; - color:#000; - } - -header { -position:absolute; -top:0; -left:0; -width:650px; -height:400px; -background:#fcc url('head_bg.gif') repeat-x -50px;; -} - -header h1{ -top:-40px; -left:45px; -position:absolute; -width:515px; -height:70px; -text-indent:-5000px; -background:transparent url('zengardenia.gif') no-repeat bottom; -} - -header h2{ -font-family:georgia; -font-size:25px; -font-style:italic; -position:absolute; -top:15px; -left:130px; -padding:0px !important; -padding:20px; -color:#900; -z-index:2 -} - - -.summary{ -position:absolute; -top:65px; -left:100px; -width:350px; -font-family:georgia; -font-size:13px; -font-weight:bold; -text-align:center; -padding:15px; -color:#000; -z-index:3; -} - -.preamble{ -position:absolute; -top:200px; -width:450px; -left:50px; -padding:10px; -} - -.supporting{ -padding:15px; -position:absolute; -top:500px; -left:230px; -width:360px; -height:600px; -overflow:auto; - /* I've used an ExtraDiv to display the background behind this layer, but IE - doesn't like my idea. So i put the background directly in the Div for browsers - that do not support "!important" */ -background:transparent !important; -background:transparent url('supp_bg.gif') no-repeat fixed; -z-index:2; -} - - -.explanation{ -margin-top:50px; -} - -footer{ -padding-bottom:100px; -} - -.sidebar{ -text-align:center; -width:200px; -height:600px; -position:absolute; -top:560px; -left:5px; -padding:75px 25px 0px 0px; -color:#b63; -background:transparent url('sidebar_bg.gif') no-repeat; -} - - -.sidebar h3{ -color:#c96; -} - -.sidebar ul{ -margin:0px; -padding:15px; -} - -.sidebar li{ -margin:0; -padding:0; -list-style:none inside; -display:block; -padding:2px; -} - -.sidebar a{ -font-family:verdana; -color:#c96; -} - -h3.select{ -display:none; -} - -.design-selection ul li{ -padding-bottom:5px; -margin-bottom:5px; -border-bottom:dotted 1px #b63; -} - -.design-selection ul li a{ -display:block; -} - -.design-selection ul li a.designer-name{ -display:inline; -text-transform:lowercase; -} - -.zen-resources{ -left:-5px; -top:710px; -width:651px; -position:absolute; -color:#333; -background:#900; -} - -.zen-resources h3{ -display:none; -} - -.zen-resources ul li{ -display:inline; -} - -/* Extra Divs */ - -/* I've used all and everyone of the six provided by the XHTML -maybe if there were more, i would used it too :P*/ - -.extra1{ -position:absolute; -top:-65px ; -left:580px; -width:150px; -height:615px; -background:transparent url('girl.gif') no-repeat; -z-index:2; -} - -.extra2{ -position:absolute; -top:1070px ; -left:250px; -width:150px; -height:200px; -background:transparent url('girl.gif') no-repeat; -z-index:2; -} - -/*Because of some weird thing, I cannot make this layer to go under the -supportingText one, so i've discovered for accident that leaving no space between -the url for the graphic used in the background and the no-repeat attribute causes IE -to not display any background at all*/ - -.extra3{ -position:absolute; -top:470px; -left:270px; -width:430px; -height:700px; -background:transparent url('supp_bg.gif')no-repeat; -z-index:0; -} - -.extra4{ -position:absolute; -top:1098px; -left:590px; -background:transparent url('gardenia.gif') no-repeat; -width:200px; -height:180px; -} - -.extra5{ -position:absolute; -top:420px; -left:50px; -background:transparent url('dead.gif') no-repeat; -width:515px; -height:150px; -} - -.extra6{ -position:absolute; -top:0px; -left:0px; -background:transparent url('gardenia.gif') no-repeat; -width:200px; -height:200px; -} - - - diff --git a/src/data/designs/111/metadata.json b/src/data/designs/111/metadata.json deleted file mode 100644 index 0ba2e4eba3250853aab36b087cdcfc28daf6a404..0000000000000000000000000000000000000000 --- a/src/data/designs/111/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "111", - "url": "https://www.csszengarden.com/111", - "css_url": "https://www.csszengarden.com/111/111.css", - "description": "The design features a harmonious blend of dark green tones with a natural forest imagery background, creating a tranquil visual atmosphere. Text is thoughtfully arranged to balance aesthetic appeal with readability, utilizing varying shades of green for emphasis and contrast. Large, decorative text at the top captures attention, while columns of boxed text present information clearly and efficiently. The overall look is serene and sophisticated, ideal for a design showcasing environmental or nature-themed content.", - "categories": [ - "Nature", - "Tranquil", - "Modern", - "Sophisticated", - "Green" - ], - "visual_characteristics": [ - "Forest background", - "Green color palette", - "Decorative typography", - "Columnar layout", - "Contrast in text clarity" - ] -} \ No newline at end of file diff --git a/src/data/designs/111/screenshot_desktop.png b/src/data/designs/111/screenshot_desktop.png deleted file mode 100644 index 21db8446c2bbd7cc16e9f8c28097518454fbe27b..0000000000000000000000000000000000000000 --- a/src/data/designs/111/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:cbeab48fcf69a9c4325d31da57a39f9489abff3545bdbe05dbe8e2bf68ecbc61 -size 595198 diff --git a/src/data/designs/111/screenshot_mobile.png b/src/data/designs/111/screenshot_mobile.png deleted file mode 100644 index 36173aeffba0a5f778f5e9406c4186914123f427..0000000000000000000000000000000000000000 --- a/src/data/designs/111/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d59abcb73b53ea06601e5cee16131f7d6e17bd624e9e2378810e2a73f49092a3 -size 301342 diff --git a/src/data/designs/111/style.css b/src/data/designs/111/style.css deleted file mode 100644 index 175d8b0c7a6599328451628cf798d75f561a9d5d..0000000000000000000000000000000000000000 --- a/src/data/designs/111/style.css +++ /dev/null @@ -1,378 +0,0 @@ -/* css Zen Garden submission 111 - 'Gruener Entwurf', by Hannah F. Liesong, http://www.liesong.de/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Hannah F. Liesong */ -/* Added: July 29th, 2004 */ - -/* 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. */ - - - - -/* basic elements */ -body { - margin: 0px; - padding: 7% 0px 7% 0px; - background-color: #143A1F; - } -p { - font: 10px Verdana, Arial, Helvetica, sans-serif; - text-align: justify; - color: #1F1F1F; - margin: 0px 13px 0px 13px; - } -abbr - { - font-style: italic; - font-weight: normal; - border: 0; - cursor: help; - } -a:link { - font-weight: bold; - text-decoration: none; - border: 1px dotted #61A681; - color: #0E9B7D; - } -a:visited { - font-weight: bold; - text-decoration: none; - border: 1px dotted #61A681; - color: #0E8368; -} -a:hover { - font-weight: bold; - text-decoration: none; - border: 1px dotted #690; - background-color: #669900; - color: #FCFE85; - } - - -/* specific divs */ -.page-wrapper { - padding: 0px 0px 1px 0px; - margin: 0px; - height: 510px; - border-bottom: 1px solid white; - border-top: 1px solid white; - position: relative; - left: 0px; - background: #254634 url("baeume.jpg") no-repeat; - width: 2000px; - } - - - -header h1 { - background: url("head1.gif") no-repeat left top; - margin-top: 0px; - float: none; - padding: 0px; - height: 101px; - width: 778px; - z-index: 5; - position: absolute; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -header h2 { - margin-top: 58px; - margin-bottom: 40px; - width: 200px; - height: 18px; - float: right; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.summary { - margin: 0px; - height: 56px; - width: 419px; - background: url("quicksummary.gif") no-repeat; - z-index: 10; - position: absolute; - padding: 0px; - left: 53px; - top: 83px; - } -.summary p { - display: none; - } - -.preamble { - background: url("praeamble_bg.jpg") no-repeat; - position: absolute; - left: 53px; - top: 139px; - width: 419px; - height: 300px; - overflow: auto; - } -.preamble h3 -{ - margin: 0; - padding: 0; - position: relative; - height: 61px; - width: 419px; - left: 0px; - top: 0px; - background-image: url("praeamble_h1.gif"); - background-repeat: no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.explanation - { - margin: 0; - padding: 0; - background: url("explanation_bg.jpg") repeat-x; - position: absolute; - left: 473px; - top: 139px; - width: 297px; - height: 300px; - overflow: auto; - } -.explanation h3 { - margin: 0; - padding: 0; - background: url("explanation_h.gif") no-repeat; - position: relative; - height: 61px; - width: 277px; - left: 0px; - top: 0px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.participation - { - margin: 0; - padding: 0; - background: url("participation_bg.gif"); - position: absolute; - left: 771px; - top: 139px; - width: 348px; - height: 300px; - overflow: auto; - background-repeat: repeat; - } -.participation h3 { - margin: 0; - padding: 0; - background: url("participation_h.gif") no-repeat; - position: relative; - height: 61px; - width: 328px; - left: 0px; - top: 0px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.benefits - { - margin: 0; - padding: 0; - position: absolute; - left: 1120px; - top: 139px; - width: 254px; - height: 300px; - overflow: auto; - background-color: #D5E3B8; - } -.benefits h3 { - margin: 0; - padding: 0; - background: url("benefits_h.gif") no-repeat; - position: relative; - height: 61px; - width: 254px; - left: 0px; - top: 0px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.requirements - { - margin: 0; - padding: 0; - position: absolute; - left: 1375px; - top: 139px; - width: 600px; - height: 300px; - overflow: auto; - background-color: #E1EBCC; - } -.requirements h3 { - margin: 0; - padding: 0; - background: url("requirements_h.gif") no-repeat; - position: relative; - height: 61px; - width: 410px; - left: 0px; - top: 0px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.sidebar { - padding: 0px 0px 3px 0px; - margin: 1px; - visibility: visible; - z-index: 0; - position: absolute; - left: 53px; - top: 440px; - right: 0; - background-image: url("select_bg.gif"); - width: 1946px; - } -.design-selection - { - } -.sidebar h3.select { - margin: 0px; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 10px; - color: #C1AD79; - font-style: normal; - font-weight: bold; - text-transform: uppercase; - position: relative; - left: 25px; - top: 0px; - float: left; - width: 140px; - } -.sidebar ul { - margin: 0; - padding: 0; - list-style: none; - font-family: Arial, Helvetica, sans-serif; - font-size: 10px; - font-weight: normal; - left: 0px; - top: 0px; - color: #DBFE72; -} -.sidebar li { - list-style-type: none; - float: left; - margin: 0px 3px 0px 3px; - padding: 0px; - border-bottom: 1px solid #BCFD69; - margin: 0px 3px 0px 3px; - } -.sidebar li a:link { - color: #DBFE72; - font-weight: bold; - text-decoration: none; - border: 0; - cursor: move; - } -.sidebar li a:visited { - color: #DBE272; - font-weight: bold; - text-decoration: none; - cursor: move; - border: 0; - } -.sidebar li a:hover { - color: #254632; - background-color: #DBFE72; - font-weight: bold; - text-decoration: none; - border:0; - } -.design-archives { - clear:left; -} -h3.archives { - margin: 3px 0px; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 10px; - color: #C1AD79; - font-style: normal; - font-weight: bold; - text-transform: uppercase; - position: relative; - left: 25px; - top: 0px; - float: left; - width: 140px; - } -.zen-resources { - clear:left; - } -h3.resources { - margin: 0px; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 10px; - color: #C1AD79; - font-style: normal; - font-weight: bold; - text-transform: uppercase; - position: relative; - left: 25px; - top: 0px; - float: left; - width: 140px; - } -footer { - width: 1946px; - position: absolute; - left: 0px; - top: 490px; - margin: 0; - padding: 0px 0px 0px 53px; - border-top: 1px solid #669900; - border-bottom: 1px solid #669900; - } -footer a:link, footer a:visited { - font-size: 9px; - color: #254634; - font-family: Arial, Helvetica, sans-serif; - font-weight: normal; - text-transform: uppercase; - padding: 0; - margin: 0; - border: 0; - } -footer a:hover - { - color: #DBFE72; - font-weight: bold; - text-transform: uppercase; - text-decoration: underline; - } - -footer a:before - { - content: "["; - } -footer a:after - {content: "]"; - } diff --git a/src/data/designs/112/metadata.json b/src/data/designs/112/metadata.json deleted file mode 100644 index 38d67e4cc1aaa31b60e4837064ba437384707df2..0000000000000000000000000000000000000000 --- a/src/data/designs/112/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "112", - "url": "https://www.csszengarden.com/112", - "css_url": "https://www.csszengarden.com/112/112.css", - "description": "This design combines a winter outdoor theme with a rustic wooden sign aesthetic, featuring a prominent hero image of a snowy landscape. The design uses distinct sections with textured borders and a warm color palette to draw attention to the content and navigation areas. It evokes a sense of nature and tranquility while providing clear and structured content layout.", - "categories": [ - "Nature", - "Rustic", - "Textured", - "Structured Layout", - "Warm Colors" - ], - "visual_characteristics": [ - "Hero Image", - "Textured Borders", - "Warm Color Palette", - "Nature Elements", - "Prominent Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/112/screenshot_desktop.png b/src/data/designs/112/screenshot_desktop.png deleted file mode 100644 index a624d6ecebc488db327d72fdf70d30ffa48366c8..0000000000000000000000000000000000000000 --- a/src/data/designs/112/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:37e22452f98bafc38c745d9470d1ac3dec856d3510e8eb1c009a6701865bd37a -size 413265 diff --git a/src/data/designs/112/screenshot_mobile.png b/src/data/designs/112/screenshot_mobile.png deleted file mode 100644 index 8bb78a55d54822909eb4b15e42c4260d76b5ccbb..0000000000000000000000000000000000000000 --- a/src/data/designs/112/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:27d6b42e507477b9dca713ee162407480ccd84095c2c35af568eedf5c3fbdbe6 -size 1136165 diff --git a/src/data/designs/112/style.css b/src/data/designs/112/style.css deleted file mode 100644 index 0b5bded41fdfc881bc1f84510c163d8f3ca11967..0000000000000000000000000000000000000000 --- a/src/data/designs/112/style.css +++ /dev/null @@ -1,261 +0,0 @@ -/* css Zen Garden submission 112 - 'Mountain Resort', by Jordi Romkema, http://www.jor-on.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Jordi Romkema */ -/* Added: July 29th, 2004 */ - -/* 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. */ - - - - - -/* Basic */ -body { - font: 9pt Arial, Helvetica, sans-serif; - color: #000000; - background: #00004A url(bg.gif) repeat fixed left top; - margin: 0px; -} - -p { - font: 9pt Arial, Helvetica, sans-serif; - text-align: left; -} - -a:link, a:visited { - color: #00004A; - font-weight: bold; - text-decoration: underline; -} - -a:hover, a:active { - color: #C17535; - font-weight: bold; - text-decoration: underline; -} - -/* Hiding elements we don't want to see */ - -h1, h2, .extra1, .extra2, .extra3, .extra4, .extra5, .extra6 { - display: none; -} -h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -/* Specific Divs */ - -.page-wrapper { - display: block; - position: relative; - width: 700px; - margin: 0px auto; - background: #FFFFFF url(bgend.jpg) no-repeat left bottom; - padding-bottom: 20px; -} - -.intro { - background: #FFFFFF url(header.jpg) no-repeat 0 0; - padding-top: 471px; -} - -.summary { - position: absolute; - top: 0px; - left: 0px; - width: 700px; - color: #B9E0FF; -} - -.summary a:link, .summary a:visited { - color: #B9E0FF; - font-weight: bold; - text-decoration: underline; -} - -.summary a:hover, .summary a:active { - color: #00004A; - font-weight: bold; - text-decoration: underline; -} - -.summary p:first-child { - display: none; -} - -.summary p:last-child { - font-size: 8pt; - text-align: right; - margin: 5px; -} - -.preamble, .supporting { - width: 410px; - text-align: left; -} - -/* Header Images */ - -.preamble { - background:url(preamble.jpg) no-repeat left top; - padding:74px 10px 5px 10px; -} -.preamble h3, .supporting h3 { - display: none; -} - -.explanation { - background:url(explanation.jpg) no-repeat left top; - padding:44px 10px 0px; -} - -.participation { - background:url(participation.jpg) no-repeat left top; - padding:44px 10px 0px; -} - -.benefits { - background:url(benefits.jpg) no-repeat left top; - padding:44px 10px 0px; -} - -.requirements { - background:url(requirements.jpg) no-repeat left top; - padding:44px 10px 10px 10px; -} - -/* Footer */ - -footer { - text-align: center; - font-size: 8pt; - font-weight: bold; - font-family: Arial, Helvetica, sans-serif; - padding: 10px; -} - -footer a:link, footer a:visited { - margin-right: 15px; - color: #C17535; -} - -footer a:hover { - margin-right: 15px; - color: #00004A; -} - -/* Navigation */ - -.sidebar { - position: absolute; - top: 471px; - left: 437px; - width: 263px; - background-image: url(bglist.gif); -} - -.sidebar .wrapper { - font: 8pt Arial, Helvetica, sans-serif; - color: #C17535; - width: 263px; - background: url(listend.jpg) no-repeat left bottom; -} - -.sidebar h3 { - margin: 0; - width: 263px; - height: 32px; -} - -/* Navigation Images */ - -.sidebar h3.select { - background: url(select.gif) no-repeat left top; - height: 177px; -} - -.sidebar h3.archives { - background: url(archives.gif) no-repeat left top; -} - -.sidebar h3.resources { - background: url(resources.gif) no-repeat left top; -} - -.sidebar h3.favorites { - background: url(favorites.gif) no-repeat left top; -} - -/* Spacer */ - -.zen-resources { - padding-bottom: 176px; -} - -/* Navigation Lists */ - -.sidebar ul { - margin: 0px 0px 0px 28px; - padding: 0px; - width: 211px; -} - -.sidebar li { - display: block; - padding: 5px; - border-bottom-width: 1px; - border-bottom-style: dashed; - border-bottom-color: #D2C598; -} - -.sidebar li a { - display: block; - color: #5B2C02; -} - -.design-selection li a:link, .design-selection li a:visited, #lfavorites li a:link, #lfavorites li a:visited { - text-transform: uppercase; - color: #5B2C02; - font-weight: bold; - text-decoration: none; -} - -.design-archives li a:link, .design-archives a:visited, .zen-resources li a:link, .zen-resources li a:visited { - text-transform: uppercase; - font-weight: bold; - text-decoration: none; -} - -.sidebar li a:hover, .sidebar li a:active { - color: #000000; -} - -.sidebar li a.designer-name:link, .sidebar li a.designer-name:visited { - color: #C17535; - font-weight: bold; - display: inline; - text-transform: none; -} - -.sidebar li a.designer-name:hover, .sidebar li a.designer-name:active { - color: #000000; -} - -.sidebar li:hover { - background: #D2C598; - color: #FFFFFF; -} - -.sidebar li:hover a.designer-name:link, .sidebar li:hover a.designer-name:visited { - color: #FFFFFF; -} - -.sidebar li:hover a:link, .sidebar li:hover a:visited { - color: #000000; -} \ No newline at end of file diff --git a/src/data/designs/113/metadata.json b/src/data/designs/113/metadata.json deleted file mode 100644 index f2b12c06966c0f25adffaf8a111492e195ac93b2..0000000000000000000000000000000000000000 --- a/src/data/designs/113/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "113", - "url": "https://www.csszengarden.com/113", - "css_url": "https://www.csszengarden.com/113/113.css", - "description": "This design features a high-contrast, black background with neon green accents, creating a futuristic and edgy aesthetic. The layout is structured with clear sections, using simple and consistent typography. The design offers a demonstration of CSS capabilities, with emphasis on content hierarchy and readability.", - "categories": [ - "futuristic", - "high-contrast", - "typography-focused", - "minimalistic" - ], - "visual_characteristics": [ - "black background", - "neon green accents", - "structured layout", - "clear typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/113/screenshot_desktop.png b/src/data/designs/113/screenshot_desktop.png deleted file mode 100644 index 445d6c0612f67138d99e94de64c429d6610c7a5a..0000000000000000000000000000000000000000 --- a/src/data/designs/113/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:755b2e9f37b356641b715220320ccc91e9942b0124943f5657245ad3f9854569 -size 371849 diff --git a/src/data/designs/113/screenshot_mobile.png b/src/data/designs/113/screenshot_mobile.png deleted file mode 100644 index 43b4a919f2f2fa1546ebcaa3943071dc542c35f0..0000000000000000000000000000000000000000 --- a/src/data/designs/113/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:33aac216c5aba9d718859b0fdaceab5bf29c69d8cf6bde9c16e0548beac49f8e -size 293243 diff --git a/src/data/designs/113/style.css b/src/data/designs/113/style.css deleted file mode 100644 index 2ab47199ff43275a62885676f29fcab203b29982..0000000000000000000000000000000000000000 --- a/src/data/designs/113/style.css +++ /dev/null @@ -1,264 +0,0 @@ -/* css Zen Garden submission 113 - 'Switch On', by Michael Fasani, http://www.michaelfasani.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Michael Fasani */ -/* Added: July 29th, 2004 */ - -/* 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. */ - - - - -body { - margin: 0px; - padding: 0px; - width: 100%; - height: 100%; - font-family: verdana, arial; - background: #000000 url(bg.gif); - font-size: 8pt; - color: #FFFFFF; -} - -a { - color: #99FF00; - text-decoration: none; -} - -h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -a:hover { - color: #FF6600; -} - -.page-wrapper { - position: relative; - margin: 10px auto; - padding: 10px; - width: 600px; - text-align: left; - voice-family: "\"}\""; - voice-family: inherit; - width: 594px; - border: 10px solid #ffffff; - background: #000000 url(zentop.gif) no-repeat top left; -} - -header { - margin-top: 390px; - position: relative; -} -header h1, header h2 { - display: none; -} - -.summary p:first-child { - position: absolute; - width: 586px; - padding: 14px; - font-size: 8pt; - text-transform: uppercase; - background: #000000 url(bg2.gif); - color: #99FF00; - text-align: center; - top: 327px; - left: -1px; - border: 1px solid #ffffff; -} - -.summary p:last-child { - position: absolute; - font-size: 7.5pt; - text-transform: uppercase; - font-family: Arial; - color: #CCCCCC; - top: 307px; - left: 345px; - width: 270px; -} - -.summary a { - color: #FFFFFF; - text-decoration: none; -} - -.summary a:hover { - background: #99FF00; - color: #000000; -} - -footer { - position: absolute; - font-size: 7.5pt; - text-transform: uppercase; - font-family: Arial; - color: #FFFFFF; - top: 307px; -} - -footer a { - color: #FFFFFF; - text-decoration: none; -} - -footer a:hover { - background: #99FF00; - color: #000000; -} - -.preamble { - width: 440px; - text-align: justify; -} - -.preamble h3 { - position: relative; - background: transparent url(theroad.gif) no-repeat; - margin-top: 10px; - height: 45px; - left: -10px; -} - -.preamble p:nth-child(2) { - text-indent: 20px; - margin-top: -28px -} - -.explanation { - width: 440px; - text-align: justify; -} - -.explanation h3 { - position: relative; - background: transparent url(sowhat.gif) no-repeat; - margin-top: 25px; - height: 45px; - left: -10px; -} - -.explanation p:nth-child(2) { - text-indent: 20px; - margin-top: -28px -} - -.participation { - text-align: justify; -} - -.participation h3 { - position: relative; - background: transparent url(parti.gif) no-repeat; - margin-top: 25px; - height: 45px; - left: -10px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation p:nth-child(2) { - text-indent: 20px; - margin-top: -28px -} - -.participation p:nth-child(3) { - width: 440px; -} - -.participation p:nth-child(2){ - width: 440px; -} - -.benefits { - text-align: justify; -} - -.benefits h3 { - position: relative; - background: transparent url(beni.gif) no-repeat; - margin-top: 25px; - height: 45px; - left: -10px; -} - -.benefits p:nth-child(2) { - text-indent: 20px; - margin-top: -28px -} - -.requirements { - text-align: justify; -} - -.requirements h3 { - position: relative; - background: transparent url(reqs.gif) no-repeat; - margin-top: 25px; - height: 45px; - left: -10px; -} - -.requirements p:nth-child(2) { - text-indent: 20px; - margin-top: -28px -} - -/* Force carriage return before 'by' */ -.design-selection li a:link, .design-selection li a:visited {display: block;} -.sidebar li a.designer-name:link, .sidebar li a.designer-name:visited {display: inline;} - -.design-selection { - width: 160px; - position: absolute; - top: 395px; - left: 457px; - background: transparent url(top-menu.gif) no-repeat; - height: 400px; -} - -.design-selection ul { - list-style: none; - padding-left: 19px; - margin-left: 0; - margin-top: 10px; -} - -.design-selection ul li { - padding: 0px 0px 0px 16px; - background: url(arrow.gif) no-repeat 6px 2px; - margin-bottom: 5px; -} - -.design-archives { - width: 160px; - position: absolute; - top: 725px; - left: 457px; - background: transparent url(mid-menu.gif) no-repeat; - height: 200px; - text-transform: capitalize; -} - -.zen-resources { - width: 160px; - position: absolute; - top: 847px; - left: 457px; - background: transparent url(bot-menu.gif) no-repeat; - height: 200px; -} - -.design-archives ul, .zen-resources ul { - list-style: none; - padding-left: 34px; - margin-left: 0; - margin-top: 10px; -} diff --git a/src/data/designs/114/metadata.json b/src/data/designs/114/metadata.json deleted file mode 100644 index d2d655bc68c822c4013f9136a88f2cac86420746..0000000000000000000000000000000000000000 --- a/src/data/designs/114/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "114", - "url": "https://www.csszengarden.com/114", - "css_url": "https://www.csszengarden.com/114/114.css", - "description": "This design embodies a blend of modern and classic web aesthetics, featuring a clean layout with ample whitespace and a muted color palette that exudes calm. The top banner utilizes an artistic image overlay with a textual emphasis on 'CSS Zen Garden,' setting an inspirational tone. The typography is elegant and easily readable, complementing the overall serene and educational theme of the design. A sidebar navigation menu efficiently organizes links in a concise manner with a straightforward list format, enhancing usability.", - "categories": [ - "Web Design", - "Educational", - "Minimalist", - "Inspirational" - ], - "visual_characteristics": [ - "Muted Color Palette", - "Whitespaces", - "Overlay Image", - "Elegant Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/114/screenshot_desktop.png b/src/data/designs/114/screenshot_desktop.png deleted file mode 100644 index 161ab0fcde7f06463327a9b5c115cfe0d29f75ed..0000000000000000000000000000000000000000 --- a/src/data/designs/114/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:25e6803bc87f2c98f52fe14dc380e2177ad6b34481a11253958f131b3e4c2594 -size 689533 diff --git a/src/data/designs/114/screenshot_mobile.png b/src/data/designs/114/screenshot_mobile.png deleted file mode 100644 index 53ce56211fb142e5b728dcb754795a196593ebe7..0000000000000000000000000000000000000000 --- a/src/data/designs/114/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e7c66bc0c050f6fa94e92b480f2c7f617957c78fe7538a0d3576f9bd8963f618 -size 712671 diff --git a/src/data/designs/114/style.css b/src/data/designs/114/style.css deleted file mode 100644 index 7f16e0e0067edb05a753d88049d2fd3d86bca5b7..0000000000000000000000000000000000000000 --- a/src/data/designs/114/style.css +++ /dev/null @@ -1,230 +0,0 @@ -/* css Zen Garden submission 114 - 'Salvage Yard', by Justin Peters, http://www.vatoweb.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Justin Peters */ -/* Added: July 29th, 2004 */ - -/* 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. */ - - - - -/* basic elements */ -body { - font: 12px/17px tahoma, arial; - color: #000; - background: #DAE8BD url(bg_lines.gif) no-repeat top; - margin: auto auto; - padding: 0; - text-align: center; - } -p { - font: 12px/17px tahoma, arial, sans-serif; - margin: 0 0 17px 0; - } -a:link { - font-weight: bold; - text-decoration: none; - color: #027D87; - } -a:visited { - font-weight: bold; - text-decoration: none; - color: #858686; - } -a.designer-name:visited { - font-weight: normal; - text-decoration: none; - color: #858686; - } -a:hover, a:active { - text-decoration: underline; - color: #000505; - } -ul { - list-style-type: none; - margin: 0; padding: 0; -} - - -/* specific divs */ -.page-wrapper { - width: 762px; - padding: 0; - margin: auto; - text-align: left; - } -.intro { - vertical-align: bottom; - } -header { - padding: 0; - margin: 0; - height: 246px; - border: 1px solid white; - } -header h1 { - background: url(title_hdr.jpg) no-repeat top left; - width: 760px; - height: 176px; - margin: 70px 0 0 0; - padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h2 { - padding: 0; margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.summary p:first-child { - width: 320px; - height: 92px; - position: absolute; - top: 1px; - margin-left: 470px; - padding: 0; - font-size: 11px; - color: #FFF; - font-family: arial; - background: url(bg_redbox.gif) no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.summary p:last-child{ - display: block; - position: absolute; - top: 53px; - padding: 0 0 0 7px; - font-size: 11px; - text-align: right; - color: #490909; - font-family: arial; - clear: both; -} -.preamble { - padding: 0; margin: -3px 0 0 0; - width: 291px; - float: left; - } -.preamble h3 { - background: url(hdr_enlightenment.gif) no-repeat; - width: 291px; - height: 47px; - margin: 0; padding: 0; - border-top: 1px solid white; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.preamble p { - font: italic normal 12px/19px georgia, 'Times New Roman', times, serif; - padding: 0 0 0 3px; - width: 270px; -} -.preamble p:nth-child(2) { - margin-top: 10px; -} -.supporting { - padding: 0; - margin: -3px 0 40px 0; - background: #D6E6B6; - border: 1px solid white;; - width: 469px; - float: right; - } -.supporting p { - margin: 9px 17px 17px 24px; -} -.explanation h3 { - background: url(hdr_about.gif) no-repeat; - width: 469px; - height: 32px; - margin: 0; padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.participation h3 { - background: url(hdr_participation.jpg) no-repeat; - width: 469px; - height: 32px; - margin: 0; padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.benefits h3 { - background: url(hdr_benefits.jpg) no-repeat; - width: 469px; - height: 32px; - margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.requirements h3 { - background: url(hdr_requirements.jpg) no-repeat; - width: 469px; - height: 32px; - margin: 0; padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -footer { - background: #A2C1B9; - border-top: 1px solid white; - padding: 0 0 2px 24px; - } -a.designer-name { - font-weight: normal; -} -.design-selection, .design-archives, .zen-resources { - width: 256px; - clear: left; - padding: 0; - margin: 0; -} -.design-selection { - background: url(hdr_select.gif) no-repeat; - border-bottom: 1px solid #fff; - margin-top: 20px; -} -.design-archives { - background: url(hdr_archives.gif) no-repeat; - border-bottom: 1px solid #fff; - margin-top: 20px; -} -.zen-resources { - background: url(hdr_resources.gif) no-repeat; - border-bottom: 1px solid #fff; - margin-top: 20px; -} -.design-selection h3, .design-archives h3, .zen-resources h3 { - display: none; -} -.sidebar { - margin-top: 50px; -} -.sidebar .wrapper ul { - padding: 20px 10px 10px 10px; - display:block; -} -.sidebar li { - margin: 2px 0; -} - diff --git a/src/data/designs/115/metadata.json b/src/data/designs/115/metadata.json deleted file mode 100644 index 4a9e255adc2a3318c8e946192d8de2e1db63c26a..0000000000000000000000000000000000000000 --- a/src/data/designs/115/metadata.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "id": "115", - "url": "https://www.csszengarden.com/115", - "css_url": "https://www.csszengarden.com/115/115.css", - "description": "The design utilizes a dramatic red and black color palette, creating a high contrast and visually striking interface that emphasizes boldness and clarity. The layout is structured with a central column for main content and a sidebar for navigation, enhancing usability. Typography is classic and easy to read, using white text for legibility against dark backgrounds. The design features subtle gradient backgrounds and occasional fiery imagery, contributing to a dynamic and modern aesthetic.", - "categories": [ - "Web Design", - "Minimalist", - "Modern", - "Typography" - ], - "visual_characteristics": [ - "High Contrast", - "Central Column Layout", - "Bold Typography", - "Red and Black Palette", - "Gradient Background" - ] -} \ No newline at end of file diff --git a/src/data/designs/115/screenshot_desktop.png b/src/data/designs/115/screenshot_desktop.png deleted file mode 100644 index 7b8b0127e4817aca5ce96552b2263929d1b22711..0000000000000000000000000000000000000000 --- a/src/data/designs/115/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1686c6a4bb5dc565cc02dd92bb2ca8d103c848fef515d376aac72ee7555c2b6c -size 358591 diff --git a/src/data/designs/115/screenshot_mobile.png b/src/data/designs/115/screenshot_mobile.png deleted file mode 100644 index 32df87206c58dabc15e906fe67321503b7ec812f..0000000000000000000000000000000000000000 --- a/src/data/designs/115/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0bbc8fec687997b1447445bccad357a9ca24dfa41a81b4eb79169ae3e8ccef62 -size 300845 diff --git a/src/data/designs/115/style.css b/src/data/designs/115/style.css deleted file mode 100644 index 7801d710bd7038b73db595db0a7088ab62f1dcda..0000000000000000000000000000000000000000 --- a/src/data/designs/115/style.css +++ /dev/null @@ -1,370 +0,0 @@ -/* css Zen Garden submission 115 - 'Burnt Offering', by Jonny Blair, http://www.jonnyblair.co.uk/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Jonny Blair */ -/* Added: July 29th, 2004 */ - -/* 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. */ - - - - - -body { - margin: 0; - padding: 0; - background: #000 url(drops/main_bg2.jpg) no-repeat bottom fixed; - text-align: center; - width: 100%; - height: 100%; - font-family: "verdana", "arial", sans-serif; - color: #333; -} -a:link { - color: #860d01; - text-decoration: none; -} -a:hover { - color: #870b01; - text-decoration: underline; -} -a:visited { - color: #666; - text-decoration: none; -} - -h1, h2, h3, h4, h5 { - padding: 10px; - border: 0px solid orange; -} -ul { - margin: 0; - padding: 0; -} -abbr { - cursor: help; -} -abbr:hover { - border-bottom: 1px solid #870b01; -} - -.page-wrapper { - border: 1px solid #000; - border-right: none; - border-bottom: 0px solid #860d01; - border-top: 0px solid #860d01; - background-color: transparent; - position: relative; - margin: auto; - margin-top: 0px; - margin-bottom: 0px; - padding: 0px; - width: 760px; - text-align:left; - voice-family: "\"}\""; - voice-family: inherit; - width: 754px; -} -.intro { - padding: 0; -} -header { - background: url(drops/main_title.jpg) no-repeat top left; - height: 145px; - border-bottom: 3px solid #860d01; -} -.supporting { - position: relative; - left: 0; - width: 523px; - color: #777; -} -.sidebar { - position: absolute; - top: 148px; - right: 0px; - margin: 0 0 0 515px; - background-color: #000; - border-left: 1px solid #000; - border-bottom: 0px solid #000; - border-right: 1px solid #000; - border-top: 0px; -} - -header h1 { - border: 1px solid red; - font-size: x-small; - margin: 0px; - padding: 0px; - display: none; -} -header h2 { - border: 1px solid red; - font-size: x-small; - margin: 0px; - padding: 0px; - display: none; -} -.summary p:first-child { - border: 1px solid red; -} - -.preamble { - position:relative; - left: 0; - padding: 0px; - width: 522px; - font-size: x-small; - display: block; - border-bottom: 1px solid #000; - border-right: 0px solid #000; - background-color: #860d01; - color: #fff; - min-height: 254px; -} -.preamble h3 { - background: url(headers/preamble_title.jpg) no-repeat top left; - margin: 0px; - text-indent: -2000px; - height: 38px; - border-bottom: 1px solid #000; - padding: 0px; -} -.preamble p { - margin: 10px; - text-align: justify; - margin-right: 20px; - padding: 0; - line-height: 1.6em; -} -.summary { - display: none; -} -.summary p { - margin: 10px; - text-align: justify; - padding: 0; - line-height: 1.6em; -} -.summary p:first-child{ - display: none; -} -.summary a:link, .summary a:active, .summary a:visited { - text-decoration: none; - border-bottom: 2px solid #506067; -} -.summary a:hover { - text-decoration: none; - border-bottom: 2px solid #708089; -} - -.supporting p { - margin: 10px; - margin-left: 100px; - margin-right: 20px; - padding: 0; - line-height: 1.6em; - font-size: x-small; - text-align: justify; -} -.supporting h3 { - margin: 0px; - text-indent: -2000px; - height: 22px; -} -.explanation, .participation, .benefits { - padding: 0px; - padding-bottom: 20px; - margin: 0px; - border-right: 1px solid #000; - border-bottom: 1px solid #ccc; - width: 522px; - background-color: #fff; -} -.requirements { - border-bottom: 0px; - padding-bottom: 10px; - border-right: 1px solid #000; - width: 522px; - background-color: #fff; -} - -.explanation h3 { - background: url(headers/explain_title.jpg) no-repeat top left; -} -.participation h3 { - background: url(headers/participation_title.jpg) no-repeat top left; -} -.benefits h3 { - background: url(headers/benefits_title.jpg) no-repeat top left; -} -.requirements h3 { - background: url(headers/req_title.jpg) no-repeat top left; -} -.supporting a:link, .supporting a:active, .supporting a:visited { - font-weight: bold; -} -.supporting a:hover { -} -.explanation:hover, .participation:hover, .benefits:hover, .requirements:hover { - color: #000; - background-image: url(drops/jb.gif); - background-repeat: no-repeat; - background-position: bottom right; -} -.preamble:hover { - background: #4a0201 url(drops/red_drop.jpg) no-repeat 0 38px; - color: #fff; -} - -footer { - margin: 0px; - width: 522px; - height: 6em; - line-height: 6em; - font-size: x-small; - text-align: center; - background-color: #000; - margin-top: 0px; - border-top: 5px solid #ccc; - border-right: 1px solid #000; - border-bottom: 5px solid #860d01; -} - -footer a:link, footer a:active, footer a:visited { - color: #fff; -} -footer a:hover { -} - -.sidebar ul { - list-style: none; - width: 230px; - margin: 0px; - padding: 0px; - right: 0px; - border-bottom: 0px solid #000; -} -.design-selection { - margin: 0px; - font-size: 7pt; - width: 230px; -} -.design-selection li { - padding: 12px 15px 12px 15px; - border-bottom: 1px solid #000; - height: 52px; - line-height: 1.4em; - background-color: #860d01; - color: #c63; -} -.design-selection li:hover { - background-color: #4a0201; - background-image: url(drops/li_hi.gif); - background-repeat: no-repeat; - background-position: top right; - color: #fff; -} -.design-selection a:link, .design-selection a:active, .design-selection a:visited { - font-weight: bold; - color: #c63; -} -.design-selection a:hover { - background-color: #4a0201; - color: #fff; -} -.design-selection a.designer-name { - font-weight:normal; - text-decoration:none; -} -.design-selection h3 { - background: url(headers/select_title.jpg) no-repeat top left; - margin: 0px; - text-indent: -2000px; - height: 38px; - border-bottom: 1px solid #000; - padding: 0px; -} -.design-archives { - border-right: 0px solid #000; - border-bottom: 0px solid #000; - background-color: transparent; - width: 230px; -} -.design-archives h3 { - background:url(headers/larchives_title.jpg) no-repeat top left; - margin: 0px; - text-indent: -2000px; - height: 38px; - border-bottom: 1px solid #000; - padding: 0px; -} -.design-archives ul { - background-color: #fff; -} -.design-archives li { - padding: 12px 0 7px 15px; - height: 25px; - line-height: 1.2em; - background-color: #fff; - color: #c63; - border-bottom: 1px solid #000; - font-size: 7pt; -} -.design-archives a:link, .design-archives a:active, .design-archives a:visited { - color: #c63; - font-weight: bold; -} -.design-archives li:hover { - background-color: #4a0201; - background-image: url(drops/li_hi.gif); - background-repeat: no-repeat; - background-position: top right; - color: #fff; -} -.design-archives a:hover { - background-color: #4a0201; - color: #fff; -} -.zen-resources { - border-right: 0px solid #000; - border-bottom: 0px solid #000; - background-color: #fff; - width: 230px; - background-position: bottom right; - background-repeat: no-repeat; -} -.zen-resources h3 { - background:url(headers/lresources_title.jpg) no-repeat top left; - margin: 0px; - text-indent: -2000px; - height: 38px; - border-bottom: 1px solid #000; - padding: 0px; -} -.zen-resources li { - padding: 12px 0 7px 15px; - height: 25px; - line-height: 1.2em; - background-color: #fff; - color: #c63; - font-size: 7pt; - border-bottom: 1px solid #000; -} -.zen-resources li:hover { - background-color: #4a0201; - background-image: url(drops/li_hi.gif); - background-repeat: no-repeat; - background-position: top right; - color: #fff; -} -.zen-resources a:link, .zen-resources a:active, .zen-resources a:visited { - color: #c63; - font-weight: bold; -} -.zen-resources a:hover { - background-color: #4a0201; - color: #fff; -} diff --git a/src/data/designs/116/metadata.json b/src/data/designs/116/metadata.json deleted file mode 100644 index 5b75bfa7650a72fe3225592dc13a69b91cd79a9d..0000000000000000000000000000000000000000 --- a/src/data/designs/116/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "116", - "url": "https://www.csszengarden.com/116", - "css_url": "https://www.csszengarden.com/116/116.css", - "description": "The CSS Zen Garden design features a visually striking layout with a bold, distressed red and grey color palette that enhances the text-heavy composition. The design effectively uses a grunge aesthetic with textured backgrounds, creating an old-school, tactile feel. The typography is bold and prominent, with clear headings and subheadings that guide the reader through the content. The side navigation menu and text blocks are well-organized, ensuring functionality alongside artistic expression.", - "categories": [ - "Web Aesthetics", - "Typography", - "Layout Design", - "Visual Hierarchy", - "User Experience" - ], - "visual_characteristics": [ - "Grunge Aesthetic", - "Distressed Textures", - "Bold Typography", - "Red and Grey Palette", - "Text-Heavy Design" - ] -} \ No newline at end of file diff --git a/src/data/designs/116/screenshot_desktop.png b/src/data/designs/116/screenshot_desktop.png deleted file mode 100644 index d471fa3e650e4ad16352a56ada846439704b0913..0000000000000000000000000000000000000000 --- a/src/data/designs/116/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7f7519b29b02f1d00220cf66628e464b984dfbe9180e9322e51ef42e02f2428c -size 648364 diff --git a/src/data/designs/116/screenshot_mobile.png b/src/data/designs/116/screenshot_mobile.png deleted file mode 100644 index c0b1d2d5ffcf8eb60b5aa7e2ff4cbf34e79369b3..0000000000000000000000000000000000000000 --- a/src/data/designs/116/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bca2fdff4100c751b0d94d8fc83fe3f5b8303b2c7978a210b86aedc8c4678bd9 -size 540717 diff --git a/src/data/designs/116/style.css b/src/data/designs/116/style.css deleted file mode 100644 index 1d9de7a24dcff1e128d55e789f8932d0d85e44b8..0000000000000000000000000000000000000000 --- a/src/data/designs/116/style.css +++ /dev/null @@ -1,226 +0,0 @@ -/* css Zen Garden submission 116 - 'Ragged', by Jose Florido, http://www.avidos.net/blogold/ http://www.ovillo.org/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Jose Florido */ -/* Added: Sept. 2nd, 2004 */ - -/* 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. */ - - - - -/* Hoja de estilos para "Ragged" */ -/* Autor: Jose Florido - jose@avidos.net */ - - - -/* Elementos xhtml */ -body{ - padding: 0; - margin: 0; - font-family: "MS Trebuchet", Verdana, Geneva, Arial, Helvetica, sans-serif; - font-size: 75%; - line-height: 135%; - background-image: url("fondo.gif"); - color: #424242; - text-align: center; -} - -a{ - color: #af0000; - font-weight: bold; - text-decoration: none; -} -a:visited{ - color: #FF9F9F; - text-decoration: none; -} -a:hover{ - text-decoration: underline; -} - -h3{ - color: #af0000; - background-color: #fff; - font-size: 120%; - margin-top: 30px; - margin-bottom: 0; - position: relative; - padding: 0 0 0 25px; - background-image: url("bullet.gif"); - background-repeat: no-repeat; - background-position: 0 1px; -} - -p{ - margin: 10px 0 5px 0; -} - -/* ---- divs ---- */ -/* En orden de aparición en el codigo HTML */ - -.page-wrapper{ - position: relative; - background-image: url("abajo.gif"); - background-repeat: repeat-x; - background-position: bottom; - width: 740px; - border: 1px solid #5F5F5F; - border-bottom: 0; - border-top: 0; - margin: 0 auto; - text-align: left; -} - -header { - padding: 5px 0 0 15px; -} - -header h1{ - width: 526px; - height: 91px; - background-image: url("header1.gif"); - margin-bottom: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -header h2{ - width: 279px; - height: 33px; - background-image: url("header2.gif"); - margin-top: -22px; - margin-bottom: 25px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary{ - background-color: #AF0000; - color: #fff; - margin-bottom: 60px; - line-height: 125%; - font-size: 110%; -} - -.summary p:first-child{ - position: relative; - padding: 29px 20px 0 20px; - background-color: #AF0000; - background-image: url("qsp1.gif"); - background-position: top left; - background-repeat: no-repeat; -} - -.summary p:last-child{ - position: relative; - padding: 0 20px 25px 20px; - background: #AF0000 url("qsp2.gif") no-repeat bottom left ; -} - -.summary a{ - color: #fff; - font-weight: bold; - text-decoration: underline; -} - -.summary a:visited{ - color: #CCCCCC; - text-decoration: none; -} - -.summary a:hover{ - text-decoration: none; -} - -.preamble{ - margin-left: 220px; - padding-right: 10px; - font-size: 90%; -} - -.supporting{ - margin-left: 220px; - padding-right: 10px; - font-size: 90%; -} - -.requirements{ - position: relative; - margin-left: -180px; - width: 650px; -} - -.requirements p:nth-child(6){ - font-size: 80%; - margin: 10px; -} - -footer{ - position: relative; - left: -180px; - padding: 65px 10px 30px 20px; - background-image: url("footer.gif"); - background-repeat: no-repeat; - background-position: 0 55px; -} - -/* Columna izquierda */ - -.sidebar { - position: absolute; - left: 12px; - top: 320px; - width: 178px; - padding: 0 2px 0 0; - font-size: 80%; - line-height: 140%; - background: #EFEFEF url("linea.gif") top right repeat-y; -} - -.sidebar h3{ - background: #af0000; - margin: 0; - padding: 5px 0 5px 10px; - text-transform: lowercase; - color: #fff; - font-size: 100%; - background-image: url("header3.gif"); - background-repeat: repeat-x; - background-position: bottom; -} - -.sidebar ul { - margin: 0; - padding: 0; - list-style: none; - padding: 20px 10px 20px 10px; - background-image: url("izqdaul.gif"); - background-repeat: repeat-x; -} - -.sidebar li{ - padding-left: 18px; - background: transparent url("flechita2.gif") 0 2px no-repeat; - margin-bottom: 7px; - color: #818181; -} - -.sidebar li a{ - color: #af0000; -} - -.sidebar li a.designer-name{ - color: #818181; -} - -.zen-resources{ - background: transparent url("izqda.gif") bottom no-repeat; - padding-bottom: 20px; -} diff --git a/src/data/designs/117/metadata.json b/src/data/designs/117/metadata.json deleted file mode 100644 index 01e6cb592c25fe3703b4af9dfed8a4d5fb1ee911..0000000000000000000000000000000000000000 --- a/src/data/designs/117/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "117", - "url": "https://www.csszengarden.com/117", - "css_url": "https://www.csszengarden.com/117/117.css", - "description": "The design exhibits a minimalist and earthy aesthetic with a calming green color palette. The layout is text-heavy, indicating an emphasis on content, with a clear structure that guides the reader's eye. The incorporation of simple typography maintains clarity, while the subtle background image adds texture without overwhelming the design. This style is ideal for educational or informational presentations, focusing on clarity and ease of reading.", - "categories": [ - "Minimalist", - "Informative", - "Educational", - "Content-Driven", - "Calm" - ], - "visual_characteristics": [ - "Minimalist Layout", - "Earthy Green Palette", - "Text-Heavy Design", - "Subtle Background Texture", - "Simple Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/117/screenshot_desktop.png b/src/data/designs/117/screenshot_desktop.png deleted file mode 100644 index 9ce725d81fd4966a8580f728b71b43b8386e94d2..0000000000000000000000000000000000000000 --- a/src/data/designs/117/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9f971044dd2e59bdf9e005afe2cf3c59ef08dc7cdd4532ce87ad9789a4c121ff -size 301629 diff --git a/src/data/designs/117/screenshot_mobile.png b/src/data/designs/117/screenshot_mobile.png deleted file mode 100644 index 9131324b3cef78ed4059298044fbc8ebd1ad6f95..0000000000000000000000000000000000000000 --- a/src/data/designs/117/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:93fe7e3f995b288c8c00a6e62e65722e7fddfdf92025ad99ce9cbb484a1b3810 -size 359887 diff --git a/src/data/designs/117/style.css b/src/data/designs/117/style.css deleted file mode 100644 index 4d7bf8ca471d624b9e2c53beef5c6ea054d737ef..0000000000000000000000000000000000000000 --- a/src/data/designs/117/style.css +++ /dev/null @@ -1,356 +0,0 @@ -/* css Zen Garden submission 117 - 'Brushwood', by Katrin Zieger, http://www.teamwerk.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Katrin Zieger */ -/* Added: Sept. 2nd, 2004 */ - -/* 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. */ - - - -/* basic elements */ - -body { - font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; - color: #f8f698; - background: #7e8b4e; - margin: 0px; - padding: 0; - } - -p { - font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; - text-align: left; - } - -a:link { - font-weight: bold; - text-decoration: underline; - color: #F8f698; - } - -a:visited { - font-weight: bold; - text-decoration: underline; - color: #e9c482; - } - -a:hover, a:active { - text-decoration: none; - color: #F8f698; - } - - -/* specific divs */ - -.page-wrapper { - width: 98%; - padding: 0px 0px 20px 0px; - margin: 0px; - } - -header { - position: absolute; - top: 0; - left: 0; - margin: 0 0 20px 0; - z-index: 1; - } - -/* 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: url(h1.gif) no-repeat left top; - display: block; - margin: 0; - width: 300px; - height: 276px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -header h2 { - background: url(h2.gif) no-repeat left top; - margin: 0; - width: 300px; - height: 72px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -.summary { - position: absolute; - top: 365px; - left: 30px; - z-index: 2; - background: transparent; - margin-right: 12px; - width: 300px; - padding: 0; - } - -.summary p { - font-weight: bold; - font-size: 12px; - line-height: 180%; - text-align:right; - width: 250px; - } - -.summary a:link { - color: #f8f698; - text-decoration: underline; - } - -.summary a:hover { - text-decoration: none; - } - -.preamble { - background: url(bg-preamble.gif) no-repeat left top; - margin: 0 0 0 295px; - padding: 105px 35px 25px 37px; - position: relative; - z-index: 5; - width: 303px } - - -.preamble h3 { - background: url(roadtoenlightenment.gif) no-repeat left top; - margin: 0 0 15px; - width: 202px; - height: 19px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -.preamble p { - color: #50591b; - width: 303px; - margin-bottom:0; - line-height: 165%; - } - -.supporting { - position: relative; - margin: 0 0 0 295px; - width: 374px; - z-index: 6; - } - -.supporting p { - color: #50591b; - width: 303px; - line-height: 165%; - } - -.supporting a, a:link { - color: #50591b; - font-style: italic; - font-weight: bold; - text-decoration: underline; - } - -.supporting a:hover { - color: #55310e; - text-decoration: underline; - } - -.explanation { - background: url(explaination-bg.gif) repeat-y left top; - display: block; - padding: 0 35px 25px 37px; - position: relative; - width: 303px } - - -.explanation h3 { - background: url(sowhat.gif) repeat-y left top; - margin: 0 0 15px; - width: 173px; - height: 19px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation { - background: url(partic-bg.gif) repeat-y left top; - display: block; - padding: 0 35px 25px 37px; - position: relative; - width: 303px } - - -.participation h3 { - background: url(participation.gif) no-repeat left top; - margin: 0 0 15px; - width: 99px; - height: 18px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.benefits { - background: url(partic-bg.gif) repeat-y left top; - display: block; - padding: 0 35px 25px 37px; - position: relative; - width: 303px } - - -.benefits h3 { - background: url(benefits.gif) no-repeat left top; - margin: 0 0 15px; - width: 99px; - height: 18px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -.requirements { - background: url(requi-bg.gif) no-repeat left bottom; - display: block; - padding: 0 35px 30px 37px; - position: relative; - width: 303px } - - -.requirements h3 { - background: url(requirements.gif) no-repeat left top; - margin: 0 0 15px; - width: 99px; - height: 18px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -footer { - background: transparent; - width: 303px; - margin: 25px 0 25px 0px; - padding: 0 0 0 35px; - text-align: center; - } - -footer a:link { - margin: 0 10px 0 10px; - color: #F8f698; - font-weight: bold; - font-style: normal; - text-decoration: underline; - } - -footer a:hover { - text-decoration: none; - color: #F8f698; - } - - -/* start navbar */ - -.sidebar { - margin: 0; - position: absolute; - top: 297px; - left: 664px; - z-index: 3; - } - -.sidebar .wrapper { - background: url(select-list.gif) repeat-y left top; - padding: 0; - width: 141px } - - -.sidebar h3.select { - background: url(select.gif) no-repeat left top; - margin: 0; - width: 141px; - height: 65px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar h3.archives { - background: url(archives.gif) no-repeat left top; - margin: 0; - width: 141px; - height: 68px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.zen-resources { - background: url(nav-bottom.gif) no-repeat left bottom; - padding-bottom: 15px; - z-index: 4 } - - -.sidebar h3.resources { - background: url(resources.gif) no-repeat left top; - margin: 0; - width: 141px; - height: 68px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -.sidebar ul { - margin: 0px; - padding: 12px 20px 20px 20px; - } - -.sidebar li { - line-height: 2.5ex; - list-style-type: none; - display: block; - padding-top: 5px; - } - -.sidebar li a:link { - color: #F8f698; - font-weight: bold; - font-style: normal; - text-decoration: underline; - } - -.sidebar li a:hover { - text-decoration: none - } - -/* end navbar */ - - -/* extra divs */ - -.extra1, .extra2, .extra3, .extra4, .extra5, .extra6 { - display:none - } \ No newline at end of file diff --git a/src/data/designs/118/metadata.json b/src/data/designs/118/metadata.json deleted file mode 100644 index 852cee88a169648f3b4e160ef504fa6969233640..0000000000000000000000000000000000000000 --- a/src/data/designs/118/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "118", - "url": "https://www.csszengarden.com/118", - "css_url": "https://www.csszengarden.com/118/118.css", - "description": "The design presents a clean and soothing visual appeal with a green and white color palette, complemented by smooth textural elements. The layout emphasizes structure and simplicity, allowing content to be presented in a well-organized manner. Typography is classic and easy to read, enhancing the elegance and clarity of the design. The incorporation of nature elements adds a calming, Zen-like atmosphere.", - "categories": [ - "Web Layout", - "Nature-Inspired", - "Minimalist Design", - "Typography", - "Content Organization" - ], - "visual_characteristics": [ - "Green and White Palette", - "Textural Background", - "Classic Typography", - "Organized Layout", - "Nature Element" - ] -} \ No newline at end of file diff --git a/src/data/designs/118/screenshot_desktop.png b/src/data/designs/118/screenshot_desktop.png deleted file mode 100644 index 740ad05f02802c7e84b5922dfb3e81e1478a3551..0000000000000000000000000000000000000000 --- a/src/data/designs/118/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:367504fb890c660b3642ef66cc588425ccdeea517b789a220acdbd76f66a5eae -size 505974 diff --git a/src/data/designs/118/screenshot_mobile.png b/src/data/designs/118/screenshot_mobile.png deleted file mode 100644 index 38f6a39c24d7e6d97ba1683912a73def2ade56a9..0000000000000000000000000000000000000000 --- a/src/data/designs/118/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7f59285cb160af64f2a7f80a40b0a2e746dd41d83ba5e9aa6ff92e1cc19cb165 -size 404893 diff --git a/src/data/designs/118/style.css b/src/data/designs/118/style.css deleted file mode 100644 index add7842c8002e7f61e6f235a8159cb3cb10c167b..0000000000000000000000000000000000000000 --- a/src/data/designs/118/style.css +++ /dev/null @@ -1,343 +0,0 @@ -/* css Zen Garden submission 118 - 'Some Leafs', by Michael Tupy, http://www.t-2.at/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Michael Tupy */ -/* Added: Sept. 2nd, 2004 */ - -/* 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. */ - - - -/* css zen garden - "some leafs" - michael tupy - t2 graphic design - http://www.t-2.at/ */ - -/* this is a basic theme - works with nearly all browsers */ -/* all the text is visible and easy to change */ -/* the css code is overcoded and long - so its easier for css starters */ - -/* tested with: */ -/* on mac osx: safari 1.2.2, camino 0.8b, mozilla 1.7, firefox 0.9, omniweb 4.5, ie 5.2.3, */ -/* on mac os9: ns 7.0.2, ie 5.1.6, */ -/* on win98: ie 6.0.2800, ns 7.0.1, moz 1.6, firefox 0.9, opera 7.03, */ - - -/* ie5 win - grrr - start */ -body { - font: small serif; - margin: 0px; - padding: 0px; - line-height: 14px; - color: #000; - font-size: x-small; - voice-family: "\"}\""; - voice-family: inherit; - font-size: small; - text-align: center; } -/* ie5 win - grrr - end */ - -/* opera - grrr - start */ -html>body { - font-size: small; - } -/* opera - grrr - end */ - - -/* start of the real css */ - -/* basic elements */ -body { - color: #444; - background-color: #edf6e3; - background-image: url(700_28.jpg); - background-position: top center; - background-repeat: repeat-y; - font-size: 11px; - line-height: 14px; - font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; - text-align: left; - margin: 0px; - padding: 0px; - } -p { - font-size: 11px; - line-height: 14px; - font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; - text-align: left; - margin: 0px; - padding: 0px; - } -h1, h2, h3 { - font-size: 11px; - line-height: 14px; - font-weight: bold; - font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; - text-align: left; - margin: 0px; - padding: 0px; - } - -a:link { - font-weight: bold; - text-decoration: none; - color: #6faf30; - } -a:visited, -a:visited:hover { - font-weight: bold; - text-decoration: none; - color: #7fc937; - } -a:hover, -a:active { - text-decoration: underline; - color: #4f711f; - } -abbr { - font-weight: normal; - font-style: normal; - border: 0; - } - -/* major divs */ -.page-wrapper { - width: 700px; - position: relative; - margin: 0px auto 0px auto; - padding: 0px 0px 0px 0px; - } - -.intro { - width: 450px; - margin: 0px 0px 0px 0px; - padding: 0px 0px 0px 0px; - } - -.supporting { - width: 450px; - margin: 0px 0px 0px 0px; - padding: 0px 10px 0px 10px; - } - -.sidebar { - position: absolute; - top: 255px; - left: 0px; - width: 220px; - margin: 0px 0px 0px 482px; - padding: 0px 0px 0px 0px; - } - -/* minor divs */ -header { - width: 700px; - height: 20px; /* strange but ie6 needs this */ - background-image: url(blatt02aa.jpg); - background-position: top center; - background-repeat: no-repeat; - border-top: 0px; - border-right: 1px solid #aaa; - border-bottom: 1px solid #aaa; - border-left: 1px solid #aaa; - margin: 0px 0px 0px 0px; - padding: 224px 0px 0px 0px; - } - -header h1 { - width: 600px; - color: #fff; - font-size: 24px; - line-height: 24px; - font-weight: bold; - text-transform: uppercase; - margin: -30px 0px 0px 10px; - padding: 0px 0px 0px 0px; - } - -header h2 { - width: 600px; - color: #fff; - font-size: 11px; - line-height: 16px; - font-weight: normal; - padding: 0px 0px 0px 3px; - text-transform: uppercase; - margin: 0px 0px 0px 10px; - padding: 0px 0px 10px 4px; - } - -.summary { - width: 450px; - background-image: url(stone_24.gif); - background-position: top center; - background-repeat: repeat; - background-color: #284C00; - border: 1px solid #aaa; - margin: 10px 0px 10px 0px; - padding: 10px 10px 10px 10px; - } - -.preamble { - width: 450px; - border: 1px solid #aaa; - background-image: url(leaf_09d.gif); - background-position: bottom center; - background-repeat: no-repeat; - background-color: #fff; - margin: 0px 0px 0px 0px; - padding: 10px 10px 20px 10px; - } - -.explanation, -.participation, -.benefits, -.requirements { - width: 450px; - border: 1px solid #aaa; - background-image: url(leaf_09d.gif); - background-position: bottom center; - background-repeat: no-repeat; - background-color: #fff; - margin: 10px -10px 0px -10px; - padding: 10px 10px 20px 10px; - } - -footer { - width: 450px; - border: 1px solid #aaa; - background-image: url(stone_19.gif); - background-position: center center; - background-repeat: repeat; - background-color: #284C00; - margin: 10px -10px 20px -10px; - padding: 10px 10px 10px 10px; - text-align: center; - } - -.explanation p, -.participation p, -.benefits p, -.requirements p, -.preamble p { - padding-bottom: 8px; - text-align: justify; - } - -.preamble h3, -.supporting h3 { - color: #284C00; - background-color: #ddd; - background-image: url(stone_21.gif); - background-position: bottom center; - background-repeat: repeat; - font-size: 11px; - line-height: 16px; - text-transform: uppercase; - margin: -10px -10px 4px -10px; - padding: 4px 4px 4px 10px; - } - -.summary p:first-child { - color: #fff ! important; - font-size: 10px ! important; - line-height: 14px; - font-weight: bold; - text-transform: uppercase; - text-align: left; - margin: 0px 50px 0px 0px; - padding: 0px 0px 10px 0px; - } - -.summary p:last-child { - color: #fff ! important; - font-size: 10px ! important; - line-height: 14px; - font-weight: normal; - text-transform: uppercase; - text-align: left; - margin: 0px 0px 0px 0px; - padding: 0px 0px 0px 0px; - } - -.sidebar ul { - border-top: 1px dotted #ccc; - margin: 5px 5px 0px 5px; - padding: 0px 0px 0px 0px; - } - -.sidebar li { - display: block; - list-style-type: none; - color: #6c9e2d; - background-color: #f8f8f8; - font-size: 11px; - line-height: 14px; - font-weight: normal; - font-style: italic; - font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; - text-align: left; - border-bottom: 1px dotted #ccc; - margin: 0px 0px 0px 0px; - padding: 3px 5px 3px 5px; - } - -.sidebar li a:link, -.sidebar li a:visited, -.sidebar li a:visited:hover, -.sidebar li a:hover, -.sidebar li a:active { - font-style: normal; - padding-right: 5px; - } - -a.designer-name { - color: #6c9e2d ! important; - font-weight: normal ! important; - font-style: italic ! important; - margin: 0px 0px 0px 0px; - padding: 0px 14px 0px 0px; - } - -.sidebar h3 { - color: #7fc937; - background-color: #ddd; - background-image: url(stone_24.gif); - background-position: center right; - background-repeat: repeat-x; - font-size: 11px; - line-height: 16px; - font-weight: bold; - font-family: Cochin, Georgia, "New Century Schoolbook", "Bitstream Vera Serif", "Times New Roman", times, serif; - text-transform: uppercase; - text-align: left; - border-bottom: 1px solid #aaa; - margin: 0px 0px 0px 0px; - padding: 3px 5px 3px 5px; - } - -.design-selection, -#lfavorites, -.design-archives, -.zen-resources { - background-image: url(leaf_09a.gif); - background-position: bottom center; - background-repeat: no-repeat; - background-color: #fff; - border: 1px solid #aaa; - margin: 0px 0px 10px 0px; - padding: 0px 0px 30px 0px; - } - -/* hovers */ - -.preamble:hover { - background-image: url(leaf_09f.gif); - } - -.sidebar li:hover { - background-color: #fefefe; - } - -.zen-resources:hover { - background-image: url(leaf_09b.gif); - } diff --git a/src/data/designs/119/metadata.json b/src/data/designs/119/metadata.json deleted file mode 100644 index 62495788b6b76191a2d030574bc10e09db25b986..0000000000000000000000000000000000000000 --- a/src/data/designs/119/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "119", - "url": "https://www.csszengarden.com/119", - "css_url": "https://www.csszengarden.com/119/119.css", - "description": "The design is vibrant, combining a fresh green palette with white text for clear readability, complemented by nature-inspired graphics, such as grass visuals at the top. The layout is structured into neat sections with clear headings, facilitating easy navigation and content consumption. The typography is bold and modern, maintaining a consistent style throughout with white text against a vivid, green background to enhance contrast. Visually, it evokes a sense of calm, reflective of the Zen Garden theme, while also engaging with its dynamic side panel listing various design options.", - "categories": [ - "Nature-inspired", - "Typography-focused", - "Clean layout", - "Educational", - "Interactive" - ], - "visual_characteristics": [ - "Green color palette", - "Bold typography", - "Nature graphics", - "High contrast", - "Vertical list menu" - ] -} \ No newline at end of file diff --git a/src/data/designs/119/screenshot_desktop.png b/src/data/designs/119/screenshot_desktop.png deleted file mode 100644 index e142c53d3308e9e466fbb77814904540ae94952f..0000000000000000000000000000000000000000 --- a/src/data/designs/119/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a5aca57c999fd2d7e47ae359b6bd0147100697b73bca28437d60e8adcf8e893e -size 664287 diff --git a/src/data/designs/119/screenshot_mobile.png b/src/data/designs/119/screenshot_mobile.png deleted file mode 100644 index da83ad312079ffbef46b36a6d466035ebfe1d7ae..0000000000000000000000000000000000000000 --- a/src/data/designs/119/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:56f5533c806fcb7fd08ac4866c221435d52600671f1476aeed85c683a32460a5 -size 504332 diff --git a/src/data/designs/119/style.css b/src/data/designs/119/style.css deleted file mode 100644 index 3d5b9ad751709e2a803d24d4e8a4ca368d69d176..0000000000000000000000000000000000000000 --- a/src/data/designs/119/style.css +++ /dev/null @@ -1,405 +0,0 @@ -/* css Zen Garden submission 119 - 'Pleasant Day', by Kyle Jones, http://www.justkyle.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Kyle Jones */ -/* Added: Sept. 2nd, 2004 */ - -/* 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. */ - - - -html { - background: #89b6f9; -} - -body { - - font: 8pt georgia; - - color: #172104; - - background: #89b6f9 none repeat-y; - - margin: 0px; - position: relative; - width: 650px; - top: 0px; - left: auto; - right: auto; - margin-left: auto; - margin-right: auto; -} - -.page-wrapper p { - - font: 8pt/14pt georgia; - - margin-top: 0px; - - text-align: justify; - padding-right: 5px; - text-indent: 10px; - background: none no-repeat bottom; -} - -.page-wrapper h3 { - - font: 600 18pt "trebuchet ms"; - - color: #ffffff; - background: no-repeat url(flower3.jpg) transparent 400px -8px; - text-decoration: none; - text-align: left; - margin: 0px; - padding-bottom: 0px; - padding-top: 0px; - letter-spacing: .5px; - height: 40px; - text-indent: 5px; -} - -a:link { - - font-weight: bold; - - text-decoration: none; - - color: #dfce3b; - - } - -a:visited { - - font-weight: bold; - - text-decoration: none; - - color: #2262a4; - - } - -a:hover, a:active { - - text-decoration: none; - - color: #ffffff; - background: #668fd1; -} - - - - - -/* specific divs */ - -.page-wrapper { - - background: url(repeater.jpg) repeat-y top left; - padding: 0px 0px 0px 0px; - position: absolute; - right: auto; - left: auto; - width: 680px; -} - - - -.intro { - - min-width: 470px; - position: relative; -} - -header { - - margin-bottom: 20px; - background: url(head2.jpg) no-repeat 21px; - height: 300px; -} - - - -/* 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 none no-repeat top left; - - margin-top: 10px; - - 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; - } - - - -.summary { - - margin: 0px 20px 20px 10px; - width: 650px; - font-size: 10px; - position: absolute; - top: 0px; - text-align: left; - color: #fffdfa; -} - -.summary p:first-child { - - text-align: left; - top: 0px; - font: italic 10px/11px georgia; - width: 360px; - padding-left: 10px; - padding-top: 4px; - background: transparent; - margin-left: 10px; - margin-right: 0px; - border-bottom-style: none; - border-style: none; -} - -.requirements, .benefits, .participation, .supporting, .preamble { - background: none no-repeat; - margin-bottom: 20px; -} - -.summary p:last-child { - width: 230px; - font-size: 10px; - position: absolute; - top: 4px; - - display: block; - border-style: none; - margin-top: 0px; - margin-right: 20px; - margin-bottom: 20px; - line-height: 11px; - border-width: 1px; - text-align: center; - right: -2px; -} - - - -.preamble { - - clear: right; - padding: 0px 190px 0px 30px; -} - -.supporting { - - padding-left: 30px; - - margin-bottom: 40px; - padding-right: 190px; -} - - - -footer { - - text-align: center; - background: no-repeat none -50px 0px transparent; - height: 10px; - bottom: 0px; - padding-bottom: 0px; - width: 500px; - font-size: 1.5em; - padding-left: 0px; - margin: 50px 60px 0px 0px; -} - - - -.sidebar { - - position: absolute; - - left: 498px; - padding-bottom: 10px; - width: 0px; - margin-top: 95px; - top: 0px; -} - -.sidebar .wrapper { - - background: transparent; - - padding: 10px; - - margin-top: 150px; - - width: 130px; - font-family: verdana, sans-serif; -} - -.sidebar h3.select { - -width:230px; - - background: transparent no-repeat url(designs.jpg) 8px 50px; - text-align: center; - border-bottom-style: none; - margin-top: 10px; - margin-right: 0px; - margin-left: 0px; - height: 100px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar h3.archives { - - background: transparent url(archives.jpg) no-repeat 5px -4px; - - height: 50px; - width:230px; margin: 10px 0px -8px 0px; - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar h3.resources { - - background: transparent url(resources.jpg) no-repeat -6px -5px; - - margin: 0px 0px 5px 0px; width:220px; - - height: 30px; - - - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } - - - - - - -.sidebar ul { - - margin: 0px; - - padding: 0px; -} - -.sidebar li, .sidebar .wrapper li { - - background: #628f13 url(h1.jpg) repeat-x top center; - - display: block; - border-bottom: 2px #4f740e dotted; - padding: 10px 0px 8px 5px; - width: 128px; - line-height: 1.8ex; - border-top: 2px dotted #4f740e; - margin-top: 0px; - margin-bottom: 8px; - color: #172104; - text-align: left; -} - -.sidebar li:hover, .sidebar .wrapper li:hover { - - background: #668fd1 url(h1.jpg) repeat-x top center; - - display: block; - border-bottom: 2px #5475ab dotted; - padding: 10px 0px 8px 5px; - width: 128px; - line-height: 1.8ex; - border-top: 2px dotted #5475ab; - margin-top: 0px; - margin-bottom: 8px; - color: #345082; -} - - -.sidebar li a:link { - - color: #dfce3b; - text-decoration: none; -} - - -.sidebar li a:link:hover { - - color: #fff4ee; - text-decoration: none; -} - -.sidebar li a:visited { - - color: #2262a4; - text-decoration: none; -} - -.sidebar li a.designer-name { - display: block; - color: #000000; - text-align: right; - padding-right: 5px; - padding-top: 5px; - padding-bottom: 0px; - margin-bottom: 0px; -} - - - - - - - -.extra1 { - - background: transparent; - - position: absolute; - - top: 40px; - - right: 0px; - - width: 148px; - - height: 110px; - - } \ No newline at end of file diff --git a/src/data/designs/120/metadata.json b/src/data/designs/120/metadata.json deleted file mode 100644 index 7ec027f75deef8c2f40f2a3e11a786413033cc59..0000000000000000000000000000000000000000 --- a/src/data/designs/120/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "120", - "url": "https://www.csszengarden.com/120", - "css_url": "https://www.csszengarden.com/120/120.css", - "description": "This design features a minimalist and dark aesthetic with a sophisticated use of typography and imagery, creating an elegant and contemplative atmosphere. The ornate script in the header adds a classic touch, while the structured layout is designed for clarity and ease of navigation.", - "categories": [ - "minimalist design", - "dark theme", - "typography-focused", - "vintage style", - "elegant aesthetics" - ], - "visual_characteristics": [ - "dark background", - "ornate typography", - "structured layout", - "vintage imagery", - "contrast usage" - ] -} \ No newline at end of file diff --git a/src/data/designs/120/screenshot_desktop.png b/src/data/designs/120/screenshot_desktop.png deleted file mode 100644 index a4e7c1bfb691b8c01d4cf62057e4f624e31b6d2d..0000000000000000000000000000000000000000 --- a/src/data/designs/120/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2226aa933397de07ef065ce76e1d9803c7bec800cac7fe06cd6d624701d16d18 -size 774948 diff --git a/src/data/designs/120/screenshot_mobile.png b/src/data/designs/120/screenshot_mobile.png deleted file mode 100644 index 2a82b5a06b087f9ecc17f1d88aeb590efa8b6d64..0000000000000000000000000000000000000000 --- a/src/data/designs/120/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fb917d535382ce20247b4106ecf721bb5a6dc496e014f5c88ff9d663b95bdaf3 -size 422367 diff --git a/src/data/designs/120/style.css b/src/data/designs/120/style.css deleted file mode 100644 index 60319df1568f6b151210a14add4ff6a1b7722980..0000000000000000000000000000000000000000 --- a/src/data/designs/120/style.css +++ /dev/null @@ -1,251 +0,0 @@ -/* css Zen Garden submission 120 - 'Medioevo', by Emiliano Pennisi, http://www.peamarte.it/01/metro.html */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Emiliano Pennisi */ -/* Added: Sept. 2nd, 2004 */ - -/* 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. */ - - - -/* Medioevo - Realized from Emiliano Pennisi - MetroStation Deisgn - http://www.peamarte.it/01/metro.html */ -/*General*/ -body { - font-family: Georgia,MS Serif,New York,sans-serif; - margin-top: 0px; - font-size: 0.8em; - color: #fff; - background-color: #160605; - background-image: url(sfondo.gif); - background-repeat: no-repeat; - background-attachment: fixed; -} - -p,h1,h2,h3 { - text-align: justify; - width: 325px; - margin: 0px 1px 5px; -} - -abbr { - font-weight: bold; - font-style: oblique; - border: 0px; /*Only for Mozilla Firefox*/ -} - -/*Links and Typography*/ -a { - color: #B69B86; - text-decoration: none; -} - -a:hover { - color: #fff; - border-bottom: 1px dotted #e2eff3; -} - -/*End Links*/ -/******************************************************/ -/*******************Container**************************/ -/******************************************************/ -.page-wrapper { - background-color: Black; - border-top: 0px; - border-left: 1px solid #B69B86; - border-right: 1px solid #B69B86; - border-bottom: 25px solid #B69B86; - padding: 10px; - width: 513px; - margin: 0% 74px 0%; -} - -.summary{ - margin: 8px 0px 50px; -} - -/*Hide the textual logo*/ -header h1, h2 { - margin: 0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/*Hide quicksummary Text*/ -.summary p:first-child { - display: none; -} - -.summary p:last-child { - text-transform: uppercase; - font-size: 0.8em; - background-image: url(quickbg.gif); - background-repeat: repeat-y; - height: 22px; -} - -header { - margin: 0; - height: 200px; - width: 513px; - background-image: url(logo.jpg); -} - -/*Hide for image replacement*/ -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/*End ir*/ -/******************************************************/ -/*Image Replacement*/ -.preamble h3 { - background-image: url(01.gif); - background-repeat: repeat-y; - height: 30px; -} - -.explanation h3 { - background-image: url(02.gif); - background-repeat: repeat-y; - height: 30px; -} - -.participation h3 { - background-image: url(03.gif); - background-repeat: repeat-y; - height: 30px; -} - -.benefits h3 { - background-image: url(04.gif); - background-repeat: repeat-y; - height: 30px; -} - -.requirements h3 { - background-image: url(05.gif); - background-repeat: repeat-y; - height: 30px; -} - -/*End ir*/ -/******************************************************/ -/*List style ( menu )*/ -/*1° Replace with image replacement*/ -.select { - background-image: url(select_ds.gif); - background-repeat: no-repeat; - height: 30px; - margin: 3px; -} - -/*Hide text conten*/ -.design-selection .select { - width: 100%; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/*2°*/ -.archives { - background-image: url(archives.gif); - background-repeat: no-repeat; - height: 30px; -} - -.design-archives .archives { - width: 100%; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/*3°*/ -.resources { - background-image: url(resources.gif); - background-repeat: no-repeat; - height: 30px; - margin-left: 15px; -} - -.zen-resources .resources { - width: 100%; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/*End°*/ -.sidebar ul { - list-style: none; -} - -.sidebar li a { - display: block; -} - -.sidebar li a:hover { - color: #666; - border: none; -} - -.sidebar li a.designer-name { - color: #fff; - font-size: 9px; - font-weight: normal; - display: inline; - padding: 0; - text-transform: uppercase; -} - -/*Positioning of menu and list to right*/ -.sidebar { - position: absolute; - top: 300px; - margin-left: 342px; - background: url(menubg.gif) repeat-y; - width: 198px; -} - -.sidebar li { - height: 28px; - margin: 0 0 0; - padding: 5px; - border-bottom: 1px dotted #B69B86; -} - -.sidebar .wrapper { - font-size: 0.9em; - font-weight: bold; - color: #B69B86; - width: 150px; -} - -footer { - background: url(footerlogo.gif) repeat-y top right; /*No repeat the image logo and place to left*/ - margin: 10px 35px 10px; - border-bottom: 1px dashed #850E0E; - height: 100px; -} - -footer a { - cursor: help; - font: 0.8em georgia, helvetica, sans-serif; - text-transform: uppercase; - color: #850E0E; - font-weight: bold; -} - -footer a:hover { - color: #fff; - border: 0px; - font-weight: bold; -} -/*End of CSS*/ - diff --git a/src/data/designs/121/metadata.json b/src/data/designs/121/metadata.json deleted file mode 100644 index 4501c874a3d3bd572ff7ebff0178fcf504efc305..0000000000000000000000000000000000000000 --- a/src/data/designs/121/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "121", - "url": "https://www.csszengarden.com/121", - "css_url": "https://www.csszengarden.com/121/121.css", - "description": "This design is characterized by a structured and compartmentalized layout, with a cool blue color palette that promotes tranquility and focus. The use of headings with indentation enhances readability and directs the viewer's attention effectively. The navigation pane on the left utilizes bordered boxes for categorization, enhancing organization and clarity. The inclusion of subtle graphic elements like the duck adds a touch of whimsy, balancing the otherwise professional tone of the design.", - "categories": [ - "web design", - "modern", - "structured layout", - "educational" - ], - "visual_characteristics": [ - "blue color palette", - "bordered sections", - "graphic elements", - "simple typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/121/screenshot_desktop.png b/src/data/designs/121/screenshot_desktop.png deleted file mode 100644 index fd314b095c35c5a280729ea419a2e17bde0ebc44..0000000000000000000000000000000000000000 --- a/src/data/designs/121/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c56a2c2459940459e2f8703758ea1616ca9be361f0c45dfdb969ea05a525b632 -size 516479 diff --git a/src/data/designs/121/screenshot_mobile.png b/src/data/designs/121/screenshot_mobile.png deleted file mode 100644 index f60a0f0da714bb3348d0c29ee25f2baf6a6a856f..0000000000000000000000000000000000000000 --- a/src/data/designs/121/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e15357bf47c6e1fb05399a687a891fc18a5b5b60d4260c3051f22e743e17adc1 -size 421565 diff --git a/src/data/designs/121/style.css b/src/data/designs/121/style.css deleted file mode 100644 index 62e22b64dda4a7ed77bae60c1ce0f408b0ee6c29..0000000000000000000000000000000000000000 --- a/src/data/designs/121/style.css +++ /dev/null @@ -1,211 +0,0 @@ -/* css Zen Garden submission 121 - '60's Lifestyle', by Emiliano Pennisi, http://www.peamarte.it/02/03.html */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Emiliano Pennisi */ -/* Added: Sept. 2nd, 2004 */ - -/* 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. */ - - - -/* css Zen Garden - '60 lifestyle', by Emiliano Pennisi, http://www.peamarte.it/02/03.html */ -/* This illustrations and design was made by Emiliano Pennisi, MetroStation Design, for more info visit --> http://www.peamarte.it/02/03.html -The clipart of the cars is realized by Lens Hanger, for more info visit--> http://www.lenshanger.co.uk/*/ - -/*****************Page debug*****************Good rule to know the structure of the webpage* NOTE: Only compliant browser no IE* -div[id]{ - border: 1px solid #000; - background-color: #fff; - margin: 20px 10px; -} - -div[id]:before{ - content: "div#" attr(id); - background-color: #cf9; - color: #060; - display: block; -} - -/*****************End Page debug*****************/ -body { - font-family: palatino, georgia, times new roman, serif; - font-size: 70%; - line-height: 150%; - background: #688FBA url(contentBG.gif) bottom left fixed repeat-y; - color: #000; - margin: 0px; -} - -/*Links and Typography*/ -a { - color: #000; - text-decoration: none; -} - -a:hover { - color: #416D8E; - border-bottom: 1px dotted #e2eff3; -} - -abbr { - font-weight: bold; - font-style: oblique; - cursor: help; - border: 0px; /*Only for Mozilla Firefox*/ -} - -h3 { - color: #416D8E; - font-size: 20px; - font-weight: bold; - margin-top: 13px; - margin-bottom: 15px; - border-bottom: 5px solid #416D8E; - padding-bottom: 10px; - padding-left: 55px; -} - -/*H3 Background*/ -.sidebar h3,.intro h3{ - background: url(h3bg_nav.gif) no-repeat 0px -3px; - padding-left: 40px; -} - -div.explanation h3{ - background: url(h3bg.gif) no-repeat 0px -3px; -} - -div.participation h3{ - background: url(h3bg_part.gif) no-repeat 0px -3px; - padding-left: 50px; -} - -div.benefits h3{ - background: url(h3bg_benef.gif) no-repeat 0px -3px; - padding-left: 37px; -} - -div.requirements h3{ - background: url(h3bg_req.gif) no-repeat 0px -3px; - padding-left: 47px; -} - -/*End H3 background*/ -/*Container*/ -.page-wrapper { - margin-left: 0px; - margin-top: 0px; - padding: 0px; -} - -/*Header image*/ -div.extra1{ - background: url(header.gif) no-repeat; - width: 100%; - height: 648px; - margin-left: 15px; - margin-top: -20px; -} - -header { - display: none; -} - -header h1 { - width: 100%; - height: 100%; -} - -.intro { - width: 300px; - position: absolute; - left: 20px; - top: 1214px; -} - -.supporting { - width: 450px; - position: absolute; - left: 330px; - top: 620px; -} - -.summary p:first-child { - display: none; -} - -.summary p:last-child { - padding: 0 0 8px 0; - text-transform: uppercase; - font-weight: bold; -} - -div.explanation,div.participation,div.benefits,div.requirements{ - width: 400px; - margin-left: 25px; -} - - footer, .summary, .preamble, .design-selection, #lfavorites, .zen-resources, .design-archives { - background-color: #CDE0F3; - padding: 7px; - margin: 15px; - border: 5px solid #FFF0F1; -} - -/*Rules for navigation*/ -.sidebar ul { - margin: 0px; - padding: 0px; -} - -.sidebar{ - width: 300px; - position: absolute; - left: 20px; - top: 598px; -} - -.sidebar li a{ - text-transform: uppercase; - font-size: 10px; - font-weight: bold; -} - -.sidebar li a:hover { - color: #416D8E; - border: none; -} - -.sidebar li { - list-style-type: none; - display: block; - margin: 0 0 0; - padding: 1px; - border-bottom: 1px dotted #000; -} - -.sidebar li a.designer-name { - color: #416D8E; - font-size: 9px; - font-weight: bold; - display: inline; - padding: 0; - text-transform: uppercase; -} - -.sidebar li a.designer-name:hover{ - background-color: White; -} - -/*End nav rules*/ -/*Footer*/ -footer{ - border: 1px solid #416D8E; - text-transform: uppercase; - font-weight: bold; -} - -/*En of code*/ - diff --git a/src/data/designs/122/metadata.json b/src/data/designs/122/metadata.json deleted file mode 100644 index 705524c098b46e6818492bc98af16f16248970c0..0000000000000000000000000000000000000000 --- a/src/data/designs/122/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "122", - "url": "https://www.csszengarden.com/122", - "css_url": "https://www.csszengarden.com/122/122.css", - "description": "The design features a minimalist aesthetic with a dominant white space, paired with subtle green accents and a hint of red, creating a clean and sophisticated look. The layout is vertical and structured, highlighting content purposefully with ample spacing, making it easy to read and navigate. The typography is elegant, using a serif font for headings to contrast with a simpler body text, supporting a Zen-like theme that embodies simplicity and clarity.", - "categories": [ - "minimalist", - "sophisticated", - "text-focused", - "zen-inspired" - ], - "visual_characteristics": [ - "vertical layout", - "white space", - "green and red accents", - "serif typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/122/screenshot_desktop.png b/src/data/designs/122/screenshot_desktop.png deleted file mode 100644 index 444b953654e39fe9854ff593c84aeadd172c5f32..0000000000000000000000000000000000000000 --- a/src/data/designs/122/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:aefd4bd8f66b4547f5fa692bc264d0ed7fe22338283d158458885cced602c79f -size 573056 diff --git a/src/data/designs/122/screenshot_mobile.png b/src/data/designs/122/screenshot_mobile.png deleted file mode 100644 index 55e1820b56ad10657c7d12a7f53e0f3825042a0b..0000000000000000000000000000000000000000 --- a/src/data/designs/122/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:10cd35452b058ce1d593e338d05686b7a6b3f121925d5f5e7c3d5cee03da7c56 -size 363298 diff --git a/src/data/designs/122/style.css b/src/data/designs/122/style.css deleted file mode 100644 index e219e92bb98bf533886f6aeb5f2670f39c8376f8..0000000000000000000000000000000000000000 --- a/src/data/designs/122/style.css +++ /dev/null @@ -1,349 +0,0 @@ -/* css Zen Garden submission 122 - 'Centerfold', by John Oxton, http://joshuaink.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, John Oxton */ -/* Added: Sept. 13th, 2004 */ - -/* 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. */ - - - - -/* August 2004 =========================================================== -Title: Centerfold -Author: John Oxton -Web Site: www.joshuaink.com -Note: Ivy on the sides - in retrospect this idea was probably (not conciously) taken from hicksdesign.co.uk -========================================================================== */ - -/* General =============================================================== */ - -/* Font-sizes are relative to allow scaling in IE tutorial found at www.clagnut.com/blog/348/ */ -body { -font:75% Arial, Helvetica, sans-serif; -color:#333; -background:white url(back.png) repeat-y top center; /* zeldman.com */ -margin:0; -text-align:center; /* Positions all content in the center of the viewport */ -} - - -p{ -font-size:1em; /* because of body font-size being 75% acutal font size 0.75em */ -line-height:1.4em; -margin:0.7em 0 0.7em 0; -padding:0; -} -.preamble p, -.supporting p{ -background:transparent url(hr.png) no-repeat bottom center; -margin:0; -padding:1.4em 0 1.4em 0; -} -a{ -color:#900; -} -/* a:active added for IE a:focus for Mozilla - added to aid accesibility more than visual appearance */ -a:hover, -a:focus, -a:active -{ -background:black; -color:white; -border:0; -text-decoration:none; -} -/* Show dotted a:link style only in decent browsers (not IE) - taken from http://www.shauninman.com/mute/project/this_is_cereal.php */ -div[id="container"] a, -div[id="container"] a:visited{ -text-decoration:none; -border-bottom:1px dotted #900; -} - - - -/* Becuase IE6 doesn't do it by default - IE5 doens't do it at all */ -abbr{ -border-bottom:1px dotted #333; -cursor:help; -} -abbr:hover{ -border-top:1px dotted #333; -border-bottom:0; -} -.zen-resources abbr{ -border:0; -} - -/* Content =============================================================== */ - - -/* Center the site and return the contents to the left hand side */ -.page-wrapper { -width:515px; -text-align:left; -padding:0; -margin:0 auto; -} - -/* position content to the right hand side */ -.intro, -.preamble, -.supporting, -.summary{ -/* width when added with linkList width is 17px short of total site width creating a natural margin in the center */ -width:290px; -float:right; -clear:right; -margin:20px 0 0 0; -} - -/* Replace the whole intro section with a graphic */ -.intro header { -width:290px; -height:307px; -background:white url(intro.jpg) no-repeat top center; -text-indent:-10000px; -float:right; -margin:10px 0 0 0; -padding:0; -} -/* Replace p1 quickSummary with a graphic */ -.summary{ -height:180px; -background: url(quicksum.png) no-repeat bottom center; -margin:10px 0 0 0; -padding:0; -text-indent:-10000px; -} -/* recover quickSummary p2 from text-indent and move above the graphic */ -.summary p:last-child{ -margin:-20px 0 0 0; -padding:0; -text-indent:0; -text-align:center; -text-transform:uppercase; -font: 0.8em Georgia, "Times New Roman", Times, serif; /* acutal size 0.6em; */ -background:white; -/* background colour for text size increase, masks background graphic */ -} -/* Hide headings from visual display (still visible to screen readers) and replace with images - first read about this at hicksdesign.co.uk */ -h3{ -width:290px; -height:35px; -margin:5px 0 5px 0; -padding:0; -text-indent:-10000px; -float:right; -overflow:hidden; -} -.preamble h3{ -background:url(preamble.png) no-repeat center left; -} -.explanation h3{ -background:url(explanation.png) no-repeat center left; -} -.participation h3{ -background:url(participation.png) no-repeat center left; -} -.benefits h3{ -background:url(benefits.png) no-repeat center left; -} -.requirements h3{ -background:url(requirements.png) no-repeat center left; -} - - -/* Navigation ============================================================= */ - -.sidebar{ -font-family:Verdana, Arial, Helvetica, sans-serif; -margin:0; -padding:97px 0 0 0; -width:208px; -text-align:right; -float:left; -/* Only IE5 MAC needs the left float \*/ -float:none; -/* End IE5 MAC comment hack found at stopdesign.com see also http://www.stopdesign.com/log/2004/07/06/filtering-css.html */ -} -/* Because the linkList is not floated (except for IE5 MAC), this casued problems with usual image replacement methods, so... */ -.sidebar h3{ -float:none; -display:none; -} -/* linkList h3 may be hidden from screen readers and printers due to display none */ -@media aural, braille, print{ -.sidebar h3{ -display:block; -} -} -.design-selection, -#lfavorites, -.design-archives, -.zen-resources -{ -/* Something shaky going on in IE6 with the background images, border-left stops it shaking */ -border-left:1px solid white; -padding:75px 0 0 0; -margin:0 0 40px 0; -} -.design-selection{ -background:transparent url(designhead.png) no-repeat top left; -} -#lfavorites{ -background:transparent url(favoritehead.png) no-repeat top left; -} -.design-archives{ -background:transparent url(archivehead.png) no-repeat top left; -} -.zen-resources{ -background:transparent url(resourceshead.png) no-repeat top left; -} -.sidebar ul{ -margin:0; -padding:0; -list-style:none; -} -.sidebar li{ -font-size:0.8em; -display:block; -margin:0; -padding: 0 0 7px 0; -border-bottom:1px solid #F9F7F6; -} - -/* Link Styles */ -.sidebar li a{ -display:block; -padding:4px 10px 4px 5px; -margin:0 0 5px 0; -border:0; -text-transform:uppercase; -font-weight:bold; -text-decoration:none; -color:#93A871; -} -/* Background position http://wellstyled.com/css-nopreload-rollovers.html */ -.design-selection li a, -#lfavorites li a{ -background:transparent url(visited.png) no-repeat -100px; -} -.design-selection li a:visited, -#lfavorites li a:visited{ -background-position:0 50% ; -} - -.sidebar li a:hover, -.sidebar li a:focus, -.sidebar li a:active{ -padding-right:6px; -border-right:4px solid #81B4CF; -color:#81B4CF; -text-decoration:none; -} - -.sidebar li a.designer-name{ -display:inline; -padding:0 2px 0 0; -text-transform:lowercase; -font-style:italic; -font-weight:normal; -margin:0; -border:0; -background-position:-100px; -} -.sidebar li a.designer-name:hover, -.sidebar li a.designer-name:visited, -.sidebar li a.designer-name:active, -.sidebar li a.designer-name:focus{ -padding:0 2px 0 0; -border:0; -background-position:-100px; -} - -.design-archives li, -.zen-resources li{ -border:0; -} - -.zen-resources li a, -.design-archives li a{ -padding-right:6px; -border:1px solid #F9F7F6; -border-right:4px solid #D6DECA; -text-decoration:none; -background:white; -} -footer{ -height:60px; -background:transparent url(relax.png) no-repeat top left; -margin:20px 0 0 0; -padding:40px 0 0 30px; -} - -footer a{ -color:#DCE4C2; -text-decoration:none; -font-weight:bold; -border:0; -} -footer a:hover, -footer a:focus, -footer a:active{ -color:#900; -text-decoration:none; -font-weight:bold; -border-bottom:1px dotted #900; -background:transparent; -} - - -/* Print, because we're running out of trees faster than we are bandwidth ================================================ */ -@media print{ -body -{ -text-align:left; -color:black; -} - -a{ -color:black; -text-decoration:none; -border:0; -} -.sidebar, -footer, -.summary p:last-child{ -display:none; -position:absolute; -} -.page-wrapper{ -width:90%; -} -.intro, -.intro header, -.preamble, -.supporting, -.summary{ -float:none; -width:90%; -display:block; -text-indent:0; -margin:0; -padding:0; -width:auto; -height:auto; -} -h1, h2, h3{ -display:block; -text-indent:0; -float:none; -color:black; -width:auto; -height:auto; -float:none; -} -} \ No newline at end of file diff --git a/src/data/designs/123/metadata.json b/src/data/designs/123/metadata.json deleted file mode 100644 index 44cbc9e5e7e509f4f06704fe70147573ea49695d..0000000000000000000000000000000000000000 --- a/src/data/designs/123/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "123", - "url": "https://www.csszengarden.com/123", - "css_url": "https://www.csszengarden.com/123/123.css", - "description": "The design showcases a harmonious blend of deep purples and bright yellow accents to create a serene and elegant atmosphere, reminiscent of a zen garden. The floral motifs add a touch of nature, while the clean, symmetrical layout ensures readability and focus. Yellow highlights strategically underscore key information, enhancing user navigation through a well-defined content structure.", - "categories": [ - "Web Design", - "Nature-Inspired", - "Contemporary", - "Elegant" - ], - "visual_characteristics": [ - "Dark Color Palette", - "Floral Motifs", - "Symmetrical Layout", - "Contrasting Accents" - ] -} \ No newline at end of file diff --git a/src/data/designs/123/screenshot_desktop.png b/src/data/designs/123/screenshot_desktop.png deleted file mode 100644 index c855dad80602ed62743b465322afb6d8de8333e9..0000000000000000000000000000000000000000 --- a/src/data/designs/123/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d87bddaee599d33b5bdf336906d53ac9d77abe0544bc684b8aabadb3121aca69 -size 535667 diff --git a/src/data/designs/123/screenshot_mobile.png b/src/data/designs/123/screenshot_mobile.png deleted file mode 100644 index 3bcbe237a5538f3eef7f8f0b37b74e561e470572..0000000000000000000000000000000000000000 --- a/src/data/designs/123/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2f3d66493b90f5069c296ca374dd49f98e5e2bfa98202abcc82809291775b74a -size 490265 diff --git a/src/data/designs/123/style.css b/src/data/designs/123/style.css deleted file mode 100644 index 8c8cc1718c7016ab9b2678283eec30311d4f1efe..0000000000000000000000000000000000000000 --- a/src/data/designs/123/style.css +++ /dev/null @@ -1,359 +0,0 @@ -/* css Zen Garden submission 123 - 'Skyroots', by Axel Hebenstreit, http://www.sonnenvogel.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Axel Hebenstreit */ -/* Added: Sept. 13th, 2004 */ - -/* 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. */ - - - -/* Basic Elements */ -html, body -{ - color: white; - font: 11px/16px "trebuchet ms", arial, helvetica, sans; - background: #3a200a url(bg.gif) repeat-y center top; - text-align: center; - margin: 0; - padding: 0; -} - -p -{ - font: 11px/16px "trebuchet ms", arial, helvetica, sans; - text-align: justify; - letter-spacing: 1px; - margin: 0 0 0; - padding: 0 22px 15px; -} - -a -{ - color: #59365f; - text-decoration: none; - background-color: #ffae00; -} - -a abbr -{ - color: #59365f; - text-decoration: none; -} - -.sidebar a abbr -{ - color: #ffae00; - text-decoration: none; -} - -a:hover -{ - color: #feffff; - text-decoration: underline; -} - -abbr -{ - color: #ffae00; - text-transform: uppercase; - cursor: help; -} - -/* specific divs */ -footer -{ - background: transparent url(footer_bg.gif) no-repeat left bottom; - padding: 20px 0 60px 22px; -} - -.page-wrapper -{ - background: #411948 url(steine.gif) repeat-y; - display: block; - margin: 0 auto; - padding: 0; - position: relative; - width: 770px; -} - -.design-selection -{ - background: #55012b url(kasten1_03.gif) no-repeat left bottom; - padding-bottom: 30px; - position: relative; -} - -.design-archives, .zen-resources -{ - background: #b99ab8 url(blume_unten.gif) no-repeat left bottom; - margin-top: 26px; - padding-bottom: 15px; -} - -/* header graphics */ -header -{ - background: url(top.jpg) no-repeat 0 0; - text-indent: -2000px; - margin: 0; - padding: 0; - height: 366px; -} - -header h2 -{ - line-height: 0; - background: #411948 url(headlines_02.gif) no-repeat; - text-indent: -2000px; - display: block; - margin: 0; - padding: 0; - position: relative; - top: 385px; - left: 355px; - width: 370px; - height: 68px; -} - -.summary -{ - background-color: #59365f; - text-align: left; - margin: 82px 0 0; - padding: 0; - position: relative; - top: 0; - left: 355px; - width: 370px; - height: auto; -} - -* html header h2, * html .summary { left: 155px; } - -.summary p -{ - font-style: italic; - font-weight: bold; - padding-right: 22px; - padding-left: 22px; - width: 323px; -} - -h3 -{ - text-indent: -2000px; - margin: 0; - padding: 0; -} - -h1, h2 { display: none; } - -.preamble h3 -{ - background: url(headlines_03.gif) no-repeat 0 0; - margin: 0; - padding: 0; - width: 370px; - height: 48px; -} - -.explanation h3 -{ - background: url(headlines_04.gif) no-repeat 0 0; - margin: 0; - padding: 0; - width: 370px; - height: 48px; -} - -.participation h3 -{ - background: url(headlines_05.gif) no-repeat 0 0; - margin: 0; - padding: 0; - width: 370px; - height: 48px; -} - -.benefits h3 -{ - background: url(headlines_06.gif) no-repeat 0 0; - margin: 0; - padding: 0; - width: 370px; - height: 48px; -} - -.requirements h3 -{ - background: url(headlines_07.gif) no-repeat 0 0; - margin: 0; - padding: 0; - width: 370px; - height: 48px; -} - -.preamble, .supporting -{ - background-color: #59365f; - text-align: left; - position: relative; - left: 355px; - width: 370px; -} - -* html .preamble, * html .supporting -{ - background-color: #59365f; - text-align: left; - position: relative; - left: 155px; - width: 370px; -} - -/*linklist -*/ - -.sidebar -{ - position: absolute; - top: 366px; - left: 82px; - width: 229px; - overflow: hidden; -} - -.sidebar .wrapper -{ - text-align: left; - position: relative; - left: 38px; - width: 191px; -} - -.sidebar h3 -{ - margin: 0; - width: 229px; - height: 68px; -} - -.sidebar h3.select -{ - background: url(kastenlilie.gif) no-repeat left top; - position: relative; - right: 38px; -} - -.sidebar h3.archives -{ - background: url(liliarchives_01.gif) no-repeat left top; - margin-top: 23px; - position: relative; - right: 38px; -} - -.sidebar h3.resources -{ - background: url(liliresourcen_01.gif) no-repeat left top; - margin-top: 23px; - position: relative; - right: 38px; -} - -.sidebar h3.select -{ - color: #feffff; - font-size: 12px; - font-family: "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif; - text-transform: uppercase; - text-indent: 0; - letter-spacing: 1px; - display: block; - padding-top: 40px; - padding-left: 70px; - height: 28px; -} - -.sidebar h3.archives, .sidebar h3.resources { - text-indent: 200%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar ul -{ - margin: 0; - padding: 0; -} - -.sidebar li -{ - font-size: 11px; - line-height: 11px; - background: url(bullet1.gif) no-repeat 0 12px; - list-style-type: none; - display: block; - margin: 0 0 0 14px; - padding: 0 0 0 20px; - height: auto; -} - -.sidebar li a -{ - color: #feffff; - font-size: 11px; - font-weight: bold; - line-height: 15px; - text-decoration: none; - background: transparent; - display: block; - padding: 9px 0 0 0; - width: auto; -} - -.sidebar li a:hover -{ - color: #ffae00; - text-decoration: underline; -} - -.sidebar li a.designer-name:link, .sidebar li a.designer-name:visited -{ - color: #ffae00; - font-size: 11px; - font-weight: normal; - line-height: 15px; - display: inline; -} - -.sidebar li a.designer-name:hover -{ - color: #feffff; - text-decoration: underline; -} - -.sidebar .design-archives li, .sidebar .zen-resources li -{ - background: url(bullet2.gif) no-repeat 0 9px; - list-style-type: none; - display: block; - margin-left: 14px; - padding-left: 20px; - height: 25px; -} - -.sidebar .design-archives li a, .sidebar .zen-resources li a -{ - color: #411948; - padding-top: 5px; - padding-bottom: 3px; -} - -.sidebar .design-archives li a:hover, .sidebar .zen-resources li a:hover { color: #feffff; } - -/* extra divs */ -.extra1, .extra2, .extra3, .extra4, .extra5, .extra6 { display: none; } diff --git a/src/data/designs/124/metadata.json b/src/data/designs/124/metadata.json deleted file mode 100644 index efb0802839674f5cbf4394be91a8d8fdacc1176e..0000000000000000000000000000000000000000 --- a/src/data/designs/124/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "124", - "url": "https://www.csszengarden.com/124", - "css_url": "https://www.csszengarden.com/124/124.css", - "description": "The design features a serene and elegant layout using a calming sage green and white color palette, complemented by subtle ornamental flourishes and a tea motif. The sophisticated typography with varying sizes gives a professional and polished feel, enhancing the readability and visual hierarchy. The overall aesthetic is clean and crisp, echoing themes of simplicity and tranquility, while the side navigation offers an easy-to-follow structure.", - "categories": [ - "Web Design", - "Minimalism", - "Nature", - "Typography" - ], - "visual_characteristics": [ - "Ornamental Elements", - "Green and White Palette", - "Sophisticated Typography", - "Calm and Serene Mood" - ] -} \ No newline at end of file diff --git a/src/data/designs/124/screenshot_desktop.png b/src/data/designs/124/screenshot_desktop.png deleted file mode 100644 index 6b7e944757ee81159d9105fc17507f1f32430bfb..0000000000000000000000000000000000000000 --- a/src/data/designs/124/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:17fd053916f9108b28ea658788b51bc0be6578a2eb161007d3dd3aeb14cd7554 -size 584749 diff --git a/src/data/designs/124/screenshot_mobile.png b/src/data/designs/124/screenshot_mobile.png deleted file mode 100644 index d6ecce61ba8d21d0eef54102756fb0abe07e953e..0000000000000000000000000000000000000000 --- a/src/data/designs/124/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c589301f1e98fb9081ce78a6b8be0bcff712ef74a481e711ccfc9fb507a7dd1e -size 408861 diff --git a/src/data/designs/124/style.css b/src/data/designs/124/style.css deleted file mode 100644 index c53342ef1ae89fa0e2f876932777c6f0c3df7798..0000000000000000000000000000000000000000 --- a/src/data/designs/124/style.css +++ /dev/null @@ -1,258 +0,0 @@ -/* css Zen Garden submission 124 - 'Teatime', by Michaela Maria Sampl, http://www.freecom.at/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Michaela Maria Sampl, except background image, copyright Squidfingers - http://squidfingers.com/patterns/ */ -/* Added: Sept. 16th, 2004 */ - -/* 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. */ - - - - -/* BASICS */ -body { - font: 9pt/16pt Georgia, Times New Roman, Times, serif; - color: #010E22; - background: #F5F5E9 url(pattern.gif) repeat; - margin: 0px; - border: 0px; - padding: 0px; - text-align: center; - } -p { - font: 9pt/16pt Georgia, Times New Roman, Times, serif; - margin-top: 0px; - text-align: left; - color: #010E22; - } - -a:link { - font-weight: bold; - text-decoration: none; - color: #A8A439; - } -a:visited { - font-weight: bold; - text-decoration: none; - color: #6D7134; - } -a:hover, a:active { - text-decoration: underline; - color: #010E22; - } - - -/* LAYOUT */ -.page-wrapper { - text-align: left; - position: relative; - background: #fff url(teacup.jpg) no-repeat top left; - margin: 10px auto; - border: 10px solid #C7CDD8; - padding: 0px; - width: 760px; - voice-family: "\"}\""; - voice-family: inherit; - width: 740px; - } - html>body .page-wrapper { - width: 740px; -} - - -.intro { - background: url(leaves_neu.gif) no-repeat top right; - margin: 0px; - } - -header { - padding-top: 65px; - margin-left: 230px; - } - -header h1 { - background: transparent url(h1.gif) no-repeat top left; - margin-top: 0px; - margin-left: 0px; - margin-bottom: 16px; - width: 192px; - height: 22px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -header h2 { - background: transparent url(h2.gif) no-repeat top left; - margin-left: 0px; - margin-bottom: 68px; - margin-top: 0px; - width: 372px; - height: 33px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -/* CONTENT */ -.summary { - position: absolute; - top: 320px; - left: 30px; - width: 172px; - - } -.summary p { - font: bold 8pt/16pt Georgia, Times New Roman, Times, serif; - text-align:left; -} - -.preamble { - margin: 0px 0px 0px 230px; - padding: 0px 10px 0px 10px; - width: 450px; - border: 1px solid #B2B9C4; - border-bottom: 1px solid #F1F2EF; - background: #F1F2EF url(leave_piece_1.gif) no-repeat left top; - } - - .supporting { - background: #F1F2EF url(bg.gif) no-repeat center top; - border: 1px solid #B2B9C4; - border-top: 1px solid #F1F2EF; - margin-left: 230px; - width: 470px; - margin-bottom: 40px; - padding-bottom: 10px; - } - -.explanation { - margin: 0px 10px 0px 10px; - width: 450px; - } - -.participation, .benefits, .requirements { - margin: 15px 10px 0px 10px; - width: 450px; - } - -/* LINKS */ -.sidebar { - position: absolute; - top: 520px; - left: 30px; - } -.sidebar .wrapper { - font: 9px verdana, sans-serif; - padding: 0px; - margin-top: 20px; - width: 150px; - } -.sidebar h3.select { - background: transparent url(h3_select.gif) no-repeat top left; - margin: 0px 0px 0px 0px; - width: 150px; - height: 36px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.sidebar h3.archives { - background: transparent url(h3_archives.gif) no-repeat top left; - margin: 25px 0px 0px 0px; - width: 150px; - height: 36px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.sidebar h3.resources { - background: transparent url(h3_resources.gif) no-repeat top left; - margin: 25px 0px 0px 0px; - width: 150px; - height: 36px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.sidebar ul { - margin: 0px; - padding: 0px; - } -.sidebar li { - line-height: 2.5ex; - list-style-type: none; - padding-top: 5px; - margin-bottom: 5px; - } - -.sidebar li a:link { - color: #A8A439; - font-weight: normal; - } -.sidebar li a:visited { - color: #010E22; - font-weight: normal; - } -.sidebar .design-selection a.designer-name:link { - color: #383B16; - font-weight: normal; - } -.sidebar .design-selection a.designer-name:visited { - color: #010E22; - font-weight: normal; - } - -/* FOOTER */ -footer { - position: absolute; - top: 10px; - right: 50px; - - } -footer a:link, footer a:visited { - margin-right: 10px; - } - -/* HEADLINES */ -h3 { - text-align: left; - margin-bottom: 0px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.preamble h3 { - background: transparent url(h3_the_road.gif) no-repeat top left; - width: 450px; - height: 66px; - margin-top: 15px; - } -.supporting h3 { - width: 450px; - height: 50px; - } - -.explanation h3 { - background: transparent url(h3_a.gif) no-repeat top left; - margin-top: 25px; - } -.participation h3 { - background: transparent url(h3_b.gif) no-repeat top left; - } -.benefits h3 { - background: transparent url(h3_c.gif) no-repeat top left; - } -.requirements h3 { - background: transparent url(h3_d.gif) no-repeat top left; - } - \ No newline at end of file diff --git a/src/data/designs/125/metadata.json b/src/data/designs/125/metadata.json deleted file mode 100644 index 29668ae04469fc5c0ee6361bca3d773f7b4b6816..0000000000000000000000000000000000000000 --- a/src/data/designs/125/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "125", - "url": "https://www.csszengarden.com/125", - "css_url": "https://www.csszengarden.com/125/125.css", - "description": "The design is a harmonious blend of earthy textures and vibrant colors with a focus on responsive typography and minimalistic layout. It combines natural imagery with elegant text alignment, creating a balance between organic and structured elements. The strategically placed butterfly graphic adds a dynamic contrast, enhancing the thematic depth of the design.", - "categories": [ - "Nature-inspired", - "Minimalist", - "Typography-focused", - "Artistic", - "Content-centric" - ], - "visual_characteristics": [ - "Earthy tones", - "Textured background", - "Crisp typography", - "Asymmetrical layout", - "Dynamic graphic element" - ] -} \ No newline at end of file diff --git a/src/data/designs/125/screenshot_desktop.png b/src/data/designs/125/screenshot_desktop.png deleted file mode 100644 index d6bc23724b04af75330643bb283a8a8146e80a00..0000000000000000000000000000000000000000 --- a/src/data/designs/125/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:692d115e0a09d684bda208ee3eb1eee014b1ee8c66d1407104d06a94c65c2296 -size 1462549 diff --git a/src/data/designs/125/screenshot_mobile.png b/src/data/designs/125/screenshot_mobile.png deleted file mode 100644 index 978ccb7b57f91d139fb86b2d96c6f97d9feb0d1a..0000000000000000000000000000000000000000 --- a/src/data/designs/125/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8fc203254491b3a9043450dfad70bf72b3f1b37335dca036de91424a8899a6c1 -size 493854 diff --git a/src/data/designs/125/style.css b/src/data/designs/125/style.css deleted file mode 100644 index d4f4a398ce30fb7e61ed5760a497eee622ba1a04..0000000000000000000000000000000000000000 --- a/src/data/designs/125/style.css +++ /dev/null @@ -1,88 +0,0 @@ -/* css Zen Garden submission 125 - 'Beccah', by Chris Morrell, http://www.cmorrell.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Chris Morrell */ -/* Added: Sept. 16th, 2004 */ - -/* 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. */ - - - - -/* General Styles */ -html, body { margin: 0; padding: 0; } -body { background: #eee; font: 76% Verdana, Arial, Helvetica, sans-serif; } -p, div { font-size: 1em; } -a:link { color: #900; } -a:hover { color: #f00; } -a:visited { color: #303; } -abbr { cursor: default; } -.accesskey { text-decoration: underline; } -.page-wrapper { position: relative; background: url(header.jpg) no-repeat; padding: 170px 10px 10px 10px; width: 770px; } - -/* Page Header Styles */ -header { display: none; } - -/* Navigation Bar Styles */ -.sidebar { position: absolute; top: 173px; left: 550px; background: url(sidebar.jpg) no-repeat; padding: 20px 25px 0 25px; width: 213px; voice-family: "\"}\""; voice-family: inherit; width: 182px; } -html>body .sidebar { width: 192px; } -.sidebar ul, .sidebar li { list-style-type: none; margin: 0; padding: 0; } - - /* "Select a Design" Styles */ - .design-selection { margin: 100px 0 0 0; } - .design-selection li { margin-bottom: 5px; } - .design-selection a { font: bold 1em Georgia, "Times New Roman", Times, serif; display: block; font-variant: small-caps; text-decoration: none; letter-spacing: .3em; } - .design-selection a.designer-name { font: 1em Verdana, Arial, Helvetica, sans-serif; display: inline; text-transform: none; letter-spacing: normal; } - .design-selection a.designer-name:link { text-decoration: none; color: #000; } - .design-selection a.designer-name:hover { text-decoration: underline; color: #f00; } - h3.select { margin: 0; padding: 0; background: url(select-a-design.jpg) no-repeat; position: absolute; width: 399px; height: 225px; left: 0px; top: -130px; } - h3.archives { margin: 0; padding: 0; position: relative; width: 209px; height: 68px; background: url(archives.gif) no-repeat; } - h3 { - text-indent: 250%; - white-space: nowrap; - overflow: hidden; - } - - /* "Archives" Styles */ - .design-archives li, .zen-resources li { border-bottom: 1px solid #ddd; margin-bottom: 7px; } - .design-archives a, .zen-resources a { text-decoration: none; } - - /* "Resources" Styles */ - h3.resources { margin: 0; padding: 0; position: relative; width: 209px; height: 68px; background: url(resources.gif) no-repeat; } - -/* Main Content Styles */ -.intro, .supporting { margin: 0 230px 0 0; } -.intro h3, .supporting h3 { background-repeat: no-repeat; margin: 0; padding: 0; height: 50px; width: 475px; } -.intro p, .supporting p { margin-left: 20px; } -.preamble, .supporting { background: url(background.jpg) repeat-y; font: 1.3em Georgia, "Times New Roman", Times, serif; } -.participation p, .benefits p { width: 730px; } - - /* Headings */ - .explanation h3 { background-image: url(explanation.gif); } - .participation h3 { background-image: url(participation.gif); } - .benefits h3 { background-image: url(benefits.gif); } - .requirements h3 { background-image: url(requirements.gif); } - - /* Quick Summary */ - .summary { cursor: default; font: 1.35em "Courier New", Courier, mono; margin: 0; padding: 71px 45px 3px 35px; position: relative; top: -34px; left: -10px; background: url(summary.jpg) no-repeat; color: #600; } - - /* Preamble */ - .preamble { margin: 0; } - .preamble h3 { background-image: url(preamble.gif); } - - /* Requirements */ - .requirements p { width: 640px; } - .requirements p:nth-child(2), .requirements p:nth-child(3), .requirements p:nth-child(4), .requirements p:nth-child(5) { background-repeat: no-repeat; padding-left: 90px; } - .requirements p:nth-child(2) { background-image: url(1.gif); } - .requirements p:nth-child(3) { background-image: url(2.gif); } - .requirements p:nth-child(4) { background-image: url(3.gif); } - .requirements p:nth-child(5) { background-image: url(4.gif); } - -/* Footer */ -.requirements p:nth-child(6), footer { color: #aaa; text-align: center; width: 770px; } -.requirements p:nth-child(6) { border-top: 1px solid #ccc; padding: 15px 0 0 0; margin: 100px 0 0 0; } -footer { margin: 0 0 30px 0; } -.requirements p:nth-child(6) a, footer a { color: #aaa; } - diff --git a/src/data/designs/126/metadata.json b/src/data/designs/126/metadata.json deleted file mode 100644 index 05886afa03251846c19e6ba2d2e02257856a54c1..0000000000000000000000000000000000000000 --- a/src/data/designs/126/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "126", - "url": "https://www.csszengarden.com/126", - "css_url": "https://www.csszengarden.com/126/126.css", - "description": "The design uses a minimalist approach with a light color palette and simple, clean typography, providing an elegant and organized layout. The top header features a subtle gradient that adds depth, while the text content is aligned centrally with plenty of white space ensuring readability and focus. Links and titles are distinctly formatted for easy navigation, contributing to an overall serene and professional feel.", - "categories": [ - "Minimalism", - "Typography", - "Navigation", - "Whitespace", - "Professional" - ], - "visual_characteristics": [ - "Light color palette", - "Clean typography", - "Subtle gradient", - "Central alignment", - "Spacious layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/126/screenshot_desktop.png b/src/data/designs/126/screenshot_desktop.png deleted file mode 100644 index cc0e401af191c6ec3d51ccb5106bbb51697dc313..0000000000000000000000000000000000000000 --- a/src/data/designs/126/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a890a7d3d9e8bfad260e071d3f09119ea583373b62cbe0d2e01cb51a3b4a9219 -size 522017 diff --git a/src/data/designs/126/screenshot_mobile.png b/src/data/designs/126/screenshot_mobile.png deleted file mode 100644 index f069295d5497326156cb139cdb4c1c82e676d910..0000000000000000000000000000000000000000 --- a/src/data/designs/126/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c366d1f82620c41fe9c29e9c84e8a4cd736efd61085dd639981edfa366e676ac -size 343854 diff --git a/src/data/designs/126/style.css b/src/data/designs/126/style.css deleted file mode 100644 index f4999827311b9973d46dd80975cd109a7c24976c..0000000000000000000000000000000000000000 --- a/src/data/designs/126/style.css +++ /dev/null @@ -1,179 +0,0 @@ -/* css Zen Garden submission 126 - 'C-Note', by Brian Williams, http://www.ploughdeep.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Brian Williams */ -/* Added: Sept. 16th, 2004 */ - -/* 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. */ - - - - - -/*Portrait of Benjamin Franklin adapted from the U.S. 100 dollar bill; -the intaglio for which was originally made by Thomas Hipschen, Master -Engraver for the U.S. Bureau of Engraving and Printing.*/ - -/*--------------------------------------- - GRID - ---------------------------------------*/ -body { - margin:0; - padding:0;} -.page-wrapper { - position:absolute; - width:100%;} -header { - width:918px; - height:320px;} -.summary { - position:absolute; - top:202px; - left:296px; - width:246px; - height:118px;} -.summary p:last-child { - position:absolute; - top:-28px; - left:324px; - width:150px; - padding:63px 0 50px 0; - z-index:3;} -.preamble {padding-top:35px;} -.preamble, .supporting { - margin-left:185px; - width:410px; - position:relative; - /*\*/left:185px; - margin-left:0;/**/} -.preamble p:nth-child(2) { - position:absolute; - top:35px; - left:-170px; - float:left;} -footer { - padding:80px 0; - text-align:center;} -.sidebar { - position:absolute; - top:238px; - left:620px; - width:480px; - z-index:1;} -.sidebar .wrapper { - width:155px; - position:relative; - top:116px;} -/*--------------------------------------- - IMAGES - ---------------------------------------*/ -body {background:url(masthead.jpg) repeat-x;} -.page-wrapper {background:url(sidebody.gif) repeat-y;} -.intro {background:url(logo-on-sunburst.jpg) no-repeat;} -header {background:url(PoorRichard.jpg) no-repeat;} -.summary {background:url(quickSummary.gif) no-repeat;} -.summary p:last-child {background:url(serial.gif) no-repeat;} -.preamble h3 {background:url(preamble-h3.gif) no-repeat;} -.preamble p:nth-child(2) {background:url(preamble-p1.gif) no-repeat;} -.explanation h3 {background:url(explanation-h3.gif) no-repeat;} -.participation h3 {background:url(participation-h3.gif) no-repeat;} -.benefits h3 {background:url(benefits-h3.gif) no-repeat;} -.requirements h3 {background:url(requirements-h3.gif) no-repeat;} -.sidebar {background:url(watermark.png) top right no-repeat;} -.design-selection h3 {background:url(lselect-h3.gif) no-repeat;} -.design-archives h3 {background:url(larchives-h3.gif) no-repeat;} -.zen-resources h3 {background:url(lresources-h3.gif) no-repeat;} -/*--------------------------------------- - TYPOGRAPHY - ---------------------------------------*/ -body { - font:76% Arial, Helvetica, sans-serif; - color:#6C7A70;} -h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dt, dd { - margin:0; - padding:0; - list-style-type:none;} -h3 {overflow:hidden;} -h3, .preamble p:nth-child(2) { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -h1, h2, .summary p:first-child{ - position:absolute; - top:-500px;} -p { - line-height:2em; - text-indent:1em; - text-align:justify;} -a { - text-decoration:underline; - color:#728569;} -a:hover { - text-decoration:underline; - color:#900 !important;} -a:visited { - text-decoration:underline; - color:#6C7A70;} -.summary p:last-child { - line-height:normal; - text-indent:0; - text-align:left; - letter-spacing:1px; - text-transform:lowercase; - font-variant:small-caps; - font-size:10px; - voice-family: "\"}\""; - voice-family:inherit; - font-size:12px;} -.supporting p {margin:5px 0;} -.preamble p:nth-child(2) { - height:0; - padding-top:200px; - width:155px;} -.preamble h3, .supporting h3 { - height:20px; - margin-bottom:8px; - voice-family: "\"}\""; - voice-family:inherit; - height:0; - padding-top:20px;} -.explanation h3 { - height:0; - padding-top:25px;} -.supporting div {margin-top:20px;} -.sidebar .wrapper div {margin-top:10px;} -.sidebar .wrapper ul { - margin-top:-110px; - /*\*/margin-top:0;/**/} -.sidebar li { - padding:10px 0; - color:#909989; - letter-spacing:1px;} -.sidebar .wrapper h3 { - height:10px; - h\eight:0; - padding-top:10px;} -.design-selection { - font-variant:small-caps; - text-align:right;} -.design-selection a { - display:block; - text-align:left; - font:1.1em Georgia, serif; - font-variant:normal;} -.design-selection a.designer-name, .design-archives, .zen-resources, footer { - display:inline; - font-family:Arial, Helvetica, sans-serif; - text-transform:lowercase; - font-variant:small-caps; - text-decoration:none; - font-size:.8em; - voice-family: "\"}\""; - voice-family:inherit; - font-size:1.0em;} -.design-archives, .zen-resources, footer { - display:block; - letter-spacing:0px;} \ No newline at end of file diff --git a/src/data/designs/127/metadata.json b/src/data/designs/127/metadata.json deleted file mode 100644 index 92d7d3570db982d0ada12142ffa6e3a999c7c93b..0000000000000000000000000000000000000000 --- a/src/data/designs/127/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "127", - "url": "https://www.csszengarden.com/127", - "css_url": "https://www.csszengarden.com/127/127.css", - "description": "The design is vibrant and artistic, featuring a colorful palette dominated by blues, pinks, and greens. It incorporates abstract floral motifs and dynamic shapes, giving it a lively, playful aesthetic. The typography is bold and varied, combining sans-serif fonts with distinct styles for headings and body text. The composition is dynamic, with a mix of horizontal and vertical elements, creating a sense of movement across the page.", - "categories": [ - "Artistic", - "Floral", - "Playful", - "Abstract", - "Dynamic" - ], - "visual_characteristics": [ - "Vibrant colors", - "Abstract motifs", - "Bold typography", - "Dynamic layout", - "Playful design" - ] -} \ No newline at end of file diff --git a/src/data/designs/127/screenshot_desktop.png b/src/data/designs/127/screenshot_desktop.png deleted file mode 100644 index 8368317b63d9bff84510a93cc0b2c2f75b122211..0000000000000000000000000000000000000000 --- a/src/data/designs/127/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9af0333b406f1574543e9e3da588a40ce766704b791833bd7f5bcb65806396b9 -size 486927 diff --git a/src/data/designs/127/screenshot_mobile.png b/src/data/designs/127/screenshot_mobile.png deleted file mode 100644 index ccc099c0f9710c0e4b8ffcdf34b4f4fa5ee658a7..0000000000000000000000000000000000000000 --- a/src/data/designs/127/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:eed5c5be5f4736d62deb8b68d5866f8e77cb3acffc4a43bf5c85f70864c7c181 -size 754054 diff --git a/src/data/designs/127/style.css b/src/data/designs/127/style.css deleted file mode 100644 index 5ed9b8464e7cf0dcb1c8037d68e35c2dedd61a24..0000000000000000000000000000000000000000 --- a/src/data/designs/127/style.css +++ /dev/null @@ -1,253 +0,0 @@ -/* css Zen Garden submission 127 - 'Vivacity', by Soso, http://soso.2037.org/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Soso */ -/* Added: Oct. 21st, 2004 */ - -/* 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. */ - - - -/****************************** - General page elements -******************************/ - html, body { - height: 100%; - margin: 0; - padding: 0; - font-family: Georgia, 'Trebuchet MS', Verdana, 'Times New Roman', Times, serif; - font-size: 10pt; - font-style: italic; - color: #000; - letter-spacing: 1px; - } - html { - background: #6CAADD url('bg.png') top left repeat-x fixed; - } - h1, h2 { - margin: 0; - padding: 0; - } - - a:link, a:visited { - background-color: #91D434; - color: #fff; - text-decoration: none; - } - a:hover { - background-color: #5DBEE4; - } - a:focus, a:active { - background-color: #999 !important; - color: #fff !important; - } - abbr, abbr { - cursor: help; - } -/***************** - Page body -******************/ - .page-wrapper { - background: #fff url('bg_container.png') bottom right no-repeat; - position: absolute; - left: 10%; - width: 778px; - min-height: 100%; - padding: 5px; - min-width: 778px; - border-left: 2px solid #BA41C3; - border-right: 2px solid #F386FB; - padding-bottom: 150px; - } - header { - width: 776px; - height: 229px; - background-image: url('logo.png'); - margin: 0 auto; - } - header h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .summary { - width: 190px; - float: right; - padding: 5px; - min-width: 200px; - margin-top: 15px; - } - div > .summary { - margin: 0; - } - .summary p { - letter-spacing: 2px; - color: #999; - text-align: center; - } - .summary p:first-child { - background: url('bg_quickSummary.png') bottom right no-repeat; - min-height: 125px; - } - .preamble { - background: url('bg_preamble.png') bottom center no-repeat; - padding: 5px; - min-height: 270px; - margin-top: 15px; - } - div > .preamble { - margin-top: 0; - } - .preamble h3 { - width: 500px; - height: 40px; - background: url('road_to_enlightenment.png') top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .explanation h3 { - width: 500px; - height: 40px; - background: url('what_is_this_about.png') top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .supporting { - margin-top: -10px; - float: left; - width: 570px; - } - div > .supporting { - margin-top: -26px; - } - .explanation { - background: url('bg_explanation.png') top right no-repeat; - } - .participation { - background: url('bg_participation.png') bottom left no-repeat; - } - .participation h3 { - width: 500px; - height: 40px; - background: url('participation.png') top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .benefits { - background: url('bg_benefits.png') bottom right no-repeat; - } - .benefits h3 { - width: 500px; - height: 40px; - background: url('benefits.png') top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .requirements { - background: url('bg_requirements.png') bottom left no-repeat; - } - .requirements h3 { - width: 500px; - height: 40px; - background: url('requirements.png') top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - footer { - text-align: right; - padding-right: 15px; - } -/****************** - Right menu -*******************/ - .sidebar { - float: right; - width: 200px; - margin-top: -10px; - } - - .design-selection h3, .design-archives h3, .zen-resources h3 { - width: 200px; - height: 40px; - margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .design-selection ul, .design-archives ul, .zen-resources ul { - list-style-type: none; - margin: 0; - padding: 0; - } - .design-selection ul li, .design-archives ul li, .zen-resources ul li { - width: 200px; - background: url('bg_li.png') top left; - display: block; - border-top: 1px solid #B942C0; - text-align: center; - padding: 3px 0; - color: #9C26A3; - } - .design-selection ul li:hover, .design-archives ul li:hover, .zen-resources ul li:hover { - background: url('bg_li_hover.png') top left; - border-top: 1px dashed #B942C0; - } - - .design-selection { - border-top: 2px solid #B942C0; - background-color: #F287F8; - } - .design-selection ul li { - min-height: 40px; - } - .design-selection h3 { - background: url('select_a_design.png') top left no-repeat; - } - .design-selection ul li a, .design-selection ul li a:visited { - display: block; - background-color: transparent; - } - .design-selection ul li a:hover { - color: #5C99E4; - } - .design-selection a.designer-name { - display: inline; - } - .design-archives { - background-color: #F287F8; - } - .design-archives h3 { - background: url('archives.png') top left no-repeat; - } - .design-archives ul li a, .design-archives ul li a:visited, .zen-resources ul li a, .zen-resources ul li a:visited { - background-color: transparent; - } - .design-archives ul li a:hover { - color: #779B31; - } - .zen-resources { - background-color: #F287F8; - border-bottom: 2px solid #B942C0; - } - .zen-resources h3 { - background: url('resources.png') top left no-repeat; - } - .zen-resources ul li a,.zen-resources ul li a:visited { - background-color: transparent; - } - .zen-resources ul li a:hover { - color: #BB8724; - } \ No newline at end of file diff --git a/src/data/designs/128/metadata.json b/src/data/designs/128/metadata.json deleted file mode 100644 index 7916240765d86c1e2692a51e1cf0156b84358a61..0000000000000000000000000000000000000000 --- a/src/data/designs/128/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "128", - "url": "https://www.csszengarden.com/128", - "css_url": "https://www.csszengarden.com/128/128.css", - "description": "The design features a clean, structured layout with a strong emphasis on typography and harmonious color coordination. The use of bright blues and greens against a crisp white background creates a lively and engaging aesthetic. The design elements, such as distinct text sections and bold heading styles, contribute to clear visual hierarchy, making it easy to navigate and read. Accent colors, along with a minimalistic icon, add personality and charm to the otherwise professional and modern design.", - "categories": [ - "Professional", - "Modern", - "Clean", - "Typography" - ], - "visual_characteristics": [ - "Bright color palette", - "Distinct text sections", - "Strong visual hierarchy", - "Minimalistic elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/128/screenshot_desktop.png b/src/data/designs/128/screenshot_desktop.png deleted file mode 100644 index 47ed49e0a19e4afcd849b69b5b6cc40edd46ca80..0000000000000000000000000000000000000000 --- a/src/data/designs/128/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:08bd8b5db703f0c96d4ea83280ba3b07670863921eb7480ed216f6547549d455 -size 332024 diff --git a/src/data/designs/128/screenshot_mobile.png b/src/data/designs/128/screenshot_mobile.png deleted file mode 100644 index c99a9b3e41536350812adae91c941b53210cf86c..0000000000000000000000000000000000000000 --- a/src/data/designs/128/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8c2bc5dbab5e010dad1f53448106f50d71a8d38ce9c37848a0db93bbff5aa66a -size 342286 diff --git a/src/data/designs/128/style.css b/src/data/designs/128/style.css deleted file mode 100644 index 738e5ad21c02f350e14de7976f7606f6c9b0bd28..0000000000000000000000000000000000000000 --- a/src/data/designs/128/style.css +++ /dev/null @@ -1,265 +0,0 @@ -/* css Zen Garden submission 128 - 'Dragen', by Matthew Buchanan, http://www.cactuslab.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Matthew Buchanan */ -/* Added: Oct. 21st, 2004 */ - -/* 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. */ - - -/* - Makes use of Alternate Box Model Hacks as described by Edwardson Tan: - http://www.info.com.ph/~etan/w3pantheon/style/abmh.html - - Makes use of Phark Revisited image replacement as described by Dave Shea: - http://www.mezzoblue.com/tests/revised-image-replacement/ - - Tested and 100% compatible with: - Internet Explorer 5.01+ (Win) - Firefox 0.9.3 (Win) - Opera 7.5.3 (Win) - Safari 1.2.3 (Mac) - Netscape 7.1 (Mac) - - Very minor issue found with: - Internet Explorer 5.2.3 (Mac) - - Toy Dragon image by Maartje van Caspel, via iStockPhoto.com - http://www.vancaspelenvdr.nl/portfolio/ - http://www.istockphoto.com/user_view.php?id=127925 -*/ - -/* Document Styles */ - -body { - background: #ccc; - font: normal 10px/16px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif; - color: #666; - margin: 15px; - text-align: center; /* For IE */ - } - -p { - margin: 0 0 5px 0; - } - -p:nth-child(2) { - font-size: 13px; - line-height: 20px; - } - -h3 { - color: #18d; - font-size: 10px; - font-weight: normal; - text-transform: uppercase; - margin: 30px 0 2px 0; - } - -a:link, a:visited { - color: #9c0; - text-decoration: none; - } - -a:hover, a:active { - color: #fff; - background: #9c0; - } - -ul { - margin: 0; - padding: 0 23px 10px 27px; - list-style: none; - line-height: 1.2em; - } - -li { - padding-bottom: 7px; - } - -abbr { - font-style: normal; - border-bottom: 1px dotted #666; - } - -/* Container Styles */ - -.page-wrapper { - position: relative; - width: 720px !important; - width /**/: 750px; - background: #fff url(container_bg.gif) repeat-y; - border: 15px solid #fff; - margin: 0 auto; - padding: 0; - text-align: left; /* For IE, see above */ - } - -/* Intro Styles */ - -header { - width: 720px; - height: 220px; - background: #18d url(title.jpg) no-repeat; - } - -header h1, header h2 { - text-indent: -999em; - margin: 0; - } - -.summary { - width: 720px; - height: 39px; - border-top: 1px solid #fff; - background: #147; - } -.summary p:first-child { - position: absolute; - left: -999em; - } - -.summary p:last-child { - width: 141px !important; - width /**/: 168px; - height: 33px !important; - height /**/: 44px; - color: #6cf; - margin: 0; - padding: 6px 107px 0 27px; - border-right: 1px solid #fff; - font-size: 11px; - line-height: 1.2; - } - -.summary a:link, .summary a:visited { - text-decoration: none; - text-transform: uppercase; - color: #fff; - } - -.summary a:hover, .summary a:active { - text-decoration: underline; - background: transparent; - } - -/* Supporting Text Styles */ - -.preamble, .explanation, .participation, .benefits, .requirements { - margin: 0 50px 0 320px; - } - -footer { - width: 708px !important; - width /**/: 720px; - height: 24px !important; - height /**/: 30px; - background: #18d; - margin-top: 15px; - padding: 6px 12px 0 0; - border-top: 1px solid #fff; - text-align: right; - } - -footer a:link, footer a:visited { - text-transform: uppercase; - color: #fff; - } - -footer a:hover, footer a:active { - color: #18d; - background: #fff; - } - -/* Link List Styles */ - -.sidebar { - position: absolute; - top: 260px; - left: 0px; - width: 275px; - border-bottom: 1px solid #fff; - } - -.sidebar h3 { - text-indent: -1100px; - height: 45px; - margin: 0; - } - -.sidebar a:link, .sidebar a:visited { - font-size: 11px; - color: #fff; - } - -.sidebar a:hover, .sidebar a:active { - background: #fff; - } - -.sidebar a.designer-name { - font-size: 10px; - } - -.sidebar abbr { - border-bottom: none; - } - -.design-selection, #lfavorites { - border-top: 1px solid #fff; - background: #18d; - } - -.design-selection h3 { - background: url(select.gif); - } - -#lfavorites h3 { - background: url(favourites.gif); - } - -.design-selection li, #lfavorites li { - color: #6cf; - background: url(select_bg.gif) repeat-x left bottom; - } - -.design-selection a:hover, .design-selection a:active, #lfavorites a:hover, #lfavorites a:active { - color: #18d; - } - -.design-archives { - border-top: 1px solid #fff; - background: #9c0; - } - -.design-archives h3 { - background: url(archives.gif); - } - -.design-archives li { - color: #cf3; - background: url(archives_bg.gif) repeat-x left bottom; - } - -.design-archives a:hover, .design-archives a:active { - color: #9c0; - } - -.zen-resources { - border-top: 1px solid #fff; - background: #d8c; - } - -.zen-resources h3 { - background: url(resources.gif); - } - -.zen-resources li { - color: #fcc; - background: url(resources_bg.gif) repeat-x left bottom; - } - -.zen-resources a:hover, .zen-resources a:active { - color: #d8c; - } \ No newline at end of file diff --git a/src/data/designs/129/metadata.json b/src/data/designs/129/metadata.json deleted file mode 100644 index acca46cda3817dcec2edadeef445427b68f936f5..0000000000000000000000000000000000000000 --- a/src/data/designs/129/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "129", - "url": "https://www.csszengarden.com/129", - "css_url": "https://www.csszengarden.com/129/129.css", - "description": "This design is an eclectic mix of retro and playful styles, featuring a vibrant blue floral patterned background and a central notebook-styled layout. The typography varies in style and color, adding a dynamic and informal feel, while distinct sections are set off by colored borders. The design conveys a sense of nostalgia and creativity, ideal for capturing an artistic or unconventional audience.", - "categories": [ - "Retro", - "Playful", - "Nostalgia", - "Eclectic", - "Artistic" - ], - "visual_characteristics": [ - "Vibrant colors", - "Floral patterns", - "Notebook layout", - "Whimsical typography", - "Colored borders" - ] -} \ No newline at end of file diff --git a/src/data/designs/129/screenshot_desktop.png b/src/data/designs/129/screenshot_desktop.png deleted file mode 100644 index 4ccac3b58800eebcb8c4a2b33e316b0f13951bad..0000000000000000000000000000000000000000 --- a/src/data/designs/129/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b1eddf8c988cc3481ab3c9d1b2d929a7e8a7d5140c4773bcad0b2eeb138affb3 -size 1182195 diff --git a/src/data/designs/129/screenshot_mobile.png b/src/data/designs/129/screenshot_mobile.png deleted file mode 100644 index 229d5d545fbc73f1e32d7f13d5c6a78063069db4..0000000000000000000000000000000000000000 --- a/src/data/designs/129/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c92b4e264824bd7f16ac499b76641f350e7dc2838de7b6ea674a53036776d5f2 -size 421360 diff --git a/src/data/designs/129/style.css b/src/data/designs/129/style.css deleted file mode 100644 index 0732ab919c2560216a389637d37ad8ee7f8cda0a..0000000000000000000000000000000000000000 --- a/src/data/designs/129/style.css +++ /dev/null @@ -1,364 +0,0 @@ -/* css Zen Garden submission 129 - 'Geocities 1996', by Bruce Lawson, https://www.brucelawson.co.uk/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* Added: Apr. 1st, 2023 */ - -/* 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. */ - - - - /* Bruce Lawson www.brucelawson.co.uk - images public domain - - Inspired by Guinness, boredom, a desire to hone my css skills and a stupid sense of humour. - Ah, to be hired by Microsoft to do their CSS redesign, eh? It could be just like this! - - More about the making of at www.brucelawson.co.uk/garden - - Thanks to Matt Machell, www.eclecticdreams.com, for answering my stupid css questions. - - First up, here's the global styles of gorgeousness */ - - /* Tweaked 8 May 2021 -the 18th birthday of the Zen Garden - to resurrect this design, as Dave Shea changed some of the ID and class names so the CSS broke. Other than that, it's as it was when I made it in 2003. */ - - html {background: #88D2FB url('zenimages/flower1.gif') fixed; } - - body { font-family: "Comic Sans MS", "Lucida Handwriting", cursive; - background:white; - position:relative; - max-width:800px; margin:0 auto;} - - acronym {text-decoration: none;} /*how the f**k do you kill this in Moz? */ - - h1, h2, h3, h4 {font-family: "Lucida Handwriting", cursive} - - a:hover { - background: url('zenimages/bugging.gif') no-repeat center; - } - - /* ooh! centered */ - - #zen-container { - position: relative; - text-align: center; - width: 760px; - margin: 0px auto 55px; - color: #333333; - } - - .page-wrapper { background: url('zenimages/strip19.gif') repeat-y; - padding: 20px 20px 105px 60px;} - - /*main loveliness in almost same order as html*/ - - #zen-pageHeader { - width:90%; - height: auto; - margin-bottom: 20px; - } - - - h1 { - background: url('zenimages/csszengarden.jpg') no-repeat left; - padding-top: 20px; - height: 80px; - margin: 0px auto; - text-align: left; color:transparent; - } - - #zen-pageHeader h1 span { - margin-left:-5000px;} - - h2 { - text-decoration: none; - height:auto; - color: black; - text-align: center; - background: url('zenimages/lovely-divider.gif') no-repeat center; - } - - - #zen-summary { - text-align: left; - height:160px; - background: url('zenimages/abcdone4.gif') no-repeat; - padding-left: 185px; - margin-left: 20px; - } - - #zen-quickSummary p.p2 { - font-size: large; /* can increase twice in Moz/ IE without breaking */ - color: #FF0000; - text-decoration: blink; /* curse you, IE, for not blinking !*/ - text-align: center; /* curse you, America, for spelling "centre" wrong */ - } - - - - #zen-preamble { - width: 60%; - float: left; - background: url('zenimages/heyyou.gif') no-repeat right top; - text-align: center; - color: #FF00CC; - font-family:"Comic Sans MS", "Lucida Handwriting"; - padding:80px 10px 10px 10px; - font-weight: bolder; - } - - - - - #zen-preamble h3 { - text-align: center; - color: #00CC66; - } - - - - #zen-explanation {width:60%; float:left; - background: #fff url('zenimages/buzzing-fly.gif') no-repeat 50% 50%; - color: #FF0066; - font-family: "Courier New", Courier, mono; - text-align: left; - border: medium dashed #FF6666; - padding: 10px; - } - - #zen-explanation h3 { - background: url('zenimages/handl.gif') no-repeat right center; - text-align: center; - font-weight: 700; - color: #99CC00; - text-decoration: blink; - } - - - #zen-explanation .p2 { - font-family:Geneva, Arial, Helvetica, sans-serif; - text-transform: capitalize; - color: #660066; - font-style: italic; - padding-left: 85px; - font-weight: 800; - text-align: right; - background: url('zenimages/roses.gif') no-repeat left bottom; - } - - - #zen-participation {clear:both; background: transparent; padding: 8px;} - - - #zen-participation h3 { - background: url('zenimages/participation.gif') no-repeat; - height:90px;color:transparent; - } - - - - #zen-participation p:first-of-type { - background: #fff url('zenimages/broken-picture.gif') no-repeat 15px 15px; - min-height: 160px; - padding-left: 155px; - color: #00FF66; - border: medium solid #CCCCCC; - margin-top:6px; - margin-right: 40%; - cursor: help; - font-family: "Times New Roman", Times, serif; - } - - #zen-participation .p1 a {color:#FF33CC;} - - #zen-participation p:nth-of-type(2) { - font-style: italic; - text-transform: uppercase; - color: #FF0066; - text-align: justify; - margin-right: 40%; - background: #FFFF33 url('zenimages/girltwist.gif') no-repeat right center; - padding-left:30px; padding-right:70px; padding-top:30px; padding-bottom:30px - } - - #zen-participation p:nth-of-type(3) { - background: #000 url('zenimages/madenet1.gif') no-repeat left center; - padding: 10px 10px 10px 170px; - color: #FFFFFF; - text-align: justify; - } - - #zen-participation .p3 a {color:#FFFF00;} - - - - #zen-benefits { - background: url('zenimages/horrid.gif'); - border-top: thick solid #00FFFF; - border-right: thick solid #FF0099; - border-bottom: thick solid #FFFF00; - border-left: thick solid #FF9966; - margin-bottom: 10px; - } - - #zen-benefits h3 {background: url('zenimages/benefits.jpg') no-repeat center center; - height:90px; color:transparent;} - - #zen-requirements { - width:auto; - color: #000; - text-align: justify; - height:250px; - border: medium none; - font-size: large; - padding: 3%; - overflow: scroll; - background: url('zenimages/lily.gif'); - clear: both; - } - - /* dandy faux-buttons in the footer */ - - - footer { - margin-top:15px; - background: url('zenimages/handr.gif') no-repeat 15%; - } - - footer a { - font:bold 15px Arial, Helvetica, sans-serif; - text-decoration: none; - text-align: center; - padding: 5px; - width: 90px; - margin: 10px; - height: 30px; - text-transform: uppercase; - border: thick #CCCC66 outset; - } - - footer a:link { - color: #fff; - background: #CCCC66; - border: outset; - } - - footer a:hover, #zen-footer a:active { - text-transform: uppercase; - color: #FF33CC; - background: #FFFF66 ; - } - - - - /* positions of those tricky abolute positioned bits - haven't compensated for IE, cos (a) I'm lazy and (b) it's not awful */ - - - .design-selection { - width:80% - margin: 20px auto; - } - - .design-selection nav { - background: url('zenimages/hearts.jpg') repeat left; - margin: 10px; - padding: 5px; - width: auto; - border: medium ridge #E4E0FA; - } - - .design-selection h3 { - background: url('zenimages/head1.gif') no-repeat center top; - height:65px; - color:transparent;} - - #zen-lselect h3 span {margin-left: -5000px} - - - .design-selection ul { - cursor: crosshair; list-style-image:url('zenimages/flower.gif'); - font-style:italic; font-variant:small-caps; font-weight:normal; - font-size:x-large; font-family:Times New Roman, Times, serif - } - - - .design-archives { - background: url('zenimages/bg_pulsating_star.gif') repeat; - } - - .design-archives h3 { - background: url('zenimages/archives.gif') no-repeat center; height: 40px; - color:transparent;} - - #zen-larchives h3 span {margin-left:-5000px;} - - .design-archives ul { - list-style-image:url('zenimages/smallwow.gif');} - - .design-archives a {line-height:25px;text-decoration:none;color:#9900FF;} - - .design-archives a:hover { - background: url('zenimages/Arrows.gif') center; - color: black; - cursor: w-resize;} - - .zen-resources { - background: url('zenimages/geocitie.gif') no-repeat center bottom; - padding-bottom: 115px;} - - - .zen-resources h3 { height:145px; - background: url('zenimages/css-resources.gif') no-repeat center; color:transparent;} - - #zen-lresources h3 span {margin-left:-5000px;} - - - .zen-resources ul { - padding-left: 15px; - list-style: url('zenimages/cool3.gif');} - - .zen-resources a {text-decoration:none;color:#FF6600;} - - .zen-resources a:hover { - color: #FAFAE2; - background: url('zenimages/SMALLeyes18.gif') no-repeat center top;} - - - - /*lovely decorative thingies in the order I thought of them*/ - - - .extra1 { - position:absolute; - bottom :40px; - left: 150px; - width:128px; height: 40px; - background: url('zenimages/constr16.gif'); - } - * html #zen-extraDiv1 {bottom:80px;} - - .extra3 { - position:absolute; - bottom :40px; - left:80%; - background: url('zenimages/counter.gif'); - width:91px; height:45px; - } - * html #zen-extraDiv3 {bottom:80px;} - - .extra4 { - position:absolute; - bottom :40px; left:50%; - width:88px; - height:31px; - background-image: url('zenimages/netscapenow.gif');} - * html #zen-extraDiv4 {bottom:80px;} - - .extra5 {position:absolute; - top :360px; left:15%; - width:107px; - height:69px; - background-image: url('zenimages/2hulagirls.gif');} - - /* and that's it. If we could add JavaScript, I'd have added some autoplay midi and a lovely unicorn to follow the mouse. But I can't. Sob. */ diff --git a/src/data/designs/130/metadata.json b/src/data/designs/130/metadata.json deleted file mode 100644 index c9c59aca5eea7a367d2cb17c6a663bc9522e33a9..0000000000000000000000000000000000000000 --- a/src/data/designs/130/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "130", - "url": "https://www.csszengarden.com/130", - "css_url": "https://www.csszengarden.com/130/130.css", - "description": "The visual design features a clean and structured layout with a calming color palette of beige and blue, enhancing readability and ease of navigation. The use of different font styles for headings and body text provides a clear hierarchy, while the sidebar offers easy access to additional resources and options. This design exudes professionalism, making it suitable for educational or informational purposes.", - "categories": [ - "Informational", - "Educational", - "Professional", - "Web Design", - "User Interface" - ], - "visual_characteristics": [ - "Calming color palette", - "Structured layout", - "Clear typography", - "Sidebar navigation", - "Minimalist design" - ] -} \ No newline at end of file diff --git a/src/data/designs/130/screenshot_desktop.png b/src/data/designs/130/screenshot_desktop.png deleted file mode 100644 index 5f3ad4de0bdafc845ce7e507657308dbc6d5cea4..0000000000000000000000000000000000000000 --- a/src/data/designs/130/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:98b929c866524c2373661ae480b02cdfa689fa67e1f8032060284503ef037779 -size 405162 diff --git a/src/data/designs/130/screenshot_mobile.png b/src/data/designs/130/screenshot_mobile.png deleted file mode 100644 index af8c9deac9a47c56349c307bd889afeda7466970..0000000000000000000000000000000000000000 --- a/src/data/designs/130/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6291c60dede9af8e5ecfab4dd6d71d090cc676a159e1c5ce2345a6347f65edc1 -size 324862 diff --git a/src/data/designs/130/style.css b/src/data/designs/130/style.css deleted file mode 100644 index d4357abb1582ab1a0302cd5c229a1e6d38294466..0000000000000000000000000000000000000000 --- a/src/data/designs/130/style.css +++ /dev/null @@ -1 +0,0 @@ -/* css Zen Garden submission 130 - 'Pseudo-Sahara', by John Barrick, http://www.waycoolwebdesign.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2004, John Barrick */ /* Added: Oct. 21st, 2004 */ /* 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. */ /* basic elements */ body { font: 83%/150% verdana, arial; color: #555753; background: #E6CCB3 url(bg_gold-blue-beige.gif) repeat-x top; margin: 0px; padding: 0px; } p { font: 83%/150% verdana, arial; margin-top: 0px; text-align: justify; } h3 { font: normal 100% verdana, arial; letter-spacing: 1px; margin-bottom: 0px; } a:link { font-weight: bold; text-decoration: none; color: #4E7ED1; } a:visited { font-weight: bold; text-decoration: none; color: #4E7ED1; } a:hover, a:active { text-decoration: none; color: #4E7ED1; border-bottom: dotted 1px } /* specific divs */ .page-wrapper { background: url(bg_hdr-csszengarden.jpg) no-repeat top left; padding: 0px; margin: 0px; position: absolute; top: 0px; left: 0px; width: 744px; height: 326px; } .intro { } header { } /* 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; text-indent: 100%; white-space: nowrap; overflow: hidden; } header h2 { display: none; } .summary { position: absolute; top: 175px; left: 26px; width: 178px; height: 150px; color: #000; overflow: auto; } .summary p { font: 83%/133% verdana, arial; text-align: left; letter-spacing: 1px; } .preamble { position: absolute; top: 253px; left: 255px; width: 470px; height: 200px; overflow: auto; } .supporting { position: absolute; top: 466px; left: 255px; width: 470px; } footer { text-align: center; margin-bottom: 11px; font: 83%/150% verdana, arial; } footer a:link, footer a:visited { margin-right: 20px; } .preamble h3 { background: transparent url(bg_hdr_road-to.gif) no-repeat top left; } .explanation h3 { background: transparent url(bg_hdr_what-is-this-about.gif) no-repeat top left; } .participation h3 { background: transparent url(bg_hdr_participation.gif) no-repeat top left; } .benefits h3 { background: transparent url(bg_hdr_benefits.gif) no-repeat top left; } .requirements h3 { background: transparent url(bg_hdr_requirements.gif) no-repeat top left; } .preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { margin: 0px; width: 420px; height: 32px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .explanation, .participation, .benefits, .requirements { margin-bottom: 22px; } .sidebar { background: transparent url(bg_nav-left.gif) top left repeat-y; position: absolute; top: 330px; left: 0px; width: 256px; margin-top: -4px; z-index: 1; } .sidebar .wrapper { font: 82%/150% verdana, arial; margin: 0px; background: transparent url(bg_leftnav_bottom.jpg) bottom left no-repeat; } .sidebar h3.select { background: transparent url(bg_hdr_select-a-design.gif) no-repeat top left; width: 256px; height: 26px; margin-top: 0px; margin-bottom: 11px; margin-left: 0px; margin-right: 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar h3.archives { background: transparent url(bg_hdr_archives.gif) no-repeat top left; width: 256px; height: 26px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar h3.resources { background: transparent url(bg_hdr_resources.gif) no-repeat top left; width: 256px; height: 26px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .design-selection, .design-archives { margin-bottom: 20px; } .design-selection h3, .design-archives h3, .zen-resources h3 { margin-bottom: 11px; } .design-selection ul li, .design-archives ul li, .zen-resources ul li { margin-left: 28px; width: 160px; } .sidebar ul { margin: 0px; padding: 0px; } .sidebar li { line-height: 2.5ex; list-style-type: none; background: transparent url(cr1.gif) no-repeat top center; display: block; padding-top: 5px; margin-bottom: 5px; } .sidebar li a:link { color: #4E7ED1; } .sidebar li a:visited { color: #4E7ED1; } .design-selection ul a { display: block; font-weight: bold; margin-bottom: -2px; } .design-selection ul a.designer-name { display: inline; font-weight: normal; } .design-selection ul a:hover { color: #000; text-decoration: none; border: none; } .zen-resources { background: transparent url(bg_leftnav_bottom.jpg) bottom left no-repeat; padding-bottom: 165px; } \ No newline at end of file diff --git a/src/data/designs/131/metadata.json b/src/data/designs/131/metadata.json deleted file mode 100644 index 01cca339067c560139269300eab4f469c6c46d38..0000000000000000000000000000000000000000 --- a/src/data/designs/131/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "131", - "url": "https://www.csszengarden.com/131", - "css_url": "https://www.csszengarden.com/131/131.css", - "description": "The design features a grunge aesthetic with distressed textures and a muted color palette, creating an artistic and unconventional layout. Typography is used creatively to highlight sections, and the layout emphasizes a structured but non-traditional navigation flow. The use of contrasting colors for text and backgrounds enhances readability and accentuates the design\u2019s unique style.", - "categories": [ - "Grunge", - "Artistic", - "Editorial", - "Experimental", - "Textured" - ], - "visual_characteristics": [ - "Distressed texture", - "Muted color palette", - "Creative typography", - "Contrasting colors", - "Structured layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/131/screenshot_desktop.png b/src/data/designs/131/screenshot_desktop.png deleted file mode 100644 index 3f843a474a9b34c3676dff2b8afd2d6d2e259bc4..0000000000000000000000000000000000000000 --- a/src/data/designs/131/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:227536cc61fc4a79aac895b49142b099cde4315a003347e919577e0d709b4cc2 -size 552142 diff --git a/src/data/designs/131/screenshot_mobile.png b/src/data/designs/131/screenshot_mobile.png deleted file mode 100644 index c05b9add333a0f13679ad464b5c00da835b8d905..0000000000000000000000000000000000000000 --- a/src/data/designs/131/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:be9b38c4fa6a6fde88da32c4b9780e4fe17fb66b4b85557f148385763156d739 -size 110524 diff --git a/src/data/designs/131/style.css b/src/data/designs/131/style.css deleted file mode 100644 index ee6efe0f43b934ff57be5bddf7767d521620fbef..0000000000000000000000000000000000000000 --- a/src/data/designs/131/style.css +++ /dev/null @@ -1,152 +0,0 @@ -/* css Zen Garden submission 131 - 'Type Thing', by Michal Mokrzycki, http://nf.hyperreal.info/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Michal Mokrzycki */ -/* Added: Oct. 21st, 2004 */ - -/* 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. */ - - - -body { - font-family: Georgia, Palatino Linotype, Times, Times New Roman, serif; - color: #fff; background: #fff url(body_back.gif) top left repeat-y; - margin: 0; padding: 0 0 20px 0; } - -/* relative font size */ -body, body div, body p, body th, -body td, body li, body dd { - font-size: small; - voice-family: "\"}\""; - voice-family: inherit; - font-size: medium; } - -html>body, html>body div, html>body p, html>body th, -html>body td, html>body li, html>body dd { - font-size: medium; } - -p { line-height: 80%; margin: 5px 0 10px 0; text-align: justify; font-size: 70%; } -html>body p { font-size: 70%; line-height: 1.2; } - -a:link { - font-weight: bold; color: #FFD200; } -a:visited { - text-decoration: none; color: #FFD200; } -a:hover, a:active { - background: #FFD200; text-decoration: none; color: #000; } - -.page-wrapper { - width: 473px; margin: 0px; } - -.intro { - width: 473px; - } - -.page-wrapper { - width: 473px; - background: url(head.gif) top left no-repeat; } - -header { - width: 291px; height: 259px; - background: url(head_hover.gif) 0 -259px no-repeat; } -header:hover { - background: url(head_hover.gif) 0 0 no-repeat; - cursor: move; } - - -/* hide header text */ -header h1, header h2 { - width: 1px; height: 1px; text-indent: -9000px; margin: 0; } - -.summary { - width: 140px; position: absolute; top: 270px; left: 298px; } -.summary p:first-child { - text-indent: -9000px; width: 1px; height: 1px; - position: absolute; left: -10px; } -.summary p:last-child { - font-weight: bold; } - - -.preamble { - width: 240px; margin-left: 20px; } -.preamble h3 { - width: 237px; height: 17px; margin: 15px 0 0 0; - text-indent: -9000px; background: url(preamble_h3.gif) top left no-repeat; } -#preample p { - margin-top: 0; } - -.supporting { - width: 240px; margin-left: 20px; } - -.explanation h3 { - width: 235px; height: 15px; margin: 10px 0; - text-indent: -9000px; background: url(explanation_h3.gif) top left no-repeat; } - -.participation h3 { - width: 239px; height: 103px; margin: 10px 0; - text-indent: -9000px; background: url(participation_h3.gif) top left no-repeat; } - -.benefits h3 { - width: 234px; height: 14px; margin: 10px 0; - text-indent: -9000px; background: url(benefits_h3.gif) top left no-repeat; } - -.requirements h3 { - width: 234px; height: 15px; margin: 10px 0; - text-indent: -9000px; background: url(requirements_h3.gif) top left no-repeat; } - -footer { - position: absolute; top: 10px; left: 480px; - width: 90px; } -footer a { - display: block; margin-bottom: 1px; border-bottom: 1px solid #f2f2f2; - text-align: right; float: left; width: 50px; font-size: 10px; - font-family: Tahoma, sans-serif; color: #000; clear: left; - font-weight: normal; text-decoration: none; line-height: 20px; } - -.sidebar { - width: 150px; position: absolute; top: 300px; left: 297px; } - -h3.select { - text-indent: -9000px; width: 116px; height: 19px; margin: 20px 0 10px 0; - background: url(select_design.gif) top left no-repeat; } - -h3.archives { - text-indent: -9000px; width: 63px; height: 13px; margin: 20px 0 10px 0; - background: url(archives.gif) top left no-repeat; } - -h3.resources { - text-indent: -9000px; width: 75px; height: 13px; margin: 20px 0 10px 0; - background: url(resources.gif) top left no-repeat; } - -.sidebar ul { - margin: 0; padding: 0; list-style: none; } - -div.design-selection ul li { - font-size: 70%; margin-bottom: 3px; - padding: 2px; background: #63939C; - font-weight: normal; } -div.design-selection ul li:hover { - background: #58828A; } - -div.design-selection ul li a { - display: block; text-decoration: none; padding: 5px 5px 5px 0; - font-size: 100%; color: #60D4E9; - font-family: Tahoma, sans-serif; } -div.design-selection ul li a:hover { - color: #fff; background: none; } - -div.design-selection ul li a.designer-name { - display: inline; font-family: Georgia, serif; - padding: 0; border: 0; color: #fff; font-size: 100%; } - -div.design-archives ul li, div.zen-resources ul li { - margin-bottom: 3px; - padding: 2px; background: #63939C; font-size: 10px; - font-family: Tahoma, sans-serif; font-weight: normal; } -div.design-archives, div.zen-resources { font-size: 10px; } -div.design-archives ul li a, div.zen-resources ul li a { - text-decoration: none; color: #fff; font-weight: normal; } -div.design-archives ul li a:hover, div.zen-resources ul li a:hover { - background: none; } \ No newline at end of file diff --git a/src/data/designs/132/metadata.json b/src/data/designs/132/metadata.json deleted file mode 100644 index 83d43ba24b92c8666ec12d9e83a34a68a2956796..0000000000000000000000000000000000000000 --- a/src/data/designs/132/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "132", - "url": "https://www.csszengarden.com/132", - "css_url": "https://www.csszengarden.com/132/132.css", - "description": "This design features a minimalist and organic aesthetic with a primarily white background, accentuated by a vibrant green color palette symbolizing nature and tranquility. The layout creatively incorporates a tree branch illustration guiding the eye through the vertical text column on the right. Modern and sans-serif typography is used to maintain readability and elegance, reminiscent of a zen-like calm and clarity. The design\u2019s whitespace utilization offers an airy feel, emphasizing the content while adding to the serene mood.", - "categories": [ - "minimalist", - "nature-inspired", - "modern", - "zen-themed", - "typography-focused" - ], - "visual_characteristics": [ - "white background", - "green accents", - "illustrative elements", - "sans-serif typography", - "ample whitespace" - ] -} \ No newline at end of file diff --git a/src/data/designs/132/screenshot_desktop.png b/src/data/designs/132/screenshot_desktop.png deleted file mode 100644 index c577be979d1fd321df651da7efe3817dbf8e700c..0000000000000000000000000000000000000000 --- a/src/data/designs/132/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c73f6ea2a65de4eb884d0265a748dce96965cdd3503668b9ba0ff5e2e02d24f1 -size 519707 diff --git a/src/data/designs/132/screenshot_mobile.png b/src/data/designs/132/screenshot_mobile.png deleted file mode 100644 index 4b9bce55f8bccdf765ac648da03fbbf3893965ef..0000000000000000000000000000000000000000 --- a/src/data/designs/132/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e8fdf098117e9cd196af0d395ac4b917b653e6d763e69a33b2e8ad0bad36d037 -size 361525 diff --git a/src/data/designs/132/style.css b/src/data/designs/132/style.css deleted file mode 100644 index c49d970c46852b5a98ccc30bc3c6445af1d3c888..0000000000000000000000000000000000000000 --- a/src/data/designs/132/style.css +++ /dev/null @@ -1,203 +0,0 @@ -/* css Zen Garden submission 132 - 'Bonsai', by Martin Plazotta, http://martin.plazotta.at/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Martin Plazotta */ -/* Added: Oct. 21st, 2004 */ - -/* 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. */ - - - -body { - margin: 0; - padding: 0; - background: #fff; -} - -h3 { - margin-left: 22px; - margin-top: 20px; - border-bottom: 1px dashed #000; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -p { - font: normal 13px Arial, Helvetica, sans-serif; - color: #000; - padding-left: 22px; - padding-right: 10px; -} -a { - font: normal 13px Arial, Helvetica, sans-serif; - color: #050; - text-decoration: underline; -} -a:visited { - color: #003399; - text-decoration: underline; -} -a:hover { - color:#00CC00; - text-decoration: underline; -} -abbr { - font-weight: bold; - color: #000; - border-bottom:1px dashed #000; - cursor: help; -} -abbr:hover { - color: #050; -} -li { - padding-left: 5px; - margin-left: 10px; - padding-bottom: 1em; - font: normal 13px Arial, Helvetica, sans-serif; - list-style-image: url(listimage.gif); -} - -.page-wrapper { - width: 675px; - margin: 0; - padding: 0; - background: url(container_bg.gif) 0 0 no-repeat; - text-align: left; - float: right; -} - -.intro { - width: 500px; - margin: 0; - padding: 0; - float: right; -} -header { - width: 300px; - height: 195px; - margin: 0; - padding: 0; - background: url(header.gif) 0 0 no-repeat; - float: right; -} -header h1, h2 { - margin-top: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.summary { - width: 200px; - height: 500px; - margin: 0; - padding: 0; - background: url(summary_bg.gif) 0 0 no-repeat; - float: left; -} -.summary p:first-child { - display: none; -} -.summary p:last-child { - margin: 0; - padding: 290px 20px 0 50px; - text-align: right; -} -.preamble { - width: 300px; - height: 345px; - margin: 0; - padding: 0; - background: url(intro_bg.gif) 0 0 no-repeat #C5F7A5; - float: right; -} -.preamble h3 { - height: 24px; - background: url(road.gif) 0 0 no-repeat; - margin-top: 38px; -} - -.supporting { - width: 300px; - margin: 0; - padding: 0; - background: #C5F7A5; - float: right; -} -.explanation h3 { - height: 24px; - background: url(about.gif) 0 0 no-repeat; -} -.participation h3 { - height: 24px; - background: url(participation.gif) 0 0 no-repeat; -} -.benefits h3 { - height: 24px; - background: url(benefits.gif) 0 0 no-repeat; -} -.requirements h3 { - height: 24px; - background: url(requirements.gif) 0 0 no-repeat; -} -footer { - width: 279px; - height: 30px; - padding-top: 8px; - padding-right: 20px; - margin-top: 50px; - margin-bottom: 10px; - background: url(footer.gif) 0 0 no-repeat; - float: right; - text-align: right; - /* Tantek's Hack */ - voice-family: "\"}\""; - voice-family: inherit; - width: 259px; - height: 22px; -} -footer a { - font: normal 13px Arial, Helvetica, sans-serif; - color: #00CC00; - text-decoration: none; -} -footer a:hover { - color:#050; - text-decoration: none; -} - -.sidebar { - position: absolute; - top: 418px; - width: 200px; - margin-left:175px; - padding: 0; - background: url(link_bg.gif) 0 100% no-repeat #A5DBA5; -} -.design-selection h3 { - height: 24px; - background: url(select.gif) 0 0 no-repeat; -} -.design-selection li { - padding-bottom: 0.25em; -} -.design-selection a.designer-name { - font: normal 11px Arial, Helvetica, sans-serif; - display: block; -} -#lfavorites h3 { - height: 24px; - background: url(favorites.gif) 0 0 no-repeat; -} -.design-archives h3 { - height: 24px; - background: url(archives.gif) 0 0 no-repeat; -} -.zen-resources h3 { - height: 24px; - background: url(resources.gif) 0 0 no-repeat; -} \ No newline at end of file diff --git a/src/data/designs/133/metadata.json b/src/data/designs/133/metadata.json deleted file mode 100644 index 26f2c44231eb4ce9942bc4deb6b73bf893efdb7e..0000000000000000000000000000000000000000 --- a/src/data/designs/133/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "133", - "url": "https://www.csszengarden.com/133", - "css_url": "https://www.csszengarden.com/133/133.css", - "description": "The design is characterized by a sophisticated and minimalist aesthetic, utilizing a muted earthy color palette for a calming effect and consistent with its theme of enlightenment and meditation. Features include well-structured and aligned text blocks, with an emphasis on clear typography and subtle decorative elements such as icons and dividers that enhance readability and navigation. The layout is orderly, separating the primary content from a sidebar that aids quick access to related links and resources, while decorative motifs reinforce the tranquil theme of the design.", - "categories": [ - "Minimalist", - "Sophisticated", - "Educational", - "Informational", - "Thematic" - ], - "visual_characteristics": [ - "Muted Earthy Colors", - "Clear Typography", - "Subtle Decoration", - "Structured Layout", - "Thematic Icons" - ] -} \ No newline at end of file diff --git a/src/data/designs/133/screenshot_desktop.png b/src/data/designs/133/screenshot_desktop.png deleted file mode 100644 index 547b5fd9b81aa33e72a5e2e035829861304e4588..0000000000000000000000000000000000000000 --- a/src/data/designs/133/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2464a93cc586827cc14fb4935c0770bc76533fc942a2588d2c206e523a27f425 -size 353298 diff --git a/src/data/designs/133/screenshot_mobile.png b/src/data/designs/133/screenshot_mobile.png deleted file mode 100644 index ce65a234ec3f54edf761eaa79113aade039e8bfe..0000000000000000000000000000000000000000 --- a/src/data/designs/133/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:54f8f8f0b704ec5915058b2aa68a7c806e54b9fe1783a23dc5171353d53fc288 -size 410760 diff --git a/src/data/designs/133/style.css b/src/data/designs/133/style.css deleted file mode 100644 index 11b9435dc26518bcde010993ed8b494921c07c71..0000000000000000000000000000000000000000 --- a/src/data/designs/133/style.css +++ /dev/null @@ -1,242 +0,0 @@ -/* css Zen Garden submission 133 - 'Ordered Zen', by Steve Smith, http://www.orderedlist.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Steve Smith */ -/* Added: Oct. 21st, 2004 */ - -/* 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. */ - - - -/* CSS Document */ -a:link { - color:#8297A7; - text-decoration:underline; -} - -a:visited { - color:#A082A7; -} - -a:hover { - text-decoration:none; -} - -body { - font:x-small/1.4 Tahoma, Verdana, Helvetica, Arial, sans-serif; - background:#FFF url(style/bg.gif) repeat top left; - color:#555040; - margin:0; - padding:0; -} - -.page-wrapper { - margin:0 0 0 45px; - background:#FFF url(style/bg_container.gif) repeat-y top left; - width: 640px !important; - width /**/:650px; /* IE5/Win */ - padding:0 5px; - border-bottom:5px solid #FFF; - position:relative; - font-size:110%; -} - -header { - width:640px; - height:75px; - background:#FFF url(style/page_header.jpg) no-repeat top left; -} - -.summary { - height:125px; - width:640px; - background-color:#FFF; - position:relative; -} - -.summary p { - margin:0; - padding:0; -} - -.summary p:first-child { - position:absolute; - top:0; - left:0; - width:405px; - height:120px; - background:#555040 url(style/quick_summary_p1.jpg) no-repeat top left; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:last-child { - position:absolute; - top:0; - left:410px; - width:230px; - height:120px; - background:transparent url(style/button_html.gif) no-repeat top left; - overflow:hidden; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -.summary p:last-child a { - width:230px; - height:60px; - float:right; - visibility:visible; - text-indent:-9000px; - overflow:hidden; - margin-top:-1.4em; - margin-bottom:1.4em; -} - -header h1, header h2 { - display:none; -} - -.preamble { - margin-right:235px; - padding:5px; - background:#E9E6D9; -} - -.preamble h3 { - margin:0 0 5px; - padding:0; - width:238px; - height:24px; - text-indent:-9000px; - overflow:hidden; - background:transparent url(style/title_the_road.gif) no-repeat top left; -} - -.preamble p { - margin:0 10px 10px; - padding:0; -} - -.preamble p:nth-child(4) { - margin:0 10px 5px; -} - -.supporting { - margin-right:235px; - padding:5px; -} - -.sidebar { - position:absolute; - top:200px; - left:415px; - width:230px; -} - -footer { - margin:0 -240px -5px -5px; - border-top:5px solid #FFF; - background-color:#555040; - padding:10px; - text-transform:uppercase; -} - -footer a { - color:#FFF; - text-decoration:underline; -} - -footer a:hover { - color:#D2DBE2; - text-decoration:none; -} - -.explanation h3, .participation h3, .benefits h3, .requirements h3 { - margin:10px 0 5px; - padding:0; - width:238px; - height:24px; -} - -.explanation h3 { background:transparent url(style/title_so_what.gif) no-repeat top left; } -.participation h3 { background:transparent url(style/title_participation.gif) no-repeat top left; } -.benefits h3 { background:transparent url(style/title_benefits.gif) no-repeat top left; } -.requirements h3 { background:transparent url(style/title_requirements.gif) no-repeat top left; } - -.preamble h3, -.explanation h3, -.participation h3, -.benefits h3, -.requirements h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.design-selection li a, #lfavorites li a {display: block; margin-left:-10px; font-weight:bold;} -.sidebar li a.designer-name, #lfavorites li a.designer-name {float:none; display:inline; margin-left:0; font-weight:normal; font-size:100%;} - -.supporting p { - margin:0 10px 10px; - padding:0; -} - -.sidebar ul { - width:210px; - margin:0 0 10px 15px; - padding:0; -} - -.sidebar li { - padding: 0 0 0 20px; - margin:0 0 5px; - list-style-type:none; - white-space:nowrap; - background: transparent url(style/bullet_normal.gif) no-repeat 0 1px; -} - -.design-selection ul, #lfavorites ul { - width:210px; - margin:0 0 10px 15px; - padding:0; -} - -.design-selection li, #lfavorites li { - padding: 0 0 0 25px; - margin:0 0 5px; - list-style-type:none; - clear:left; - white-space:nowrap; - background: transparent url(style/bullet_styles.gif) no-repeat 0 3px; -} - -.sidebar h3 { - margin:0 0 10px; - background:#6E6855 url(style/link_list_h3.gif) repeat-y top left; - padding:5px 5px 5px 15px; - font-weight:bold; - color:#E9E6D9; - font-size:100%; -} - -abbr { - border-bottom:1px dotted #555040; - cursor:help; -} - -a abbr { - border-bottom:1px dotted #8297A7; -} - -#lfavorites, .design-archives, .zen-resources { - border-top:5px solid #FFF; -} - diff --git a/src/data/designs/134/metadata.json b/src/data/designs/134/metadata.json deleted file mode 100644 index fe4be861169139dd85fbd91c0f6af55d2b30768b..0000000000000000000000000000000000000000 --- a/src/data/designs/134/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "134", - "url": "https://www.csszengarden.com/134", - "css_url": "https://www.csszengarden.com/134/134.css", - "description": "This design features a balanced, columnar layout with a sophisticated use of neutral and earthy tones that create a visually pleasing interface. The typography is clean and contrasting to effectively guide the reader through a hierarchy of information. Subtle textures and a minimalist approach enhance the overall elegance and readability of the design.", - "categories": [ - "Sophisticated", - "Minimalist", - "Textured", - "Professional", - "Classic" - ], - "visual_characteristics": [ - "Neutral color palette", - "Columnar layout", - "Contrasting typography", - "Subtle textures", - "Earthy tones" - ] -} \ No newline at end of file diff --git a/src/data/designs/134/screenshot_desktop.png b/src/data/designs/134/screenshot_desktop.png deleted file mode 100644 index 98f06762aa7999c7a132b7f36d97084e719e5598..0000000000000000000000000000000000000000 --- a/src/data/designs/134/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7811b2dd3e0c5f8a1f1c48dfaca4c7e6549d378b1bc8b6e4e562608dffaa81ba -size 360948 diff --git a/src/data/designs/134/screenshot_mobile.png b/src/data/designs/134/screenshot_mobile.png deleted file mode 100644 index 29070831af9d3e60edef3883932285b6e9dafd21..0000000000000000000000000000000000000000 --- a/src/data/designs/134/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a09938bc8489f621c18609301cd39dd75027a31d9627d468d36d8f1c80930192 -size 343191 diff --git a/src/data/designs/134/style.css b/src/data/designs/134/style.css deleted file mode 100644 index 896f601a5550f51c482ca4bbaf4bfc4416f09504..0000000000000000000000000000000000000000 --- a/src/data/designs/134/style.css +++ /dev/null @@ -1,85 +0,0 @@ -/* css Zen Garden submission 134 - 'El Collar de Tomas', by Maria Stultz, http://www.mqstudio.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Maria Stultz */ -/* Added: Oct. 21st, 2004 */ - -/* 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. */ - - - -body {margin: 0; padding: 0; background: #d17415 url(img/bodybg.gif) 748px 0 repeat-y; font: normal 12px/140% "Trebuchet MS", Verdana, Arial, sans-serif;} -p {margin: 0; padding: 0;} -h3 {margin: 0; padding: 0; color: #900; font-size: 12px;} -ul {list-style: none; margin: 0; padding: 0;} -a {text-decoration: none;} -abbr {font-weight: bold; font-style: normal; border-width: 0;} -.sidebar abbr {font-weight: normal;} -.page-wrapper {width: 748px; background: #ffeed6 url(img/containerbg.gif) repeat-y;} -.extra2 {position: absolute; top: 100px; left: 0; width: 100px; height: 323px; background: url(img/collar.gif) no-repeat;} - -.intro {width: 600px;} -header {height: 100px; background: #807944;} -header h1 {margin: 0 0 0 100px; padding: 0; height: 100px; line-height: 100px; background: #982417 url(img/header.gif) top right no-repeat;} -header h1, header h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary {margin-left: 100px; height: 50px; background: url(img/summarybg.jpg) 5px 5px no-repeat;} -.summary p:first-child {height: 41px; line-height: 41px; background: url(img/summarytxt_1.gif) 232px 7px no-repeat; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.extra1 {position: absolute; top: 107px; left: 332px; width: 257px; height: 41px; background: url(img/summarytxt_2.gif) no-repeat;} -.summary p:last-child {position: absolute; top: 423px; left: 0; width: 100px; height: 83px; color: #ffeed6; background: url(img/sample.gif) no-repeat; text-indent: -5000px;} - -.supporting {margin: 0 148px 0 100px; background: #982417 url(img/red.gif) bottom no-repeat; } -.supporting a {color: #f93; font-weight: bold;} -.supporting a:visited {color: #c60; text-decoration: underline;} -.supporting a:hover {color: #f93; text-decoration: underline;} -.supporting p {padding-bottom: 12px;} -.supporting div {color: #fdf3e5; font-size: 11px; margin-left: 157px; margin-right: 30px;} -.preamble, .supporting div.explanation {background: #fdf3e5; color: #333; font-size: 12px; margin-right: 0;} -.preamble {margin-left: 100px; padding: 30px 30px 0 30px; background: #fdf3e5 url(img/preamblebg.gif) 5px 0 no-repeat;} -.supporting div.explanation {padding: 30px 30px 18px 30px; margin-left: 0;} -.preamble p, .explanation p:nth-child(2) {display: inline;} -.explanation p:nth-child(3) {padding-top: 12px;} - -.participation, .benefits, .requirements {padding: 15px 0 3px 0; border-bottom: 1px solid #b76151;} -.participation h3 {width: 102px; left: -122px; background: url(img/participation.gif) no-repeat;} -.benefits h3 {width: 70px; left: -90px; background: url(img/benefits.gif) no-repeat;} -.requirements h3 {width: 107px; left: -127px; background: url(img/requirements.gif) no-repeat;} -.participation h3, .benefits h3, .requirements h3 {height: 17px; line-height: 17px; position: relative;} -.participation h3, .benefits h3, .requirements h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.participation p:nth-child(2), .benefits p:nth-child(2), .requirements p:nth-child(2) {margin-top: -17px;} - -.supporting footer {padding: 20px 0 20px 1.5em; text-transform: uppercase; background: #982417 url(img/bullet.gif) 0 50% no-repeat; margin-right: 0;} -footer a {padding: 0 1.5em 0 0; margin: 0 .5em 0 0; background: url(img/bullet.gif) 100% 50% no-repeat; width: 5%;} - -.sidebar {position: absolute; top: 0; left: 601px; width: 147px; background-color: #76693c;} -.sidebar h3 {text-transform: uppercase; letter-spacing: 2px; line-height: 100%; padding-bottom: 30px;} -.sidebar h3::before {content:".:";} -.sidebar h3::after {content:".";} -.sidebar h3.select {width: 147px; height: 105px; line-height: 105px; background: #5b5962 url(img/select.gif) bottom no-repeat; padding-bottom: 0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar div {color: #dbd2a1; text-align: center; font-size: 11px;} -.sidebar div ul {padding: 0 14px;} -.sidebar div li {display: block; padding: 10px 0; border-bottom: 1px solid #9f916b;} -.sidebar .wrapper a {color: #dbd2a1;} -.sidebar .wrapper a:visited {color: #9f9667;} -.sidebar .wrapper a:hover {color: #fff;} -.design-selection a, #lfavorites a {display: block; font-weight: bold;} -.design-selection a.designer-name, #lfavorites a.designer-name {display: inline; font-weight: normal;} -#lfavorites, .design-archives, .zen-resources {margin-top: -2px; background: #76693c url(img/stone.gif) 60px 70px no-repeat; padding-top: 50px;} diff --git a/src/data/designs/135/metadata.json b/src/data/designs/135/metadata.json deleted file mode 100644 index e8220dcfaad9e58a38c527565ebf5955d1f3f2a7..0000000000000000000000000000000000000000 --- a/src/data/designs/135/metadata.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "id": "135", - "url": "https://www.csszengarden.com/135", - "css_url": "https://www.csszengarden.com/135/135.css", - "description": "This design uses an elegant and traditional aesthetic, with a muted color palette featuring cream and terracotta tones. The use of a patterned background adds texture, while the vertical layout and serif typography provide a classic and sophisticated feel. The design balances text-heavy content with organized sections, making information easily accessible, and its ornate flourishes add a touch of refinement.", - "categories": [ - "Traditional", - "Elegant", - "Text-Heavy", - "Classic" - ], - "visual_characteristics": [ - "Muted Color Palette", - "Vertical Layout", - "Serif Typography", - "Textured Background", - "Ornate Flourishes" - ] -} \ No newline at end of file diff --git a/src/data/designs/135/screenshot_desktop.png b/src/data/designs/135/screenshot_desktop.png deleted file mode 100644 index f950071b93924de723b345af355bd7045f93b716..0000000000000000000000000000000000000000 --- a/src/data/designs/135/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8176a62749038db9833e7fd0a89ad8507ca5cd6d57622be93489e2ec9b2f5682 -size 1337700 diff --git a/src/data/designs/135/screenshot_mobile.png b/src/data/designs/135/screenshot_mobile.png deleted file mode 100644 index 294b772ff787e2aa3e87385b282f68f0f2c1680d..0000000000000000000000000000000000000000 --- a/src/data/designs/135/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2f2aad1e2e0c80c18e2744db8f4fe26233d3204d4c4897797c3051e87d5ea006 -size 820015 diff --git a/src/data/designs/135/style.css b/src/data/designs/135/style.css deleted file mode 100644 index fc86409a4fb8a953e3e2e81a4ec951512b7a2d47..0000000000000000000000000000000000000000 --- a/src/data/designs/135/style.css +++ /dev/null @@ -1,307 +0,0 @@ -/* css Zen Garden submission 135 - 'contemporary nouveau', by David Hellsing, http://www.monc.se/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, David Hellsing */ -/* Added: Oct. 22nd, 2004 */ - -/* 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. */ - - - -/* ________________ general ________________ */ - -body - { - margin: 0; - padding: 0; - background: #554 url(bg.gif); - font: small/1.5em georgia, times, serif; - color: #333331; - text-align: center; - } - -a - { - color: #c50; - text-decoration: none; - border-bottom: 1px solid #dca; - } - -a:visited - { - color: #a86; - border: none; - } - -a:hover - { - color: #000; - border-bottom: 1px solid #333331; - } - -abbr - { - cursor: help; - font-style: normal; - border: none; - } - -h1 - { - display: none; - } - -h2 - { - font-size: 2em; - font-weight: normal; - color: #922; - margin: 0 0 0.7em 0; - padding: 0; - } - -h3 - { - width: 420px; - height: 20px; - margin: 1.2em 0 0.8em 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -p - { - text-indent: 1.5em; - font-size: 88%; - margin: 0 0 0.6em 0; - } - -/* The following hack is to correct paragraph text size in IE/WIN */ - -/* \*/ * html body p { font-size: 80%; } /* */ - - -/* ________________ containers ________________ */ - - -.page-wrapper - { - position: relative; - text-align: left; - margin: 0 auto; - width: 750px; - background: #fff url(main.jpg) repeat-y; - border-bottom: 15px solid #000; - } - -.intro - { - width: 750px; - background: #fff url(main.jpg) repeat-y; - } - -.supporting - { - width: 430px; - margin-left: 30px; - } - -.preamble - { - margin-left: 30px; - width: 430px; - } - -header - { - width: 750px; - height: 250px; - background: #000 url(top.jpg) no-repeat; - } - -.summary - { - position: absolute; - left: 510px; - width: 210px; - background: transparent url(h3-download.gif) no-repeat 0 0; - border-bottom: 1px solid #923b09; - } - -footer - { - margin: 3em 0 0 0; - font: bold 9px/3em tahoma, verdana, sans-serif; - text-transform: uppercase; - letter-spacing: 1px; - padding-bottom: 2em; - } - -.sidebar - { - position: absolute; - top: 320px; - left: 510px; - width: 210px; - margin-right: 30px; - } - -/* ________________ lists & typo ________________ */ - -header h1, -header h2 - { - display: none; - } - -.summary p:last-child - { - text-indent: 0; - font: 10px/16px tahoma, verdana, sans-serif; - color: #efece3; - padding: 5px 17px; - margin: 25px 0 0 0; - background: #bd4d0d url(list-bg.jpg); - border-top: 1px solid #923b09; - } - -.summary p:last-child a - { - color: #efece3; - border: none; - font-weight: bold; - } - -.summary p:last-child a:hover - { - color: #ec9; - } - -.summary p:first-child - { - display: none; - } - -footer a - { - background: #cb9; - padding: 2px 5px; - color: #edb; - border: none; - margin: 0; - } - -footer a:hover - { - background: #000; - border: none; - } - -.sidebar h3 - { - width: 210px; - height: 25px; - margin: 1em 0 0 0; - padding: 0; - } - -.sidebar p, -.sidebar li - { - font: x-small/1.6em tahoma, verdana, sans-serif; - color: #efece3; - text-indent: 0; - } - -.sidebar ul - { - list-style: none; - margin: 0; - padding: 0; - border-top: 1px solid #923b09; - background: #bd4d0d url(list-bg.jpg); - } - -.sidebar li - { - color: #000; - border-bottom: 1px solid #923b09; - line-height: 1.5em; - padding: 0.5em 17px; - } - -.sidebar li:hover - { - background: #b64a0b; - } - -.sidebar li a - { - display: block; - border: none; - color: #f4f0e6; - font-weight: bold; - margin-left: -12px; - padding-left: 12px; - background: url(arrow.gif) no-repeat 0 60%; - } - -.sidebar li a:hover - { - color: #ec9; - background-position: -300px 60%; - } - -.sidebar li a.designer-name - { - display: inline; - padding: 0; - margin: 0; - background: none; - color: #000; - font-weight: normal; - } - -.sidebar li a.designer-name:hover - { - color: #6e2308; - } - -.sidebar .design-archives li, -.sidebar .zen-resources li, -.sidebar #lfavorites li - { - padding: 0.5em 0; - } - -.sidebar .design-archives li a, -.sidebar .zen-resources li a, -.sidebar #lfavorites li a - { - background: transparent url(bullet.gif) no-repeat 5px 60%; - display: inline; - padding-left: 17px; - margin: 0; - } - -.sidebar .design-archives li a:hover, -.sidebar .zen-resources li a:hover, -.sidebar #lfavorites li a:hover - { - background-position: -295px 60%; - } - -h3.select { background: transparent url(h3-select.gif) no-repeat;} -h3.resources { background: transparent url(h3-resources.gif) no-repeat;} -h3.archives { background: transparent url(h3-archives.gif) no-repeat; } -h3.favorites { background: transparent url(h3-favorites.gif) no-repeat; } - -.preamble h3 { background: url(h3-theroad.gif) no-repeat; margin-top: 0; } -.explanation h3 { background: url(h3-sowhat.gif) no-repeat; } -.participation h3 { background: url(h3-participation.gif) no-repeat; } -.benefits h3 { background: url(h3-benefits.gif) no-repeat; } -.requirements h3 { background: url(h3-requirements.gif) no-repeat; height: 23px; margin-bottom: 0.7em; } \ No newline at end of file diff --git a/src/data/designs/136/metadata.json b/src/data/designs/136/metadata.json deleted file mode 100644 index aabd975d4c7b047465f61d45c5994a34636e24d0..0000000000000000000000000000000000000000 --- a/src/data/designs/136/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "136", - "url": "https://www.csszengarden.com/136", - "css_url": "https://www.csszengarden.com/136/136.css", - "description": "This visual design embraces a Halloween theme with a dark and eerie aesthetic, characterized by a vivid contrast between a black background and blood-red highlights. The imagery of a pumpkin and drops of blood create a dramatic focal point, while the use of red text on black further enhances the spooky and mysterious mood. The layout is clean, with well-organized text blocks, allowing for easy navigation and a cohesive flow. The dark design communicates themes of mystery and elegance, appealing to audiences who appreciate gothic or suspenseful visuals.", - "categories": [ - "Halloween Theme", - "Dark Aesthetic", - "Eerie Mood", - "Bold Contrast", - "Gothic Style" - ], - "visual_characteristics": [ - "Black and Red Color Palette", - "Pumpkin Imagery", - "Blood Splatter Accent", - "Clean Layout", - "Gothic Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/136/screenshot_desktop.png b/src/data/designs/136/screenshot_desktop.png deleted file mode 100644 index 28515a5ccad43f7b1d87671ef68db48a61e6aeaf..0000000000000000000000000000000000000000 --- a/src/data/designs/136/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1f8895cc9085b46ef5efb5bc730be03f482f57c7a02f1dbb3637a178968db3ad -size 435255 diff --git a/src/data/designs/136/screenshot_mobile.png b/src/data/designs/136/screenshot_mobile.png deleted file mode 100644 index 74c0d6592a7b288bc7da51e9533771f74e423663..0000000000000000000000000000000000000000 --- a/src/data/designs/136/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c1256fc2631ff48e97674a54d2518a4da61a5253b2c45682aedb812b22d0d681 -size 439592 diff --git a/src/data/designs/136/style.css b/src/data/designs/136/style.css deleted file mode 100644 index dbd44636d04a8e6558d2cd9d8871eb2b46a4ec4d..0000000000000000000000000000000000000000 --- a/src/data/designs/136/style.css +++ /dev/null @@ -1,151 +0,0 @@ -/* css Zen Garden submission 136 - 'The Final Ending', by Ray Henry, http://www.reh3.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Ray Henry */ -/* Added: Oct. 29th, 2004 */ - -/* 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 Final Ending */ -/* CSS Zen Garden Halloween Submission */ -/* Author: Ray Henry */ -/* www.reh3.com */ - -* {margin:0;padding:0;} -body {background:#000 url(r3_zen666_bg.jpg) no-repeat top left;} - -/* -Basic Positioning -***********************************************************************************/ -.page-wrapper { - width:770px; - position:relative; -} -header {width:770px;height:215px;} -.summary, .preamble, .supporting { - float:left; - width:423px; -} -.sidebar { - margin:0 0 0 493px; -} -* html .sidebar {margin:-380px 0 0 493px;} /* for IE 5+ PC */ -/* -.intro -***********************************************************************************/ -header { - background:url(r3_zen666_banner_bg.jpg) no-repeat top left; -} -header h1 { - margin:0 0 0 291px; - background:url(r3_zen666_logo.jpg) no-repeat top left; - width:479px; - height:215px; - text-indent:-5000px; -} -header h2 {display:none;} -.summary { - background:url(r3_zen666_qs_bg.jpg) no-repeat top left; - height:120px; - padding:28px 35px 0 35px; -} -.preamble {padding:0 35px 0 35px;} -.summary p, .preamble p { - font-size:11px; - font-family:verdana; - color:#555; - margin:12px 0; -} -.preamble p {line-height:16px;} -.summary a:link, .summary a:active, .summary a:visited {color:#555;} -.summary a:hover {color:#900;} -.preamble h3 { - background:url(r3_zen666_road_bg.jpg) no-repeat top left; - margin:0 0 0 -35px; - width:399px; - height:37px; - text-indent:-5000px; -} -/* -.supporting -***********************************************************************************/ -.supporting {padding:0 35px 0 35px;} -.supporting p { - font-size:11px; - font-family:verdana; - color:#555; - margin:12px 0; - line-height:16px; -} -.supporting a:link, .supporting a:active, .supporting a:visited {color:#555;} -.supporting a:hover {color:#900;} -.explanation h3, .participation h3, .benefits h3, .requirements h3 { - margin:20px 0 0 -35px; - width:399px; - height:37px; - text-indent:-5000px; -} -.explanation h3 {background:url(r3_zen666_about_bg.jpg) no-repeat top left;} -.participation h3 {background:url(r3_zen666_part_bg.jpg) no-repeat top left;} -.benefits h3 {background:url(r3_zen666_ben_bg.jpg) no-repeat top left;} -.requirements h3 {background:url(r3_zen666_req_bg.jpg) no-repeat top left;} -footer { - background:url(r3_zen666_footer_bg.jpg) no-repeat top left; - height:60px; - margin:0 -35px 0 -35px; - padding:240px 0 0 0; - text-align:center; -} -.supporting footer a:link, .supporting footer a:active, .supporting footer a:visited { - margin:0 10px; - color:#900; -} -.supporting footer a:hover {color:#555;} -/* -.sidebar -***********************************************************************************/ -.sidebar { - background:url(r3_zen666_lickList_bg.jpg) no-repeat top left; - padding:1px 0 0 7px; - font-size:10px; - font-family:verdana; - color:#444; -} -.sidebar ul { - margin:0 0 10px 0; - list-style:none; - width:131px; -} -.sidebar ul li { - padding:5px 8px; - border-bottom:1px dashed #333; -} -.design-selection h3, .design-archives h3, .zen-resources h3 { - margin:0; - width:131px; - height:35px; - text-indent:-5000px; -} -.design-selection h3 {background:url(r3_zen666_lselect_bg.jpg) no-repeat top left;} -.design-archives h3 {background:url(r3_zen666_larchive_bg.jpg) no-repeat top left;} -.zen-resources h3 {background:url(r3_zen666_lres_bg.jpg) no-repeat top left;} -.sidebar a:link, .sidebar a:active, .sidebar a:visited {color:#444;} -.sidebar a:hover {color:#900;} -/* -.extra1 -***********************************************************************************/ -.extra1 { - position:fixed; - bottom:0; - left:540px; - background:url(r3_zen666_tombstone.png) no-repeat top left; - width:227px; - height:267px; -} -* html .extra1 {display:none;} /* For IE 5+ PC */ -.extra2, .extra3, .extra4, .extra5, .extra6 {display:none;} \ No newline at end of file diff --git a/src/data/designs/137/metadata.json b/src/data/designs/137/metadata.json deleted file mode 100644 index 0df1101b65596827af3982986726e6501ef6c8d1..0000000000000000000000000000000000000000 --- a/src/data/designs/137/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "137", - "url": "https://www.csszengarden.com/137", - "css_url": "https://www.csszengarden.com/137/137.css", - "description": "The design presents a sleek, unified aesthetic utilizing a blue monochromatic color palette, giving it a modern and tech-centric appeal. Clean, crisp typography paired with visually engaging graphics contribute to its overall appeal, while the structured layout effectively organizes content for easy navigation and readability.", - "categories": [ - "Modern", - "Tech", - "Minimalist", - "Corporate", - "Professional" - ], - "visual_characteristics": [ - "Monochromatic color scheme", - "Structured layout", - "Modern typography", - "High contrast", - "Tech-inspired graphics" - ] -} \ No newline at end of file diff --git a/src/data/designs/137/screenshot_desktop.png b/src/data/designs/137/screenshot_desktop.png deleted file mode 100644 index 938bf8b0429f98008782511a305d97ddb3638758..0000000000000000000000000000000000000000 --- a/src/data/designs/137/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0cd99ba8934f9e953d93e978c3b765a0315fcba17e2bd3e502a394bbfa7d9d22 -size 370995 diff --git a/src/data/designs/137/screenshot_mobile.png b/src/data/designs/137/screenshot_mobile.png deleted file mode 100644 index ec4f524ace98e0753208eb86de6a4db3b139e06a..0000000000000000000000000000000000000000 --- a/src/data/designs/137/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c71e7b8416eff0438b7a1bda316a98bed695b712440835a525a0e0c627750f7b -size 350706 diff --git a/src/data/designs/137/style.css b/src/data/designs/137/style.css deleted file mode 100644 index 375bc73e409e531bbd0b1b2c70d3986e180f8763..0000000000000000000000000000000000000000 --- a/src/data/designs/137/style.css +++ /dev/null @@ -1,348 +0,0 @@ -/* css Zen Garden submission 137 - 'DJ Style', by Ramon Bispo, http://ilhasol.com/bastidores.asp */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Ramon Bispo */ -/* Added: Nov. 29th, 2004 */ - -/* 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. */ - - - - -/* ########################################################################################################## - - css Zen Garden style - 'Dj Style' by Ramon Bispo da Silva (Page) - Rio de Janeiro, Brazil | September - November, 2004 | All Rights reserved - - ########################################################################################################### */ - -/* basic elements */ -body { - font: 12px/17px tahoma, arial; - background: #155970; - margin: auto auto; - padding: 0; - text-align: center; - } - -p { - font: 12px/17px tahoma, arial, sans-serif; - margin: 0 0 17px 0; - } -a:link { - font-weight: bold; - text-decoration: none; - color: #333399; - } -a:visited { - font-weight: bold; - text-decoration: none; - color: #6699FF; - } -a.designer-name:visited { - font-weight: normal; - text-decoration: none; - color: #858686; - } -a:hover, a:active { - text-decoration: underline; - color: #3366CC; - } -ul { - list-style-type: none; - margin: 0; padding: 0; -} - - -/* specific divs */ -.page-wrapper { - width: 762px; - padding: 427px 0 0 0; - position: relative; - margin: auto; - text-align: left; - background: url(pageheader.gif) no-repeat top left; - } - -.intro { - vertical-align: bottom; - } -header { - position: absolute; - top: 0; - left: 0; - padding: 0; - margin: 0; - width: 100%; - height: 425px; - border: 1px solid white; - } - -header h1 { - width: 760px; - height: 430px; - margin: 0px 0px 0px 0px; - padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -header h2 { - padding: 0; margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.summary p:first-child { - display:none; - } - -.summary p:last-child{ - display: block; - position: absolute; - border: 1px solid #ffffff; - top: 400px; - margin-left: 250px; - padding: 0 7px 0 7px; - font-size: 10px; - text-align: center; - color: #ffffff; - text-transform: uppercase; - font-family:Arial, Helvetica, sans-serif; - clear: both; -} - -.summary p:last-child a:link, a:active{ - color:#33eeff; -} - -.summary p:last-child a:hover{ - text-decoration: underline; -} - -.summary p:last-child a:visited{ - color:#33eeff; - text-decoration: line-through; -} - -.preamble { - width: 291px; - float: left; - background: url(bg_preamble.gif) no-repeat; - } - -.preamble h3 { - background: url(header_preamble.gif) no-repeat; - width: 291px; - height: 50px; - margin: 0; - padding: 0; - border-top: 1px solid #ffffff; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.preamble p { - font-family:Arial, Helvetica, sans-serif; - padding: 5px; - color: #155970; - font-size:12px; - text-transform:uppercase; - font-weight:bold; - width: 270px; -} -.preamble p:nth-child(2) { - margin-top: 10px; -} -.supporting { - padding: 0; - margin: -3px 0 40px 0; - background: #33ccff; - border: 1px solid #ffffff; - width: 469px; - float: right; - } -.supporting p { - margin: 9px 17px 17px 24px; - color: #155970; -} -.explanation h3 { - background: url(what_is.gif) no-repeat; - width: 469px; - height: 40px; - margin: 0; - padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.participation h3 { - background: url(participation.gif) no-repeat; - width: 469px; - height: 40px; - margin: 0; - padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.benefits h3 { - background: url(benefits.gif) no-repeat; - width: 469px; - height: 40px; - margin: 0; - padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.requirements h3 { - background: url(requirements.gif) no-repeat; - width: 469px; - height: 40px; - margin: 0; - padding: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -footer { - background: #155970; - border: 1px solid #ffffff; - padding: 0 0 2px 24px; - font-size: 12px; - font-weight:bold; - text-align: center; - text-transform:uppercase; - font-family:Arial, Helvetica, sans-serif; -} - -footer a:link, a:active{ - color: #ffffff; -} - -footer a:hover{ - color: #33eeff; - text-decoration:underline; -} - -footer a:visited{ - color: #ffffff; - text-decoration: line-through; -} - -a.designer-name { - font-weight: normal; -} -.design-selection, .design-archives, .zen-resources { - width: 278px; - clear: left; - padding: 0; - margin: 0; -} -.design-selection { - background: url(select.gif) no-repeat; - border: 1px solid #ffffff; - margin-top: 20px; - padding: 50px 0 0 5px; -} - -.design-selection li a:link, a:active{ - text-decoration:none; - text-transform:uppercase; - font-size:12px; - color:#FFFFFF; -} - -.design-selection li a:hover { - text-decoration:underline; - color: #e9e9e9; -} - -.design-selection a:visited { - color: #155970; - text-decoration:line-through; - text-transform:uppercase; -} - -.design-archives { - background: url(archives.gif) no-repeat; - border: 1px solid #ffffff; - margin-top: 20px; - padding: 50px 0 0 5px; -} - -.design-archives li a:link, a:active{ - text-decoration:none; - text-transform:uppercase; - font-size:12px; - color:#FFFFFF; -} - -.design-archives li a:hover { - text-decoration:underline; - color: #e9e9e9; -} - -.design-archives a:visited { - color: #155970; - text-decoration:line-through; - text-transform:uppercase; -} - -.zen-resources { - background: url(resources.gif) no-repeat; - border: 1px solid #ffffff; - margin-top: 20px; - padding: 50px 0 0 5px; -} - -.zen-resources li a:link, a:active{ - text-decoration:none; - text-transform:uppercase; - font-size:12px; - color:#FFFFFF; -} - -.zen-resources li a:hover { - text-decoration:underline; - color: #e9e9e9; -} - -.zen-resources a:visited { - color: #155970; - text-decoration:line-through; - text-transform:uppercase; -} - -.design-selection h3, .design-archives h3, .zen-resources h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - margin: 0; -} - -.sidebar { - position: absolute; - top: 68em; -} -.sidebar .wrapper ul { - padding: 20px 10px 10px 10px; - display:block; -} -.sidebar li { - margin: 2px 0; -} - diff --git a/src/data/designs/138/metadata.json b/src/data/designs/138/metadata.json deleted file mode 100644 index 89c43dfabc2b5ede9876c48814deaf95d820fc53..0000000000000000000000000000000000000000 --- a/src/data/designs/138/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "138", - "url": "https://www.csszengarden.com/138", - "css_url": "https://www.csszengarden.com/138/138.css", - "description": "The design features a clean, structured layout with a strong focus on typography, using elegant serif fonts for headings, which contrasts well with a minimalistic sans-serif for body text. The color palette is primarily green and white, contributing to a fresh and calming atmosphere. The incorporation of plant imagery enhances the natural and serene theme. Additionally, there's a well-organized navigation bar on the left, providing easy access to various content sections.", - "categories": [ - "Clean", - "Structured", - "Typographic", - "Nature-inspired", - "Minimalistic" - ], - "visual_characteristics": [ - "Serif headings", - "Green and white color scheme", - "Natural imagery", - "Simple navigation", - "Elegant typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/138/screenshot_desktop.png b/src/data/designs/138/screenshot_desktop.png deleted file mode 100644 index abcbe6aece33bfdb9f781758928f755c7c556773..0000000000000000000000000000000000000000 --- a/src/data/designs/138/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b53a9ae10ec892db6f2cbb13fc12bab108c25f56ab3bdaa8d728e2b56ef61659 -size 404708 diff --git a/src/data/designs/138/screenshot_mobile.png b/src/data/designs/138/screenshot_mobile.png deleted file mode 100644 index 78b30c9bb33a8c3c75c4485cca001bc9b2bea870..0000000000000000000000000000000000000000 --- a/src/data/designs/138/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:25c4e0fce4530042b4c0cfe00affb9a72433691ea5195293158050245a2aff4c -size 321982 diff --git a/src/data/designs/138/style.css b/src/data/designs/138/style.css deleted file mode 100644 index 8dfe132fdd603c8514e42c958818a3f5b1921099..0000000000000000000000000000000000000000 --- a/src/data/designs/138/style.css +++ /dev/null @@ -1,75 +0,0 @@ -/* css Zen Garden submission 138 - 'Cube Garden', by Masanori Kawachi, http://www.804case.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Masanori Kawachi */ -/* Added: Nov. 29th, 2004 */ - -/* 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. */ - - - - -body { margin: 0px; padding: 0px; background: url(images/body_bg.gif) left top repeat-y #fff; } -p { font-size: 10px; !important;font-size: 70%; line-height: 133%; font-family: Arial, Helvetica, sans-serif; color: #666; } -h1,h2,h3 { margin: 0px; padding: 0px; } -a { color: #336633; } -abbr { background-color: #FFF7D2; } - -.extra1 { position: absolute; left: 0px; top: 0px; z-index: 1; width: 100%; height: 51px; background: url(images/header_bg.gif) left top repeat-x; } -header h1 { position: absolute; left: 0px; top: 0px; z-index: 2; width: 237px; height: 176px; margin: 0px; padding: 0px; background: url(images/logo.gif) left top no-repeat; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h2 { position: absolute; left: -9999px; } - -.page-wrapper { background: url(images/rightside_top.gif) 0px 0px no-repeat; width: 510px; margin: 51px 0px 0px 237px; padding-top: 24px; } - -.summary { margin-left: 34px; padding-left: 30px; width: 425px !important;width /**/:455px; background: url(images/arrow.gif) left top no-repeat; } -.summary p { margin: 0px 0px 5px 0px; padding: 0px; } - -.preamble { margin: 40px 0px 0px 30px; width: 458px; } -.preamble h3 { width: 458px; height: 0px !important;height /**/:24px; padding-top: 24px; background: url(images/tit_01.gif) left top no-repeat; display: block; overflow: hidden; } -.preamble p { margin: 5px 0px 5px 20px; padding: 0px; } - -.supporting { margin: 25px 0px 0px 30px; width: 458px; background: url(images/leaf.gif) right top no-repeat; } - -.explanation { margin-bottom: 20px; } -.explanation h3 { width: 458px; height: 0px !important;height /**/:24px; padding: 24px 0px 0px 0px; background: url(images/tit_02.gif) left top no-repeat; display: block; overflow: hidden; } -.explanation p { margin: 5px 0px 5px 20px; padding: 0px; } - -.participation { margin-bottom: 20px; } -.participation h3 { width: 458px; height: 0px !important;height /**/:24px; padding-top: 24px; background: url(images/tit_03.gif) left top no-repeat; display: block; overflow: hidden; } -.participation p { margin: 5px 0px 5px 20px; padding: 0px; } - -.benefits { margin-bottom: 20px; } -.benefits h3 { width: 458px; height: 0px !important;height /**/:24px; padding-top: 24px; background: url(images/tit_04.gif) left top no-repeat; display: block; overflow: hidden; } -.benefits p { margin: 5px 0px 5px 20px; padding: 0px; } - -.requirements { margin-bottom: 20px; } -.requirements h3 { width: 458px; height: 0px !important;height /**/:24px; padding-top: 24px; background: url(images/tit_05.gif) left top no-repeat; display: block; overflow: hidden; } -.requirements p { margin: 5px 0px 5px 20px; padding: 0px; } - -footer { margin: 0px 0px 20px 20px; font-size: 10px; !important;font-size: 70%; font-family: Arial, Helvetica, sans-serif; } - -.sidebar { position: absolute; left: 13px; top: 176px; width: 212px; background: url(images/leftside_bg.gif) left top repeat-x; } - -.design-selection { width: 212px; background: url(images/list_bg.gif) left top repeat-y; } -.design-selection h3 { background: url(images/select_tit.gif) left top no-repeat; width: 212px; height: 0px !important;height /**/:35px; padding-top: 35px; display: block; overflow: hidden; } -.design-selection ul { margin: 0px; padding: 0px 0px 0px 4px; list-style-type: none; font-size: 10px; !important;font-size: 70%; font-family: Arial, Helvetica, sans-serif; } -.design-selection li { padding: 13px 5px 13px 5px; margin: 0px; width: 196px !important;width /**/:206px; text-align: center; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #e9e9e9; border-bottom-color: #FFFFFF; display: block; } -.design-selection li:hover { background-color: #fff; } - -.design-archives { width: 212px; background: url(images/list_bg.gif) left top repeat-y; display: block; } -.design-archives h3 { background: url(images/archives_tit.gif) left top no-repeat; width: 212px; height: 0px !important;height /**/:26px; padding-top: 26px; display: block; overflow: hidden; } -.design-archives ul { margin: 0px; padding: 0px 0px 0px 4px; list-style-type: none; font-size: 10px; !important;font-size: 70%; font-family: Arial, Helvetica, sans-serif; } -.design-archives li { padding: 13px 5px 13px 5px; margin: 0px; width: 196px !important;width /**/:206px; text-align: center; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #e9e9e9; border-bottom-color: #FFFFFF; display: block; } -.design-archives li:hover { background-color: #fff; } - -.zen-resources { width: 212px; background: url(images/list_bg.gif) left top repeat-y; display: block; } -.zen-resources h3 { background: url(images/archives_tit.gif) left top no-repeat; width: 212px; height: 0px !important;height /**/:26px; padding-top: 26px; display: block; overflow: hidden; } -.zen-resources ul { margin: 0px; padding: 0px 0px 0px 4px; list-style-type: none; font-size: 10px; !important;font-size: 70%; font-family: Arial, Helvetica, sans-serif; } -.zen-resources li { padding: 13px 5px 13px 5px; margin: 0px; width: 196px !important;width /**/:206px; text-align: center; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #e9e9e9; border-bottom-color: #FFFFFF; display: block; } -.zen-resources li:hover { background-color: #fff; } \ No newline at end of file diff --git a/src/data/designs/139/metadata.json b/src/data/designs/139/metadata.json deleted file mode 100644 index 0cfd675528779ea66a08f02208f2c804fb28fb02..0000000000000000000000000000000000000000 --- a/src/data/designs/139/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "139", - "url": "https://www.csszengarden.com/139", - "css_url": "https://www.csszengarden.com/139/139.css", - "description": "The design features a dark and contrasting layout, using bold colors like red and yellow against a black background to create a visually striking and dramatic effect. The use of typography is varied, with a combination of serif and sans-serif fonts, enhancing the retro and artistic vibe. The design aims to captivate with its complex layering and textured header, establishing a vintage yet edgy atmosphere.", - "categories": [ - "Retro", - "Artistic", - "Typography-focused", - "High Contrast", - "Textured" - ], - "visual_characteristics": [ - "Dark background", - "Bold typography", - "Textured elements", - "Contrasting colors", - "Complex layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/139/screenshot_desktop.png b/src/data/designs/139/screenshot_desktop.png deleted file mode 100644 index aa704d1a2de6b020d55814a21a1b37b1cfab04a5..0000000000000000000000000000000000000000 --- a/src/data/designs/139/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3dfe860f3c905fde052bfa7556f54a69fb264ca0532960f8b76ae868eb7d02e4 -size 502276 diff --git a/src/data/designs/139/screenshot_mobile.png b/src/data/designs/139/screenshot_mobile.png deleted file mode 100644 index 3521d714fdf2fbdf78226a1ad226bd9f07af36da..0000000000000000000000000000000000000000 --- a/src/data/designs/139/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:acff473ccb62ba8bcea76b38a8224e89658f75c728ac4083e54812799046e110 -size 283112 diff --git a/src/data/designs/139/style.css b/src/data/designs/139/style.css deleted file mode 100644 index 57f4bcdea754ca9331df3535c9ae20f1ec3bdf16..0000000000000000000000000000000000000000 --- a/src/data/designs/139/style.css +++ /dev/null @@ -1,163 +0,0 @@ -/* css Zen Garden submission 139 - 'Neat & Tidy', by Oli Dale, http://www.designerstalk.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Oli Dale */ -/* Added: Nov. 29th, 2004 */ - -/* 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. */ - - - -body{ - background-image: url(main_bg.jpg); - background-position: center; - background-position: top; - background-repeat: no-repeat; - background-color: #000000; - margin:0px; - padding:0px; - color:#ffffff; - font-family: Georgia,"Times New Roman", Times, serif; - font-size: 11px; - text-align: center; -} -h1{display: none;} -h2{display: none;} -h3{display: none;} -a{color:#B00707;text-decoration: underline;} -a:visited{color:#B00707;text-decoration: underline;} -a:hover {color:#D6BD15; text-decoration: none;} -a:active {color:#D6BD15; text-decoration: none;} - -abbr { border: none; cursor: help; -font-style: italic;} - -.page-wrapper{ - width:600px; - position: relative; - text-align: justify; - padding:0px; - margin: 0 auto; - height:1641px; - -} - -.preamble{ - background-image: url(quicksumary_header.gif); - background-repeat: no-repeat; - position: absolute; top: 165px; left: 5px; - padding-top:35px; - width:375px; -} -.preamble h3{ - display:none; -} - -.explanation{ -background-image: url(explanation_header.gif); -background-repeat: no-repeat; - position: absolute; top: 390px; left: 5px; - width:375px; - padding-top:35px; - -} -.explanation h3{display: none;} - -.participation{ - background-image: url(participation_header.gif); -background-repeat: no-repeat; - position: absolute; top: 665px; left: 5px; - width:375px; - padding-top:35px; -} - -.participation h3{display: none;} - -.benefits{ - background-image: url(benefits_header.gif); -background-repeat: no-repeat; - position: absolute; top: 980px; left: 5px; - width:375px; - padding-top:35px; -} -.benefits h3{display: none;} - -.requirements{ - background-image: url(requirements_header.gif); -background-repeat: no-repeat; - position: absolute; top: 1115px; left: 5px; - width:375px; - padding-top:35px; -} - -.requirements h3{display: none;} - -footer{ - position: absolute; top: 1590px; left: 5px; - width:375px; -} - - - -.intro{ - width:375px; -} - -header{ -background-image: url(logo.gif); -background-repeat: no-repeat; -width:279px; -height:170px; - -} - -.design-selection{ -text-align: left; - position: absolute; top:950px; right: 0px; -width:189px; -background-image: url(selecter_header.gif); - background-repeat: no-repeat; - padding-top:35px; -} - - -.summary{ -width:185px; - position: absolute; top: 540px; right: 0px; - background-image: url(select_header.gif); - background-repeat: no-repeat; - padding-top:35px; -} - -.design-archives{ - position: absolute; top: 850px; right: 0px; - width:185px; - padding-top:10px; - background-image: url(archives_header.gif); - background-repeat: no-repeat; - padding-top:35px; -} - - - -.zen-resources{ - position: absolute; top: 720px; right: 0px; - width:185px; - padding-top:0px; - background-image: url(resources_header.gif); - background-repeat: no-repeat; - padding-top:35px; -} - - - -li{list-style-type: none;} -ul{padding-top:0px; -padding-left:0px; -padding-right:0px; -padding:0px; -margin:0px; -} - diff --git a/src/data/designs/140/metadata.json b/src/data/designs/140/metadata.json deleted file mode 100644 index 6bf91aca9f110f45273febab602833936870a0b8..0000000000000000000000000000000000000000 --- a/src/data/designs/140/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "140", - "url": "https://www.csszengarden.com/140", - "css_url": "https://www.csszengarden.com/140/140.css", - "description": "The design features a prominent image header with warm orange tones, leading into a structured layout with a soft yellow background for the main text and a muted blue sidebar. The use of contrasting colors and clean typography enhances readability and creates a clear separation between navigation and content areas.", - "categories": [ - "Web Layout", - "Color Contrast", - "Typography", - "Visual Hierarchy" - ], - "visual_characteristics": [ - "Contrasting Colors", - "Strong Header", - "Structured Columns", - "Readable Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/140/screenshot_desktop.png b/src/data/designs/140/screenshot_desktop.png deleted file mode 100644 index b84b7f188bebcbcdc3d23ac0cdf3deeb339ff0b6..0000000000000000000000000000000000000000 --- a/src/data/designs/140/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:60b5efa8116c240f6eb064ac99fb05e3677d844b492258bc26ff3b9d311a3b56 -size 637107 diff --git a/src/data/designs/140/screenshot_mobile.png b/src/data/designs/140/screenshot_mobile.png deleted file mode 100644 index 887cffd873b5c46edfa8d0e663066f43ae6234ba..0000000000000000000000000000000000000000 --- a/src/data/designs/140/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3ae37aa76a8750537f024d2a81cd21df7172c217541e48ee0f013d2be7173f21 -size 312855 diff --git a/src/data/designs/140/style.css b/src/data/designs/140/style.css deleted file mode 100644 index 1df9e1f67fc35c538338dbee7b3ed5a43290c4b3..0000000000000000000000000000000000000000 --- a/src/data/designs/140/style.css +++ /dev/null @@ -1,216 +0,0 @@ -/* css Zen Garden submission 139 - 'The Hall', by Michael Simmons, http://www.thoughtanomalies.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Michael Simmons */ -/* Added: Nov. 29th, 2004 */ - -/* 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. */ - - - - -body { - margin: 0; - background: #444; - font-family: arial, verdana, sans-serif; -} -.page-wrapper { - position: absolute; - left: 50%; - top: 0; - right: auto; - bottom: auto; - margin-left: -390px; - width: 780px; - clear: both; - background: #F5E783 url(linklist_back.jpg) repeat-y 100% 0; - border-left: solid 1px #fff; - border-right: solid 1px #fff; -} -.page-wrapper .intro header { - width: 780px; - height: 311px; - background: url(pageheader_p1.jpg) no-repeat 0 0; -} -.page-wrapper .intro header h1 { - display: block; - margin: 0; - padding: 0; - height: 311px; - text-indent: -2000px; - background: url(pageheader_p2.jpg) no-repeat bottom; -} -.page-wrapper .intro header h2 { display: none; } - -.page-wrapper .intro, .page-wrapper .supporting { - width: 469px; -} - -footer { - position: absolute; - top: 140px; - right: 0; - width: 260px; - text-align: center; -} -footer a { - padding: 9px 0 0 0; - font-family: "Din-Medium", Arial, Helvetica, sans-serif; - text-transform: uppercase; - text-decoration: none; - font-weight: normal; - font-size: 10px; - color: #fff; -} -footer a:hover { - background: url(littlearrow.gif) no-repeat top center; -} - -.page-wrapper .sidebar { - position: absolute; - top: 180px; - right: 0; - width: 260px; - background: url(linklist_bevel.jpg) no-repeat 0 0; -} -.page-wrapper .sidebar .wrapper { - padding: 18px 35px 0 23px; -} - -.page-wrapper .sidebar h3 { - margin: 10px 0 0 10px; - padding: 0; - width: 180px; - height: 19px; - text-indent: -2000px; -} -.page-wrapper .sidebar h3.select { background: url(t_selectadesign.jpg) no-repeat; } -.page-wrapper .sidebar h3.archives { background: url(t_archives.jpg) no-repeat; } -.page-wrapper .sidebar h3.resources { background: url(t_resources.jpg) no-repeat; } - -.page-wrapper .sidebar ul { - margin: 10px 0 20px 20px; - padding: 0; - list-style: none; -} -.page-wrapper .sidebar ul li { - margin: 0 0 9px 0; - padding: 0 0 0 12px; - background: url(bluearrow.gif) no-repeat 0 3px; - font-size: 10px; - color: #fff; -} - -.page-wrapper .sidebar ul li a { - text-transform: uppercase; - text-decoration: none; - font-size: 11px; - font-weight: bold; - color: #426279; -} -.page-wrapper .sidebar ul li a:hover { color: #21313C; } -.page-wrapper .sidebar .design-selection ul li a { display: block; } -.page-wrapper .sidebar .design-selection ul li a.designer-name { - display: inline; - text-transform: none; - text-decoration: underline; - color: #fff; - font-weight: normal; - font-size: 10px; -} -.page-wrapper .sidebar .design-selection ul li a.designer-name:hover { text-decoration: none; } - -.page-wrapper .summary { - position: relative; - top: -40px; - padding: 0; - margin: 0 0 0 42px; - font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif; -} -.page-wrapper .summary p { - margin: 0 0 10px 0; - font-style: italic; - font-size: 17px; - font-weight: bold; - line-height: 18px; - color: #D65200; -} -.page-wrapper .summary p a { - text-decoration: none; - color: #9E3E02; - border-bottom: dotted 1px #9E3E02; -} -.page-wrapper .summary p a:hover { - border-bottom: none; -} - -.page-wrapper .preamble h3 { - margin: 0 0 0 42px; - padding: 0; - text-indent: -2000px; - width: 299px; - height: 43px; - background: url(t_theroadtoenlightenment.jpg) no-repeat; -} - -.page-wrapper .preamble p, .page-wrapper .supporting p { - margin: 0 0 13px 42px; - font-size: 12px; - line-height: 18px; - color: #444; -} - -.page-wrapper .supporting p abbr { - border-bottom: dotted 1px #444; - cursor: help; -} - -.page-wrapper .supporting .explanation h3 { - margin: 40px 0 10px 42px; - padding: 0; - text-indent: -2000px; - width: 187px; - height: 16px; - background: url(t_sowhatisthisabout.jpg) no-repeat; -} -.page-wrapper .supporting .participation h3 { - margin: 40px 0 6px 42px; - padding: 0; - text-indent: -2000px; - width: 125px; - height: 20px; - background: url(t_participation.jpg) no-repeat; -} -.page-wrapper .supporting .benefits h3 { - margin: 40px 0 10px 42px; - padding: 0; - text-indent: -2000px; - width: 125px; - height: 16px; - background: url(t_benefits.jpg) no-repeat; -} -.page-wrapper .supporting .requirements h3 { - margin: 40px 0 6px 42px; - padding: 0; - text-indent: -2000px; - width: 125px; - height: 20px; - background: url(t_requirements.jpg) no-repeat; -} - -.page-wrapper .supporting .requirements p:nth-child(6) { - margin: 40px 0 40px 42px; - font-size: 11px; - font-style: italic; -} - -.page-wrapper .preamble p a, .page-wrapper .supporting p a { - text-decoration: none; - color: #9E3E02; - border-bottom: dotted 1px #9E3E02; -} -.page-wrapper .preamble p a:hover, .page-wrapper .supporting p a:hover { - border-bottom: none; -} \ No newline at end of file diff --git a/src/data/designs/141/metadata.json b/src/data/designs/141/metadata.json deleted file mode 100644 index 2d5dabee4e58a1864f9658efcbce7ef20bd52d7a..0000000000000000000000000000000000000000 --- a/src/data/designs/141/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "141", - "url": "https://www.csszengarden.com/141", - "css_url": "https://www.csszengarden.com/141/141.css", - "description": "This visual design features a harmonious combination of a warm, floral background pattern with a minimalist, structured content layout. The use of soft yellow and white creates a serene and inviting atmosphere, complemented by subtle typography that enhances readability. The layout effectively balances decorative elements and functional content areas, promoting a tranquil but purposeful user experience.", - "categories": [ - "Web Design", - "Typography", - "Minimalism", - "Thematic Design", - "User Interface" - ], - "visual_characteristics": [ - "Floral Background", - "Warm Color Palette", - "Structured Layout", - "Minimalist Typography", - "Serene Atmosphere" - ] -} \ No newline at end of file diff --git a/src/data/designs/141/screenshot_desktop.png b/src/data/designs/141/screenshot_desktop.png deleted file mode 100644 index 6949e7d3cccb65c429d25f4c7c705a14d86c0455..0000000000000000000000000000000000000000 --- a/src/data/designs/141/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:15712d1a74e7ec11793c07520425e11dac4728cf4c469952873385485702ccae -size 2271842 diff --git a/src/data/designs/141/screenshot_mobile.png b/src/data/designs/141/screenshot_mobile.png deleted file mode 100644 index b5fc7f4aadb213356ba795bced7f0016f669c7d1..0000000000000000000000000000000000000000 --- a/src/data/designs/141/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b13b4550ca601e0b7b7c2cdc6c293ffd123fafe3d0106674c5db88b0d18b219c -size 1193864 diff --git a/src/data/designs/141/style.css b/src/data/designs/141/style.css deleted file mode 100644 index 44e1da69d0f7e142aaa825a98b4b2de9be57cd41..0000000000000000000000000000000000000000 --- a/src/data/designs/141/style.css +++ /dev/null @@ -1,164 +0,0 @@ -/* css Zen Garden submission 141 - 'Golden Cut', by Petr Stanciek, http://www.pixy.cz/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Petr Stanciek */ -/* Added: Dec. 16th, 2004 */ - -/* 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. */ - - - - -body { - margin:0; - padding:0; - background: #819EFF url("bkgr1.jpg") 7px 0 repeat; - color: #333; - font: 100%/1.67 "palatino linotype", palatino, serif; - } - -a { color: #819EFF; text-decoration:underline; } -a:visited { color: #8A8D99; } -a:hover { color: #01228D; } - -abbr, abbr { - color:#B36D00; - font-style:italic; - cursor:help; - } -a abbr, a abbr { color:inherit } - -.page-wrapper { - position:relative; - width: 770px; - margin: 30px auto 2.5em 7px; padding: 0; - background: url("strips.jpg") 474px 0 repeat-y; - border-left:1px solid #FFD99E; - border-bottom:1px solid #819EFF; - } -/*FFDAA0*/ - -/* INTRO */ - -.intro { - width:474px; - margin: 0; padding:340px 0 0 0; - background: white url("header.jpg") top left no-repeat; - } -header { display:none } -.summary p:first-child { display:none } -.summary p:last-child { - position:absolute; top: 195px; left: 474px; z-index:10; - width:296px; margin:0; - font-size:70%; - line-height: 1.1; - text-align:center; - color:white; - } -.summary p:last-child a { - white-space: nowrap; - color: #FFF5D9; - } -.summary p:last-child a:hover { color: #01228D; } - -.preamble, .explanation, .participation, .benefits, .requirements { - padding: 0 1em 1px 2em; - /* 1px bottom padding due to margin-collpasing bug in Opera */ - } - -.intro h3, .supporting h3 { - margin: 1.5em 0 1em 0; padding:0; - height: 30px; - background: url("ttls.gif") 0 0 no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.preamble h3 { margin-top:0; } -.explanation h3 { background-position: 0 -50px; } -.participation h3 { background-position: 0 -100px; } -.benefits h3 { background-position: 0 -150px; } -.requirements h3 { background-position: 0 -200px; } - -.intro p, .supporting p { - margin: 0.7em 0; - font-size:90%; - } - -/* TEXT */ - -.supporting { - width:475px; - margin: 0; padding:1px 0 1em 0; - background: white; - } - -footer { - position:absolute; bottom: -1.5em; right: 0; - font: 75%/1 sans-serif; - white-space:nowrap; - } -footer a { - padding:0.2em 0.3em; - background:#819EFF; - color:white; - text-decoration:none; - font-weight:bold; - } -footer a:hover { color:white; background: #01228D; } - -/* LINKS */ - -.sidebar { - position:absolute; top: -20px; left: 474px; - width:296px; - padding-top:290px; - font-size: 85%; - line-height: 1.5; - background: url("boy.jpg") 0 0 no-repeat; - } - -.sidebar h3 { - margin: 3em 0 1em 27px; padding:0; - height: 20px; - background: url("ttls2.gif") 0 0 no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.design-selection h3 { margin-top:0; } -.design-archives h3 { background-position: 0 -50px; } -.zen-resources h3 { background-position: 0 -100px; } - -.sidebar ul { - list-style-type:none; - margin:0; padding:0; - } -.sidebar li { - list-style-type:none; - margin:0.5em 0 0.5em 120px; padding:0; - } - -.sidebar li a { - display:block; - margin: 0 0 0 -25px; padding: 0 0 0 25px; - font-weight:bold; - font-size:100%; - color:#666; - background: url("bull.gif") left center no-repeat; - } -.sidebar li a.designer-name { - display: inline; margin:0; padding:0; - background: transparent; - font-size:100%; - font-weight:normal; - font-style:italic; - font-variant:small-caps; - color:#819EFF; - } -.sidebar li a:hover { color: #01228D; } diff --git a/src/data/designs/142/metadata.json b/src/data/designs/142/metadata.json deleted file mode 100644 index af1fe72c9c4ef7069c6eac7c89e4a79681e813e3..0000000000000000000000000000000000000000 --- a/src/data/designs/142/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "142", - "url": "https://www.csszengarden.com/142", - "css_url": "https://www.csszengarden.com/142/142.css", - "description": "The design effortlessly combines a dark, textured background with bold, contrasting typography, creating a visually striking and modern aesthetic. The use of minimalist elements and a focused color palette emphasizes the central text, while the overall layout feels balanced and sophisticated.", - "categories": [ - "Modern", - "Minimalist", - "Typography-focused", - "Dark theme" - ], - "visual_characteristics": [ - "Textured background", - "Contrasting colors", - "Bold typography", - "Sophisticated layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/142/screenshot_desktop.png b/src/data/designs/142/screenshot_desktop.png deleted file mode 100644 index 6ef3de9c5700f0991e71c9c31aa69f159b280d1d..0000000000000000000000000000000000000000 --- a/src/data/designs/142/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:20e40618fa0bb8e211a1a6a68b7e494b3bb75317724a783575e2d0f227721b8a -size 117302 diff --git a/src/data/designs/142/screenshot_mobile.png b/src/data/designs/142/screenshot_mobile.png deleted file mode 100644 index 4088da76d87c33826b0b4ebbfcaae20acd91c00a..0000000000000000000000000000000000000000 --- a/src/data/designs/142/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2e48a3d36592746275ecd63895c904f368dbff3195fad766748fda56cc71c660 -size 317961 diff --git a/src/data/designs/142/style.css b/src/data/designs/142/style.css deleted file mode 100644 index bffd08058ac96c0a8dd733fa225c1b6766450417..0000000000000000000000000000000000000000 --- a/src/data/designs/142/style.css +++ /dev/null @@ -1,271 +0,0 @@ -/* css Zen Garden submission 142 - 'Invasion of the Body Switchers' by Andy Clarke, http://www.stuffandnonsense.co.uk/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Andy Clarke */ -/* Added: Dec. 16th, 2004 */ - -/* 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. */ - - - - -* { -margin : 0; -padding : 0; -} - -body { -font : 75% "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; -background : #000 url(body-bg.jpg) repeat-y top center; -color : #fff; -font-variant : small-caps; -text-align : center; /* That Explorer Malarkey */ -} - -h1, h2, h3, p, ul { -padding : 0.5em 0; -} - -/* hx */ - -header h1 { display : none; } -header h2 { display : none; } - -h3 { padding : 0; text-indent : -3000px; } - -.preamble h3 { -width : 195px; -height : 140px; -background : url(preamble-h3.gif) no-repeat left bottom; -} - -.explanation h3 { -float : left; -width : 210px; -height : 135px; -margin-right : 10px; -background : url(explanation-h3.gif) no-repeat; -} - -.participation h3 { -float : right; -width : 230px; -height : 200px; -background : url(participation-h3.gif) no-repeat; -} - -.requirements h3 { -float : left; -width : 230px; -height : 180px; -background : url(requirements-h3.gif) no-repeat; -} - -.design-selection h3 { -width : 200px; -height : 45px; -background : url(lselect-h3.gif) no-repeat; -} - -.zen-resources h3 { -width : 90px; -height : 20px; -background : url(lresources-h3.gif) no-repeat; -} - -.design-archives h3 { -width : 90px; -height : 20px; -background : url(larchives-h3.gif) no-repeat; -} - -/* p */ - -p { -font-size : 100%; -line-height : 110%; -} - -.summary p:first-child { display : none; } - -.summary p:last-child { -float : right; -width : 400px; -padding-right: 10px; -text-align : right; -} - -.preamble p:nth-child(2), .preamble p:nth-child(3) { display : none; } - -.preamble p:nth-child(4) { -width : 220px; -font-size : 120%; -} - -.explanation p:nth-child(2) { display : none; } - -.explanation p:nth-child(3) { -margin-left : 230px; -line-height : 110%; -} - -.participation p:nth-child(2), .participation p:nth-child(3) { display : none; } -.participation p:nth-child(4) { margin-right : 240px; } -.requirements p:nth-child(2), .requirements p:nth-child(3), .requirements p:nth-child(5) { display : none; } -.requirements p:nth-child(4) { margin-left : 240px; } -.requirements p:nth-child(6) { clear : both; margin-left : 240px; } - -abbr { -text-decoration : none; -border-bottom : 1px dotted #ccc; -cursor : help; -} - -.accesskey { -text-decoration: underline; -} - -/* anchors, yo ho me hearties */ - -a:link, a:visited { -color : #fdf4b3; -text-decoration : none; -} - -.design-selection a:link, .design-selection a:visited { -display : block; -font-variant : small-caps; -} - -.design-selection a:link.designer-name, .design-selection a.designer-name:visited { -display : inline; -font-size : 190%; -letter-spacing : -1px; -color : #fff; -} - -.summary p:last-child a { -font-size : 160%; -} - -footer a:link, footer a:visited { -padding : 0px 4px; -font-size : 90%; -background : #666; -border : 1px solid #999; -color : #ccc; -text-decoration : none; -} - -footer a:hover { -background : #555; -color : #ccc; -text-decoration : none; -} - -a:hover { -color : #fff; -text-decoration : underline; -} - -/* ul */ - -ul { -list-style-type : disc; -padding : 0.5em 10px; -} - -.sidebar ul { -margin-top : 20px; -padding-left : 10px; -} - -li { -list-style-type : none; -line-height : 200%; -} - -.design-selection li { -padding-bottom : 10px; -font-variant : normal; -text-align : right; -line-height : 16px; -} - -/* layout */ - -.page-wrapper { -position : relative; -width : 750px; -margin : 0 auto; -text-align : left; -background : url(container-bg.jpg) no-repeat 0 51px; -border-bottom : 5px solid #fdf4b3; -} - -header { -width : 750px; -height : 50px; -background : url(header-bg.jpg) no-repeat; -border-bottom : 1px solid #fdf4b3; -} - -.summary { -width : 750px; -} - -.preamble { -margin : 0 50px 0 470px; -} - -.explanation { -margin : 0 50px 0 380px; -} - -.participation, .benefits, .requirements { -margin : 40px 50px 0 280px; -} - -.preamble { -margin-top : 170px; -} - -.supporting { -margin-top : 140px; -} - -.explanation, .participation, .requirements { -margin : 40px 40px 0 250px; -} - -.benefits { -display : none; -} - -footer { -margin-top : 20px; -padding : 20px 0; -background : url(footer-bg.gif) no-repeat top center; -text-align : center; -} - -.sidebar { -position : absolute; -top : 70px; -left : 0px; -width : 200px; -} - -.design-archives { -padding : 60px 0 0 20px; -} - -.zen-resources { -padding : 50px 0 0 20px; -} - -.extra1, .extra2, .extra3, .extra4, .extra1, .extra5 { -display : none; -} \ No newline at end of file diff --git a/src/data/designs/143/metadata.json b/src/data/designs/143/metadata.json deleted file mode 100644 index 1dc20a172b6dbb17157e164b5687ea7b90de253a..0000000000000000000000000000000000000000 --- a/src/data/designs/143/metadata.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "id": "143", - "url": "https://www.csszengarden.com/143", - "css_url": "https://www.csszengarden.com/143/143.css", - "description": "This design features a clean and structured layout with a monochromatic color scheme, highlighting text content with clear typographic hierarchy. A combination of minimalist aesthetic and functional design elements ensures readability and visual interest, while the central image adds a focal point. The use of borders and shadow effects provide depth to the overall design.", - "categories": [ - "Minimalism", - "Monochrome", - "Typography", - "Web Design", - "User Interface" - ], - "visual_characteristics": [ - "Clear typographic hierarchy", - "Grid alignment", - "Monochromatic color scheme", - "Minimalist style", - "Use of borders", - "Shadow effects" - ] -} \ No newline at end of file diff --git a/src/data/designs/143/screenshot_desktop.png b/src/data/designs/143/screenshot_desktop.png deleted file mode 100644 index af0a21f4ec7ccd9c296a3e11ddcd243e340873de..0000000000000000000000000000000000000000 --- a/src/data/designs/143/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:213cddf66ed7fca2c6446c3abf4df0d34069a9d0407583a97393bfc940478405 -size 315645 diff --git a/src/data/designs/143/screenshot_mobile.png b/src/data/designs/143/screenshot_mobile.png deleted file mode 100644 index 6e01d1540a7012cb03301546d295f37424f5c2c7..0000000000000000000000000000000000000000 --- a/src/data/designs/143/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:56d9e30ad743529ae53564c30a51eb7111c4bc1817d840c555406cb9408f4c2c -size 256935 diff --git a/src/data/designs/143/style.css b/src/data/designs/143/style.css deleted file mode 100644 index 13814d5d2aa235849b8c265e2285addee4c6934a..0000000000000000000000000000000000000000 --- a/src/data/designs/143/style.css +++ /dev/null @@ -1,227 +0,0 @@ -/* css Zen Garden submission 143 - 'Pixelisation', by Lim Yuan Qing, http://yuanqing.blogspot.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Lim Yuan Qing */ -/* Added: Dec. 16th, 2004 */ - -/* 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. */ - - - - - - -/* ---------- misc ---------- */ - -* { - padding: 0; - margin: 0; - border: 0; - } -body { - background: #eee url(body.gif) no-repeat 50% 100%; - color: #666; - font: 11px/1.3em Arial, Tahoma, sans-serif; - text-align: center; - } -abbr { - cursor: help; - } - -/* ---------- div ---------- */ - -.page-wrapper { - margin: 30px auto; - border: 1px solid #ddd; - background: transparent url(container.gif) repeat-y 50% 50%; - text-align: left; - width: 448px !important; - width /**/:450px; - } -.intro { - background: transparent url(intro.gif) no-repeat 0 0; - } -.page-wrapper, .intro { - position: relative; - } -header { - width: 448px; - height: 260px; - } -.preamble, .supporting { - width: 303px; - } -.supporting { - background: transparent url(supportingText.gif) no-repeat 0 100%; - width: 448px; - } -.explanation { - background: transparent url(explanation.gif) no-repeat 0 50%; - } -.participation { - background: transparent url(participation.gif) no-repeat 0 80%; - } -.benefits { - background: transparent url(benefits.gif) no-repeat 0 100%; - } -.requirements { - padding-bottom: 2px; - } -footer { - text-align: center; - font: 10px/33px Tahoma, Arial, sans-serif; - width: 100%; - height: 35px; - } -.summary, .sidebar { - position: absolute; - left: 303px; - width: 140px; - font: 10px/1.3em Arial, Tahoma, sans-serif; - } -.summary { - top: 260px; - padding-top: 18px; - } -.sidebar { - top: 420px; - } -.sidebar div { - text-align: center; - } -.design-selection, .design-archives, .zen-resources { - padding: 5px 0 10px; - } - -/* ---------- h3 ---------- */ - -h3 { - margin: 7px 15px 3px; - background-position: 0 0; - background-repeat: no-repeat; - text-indent: -9999em; - font: 1px/1px sans-serif; /* stop IE from revealing unnecessary bg */ - width: 273px; - height: 28px; - } -.preamble h3 { - margin-top: 13px; - background-image: url(h3_01.gif); - } -.explanation h3 { - background-image: url(h3_02.gif); - } -.participation h3 { - background-image: url(h3_03.gif); - } -.benefits h3 { - background-image: url(h3_04.gif); - } -.requirements h3 { - background-image: url(h3_05.gif); - } -.sidebar h3 { - margin: 0 10px; - width: 120px; - height: 10px; - } -.select { - background-image: url(h3_06.gif); - } -.archives { - background-image: url(h3_07.gif); - } -.resources { - background-image: url(h3_08.gif); - } - -/* ---------- p ---------- */ - -p { - padding: 0 15px 5px; - text-align: justify; - } -.supporting p { - margin-right: 145px; - } -.summary p { - padding: 3px 12px 0; - text-align: left; - } - -/* ---------- a ---------- */ - -a { - text-decoration: none; - } -a:link, a:visited { - color: #666; - } -a:hover, a:active { - color: #000; - } -.supporting a { - font-weight: bold; - } -footer a { - padding: 0 1px; - font-weight: normal; - } -.summary a:link, .summary a:visited, footer a:link, footer a:visited { - border-bottom: 1px dotted #888; - } -.summary a:hover, .summary a:active, footer a:hover, footer a:active { - border-bottom: 1px dotted #222; - } -.sidebar a:link, .sidebar a:visited { - text-transform: lowercase; - color: #888; - } -.design-selection a:link.c, .design-selection a.designer-name:visited { - display: inline; - color: #666; - } -.sidebar a:hover, .sidebar a:active, .design-selection a.designer-name:hover, .design-selection a.designer-name:active { - color: #000; - } -.design-selection a { - display: block; - text-transform: lowercase; - } - -/* ---------- ul, li ---------- */ - -ul { - margin: 5px 10px 0; - border-top: 1px solid #ddd; - text-align: left; - list-style: none; - } -li { - padding: 3px 0 3px 20px; - border-bottom: 1px solid #ddd; - background-repeat: no-repeat; - background-position: 6px 5px; - display: block; - list-style: none; - } -li:hover { - background-color: #f3f3f3; - } -.design-selection li { - background-image: url(designs.gif); - } -.design-archives li { - background-image: url(archives.gif); - } -.zen-resources li { - background-image: url(resources.gif); - } - -/* ---------- the unused ---------- */ - -h1, h2, extra1, extra2, extra3, extra4, extra5, extra6 { - display: none; - } \ No newline at end of file diff --git a/src/data/designs/144/metadata.json b/src/data/designs/144/metadata.json deleted file mode 100644 index d7702da879eb71e34187b3ec6e20fe570cfa5f31..0000000000000000000000000000000000000000 --- a/src/data/designs/144/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "144", - "url": "https://www.csszengarden.com/144", - "css_url": "https://www.csszengarden.com/144/144.css", - "description": "The design features a clean and minimalist aesthetic relying on ample whitespace and a soft pastel color palette dominated by light greens and yellows. The layout is well-structured with a prominent header and column-based navigation, which is aligned alongside text-heavy content blocks. Subdued typography enhances readability, harmoniously complementing the overall calm and enlightening mood of the design.", - "categories": [ - "Minimalist", - "Corporate", - "Educational", - "Professional" - ], - "visual_characteristics": [ - "Whitespace", - "Soft Pastel Colors", - "Column Layout", - "Subdued Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/144/screenshot_desktop.png b/src/data/designs/144/screenshot_desktop.png deleted file mode 100644 index bff2e0656a45d70b94a47d4c50d668c3f8520865..0000000000000000000000000000000000000000 --- a/src/data/designs/144/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f63bcb241fb66eab800264bb0557656ad93804b3ea9c918f987bd8edbf2a8b91 -size 336318 diff --git a/src/data/designs/144/screenshot_mobile.png b/src/data/designs/144/screenshot_mobile.png deleted file mode 100644 index 7b46f528fb3488e24a637285d814415df55f43b2..0000000000000000000000000000000000000000 --- a/src/data/designs/144/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7ffd478af604a85da57f8224e6e7d5292ddca258276e661b9c9d7d9e211925c3 -size 311262 diff --git a/src/data/designs/144/style.css b/src/data/designs/144/style.css deleted file mode 100644 index 5ab161c6d67f6ec38ae077f8bae7a7951d0d4812..0000000000000000000000000000000000000000 --- a/src/data/designs/144/style.css +++ /dev/null @@ -1,188 +0,0 @@ -/* css Zen Garden submission 144 - 'Verdure' by Lim Yuan Qing, http://yuanqing.blogspot.com/ */ -/* css released under Creative Commons ShareAlike License v1.0 - http://creativecommons.org/licenses/sa/1.0/ */ -/* All associated graphics copyright 2004, Lim Yuan Qing */ -/* Photography copyright Lynne Lancaster, http://sxc.hu/browse.phtml?f=profile&l=weirdvis */ -/* Added: Dec. 16th, 2004 */ - -/* 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. */ - - - - - - - -/* ---------- misc ---------- */ - -* { - padding: 0; - margin: 0; - } -body { - background: #f2f2f2; - color: #777; - font: 11px/1.4em Arial, Tahoma, Verdana, sans-serif; - text-align: center; - } -abbr { - cursor: help; - } - -/* ---------- div ---------- */ - -.page-wrapper { - padding: 0 2px; - width: 500px !important; - width /**/: 504px; - margin: 0 auto; - background: #fff url(container.gif) repeat-y; - text-align: left; - position: relative; - } -.summary, .preamble, .supporting div { - padding: 5px 20px; - width: 330px !important; - width /**/: 370px; - } -.summary { - padding: 15px 20px; - background: url(line.gif) no-repeat 50% 100%; - } -.preamble { - padding-top: 15px; - } -.supporting .requirements { - padding-bottom: 12px; - } -.supporting footer { - padding: 12px 20px; - background: url(line.gif) no-repeat 50% 0; - text-align: center; - } -.sidebar { - position: absolute; - top: 287px; - left: 372px; - font-size: 10px; - line-height: 1.2em; - } - -/* ---------- h1, h2, h3 ---------- */ - -h1, h2, h3 { - font-weight: normal; - font-size: 1.0em; - line-height: 1.0em; - text-indent: -2000em; - display: block; - } -h1 { - width: 500px; - height: 80px; - background: #fff url(h1.gif) no-repeat 0 100%; - } -h2 { - width: 500px; - height: 206px; - background: #b6c77b url(h2.jpg) no-repeat; - } -.preamble h3, .supporting h3 { - width: 231px; - height: 27px; - background-repeat: no-repeat; - } -.preamble h3 { background-image: url(h3_01.gif); } -.explanation h3 { background-image: url(h3_02.gif); } -.participation h3 { background-image: url(h3_03.gif); } -.benefits h3 { background-image: url(h3_04.gif); } -.requirements h3 { background-image: url(h3_05.gif); } - -.sidebar h3 { - width: 130px; - height: 34px; - background-repeat: no-repeat; - background-color: #f2f4d8; - } -.select {background-image: url(h3_06.gif); } -.archives {background-image: url(h3_07.gif); } -.resources {background-image: url(h3_08.gif); } - -/* ---------- p ---------- */ - -p { - padding-top: 5px; - } -p:nth-child(2) { - padding-top: 2px; - } - -/* ---------- ul, li ---------- */ - -ul, li { - list-style: none; - } -ul { - border-top: 1px solid #ddd; - } -li { - text-transform: lowercase; - border-bottom: 1px solid #ddd; - } -.design-selection li { - padding: 5px 7px 5px 24px; - background: url(bullet1.gif) no-repeat; - } -.design-selection li:hover { - background: #e6e9cd url(hover.gif) no-repeat; - } -.design-archives li, .zen-resources li { - background: url(bullet2.gif) no-repeat; - padding: 5px 0; -} -div>.design-archives li, div>.zen-resources li { - padding: 0; - height: 23px; - background: url(bullet2.gif) no-repeat; -} - -/* ---------- a ---------- */ - -a { - text-decoration: none; - } -.intro a, .supporting a { - font-weight: bold; - color: #9ead6c; - } -footer a, .sidebar a { - color: #777; - } -.design-selection a { - display: block; - color: #9ead6c; - } -.design-selection a.designer-name { - display: inline; - color: #777; - } -.design-archives a, .zen-resources a { - padding: 0 7px 0 22px; -} -div>.design-archives a, div>.zen-resources a { - padding: 5px 7px 5px 22px; - height: 13px !important; - height /**/: 23px; - display: block; - } -footer a:hover, footer a:active, .sidebar a:hover, .sidebar a:active, .design-selection a.designer-name:hover, .design-selection a.designer-name:active { - color: #222; - } -.intro a:hover, .intro a:active, .supporting a:hover, .supporting a:active, .design-selection a:hover, .design-selection a:active { - color: #85925C; - } -div>.design-archives a:hover, div>.design-archives a:active, div>.zen-resources a:hover, div>.zen-resources a:active { - background: #e6e9cd url(hover.gif) no-repeat -130px 0; - } \ No newline at end of file diff --git a/src/data/designs/145/metadata.json b/src/data/designs/145/metadata.json deleted file mode 100644 index 106b85f581bc15d3a71e531c574854ec802b0dda..0000000000000000000000000000000000000000 --- a/src/data/designs/145/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "145", - "url": "https://www.csszengarden.com/145", - "css_url": "https://www.csszengarden.com/145/145.css", - "description": "This design features a retro envelope theme with a wood-like texture background, combining rich reds and blues for a nostalgic aesthetic. The visual layout is reminiscent of vintage postal mail, with themed elements such as stamps and postmarks, which combine with elegant typography to enhance the retro feel.", - "categories": [ - "Vintage", - "Thematic", - "Typography", - "Print Aesthetics" - ], - "visual_characteristics": [ - "Textured Background", - "Retro Theme", - "Rich Color Palette", - "Centralized Layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/145/screenshot_desktop.png b/src/data/designs/145/screenshot_desktop.png deleted file mode 100644 index d9f2f9f8e5ad42f30ca1e28937d4d3c3d0a95505..0000000000000000000000000000000000000000 --- a/src/data/designs/145/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:53a44a1c2edc11d8c36554c7779cab686e3b3b95b11aa00907f3310d78ce332a -size 376708 diff --git a/src/data/designs/145/screenshot_mobile.png b/src/data/designs/145/screenshot_mobile.png deleted file mode 100644 index 907abb0f2355b3c94507be37e965f96ea00e3cab..0000000000000000000000000000000000000000 --- a/src/data/designs/145/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b62245fe0f782e526205e978aea0ca5e91806e71323e799effd320e6cc54582e -size 821853 diff --git a/src/data/designs/145/style.css b/src/data/designs/145/style.css deleted file mode 100644 index 57f146c476aea00335bd8b4d754f231b2e77deb2..0000000000000000000000000000000000000000 --- a/src/data/designs/145/style.css +++ /dev/null @@ -1,255 +0,0 @@ -/* css Zen Garden submission 145 - 'Paravion', by Emiliano Pennisi, http://www.peamarte.it/01/metro.html */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Emiliano Pennisi */ -/* Added: Dec. 16th, 2004 */ - -/* 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. */ - - - -body{ - font-family: "Book Antiqua",Georgia,"MS Sans Serif", Geneva, sans-serif; - background: #A3181E url(bg_body.gif) fixed repeat-x; - margin: 0; - text-align: center; - margin: 0; - padding: 0; - height: 100%; -} - -abbr { - color: #A3181E; - font-weight: bold; -} - -/*h3 rules*/ -.sidebar h3 { - font-size: 16px; - background: #A3181E; - color: white; - margin-left: 5px; - margin-top: 1em; - margin-bottom: 0; - padding: 3px; - width: 185px; - display: block; -} - -.preamble h3 ,.supporting h3 { - font-family: "Courier New", Courier, monospace; - background: url(h3bg.gif) no-repeat 6px 0; - color: #A3181E; - font-size: 20px; - letter-spacing: -1px; - padding-left: 35px; -} - -.sidebar h3{ - font-family: "Book Antiqua",Times, Helvetica, sans-serif; - font-weight: bold; -} - -/*link*/ -.preamble a, .supporting a,.sidebar a{ - color: #2B497B; - font-weight: bold; -} - -.preamble a:hover,.supporting a:hover{ - background: #2B497B; - color: White; - text-decoration: none; -} - -/*Style for linkList abbr*/ -.sidebar abbr { - background: #A3181E; - color: White; -} - -/*child selector only for compliant mode*/ -body>.page-wrapper{ - height: auto; - min-height: 100%; -} - -/*container*/ -.page-wrapper{ - position: relative; - height: 100%; - background: url(bg_container.gif); - margin-left: auto; - margin-right: auto; - border-right: 3px solid white; - border-left: 3px solid white; - border-bottom: 20px solid white; - width: 650px; - text-align: left; - font-size: 0.8em; -} - -header { - background: url(head.gif) no-repeat; - height: 452px; - margin: 0 0 30px 0; -} - -header h1,header h2{ - display: none; -} - -/*Hide quicksummary*/ -.summary p:last-child a{ - color: #A3181E; -} - -.summary p:first-child { - display: none; -} - -.summary p:last-child { - font-size: 0.9em; - line-height: 12px; - position: absolute; - top: 275px; - left: 235px; - padding: 0 0 8px 0; - width: 200px; - text-transform: uppercase; - font-weight: bold; - border-top: 1px dashed #000; - padding-top: 2px; -} -.preamble,.supporting{ - position: relative; - margin-left: 250px; - margin-top: -30px; - width: 400px; -} - -/*child selector only for compliant mode*/ -div.preamble,.supporting{ - background: url(st_bg.gif); -} - -div.preamble,.supporting{ - padding: 10px; - margin-bottom: 10px; - width: 370px; /*Start Tantek Box Model Hack*/ - voice-family: "\"}\""; - voice-family: inherit; - width: 350px; -} - -/*child selector only for compliant mode*/ -body > div.preamble,.supporting{ - width: 350px; -} - -/**************************Navigation**********************************/ -.sidebar{ - font-family: Georgia,"MS Sans Serif", Geneva, sans-serif; - background: url(linklist_bg.jpg); - padding: 10px; - width: 220px; - position: absolute; - top: 450px; - margin-left: 15px; /*Start Tantek Box Model Hack*/ - voice-family: "\"}\""; - voice-family: inherit; - width: 200px; -} - -.sidebar li - { - color: #fff; -} - -.sidebar ul - { - list-style: none; - margin: 5px; - margin-top: 0; - padding: 0px; - border-top: 10px solid #CAD2DE; - background: #2B497B; -} - -.sidebar li - { - color: #000; - border-bottom: 1px dotted #fff; - padding: 0.2em 10px; - line-height: 15px; -} - -.sidebar li:hover - { - background: #A3181E; -} - -.page-wrapper > .sidebar ul li a:hover{ - color: White; -} - -.sidebar ul li a:hover{ - color: #A3181E; -} - - -.sidebar li a - { - font-size: 10px; - display: block; - color: #fff; - font-weight: bold; - text-decoration: none; - text-transform: uppercase; -} - -.sidebar li a:hover - { - color: #fff; -} - -.sidebar li a.designer-name:hover - { - color: #fff; -} - -.design-selection ul li{ - color: White; -} - -.design-selection ul li a.designer-name{ - font-weight: bold; - display: inline; - color: White; - text-transform: none; -} - -/*Start Footer rules*/ -footer { - font-family: Georgia,"MS Sans Serif", Geneva, sans-serif; - margin: 0 -5px -5px; - border-top: 5px solid #FFF; - background-color: #A3181E; - padding: 10px; - text-transform: uppercase; - text-align: right; -} - -footer a:link, footer a:visited{ - font-size: 9px; - color: #fff; - font-weight: bold; - padding: 3px; - text-decoration: none; - border-right: 1px solid white; - padding: 0 5px 0 0; -} - -/*End of code*/ diff --git a/src/data/designs/146/metadata.json b/src/data/designs/146/metadata.json deleted file mode 100644 index c7510ea69d185269d59e92ff46b0f6e22e6ebd54..0000000000000000000000000000000000000000 --- a/src/data/designs/146/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "146", - "url": "https://www.csszengarden.com/146", - "css_url": "https://www.csszengarden.com/146/146.css", - "description": "The design features a minimalist layout with an emphasis on text content and a clean side navigation menu. The use of pastel colors and a faint background image enhances the modern aesthetic, making it visually appealing while maintaining readability. The typography is clear and professional, emphasizing content organization.", - "categories": [ - "Minimalist", - "Typography-focused", - "Content-heavy", - "Modern", - "Professional" - ], - "visual_characteristics": [ - "Pastel color palette", - "Clean layout", - "Side navigation", - "Background image", - "Clear typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/146/screenshot_desktop.png b/src/data/designs/146/screenshot_desktop.png deleted file mode 100644 index 31a98df9775fea8ddf522ec57367c24d554bf724..0000000000000000000000000000000000000000 --- a/src/data/designs/146/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bc48640e2889f6f3a3301879904d3682777ac7f28fb277bd94d65ba0b268cd45 -size 386512 diff --git a/src/data/designs/146/screenshot_mobile.png b/src/data/designs/146/screenshot_mobile.png deleted file mode 100644 index 8dd711299d90690b9bc8ae53c31e9383cab09e12..0000000000000000000000000000000000000000 --- a/src/data/designs/146/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:49232b1eb7ca0d960da539e8b4a845d4ff5724b64949b14eaee440b7b62d2326 -size 381354 diff --git a/src/data/designs/146/style.css b/src/data/designs/146/style.css deleted file mode 100644 index af38795228bd36fac4fc06230ad7ff27ced8bca6..0000000000000000000000000000000000000000 --- a/src/data/designs/146/style.css +++ /dev/null @@ -1,76 +0,0 @@ -/* css Zen Garden submission 146 - 'Urban', by Matt, Kim & Nicole, http://www.learnnewmedia.designer-namea/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Matt, Kim & Nicole */ -/* Added: Dec. 16th, 2004 */ - -/* 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. */ - - - -/* Originally from Session 3 of the Zen Garden student gallery, - http://www.mezzoblue.dev/zengarden/alldesigns/student/ */ - - -/* basic elements */ -a:hover, a:active {color: #FFF; background: #ccc;} -a:visited {color: #559999; text-decoration:none; font-weight:bolder;} -a:hover {color: #ffffff; background: #ccc;} -a:link {color: #FACD56; text-decoration:none; font-weight:bolder;} -p {font: normal 10px/16px Tahoma, Verdana, Arial, sans-serif; text-align: justify; text-decoration:none;} -.summary p:last-child {position:absolute; z-index:3; text-align:center; left: 158px; top: 244px; width: 216px; height: 20px;} -h3 {font: normal 10px/16px Tahoma, Verdana, Arial, sans-serif; letter-spacing: 1px; color: #7D775C;} -/* start of body of text */ -.preamble {top: 330px; height: 207px;} -.supporting {top: 540px; height: 1100px;} -.supporting, .preamble {text-decoration:none; width:355px;z-index:2; position:absolute; left: 334px;} -/* end of body of text */ -/* specific divs */ -#css-zen-garden{background-color: #FFF;} -.page-wrapper {position: relative; width:765px; margin: 0 auto; text-align: left;} -footer a {text-decoration:none; text-align:right; text-transform:uppercase; color: #559999; font-weight:bolder; font-size:12px;} -/* start of navagation */ -.sidebar {background: transparent url("final.gif") no-repeat top left; z-index:1; position: absolute; height:1650px; top: 244px; right: 0px; left: -10px; width: 778px; font-size:12px;} -.sidebar .wrapper {font: 10px tahoma, verdana, sans-serif; width: 130px;} -.sidebar h3.select {width: 97px; height: 16px;} -.sidebar h3.archives {width:57px; height: 14px; text-decoration:none;} -.sidebar li a:link {color: #FACD56; text-decoration:none; font-weight:bolder;} -.sidebar li a:visited {color: #000; text-decoration:none;} -.sidebar li a:hover {color: #ffffff; background: #ccc;} -.sidebar ul a.designer-name {color: #ccddcb; display: inline; font-weight: normal;} -.design-selection ul a {line-height: 3.5ex; display: block; font-weight: bold;} -.sidebar li {color:#ccddcb; list-style-type: none; z-index:3; text-align:center; list-style-type: none;} -.design-selection {height: 239px; width: 150px; left: 134px; top: 37px;} -.design-archives {height: 35px; width: 168px; text-align:center; left: 125px; top: 534px;} -.zen-resources {text-align:center; width: 150px; height: 30px; left: 132px; top: 423px;} -.zen-resources, .design-archives, .design-selection {position:absolute; font-size:10px;} -/* end of navagation */ -/* 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-image:url("title.gif"); background-repeat:no-repeat; height:245px;} -h3.select, h3.archives, h3.resources { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h1, header h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.summary p:first-child{width: 202px;} -.summary p:last-child{width: 118px;} -.summary p:last-child a:visited {color:#FFFFFF;} -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.explanation h3 {background-image:url("what.gif"); background-repeat:no-repeat; height:20px; padding-top:10px;} -.participation h3 {background-image:url("part.gif"); background-repeat:no-repeat; height:27px;} - -.benefits h3 {background-image:url("benefits.gif"); background-repeat:no-repeat; height:27px;} -.requirements h3 {background-image:url("require.gif"); background-repeat:no-repeat; height:27px;} -.summary p:first-child {display:none;} -.extra1 {background-image:url("background2.gif"); height:1617px; float:right; width:345px; z-index:0; background-repeat:no-repeat; margin-top:10px;} \ No newline at end of file diff --git a/src/data/designs/147/metadata.json b/src/data/designs/147/metadata.json deleted file mode 100644 index dceb4dae72b42cceec93bda909269f7402ecc399..0000000000000000000000000000000000000000 --- a/src/data/designs/147/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "147", - "url": "https://www.csszengarden.com/147", - "css_url": "https://www.csszengarden.com/147/147.css", - "description": "The design features a monochromatic green color palette creating a calming and minimalist atmosphere. The layout is straightforward, with a left-aligned text block that provides clear readability, supported by a simple navigation menu on the right. Subtle gradient effects enhance the background, adding depth without distraction. The typography is simple and functional, using variations in weight to highlight key information.", - "categories": [ - "Minimalist", - "Monochromatic", - "Calming", - "Information-focused" - ], - "visual_characteristics": [ - "Monochrome palette", - "Simple typography", - "Left-aligned layout", - "Gradient background" - ] -} \ No newline at end of file diff --git a/src/data/designs/147/screenshot_desktop.png b/src/data/designs/147/screenshot_desktop.png deleted file mode 100644 index 29e1134f1f0dd32df0a1dffc01d06439769ee509..0000000000000000000000000000000000000000 --- a/src/data/designs/147/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:07e65629167d5fd24bb3b75dbf4d60cb6dd1ac86b2407139a7983d15e43f211c -size 237791 diff --git a/src/data/designs/147/screenshot_mobile.png b/src/data/designs/147/screenshot_mobile.png deleted file mode 100644 index fd3d8e31052c293f053f6008887deffe10c78dc2..0000000000000000000000000000000000000000 --- a/src/data/designs/147/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ab20295c17d5e8c10b3ee9db389fd8dac69ca7b924a9a2e135b1b24c45d6bfc1 -size 201899 diff --git a/src/data/designs/147/style.css b/src/data/designs/147/style.css deleted file mode 100644 index 267037d76b0bd54eed41a9f8c8dbad9f8b9ac8ae..0000000000000000000000000000000000000000 --- a/src/data/designs/147/style.css +++ /dev/null @@ -1,116 +0,0 @@ -/* css Zen Garden submission 147 - 'Attitude', by Stephane Moens */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2004, Stephane Moens */ -/* Added: Dec. 16th, 2004 */ - -/* 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. */ - - - -/* basic elements */ -body { background: url(bgFull.gif) repeat-x #6F715C; font: normal 11px/16px Tahoma, Verdana, Arial, sans-serif; color: #333; margin: 0px; } -h3 { font: italic normal 12pt Tahoma, Verdana, Arial, sans-serif; letter-spacing: 1px; margin-bottom: 0px; color: #7D775C;} -a:link { font-weight: normal; text-decoration: underline; color: #4F8CC3;} -a:visited { font-weight: normal; text-decoration: underline; color: #1D3F64;} -a:hover, a:active { text-decoration:none ; color: #346293;} -abbr {font-weight:bold;} - -/* specific divs */ -.page-wrapper { position: relative; width: 570px; background: url(bgWoman.gif) no-repeat; margin: 0; padding: 170px 0 0 170px;} - - .intro { min-width: 470px; } - header { display: none; } - - header h1 { background: transparent url(h1.gif) no-repeat top left; margin-top: 10px; width: 219px; height: 87px; float: left;} - header h2 { background: transparent url(h2.gif) no-repeat top left; margin-top: 58px; margin-bottom: 40px; width: 200px; height: 18px; float: right;} - header h1, header h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - .summary { position:absolute; left:530px; top: 730px; width:150px; color: #f4f0e6;} - .summary p:first-child {display:none;} - .summary a{ color: #98B974; text-decoration:underline;} - .summary a:hover{ color: #f4f0e6; text-decoration:none;} - - .preamble { clear: right; padding: 10px 10px 0 65px; width:260px;} - .preamble h3 { display:block; width:100%; height:23px; background: url(title0.gif) no-repeat; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .preamble p {margin:5px 0 0 0; padding:0; color: #6F715C; font-style:italic;} - - .supporting { clear: right; padding: 20px 10px 0 0; margin:0; width:490px; background:url(dotedLine.gif) 10px 10px no-repeat;} - - .explanation {margin:0; padding: 0 0 0 65px; width:260px;} - .explanation h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .explanation p {margin:5px 0 0 0; padding:0; color: #53553F;} - - .participation {margin:10px 0 0 0; padding: 0 0 0 65px; width:260px;} - .participation h3 { display:block; width:100%; height:23px; background: url(title2.gif) no-repeat; margin:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .participation p {margin:5px 0 0 0; padding:0; color: #53553F;} - - .benefits {margin:10px 0 0 0; padding: 0 0 0 65px; width:260px;} - .benefits h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .benefits p {margin:5px 0 0 0; padding:0; color: #53553F;} - - .requirements {margin:10px 0 0 0; padding: 0 200px 0 65px; width:266px; background: url(bgBottom0.gif) right bottom no-repeat;} - .requirements h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .requirements p {margin:5px 0 0 0; padding:0; color: #53553F;} - - footer { padding: 20px 0 30px 45px; width:510px; background: url(bgBottom1.gif) 0px 0px no-repeat;} - footer a:link, footer a:visited { color:#fff; margin: 0 0 0 15px; } - footer a:hover { color:#3F753E;} - - .sidebar { position: absolute; top: 170px; right: 0px; color:#4C4E39;} - .sidebar .wrapper { font: 10px Tahoma, Verdana, Arial, sans-serif; width: 220px;} - .sidebar h3.select { background:url(subTitle0.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .sidebar h3.archives { background: transparent url(subTitle1.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .sidebar h3.resources { background: transparent url(subTitle2.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - .sidebar p, .sidebar li{ font: x-small/1.6em tahoma, verdana, sans-serif; text-indent: 0;} - - .sidebar ul { list-style: none; margin: 0; padding: 0; } - .sidebar li { color: #fff; padding: 2px 0 0 17px; } - .sidebar li a { display: block; border: none; color: #98B974; text-decoration:none; font-weight: bold; margin-left: -12px; padding-left: 12px; background: url(arrow.gif) no-repeat 0 2px;} - .sidebar li a:hover { color: #f4f0e6; background-position: 0 -48px; text-decoration:underline; } - .sidebar li a.designer-name { display: inline; padding: 0; margin: 0; background: none; color: #4C4E39; font-weight: normal; } - .sidebar li a.designer-name:hover { color: #f4f0e6; } - .sidebar .design-archives li,.sidebar .zen-resources li,.sidebar #lfavorites li { padding: 2px 0 0 5px; } - .sidebar .design-archives li a,.sidebar .zen-resources li a,.sidebar #lfavorites li a { background: transparent url(arrow.gif) no-repeat 0 2px; display: inline; padding-left: 17px; margin: 0;} - .sidebar .design-archives li a:hover,.sidebar .zen-resources li a:hover,.sidebar #lfavorites li a:hover { background-position: 0 -48px; } - - .extra1 { background: transparent url(cr2.gif) top left no-repeat; position: absolute; top: 40px; right: 0px; width: 148px; height: 110px; } \ No newline at end of file diff --git a/src/data/designs/148/metadata.json b/src/data/designs/148/metadata.json deleted file mode 100644 index dd308ad3fb1c905e7f2a48be4e0a9e083e1fb594..0000000000000000000000000000000000000000 --- a/src/data/designs/148/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "148", - "url": "https://www.csszengarden.com/148", - "css_url": "https://www.csszengarden.com/148/148.css", - "description": "This visual design features a clean and minimalistic layout with an emphasis on typography and balanced spacing. The dark gray background contrasts with the white text elements, providing a modern and sophisticated look. The design also includes vertical lines and a sidebar to separate different sections, adding structure without cluttering the visual flow.", - "categories": [ - "minimalism", - "typography", - "contrast", - "layout design", - "modern aesthetics" - ], - "visual_characteristics": [ - "high contrast", - "monochromatic palette", - "well-defined spacing", - "balanced composition", - "structured layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/148/screenshot_desktop.png b/src/data/designs/148/screenshot_desktop.png deleted file mode 100644 index 8623b6bb6002d0db75d76101fa27a62451dd62e3..0000000000000000000000000000000000000000 --- a/src/data/designs/148/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:858d138851af1316c46e7c8456ec08d9b69ca8a110b93d931827ad2a69f4655e -size 295076 diff --git a/src/data/designs/148/screenshot_mobile.png b/src/data/designs/148/screenshot_mobile.png deleted file mode 100644 index cc1a6b5e21211af277f53606113ed8abe5c22a4f..0000000000000000000000000000000000000000 --- a/src/data/designs/148/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0a6e864912c10108f062e531944ba1f00f0cba3cee826994faae352a7040bcca -size 297257 diff --git a/src/data/designs/148/style.css b/src/data/designs/148/style.css deleted file mode 100644 index 0b32880cd2b61e307e7d8e441c4001e58c9688cb..0000000000000000000000000000000000000000 --- a/src/data/designs/148/style.css +++ /dev/null @@ -1,489 +0,0 @@ -/* css Zen Garden submission 148 - 'Museum', by Samuel Marin, http://www.info.fundp.ac.be/~sma/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Samuel Marin */ -/* Added: Jan. 31st, 2005 */ - -/* 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. -*/ - - - - -/* -Tested and 100% compatible with: -================================ -Windows browsers: Internet Explorer 5.5/6, Netscape 6/7.1/7.2, Mozilla 1.7.3, Firefox 1.0 Previous Release/1.0, Opera 7.54 -Mac browsers (Mac OS X): Internet Explorer 5.2.3, Safari 1.2.3, Firefox 1.0 -Unix browsers: Mozilla 1.4.1/1.7b/1.7.3 (Linux), Firefox 0.9.3 (Linux), Galeon 1.3.10 (Linux), Opera 7.54 Final (Linux), Epiphany 1.4.4 (Linux), Mozilla 1.4 (Solaris) - -(Very) minor issues with: -========================= -Internet Explorer 5 (Windows) -Konqueror 3.1.4-6 (Linux) - -Graphics: -========= -The graphics are my own illustrations using Adobe Photoshop and Illustrator (some inspirations from google search images). - -Photos: -======= -The photos are from "http://www.sxc.hu/": -The tree and the enlighted path by Christopher Bruno (vxdigital) -> http://www.cbruno.com/ -The water lily by King Ayo (kingayo) -> http://www.kingayo.com (kingayo@wanadoo.fr) -The Butterfly by Dirk De Kegel (Magos) -> Dirk.De.Kegel@pandora.be -The flower by Troy Nulus (nulus) -> nulus@mail.com -The ladybug by Michal Zajac (babinicz) -> miczajac@poczta.onet.pl -The fledglings by Rob Waterhouse (Rob_W) -> robw349@hotmail.com - -Font: -===== -One of the font of the header and the titles of the linklist come from "http://www.dafont.com" and is free: -MK British Writing by Manfred Klein -> cybapee@joice.net - -References: -=========== -For information, here is the main references I used: - -* CSS The Definitive Guide (Eric Meyer) -* More Eric Meyer on CSS (Eric Meyer) -* And a lot of CSS from the Zen Garden website - -Thanks: -======= -Thanks to Charlotte Dereppe for her invaluable advices. - -*/ - -/* ============== - basic elements - ============== */ - -body { - background: #444444; - padding: 0px; - margin: 0px; - font: 13px Georgia, Serif; - color: #7f7f7f; - text-align: center; - } - -p { - padding: 0px; - margin: 0px; - } - -a:link, -a:visited { - text-decoration: underline; - color: #706F6A; - } - -a:hover, -a:active { - text-decoration: none; - color: #555555; - } - -/* ============= - specific divs - ============= */ - -/* --- container --- */ - -.page-wrapper { - background: #5d5d5d; - position: relative; - padding: 0px; - margin: 0px auto; - width: 760px; - text-align: left; - border-left: 1px solid #fff; - border-right: 1px solid #fff; - } - -/* --- intro --- */ - -.intro { - background: url(intro_bg.jpg) repeat-y left; - padding: 0px; - margin: 0px; - width: 760px; - } - -/* --- pageHeader --- */ - -header { - background: url(header_bg.jpg) no-repeat; - padding: 0px; - margin: 0px; - width: 760px; - height: 400px; - } - -header h1, -header h2 { - display: none; - } - -/* --- quickSummary --- */ - -.summary p:first-child { - display: none; - } - -.summary p:last-child { - font-size: 11px; - color: #ccc; - position: absolute; - top: 0px; - left: 2px; - } - -.summary p:last-child a:link, -.summary p:last-child a:visited { - text-decoration: underline; - color: #ccc; - } - -.summary p:last-child a:hover, -.summary p:last-child a:active { - text-decoration: none; - color: #ccc; - } - -/* --- preamble --- */ - -.preamble h3 { - background: url(preamble.jpg) no-repeat; - padding: 0px; - margin: 0px; - width: 560px; - height: 147px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.preamble { - background: url(preamble_bg.jpg) no-repeat top; - padding: 0px; - width: 560px; - } - -.preamble p { - text-indent: 2em; - } - -.preamble p:first-letter { - font-size: 180%; - font-weight: bold; - color: #444444; - } - -.preamble p:nth-child(2) { - padding: 10px 85px 10px 86px; - margin: -100px 0px 0px 0px; - } - -.preamble p:nth-child(3) { - padding: 0px 85px 20px 86px; - margin: 0px; - } - -.preamble p:nth-child(4) { - background: url(preamble_img.jpg) no-repeat bottom; - padding: 0px 85px 60px 280px; - margin: 0px; - } - -/* --- supporting text --- */ - -.supporting { - background: url(st_bg.jpg) repeat-y; - position: relative; - padding: 0px; - width: 560px; - } - -/* --- explanation --- */ - -.explanation h3 { - background: url(trans_prea_expl.jpg) no-repeat; - padding: 0px; - margin: 0px; - width: 560px; - height: 153px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.explanation { - background: url(explanation_bg.jpg) no-repeat top; - padding: 0px; - margin: 0px; - width: 560px; - } - -.explanation p { - text-indent: 2em; - } - -.explanation p:first-letter { - font-size: 180%; - font-weight: bold; - color: #444444; - } - -.explanation p:nth-child(2) { - padding: 10px 115px 10px 106px; - margin: 0px; - } - -.explanation p:nth-child(3) { - background: url(explanation_img.jpg) no-repeat bottom; - padding: 0px 115px 50px 106px; - margin: 0px; - } - -/* --- participation --- */ - -.participation h3 { - background:url(trans_expl_part.jpg) no-repeat; - padding: 0px; - margin: 0px; - height: 155px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - -.participation { - background: url(participation_bg.jpg) repeat-y; - padding: 0px; - margin: 0px; - width: 560px; - } - -.participation p { - text-indent: 2em; - } - -.participation p:first-letter { - font-size: 180%; - font-weight: bold; - color: #444444; - } - -.participation p:nth-child(2) { - padding: 10px 115px 10px 106px; - margin: 0px; - } - -.participation p:nth-child(3) { - padding: 0px 115px 10px 106px; - margin: 0px; - } - -.participation p:nth-child(4) { - background: url(participation_img.jpg) no-repeat bottom; - padding: 0px 160px 20px 161px; - } - -/* --- benefits --- */ - -.benefits h3 { - background: url(trans_part_bene.jpg) no-repeat; - padding: 0px; - margin: 0px; - height: 147px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.benefits { - background: url(benefits_bg.jpg) repeat-y; - padding: 0px; - margin: 0px; - width: 560px; - } - -.benefits p { - text-indent: 2em; - } - -.benefits p:first-letter { - font-size: 180%; - font-weight: bold; - color: #444444; - } - -.benefits p:nth-child(2) { - padding: 10px 145px 0px 146px; - margin: 0px; - } - -/* --- requirements --- */ - -.requirements h3 { - background: url(trans_bene_requ.jpg) no-repeat; - padding: 0px; - margin: 0px; - height: 230px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - -.requirements { - background: url(requirements.jpg) no-repeat bottom; - padding: 0px 0px 105px; - margin: 0px; - width: 560px; - } - -.requirements p { - padding: 0px 105px 10px 106px; - margin: 0px; - text-indent: 2em; - } - -.requirements p:first-letter { - font-size: 180%; - font-weight: bold; - color: #444444; - } - -.requirements p:nth-child(2) { - background: url(requirements_img.jpg) no-repeat top; - padding: 100px 105px 10px 106px; - margin: 0px; - } - -/* --- footer --- */ - -footer { - background: url(footer_bg.jpg) repeat-y; - font: 11px Georgia, Serif; - padding-top: 2px; - padding-left: 3px; - margin: 0px; - width: 560px; - height: 35px; - } - -footer a { - font-weight: bold; - padding: 0px; - } - -/* --- linkList --- */ - -.sidebar { - position: absolute; - top: 400px; - left: 570px; - padding: 0px; - margin: 0px; - width: 190px; - } - -.sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.sidebar .design-selection h3 { - background: url(header_lselect.jpg) no-repeat; - padding: 0px 5px 0px 5px; - margin: 0px; - height: 70px; - } - -.sidebar .design-archives h3 { - background: url(header_larchives.jpg) no-repeat; - padding: 0px 5px 0px 5px; - margin: 0px; - height: 70px; - } - -.sidebar .zen-resources h3 { - background: url(header_lresources.jpg) no-repeat; - padding: 0px 5px 0px 5px; - margin: 0px; - height: 70px; - } - -.sidebar ul { - background: url(linklist_bg.jpg) repeat-y; - padding: 0px 25px; - margin: 0px; - } - -.sidebar li { - display: block; - list-style-type: none; - font: 10px Georgia, Serif; - line-height: 14px; - font-weight: normal; - color: #D4D2D2; - text-align: left; - padding: 3px 2px 10px 2px; - margin: 0px; - border-bottom: 1px dotted #ccc; - } - -.sidebar li a:link, -.sidebar li a:visited, -.sidebar li a:visited:hover, -.sidebar li a:hover, -.sidebar li a:active { - font-style: normal; - padding-right: 5px; - } - -a.designer-name { - font-weight: normal ! important; - color: #D4D2D2 ! important; - padding: 0px 14px 0px 0px; - margin: 0px; - } - -.sidebar li a { - display: block; - font-weight: bold; - color: #fff; - } - -.sidebar li a.designer-name { - display: inline; - padding: 0px; - margin: 0px; - } - -.design-archives, -.design-selection { - background: #fff url(linklist_footer.jpg) no-repeat bottom; - padding: 0px 0px 127px 0px; - margin: 0px 0px 10px 0px; - width: 190px; - } - -.zen-resources { - background: #fff url(linklist_footer_guard.jpg) no-repeat bottom; - padding: 0px 0px 127px 0px; - margin: 0px 0px 10px 0px; - width: 190px; - } diff --git a/src/data/designs/149/metadata.json b/src/data/designs/149/metadata.json deleted file mode 100644 index cb38f73ea8c6e21c49a92ccf2545adaba90e8d1d..0000000000000000000000000000000000000000 --- a/src/data/designs/149/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "149", - "url": "https://www.csszengarden.com/149", - "css_url": "https://www.csszengarden.com/149/149.css", - "description": "The design features a minimalist and zen-inspired layout with a clean and soothing color palette. The use of a split layout effectively divides primary content from navigation, supported by a subtle texture and simple typography. The overall mood is calming and organized, suitable for users seeking thoughtful design exploration.", - "categories": [ - "minimalist", - "zen", - "web design", - "educational" - ], - "visual_characteristics": [ - "soothing color palette", - "clean typography", - "split layout", - "textured background" - ] -} \ No newline at end of file diff --git a/src/data/designs/149/screenshot_desktop.png b/src/data/designs/149/screenshot_desktop.png deleted file mode 100644 index efa04d82962c6df44520c5a06a2814dd4f259585..0000000000000000000000000000000000000000 --- a/src/data/designs/149/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8af515d727c3a46faa5c7cdd3bd6c73f2e1a35b960aeb642f59f52c56b1d1816 -size 464447 diff --git a/src/data/designs/149/screenshot_mobile.png b/src/data/designs/149/screenshot_mobile.png deleted file mode 100644 index 982b1911c17ee1279ac19f0802acc0fb8e0bb376..0000000000000000000000000000000000000000 --- a/src/data/designs/149/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:146c6120645e679a098cc23e4e571329632f65865cb58f76d02ae5c2d4ad9ecd -size 335253 diff --git a/src/data/designs/149/style.css b/src/data/designs/149/style.css deleted file mode 100644 index 1e4698a3dc54b2a8f9c29ca4a532980e9aea4692..0000000000000000000000000000000000000000 --- a/src/data/designs/149/style.css +++ /dev/null @@ -1,231 +0,0 @@ -/* css Zen Garden submission 149 - 'Uncultivated', by Mario Carboni, http://www.mariocarboni.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Mario Carboni */ -/* Added: Jan. 31st, 2005 */ - -/* 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. */ - - - - -/* general _______________________________________________________________________________*/ -* { - padding: 0; - margin: 0; -} -body { - font: 11px/1.3em Arial,Helvetica,sans-serif; - text-align: center; - background: #bebcad; - } -p { - text-align: justify; - padding: 5px 30px 15px 30px; - color: #786A47; - line-height: 1.5em; - } -a{ - text-decoration: none; - background: transparent url(dotlink.gif) repeat-x left bottom; -} -a:link ,a:visited { - color: #5785A4; -} -a:hover { - color: #1D8FDB; -} -abbr { - background: transparent url(dot.gif) repeat-x left bottom; - cursor: help; -} -h3 { - font: normal 10px/12px Arial,Helvetica,sans-serif; - text-transform: uppercase; - margin: 20px 0 0 30px; - color: #574D33; -} -ul { - list-style: none; - margin: 10px 20px 30px 10px; -} -li { - padding-left: 1px; - margin: 10px 0 0 8px; - display: block; - list-style: none; - background: transparent url(dot.gif) repeat-x 0 100%; -} - - -/* grid _______________________________________________________________________________*/ -.page-wrapper { - margin: 0 auto; - text-align: left; - width: 580px; - background: url(container.gif) repeat-y center top; - position: relative; - } -.summary { - background: transparent url(quicksummary.gif) no-repeat top left; - height: 178px; -} -.preamble,.supporting { - padding-right: 200px; -} -.supporting { - background: transparent url(foot2.jpg) no-repeat 0 100%; -} -.zen-resources { - padding-bottom: 220px; - background: transparent url(flowers.jpg) no-repeat 0 100%; -} -footer { - height: 34px; - line-height: 34px; - text-align: center; - padding-bottom: 14px; -} -.sidebar { - position: absolute; - top: 210px; - right: 0; - width: 210px; -} -.extra1 { - position: absolute; - top: 0; - left: 0; - background: transparent url(uncultivated.gif) no-repeat; - width: 43px; - height: 297px; -} -.extra2, .extra3, .extra4, .extra5, .extra6 { - display: none; -} - -/* headers _______________________________________________________________________________*/ - -header h1 { - background: transparent url(csszen.jpg) no-repeat top left; - width: 580px; - height: 40px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h2 { - background: transparent url(beauty.jpg) no-repeat top left; - width: 580px; - height: 169px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar h3.select { - background: transparent url(styles.jpg) no-repeat top left; - height: 39px; - margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar h3.archives { - background: transparent url(archives.jpg) no-repeat top left; - height: 39px; - margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar h3.resources { - background: transparent url(resources.jpg) no-repeat top left; - height: 39px; - margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/* p _______________________________________________________________________________*/ - -.summary p:first-child { - display: none; -} -.summary p:last-child { - margin-right: 200px; - color: #382A07; - text-align: right; - padding-top: 150px; -} - -.preamble p, .supporting p{ - margin: 0 10px; - background: url(p.gif); -} - -.requirements p:nth-child(5){ - margin-bottom: 40px; -} -.requirements p:nth-child(6){ - margin-bottom: 110px; - text-align: center; -} - -/* links _______________________________________________________________________________*/ - -footer a{ - text-decoration: underline; -} -footer a:link, footer a:visited { - color: #c6c6c6; -} -footer a:hover { - color: #fff; -} - -.sidebar li a { - display: block; - font-weight: bold; - color: #E5D9BC; - text-decoration:none; - margin-left: -5px; - padding-left: 19px; - padding-bottom: 4px; - background: url(dot2.gif) no-repeat 0 1px; -} -.sidebar li a:hover { - color: #7ECDFF; - background: transparent url(dot2on.gif) no-repeat 0 1px; -} -.sidebar li a.designer-name { - display: inline; - padding: 0; - margin: 0; - background: none; - color: #595339; - font-weight: normal; -} -.sidebar li a.designer-name:hover { - color: #7ECDFF; -} -.sidebar .design-archives li,.sidebar .zen-resources li,.sidebar #lfavorites li { - padding: 2px 0 0 7px; -} -.sidebar .design-archives li a,.sidebar .zen-resources li a,.sidebar #lfavorites li a { - background: transparent url(dot2.gif) no-repeat 0 1px; - display: block; - padding-left: 19px; - padding-bottom: 5px; - margin: 0 0 0 -11px; -} -.sidebar .design-archives li a:hover,.sidebar .zen-resources li a:hover,.sidebar #lfavorites li a:hover { - background: transparent url(dot2on.gif) no-repeat 0 1px; -} \ No newline at end of file diff --git a/src/data/designs/150/metadata.json b/src/data/designs/150/metadata.json deleted file mode 100644 index f852c0102ef8cc6057f8de805791b9c657c05c97..0000000000000000000000000000000000000000 --- a/src/data/designs/150/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "150", - "url": "https://www.csszengarden.com/150", - "css_url": "https://www.csszengarden.com/150/150.css", - "description": "This design features a serene and modern aesthetics with a bold blue background and a blurred header image of water lilies, creating a tranquil yet dynamic mood. The typography is clean and diverse, combining uppercase, lowercase, and italic styles to provide a harmonious reading experience. The layout is well-organized, with text blocks and navigation thoughtfully aligned to guide the viewer through the content smoothly.", - "categories": [ - "Web Design", - "Minimalism", - "Typography", - "Modern Art", - "Color Theory" - ], - "visual_characteristics": [ - "Vibrant Color Palette", - "Blurred Imagery", - "Clean Typography", - "Organized Layout", - "Modern Aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/150/screenshot_desktop.png b/src/data/designs/150/screenshot_desktop.png deleted file mode 100644 index fba8c75e092b70dae89e255f41446143ff8e80a9..0000000000000000000000000000000000000000 --- a/src/data/designs/150/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a99579ee440d716230e1349b9f35e5adfb623ba5fb5ad1e9aeededc74459ef19 -size 607382 diff --git a/src/data/designs/150/screenshot_mobile.png b/src/data/designs/150/screenshot_mobile.png deleted file mode 100644 index 860d0a2d14cd0cfed6562044f06c0bd4a30eb6c4..0000000000000000000000000000000000000000 --- a/src/data/designs/150/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d24e7251153a96d6b3f4ede0a12ad5d04a398e5f5758cfac7e3b351ffc52f39c -size 523349 diff --git a/src/data/designs/150/style.css b/src/data/designs/150/style.css deleted file mode 100644 index ea4f1cfa1c4055b23279cf284cf37b3b474fa7f6..0000000000000000000000000000000000000000 --- a/src/data/designs/150/style.css +++ /dev/null @@ -1,382 +0,0 @@ -/* css Zen Garden submission 150 - 'By The Pier', by Peter Ong, http://peter.rock.per.sg/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Peter Ong */ -/* Added: Jan. 31st, 2005 */ - -/* 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. */ - - - -/* basic elements */ - -body -{ - color: #fc3; - font-size: 11px; - font-family: Arial, Helvetica, sans-serif; - line-height: 17px; - background-color: #000; - text-align: center; - margin: 0; - padding: 0; -} - -a:link -{ - color: #cf6; - font-weight: bold; - text-decoration: none; -} - -a:visited -{ - color: #007f00; - font-weight: bold; - text-decoration: none; -} - -a:hover, a:active -{ - color: #f60; - text-decoration: none; - border-bottom: 1px dotted #005e00; -} - - - -/* specific divs */ -.page-wrapper -{ - background-color: #0c3379; - text-align: left; - margin: 8px auto; - padding: 0; - width: 640px; -} - -abbr -{ - color: #ffff67; - font-style: italic; - font-weight: bold; - text-decoration: none; - border-width: 0; -} - -.intro -{ - background-image: url("masthead.jpg"); - background-repeat: no-repeat; - background-position: center top; - margin: 0; - padding: 0; - width: 640px; - height: 445px; -} - -header -{ - display: none; - margin: 0; - padding: 0; -} - - -h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary -{ - width: 300px; - margin: 0 0 0; - padding: 154px 0 0; - position: absolute; -} - -.summary p:first-child { - display: none; -} - -.summary p:last-child -{ - color: #699fc8; - font-size: 10px; - text-align: left; - margin: 0; - padding: 0 0 0 12px; - position: absolute; - top: 150px; - float: left; -} - -.preamble -{ - margin: 0; - padding: 233px 0 10px 0; - width: 375px; - float: right; -} - -.supporting { clear: right; } - -.explanation, .participation, .benefits, .requirements -{ - background-color: #0c3379; - padding-bottom: 10px; - width: 375px; - float: right; - clear: both; -} - -.preamble h3 -{ - background-image: url("enlightenment.gif"); - background-repeat: no-repeat; - background-position: right 0; - margin: 199px 0 8px; - padding: 0; - width: 375px; - height: 35px; - float: right; -} - -.participation h3 -{ - background-image: url("participation.gif"); - background-repeat: no-repeat; - background-position: right 0; - margin: 8px 0; - padding: 0; - width: 375px; - height: 35px; - float: right; -} - -.requirements h3 -{ - background-image: url("requirements.gif"); - background-repeat: no-repeat; - background-position: right 0; - margin: 8px 0; - padding: 0; - width: 375px; - height: 35px; - float: right; -} - -.benefits h3 -{ - background-image: url("benefits.gif"); - background-repeat: no-repeat; - background-position: right 0; - margin: 8px 0; - padding: 0; - width: 375px; - height: 35px; - float: right; -} - -.explanation h3 -{ - background-image: url("whatabout.gif"); - background-repeat: no-repeat; - background-position: right 0; - margin: 8px 0; - padding: 0; - width: 375px; - height: 35px; - float: right; -} - -p:nth-child(2), p:nth-child(3), p:nth-child(4), p:nth-child(5), p:nth-child(6) -{ - text-align: left; - margin: 0; - padding: 0 0 8px 15px; - width: 320px; - float: left; -} - -.preamble h3, .participation h3, .explanation h3, .benefits h3, .requirements h3 -{ - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -footer -{ - background-image: url("base.jpg"); - background-repeat: no-repeat; - background-position: center bottom; - text-align: center; - margin-right: auto; - margin-left: auto; - padding-top: 100px; - padding-bottom: 20px; - width: 640px; - clear: both; -} - -footer a:link, footer a:visited -{ - font-weight: bold; - margin-top: 0; - padding-bottom: 50px; -} - -.sidebar -{ - background-color: #0c3379; - position: absolute; - top: 440px; - width: 210px; -} - -.design-selection -{ - margin: 0; - padding: 0 0 0 0; -} - -.design-selection h3 -{ - margin: 0 0 0 40px; - padding: 0; -} - -.sidebar ul li -{ - font-size: 10px; - list-style-type: none; - margin: 0; - padding: 0 0 5px; -} - -.sidebar ul -{ - text-align: right; - list-style-type: none; - margin-top: 0; - margin-right: 0; - margin-bottom: 18px; - padding: 0; -} - -.sidebar h3.select -{ - background-image: url("select.gif"); - background-repeat: no-repeat; - margin: 0 0 0 0; - padding: 0 0 8px; - width: 210px; - height: 35px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -.sidebar h3.archives -{ - background-image: url("archives.gif"); - background-repeat: no-repeat; - margin: 0 0 0 0; - padding: 0 0 8px; - width: 210px; - height: 35px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar h3.resources -{ - background-image: url("resources.gif"); - background-repeat: no-repeat; - margin: 0 0 0 0; - padding: 0 0 8px; - width: 210px; - height: 35px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar .design-selection li a:link -{ - - font-size: 10px; - color: #cf6; - text-decoration: none; - text-transform: uppercase; - display: block; - padding: 2px 4px; -} - -.sidebar .design-selection li a:hover -{ - - font-size: 10px; - color: #f60; - text-decoration: none; - display: block; - padding: 2px 4px; - border-width: 0; -} - -.sidebar .design-selectionli a:visited -{ - - font-size: 10px; - color: #5bbb11; - text-decoration: none; - display: block; - padding: 2px 4px; -} - -.sidebar .design-selection ul li a.designer-name -{ - - font-size: 10px; - color: #fff; - font-style: italic; - text-decoration: none; - text-transform: none; - display: inline; - padding: 2px 4px; -} - -.sidebar li a:link -{ - color: #cf6; - text-decoration: none; - text-transform: uppercase; - padding: 2px 4px; -} - -.sidebar li a:hover -{ - color: #f60; - text-decoration: none; - text-transform: uppercase; - padding: 2px 4px; - border-width: 0; -} - -.sidebar li a:visited -{ - color: #5bbb11; - text-decoration: none; - text-transform: uppercase; - padding: 2px 4px; -} diff --git a/src/data/designs/151/metadata.json b/src/data/designs/151/metadata.json deleted file mode 100644 index 41b7ec02626cdb72578365bf121b34b90dd30794..0000000000000000000000000000000000000000 --- a/src/data/designs/151/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "151", - "url": "https://www.csszengarden.com/151", - "css_url": "https://www.csszengarden.com/151/151.css", - "description": "The design features a clean, minimalistic aesthetic with a light color palette, emphasizing readability and a structured layout. It incorporates elegant typography and subtle graphic elements like leaves, enhancing the organic and serene feel. Key sections are distinctly boxed, creating a clear hierarchy and easy navigation throughout the page.", - "categories": [ - "minimalistic design", - "organic theme", - "typography-focused", - "structured layout", - "clean aesthetic" - ], - "visual_characteristics": [ - "light color palette", - "elegant typography", - "boxed sections", - "subtle graphic accents", - "clear hierarchy" - ] -} \ No newline at end of file diff --git a/src/data/designs/151/screenshot_desktop.png b/src/data/designs/151/screenshot_desktop.png deleted file mode 100644 index 8df3c2fb24bda40b6a3185b2ef38805070694c4f..0000000000000000000000000000000000000000 --- a/src/data/designs/151/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:057e6ba927b787a614c9b6517a80cb24af48376812350d5aaf5f6b1dd5c47374 -size 521940 diff --git a/src/data/designs/151/screenshot_mobile.png b/src/data/designs/151/screenshot_mobile.png deleted file mode 100644 index b1c8d7cc377ca7e77693b82a71027f548e4ab99d..0000000000000000000000000000000000000000 --- a/src/data/designs/151/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:410d88e13151d897037704da5524bfb5290cab0da2dc9d8ba49f44fe957f65b2 -size 360058 diff --git a/src/data/designs/151/style.css b/src/data/designs/151/style.css deleted file mode 100644 index b1b1d3b0cca29fa23aa799cb4d7ac575d5fd07ac..0000000000000000000000000000000000000000 --- a/src/data/designs/151/style.css +++ /dev/null @@ -1,274 +0,0 @@ -/* css Zen Garden submission 151 - 'Contempo Finery', by Ro London, http://www.intersmash.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Ro London */ -/* Added: Jan. 31st, 2005 */ - -/* 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. */ - - - -*{ - margin:0; - padding:0; - background-repeat:no-repeat; -} -body{ - font-family:arial,helvetica,sans-serif; - color:#888; - background-color:white; - font-size:small; - margin-top:100px; - text-align:center; - background-image:url(z-background2.gif); - background-repeat:repeat-y; - background-position:center top; -} -div, p, h2, h1{ - text-align:left; - width:247px; -} -h3{ - width:200px; - padding:0px; - color:white; - font-size:1px; - height:60px; - text-indent:-1000px; -} -abbr{ - cursor: help; -} -.page-wrapper{ - width:500px; - margin-left:auto; - margin-right:auto; -} -p{ - line-height:150%; - display:block; - padding:0 22px 22px 22px; - width: 203px; -} -.intro{ - float:left; -} -.supporting{ - float:left; - width:250px; -} -header{ - height:240px; - background-image:url(z-header2.gif); - background-position:0 0; -} -header *{ - display:none; -} -.summary{ - height:470px; - background-image:url(z-d.gif); -} -.summary * { - display:none; -} -.preamble{ - margin-top:800px; - background-image:url(z-e.gif); - background-position:0 0; - color:#966; -} -.preamble p { - text-align:center; -} -.preamble p:nth-child(4){ - padding-bottom:30px; -} -.preamble h3{ - padding:20px; - height:115px; -} -.explanation h3{ - background-image:url(z-h1.gif); - background-position:7px 12px; - margin-left:4px; -} -.participation, .explanation, .benefits, .requirements{ - background-image:url(zbg.gif); -} -.participation h3{ - background-image:url(z-h2.gif); - background-position:7px 12px; - margin-left:4px; -} -.benefits h3{ - background-image:url(z-h3.gif); - background-position:7px 12px; - margin-left:4px; -} -p{ - background-image:url(zbg.gif); - background-position:0 -50px; -} -.requirements p:nth-child(6){ - background-image:none; -} -.requirements p:nth-child(6){ - padding-top:50px; - background-image:url(z-leaf3.gif); - background-position:right center; - margin-top:0px; - margin-bottom:100px; - font-size:x-small; - color:#ccc; - text-align:center; - background-color:#fff; - height:250px; - margin-right:30px; -} -.requirements p:nth-child(6) a{ - color:#aaa; - text-decoration:none; - font-style:italic; -} -.requirements h3{ - background-image:url(z-h4.gif); - background-position:7px 12px; - margin-left:4px; -} -.requirements p:nth-child(5), .benefits p:nth-child(2), .participation p:nth-child(4), .explanation p:nth-child(3), .preamble p:nth-child(4) { - background-image:url(zbg.gif); - background-position:center bottom; -} -.sidebar{ - clear:both; - position:absolute; - top:811px; - left:50%; - z-index:5; - margin-left:-258px; - * margin-left:-250px; - width:247px; - background-image:url(zbg.gif); - background-position:0 -401px; - height:799px; - overflow:hidden; - padding-bottom:0px; - *padding-bottom:0; -} -head+body .sidebar{ - margin-left:-250px; - padding-bottom:0; -} -.sidebar h3{ - height:60px; - width:247px; - background-position:0 0; -} -.select{ - background-image:url(z-s3.gif); -} -.archives{ - background-image:url(z-s4.gif); - margin-top:30px; -} -.resources{ - background-image:url(z-s5.gif); - margin-top:30px; -} -.design-selection{ - background-image:url(zbg.gif); -} -li, ul{ - list-style-type:none; -} -a{ - color:#366; -} -a:hover{ - background-color:#eee; -} -li{ - display:block; - width:247px; - min-height:20px; - * height:20px; - margin-bottom:9px; - * margin-bottom:0; - background-image:url(zbg.gif); - background-position:0 -40px; -} -li a{ - margin-left:2px; - border-right:2px solid #fff; - border-left:2px solid #fff; - display:block; - width:239px; - height:100%; - font-size:x-small; - text-transform:uppercase; - text-decoration:none; - color:#699; - text-align:center; - padding: 2px 0 2px 0; -} -li a:hover{ - background-color:#f3f3f3; - border-right:2px solid #f3f3f3; - border-left:2px solid #f3f3f3; -} -li .c{ - display:none; -} -footer{ - position:absolute; - top:0px; - left:50%; - overflow:hidden; - height:24px; - width:240px; - background-color:#ededed; - text-align:center; - background-image:url(z-cr.gif); - background-position:bottom right; - line-height:15px; -} -footer a{ - color:#999; - text-decoration:none; - font-size:x-small; - text-transform:uppercase; -} -footer a:hover{ - color:#333; -} -.extra2{ - width:35px; - height:24px; - position:absolute; - left:50%; - margin-left:-24px; - top:0px; - background-image:url(z-cl.gif); - background-position:bottom left; -} -.extra1{ - width:102px; - height:235px; - position:absolute; - left:50%; - margin-left:-351px; - top:520px; - background-image:url(z-leaf2.gif); -} -.design-selection li{ - text-align:center; - * text-align:left; - font-size:1px; - color:white; -} -a:visited{ - color:#7E84A1; -} \ No newline at end of file diff --git a/src/data/designs/152/metadata.json b/src/data/designs/152/metadata.json deleted file mode 100644 index 110263940e592e73e9c0ebfa692a78a295a471cd..0000000000000000000000000000000000000000 --- a/src/data/designs/152/metadata.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "id": "152", - "url": "https://www.csszengarden.com/152", - "css_url": "https://www.csszengarden.com/152/152.css", - "description": "The design features a bold and vibrant purple color scheme, with a strong illustrative element that draws attention at the top. The layout effectively uses contrast and typography to guide the viewer\u2019s eye through the content, while incorporating playful and artistic designs that emphasize creativity and visual storytelling.", - "categories": [ - "Web Design", - "Illustration", - "Typography", - "Creative Arts" - ], - "visual_characteristics": [ - "Vibrant Color", - "Contrasting Typography", - "Illustrative Elements", - "Structured Layout", - "Artistic Style" - ] -} \ No newline at end of file diff --git a/src/data/designs/152/screenshot_desktop.png b/src/data/designs/152/screenshot_desktop.png deleted file mode 100644 index 33cd3c36066f8c84c8faac4bef9e4c44d8ae2737..0000000000000000000000000000000000000000 --- a/src/data/designs/152/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a250185481e854d40a104e89a5da5133ed6a25dc1ed12d8fd9f6b4f5c24fae5c -size 437807 diff --git a/src/data/designs/152/screenshot_mobile.png b/src/data/designs/152/screenshot_mobile.png deleted file mode 100644 index 123300239048d7dc6fdbc3e0e14cc9a19fdaeb1e..0000000000000000000000000000000000000000 --- a/src/data/designs/152/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:035f92806505363ec21053ad53aa88d36b3958a5e4ddd68fa04748a8f2f7c80b -size 402242 diff --git a/src/data/designs/152/style.css b/src/data/designs/152/style.css deleted file mode 100644 index ffa1217f67f31d4f939d39d3032630a3b4d53d39..0000000000000000000000000000000000000000 --- a/src/data/designs/152/style.css +++ /dev/null @@ -1,185 +0,0 @@ -/* css Zen Garden submission 152 - 'Subway Dream', by Pablo Caro, http://www.nuevostudio.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Pablo Caro */ -/* Added: Jan. 31st, 2005 */ - -/* 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. */ - - - - -body#css-zen-garden { -background: url(trama.gif); -margin: 0; -padding: 0; -font-size: 70%; -font-family: 'Lucida Grande','Lucida Sans Unicode',arial,verdana,sans-serif; -color: #B198C5; -} -p { -line-height: 170%; -text-indent: 30px; -} -a { -color: #BA76FF; -text-decoration: none; -} -a:hover { color: #F286FF; } -abbr { -font-style: normal; -color: #CCAFE3; -cursor: help; -} - - -/*POSITIONING======================================*/ -.page-wrapper { -position: relative; -background: #2E0154 url(background.gif) no-repeat top center; -border-left: 5px solid #CD9FF3; -border-right: 5px solid #CD9FF3; -margin: 0 auto; -width: 720px; -} -.intro { -width: 100%; -background: transparent url(girl.gif) no-repeat; -} - -header { -width: 720px; -height: 55px; -} -.summary { -margin-top: 237px; -margin-left: 270px; -width: 425px; -height: 166px; -background: transparent url(quicksum.gif) no-repeat; -} -.preamble { -margin-left: 75px; -margin-right: 280px; -background: transparent url(back_flowers.gif) no-repeat 0 0; -} - -.supporting { -margin-left: 75px; -margin-right: 275px; -} -.explanation { background: transparent url(back_flowers.gif) no-repeat 100% 100%; } -.participation { background: transparent url(back_flowers.gif) no-repeat 100% 0%; } -.benefits { background: transparent url(back_flowers.gif) no-repeat 0% 0%; } -.requirements { background: transparent url(back_flowers.gif) no-repeat 100% 0%; } -.sidebar { -position: absolute; -top: 515px; -left: 480px; -width: 225px; -background: transparent url(back_list.gif) repeat-y; -} -footer { -padding: 25px 0; -text-align: center; -text-transform: uppercase; -background: transparent url(footer.gif) no-repeat 50% 50%; -} - -/*HEADERS======================================*/ -header h1, -header h2 { -display: none; -} -.preamble h3 { -position: relative; -left: -20px; -display: block; -height: 57px; -background: transparent url(title_the_road.gif) no-repeat; -text-indent: -1500px; -} -.supporting h3 { -position: relative; -left: -20px; -display: block; -height: 58px; -text-indent: -1500px; -} -.explanation h3 {background: transparent url(title_so_what.gif) no-repeat;} -.participation h3 {background: transparent url(title_participation.gif) no-repeat;} -.benefits h3 {background: transparent url(title_benfits.gif) no-repeat;} -.requirements h3 {background: transparent url(title_requirements.gif) no-repeat;} -.sidebar .wrapper h3 { -display: block; -height: 35px; -margin: 0px 30px; -text-indent: -1500px;} -.design-selection h3 {background: transparent url(title_select.gif) no-repeat;} -.design-archives h3 {background: transparent url(title_archives.gif) no-repeat;} -.zen-resources h3 {background: transparent url(title_resources.gif) no-repeat;} - -/*LISTS======================================*/ -.sidebar ul { -margin: 0 10px 0 35px; -padding-left: 0; -padding-bottom: 10px; -list-style-type: none; -font-family: 'Lucida Grande','Lucida Sans Unicode',arial,verdana,sans-serif; -font-size: 10px; -} - -.design-selection ul li { -padding-left: 20px; -} - -.design-selection ul li a { -margin-left: -25px; -padding-left: 25px; -background: transparent url(bullet_flower.gif) no-repeat 0 50%; -line-height: 25px; -text-decoration: none; -display: block; -clear: both; -text-transform: uppercase; -} -.design-selection ul li a:hover { -color: #F286FF; -background-image: url(bullet_flower_on.gif); -} -.design-selection ul li a.designer-name { -margin-left: 0; -padding-left: 0px; -padding-right: 12px; -background-image: none; -display: inline; -clear: none; -text-transform: none; -color: #B198C5; -} -.design-selection ul li a.designer-name:hover { -color: #F286FF; -background: transparent url(bullet_stah.gif) no-repeat 100% 50%; -} -.design-selection ul li a.designer-name:hover { color: #F286FF; } - -.design-archives ul li a, .zen-resources ul li a { -display:block; -padding-left: 25px; -background: transparent url(bullet_oval.gif) no-repeat 0 50%; -line-height: 25px; -text-decoration: none; -} -.design-archives ul li a:hover, .zen-resources ul li a:hover { background-image: url(bullet_oval_on.gif); } - -/*VARIOUS======================================*/ -.summary p:first-child { display: none; } - -.summary p:last-child -{ -text-indent: 4px; -padding-top: 140px; -text-transform: uppercase; -} diff --git a/src/data/designs/153/metadata.json b/src/data/designs/153/metadata.json deleted file mode 100644 index 757adba9421b03f647485ca20b164a2c06f44569..0000000000000000000000000000000000000000 --- a/src/data/designs/153/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "153", - "url": "https://www.csszengarden.com/153", - "css_url": "https://www.csszengarden.com/153/153.css", - "description": "The design showcases a minimalistic approach with a strong monochromatic color palette, primarily using various shades of green to create a cohesive and calming effect. The layout is clean and organized, with a clear distinction between the main content and navigation areas. Typography is straightforward and easily readable, contributing to the overall simplicity. The design exudes a classic and elegant style suitable for focused reading and meditation on content.", - "categories": [ - "Minimalist", - "Classic", - "Monochrome", - "Typography-focused", - "Elegant" - ], - "visual_characteristics": [ - "Monochromatic color scheme", - "Simple layout", - "Readable typography", - "Calm and cohesive", - "Organized structure" - ] -} \ No newline at end of file diff --git a/src/data/designs/153/screenshot_desktop.png b/src/data/designs/153/screenshot_desktop.png deleted file mode 100644 index 6570401920e393113b81c7c7ca4eed8ef28df14f..0000000000000000000000000000000000000000 --- a/src/data/designs/153/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:007ec48f26ada6acdf55c7c97c69177631ede934472f0172536938a0c2c76168 -size 688941 diff --git a/src/data/designs/153/screenshot_mobile.png b/src/data/designs/153/screenshot_mobile.png deleted file mode 100644 index 186041968a1fc178d5913b69b3d65edb32858353..0000000000000000000000000000000000000000 --- a/src/data/designs/153/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0c522cd0d3979c0564eb49baf2a038f343b9f9704e0a88c36777e933f42af716 -size 494640 diff --git a/src/data/designs/153/style.css b/src/data/designs/153/style.css deleted file mode 100644 index 4b22e06687f0876d107310af3fbd9db75abd370a..0000000000000000000000000000000000000000 --- a/src/data/designs/153/style.css +++ /dev/null @@ -1,225 +0,0 @@ -/* css Zen Garden submission 153 - 'Moss', by Mani Sheriar, http://www.manisheriar.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Mani Sheriar */ -/* Added: Mar. 7th, 2005 */ - -/* 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. */ - - - -/* CSS Document */ - -* { - padding:0; - margin:0; - border:0; - } -* html #content { - margin-bottom:-600px; - } /*IE */ -body { - background:#2B411B url(bg2.gif) repeat; - padding-bottom:600px; - } -abbr, abbr { - font-style:italic; - cursor:help; - } -a { - color:#A7D277; - text-decoration:underline; - } -a:hover { - color:#28411C; - background-color:#8DBB5A; - text-decoration:none; - } -.page-wrapper { - position:relative; - width:818px; - padding:125px 0 0 18px; - background:url(bg.jpg) repeat-y; - margin:0 0 -1200px 0; - } -.intro, .supporting { - position:relative; - width:500px; - backgroun-color:#2B411B - } -header { - position:absolute; - top:-125px; - left:-18px; - width:813px; - height:201px; - background:url(logo.jpg) no-repeat; - z-index:1; - } -h1, h2, .preamble h3, .supporting .explanation h3, .supporting .participation h3, .supporting .benefits h3, .supporting .requirements h3, h3.select, h3.archives, h3.resources { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.summary { - margin:0 0 50px 0; - } -.summary p:first-child { - position:relative; - font:normal 15px/17px Georgia, "Times New Roman", Times, serif; - color:#C9E2AB; - z-index:2; - } -.summary p:last-child { - position:absolute; - top:-100px; - left:568px; - width: 141px; - font:normal 13px/16px Georgia, "Times New Roman", Times, serif; - color:#C9E1AA; - z-index:3; - } -.summary p:last-child a:hover { - color:#69913E; - background-color:#C9E1AA; - text-decoration:none; - } -.preamble p, .supporting p { - font:normal 13px/16px Verdana, Arial, Helvetica, sans-serif; - color:#A3C979; - margin:12px 0; - } -.preamble h3 { - width:227px; - height:36px; - background:url(enlightenment.gif) no-repeat; - margin:30px 0 -10px -2px; - } -.explanation h3 { - width:233px; - height:36px; - background:url(about.gif) no-repeat; - margin:30px 0 -10px -2px; - } -.preamble p:nth-child(4) { - margin:12px 0 0 0; - } -.participation h3 { - width:114px; - height:36px; - background:url(participation.gif) no-repeat; - margin-top:30px; - margin-bottom:-10px; - } -.benefits h3 { - width:114px; - height:36px; - background:url(benefits.gif) no-repeat; - margin-top:30px; - margin-bottom:-10px; - } -.requirements h3 { - width:150px; - height:36px; - background:url(requirements.gif) no-repeat; - margin-top:30px; - margin-bottom:-10px; - } -.sidebar { - position:absolute; - width:174px; - top: 100px; - left: 572px; - font:normal 10px/12px Verdana, Arial, Helvetica, sans-serif; - color:#69913E; - z-index:4; - } -.sidebar .design-selection li { - margin-bottom:8px; - } -.sidebar a { - font:bold 12px/12px Georgia, "Times New Roman", Times, serif; - color:#E7F9D3; - display:block; - background-color:#B1D48A; - text-decoration:none; - margin:0 0 1px 0; - } -.sidebar a:hover { - color:#436023; - } -.sidebar .design-selection a.designer-name, .sidebar .design-archives a, .sidebar .zen-resources a { - font:normal 10px/12px Verdana, Arial, Helvetica, sans-serif; - color:#69913E; - display:inline; - text-decoration:underline; - } -.sidebar .design-selection a.designer-name:hover, .sidebar .design-archives a:hover, .sidebar .zen-resources a:hover { - color:#C9E1AA; - background-color:#66992D; - text-decoration:none; - } -.sidebar h3 { - margin:25px 0 0 0; - height:54px; - } -.sidebar ul { - margin:-25px 0 0 20px; - list-style-type:none; - list-style-image:url(bullet.gif); - } -.sidebar ul li { - margin:0 0 4px 0; - } -h3.select, h3.archives, h3.resources { - background-repeat:no-repeat; - } -h3.select { - background-image:url(design.gif); - width:124px; - } -h3.archives { - background-image:url(archives.gif); - width:81px; - } -h3.resources { - background-image:url(resources.gif); - width:84px; - } -footer { - position:relative; - left:-18px; - background:url(footer.jpg) no-repeat bottom left; - width:615px; - height:47px; - padding:60px 220px 0 0; - text-align:center; - } -footer a { - color:#C9E1AA; - } -footer a:hover { - color:#69913E; - background-color:#C9E1AA; - } -.extra1 { - position:relative; - top:600px; - left:561px; - height:600px; - width:454px; - background:url(tree.jpg) no-repeat bottom left; - z-index:5; - } -.extra2 { - position:relative; - top:0; - left:561px; - height:600px; - width:454px; - background:url(treeBg.gif) no-repeat bottom left; - margin-bottom:-600px; - z-index:6; - } \ No newline at end of file diff --git a/src/data/designs/154/metadata.json b/src/data/designs/154/metadata.json deleted file mode 100644 index eb3e90d815e0971b02614d028fb74df7e1299517..0000000000000000000000000000000000000000 --- a/src/data/designs/154/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "154", - "url": "https://www.csszengarden.com/154", - "css_url": "https://www.csszengarden.com/154/154.css", - "description": "The visual design features a sophisticated and minimalist layout that leverages a dark, moody background with a reddish-brown gradient transitioning into black, creating an immersive reading experience. The text is neatly aligned, and the typography employs both serif and sans-serif fonts, achieving a modern yet classic aesthetic. The strategic use of green and orange highlights against the predominantly muted tones helps guide the reader's attention effectively through the content and navigation menu.", - "categories": [ - "Minimalist", - "Modern", - "Typography", - "Dark Theme", - "Sophisticated" - ], - "visual_characteristics": [ - "Gradient Background", - "Contrast", - "Highlight Colors", - "Text Alignment", - "Serif and Sans-Serif Fonts" - ] -} \ No newline at end of file diff --git a/src/data/designs/154/screenshot_desktop.png b/src/data/designs/154/screenshot_desktop.png deleted file mode 100644 index 6782a1ee3f4bdba65ec0c4adf9f6da73eaba20f2..0000000000000000000000000000000000000000 --- a/src/data/designs/154/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f57fef5cbad74d3ecfc436e8654194c702b9f8a98f3a13e55230bbba1fb55cb2 -size 305949 diff --git a/src/data/designs/154/screenshot_mobile.png b/src/data/designs/154/screenshot_mobile.png deleted file mode 100644 index d68185abb59f80a6de7145bb8413c8e15a753777..0000000000000000000000000000000000000000 --- a/src/data/designs/154/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:60c45d7e81d06e4e40f46bcacdbe1cf72a38c30bae3ad85a65a807de01b77979 -size 297404 diff --git a/src/data/designs/154/style.css b/src/data/designs/154/style.css deleted file mode 100644 index d94860120fdc4827605dff6351caee9e53a9b68c..0000000000000000000000000000000000000000 --- a/src/data/designs/154/style.css +++ /dev/null @@ -1,117 +0,0 @@ -/* css Zen Garden submission 154 - 'Butterfly Effect', by Kevin Linkous, http://www.sitemaker.us/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Kevin Linkous */ -/* Added: Mar. 7th, 2005 */ - -/* 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. */ - - - -/* basic elements */ -body { background: url(bgFull.gif) repeat-x #000000; font: normal 11px/16px Tahoma, Verdana, Arial, sans-serif; color: #333; margin: 0px; } -h3 { font: italic normal 12pt Tahoma, Verdana, Arial, sans-serif; letter-spacing: 1px; margin-bottom: 0px; color: #7D775C;} -a:link { font-weight: normal; text-decoration: underline; color: #4F8CC3;} -a:visited { font-weight: normal; text-decoration: underline; color: #1D3F64;} -a:hover, a:active { text-decoration:none ; color: #346293;} -abbr {font-weight:bold;} - -/* specific divs */ -.page-wrapper { position: relative; width: 570px; background: url(bg_home.jpg) no-repeat; margin: 0; padding: 170px 0 0 170px;} - - .intro { min-width: 470px; } - header { display: none; } - - header h1 { background: transparent url(h1.gif) no-repeat top left; margin-top: 10px; width: 219px; height: 87px; float: left;} - header h2 { background: transparent url(h2.gif) no-repeat top left; margin-top: 58px; margin-bottom: 40px; width: 200px; height: 18px; float: right;} - h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - .summary { position:absolute; left:530px; top: 730px; width:150px; color: #f4f0e6;} - .summary p:first-child {display:none;} - .summary p:last-child {} - .summary a{ color: #98B974; text-decoration:underline;} - .summary a:hover{ color: #f4f0e6; text-decoration:none;} - - .preamble { clear: right; padding: 10px 10px 0 65px; width:260px;} - .preamble h3 { display:block; width:100%; height:23px; background: url(title0.gif) no-repeat; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .preamble p {margin:5px 0 0 0; padding:0; color: #6F715C; font-style:italic;} - - .supporting { clear: right; padding: 20px 10px 0 0; margin:0; width:490px; background:url(dotedLine.gif) 10px 10px no-repeat;} - - .explanation {margin:0; padding: 0 0 0 65px; width:260px;} - .explanation h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .explanation p {margin:5px 0 0 0; padding:0; color: #53553F;} - - .participation {margin:10px 0 0 0; padding: 0 0 0 65px; width:260px;} - .participation h3 { display:block; width:100%; height:23px; background: url(title2.gif) no-repeat; margin:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .participation p {margin:5px 0 0 0; padding:0; color: #53553F;} - - .benefits {margin:10px 0 0 0; padding: 0 0 0 65px; width:260px;} - .benefits h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .benefits p {margin:5px 0 0 0; padding:0; color: #53553F;} - - .requirements {margin:10px 0 0 0; padding: 0 200px 0 65px; width:266px; background: url(bgBottom0.gif) right bottom no-repeat;} - .requirements h3 { display:block; width:100%; height:23px; background: url(title1.gif) no-repeat; margin:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .requirements p {margin:5px 0 0 0; padding:0; color: #53553F;} - - footer { padding: 110px 0 30px 45px; width:510px; background: url(bgBottom1.gif) -37px 0px no-repeat;} - footer a:link, footer a:visited { color:#fff; margin: 0 0 0 15px; } - footer a:hover { color:#3F753E;} - - .sidebar { position: absolute; top: 170px; right: 0px; color:#E8CFB0;} - .sidebar .wrapper { font: 10px Tahoma, Verdana, Arial, sans-serif; width: 220px;} - .sidebar h3.select { background:url(subTitle0.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .sidebar h3.archives { background: transparent url(subTitle1.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .sidebar h3.resources { background: transparent url(subTitle2.gif) no-repeat; margin: 10px 0px 5px 0px; width: 160px; height: 23px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - .sidebar p, .sidebar li{ font: x-small/1.6em tahoma, verdana, sans-serif; text-indent: 0;} - - .sidebar ul { list-style: none; margin: 0; padding: 0; } - .sidebar li { color: #E8CFB0; padding: 2px 0 0 17px; } - .sidebar li a { display: block; border: none; color: #98B974; text-decoration:none; font-weight: bold; margin-left: -12px; padding-left: 12px; background: url(arrow.gif) no-repeat 0 2px;} - .sidebar li a:hover { color: #f4f0e6; background-position: 0 -48px; text-decoration:underline; } - .sidebar li a.designer-name { display: inline; padding: 0; margin: 0; background: none; color: #E8CFB0; font-weight: normal; } - .sidebar li a.designer-name:hover { color: #f4f0e6; } - .sidebar .design-archives li,.sidebar .zen-resources li,.sidebar #lfavorites li { padding: 2px 0 0 5px; } - .sidebar .design-archives li a,.sidebar .zen-resources li a,.sidebar #lfavorites li a { background: transparent url(arrow.gif) no-repeat 0 2px; display: inline; padding-left: 17px; margin: 0;} - .sidebar .design-archives li a:hover,.sidebar .zen-resources li a:hover,.sidebar #lfavorites li a:hover { background-position: 0 -48px; } - - .extra1 { background: transparent url(cr2.gif) top left no-repeat; position: absolute; top: 40px; right: 0px; width: 148px; height: 110px; } \ No newline at end of file diff --git a/src/data/designs/155/metadata.json b/src/data/designs/155/metadata.json deleted file mode 100644 index a9629ffc66497cd15b2916063f44fbc912763fa9..0000000000000000000000000000000000000000 --- a/src/data/designs/155/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "155", - "url": "https://www.csszengarden.com/155", - "css_url": "https://www.csszengarden.com/155/155.css", - "description": "This visual design utilizes a dark theme with a grunge texture to create an atmospheric and contemplative mood. The use of contrasting yellow text on a dark background ensures readability while adding an element of warmth. The design features a structured layout with text framed centrally, drawing attention to the content. A prominent red and white header adds a bold focal point and visual interest to the design.", - "categories": [ - "Grunge", - "Dark Theme", - "Typography Focus", - "Structured Layout" - ], - "visual_characteristics": [ - "Dark Color Palette", - "Grunge Texture", - "High Contrast Text", - "Bold Header Elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/155/screenshot_desktop.png b/src/data/designs/155/screenshot_desktop.png deleted file mode 100644 index aa8b35c73f4f45c55452de06b9b5424d0958f1a0..0000000000000000000000000000000000000000 --- a/src/data/designs/155/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:14a71a2bd73fa06ce3c838836b271a401ef5a6b4e96391ee349e49f83bba2a72 -size 273403 diff --git a/src/data/designs/155/screenshot_mobile.png b/src/data/designs/155/screenshot_mobile.png deleted file mode 100644 index a38f453adf1e2d96ecb84242132934696bf27aae..0000000000000000000000000000000000000000 --- a/src/data/designs/155/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e5e2d93dd96191fff50881cc3a04cd7b646d2aa7ae087cc07eaacb21d5c00877 -size 287181 diff --git a/src/data/designs/155/style.css b/src/data/designs/155/style.css deleted file mode 100644 index e8946456f423a8c074f044fef8991ff41a76e1b6..0000000000000000000000000000000000000000 --- a/src/data/designs/155/style.css +++ /dev/null @@ -1,189 +0,0 @@ -/* css Zen Garden submission 154 - 'Butterfly Effect', by Alen Grakalic, http://www.pixelpusher.biz/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Alen Grakalic */ -/* Added: Mar. 7th, 2005 */ - -/* 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. */ - - - - -/* - css by Alen Grakalic of Pixelpusher.biz - Thanks for taking the time to go through my code. - Central photo was taken by me. It is a fountain in my home town Rijeka, Croatia. - I made several photo calendars and it inspired me to make this Css Zen Garden entry - that I call "November". - -*/ - -body { - background: #2F3027 url(back.jpg) no-repeat; - font:0.7em Tahoma, Arial, Verdana, sans-serif; - color:#666; - margin:0; - padding:0; -} -a{ - color:#BD8100; - text-decoration:none; -} -a:hover{ - background:#BD8100; - color:#FFF; -} -h3{ - margin:0; - padding:0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -abbr{ - border-bottom:1px dotted; -} -.accesskey{ - text-decoration:underline; -} -ul{ - margin: 0; - padding:10px 0px 10px 10px; - list-style: none; -} - -li{ - padding-right: 12px; - padding-bottom: 0.6em; - background:url(li_bullet.gif) no-repeat 100% 2px; -} -.page-wrapper { - margin:0; - padding:0; -} -/* Intro */ -.intro{ - width:467px; -} -header h1{ - margin:0 0 0 16px; - height:367px; - background:url(page_header.gif) no-repeat; - text-indent:-2000px; -} -header h2, -.summary p:first-child{ - display:none; -} -.summary p:last-child{ - margin:0 0 0 16px; - padding-left:343px; - font-size:6px; - height:82px; - background:url(quicksummary_back.gif) no-repeat; - white-space:no-wrap; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.summary p:last-child a{ - width:36px; - height:20px; - float:left; - visibility:visible; - text-indent:-2000px; - margin:-7px 17px 0 0; - padding:0; -} -.summary p:last-child a:hover{ - background:none; -} -.preamble{ - margin:0 0 0 16px; - padding:0; - background:url(txt_back.gif) repeat-y; -} -.preamble h3{ - height:69px; - background:url(theroad_back.gif) no-repeat; -} -.preamble p{ - line-height:1.4em; - padding:19px 19px 5px 19px; - margin:0; -} -/* Supporting Text */ -.supporting{ - width:467px; - background:url(txt_back.gif) repeat-y 16px; -} -.supporting p{ - font-size:11px; - line-height:1.4em; - padding:19px 19px 5px 19px; - margin:0; -} -.supporting h3{ - margin:0; - padding:0; - height:107px; -} -.explanation, -.participation, -.benefits, -.requirements{ - margin:0 0 0 16px; -} -.explanation h3{ - background:url(explanation_back.gif) no-repeat; -} -.participation h3{ - background:url(participation_back.gif) no-repeat; -} -.benefits h3{ - background:url(benefits_back.gif) no-repeat; -} -.requirements h3{ - background:url(requirements_back.gif) no-repeat; -} -footer{ - margin:0 0 0 16px; - padding-top:58px; - padding-bottom:20px; - background:url(footer_back.gif) no-repeat; - text-align:center; -} -footer a{ - margin:3px; - padding:2px 5px; - font-weight:bold; -} -/* Link List */ -.sidebar { - position:absolute; - top:64px; - left:467px; - width:226px; - background:url(linklist_back.gif) no-repeat; - padding-top:62px; - text-align:right; -} -.sidebar abbr{ - border:none; -} -.select{ - background:url(select_back.gif) no-repeat 100% 0; - height:30px; -} -.archives{ - background:url(archives_back.gif) no-repeat 100% 0; - height:27px; -} -.resources{ - background:url(resources_back.gif) no-repeat 100% 0; - height:27px; -} diff --git a/src/data/designs/156/metadata.json b/src/data/designs/156/metadata.json deleted file mode 100644 index 9bf336803d2b8bc1857987808fd22b455fd77094..0000000000000000000000000000000000000000 --- a/src/data/designs/156/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "156", - "url": "https://www.csszengarden.com/156", - "css_url": "https://www.csszengarden.com/156/156.css", - "description": "The design uses a bold, contrasting color palette dominated by red, black, and white, highlighting a silhouetted figure against a background with traditional Japanese elements. The typography is clear and has a balance between serif and sans-serif fonts, adding to the mix of modern and traditional aesthetics. The layout is clean, with sections distinctly separated by subtle gradients, providing a sense of order and cohesiveness. The overall tone is a blend of contemporary design with cultural nuances, making it both engaging and visually striking.", - "categories": [ - "modern design", - "cultural elements", - "typography", - "minimalism", - "contrast" - ], - "visual_characteristics": [ - "bold color palette", - "silhouette", - "gradients", - "clean layout", - "traditional motifs" - ] -} \ No newline at end of file diff --git a/src/data/designs/156/screenshot_desktop.png b/src/data/designs/156/screenshot_desktop.png deleted file mode 100644 index b22d488c88427e2b7be19fbc65163f8f45226680..0000000000000000000000000000000000000000 --- a/src/data/designs/156/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c887e3f393f2084c1cff0b51c9e9faa6468533e8dade4570d7788d5bbbfca5d0 -size 590926 diff --git a/src/data/designs/156/screenshot_mobile.png b/src/data/designs/156/screenshot_mobile.png deleted file mode 100644 index e9bc05cb5dd50012df3d9fe9e3fb5baea2cad04b..0000000000000000000000000000000000000000 --- a/src/data/designs/156/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:aa0b723029acfc1693a964ca9e1f161484665e8d21caa12ef99ada5a90077562 -size 385695 diff --git a/src/data/designs/156/style.css b/src/data/designs/156/style.css deleted file mode 100644 index 1c87145580abe6e8d75dd0aadf9aa24366cd3665..0000000000000000000000000000000000000000 --- a/src/data/designs/156/style.css +++ /dev/null @@ -1,142 +0,0 @@ -/* css Zen Garden submission 156 - 'Table Layout Assassination', by Marko Krsul & Marko Dugonjic, http://web.burza.hr/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Marko Krsul & Marko Dugonjic */ -/* Added: Mar. 7th, 2005 */ - -/* 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. */ - - - - -/* general settings */ - -* { margin: 0; padding: 0; } - -html { background: #000; color: #000; font: 65%/1.5 Arial, Helvetica, sans-serif; } - -body { background: #000 url(body.gif) repeat-y 747px 0; } - -p { font-size: 1.2em; line-height: 19px; } - -* html p { line-height: 1.5em; } - -ul { list-style: none; } - -a { color: #da0000; text-decoration: none; border-bottom: 1px solid #da0000; } - -a:hover { color: #000; border: 0 !important; } - -abbr { border: 0; font-style: italic; color: #da0000; cursor: help; } - -a abbr { color: inherit; } - -/* header and overall layout */ - -.page-wrapper { position: relative; width: 747px; background: #fff url(ferlauf.png) repeat-x 0 95%; } - -.intro { background: url(header.jpg) no-repeat 0 0; width: 747px; padding-top: 184px; } - -header { position: absolute; left: -9999px; top: 0; width: 0; height: 0; overflow: hidden; } - -.summary { width: 175px; margin-left: 262px; } - -.summary p { margin-bottom: 10px; color: #f6f6f6; } - -.summary abbr { color: #fff; font-weight: bold; } - -.summary a { color: #ff0705; font-weight: bold; border-bottom: 1px solid #ff0705; } - -.summary p:last-child { width: 130px; margin-bottom: 45px; } - -.preamble p, .supporting p { margin-left: 262px; width: 282px; margin-bottom: 1em; text-align: justify; } - -.preamble a, .supporting a { font-weight: bold; } - -.summary h3, .preamble h3, .supporting h3 { height: 46px; margin-left: 262px; } - -.supporting footer { position: absolute; top: 150px; left: 0; margin: 0 !important; width: 262px; height: 200px; text-align: center; } - -* html .supporting footer/**/{ left: -262px; } - -footer a { border: 0; font-size: 1.1em; } - -footer a:hover { text-decoration: underline; } - -.supporting, .supporting .requirements { position: relative; } - -.supporting { background: url(footer.gif) no-repeat 0 100%; } - -.supporting .requirements p:nth-child(6) { margin: 0; width: 747px; padding: 140px 0 20px 0; text-align: center; color: #fff; font-size: 1.1em; } - -.supporting .requirements p:nth-child(6) a { color: #ff0705; } - -.extra1 { position: absolute; z-index: 4; top: 367px; left: 45px; width: 161px; height: 411px; background: url(herLegs.gif) no-repeat 0 0; } - -.extra2, .extra3, .extra4, .extra5, .extra6 { display: none; } - -/* h3 image replacements and icons */ - -h3 { background-repeat: no-repeat; background-position: 0 15px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.preamble h3 { background-image: url(h3road.gif); } - -.preamble { background: url(road.gif) no-repeat 216px 0; } - -.explanation h3 { position: relative; background-image: url(h3about.gif); overflow: visible; } - -.explanation h3::before { content: " "; display: block; position: absolute; left: -46px; top: 0; width: 46px; height: 38px; background: url(about.gif) no-repeat 0 0; z-index: 5; } - -.participation h3 { background-image: url(h3part.gif); } - -.participation { background: url(part.gif) no-repeat 223px 20px; } - -.benefits h3 { background-image: url(h3ben.gif); } - -.benefits { background: url(ben.gif) no-repeat 223px 5px; } - -.requirements h3 { background-image: url(h3req.gif); } - -.requirements { background: url(req.gif) no-repeat 225px 18px; } - -.sidebar h3 { font-size: 1.2em; height: 20px; background-position: 0 0; margin-bottom: 1em; } - -.design-selection h3 { background-image: url(h3sel.gif); } - -.design-archives h3 { background-image: url(h3arc.gif); } - -.zen-resources h3 { background-image: url(h3res.gif); } - -/* sidebar */ - -.sidebar { position: absolute; top: 387px; right: 0; width: 182px; } - -.sidebar ul { margin-bottom: 2em; } - -.sidebar li { font-size: 1.1em; padding: 0 16px; } - -.sidebar a { font-weight: bold; border: 0; text-transform: lowercase; } - -.sidebar a:hover { text-decoration: underline; } - -.sidebar abbr { font-style: normal; cursor: pointer; } - -.design-selection li { margin-bottom: 1em; } - -.design-selection a { display: block; line-height: 1.2em; } - -.sidebar a.designer-name { display: inline; clear: none; color: #000; } - -.sidebar a.designer-name:hover { text-decoration: none; color: #51C3C4; } - -.design-selection li { background: url(shuriken.gif) no-repeat 2px .3em; } - -.design-archives li { background: url(ninjapac.gif) no-repeat 5px .5em; } - -.zen-resources li { background: url(lamp.gif) no-repeat 0 .3em; } \ No newline at end of file diff --git a/src/data/designs/157/metadata.json b/src/data/designs/157/metadata.json deleted file mode 100644 index 4db67b658e9e9eef29bcff384c9b4894bdbdcfa8..0000000000000000000000000000000000000000 --- a/src/data/designs/157/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "157", - "url": "https://www.csszengarden.com/157", - "css_url": "https://www.csszengarden.com/157/157.css", - "description": "The design showcases a minimalist and structured layout with two distinct color-blocked columns, creating an aesthetic balance between the content and navigation sections. The left column features soft pastel shades, enhancing readability of the text, while the right column uses a light green background for the menu links. The font choice is elegant, with a mix of serif and sans-serif enhancing visual interest and hierarchy.", - "categories": [ - "Minimalist", - "Print Design", - "Web Inspiration", - "Typography", - "Editorial Design" - ], - "visual_characteristics": [ - "Pastel Colors", - "Column Layout", - "Serif Typography", - "Elegant Simplicity", - "Textured Background" - ] -} \ No newline at end of file diff --git a/src/data/designs/157/screenshot_desktop.png b/src/data/designs/157/screenshot_desktop.png deleted file mode 100644 index 096a3ca12c935804e943c156b9bcf3d9df0879bc..0000000000000000000000000000000000000000 --- a/src/data/designs/157/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:79f675eaaf08b0eb6c4dcc7927b7b7c0702d58586afa310e98270794846d3796 -size 333008 diff --git a/src/data/designs/157/screenshot_mobile.png b/src/data/designs/157/screenshot_mobile.png deleted file mode 100644 index c046d4e9502d15f425aff7dcd566b7ab494dab84..0000000000000000000000000000000000000000 --- a/src/data/designs/157/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:640a25b992d809203a2bf47b48640883db6dad574f704b5fb3de60c523778458 -size 353651 diff --git a/src/data/designs/157/style.css b/src/data/designs/157/style.css deleted file mode 100644 index 8055a8ff88090d4cb12e8fefe3b60201f206b9b2..0000000000000000000000000000000000000000 --- a/src/data/designs/157/style.css +++ /dev/null @@ -1 +0,0 @@ -/* css Zen Garden submission 157 - 'Bugs', by Zohar Arad, http://www.captainserious.co.uk/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Zohar Arad */ /* Added: Mar. 7th, 2005 */ /* 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. */ /* General Styles */ body{ color:#000; font: normal 11px Times, serif; line-height:1.4em; letter-spacing: 1pt; margin:0 0 20px 0; padding:0; text-align:center; } a{font-weight:bold;color: #8B3C12;text-decoration:none} a:hover{text-decoration:underline;} a:active, a:visited{color: #B07D03;} h3{margin:0; padding:0;} /* General DIV Styles */ .page-wrapper{ background:transparent url(header.gif) no-repeat top left; margin:0 auto; padding: 330px 0 0 0; position:relative; width:685px; text-align:left; } .page-wrapper p{margin: 0 20px; padding: 5px 0} p:nth-child(2):first-letter{font-size: 18px;} .intro, .supporting{width:415px; background-color:#FBD1BC; padding:0; margin:0} header{display:none} .summary{position:absolute; top: 310px; margin:0 0 0 115px; padding:0} .summary p{margin:0; padding:0;} .summary p:first-child{display:none} footer{margin:-25px 0 0 0;width: 415px;text-align:center;} footer a{color:#FFFFFF} /* headings replacement styles */ .preamble h3{ display:block; background: transparent url(heading1.gif) no-repeat center left; height: 161px; width: 415px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .explanation h3{ display:block; background: transparent url(so.gif) no-repeat center center; height: 45px; width: 415px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .participation h3{ display:block; background: transparent url(heading2.gif) no-repeat center left; height: 173px; width: 415px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .benefits h3{ display:block; background: transparent url(benefits.gif) no-repeat center center; height: 45px; width: 415px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .requirements{ background: transparent url(footer.gif) no-repeat bottom center; padding-bottom:70px; } .requirements h3{ display:block; background: transparent url(heading3.gif) no-repeat center left; height: 173px; width: 415px; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* Navigation Styles */ .sidebar{ position:absolute; top: 330px; margin-left: 445px; padding-bottom: 360px; background: #EEFFC5 url(link_footer.gif) no-repeat bottom center; width:200px; } .sidebar ul{ list-style-type:none; margin:0 20px; padding:30px 0 20px 0; } .sidebar li{ background: transparent url(leaf.gif) no-repeat top left; padding:0 0 0 28px; margin-bottom: 10px; } .design-selection a{ display:block; padding: 0; margin:0; } .design-selection a.designer-name{ display:inline; color:#2B7F01; } .design-archives ul{ padding:30px 0 5px 0; } .zen-resources ul{ padding:20px 0; } .design-selection h3{ display:block; background: transparent url(choose.gif) no-repeat center left; height: 112px; width: 200px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .design-archives h3{ display:block; background: transparent url(archive.gif) no-repeat center left; height: 96px; width: 200px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .zen-resources h3{ display:block; background: transparent url(resources.gif) no-repeat center center; height: 25px; width: 200px; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* Original images used in this design were downloaded from morguefile.com and manipulated for the purpose of this design only. This style sheet was created to symbolise the endless bugs Web artists have to deal with on a daily basis and give hope (as well as a good laugh) to all those who work hard to make the Web a better and bug-free environment Style Sheet by Zohar Arad */ \ No newline at end of file diff --git a/src/data/designs/158/metadata.json b/src/data/designs/158/metadata.json deleted file mode 100644 index 54861f4c705c3b0038a73b4c518b58795e0a0355..0000000000000000000000000000000000000000 --- a/src/data/designs/158/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "158", - "url": "https://www.csszengarden.com/158", - "css_url": "https://www.csszengarden.com/158/158.css", - "description": "The visual design features a sophisticated dark brown and beige color scheme with a classic serif typography, creating a professional and serious tone. The layout is structured with a prominent header, a sidebar for navigation, and a main content area, emphasizing its informational purpose. The overall style is minimalist, allowing for easy readability and a clear emphasis on the text.", - "categories": [ - "Minimalism", - "Professional", - "Classic", - "Informational" - ], - "visual_characteristics": [ - "Dark color palette", - "Serif typography", - "Structured layout", - "Minimalist design" - ] -} \ No newline at end of file diff --git a/src/data/designs/158/screenshot_desktop.png b/src/data/designs/158/screenshot_desktop.png deleted file mode 100644 index 5e8eba01a45b76acd4df39a8c829acd5d1deb1fa..0000000000000000000000000000000000000000 --- a/src/data/designs/158/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c84aa95106a43d3db19099ba66dfaccf6f8a1afe2ebb05f54e53c791a5a97ee8 -size 452227 diff --git a/src/data/designs/158/screenshot_mobile.png b/src/data/designs/158/screenshot_mobile.png deleted file mode 100644 index 7ed9b6228691af242cf8856748ea743ce3bbaf4a..0000000000000000000000000000000000000000 --- a/src/data/designs/158/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3a67c4cf5904f5256cfb59e97cd4bda77cb8e7afb72bb1d17e83eb4d7ddb0ac6 -size 338798 diff --git a/src/data/designs/158/style.css b/src/data/designs/158/style.css deleted file mode 100644 index 78ce42708aeff8042e4114c1a6ef2a3bf3e961c1..0000000000000000000000000000000000000000 --- a/src/data/designs/158/style.css +++ /dev/null @@ -1,189 +0,0 @@ -/* css Zen Garden submission 158 - 'a Simple Sunset', by Rob Soule, http://www.couchfort.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Rob Soule */ -/* Added: Mar. 7th, 2005 */ - -/* 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. */ - - - -/* - 'a Simple Sunset' - design by rob soule - www.couchfort.net -*/ - -/* --// basic elements --// */ -body { - font: 11px georgia,times,serif; - color: #F0E9CE; - background: #F0E9CE url(mainBg.gif) repeat-x top; - margin: 0; - text-align: center; -} -abbr { - cursor: help; - border-bottom: 1px dotted #F0E9CE; -} -/* --// links --// */ -a { - color: #F0AC4A; - text-decoration: none; -} -a:hover,a:active { text-decoration: underline; } -a abbr { border: 0; } -li a { - display: block; - color: #2B0101; - font-weight: bold; - font-size: 11px; - text-transform: none; - padding: 2px 0 3px 0; -} -li a.designer-name { - font-size: 9px; - font-weight: normal; - display: inline; - padding: 0; - text-transform: uppercase; -} -.design-archives li a, .zen-resources li a { - display: inline; - font-weight: normal; - font-size: 9px; - line-height: 15px; - margin: 0; - text-transform: uppercase; -} -li a:hover, li a:hovera.designer-name { color: #5E1919; } -footer a { - color: #B6B2A3; - margin: 0 5px; - border: 1px solid #CBC7B5; - text-decoration: none; - padding: 2px 3px; -} -footer a:hover { - background: #CBC7B5; - color: #2B0101; -} -/* --// id selectors --// */ -.page-wrapper { - margin: 0 auto; - text-align: left; - background: url(contBg.gif) repeat-y center; - width: 672px; -} -.intro,.supporting { - line-height: 19px; -} -header { - height: 287px; - background: url(top.jpg) no-repeat; -} -.summary { - background: url(preBg.gif) no-repeat center top; - height: 87px; - font-size: 9px; - text-transform: uppercase; -} -.preamble { - width: 380px; - margin-top: -95px; - padding: 0 0 0 260px; - font-style: italic; -} -.supporting { - width: 380px; - padding: 0 0 0 260px; -} -.sidebar { - position: absolute; - top: 325px; - padding-left: 45px; - color: #2B0101; -} -.design-selection,.design-archives,.zen-resources { - background: url(lselectBttm.gif) no-repeat bottom; - padding-bottom: 12px; - margin-top: 15px; -} - -/* --// layout ...booya --// */ -.preamble h3,.explanation h3, .participation h3, .benefits h3, .requirements h3{ - text-indent: -5000px; - height: 37px; -} -.design-selection h3, .zen-resources h3, .design-archives h3 { - height: 23px; - width: 189px; - margin: 0; - text-indent: -5000px; -} -.preamble h3 { background: url(h3Road.gif) no-repeat right; } -.explanation h3 { background: url(h3AllAbout.gif) no-repeat right; } -.participation h3 { background: url(h3Part.gif) no-repeat right; } -.benefits h3 { background: url(h3Benefits.gif) no-repeat right; } -.requirements h3 { background: url(h3Require.gif) no-repeat right; } -.zen-resources h3 { background: url(lresourcesSpan.gif); } -.design-archives h3 { background: url(larchivesSpan.gif); } -.design-selection h3{ - background: url(lselectSpan.gif); - margin: -15px 0 0 0; -} -.summary p:last-child { - position: absolute; - top: 190px; - width: 280px; - text-align: right; - margin-left: 360px; -} -.summary p:first-child { - position: absolute; - top: 100px; - width: 158px; - margin-left: 482px; - text-align: right; - line-height: 14px; -} -footer { - display: block; - width: 625px; - margin-left: -235px; - text-align: center; - padding: 15px 0 25px 0; - font: 10px verdana,arial,serif; - text-transform: uppercase; - letter-spacing: -1px; - background: #DCD5B8 url(footerBg.gif) repeat-x bottom; -} -.extra1, .extra2, .extra3, .extra4, .extra1, .extra5, header h1,h2 { display : none; } - -/* --// lists --// */ -ul,li { - list-style: none; - padding: 0; - margin: 0; -} -li { - background: #F0E9CE; - padding: 5px 7px; - border-bottom: 1px solid #DCD5B8; - text-transform: uppercase; - font-size: 9px; -} -li:hover { background: #DCD5B8; } - -.design-selection li { - width: 175px; - overflow: hidden; - text-overflow: ellipsis; -} - -/* --// the lone class --// */ -p:nth-child(6) { clear: both; } - -/* the end... doh doh doh */ \ No newline at end of file diff --git a/src/data/designs/159/metadata.json b/src/data/designs/159/metadata.json deleted file mode 100644 index f1e662ea61b2db6bebb38a55137b01c88fa9f225..0000000000000000000000000000000000000000 --- a/src/data/designs/159/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "159", - "url": "https://www.csszengarden.com/159", - "css_url": "https://www.csszengarden.com/159/159.css", - "description": "This design features a clean and minimalist layout with a predominantly pink gingham pattern background, creating a soft and inviting atmosphere. The central column houses the main content with clearly defined sections, using elegant serif typography in bold and subtle shades of pink for emphasis. It balances decorative elements with functional space, making it suitable for content-heavy webpages.", - "categories": [ - "minimalist design", - "webpage layout", - "print style", - "pastel aesthetic", - "typography-focused" - ], - "visual_characteristics": [ - "pink gingham background", - "centralized content column", - "serif typography", - "shades of pink", - "balanced whitespace" - ] -} \ No newline at end of file diff --git a/src/data/designs/159/screenshot_desktop.png b/src/data/designs/159/screenshot_desktop.png deleted file mode 100644 index c458a2d413bb24adc5893351ab384cf28cf4af42..0000000000000000000000000000000000000000 --- a/src/data/designs/159/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:61d64974c231d0e83a68d7c8c7e3957cf7fd02dbd5790972f2cc4f85dcfa8bb8 -size 587357 diff --git a/src/data/designs/159/screenshot_mobile.png b/src/data/designs/159/screenshot_mobile.png deleted file mode 100644 index 24d5d0997ed5ac861f7fd6f780e22f8ac6a7b6cc..0000000000000000000000000000000000000000 --- a/src/data/designs/159/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ca4d4f26d0983b12854e7e372661fbcc37dccc36fbc0291942e73e71124e666a -size 291558 diff --git a/src/data/designs/159/style.css b/src/data/designs/159/style.css deleted file mode 100644 index f07c7ba9cb24a8db0d1d9e9467221d6e2b6b7e18..0000000000000000000000000000000000000000 --- a/src/data/designs/159/style.css +++ /dev/null @@ -1,271 +0,0 @@ -/* css Zen Garden submission 159 - 'Berry Flavour', by Maren Becker, http://www.honeyjazz.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Maren Becker */ -/* Added: Apr. 15th, 2005 */ - -/* 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. */ - - - -/* ******************************** - HTML Tags -******************************** */ -* { - padding: 0px; - margin: 0px; -} -body { - margin: 0px; - padding: 0px; - border: 0px; - background: url(bg.gif) repeat-y center top fixed; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 11px; - color: #D48EA8; - text-align: center; -} -p { - line-height: 1.4em; -} -a:link, a:visited { - color: #858585; - text-decoration: none; -} -a:hover, a:active { - color: #BF4E77; - text-decoration: none; -} -abbr { - cursor: help; - color: #CD9CAE; - font-weight: bold; - border-bottom: 1px solid #FEF6FA; -} - - - -/* ******************************** - Container, Intro -******************************** */ -.page-wrapper { - padding: 12px 0px 0px; - width: 428px; - margin-right: auto; - margin-left: auto; - position: relative; - text-align: left; -} -.intro { - margin-top: 0px; -} - - - -/* ******************************** - Page Header -******************************** */ -header { - height: 175px; - width: 428px; - margin-top: 0px; - margin-bottom: 12px; - background: url(header.jpg) no-repeat; -} -header h2 { - height: 120px; - width: 119px; - position: absolute; - left: 319px; - top: 79px; - background-image: url(berryflavour.gif); -} - - - -/* ******************************** - Quick Summary -******************************** */ -.summary { - background: #FEF6FA url(bg_content.gif) repeat-y; - border-top: 1px solid #F6E1EA; - border-right: 1px solid #F6E1EA; - border-bottom: 1px solid #F6E1EA; - position: absolute; - top: 199px; - left: 0px; - padding: 2px 2px 2px 6px; - height: 36px; - width: 142px; - voice-family: "\"}\""; - voice-family: inherit; - width: 134px; -} - - - - -/* ******************************** - Preamble -******************************** */ -.preamble { - border-top: 1px solid #F6E1EA; - border-bottom: none; -} -.preamble p { - padding-left: 7px; - padding-right: 7px; - margin-top: 7px; -} -.preamble h3 { - background: url(bg_preamble.gif) no-repeat; - height: 29px; -} -.preamble p:nth-child(4) { - padding-bottom: 15px; -} - - - -/* ******************************** - Supporting Text -******************************** */ -.supporting, .preamble { - margin-top: 0px; - margin-left: 155px; - background: #FEF6FA url(bg_content.gif) repeat-y; - border-right: 1px solid #F6E1EA; - width: 278px; - voice-family: "\"}\""; - voice-family: inherit; - width: 271px; -} -.supporting p { - margin-top: 7px; - padding-right: 7px; - padding-left: 7px; -} -.explanation h3 { - background: url(bg_explanation.gif) no-repeat; - background-repeat:; - height: 29px; -} -.explanation p:nth-child(3), .participation p:nth-child(4), .benefits p:nth-child(2) { - margin-bottom: 20px; -} -.participation h3 { - background: url(bg_participation.gif) no-repeat; - height: 29px; -} - -.benefits h3 { - background: url(bg_benefits.gif) no-repeat; - height: 29px; -} - -.requirements h3 { - background: url(bg_requirements.gif) no-repeat; - height: 29px; -} -.requirements p:nth-child(6) { - margin-top: 30px; -} - - -/* ******************************** - Footer -******************************** */ -footer { - text-align: right; - padding-right: 12px; - padding-bottom: 20px; - margin-top: 40px; -} - - - -/* ******************************** - Link List -******************************** */ -.sidebar{ - position: absolute; - top: 251px; - left: 0px; - width: 142px; - font-size: 10px; -} -.sidebar h3 { - font-size: 12px; - font-weight: bold; - padding-left: 14px; - margin-top: 6px; - margin-bottom: 6px; - margin-left: 2px; -} -.design-selection h3 { - height: 19px; - background: url(bg_select.gif) no-repeat; -} -.zen-resources h3 { - height: 19px; - background: url(bg_resources.gif) no-repeat; -} -.design-archives h3 { - height: 19px; - background: url(bg_archives.gif) no-repeat; -} -.design-selection, .zen-resources, .design-archives { - background: #FEF6FA url(bg_content.gif) repeat-y; - border-top: 1px solid #F6E1EA; - border-right: 1px solid #F6E1EA; - border-bottom: 1px solid #F6E1EA; - margin-bottom: 12px; -} -.sidebar ul { - list-style: none; - margin: 5px; - padding: 0px; -} -.sidebar li a { - display: block; -} -.sidebar li:hover { - background-color:#FAEBF1; -} -.design-selection a { - text-transform: uppercase; -} -.design-selection ul li a.designer-name { - display: inline; - text-transform: none; -} -.design-selection li, .design-archives li, .zen-resources li { - padding-top: 4px; - padding-bottom: 4px; - background: url(dots.gif) repeat-x; -} -footer a:link, footer a:visited { - font-weight: bold; -} -footer a:hover, footer a:visited { - padding-bottom: 2px; - border-bottom: 4px solid #858585; - color: #858585; -} - - -/* ******************************** - Hidden -******************************** */ -h1, h2, .summary p:first-child, -.preamble h3, .explanation h3, .participation h3, -.benefits h3, .requirements h3, .sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - - diff --git a/src/data/designs/160/metadata.json b/src/data/designs/160/metadata.json deleted file mode 100644 index f92c098a183a7f287eb404c5bc17b03d987d3f7d..0000000000000000000000000000000000000000 --- a/src/data/designs/160/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "160", - "url": "https://www.csszengarden.com/160", - "css_url": "https://www.csszengarden.com/160/160.css", - "description": "The design presents a minimalistic and clean aesthetic with a dominant use of negative space, enhancing readability and focus on content. Black and red text on a plain white background creates a stark contrast, while subtle graphics provide a gentle visual flair. The asymmetrical layout with right-aligned navigation emphasizes a modern and organized approach, suitable for instructional or informational purposes.", - "categories": [ - "Minimalism", - "Typography", - "Web Aesthetic", - "Instructional Design", - "Modern" - ], - "visual_characteristics": [ - "Clean", - "High Contrast", - "Subtle Graphics", - "Negative Space", - "Asymmetrical Layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/160/screenshot_desktop.png b/src/data/designs/160/screenshot_desktop.png deleted file mode 100644 index c88f3a721bc0b5619a2fcf8785249ec867c6c29a..0000000000000000000000000000000000000000 --- a/src/data/designs/160/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9b93962b572aad3c166f7d04a63a79132fabf9a85cec3112e2a7479005e52085 -size 424795 diff --git a/src/data/designs/160/screenshot_mobile.png b/src/data/designs/160/screenshot_mobile.png deleted file mode 100644 index dd60a392b72b3a34c36895c19d8008aa6cbe1102..0000000000000000000000000000000000000000 --- a/src/data/designs/160/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3e1ee793eb4ee2db6eb17c6cf9c17cf907eab3b606b46ced99b86a7428aaf454 -size 314422 diff --git a/src/data/designs/160/style.css b/src/data/designs/160/style.css deleted file mode 100644 index b68aeb3e7c008a170ec18821898e37f972138310..0000000000000000000000000000000000000000 --- a/src/data/designs/160/style.css +++ /dev/null @@ -1,114 +0,0 @@ -/* css Zen Garden submission 160 - 'Daruma', by Stuart Cruickshank, https://twitter.com/gaijinstu */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Stuart Cruickshank */ -/* Added: Apr. 15th, 2005 */ - -/* 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. */ - - -body {background:#dcdcdc url(grad_top.jpg) repeat-x; font:12px "Trebuchet MS", verdana, arial, sans-serif; color:#606060;} - -.page-wrapper {width:765px; margin:0 auto;} - -header {background-image:url(header.jpg); width:699px; height:347px;} -header h1, h2 {display:none;} - -.summary {position:relative;} -.summary p:first-child {display:none;} -.summary p:last-child {position:absolute; left:600px; top:-65px; width: 130px;} -.summary p:last-child a:link {color: #606060; text-decoration:underline; font-weight:bold;} -.summary p:last-child a:visited {color:#787878;} -.summary p:last-child a:hover {color:#949494;} - -.preamble {width:765px; background:url(preamble_bg.gif) bottom; padding-bottom:15px; line-height:22px; text-align:justify;} -.preamble h3 {position:relative; background-image:url(preamble_hdr.gif); width:765px; height:35px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.preamble p {padding: 7px 20px;} - -.supporting {float:left; width:543px; background-image:url(body_bg.gif); line-height:22px; text-align:justify;} -.supporting p {padding: 7px 20px;} -.supporting a:link {color:#df0000; text-decoration:none; font-weight:bold; border-bottom:1px solid #930000;} -.supporting a:visited {color:#df0000; text-decoration:none; border:0;} -.supporting a:hover{border-bottom: 1px solid #df0000;} - -.explanation {background:url(so_what_btrflys.gif) bottom left no-repeat;} -.explanation h3 {position:relative; background-image:url(so_what_hdr.gif); width:543px; height:28px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation {background: url(participation_btrflys.gif) bottom left no-repeat;} -.participation h3 {position:relative; background-image:url(participation_hdr.gif); width:543px; height:37px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.benefits h3 {position:relative; background-image:url(benefits_hdr.gif); width:543px; height:35px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.requirements {background: url(req_btrflys.gif) top left no-repeat;} -.requirements h3 {position:relative; background-image:url(req_hdr.gif); width:543px; height:36px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.requirements p:nth-child(6) {margin-bottom:0; padding-bottom:14px;} - -footer {position:relative; font-size: 14px; text-align:center;background:url(footer_bg.gif) no-repeat; width:543px; height:35px; padding-top:63px;} -footer a:link {color: #c20000; font-weight:bolder; text-decoration:none; border:0;} -footer a:visited {color:#c20000; font-weight:bolder;} -footer a:hover {color:#f33; border:0;} - -.sidebar {float:right; width:195px; color:#d70000; background-image:url(linklist_bg.gif); font-size:11px;} -.sidebar ul {list-style-type:none;} - -.design-selection a:link {display:block;color: #d70000; text-decoration:none; font-weight:bolder; border-bottom:1px solid #ddd;} -.design-selection a:visited {display:block; color:#c66; text-decoration:none; border-bottom:1px solid #b1b1b1;} -.design-selection a:hover {color: #f70000;} -.design-selection a.designer-name:link {display:inline; color:#5d5d5d; text-decoration:none; font-style:italic; margin-left:5px; border:0;} -.design-selection a.designer-name:visited {display:inline; color:#787878; font-weight:normal; text-decoration:none; border:0;} -.design-selection a.designer-name:hover{color:#949494;} - -.sidebar .wrapper li {padding: 0 20px;} -.sidebar .wrapper {background:url(resources_btm_2.gif) bottom no-repeat; padding-bottom: 10px; padding-bottom: 119px;} - -.design-selection h3 {position:relative; background-image: url(select_design_hdr.gif); width:195px; height:60px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.design-selection ul {padding-top:8px;} -.design-selection li {padding-bottom:10px;} - -.design-archives h3 {position:relative; background-image: url(archives_hdr.gif); width:195px; height:30px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.zen-resources h3 {position:relative; background: url(resources_hdr.gif) no-repeat; width:195px; height:30px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.design-archives ul, .zen-resources ul {padding-top:8px;} -.design-archives ul li, .zen-resources ul li {padding-bottom:8px;} - -.design-archives a:link, .zen-resources a:link {color:#606060; text-decoration:none; font-weight:bolder;} -.design-archives a:visited, .zen-resources a:visited {color:#787878;text-decoration:none;} -.design-archives a:hover, .zen-resources a:hover {color:#949494; font-style:italic;} - -* {margin:0; padding:0;} -abbr {border-bottom: 1px dotted #606060; cursor:help;} diff --git a/src/data/designs/161/metadata.json b/src/data/designs/161/metadata.json deleted file mode 100644 index e143313540a093597acab7aeb6ec9fe59b60ea7e..0000000000000000000000000000000000000000 --- a/src/data/designs/161/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "161", - "url": "https://www.csszengarden.com/161", - "css_url": "https://www.csszengarden.com/161/161.css", - "description": "The design uses a contrasting color palette of dark brown and cream, with green accents to create a clean and organized layout. It features a sidebar navigation with a textured, vertical menu that adds a structured feel. The main content area is well-defined with headings and text emphasized in varying shades of green and brown, providing a harmonious integration of color and typography.", - "categories": [ - "web design", - "typography", - "navigation", - "content layout", - "color contrast" - ], - "visual_characteristics": [ - "contrasting color palette", - "vertical sidebar navigation", - "textured background", - "heading emphasis", - "structured layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/161/screenshot_desktop.png b/src/data/designs/161/screenshot_desktop.png deleted file mode 100644 index 3692cd64276dd199a6c510f5967308d80c15fde6..0000000000000000000000000000000000000000 --- a/src/data/designs/161/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:345b61fc5b945aeb359dc161be9bab4453f852995dd90982b5c5cf9aced59b20 -size 467232 diff --git a/src/data/designs/161/screenshot_mobile.png b/src/data/designs/161/screenshot_mobile.png deleted file mode 100644 index 11dd157ed7769baa19f73917cd3e5b55dc8b2150..0000000000000000000000000000000000000000 --- a/src/data/designs/161/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3ffc7e90367970915f02d4873c62108b2eae3edf3564d668cec6c04c852a8661 -size 403833 diff --git a/src/data/designs/161/style.css b/src/data/designs/161/style.css deleted file mode 100644 index 3503e031214c9b7680b83f84c7a81aa70523ba0c..0000000000000000000000000000000000000000 --- a/src/data/designs/161/style.css +++ /dev/null @@ -1,151 +0,0 @@ -/* css Zen Garden submission 161 - 'Zenfandel', by Nicholas Rougeux, http://www.c82.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Nicholas Rougeux */ -/* Added: Apr. 15th, 2005 */ - -/* 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. */ - - - -/* - Zenfandel design by Nicholas Rougeux - [ www.c82.net ] - - All photography originated from free stock for commercial and personal use from the good folks at Stock Exchange. - [ www.sxc.hu ] -*/ - -/*__________Clean slate__________*/ -body, h1, h2, h3, li, p, ul { font-size: 1em; margin: 0; padding: 0; } - - -/*__________Basics__________*/ -a, a:link, a:visited, a:hover, a:active { color: #ada364; } -a:hover { text-decoration: none; } -abbr { border: 0; color: #780101; cursor: help; } -.accesskey { text-decoration: underline; } - -body { - background: url(bgMain.gif) repeat-y; - color: #0f330d; - font-family: "Lucida Grande", Georgia, "Times New Roman", Times, serif; - font-size: 0.8em; - padding-bottom: 20px; -} - -h3 { color: #8f9947; font-style: italic; font-size: 1.7em; font-weight: normal; margin-bottom: 0.5em; } -.page-wrapper { position: relative; z-index: 99; } -p { line-height: 1.5em; margin-bottom: 1em; } - - -/*__________Header__________*/ -header { - background: #fff url(header.jpg) no-repeat left top; - border-bottom: 1px solid #acb7a6; - height: 155px; -} - -h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -/*__________Quick summary__________*/ -.summary { font-size: 0.85em; font-style: italic; line-height: 1.4em; } -.summary p:last-child { text-align: right; } - - -/*__________Preamble__________*/ -.preamble, .summary { - margin-left: 219px; - margin-top: 10px; - padding-left: 150px; - /* Make IE play nice with others */ - width: 530px; - voice-family: "\"}\""; - voice-family:inherit; - width: 380px; -} - -html>body .summary, html>body .preamble { width: 380px; } - - -/*__________Supporting text__________*/ -.supporting { background: url(bottle.gif) no-repeat right bottom; margin-left: 230px; width: 530px; z-index: 100; } - -.preamble p:nth-child(4), .explanation, .participation, .benefits, .requirements { - background: url(curlSmall.gif) no-repeat bottom; - margin-bottom: 1em; - padding-bottom: 37px; -} - -.requirements { margin-right: 160px; } - - -/*__________Side__________*/ -.sidebar { - color: #fff; - font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif; - font-size: 0.85em; - font-weight: bold; - left: 0; - overflow: hidden; - position: absolute; - top: 156px; - width: 220px; -} - -.sidebar a, .sidebar h3 { font-family: Georgia, "Times New Roman", Times, serif; } -.design-selection a { display: block; } -.design-selection a.designer-name { display: inline; } - -.sidebar a { color: #fff; font-size: 1.1em; font-style: italic; font-weight: normal; text-decoration: none; } -.sidebar a:hover { text-decoration: underline; } - -.sidebar a.designer-name { - color: #fffbe2; - font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif; - font-size: 1em; - font-style: normal; - font-weight: bold; -} - -.sidebar abbr { color: #f6f1c0; } - -.sidebar h3 { - color: #ccc180; - font-size: 1.4em; - font-style: normal; - padding-top: 0.5em; - text-align: center; - text-transform: uppercase; -} - -.sidebar li { background: url(bullet.gif) no-repeat 0 0.3em; padding-left: 15px; } -.sidebar ul { list-style: none; padding: 0 10px 0.8em 10px; } -.design-selection { background: #44410d url(curlBig.gif) no-repeat bottom; padding-bottom: 40px; } -.design-selection li { padding-bottom: 0.8em; } -.design-archives, .zen-resources { border-top: 3px double #8e7253; } -.design-archives li, .zen-resources li { margin-bottom: 0.2em; } - - -/*__________Footer__________*/ -footer { font-size: 0.85em; font-style: italic; text-align: right; } - - -/*__________Extras__________*/ -/* Extra div used for grapes image so the entire image is not clipped when text is resized */ -.extra1 { - background: transparent url(grapes.gif) no-repeat left top; - height: 351px; - left: 220px; - position: absolute; - top: 156px; - width: 147px; - z-index: 1; -} \ No newline at end of file diff --git a/src/data/designs/162/metadata.json b/src/data/designs/162/metadata.json deleted file mode 100644 index 4883b6bb8c375590e16cbedd067799733cf83611..0000000000000000000000000000000000000000 --- a/src/data/designs/162/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "162", - "url": "https://www.csszengarden.com/162", - "css_url": "https://www.csszengarden.com/162/162.css", - "description": "The design embodies a classic, elegant style with a warm color palette dominated by earthy tones, enhanced by an ornate decorative header image. It uses a narrow column layout that focuses attention on the textual content, which is complemented by a textured background, adding depth and sophistication. The typography combines bold headings with a serif font, lending an old-world charm that aligns with the historical and sophisticated mood.", - "categories": [ - "classic", - "elegant", - "historical", - "sophisticated", - "text-focused" - ], - "visual_characteristics": [ - "earthy color palette", - "ornate header", - "textured background", - "serif typography", - "narrow column layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/162/screenshot_desktop.png b/src/data/designs/162/screenshot_desktop.png deleted file mode 100644 index 6c6c550812c55abad57dff56d7d1bcf1d07f13b6..0000000000000000000000000000000000000000 --- a/src/data/designs/162/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7359d37de7e46896838e9637f708e6d80df7668a0f9098f9ba12f7b27f8ef145 -size 1058918 diff --git a/src/data/designs/162/screenshot_mobile.png b/src/data/designs/162/screenshot_mobile.png deleted file mode 100644 index d641ea46b415d6d7b9d028c972016f61719fee94..0000000000000000000000000000000000000000 --- a/src/data/designs/162/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5643cd6a9682fe18bcdf5cafc5dc60181ec1afe2979f825a4ef81b15393f7b1c -size 929595 diff --git a/src/data/designs/162/style.css b/src/data/designs/162/style.css deleted file mode 100644 index f3b304f68a85e4bc53a39b1b6ed1a94c59f56253..0000000000000000000000000000000000000000 --- a/src/data/designs/162/style.css +++ /dev/null @@ -1,394 +0,0 @@ -/* css Zen Garden submission 162 - 'Angelus', by Vladimir Lukic, http://www.c82.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Vladimir Lukic */ -/* Added: Apr. 15th, 2005 */ - -/* 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. */ - - - -/* All images are Copyright (c) 2005 by Vladimir Lukic | www.wortahn.com */ -/* The Angel sculpture is from the main doors of the Metropolitan United Church in */ -/* Toronto, Canada, photographed by the author. */ -/* The inspiration for this work draws on the stained glass windows of */ -/* St. Michael's Catholic Cathedral, Toronto, Canada, and medieval Catholic prayer books */ - -/* ENG: To any Croatian designers reading this, at home and abroad, a big hello from Canada! */ -/* HRV: Svim hrvatskim designerima koji ovo citaju, doma i u inozemstvu, velik pozdrav iz Kanade! */ - - - -/* basic elements */ -html, body { - font-family: 'Tahoma', sans-serif; - font-size: small; - color: rgb(104,0,0); - background: url("body-bg.jpg") rgb(70, 0, 0); - padding: 0px; - margin: 0px; - } - -p { - font-family: 'Tahoma', sans-serif; - font-size: x-small; - margin-top: 0px; - margin-bottom: 7px; - margin-left: 76px; - margin-right: 30px; - text-align: left; - line-height: 130%; -} - -h3 { - font-family: 'Tahoma', serif; - font-size: medium; - font-stretch: condensed; - font-style: italic; - margin-bottom: 10px; - color: #7D775C; - margin-top: 0px; - } - -a:link { - font-weight: bold; - text-decoration: none; - color: #7D775C; - } - -a:visited { - font-weight: bold; - text-decoration: none; - color: #7D775C; - } - -a:hover, a:active { - text-decoration: underline; - color: navy; - } - -abbr { -cursor: help; -} - -/* specific divs */ -.page-wrapper { - position: relative; - width: 640px; - background: url("container-bg.jpg") rgb(245, 203,144) top left repeat-y; - border-top: 0px; - padding-top: 1px; - padding-bottom: 0px; - border-left: 2px solid white; - border-right: 3px solid black; - margin: auto; - margin-bottom: 0px; - overflow: hidden; /*needed to avoid horizontal scrollbars that appear in mozilla with margin: auto at 800x600*/ -} - -.intro { -background: url("text-bg.jpg") 45px 0px repeat-y; -margin: 0px; -padding: 0px; -} - -header { - width: 640px; - position: relative; - height: 314px; - background: transparent url("banner2.jpg") top left no-repeat; - margin: 0px; - padding-top: 1px;/*needed to account for collapsing margins -- mozilla properly adds extra space on top if no padding is specified*/ - margin-bottom: 0px; - padding-right: 0px; - z-index: 100; -} - -.preamble { - position: relative; - padding-left: 0px; - width: 400px; - margin-left: 15px; - margin-top: 0px; - margin-right: 0px; - padding-bottom: 0px; - padding-top: 0px; - background: transparent url("l.jpg") 25px 35px no-repeat; -} - -.preamble h3 { - width: 183px; - height: 25px; - background: url("preamb-title.jpg") top center no-repeat; - margin-left: auto; - margin-right: auto; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.preamble p:nth-child(4) { -background: url("preamb-bg.jpg") 42% 100% no-repeat; -padding-bottom: 85px; -} - -.preamble p { - font-variant: small-caps; - color: #7D775C; - font-weight: bold; - font-size: small; - line-height: 100%; -} - -.preamble p:nth-child(2):first-letter { -margin-left: -7px; -color: rgb(245, 203,144); -} - -.summary { - background: url("demo.jpg") transparent top right no-repeat; - width: 207px; - height: 174px; - clear: none; - position: relative; - padding: 0px; - right: 35px; - top: 0px; - float: right; - text-align: right; -} - -/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ -header h1, h2 { - display: none; -} - -.summary p:first-child { - display: none -} - -.summary p:last-child { - display: block; - position: relative; - top: 120px; - bottom: 0px; - margin: 0px; - margin-left: 50px; - padding: 0px; - text-align: right; -} - -.supporting { - padding-left: 0px; - padding-right: 0px; - padding-bottom: 0px; - width: 100%; - padding-top: 1px; - margin-top: 30px; - margin-left: 0px; - margin-right: 0px; - position: relative; - background: transparent url("text-bg.jpg") 45px 0px repeat-y; - z-index: 100; -} - -.supporting h3 { - margin-left: auto; - margin-right: auto; -} - -.supporting p:nth-child(2):first-letter { -margin-left: -7px; -color: rgb(245, 203,144); -display: none; -} - - -.supporting div { - padding-left: 0px; - width: 400px; - margin-left: 15px; - margin-bottom: 45px; - height: 1%; -} - -.supporting footer { - text-align: right; - padding: 0px; - width: 640px; - height: 191px; - margin-left: 0px; - padding-left: 0px; - margin-bottom: 1px; - position: relative; - background: url("footer.jpg") bottom left no-repeat; - padding-top: 0px; -} - -.explanation { -background: transparent url("t.jpg") 25px 33px no-repeat; -} - -.participation { -background: transparent url("g.jpg") 25px 33px no-repeat; -} - -.benefits { -background: transparent url("w.jpg") 25px 18px no-repeat; -} - -.requirements { -background: transparent url("w2.jpg") 25px 18px no-repeat; -} - -.explanation h3 { - width: 167px; - height: 22px; - background: url("what-title.jpg") top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation h3 { - width: 90px; - height: 23px; - background: url("part-title.jpg") top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.benefits h3 { - width: 53px; - height: 18px; - background: url("ben-title.jpg") top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.requirements h3 { - width: 90px; - height: 23px; - background: url("req-title.jpg") top left no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -.design-selection, .design-archives, .zen-resources { -display: block; -font-size: x-small; -margin-bottom: 20px; -} - -footer a { - position: relative; - top: 140px; - right: 60px; - color: rgb(245, 203,144) -} - -footer a:hover{ -color: #7D775C; -} - -.sidebar { - position: absolute; - width: 180px; - height: auto; - right: 35px; - top: 500px; - clear: none; - text-align: right; - padding-bottom: 30px; - z-index: 100; - background: transparent url("link-bg.jpg") bottom left no-repeat; -} - -.sidebar .wrapper { - margin: 0px; - padding: 0px; - width: auto; -} - -.sidebar h3.select { - text-align: right; - width: 180px; - height: 23px; - background: url("sel-title.jpg") top right no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar h3.archives { - text-align: right; - width: 180px; - height: 23px; - background: url("arch-title.jpg") top right no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar h3.resources { - text-align: right; - width: 180px; - height: 23px; - background: url("res-title.jpg") top right no-repeat; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar ul { - margin: 0px; - padding: 0px; - } -.sidebar li { - line-height: 2.5ex; - list-style-type: none; - display: block; - padding-top: 5px; - margin-bottom: 5px; - } -.sidebar li a:link { - font-weight: bold; - text-decoration: none; - color: #7D775C; - } -.sidebar li a:visited { - font-weight: bold; - text-decoration: none; - color: #7D775C; - } -.sidebar li a:hover, a:active { - text-decoration: underline; - color: navy; - } - -.requirements p:nth-child(6) -{ - text-align: right; - font-style: italic; - font-size: x-small; - padding-top: 5px; - margin-top: 20px; -} - -.extra1, .extra2, .extra3, .extra4 { - display:none; -} \ No newline at end of file diff --git a/src/data/designs/163/metadata.json b/src/data/designs/163/metadata.json deleted file mode 100644 index a12013e7e88d0180474a712106d7062171f8ff08..0000000000000000000000000000000000000000 --- a/src/data/designs/163/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "163", - "url": "https://www.csszengarden.com/163", - "css_url": "https://www.csszengarden.com/163/163.css", - "description": "The visual design is clean and minimal, utilizing a muted green color palette to create a calming and professional atmosphere. A single-column layout emphasizes readability, enhanced by generous white space and subtle dividers. The typography is modern and clear, with strategic use of italics and bold for emphasis, while the design maintains an uncluttered aesthetic that directs focus to the core message.", - "categories": [ - "Minimalism", - "Professional", - "Typography-centric", - "Calming", - "Single-column" - ], - "visual_characteristics": [ - "Muted color palette", - "Generous white space", - "Subtle dividers", - "Clear typography", - "Uncluttered layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/163/screenshot_desktop.png b/src/data/designs/163/screenshot_desktop.png deleted file mode 100644 index 93d0c9ceede1d577d0f3b80a54d67d904890cd03..0000000000000000000000000000000000000000 --- a/src/data/designs/163/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4c6402c984b6291f7a4795e9c35ac1d0858d1fdef45c6b04c87953202053b91c -size 385489 diff --git a/src/data/designs/163/screenshot_mobile.png b/src/data/designs/163/screenshot_mobile.png deleted file mode 100644 index 9602e68b8bbd3c9864258525d85f2cc29ae0e71f..0000000000000000000000000000000000000000 --- a/src/data/designs/163/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d4e98d397cdb47479a9a697b63006a8866999d49bc399cba10505279b2be8186 -size 359415 diff --git a/src/data/designs/163/style.css b/src/data/designs/163/style.css deleted file mode 100644 index 116a3163b2f455390abe09c429bbb8ed22fb86d3..0000000000000000000000000000000000000000 --- a/src/data/designs/163/style.css +++ /dev/null @@ -1,248 +0,0 @@ -/* css Zen Garden submission 163 - 'Like the Sea', by Lars Daum, http://www.redrotate.de/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Lars Daum */ -/* Added: Apr. 15th, 2005 */ - -/* 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. */ - - - -* { - padding: 0; - margin: 0; -} -body { - font-family: Tahoma, Arial, Helvetica, sans-serif; - text-align: center; - background: #FBFBE5 url(grass.gif) right bottom fixed no-repeat; - color: #566047; -} -a, a:link, a:visited { - color: #566047; - text-decoration: underline; -} -a:hover { - text-decoration: none; -} -a:active, a:focus { - color: #566047; -} -p:nth-child(6) a { - font-weight: bold; -} -p { - margin-bottom: 10px; - line-height: 19px; - font-size: 70%; -} -abbr { - font-weight: bold; - text-decoration: none; - border-bottom: none; -} -.page-wrapper { - position: relative; - margin: auto; - text-align: left; - background: #FBFBE5 url(container_bg.gif) center top repeat-y; - width: 760px; -} -header { - text-align: center; - background: #8C9777 url(page_header_bg.jpg) center top no-repeat; - height: 300px; -} -h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.summary p:first-child { - position: absolute; - top: 65px; - left: 40px; - font-weight: bold; - color: #FBFBE5; - width: 475px; -} -.summary p:last-child { - position: absolute; - color: #566047; - text-align: left; - top: 245px; - left: 530px; -} -.preamble { - margin: -30px 50px 20px 265px; - padding: 20px 20px 10px; - border: 3px solid #8C9777; - background: #FBFBE5; -} -.preamble h3 { - margin-bottom: 10px; - height: 32px; - background: transparent url(h3_preamble.gif) left top no-repeat; - border-bottom: 1px solid #7D8965; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.supporting { - margin-left: 230px; - padding: 0 0 35px 35px; -} -.supporting h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.explanation, .participation, .benefits, .requirements { - padding-right: 50px; -} -.explanation h3 { - margin-bottom: 10px; - height: 32px; - background: transparent url(h3_explanation.gif) left top no-repeat; - border-bottom: 1px solid #7D8965; -} -.participation h3 { - margin-bottom: 10px; - height: 32px; - background: transparent url(h3_participation.gif) left top no-repeat; - border-bottom: 1px solid #7D8965; -} -.benefits h3 { - margin-bottom: 10px; - height: 32px; - background: transparent url(h3_benefits.gif) left top no-repeat; - border-bottom: 1px solid #7D8965; -} -.requirements h3 { - margin-bottom: 10px; - height: 32px; - background: transparent url(h3_requirements.gif) left top no-repeat; - border-bottom: 1px solid #7D8965; -} -footer { - margin: 0 0 -55px -265px; - padding: 20px 20px 0 530px; - text-align: center; - clear: both; - font-size: 70%; - background: #FBFBE5 url(footer_bg.jpg) center top no-repeat; - height: 166px; - - voice-family: "\"}\""; - height: 146px; - voice-family: "\"}\""; -} -.sidebar { - position: absolute; - top: 275px; - left: 64px; - width: 138px; -} -.sidebar h3 { - margin-top: 25px; - width: 138px; - height: 30px; - border-bottom: 1px solid #7D8965; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -h3.select { - margin-bottom: 5px; - background: transparent url(h3_select.gif) left center no-repeat; -} -h3.archives { - margin-bottom: 5px; - background: transparent url(h3_archives.gif) left center no-repeat; -} -h3.resources { - margin-bottom: 5px; - background: transparent url(h3_resources.gif) left center no-repeat; -} -.sidebar ul { - list-style: none; -} -.design-selection ul li { - margin-bottom: 5px; - padding-bottom: 5px; - font-size: 70%; - color: #8C9777; - border-bottom: 1px solid #8C9777; -} -.sidebar a.designer-name, .sidebar a.designer-name:link, .sidebar a.designer-name:visited, .sidebar a.designer-name:hover, .sidebar a.designer-name:active, .sidebar a.designer-name:focus { - display: inline; - padding: 0; - font-size: 100%; - font-weight: normal; - text-decoration: none; - color: #8C9777; - background-image: none; -} -.design-selection ul li a, .design-selection ul li a:link, .design-selection ul li a:visited { - display: block; - clear: both; - padding: 0 0 2px 20px; - font-size: 100%; - font-weight: bold; - text-decoration: underline; - color: #566047; - background: transparent url(lselect_a_bg.gif) left center no-repeat; -} -.design-selection ul li a:hover { - text-decoration: none; -} -.design-selection ul li a, .design-selection ul li a:active, .design-selection ul li a:focus { - display: block; - clear: both; - padding: 0 0 2px 20px; - font-size: 100%; - font-weight: bold; - text-decoration: underline; - color: #566047; - background: transparent url(lselect_a_bg.gif) left center no-repeat; -} -.design-archives ul li { - margin-bottom: 5px; - font-size: 70%; - color: #8C9777; -} -.design-archives ul li a, .design-archives ul li a:link, .design-archives ul li a:visited { - font-weight: bold; - color: #8C9777; - text-decoration: underline; -} -.design-archives ul li a:hover { - text-decoration: none; -} -.design-archives ul li a:active, .design-archives ul li a:focus { - font-weight: bold; - color: #8C9777; - text-decoration: underline; -} -.zen-resources ul li { - margin-bottom: 5px; - font-size: 70%; - color: #8C9777; -} -.zen-resources ul li a, .zen-resources ul li a:link, .zen-resources ul li a:visited { - font-weight: bold; - color: #8C9777; - text-decoration: underline; -} -.zen-resources ul li a:hover { - text-decoration: none; -} -.zen-resources ul li a:active, .zen-resources ul li a:focus { - font-weight: bold; - color: #8C9777; - text-decoration: underline; -} diff --git a/src/data/designs/164/metadata.json b/src/data/designs/164/metadata.json deleted file mode 100644 index 5eed1f90ce7948b81bbfa2a5d5d8535d7e7284e3..0000000000000000000000000000000000000000 --- a/src/data/designs/164/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "164", - "url": "https://www.csszengarden.com/164", - "css_url": "https://www.csszengarden.com/164/164.css", - "description": "This design features a minimalist layout with a vertical split and a muted color palette, providing a clear distinction between text content and navigation links. The use of subtle background colors enhances readability, while the simplistic typography accentuates the traditional and elegant theme of the design. There's an emphasis on content organization, making the information easily accessible.", - "categories": [ - "minimalist", - "traditional", - "content-focused", - "elegant" - ], - "visual_characteristics": [ - "vertical split layout", - "muted color palette", - "subtle background colors", - "simplicity in typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/164/screenshot_desktop.png b/src/data/designs/164/screenshot_desktop.png deleted file mode 100644 index 210975e5c8854b4fe50196b168a9888f18928ab7..0000000000000000000000000000000000000000 --- a/src/data/designs/164/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:de1a6e44f28f1fd3a28ddb43af064a7b074afb0fd41d8365d948147660159777 -size 440916 diff --git a/src/data/designs/164/screenshot_mobile.png b/src/data/designs/164/screenshot_mobile.png deleted file mode 100644 index 3cb4d3d0f6e7c7dcbb7e6de61e36e96429a7a50b..0000000000000000000000000000000000000000 --- a/src/data/designs/164/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ef3330bfb6005c8afb8f8c6ecfa0d11c208788a985ff1cedd3ebe3f6f97d9587 -size 281009 diff --git a/src/data/designs/164/style.css b/src/data/designs/164/style.css deleted file mode 100644 index d222b867154125d5f7f9adc894da602c6b1ef68a..0000000000000000000000000000000000000000 --- a/src/data/designs/164/style.css +++ /dev/null @@ -1,210 +0,0 @@ -/* css Zen Garden submission 164 - 'Chien', by Alex Miller, http://www.pixul.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Alex Miller */ -/* Added: Apr. 15th, 2005 */ - -/* 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. */ - - - -/* You may notice this CSS file has no IE hacks. This is because I think hacks are messy, and I don't care if my page screws up for some people. It's their fault for using Internet Explorer in the first place. If everyone didn't include hacks, more people would not use IE! */ - -body { - background-image: url(background.gif); - font-family: verdana, arial, serif; - font-size: 11px; - text-align: center; - padding: 0; - margin: 0; - line-height: 16px; - color: #333; -} - -.page-wrapper { - width: 633px; - margin: auto; - border-top: 1px solid #000; - background-image: url(containerbackground.gif); - text-align: left; - padding: 0 0 0 29px; - position: relative; - top: -1px; -} - -header { - background-image: url(top.gif); - width: 605px; - height: 332px; - margin-top: 0; - } - -header h1, h2 { - display: none; - } - -.preamble, .supporting { - margin: 0 0 0 8px; - width: 389px; -} - -.preamble h3, .supporting h3 { - margin-top: 0; - } - -.preamble p, .supporting p, .summary p { - margin: 10px 15px 10px 15px; -} - -.summary, .sidebar { - position: absolute; - left: 435px; - width: 192px; - } - -.summary { - top: 332px; - background: url(summary.gif) no-repeat; - padding-top: 46px; - color: #000; -} - -.sidebar { - top: 526px; -} - - -footer { - text-align: center; - width: 100%; - padding-bottom: 10px; - } - - -.preamble h3 { - background-image: url(title1.gif); - width: 389px; - height: 46px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.explanation h3 { - background-image: url(title2.gif); - width: 389px; - height: 46px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation h3 { - background-image: url(title3.gif); - width: 389px; - height: 46px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.benefits h3 { - background-image: url(title4.gif); - width: 389px; - height: 46px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.requirements h3 { - background-image: url(title5.gif); - width: 389px; - height: 46px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -h3.select { - background-image: url(designs.gif); - width: 192px; - height: 45px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -h3.archives { - background-image: url(archives.gif); - width: 192px; - height: 45px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -h3.resources { - background-image: url(resources.gif); - width: 192px; - height: 45px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -li { - padding: 0 0 6px 0; - text-transform: capitalize; -} - -.design-selection a:link.c, .design-selection a.designer-name:visited { - display: inline; - } - -.design-selection a { - display: block; - } - -.design-selection ul li { - list-style-image: url(paperfolded.gif); -} - -.design-archives ul li, .zen-resources ul li { - list-style-image: url(paper.gif); -} - -a:LINK { - text-decoration: none; - color: #CC0000; - } - -a:VISITED { - text-decoration: none; - color: #CC6666; - } - -a:HOVER { - text-decoration: underline; - color: #CC0000; - } - -footer { - border-top: 1px solid #999; - padding: 6px 0 6px 0; - background-color: #FFF; -} -footer a { - font-weight: bold; - } diff --git a/src/data/designs/165/metadata.json b/src/data/designs/165/metadata.json deleted file mode 100644 index 1f763bdf5fffaebe66da6932ad648dad80bc9ba9..0000000000000000000000000000000000000000 --- a/src/data/designs/165/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "165", - "url": "https://www.csszengarden.com/165", - "css_url": "https://www.csszengarden.com/165/165.css", - "description": "This design features a vintage, newspaper-like aesthetic with a deep maroon background and intricate repeating patterns. The layout balances well with a prominent headline and an aged texture that mimics old paper, creating a sense of nostalgia. The use of serif typography and subtle paper fold elements increase the authenticity of the design style, enhancing the overall vintage theme.", - "categories": [ - "Vintage", - "Typography", - "Web Design", - "Aged Texture", - "Print" - ], - "visual_characteristics": [ - "Deep Maroon Background", - "Repeating Patterns", - "Serif Typography", - "Aged Paper Texture", - "Nostalgic Aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/165/screenshot_desktop.png b/src/data/designs/165/screenshot_desktop.png deleted file mode 100644 index 5598add57f8927d9ec67ba8533f0706e4b274d8f..0000000000000000000000000000000000000000 --- a/src/data/designs/165/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:350421178dede24ea67059d2f7c22017765d6cde476df0e50a9c4cf63f2c81e9 -size 484509 diff --git a/src/data/designs/165/screenshot_mobile.png b/src/data/designs/165/screenshot_mobile.png deleted file mode 100644 index 9c719d8b200e4288323a195845ab225e445ca7af..0000000000000000000000000000000000000000 --- a/src/data/designs/165/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f6a948844fce0ad32a33679ba0f33d35a1f787f1cb403ae16f061ba9745ce0fb -size 524383 diff --git a/src/data/designs/165/style.css b/src/data/designs/165/style.css deleted file mode 100644 index b9367107ce4cc2cd003e3c0277447405d2f53152..0000000000000000000000000000000000000000 --- a/src/data/designs/165/style.css +++ /dev/null @@ -1,169 +0,0 @@ -/* css Zen Garden submission 165 - 'Red Paper', by Rob Soule, http://www.couchfort.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Rob Soule */ -/* Added: May. 31st, 2005 */ - -/* 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. */ - - - -/* --// basic elements --// */ -body { - font: 11px/18px verdana,arial,helvetica,sans-serif; - color: #512720; - background: #512720 url(bodyBg.gif) center top repeat-y; - margin: 0; - padding: 0; - text-align: center; -} -abbr { - cursor: help; - border-bottom: 1px dotted #B0915F; -} -/* --// layout // */ -.page-wrapper { - width: 765px; - background: url(mainBg.gif) repeat-y; - margin: 0 auto; - padding: 0; - text-align: left; -} -header { - width: 765px; - height: 343px; - background: url(headerBg.jpg) no-repeat; -} -.preamble, .supporting { - text-align: left; - width: 455px; - margin: 0 0 0 43px; -} -.preamble p, .supporting p { - margin: 0 0 12px 0; -} -.summary { position: relative; } -.summary p:last-child { - position: absolute; - margin-top: -70px; - left: 615px; - font: 9px/14px Georgia,Times,Serif; - text-transform: uppercase; - width: 100px; - padding: 0; -} - -.sidebar { - position: absolute; - top: 343px; - margin-left: 529px; - color: #2B0101; - width: 175px; -} -footer { - display: block; - padding: 12px 0 0 0; - margin: 20px 0 0 120px; - text-align: center; - background: url(footer.gif) no-repeat; - height: 43px; - width: 204px; -} -p:nth-child(2),p:nth-child(3),p:nth-child(4),p:nth-child(5),p:nth-child(6) { padding-left: 8px; } -/* --// headers // --*/ -.preamble h3,.explanation h3, .participation h3, .benefits h3, .requirements h3 { - height: 60px; - text-indent: -8000px; - margin: 0; - padding: 0; -} -.design-selection h3, .zen-resources h3, .design-archives h3 { - height: 23px; - margin: 0; - padding: 0; - text-indent: -8000px; -} -.preamble h3 { background: url(hdRoad.gif) no-repeat; } -.explanation h3 { background: url(hdAbout.gif) no-repeat; } -.participation h3 { background: url(hdPart.gif) no-repeat; } -.benefits h3 { background: url(hdBen.gif) no-repeat; } -.requirements h3 { background: url(hdReq.gif) no-repeat; } -.design-selection h3 { background: url(hdSelect.gif) no-repeat; } -.design-archives h3 { background: url(hdArch.gif) no-repeat; margin-top: 15px;} -.zen-resources h3 { background: url(hdResc.gif) no-repeat; margin-top: 15px; } -/* --// links --// */ -a { - color: #683A33; - text-decoration: none; - border-bottom: 1px dotted #683A33; -} -a:hover,a:active { - border-bottom: 1px solid #512720; - background: #C3A680; -} -a abbr { border: 0; } -li a { - display: block; - font-weight: bold; - font-size: 10px; - text-transform: uppercase; - padding: 0 0 0 10px; - background: url(star.gif) no-repeat; - border-bottom: 0; -} -li a.designer-name { - font-size: 9px; - font-weight: normal; - display: inline; - padding: 0; - background: none; -} -.design-archives li a, .zen-resources li a { - display: inline; - font-weight: normal; - font-size: 9px; - margin: 0; - text-transform: uppercase; -} -.design-archives li a { background: none; } -li a:hover, li a:hovera.designer-name { color: #5E1919; border-bottom: 0; } -li a:hover { background: url(star_over.gif) no-repeat; } -li a:hovera.designer-name { background: none; } -footer a { - text-decoration: none; - border: none; - font: 10px georgia,times,serif; - padding: 1px; - text-transform: uppercase; -} -footer a:hover { - background: none; - border-top: 1px solid #683A33; - border-bottom: 1px solid #683A33; -} -/* --// no display // -- */ -.summary p:first-child, .extra1, .extra2, .extra3, .extra4, .extra5, .extra6, header h1,h2 { display : none; } - -/* --// lists --// */ -ul,li { - list-style: none; - padding: 0; - margin: 0; - line-height: 15px; -} -.design-selection, .zen-resources, .design-archives { - padding-bottom: 6px; - background: url(liBttmBg.gif) center bottom no-repeat; -} -li { - padding: 5px 5px 12px 5px; - background: url(liBg.gif) center bottom no-repeat; - text-transform: uppercase; - font-size: 9px; - /*border-bottom: 1px solid #A68858;*/ -} -/* --// hover effects //-- */ -p:nth-child(2):hover,p:nth-child(3):hover,p:nth-child(4):hover,p:nth-child(5):hover,p:nth-child(6):hover { border-left: 2px solid #B0915F; padding-left: 6px; } -.summary p:last-child:hover { border: 0; padding: 0; } diff --git a/src/data/designs/166/metadata.json b/src/data/designs/166/metadata.json deleted file mode 100644 index 8436907ef44dc96f66dc81bdb11709ab22d02aa9..0000000000000000000000000000000000000000 --- a/src/data/designs/166/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "166", - "url": "https://www.csszengarden.com/166", - "css_url": "https://www.csszengarden.com/166/166.css", - "description": "This design showcases a minimalist aesthetic with a dark background, creating a contemporary and sophisticated feel. The use of boxes with rounded corners provides a modern twist, while the contrasting colors and textures add depth. The typography is clean and straightforward, with strategically placed headers to guide the viewer's attention across the layout. Imagery of nature complements the theme, adding a touch of organic elegance.", - "categories": [ - "Minimalism", - "Modern", - "Sophistication", - "Nature", - "Typography" - ], - "visual_characteristics": [ - "Dark Background", - "Contrasting Colors", - "Rounded Corners", - "Clean Typography", - "Textured Elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/166/screenshot_desktop.png b/src/data/designs/166/screenshot_desktop.png deleted file mode 100644 index 0627f2fb7b729a9add2ff9c62914002147aac911..0000000000000000000000000000000000000000 --- a/src/data/designs/166/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:06b2470380905f7a3e41feb75e1909772d8e048fc39580ccb5506bdc31887f32 -size 734735 diff --git a/src/data/designs/166/screenshot_mobile.png b/src/data/designs/166/screenshot_mobile.png deleted file mode 100644 index 182c6a47f20bdd1175ea7fed355c44867016ab85..0000000000000000000000000000000000000000 --- a/src/data/designs/166/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a9cb5d6d0a5d043238c7787cfeedcfc1cc50ab28f8c4b178c9befe0ee0e518f1 -size 366394 diff --git a/src/data/designs/166/style.css b/src/data/designs/166/style.css deleted file mode 100644 index 8a4a455410534fca22ede677bfedd3f47ba0a4a3..0000000000000000000000000000000000000000 --- a/src/data/designs/166/style.css +++ /dev/null @@ -1,315 +0,0 @@ -/* css Zen Garden submission 166 - 'Obsequience', by Pierce Gleeson, http://www.piercegleeson.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Pierce Gleeson */ -/* Added: May. 31st, 2005 */ - -/* 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. */ - - - -* { -margin: 0; -padding: 0; -} - - -body { - font: 75%/160% verdana; - color: #333; - background: #333 url(equaliser.jpg) repeat top left; - margin: 0; - text-align:right; - padding-top:0px; - font-family: "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Verdana, sans-serif; - -} - -.page-wrapper { - - padding: 0; - margin: 30px 30px 0 auto; - width:720px; - text-align:left; - background:transparent url(back.jpg) top left repeat-y; - overflow:auto; - -} - -.extra1{ - padding: 0; - margin: 0 30px 30px auto; - width:720px; - height:75px; - background:transparent url(useless.jpg) top left repeat; - overflow:auto; -} - -.sidebar{ - background:transparent url(linkback.gif) repeat-y top left; - margin:0 0 0 70px; - float:left; - width: 120px; - position:absolute; - - - top: 299px !important; /* Good Browsers */ - top: 269px; /* IE 5 */ - top/**/:/**/299px; /* IE 6 */ -} - - -.sidebar .wrapper{ - background:transparent url(linkbottom.jpg) no-repeat bottom left; - padding:0 2px 20px 2px; -} - -.design-selection h3, .design-archives h3, .zen-resources h3, #lfavorites h3{ - margin:10px 0 0 0; - text-indent: -15000px; - height: 28px; - overflow: hidden; -} - -.design-selection h3{ background: transparent url(select.gif) no-repeat left top; height:50px; margin:0px;} -.design-archives h3{ background: transparent url(archives.gif) no-repeat left top;} -#lfavorites h3{ background: transparent url(favourites.gif) no-repeat left top;} -.zen-resources h3{ background: transparent url(resources.gif) no-repeat left top;} - - - -.summary{ - padding:0; - margin:0 10px 0 250px !important; - margin:0 5px 0 250px; - float:right; - width:250px; - clear:right; - background:#fff; - color:#666; -} - -.summary p{ - margin:5px 5px 5px 5px; - height:100%; -} - -.summary p:first-child{ - text-indent:-15000px; - overflow:hidden; - height:1px; - margin:0; -} - - -header{ - background: url(header.jpg) no-repeat top left; - padding:0; - margin:0; - text-indent: -15000px; - height: 290px; - overflow: hidden; -} - - -.supporting{ - padding:0; - margin:0 10px 0 0 !important; - margin:0 5px 0 0; - -} - - -.preamble{ - padding:0; - margin:0 0 20px 205px !important; - margin:0 0 20px 102px; - float:left; - width:230px; - clear:left; - background: url(preambleback.jpg) repeat-y top left; - -} - - -.explanation{ - - background:transparent; - margin:0 0 10px 20px !important; - margin:0 0 10px 457px; - padding-bottom:10px; - width: 250px; - clear:right; - float:right !important; - float:none; - overflow:auto; -} - - -.participation{ - background:transparent; - margin:0 0 40px 20px !important; - margin:0 0 40px 205px; - float:right !important; - float:none; - width: 505px; - clear:right; - overflow:auto; - background: transparent url(participationback.jpg) repeat-y top left; - -} - -.benefits, .requirements{ - background:transparent; - margin: 40px 0 0 70px; - clear:both; - overflow:auto; - width:640px; - background: transparent url(benback.jpg) repeat-y top left; - position:relative; - -} - -footer{ - text-align:center; - padding:40px 0 10px 0; - background: transparent url(footback.jpg) top left no-repeat; - margin:0 0 0 460px; - width: 250px; - float:right !important; - float:none; - overflow:auto; - border-bottom:2px solid #fff; -} - - - -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3{ - padding:0; - margin:0 0 10px 0; - text-indent: -15000px; - height: 40px; - overflow: hidden; -} - -.preamble h3{ background: transparent url(road.jpg) no-repeat left top;} -.explanation h3{ background: transparent url(what.jpg) no-repeat left top;} -.participation h3{ background: transparent url(participation.jpg) no-repeat left top;} -.benefits h3{ background: transparent url(benefits.jpg) no-repeat left top;} -.requirements h3{ background: transparent url(requirements.jpg) no-repeat left top;} - - -.preamble p, .explanation p, .participation p, .benefits p, .requirements p{ - margin:10px 15px; - text-align:justify; -} - -.participation p{ - margin:10px 15px 10px 25px; -} - -.participation h3, .benefits h3, .requirements h3{ - margin:0; - height: 50px; - -} - -.participation p:nth-child(4){ - background:transparent url(participationbottom.jpg) no-repeat bottom left; - margin:0; - padding:10px 15px 30px 25px; -} - -.benefits p,.requirements p{ - margin:10px 15px 10px 25px; -} - -.benefits p:nth-child(2),.requirements p:nth-child(6){ - background:transparent url(benbottom.jpg) no-repeat bottom left; - margin:0; - padding:10px 15px 30px 25px; -} - - -.preamble p{ - margin:10px 20px 10px 20px; -} - -.preamble p:nth-child(4){ - background:transparent url(preamblebottom.jpg) no-repeat bottom left; - margin:0; - padding:10px 25px 30px 25px; -} - -.preamble h3{ - margin:0 0 20px 0; - height:50px; -} - - - - -a, a:link, a:visited { - background-color:transparent; - color:#996; - text-decoration:none; - font-weight:bold; -} - -a:visited { - background-color:transparent; - color:#600; -} - -a:hover {text-decoration:underline; color:#600;} - - - -.sidebar ul { - list-style: none; - padding: 0; - margin: 0; - font-size: .9em; - letter-spacing:1px; -} - -.sidebar ul li { - padding: 5px 10px 5px 5px; - margin: 0; -} - -.sidebar ul li:hover { - background: #cc9; - color: #333; -} - -.sidebar ul li:hover a{ - background: #cc9; - color: #333; -} - -.sidebar .design-selection { - color: #333; -} - -.sidebar ul li a { - display: inline; - color: #363; - font-weight:normal; -} - -.sidebar .design-selection ul li a { - display: block; -} - -.sidebar .design-selection ul li a.designer-name, .sidebar ul li a.designer-name { - display: inline; - font-size: .8em; - color: #363; - color: #600; - text-transform: none; - font-weight:normal; -} - diff --git a/src/data/designs/167/metadata.json b/src/data/designs/167/metadata.json deleted file mode 100644 index bcfb172306129867591b879b570468f664c2ecfd..0000000000000000000000000000000000000000 --- a/src/data/designs/167/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "167", - "url": "https://www.csszengarden.com/167", - "css_url": "https://www.csszengarden.com/167/167.css", - "description": "The design features a warm and earthy color palette with a wood-textured header that sets a rustic mood. It utilizes a rich, deep brown as the primary background color, which harmoniously complements the beige and gold wood textures. The layout is clean, with a balanced arrangement of text and link elements, offering clarity and functionality. Typography is sharp and neatly integrated, emphasizing readability. The overall mood evokes a cozy, vintage aesthetic, inviting users to engage with the content in a relaxed manner.", - "categories": [ - "Rustic", - "Vintage", - "Warm", - "Nature-inspired", - "Text-focused" - ], - "visual_characteristics": [ - "Wood texture", - "Earthy tones", - "Clean layout", - "Sharp typography", - "Balanced elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/167/screenshot_desktop.png b/src/data/designs/167/screenshot_desktop.png deleted file mode 100644 index 0690dd871e4382742d2187971a51f7c7f9ab8c57..0000000000000000000000000000000000000000 --- a/src/data/designs/167/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7e6e047c3622c61fff5bb220dba2634cba19455c276599a16a910146a303ef07 -size 350471 diff --git a/src/data/designs/167/screenshot_mobile.png b/src/data/designs/167/screenshot_mobile.png deleted file mode 100644 index b46f4a9c0670659b84f24fa3300dc260582c554e..0000000000000000000000000000000000000000 --- a/src/data/designs/167/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0b46b73e85e30e36af96baf3fc5d87921705afd0b9f316d6ec275f5f4401a0a5 -size 313648 diff --git a/src/data/designs/167/style.css b/src/data/designs/167/style.css deleted file mode 100644 index 1a6469841122c68daebbd8b3be15d3a8561dc2a7..0000000000000000000000000000000000000000 --- a/src/data/designs/167/style.css +++ /dev/null @@ -1 +0,0 @@ -/* css Zen Garden submission 167 - 'Hoops - Tournament Edition', by David Marshall Jr., http://www.pixelflexmedia.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, David Marshall Jr. */ /* Added: May. 31st, 2005 */ /* 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. */ /* basic html attributes ------------------------------------------------------------------- */ body { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: #6B320E url(bg.gif) repeat-y 50% 0; text-align: center; } p, ul { font-family: arial, verdana, helvetica, sans-serif; font-size: 11px; line-height: 17px; color: #000000; } a:link, a:visited { text-decoration: underline; color: #B52E00; } a:hover, a:active { text-decoration: underline; color: #6B320E; } h1, h2 { display: none; } h3 { width: 323px; height: 37px; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* main divs ------------------------------------------------------------------------------- */ .page-wrapper { position: relative; margin: 0 auto; width: 600px; text-align: left; } .intro { width: 600px; } .supporting { width: 340px; margin: 0px 0px 0px 20px; } .preamble { width: 340px; margin: 0px 0px 0px 20px; } header { width: 600px; height: 471px; background: url(main.jpg) no-repeat; } .summary { position: absolute; top: 480px; left: 390px; width: 190px; background: transparent url(h3_thegoods.jpg) no-repeat; border-bottom: 1px solid #FFFFFF; } footer { font-family: arial, verdana, helvetica, sans-serif; font-size: 10px; text-transform: uppercase; margin: 30px 0px 30px 0px; } .sidebar { position: absolute; top: 570px; left: 390px; width: 190px; margin: 0px 30px 0px 0px; } header h1, header h2 { display: none; } /* text & links ---------------------------------------------------------------------- */ .summary p:last-child { text-indent: 0; font-family: arial, verdana, helvetica, sans-serif; color: #FFFFFF; padding: 7px 12px 7px 12px; margin: 38px 0px 0px 0px; background: #6B320E; border-top: 1px solid #FFFFFF; } .summary p:last-child a:link, .summary p:last-child a:visited { text-decoration: underline; color: #FEEC83; font-weight: bold; } .summary p:last-child a:hover, .summary p:last-child a:active { text-decoration: underline; color: #FFFFFF; font-weight: bold; } .summary p:first-child { display: none; } .preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { padding: 0px 0px 0px 0px; margin: 30px 0px 5px 0px; } .preamble h3 { margin: 0px 0px 5px 0px; } .preamble p:nth-child(2), .explanation p:nth-child(2), .participation p:nth-child(2), .benefits p:nth-child(2), .requirements p:nth-child(2) { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; } footer a:link, footer a:visited { text-decoration: underline; color: #FFFFFF; background: #6B320E; padding: 2px 16px 2px 16px; margin: 0px 0px 0px 0px; border: 1px solid #FFFFFF; } footer a:hover, footer a:active { text-decoration: underline; color: #000000; border: 1px solid #FFFFFF; background: url(li_bg.jpg) no-repeat; } /* linklist on sidebar --------------------------------------------------------------- */ .sidebar h3 { width: 190px; height: 37px; padding: 0px 0px 0px 0px; margin: 20px 0px 0px 0px; } .sidebar p, .sidebar li { font-family: arial, verdana, helvetica, sans-serif; font-size: 10px; text-indent: 0px; } .sidebar ul { list-style: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: #6B320E; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; } .sidebar li { color: #000000; line-height: 12px; padding: 7px 17px 7px 17px; } .sidebar li:hover { background: url(li_bg.jpg) no-repeat; } .sidebar li a { display: block; border: none; color: #FFFFFF; font-weight: bold; padding: 0px 0px 0px 12px; margin: 0px 0px 0px -12px; background: url(bullet_white.gif) no-repeat 0px 4px; } .sidebar li a:hover { color: #000000; background: url(bullet_black.gif) no-repeat 0px 4px; } .sidebar li a.designer-name { display: inline; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; background: none; color: #FEEC83; font-weight: normal; } .sidebar li a.designer-name:hover { color: #000000; } .sidebar .design-archives li, .sidebar .zen-resources li { padding: 7px 0px 7px 0px; } .sidebar .design-archives li a, .sidebar .zen-resources li a { display: inline; padding: 0px 0px 0px 12px; margin: 0px 0px 0px 5px; background: url(bullet_white.gif) no-repeat 0px 4px; } .sidebar .design-archives li a:hover, .sidebar .zen-resources li a:hover { background: url(bullet_black.gif) no-repeat 0px 4px; } /* h3 image replacement -------------------------------------------------------------- */ h3.select { background: transparent url(h3_select.jpg) no-repeat; } h3.resources { background: transparent url(h3_resources.jpg) no-repeat; } h3.archives { background: transparent url(h3_archives.jpg) no-repeat; } .preamble h3 { background: url(h3_theroad.gif) no-repeat; margin-top: 0; } .explanation h3 { background: url(h3_sowhat.gif) no-repeat; } .participation h3 { background: url(h3_participation.gif) no-repeat; } .benefits h3 { background: url(h3_benefits.gif) no-repeat; } .requirements h3 { background: url(h3_requirements.gif) no-repeat; } \ No newline at end of file diff --git a/src/data/designs/168/metadata.json b/src/data/designs/168/metadata.json deleted file mode 100644 index 51b7e85357447a68480e899465d0fb0b6543e667..0000000000000000000000000000000000000000 --- a/src/data/designs/168/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "168", - "url": "https://www.csszengarden.com/168", - "css_url": "https://www.csszengarden.com/168/168.css", - "description": "This design exhibits a quirky, playful theme centered around the concept of chicken-friendly farming. The use of whimsical illustrations of chickens, vibrant colors like blue, orange, and yellow, and ornate typography create a cheerful and humorous atmosphere. The layout is structured with a prominent header, informational sections, and a sidebar for navigation links, supporting clear accessibility to content. The design cleverly combines a vintage aesthetic with a modern twist, making it engaging and inviting.", - "categories": [ - "Humorous", - "Educational", - "Whimsical", - "Nature-themed", - "Vintage-inspired" - ], - "visual_characteristics": [ - "Vibrant color palette", - "Whimsical illustrations", - "Ornate typography", - "Structured layout", - "Playful atmosphere" - ] -} \ No newline at end of file diff --git a/src/data/designs/168/screenshot_desktop.png b/src/data/designs/168/screenshot_desktop.png deleted file mode 100644 index cb4cd0074a0e257ab9723510ae30a408f7ccb2a2..0000000000000000000000000000000000000000 --- a/src/data/designs/168/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3b0fc5b22e8e56912a84ed2b8ad6dd946993e68a7942d02e0be152e6f09cf6f5 -size 63196 diff --git a/src/data/designs/168/screenshot_mobile.png b/src/data/designs/168/screenshot_mobile.png deleted file mode 100644 index 1f02e0392ae259865a9bad94a082bd3d8c37d8f6..0000000000000000000000000000000000000000 --- a/src/data/designs/168/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:daa26b8319c53bfc714b7fe1661beeaddf347f00aa7926dc1a7983237a4bdee1 -size 325008 diff --git a/src/data/designs/168/style.css b/src/data/designs/168/style.css deleted file mode 100644 index 03592d1baabbe3be6e7ce94fc0157879e888f47b..0000000000000000000000000000000000000000 --- a/src/data/designs/168/style.css +++ /dev/null @@ -1,194 +0,0 @@ -/* css Zen Garden submission 168 - 'Hengarden', by Mr. Khmerang, http://www.khmerang.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Mr. Khmerang */ -/* Added: May. 31st, 2005 */ - -/* 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. */ - - - - -/* Chicken Should Smile! -* Hengarden is made to celebrate the year of the cock, -* for general concern about rights of the innocent chickens -* and in fear of Chicken's Revenge (a.k.a the flu, you know what I'm talking about) -* but also to -* laugh at the growing use of image replacements in -* css design and especially at zengarden. -*/ - - -body { - background: #fff url(bodybg.gif) 395px 0 repeat-y; - margin: 0; - padding: 3px; - font: 80%/80% Trebuchet MS, Arial, Helvetica, Sans Serif; -} -header { - background: #fff url(pageheaderbg.gif) repeat-x; - width: 389px; - height: 272px; -} -h1 { - background: url(pageheader.jpg) 33px 22px no-repeat; - width: 389px; - height: 272px; - padding: 0; -} -h1, h3, p:nth-child(2) { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -h2, .summary p, p { - display: none; -} -h1, h3, p:nth-child(2) { - margin:0 auto 8px auto; - display: block; -} -h3 { - margin-top: 20px; -} -.summary { - position:absolute; - left: 420px; - top: 40px; - background-image: url(quicksummary.gif); - background-repeat:no-repeat; - width: 138px; - height: 83px; -} -.preamble, .supporting { - width: 389px; - text-align:center; - -} -.preamble h3 { - background: url(preambleH.gif) no-repeat; - width: 289px; - height: 41px; -} -.preamble p:nth-child(2) { - background: url(preamble.gif) no-repeat; - width: 343px; - height: 182px; -} -.explanation h3 { - background: url(explanationH.gif) no-repeat; - width: 247px; - height: 41px; -} -.explanation p:nth-child(2) { - background: url(explanation.gif) no-repeat; - width: 342px; - height: 212px; -} -.participation h3 { - background: url(participationH.gif) no-repeat; - width: 171px; - height: 41px; -} -.participation p:nth-child(2) { - background: url(participation.gif) no-repeat; - width: 342px; - height: 256px; -} -.benefits h3 { - background: url(benefitsH.gif) no-repeat; - width: 130px; - height: 41px; -} -.benefits p:nth-child(2) { - background: url(benefits.gif) no-repeat; - width: 342px; - height: 83px; -} -.requirements h3 { - background: url(requirementsH.gif) no-repeat; - width: 174px; - height: 41px; -} -.requirements p:nth-child(2) { - background: url(requirements.gif) no-repeat; - width: 342px; - height: 313px; -} -.requirements p:nth-child(5) { - display: block; - background: url(requirementsend.gif) no-repeat; - width: 367px; - height: 138px; - margin-left: 22px; - margin-bottom: 60px; - text-align: left; -} -.supporting { - background: url(footer.gif) right bottom no-repeat; - text-align: center; - -} -.requirements p:nth-child(5), .requirements p:nth-child(6) { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -footer { - background-color:#4178E6; - padding: 5px; - font-weight:bold; -} -footer a { - color: #fff; -} -.sidebar { - position:absolute; - left: 395px; - top: 140px; - width: 189px; -} -.sidebar ul { - list-style-type: none; - margin: 0; - padding: 0; -} -.sidebar ul li { - border-bottom: 1px solid #CBDAF8; - padding: 6px 15px; - color: #555; - text-align:center; -} -.sidebar ul li:hover { - background-color: #CBDAF8; -} - -.sidebar ul li a { - text-decoration: none; -} -.design-selection a { - color: #4178E6; -} -.zen-resources a { - color: #82A839; -} -.design-archives a { - color: #fa0; -} -.sidebar ul li a:hover { - color: #000; -} -h3.select, h3.resources { - width: 189px; - height: 40px; - display: block; -} -h3.select { - background: url(lselectH.gif); -} - -h3.resources { - background: url(lresourcesH.gif); -} diff --git a/src/data/designs/169/metadata.json b/src/data/designs/169/metadata.json deleted file mode 100644 index bff4858c4ab7205f97056a9d3d7756761da92864..0000000000000000000000000000000000000000 --- a/src/data/designs/169/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "169", - "url": "https://www.csszengarden.com/169", - "css_url": "https://www.csszengarden.com/169/169.css", - "description": "This visual design features a classical and historic theme with a brown and beige color palette, evoking an antique and scholarly atmosphere. The use of serif typography complements the traditional aesthetic, while the layout is clean and structured, offering clear sections for content and navigation. Subtle decorative elements, such as the detailed header motif, add to the refined and timeless feel of the design.", - "categories": [ - "Antique", - "Elegant", - "Traditional", - "Text-focused", - "Scholarly" - ], - "visual_characteristics": [ - "Brown and beige color scheme", - "Serif typography", - "Classic motif", - "Structured layout", - "Subtle decorative elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/169/screenshot_desktop.png b/src/data/designs/169/screenshot_desktop.png deleted file mode 100644 index 742df5b9691d30ad5b2fda217a6f800cc4aaf0d7..0000000000000000000000000000000000000000 --- a/src/data/designs/169/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d9f2f4542ff6d6df6b4992f8e44d0d3858494c49e176a3d98c5a8d3bfbf26657 -size 1418884 diff --git a/src/data/designs/169/screenshot_mobile.png b/src/data/designs/169/screenshot_mobile.png deleted file mode 100644 index b55789c32d42f6e7177a4b05b8269d9c068ba9a2..0000000000000000000000000000000000000000 --- a/src/data/designs/169/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8c9f2206b1f1a9c4020b01bfce5ddfacce75fe521b6e3b086bea862a09cccdb6 -size 402400 diff --git a/src/data/designs/169/style.css b/src/data/designs/169/style.css deleted file mode 100644 index 00cb55aaf79eb7e5c67f5e40f26555dceb93fe4c..0000000000000000000000000000000000000000 --- a/src/data/designs/169/style.css +++ /dev/null @@ -1,375 +0,0 @@ -/* css Zen Garden submission 169 - 'Greece Remembrance', by Pierre-Leo Bourbonnais, http://www.kaligrafy.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Pierre-Leo Bourbonnais */ -/* Added: May. 31st, 2005 */ - -/* 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. */ - - - - -body { - background: #30261d; - padding: 0px; - margin-right: auto; - margin-left: auto; - margin-bottom: 0px; - margin-top: 0px; - width: 776px; - text-align: center; - font: 12px Georgia, Times New Roman, Times, serif; - color: #ffffff; -} - -.page-wrapper { - background: repeat-y url(sculptures.jpg); - margin: 0px; - padding: 0px; - margin-right: auto; - margin-left: auto; - margin-top: 381px; - top: 381px; - width: 776px; - text-align: justify; - color: #362F27; - line-height: 19px; -} - -.intro { - margin: 0px; - padding: 0px; - width: 589px; - background: repeat-y url(content_bkgd.jpg); - margin-left: 94px; - border-top: 1px none; - border-bottom: 1px none; -} - -header { - position: absolute; - top: 0px; - background: no-repeat center url(header.jpg); - height: 381px; - width: 776px; - margin: 0px; - padding: 0px; - margin-left: -94px; - right: auto; - left: auto; -} - - -.supporting { - margin: 0px; - padding: 0px; - width: 589px; - background: repeat-y url(content_bkgd.jpg); - margin-left: 94px; - border-top: 1px none; - border-bottom: 1px none; - margin-top: -20px; -} - -.summary { - background: no-repeat url(top.jpg); - width: 589px; - height: 85px; - margin: 0px; - padding: 0px; -} - -p:nth-child(2) { - text-indent: 0px; - padding: 0px; - margin: 0px; -} - -p:nth-child(3), p:nth-child(4), p:nth-child(5), p:nth-child(6) { - text-indent: 22px; -} - -h1, h2 { - display: none; -} - -h3 { - text-indent: 200%; - white-space: nowrap; - overflow: hidden; -} - -.summary p { - display: none; -} - -.summary p:last-child { - display: block; - width: 145px; - margin: 0px; - padding: 0 0 0 5px; - position: absolute; - top: 470px; - left: auto; - right: auto; - margin-left: 415px; - text-indent: 0px; - text-align: left; - vertical-align: middle; - font-size: 10px; - line-height: 16px; - height: 50px; - font-style: oblique; -} - -.summary a { - padding: 0px; - margin: 0px; - color: #000000; - text-decoration: underline; -} - -.summary a:hover { - margin: 0px; - padding: 0px; - color: #ebdccc; - font-style: italic; - border-bottom: 1px none; - text-decoration: none; -} - -.preamble, .explanation, .participation, .benefits, .requirements { - margin: 0px; - padding: 0px; - width: 405px; -} - -.preamble p, .explanation p, .participation p, .benefits p, .requirements p { - margin: 0px; - padding: 8px; - padding-left: 41px; - padding-right: 27px; -} - -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { - width: 362px; - height: 22px; - margin: 0px; - padding: 0px; - margin-bottom: 5px; - margin-left: 38px; - margin-top: 20px; -} - -.preamble h3 { - margin-top: 5px; - background: url(h3_preamble.gif) no-repeat; -} - -.explanation h3 { - background: url(h3_explanation.gif) no-repeat; -} - -.participation h3 { - background: url(h3_participation.gif) no-repeat; -} - -.benefits h3 { - background: url(h3_benefits.gif) no-repeat; -} - -.requirements h3 { - background: url(h3_requirements.gif) no-repeat; -} - -.preamble { - padding-bottom: 20px; -} - -.sidebar { - position: absolute; - width: 139px; - margin: 0px; - padding: 0px; - top: 510px; - left: auto; - right: auto; - font-size: 11px; - margin-left: 507px; - text-indent: 0px; - text-align: right; -} - -.sidebar h3 { - width: 139px; - height: 22px; - margin: 0px; - padding: 0px; - margin-bottom: 5px; - margin-left: 0px; - margin-top: 20px; - padding-right: 2px; -} - -.sidebar ul { - margin: 0px; - padding: 0px; - list-style: none; - margin-left: 0px; - width: 139px; -} - -.sidebar li { - margin: 0px; - padding: 0px; - list-style: none; -} - -.sidebar a { - margin: 0px; - padding: 0px; - display: block; - color: #B82A09; - text-decoration: none; - text-transform: uppercase; -} - -.sidebar a:hover { - margin: 0px; - padding: 0px; - display: block; - color: #741600; - text-decoration: none; -} - -.design-selection h3 { - margin-top: 2px; - background: url(h3_select.gif) no-repeat; -} - -.design-archives h3 { - background: url(h3_archives.gif) no-repeat; -} - -.zen-resources h3 { - background: url(h3_resources.gif) no-repeat; -} - -.design-archives a, .zen-resources a { - margin: 0px; - padding: 0px; - display: inline; - text-decoration: none; - text-transform: none; -} - -.design-archives a:hover, .zen-resources a:hover { - margin: 0px; - padding: 0px; - display: inline; - text-decoration: none; - text-transform: none; -} - -.sidebar a.designer-name { - margin: 0px; - padding: 0px; - display: inline; - font-style: italic; - color: #754f38; - text-decoration: none; - text-transform: none; -} - -.sidebar a.designer-name:hover { - margin: 0px; - padding: 0px; - display: inline; - font-style: italic; - color: #462f22; - text-decoration: none; - text-transform: none; -} - -a { - color: #B82A09; - text-decoration: none; -} - -a:hover { - color: #B82A09; - text-decoration: underline; -} - -a:visited { - color: #754f38; -} - -footer { - width: 589px; - background: no-repeat url(bot.jpg) #30261d; - margin: 0px; - padding: 0px; - margin-bottom: -2px; - text-align: center; - padding-top: 54px; - text-indent: 0px; - font: 10px Verdana, Arial, Helvetica, sans-serif; - text-transform: uppercase; - padding-bottom: 17px; -} - -footer a { - color: #362F27; - text-decoration: none; - text-transform: uppercase; -} - -footer a:hover { - color: #B82A09; - text-decoration: none; - text-transform: uppercase; -} - -.requirements p:nth-child(6) { - position: relative; - bottom: -35px; - width: 589px; - text-indent: 0px; - text-align: center; - font: 10px Verdana, Arial, Helvetica, sans-serif; - margin: 0px; - padding: 0px; -} - -.requirements p:nth-child(6) a { - color: #5d5144; - text-decoration: none; -} - -.requirements p:nth-child(6) a:hover { - color: #B82A09; - text-decoration: none; -} - -.intro abbr { - color: #5d5144; - font-style: italic; - text-decoration: none; - border-bottom: none; -} - -.supporting abbr { - color: #5d5144; - font-style: italic; - text-decoration: none; - border-bottom: none; -} - -.sidebar abbr { - border-bottom: none; - text-decoration: none; - font-style: oblique; -} \ No newline at end of file diff --git a/src/data/designs/170/metadata.json b/src/data/designs/170/metadata.json deleted file mode 100644 index aa5a93e808a47dd8544a06b17adfc6fc6408e614..0000000000000000000000000000000000000000 --- a/src/data/designs/170/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "170", - "url": "https://www.csszengarden.com/170", - "css_url": "https://www.csszengarden.com/170/170.css", - "description": "The design of the CSS Zen Garden is exemplary with its soothing blue tones, providing a calm and professional aesthetic. The heart icons add a touch of creativity and warmth. The layout is clean and well-structured with clear navigation on the right-hand side, providing users easy access to additional information and style sheets. The typography varies, highlighting key sections and maintaining readability throughout.", - "categories": [ - "Web Design", - "CSS Showcase", - "Typography", - "User Interface", - "Aesthetic" - ], - "visual_characteristics": [ - "Soothing Color Palette", - "Structured Layout", - "Iconography", - "Hierarchical Typography", - "Calming Aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/170/screenshot_desktop.png b/src/data/designs/170/screenshot_desktop.png deleted file mode 100644 index 011ed44b1d90424cc3a2535874bacb04a78d7f78..0000000000000000000000000000000000000000 --- a/src/data/designs/170/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:431faa2c2af449ac18310db0e2c6e07d00eb479be62f7bcd55af9654c5622850 -size 448776 diff --git a/src/data/designs/170/screenshot_mobile.png b/src/data/designs/170/screenshot_mobile.png deleted file mode 100644 index 8c50b2ccee961b707d680c0cfcec33b3ca398a7c..0000000000000000000000000000000000000000 --- a/src/data/designs/170/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c59f5603f8f5599e12e91e92d665a235dfe149ad88b92a9e81f76f16e0f14322 -size 512179 diff --git a/src/data/designs/170/style.css b/src/data/designs/170/style.css deleted file mode 100644 index 54ee148806211608771cec2f2f9353b4096b6d12..0000000000000000000000000000000000000000 --- a/src/data/designs/170/style.css +++ /dev/null @@ -1,177 +0,0 @@ -/* css Zen Garden submission 170 - 'Love is in the Air', by Nele Goetz, http://www.april-design.de/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Nele Goetz */ -/* Added: May. 31st, 2005 */ - -/* 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. */ - - - - -/* basic elements */ - -* {margin: 0; padding: 0} - -body { - background:#3C6FAC url(back.gif) repeat-x; - font-size:100.01%; - font-family:"trebuchet ms", verdana, sans-serif; - color:#2C5079} - -p {padding:10px 30px 10px 20px; font-size:0.9em; line-height:1.6} - -a{text-decoration:none} -a:link{color:#E5FBBB} -a:visited{color:#B8DBFF} -a:hover, a:active{color:white} - -abbr{cursor:help} - -/* specific divs */ -.page-wrapper{position:relative; min-width:744px} - -.intro{ - height:1%; - border-right:1px solid #2B4D70; - border-left:1px solid #2B4D70; - margin:0 240px 0 0; - background:url(back_top.gif)} -header{ - background:url(head.jpg) center no-repeat; - height:365px} -header h1 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h2 { /*misused for the goodbye-grafic*/ - color:#3C6FAC; - position:absolute; - bottom:0px; - right:128px; - width:112px; - height:69px; - background:url(bye.gif); - font-size:0px; - line-height:0px} -.supporting{ - border-right:1px solid #2B4D70; - border-left:1px solid #2B4D70; - margin:0 240px 0 0} -.summary{text-align:center} -.summary p{ - color:#C5E1FF; - font-style:italic; - padding:0} -.summary p:first-child{ - font-size:1em; - margin:30px 10px; - width:70%; - float:left} -.summary p:last-child{ - float:right; - font-size:0.8em; - width:20%; - margin:3em 10px 0 0; - text-align:right} -.summary a:link, .summary a:visited{text-decoration:underline; color:#C5E1FF} -.summary a:hover, .summary a:active{text-decoration:underline; color:white} - -.preamble{background:#79A6D4; clear:both} -.preamble h3{ - height:55px; - background:#98AE6D url(preamble.jpg) no-repeat; - border-top:1px solid #BDCCA3; - border-bottom:1px solid #386496; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.supporting{background:#79A6D4} -.supporting h3{ - height:55px; - border-top:1px solid #BDCCA3; - border-bottom:1px solid #386496; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.explanation h3{background: #98AE6D url(about.jpg) no-repeat} -.participation h3{background: #98AE6D url(participation.jpg) no-repeat} -.benefits h3{background: #98AE6D url(benefits.jpg) no-repeat} -.requirements h3{background: #98AE6D url(requirements.jpg) no-repeat} - -footer { - text-align:left; - background:#DE5608; - padding:10px 20px; - border-top:1px solid #EFAE89} -footer a{ - color:#F4A21F; - font-size:0.8em} -footer a:visited{color:#992D2A} -footer a:hover{color:white} - -.sidebar{ - font:0.8em/1.6 "trebuchet ms", verdana, sans-serif; - position:absolute; - right:0px; - top:0px} -.sidebar .wrapper{width:201px} -.sidebar h3{ - width:201px; - height:53px; - border-right:1px solid #3D82AD; - border-left:1px solid #3D82AD; - voice-family:"\"}\""; - voice-family:inherit; - width: 199px} -.sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.sidebar h3.select{background:transparent url(select.jpg)} -.sidebar h3.favorites{background:transparent url(favorites.jpg)} -.sidebar h3.archives{background:transparent url(archives.jpg)} -.sidebar h3.resources{background:transparent url(resources.jpg)} -.sidebar ul{ - background:#B7D1ED; - border-right:1px solid #3D82AD; - border-left:1px solid #3D82AD} -.zen-resources ul{ - padding:0 0 41px 0; - background:#B7D1ED url(attent.jpg) no-repeat left bottom} -.sidebar li{ - list-style-type:none; - display:block; - border-bottom:1px solid #3D82AD; - color:#3D82AD; - padding:7px 0 7px 10px} -.sidebar li a{ - font-weight:bold; - display:block; - color:white; - background:url(heart.gif) no-repeat 0px 55%; - padding:0 0 0 15px} -.sidebar li a:hover{color:#3D82AD; background:url(heart2.gif) no-repeat 0px 55%} -.sidebar li a:visited{font-weight:normal} -.sidebar li a.designer-name{ - letter-spacing:0.2em; - color:#3D82AD; - font-size:0.81em; - font-weight:normal; - display:inline; - text-transform:uppercase; - background:none; - padding:0 0 0 5px} -.sidebar li a.designer-name:hover{font-weight:bold; background:none} - -/*This one is dedicated to my little son Jelrik ⥠*/ - diff --git a/src/data/designs/171/metadata.json b/src/data/designs/171/metadata.json deleted file mode 100644 index 307f9528e9de9c9a6820b95771cbc8ae35dd760e..0000000000000000000000000000000000000000 --- a/src/data/designs/171/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "171", - "url": "https://www.csszengarden.com/171", - "css_url": "https://www.csszengarden.com/171/171.css", - "description": "The design features a simplistic and clean aesthetic with a focus on readability and minimalism. The centered image at the top offers a focal point, while the vast white space enhances text prominence and visual clarity. The typography is understated, maintaining a uniform and serene flow throughout the page. The limited color palette and absence of decorative elements emphasize the content, making it ideal for text-heavy purposes.", - "categories": [ - "Minimalist", - "Text-Centric", - "Monochrome", - "Professional" - ], - "visual_characteristics": [ - "White Space", - "Centered Layout", - "Minimal Imagery", - "Understated Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/171/screenshot_desktop.png b/src/data/designs/171/screenshot_desktop.png deleted file mode 100644 index 62b68b87cd8873d7bf897e82f1cfbbe9ef12efb5..0000000000000000000000000000000000000000 --- a/src/data/designs/171/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:416a3d2470c8c7fc508bdc854d02a5f54341a6870fe37999e132d53ef0be0998 -size 326885 diff --git a/src/data/designs/171/screenshot_mobile.png b/src/data/designs/171/screenshot_mobile.png deleted file mode 100644 index be1aad0aab92c3d9c25b484fc4c9e67a584a9f55..0000000000000000000000000000000000000000 --- a/src/data/designs/171/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bc1fa32438b1fdcf918c6c0e01f55a7d39ff825a3ed10a9d9f5468767ef74c4d -size 196339 diff --git a/src/data/designs/171/style.css b/src/data/designs/171/style.css deleted file mode 100644 index 793ddf6228739e6cb03f581cb291e019170587b9..0000000000000000000000000000000000000000 --- a/src/data/designs/171/style.css +++ /dev/null @@ -1,243 +0,0 @@ -/* css Zen Garden submission 171 - 'Shaolin Yokobue', by Javier Cabrera, http://www.emaginacion.com.ar/hacks/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Javier Cabrera */ -/* Added: July 9th, 2005 */ - -/* 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. */ - - -/* Coded and designed by Javier Cabrera (emaginacion) http://www.emaginacion.com.ar/geek (blog). */ - -body { - font: 8pt/12pt georgia, sans-serif; - color: #c0c0c0; - margin: 0px; - } - -.page-wrapper { - top:0; - position: absolute; - padding: 0px; - left: 50%; - margin-left: -277px; - width: 595px; - background: transparent url(zen-bg.gif) no-repeat; - background-position: 0 40px; - } -p { margin:10px 0 0 0; } - -a:link { - text-decoration: none; - color: #fff; - } -a:visited { - font-weight: bold; - text-decoration: underline; - color: #d4cddc; - } -a:hover, a:active { - text-decoration: underline; - color: #fff; - } - -/* 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; - margin:0 0 0 97px; - position:absolute; - width: 332px; - height: 40px; - top:60px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -header h2 { - position: absolute; - background: transparent url(h2.gif) no-repeat; - margin: 0 0 0 355px; - width: 80px; - height: 25px; - top:98px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -h3 { - margin: 0 0 0 30px; - font-weight: bold; - font: 13pt Georgia, sans-serif; - font-style:italic; - padding: 0; - } - -/* Sidebar */ -.sidebar { - position:absolute; - top: 920px; - left: 390px; - height:500px; - font: 8pt/11pt arial, sans-serif; - } -.sidebar ul { - list-style-type: none; - margin-top:5px; - } -.sidebar h3 { - color:#fff; - } -.sidebar .wrapper { - margin-top:55px; - } - -.design-selection a:link.c, .design-selection a.designer-name:visited { - display: inline; - } -.design-selection a { - display: block; - } - -.zen-resources { - background: transparent url(rockbottom.gif) no-repeat; - height:250px; - width:190px; - background-position:28px 0; - } - -/* Content */ -p:nth-child(2) { - margin-top:1px; - padding-top:30px; - } -p:nth-child(6) { - text-align:center; - color:#FFE1A4; - font: 8pt/12pt Arial, sans-serif; - margin:47px 0 0 0; - width:215px; - } - -.summary { - font: 10pt/15pt "Trebuchet MS", sans-serif; - margin:400px 0 0 135px; - padding-bottom:8px; - color: #fff; - width: 250px; - text-align: left; - border-bottom:1px solid #353535; - } -.summary :first-letter { - font: 1.5em/15pt "Georgia", sans-serif; - } - -.preamble { - margin: 20px 0 0 148px; - width: 230px; - } -.preamble h3 { - position:absolute; - background: transparent url(titulo1.gif) no-repeat; - margin: 0 0 0 -35px; - width: 395px; - height: 41px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -/* This little guy here ensures that if you want to make the text 100% in mozilla, you will still see the design &*/ -.supporting { - width:314px; - margin-left:100px; - background: transparent url(back.gif) repeat-y; - background-position:-78px 0; - } - -.explanation { - margin: 20px 0 0 47px; - width: 230px; - } -.explanation h3 { - position:absolute; - background: transparent url(titulo2.gif) no-repeat; - margin: 0 0 0 -30px; - width: 145px; - height: 41px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.participation { - margin: 20px 0 0 47px; - width: 230px; - } -.participation h3 { - position:absolute; - background: transparent url(titulo3.gif) no-repeat; - margin: 0 0 0 -35px; - width: 250px; - height: 41px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.benefits { - margin: 20px 0 0 47px; - width: 230px; - } -.benefits h3 { - position:absolute; - background: transparent url(titulo4.gif) no-repeat; - margin: 0 0 0 -35px; - width: 250px; - height: 41px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.requirements { - margin: 20px 0 0 47px; - width: 230px; - } -.requirements h3 { - position:absolute; - background: transparent url(titulo5.gif) no-repeat; - margin: 0 0 0 -35px; - width: 250px; - height: 41px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -footer { - color:#000; - height:60px; - position:absolute; - margin:0 0 0 -15px; - background: transparent url(bottom.gif) no-repeat; - width:345px; - padding:40px 0 30px 134px; - } -footer a:link, footer a:active{ - color:#c0c0c0; - } -footer a:hover { - color:#fff; - text-decoration:underline; - } \ No newline at end of file diff --git a/src/data/designs/172/metadata.json b/src/data/designs/172/metadata.json deleted file mode 100644 index f28471758ed11218d5801b97dcf859655fe562a0..0000000000000000000000000000000000000000 --- a/src/data/designs/172/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "172", - "url": "https://www.csszengarden.com/172", - "css_url": "https://www.csszengarden.com/172/172.css", - "description": "The design features a clean and minimalistic aesthetic with an emphasis on readability and simplicity. It uses ample white space and a structured layout to guide the reader's attention. The color palette is subtle, with a brown background complementing the monochromatic text sections, while the typography is clear and straightforward, promoting engagement and accessibility.", - "categories": [ - "Minimalism", - "Typography", - "User Interface", - "Print Design", - "Content Layout" - ], - "visual_characteristics": [ - "Ample white space", - "Monochrome text sections", - "Structured layout", - "Simple color palette", - "Clear typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/172/screenshot_desktop.png b/src/data/designs/172/screenshot_desktop.png deleted file mode 100644 index 8f18eaf4c2d2ff8257ca7f6bd2b73e93ac259c59..0000000000000000000000000000000000000000 --- a/src/data/designs/172/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a8ec63b9b6a40ce8afceb837522044de4ef303a6035c0a264666797a55a4dc24 -size 611418 diff --git a/src/data/designs/172/screenshot_mobile.png b/src/data/designs/172/screenshot_mobile.png deleted file mode 100644 index 97228ea66b04b451841a0b3908bacb123e96048b..0000000000000000000000000000000000000000 --- a/src/data/designs/172/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f04261f3d7434a9e2a8791663ffb940e2917865cd0f2b73d5528bed5e6b474de -size 278413 diff --git a/src/data/designs/172/style.css b/src/data/designs/172/style.css deleted file mode 100644 index 780a7718b9a7ac865fea174af283fd7261723e38..0000000000000000000000000000000000000000 --- a/src/data/designs/172/style.css +++ /dev/null @@ -1,332 +0,0 @@ -/* css Zen Garden submission 172 - 'Blackcomb*75', by Bryan Carichner, http://www.carichner.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Bryan Carichner */ -/* Added: July 9th, 2005 */ - -/* 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 Design ----- -blackcomb*75 - Bryan Carichner (http://www.carichner.com) - ------ The Photograph ----- -A View of 'Spearhead' taken from across the bowl on the Blackcomb Glacier - Bryan Carichner (Whistler, BC, Canada - February 2004) - -*/ - - -/* ----- BASIC ----- */ -html { - margin: 0; - padding: 0; - } - -body { - margin: 0; - padding: 0; - height: 100%; - font: normal 11px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - background: #1D0D00 url(images/BG_body.jpg) repeat-y; - } - -.page-wrapper { - position: absolute; - margin: 0; - padding: 0; - width: 900px; - height: 964px; - background: url(images/BG_blackcomb.jpg) top left no-repeat; - } - -a:link, a:visited { - color: #3F5671; - } -a:hover { - color: #DA8C11; - } - -abbr { - font-style: italic; - cursor: help; - border: none; - } - -/* hidden */ -h1, h2, h3.select, h3.archives, h3.resources, .preamble h3, .supporting h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - -/* ----- MAIN CONTENT ----- */ -.preamble { - position: absolute; - top: 190px; - left: 90px; - width: 320px; - height: 300px; - text-align: center; - color: #1D0D00; - background: url(images/BG_preamble.gif) no-repeat top; - } -.preamble h3 { - margin: 0; - padding: 0; - } -.preamble p:nth-child(2) { - margin: 0; - padding: 25px 10px 10px 10px; - } -.preamble p:nth-child(3) { - margin: 0; - padding: 0px 10px 10px 10px; - } -.preamble p:nth-child(4) { - margin: 0; - padding: 0px 10px 10px 10px; - } - -.supporting { - position: absolute; - top: 425px; - left: 90px; - width: 318px; - padding: 0px; - margin: 0; - text-align: center; - color: #1D0D00; - background: #FFFFFF; - border-left: 1px solid #A4B0C8; - border-right: 1px solid #A4B0C8; - } - -/* h3 text-replacing images (text hidden above) */ -.explanation h3 { - margin: 0; - height: 60px; - background: url(images/BG_h3exp.gif) no-repeat top center; - } -.participation h3 { - margin: 0; - height: 60px; - background: url(images/BG_h3par.gif) no-repeat top center; - } -.benefits h3 { - margin: 0; - height: 60px; - background: url(images/BG_h3ben.gif) no-repeat top center; - } -.requirements h3 { - margin: 0; - height: 60px; - background: url(images/BG_h3req.gif) no-repeat top center; - } - -.explanation p:nth-child(2) { - margin: 0; - padding: 5px 10px 0 10px; - } -.explanation p:nth-child(3) { - padding: 0 10px 10px 10px; - } - -.participation p:nth-child(2) { - margin: 0; - padding: 5px 10px 0 10px; - } -.participation p:nth-child(3) { - padding: 0 10px 0 10px; - } -.participation p:nth-child(4) { - padding: 0 10px 10px 10px; - } - -.benefits p:nth-child(2) { - margin: 0; - padding: 5px 10px 20px 10px; - } - -.requirements p:nth-child(2) { - margin: 0; - padding: 5px 10px 0 10px; - } -.requirements p:nth-child(3), .requirements p:nth-child(4), .requirements p:nth-child(5), .requirements p:nth-child(6) { - padding: 0 10px 0 10px; - } - - -footer { - margin: 0; - padding-top: 14px; - text-align: center; - height: 30px; - width: 318px; - background: url(images/BG_footer.gif) no-repeat bottom center; - } -footer a:link, footer a:visited { - padding: 0px 3px 1px 3px; - color: #E2E7EF; - border: 1px solid #A4B0C8; - text-decoration: none; - } -footer a:hover { - padding: 0px 3px 1px 3px; - color: #3F5671; - background: #E2E7EF; - border: 1px solid #A4B0C8; - } - - -/* ----- MENUS & PROJECT SUMMARY (positioned over maple leaf scrim) -----*/ -.page-wrapper .sidebar { - position: absolute; - left: 435px; - top: 275px; - width: 145px; - text-align: left; - } -.sidebar h3 { - width: 145px; - height: 26px; - margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -/* h3 text-replacing images */ -.sidebar h3.select { - background: url(images/BG_h3select.gif) top left no-repeat; - } -.sidebar h3.archives { - background: url(images/BG_h3archives.gif) top left no-repeat; - } -.sidebar h3.resources { - background: url(images/BG_h3resources.gif) top left no-repeat; - } -.sidebar h3.favorites { - background: url(images/BG_h3favorites.gif) top left no-repeat; - } - -.sidebar ul { - list-style: none; - padding: 0 0 6px 0; - margin: 0; - line-height: 13px; - } -.sidebar ul li { - padding: 3px 0px 3px 0px; - margin: 0; - font-size: 10px; - border-bottom: dotted 1px #A4B0C8; - } -/* subtle hover effect for friendly browsers */ -.design-selection li:hover { - border-bottom: dotted 1px #3F5671; - } - -.sidebar .design-selection { - font-style:italic; - color: #A4B0C8; - margin-bottom: 8px; - } -.sidebar .design-selection li { - padding-top: 6px; - } -.sidebar .design-selection a:link, .sidebar .design-selection a:visited { - display: block; - font: bold 11px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - color: #72141A; - text-decoration:none; - padding: 0px 0px 2px 15px; - background: url(images/BG_li.gif) top left no-repeat; - } -.sidebar .design-selection a:hover { - font: bold 11px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - color: #DA8C11; - text-decoration: none; - padding: 0px 0px 2px 15px; - background: url(images/BG_li_hover.gif) top left no-repeat; - } - -.sidebar .design-archives { - margin-bottom: 8px; - } -.sidebar .design-archives a, .sidebar .zen-resources a, .sidebar .design-archives a:visited, .sidebar .zen-resources a:visited { - display: inline; - font: bold 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - color: #3F5671; - text-decoration:none; - padding: 0px 0px 2px 14px; - background: url(images/BG_li_2.gif) no-repeat left; - } -.sidebar .design-archives a:hover, .sidebar .zen-resources a:hover { - display: inline; - font: bold 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - color: #DA8C11; - text-decoration:none; - padding: 0px 0px 2px 14px; - background: url(images/BG_li_2_hover.gif) no-repeat left; - } -.sidebar .design-selection a.designer-name, .sidebar .design-selection a.designer-name:visited { - display: inline; - margin-bottom: 4px; - padding: 0; - font: normal 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - color: #3F5671; - border: 0; - text-decoration: none; - background: none; - } -.sidebar .design-selection a.designer-name:hover { - display: inline; - padding: 0; - font: normal 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - color: #DA8C11; - border: 0; - text-decoration: none; - background: none; - } - - -.summary { - position: absolute; - top: 505px; - left: 630px; - width: 130px; - margin: 0; - padding: 5px 4px 8px 5px; - text-align: left; - color: #A4B0C8; - font: normal 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; - } -.summary a:link, .summary a:visited { - color: #3F5671; - text-decoration: none; - } -.summary a:hover { - color: #DA8C11; - text-decoration: none; - } - - -/* ----- Final Touch ----- */ -.extra1 { - position: absolute; - top: 1180px; - left: 410px; - width: 76px; - height: 546px; - background: transparent url(images/BG_bc.gif) no-repeat; - } - - - \ No newline at end of file diff --git a/src/data/designs/173/metadata.json b/src/data/designs/173/metadata.json deleted file mode 100644 index 86b2403ba21b362d2ec828c6a31d0ae08aa930b5..0000000000000000000000000000000000000000 --- a/src/data/designs/173/metadata.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "id": "173", - "url": "https://www.csszengarden.com/173", - "css_url": "https://www.csszengarden.com/173/173.css", - "description": "This design features a structured and elegant layout with a deep red color palette that contrasts sharply with white typography and subtle background textures, creating a classic and professional atmosphere. It highlights a clear organization with careful alignment, encouraging readability and focus on content while guiding users through the sections smoothly.", - "categories": [ - "Web Design", - "Typography", - "Color Theory", - "Layout", - "User Interface", - "Content Organization" - ], - "visual_characteristics": [ - "Monochromatic Scheme", - "High Contrast", - "Crisp Typography", - "Textured Background", - "Vertical Layout", - "Minimalist Design" - ] -} \ No newline at end of file diff --git a/src/data/designs/173/screenshot_desktop.png b/src/data/designs/173/screenshot_desktop.png deleted file mode 100644 index 9b968aff5aea5e4d01d2517f2af1d385f79bc36d..0000000000000000000000000000000000000000 --- a/src/data/designs/173/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4f59e716b85db0da81064760c65ad4289b480bb171cbb8070f5b5601fe904157 -size 549065 diff --git a/src/data/designs/173/screenshot_mobile.png b/src/data/designs/173/screenshot_mobile.png deleted file mode 100644 index f153acddae97c7fc8f6c6b019b10e39f5e059d91..0000000000000000000000000000000000000000 --- a/src/data/designs/173/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ec62e9186c8ccc612de11dad79471e06f8b4616634cae292502dfda7b502bb65 -size 340826 diff --git a/src/data/designs/173/style.css b/src/data/designs/173/style.css deleted file mode 100644 index e55a61cbc642faf2de1eb780a345b5b926278222..0000000000000000000000000000000000000000 --- a/src/data/designs/173/style.css +++ /dev/null @@ -1,77 +0,0 @@ -/* css Zen Garden submission 173 - 'Red Stars', by Shafiq Rizwan, http://www.1988online.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Shafiq Rizwan */ -/* Added: July 9th, 2005 */ - -/* 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. */ - - - -body { font: 8pt/16pt georgia; color: #fffafa; background: #fff url(blossoms.jpg) no-repeat bottom right; margin: 0px; text-align: center; } -p { font: 8pt/16pt georgia; margin-top: 0px; text-align: justify; } -h3 { margin-bottom: 0px; } -a:link { font-weight: bold; text-decoration: none; color: #B7A5DF; } -a:visited { font-weight: bold; text-decoration: none; color: #D4CDDC; } -a:hover, a:active { text-decoration: underline; color: #9685BA; } - -.page-wrapper { margin: 0 auto; width: 619px; background: url(bg.jpg) repeat-y; text-align:left; } -.intro { background: url(intro.jpg) no-repeat; } - -header { position:absolute; width:55px; } -header h1 { background: transparent url(header.gif) no-repeat; text-indent: -5000px; width: 46px; height: 254px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -header h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary { position:absolute; margin-top:90px; margin-left:322px; height:90px; width:260px; } -.summary p { font: 10px arial; text-align:center; color : #FFF; } - -.preamble { padding: 205px 0 0 62px; width:335px; } -.preamble h3 { text-indent:-5000px; background: url(road.jpg) no-repeat; width:344px; height:50px; } -.preamble p { font-style: italic; margin:0 5px 0 30px; } - -.supporting { padding-left: 73px; width:330px; } -.supporting p { margin:0 10px 0 20px; } -.supporting h3 { margin:0 0 0 7px; } - -.explanation, .participation, .benefits, .requirements { margin: 10px 0 0 0; } -.explanation h3 { background: url(what.jpg) no-repeat; text-indent:-5000px; width:324px; height:40px; } -.participation h3 { background: url(participation.jpg) no-repeat; text-indent:-5000px; width:324px; height:40px; } - -.benefits h3 { background: url(benefits.jpg) no-repeat; text-indent:-5000px; width:324px; height:40px; } - -.requirements h3 { background: url(requirements.jpg) no-repeat; text-indent:-5000px; width:324px; height:40px; } - -footer { background: url(footerbg.jpg) no-repeat; text-align: center; padding:10px; height:28px; } -footer a:link, footer a:visited { margin-right: 20px; } - -.sidebar { position:absolute; top:197px; margin:0 0 0 400px; width:200px; } -.sidebar .wrapper { font: 10px verdana, sans-serif; background: transparent url(paper-bg.jpg) top left repeat-y; padding: 10px; width: 130px; text-align:left; } - -.sidebar h3.select { background: url(select.jpg) no-repeat; margin: 10px 0px 5px 0px; width: 177px; height: 40px; } -.sidebar h3.archives { background: transparent url(archives.jpg) no-repeat; margin: 25px 0px 5px 0px; width:177px; height: 40px; } -.sidebar h3.resources { background: transparent url(resources.jpg) no-repeat; margin: 25px 0px 5px 0px; width:177px; height: 40px; } -.sidebar h3 { - text-indent: 200%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar ul { margin: 0px; padding: 0px; } -.sidebar li { list-style-type: none; border:1px #761C1C none; width:170px; padding-left:7px; } -.sidebar .design-selection li { height:30px; padding-top:5px; } -.sidebar .design-archives li, .sidebar .zen-resources li { height:15px; padding-top:3px; } - -.sidebar a { display:block; } -.sidebar a.designer-name { display:inline; font-weight: normal; color: #FFF; border-bottom: 1px #FFF none; } -.sidebar a.designer-name:hover { text-decoration: none; border-bottom: 1px #FFF dotted; } -.sidebar li:hover { background: url(lbg.jpg) #8F2323 repeat-x; border:1px #761C1C solid; } \ No newline at end of file diff --git a/src/data/designs/174/metadata.json b/src/data/designs/174/metadata.json deleted file mode 100644 index b7ee0f2b1e0eb71f3113f3f2af31fcc94dc51f65..0000000000000000000000000000000000000000 --- a/src/data/designs/174/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "174", - "url": "https://www.csszengarden.com/174", - "css_url": "https://www.csszengarden.com/174/174.css", - "description": "This design features a clean and organized layout with a balanced use of warm tones, particularly orange, to highlight key sections. The use of varied typography creates a visual hierarchy, distinguishing headings, subheadings, and body text effectively. Minimalistic icons and a modern logo add a contemporary feel, while the structured sidebar for navigation enhances usability and accessibility.", - "categories": [ - "Web Interface", - "Minimalist Design", - "Typography", - "Information Architecture", - "User Experience" - ], - "visual_characteristics": [ - "Warm Color Palette", - "Iconography", - "Clean Layout", - "Hierarchy in Typography", - "Modern Aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/174/screenshot_desktop.png b/src/data/designs/174/screenshot_desktop.png deleted file mode 100644 index 24ae7e7b391fd8a5c4267a24c83208540d9cd647..0000000000000000000000000000000000000000 --- a/src/data/designs/174/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bcaa367eca5186e51076d7475aac4cb45045f18937f6c90c911b4fcf54f1d4ef -size 277027 diff --git a/src/data/designs/174/screenshot_mobile.png b/src/data/designs/174/screenshot_mobile.png deleted file mode 100644 index bd55e03fabaad1630b338693e48c7fd4e3a43aca..0000000000000000000000000000000000000000 --- a/src/data/designs/174/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f7cda3a50460715e294120ff3594a085af76aae561b08e3400fb178b352b5c31 -size 203242 diff --git a/src/data/designs/174/style.css b/src/data/designs/174/style.css deleted file mode 100644 index fc6456b9d76e907d29c8c476d470905605740e50..0000000000000000000000000000000000000000 --- a/src/data/designs/174/style.css +++ /dev/null @@ -1,229 +0,0 @@ -/* css Zen Garden submission 174 - 'Simple', by Shawn Chin, http://www.shawnchin.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Shawn Chin */ -/* Added: July 9th, 2005 */ - -/* 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. */ - - - -body { - text-align:center; - padding:0; - margin:1px 0 0; - font:normal 11px Arial, Helvetica, Sans-serif; - color:#666; - -} - -a { - color:#777; -} - -a:hover { - color:#A77749; -} - -.page-wrapper { - text-align:left; - background:#FFF url(container_bg.gif) repeat-y top left; - width:700px; - margin:auto; - position:relative; - padding:0; -} - -header { - width:700px; - height:80px; - background:#666 url(main_title.gif) no-repeat; - margin:0; - padding:0; -} - -header h1,h2 { - padding:0; - margin:0; - display:none; - -} - -.summary{ - margin:0; - padding:0; - position:relative; - border-top:#FFF 1px solid; - width:700px; - height:75px; - background:#FFF; -} - -.summary p{ - margin:0; - padding:0; -} - -.summary p:first-child{ - position:absolute; - top:0; - left:0; - width:700px; - height:75px; - background:#FFF url(quickSummary_main.gif) no-repeat 251px 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:last-child{ - position:absolute; - top:0; - left:0; - width:250px; - height:75px; - background:url(quickSummary_button.gif) no-repeat top left; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:last-child a { - width:250px; - height:37px; - float:right; - visibility:visible; - text-indent:-9000px; - overflow:hidden; - margin-top:-1.3em; - margin-bottom:1.4em; -} -.preamble { - position:relative; - border-top:#fff 1px solid; - margin:0; - padding:0; - width:524px; - background:#CCC url(preamble_top.gif) no-repeat top left; -} - -.preamble h3{ - display:none; - margin:0; - padding:0; -} - -.preamble p:nth-child(2){ - margin:0; - padding:31px 15px 0px 15px; -} - -.supporting{ - width:524px; -} - -.explanation p:nth-child(2), .participation p:nth-child(2), .requirements p:nth-child(2){ - margin:0; - padding:41px 15px 0px 15px; -} - -.preamble p, .explanation p, .participation p, .benefits p, .requirements p{ - margin:0; - padding:10px 15px 0px 15px; -} - - -.explanation h3, .participation h3, .benefits h3, .requirements h3, .design-selection h3, .design-archives h3, .zen-resources h3{ - display:none; -} - -.preamble p:nth-child(4), .explanation p:nth-child(3), .participation p:nth-child(4), .requirements p:nth-child(6){ - margin:0; - padding:10px 15px 7px 15px; -} - -.benefits p:nth-child(2){ - margin:0; - padding:41px 15px 7px 15px; -} - -.explanation{ - background:#CCC url(explanation_top.gif) no-repeat top left; -} - -.participation{ - background:#CCC url(participation_top.gif) no-repeat top left; -} - -.benefits{ - background:#CCC url(benefits_top.gif) no-repeat top left; -} - -.requirements{ - background:#CCC url(requirements_top.gif) no-repeat top left; -} - -footer{ - background:#FD9453 url(footer_top.gif) no-repeat top left; - padding-top:17px; - padding-left:15px; - -} - -.sidebar { - position:absolute; - top:156px; - left:525px; - width:175px; - background:#FD9453; - border-top:#fff 1px solid; - color:#fff; -} - -.sidebar a, footer a{ - color:#FFF; - text-decoration:none; -} - -.sidebar a:hover, footer a:hover{ - color:#FCD2B8; -} - -.design-selection{ - background:#FD9453 url(lselect_top.gif) no-repeat top left; - padding:29px 0 0 0; -} - -.design-archives{ - background:#FD9453 url(larchives_top.gif) no-repeat top left; - padding:39px 0 0 0; -} - -.zen-resources{ - background:#FD9453 url(lresources_top.gif) no-repeat top left; - padding:39px 0 0 0; -} - -.design-selection ul, .design-archives ul, .zen-resources ul{ - margin:0; - padding:0 15px 5px 15px; -} - -.design-selection li, .design-archives li, .zen-resources li{ - padding: 0 0 5px 15px; - margin:0; - list-style-type:none; - background:transparent url(bullet2.gif) no-repeat 0 4px; -} - -.extra1{ - margin:auto; - width:700px; - height:9px; - background:#fff url(extra1_bg.gif) no-repeat top left; -} - diff --git a/src/data/designs/175/metadata.json b/src/data/designs/175/metadata.json deleted file mode 100644 index 94ca102ec1655e94300a7bdd5e8388799e374649..0000000000000000000000000000000000000000 --- a/src/data/designs/175/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "175", - "url": "https://www.csszengarden.com/175", - "css_url": "https://www.csszengarden.com/175/175.css", - "description": "The design showcases a balanced layout with a minimalist aesthetic, focused on demonstrating the power of CSS-based design. It features a clean and organized structure with a dominant use of blues and whites, complemented by modern, sans-serif typography. Silhouetted figures add a visual interest while maintaining a professional tone, making the page feel sophisticated and informative. The layout is well-suited for showcasing text content effectively, facilitating easy navigation through clear hierarchy.", - "categories": [ - "Minimalist", - "Technology", - "Informational", - "Professional", - "Modern" - ], - "visual_characteristics": [ - "Clean layout", - "Balanced color palette", - "Silhouette imagery", - "Sans-serif typography", - "Organized structure" - ] -} \ No newline at end of file diff --git a/src/data/designs/175/screenshot_desktop.png b/src/data/designs/175/screenshot_desktop.png deleted file mode 100644 index 07ca8b7899afdf0e90c74253ae97e36efa9f84d8..0000000000000000000000000000000000000000 --- a/src/data/designs/175/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c1c1a28486684b9df62cde5185260eaeba88570300b7eb1ef01e256e179ce218 -size 455497 diff --git a/src/data/designs/175/screenshot_mobile.png b/src/data/designs/175/screenshot_mobile.png deleted file mode 100644 index 677b99f4f224b54fffc2c2802b143b722f56e7f4..0000000000000000000000000000000000000000 --- a/src/data/designs/175/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:20260639abacd21b6025bea06410c137cc3207ce2f6c6dcf3d042b833dd491ad -size 427524 diff --git a/src/data/designs/175/style.css b/src/data/designs/175/style.css deleted file mode 100644 index 9b78af37a6394f90ca57562048f2f870834f5d63..0000000000000000000000000000000000000000 --- a/src/data/designs/175/style.css +++ /dev/null @@ -1,234 +0,0 @@ -/* css Zen Garden submission 175 - 'Business Style', by Gunta Klavina, http://www.klavina.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Gunta Klavina */ -/* Added: July 9th, 2005 */ - -/* 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. */ - - - -body - { - margin: 0; - padding: 0; - color: #333; - font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; - background: #E2EBED; - text-align: center; - } -a - { - color: #307082; - } -a:hover - { - color: #D60808; - } -abbr - { - border: none; - } - -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3, .zen-resources h3.resources, .design-archives h3.archives - { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.design-selection h3.select { - display: none; -} - -.page-wrapper - { - margin: 0 auto; - width: 724px; - position: relative; - background: #fff; - padding: 0 10px 0 10px; - text-align: left; - } -* html .page-wrapper - { - width: 744px; - w\idth: 724px; - } - -header - { - position: absolute; - top: 25px; - left: 40px; - } -h1 - { - background: url("logo.gif"); - width: 156px; - height: 25px; - overflow: hidden; - margin: 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -h2 - { - font-size: 12px; - margin: 0; - } - -.summary - { - padding-top: 85px; - } -.summary p:last-child - { - font-size: 12px; - position: absolute; - top: 65px; - right: 20px; - margin: 0; - } -.page-wrapper .intro .summary p:first-child - { - font-size: 11px; - background: url("background.jpg") no-repeat; - margin: 0; - width: 164px; - height: 141px; - padding: 30px 530px 0 30px; - color: #fff; - font: 12px/150% Trebuchet MS; - } - -.preamble, .supporting - { - margin: 0 20px 0 243px; - } -.supporting p, .preamble p - { - line-height: 150%; - margin: 10px 0 10px 0; - } - .preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 - { - width: 200px; - height: 24px; - margin: 40px 0 10px 0; - } -.preamble h3 - { - background: url("heading01.gif") no-repeat; - } -.explanation h3 - { - background: url("heading02.gif") no-repeat; - } -.participation h3 - { - background: url("heading03.gif") no-repeat; - } -.benefits h3 - { - background: url("heading04.gif") no-repeat; - } -.requirements h3 - { - background: url("heading05.gif") no-repeat; - } -.requirements - { - margin-bottom: 40px; - } - -.sidebar - { - position: absolute; - top: 295px; - left: 0; - width: 210px; - } -.design-selection ul, .design-archives ul, .zen-resources ul - { - list-style-type: none; - margin: 0; - padding: 0 0 0 40px; - } -.design-selection ul li a - { - text-decoration: underline; - display: block; - font-size: 13px; - } -.design-selection ul li.c, .design-selection ul li a.designer-name - { - display: inline; - font-size: 12px; - color: #333; - } -.design-selection ul li a.designer-name - { - text-decoration: none; - } -.design-selection ul li a.designer-name:hover - { - color: #D60808; - } -.design-selection ul li - { - font-size: 12px; - border-bottom: 1px solid #E6EEF0; - } -.sidebar .design-archives ul li - { - font-size: 13px; - border-bottom: 1px solid #E6EEF0; - display: block; - padding: 5px 0; - } -.sidebar .zen-resources ul li - { - font-size: 13px; - border-bottom: 1px solid #E6EEF0; - display: block; - padding: 5px 0; - } -.zen-resources h3.resources - { - background: url("resources.gif") no-repeat; - width: 69px; - height: 15px; - margin: 30px 0 5px 40px; - } -.design-archives h3.archives - { - background: url("archives.gif") no-repeat; - width: 69px; - height: 15px; - margin: 30px 0 5px 40px; - } - -footer - { - background: url("footer.gif") no-repeat; - color: #fff; - height: 48px; - text-align: right; - padding: 0 10px 0 0; - line-height: 26px; - font-size: 11px; - } -footer a - { - color: #fff; - text-decoration: none; - } -footer a:hover - { - text-decoration: underline; - } - diff --git a/src/data/designs/176/metadata.json b/src/data/designs/176/metadata.json deleted file mode 100644 index 965a370ac129d7384d65c6d4b01c1f2fafecddc8..0000000000000000000000000000000000000000 --- a/src/data/designs/176/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "176", - "url": "https://www.csszengarden.com/176", - "css_url": "https://www.csszengarden.com/176/176.css", - "description": "This design features a highly ornate and intricate black-and-white patterned background that provides a vintage and classical appeal. The central text area is neatly organized into sections with clear dividers and makes use of a gothic-style serif font that enhances the antiquated aesthetic. The use of art nouveau elements and medieval illustrations adds to the historical theme, creating a cohesive and visually distinct layout.", - "categories": [ - "Vintage", - "Classical", - "Historical", - "Typography", - "Illustrative" - ], - "visual_characteristics": [ - "Ornate background", - "Gothic typography", - "Medieval illustrations", - "Monochromatic palette", - "Decorative borders" - ] -} \ No newline at end of file diff --git a/src/data/designs/176/screenshot_desktop.png b/src/data/designs/176/screenshot_desktop.png deleted file mode 100644 index 5868b9a26049c817e89ad333d4afce0c85b94ad9..0000000000000000000000000000000000000000 --- a/src/data/designs/176/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0b98f1afe024741dc74a93c9637aa2949608ffa7f215c368ed593e9e769dc181 -size 1049040 diff --git a/src/data/designs/176/screenshot_mobile.png b/src/data/designs/176/screenshot_mobile.png deleted file mode 100644 index eac2d214dd51a7668436f47f17ff89a2319e5027..0000000000000000000000000000000000000000 --- a/src/data/designs/176/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6ee17119ea15bf3f13dd6e1bf7c43aa7a0b65a6ca49a3f0a32dc21784b9eef84 -size 626737 diff --git a/src/data/designs/176/style.css b/src/data/designs/176/style.css deleted file mode 100644 index 34ad3e19b0b3cc3a718df76b9a2c2547a8a48994..0000000000000000000000000000000000000000 --- a/src/data/designs/176/style.css +++ /dev/null @@ -1,71 +0,0 @@ -/* css Zen Garden submission 176 - 'Kelmscott', by Bronwen Hodgkinson, http://www.cdevision.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Bronwen Hodgkinson */ -/* Added: July 9th, 2005 */ - -/* 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. */ - - - -/* basic elements */ -body {font:8pt georgia, serif; color:#333; background:#fff url(bground.gif); margin:0; border:1px solid #000;} - -p {font:8pt georgia, serif; margin:0 0 12px 0; text-align:justify;} -h3 {font:bold 12pt georgia, serif; margin-bottom:0;} -abbr {font-weight:bold; border-bottom: none;} - -a:link, a:visited {text-decoration:none; color:#900;} -a:hover, a:active {text-decoration:underline; color:#c00;} - -/* specific divs */ -.page-wrapper {width:604px; padding:0; margin:80px auto 80px 80px; border:2px solid #333; - position:relative; background:#f8f8f8 url(bottomBorder.gif) 2px 100% no-repeat;} - -.intro {background:url(header.gif) no-repeat; width:600px;} - header {margin-bottom:0; height:30px;} - header h1, header h2 {margin:17px 0 0 0; padding:0; height:30px;} - header h1 {background:transparent url(h1.gif) no-repeat; width:223px; float:left;} - header h2 {background:transparent url(h2.gif) no-repeat; width:377px; float:right;} - h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .summary {clear:both; margin:0 0 6px 0; width:600px; height:73px; background:url(summary.gif) 0 0 no-repeat;} - .summary p:first-child {display:none;} - .summary p:last-child {position:absolute; top:129px; left:430px; padding:0; font-size:8pt; z-index:10; font-weight:bold; width:150px; text-align:left;} - .preamble {padding:210px 0 0 20px; margin:0 188px 0 0; background:url(mainImage.gif) 13px 0 no-repeat; width:392px;} - .preamble h3 {background:url(preAmble.gif) -9px 0 no-repeat; height:41px; width:392px; margin:0; padding:0; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.supporting {margin:0 8px 50px 20px; width:390px;} - .supporting h3 {height:41px; width:392px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .explanation h3 {background:url(explanation.gif) -9px 0 no-repeat;} - .participation h3 {background:url(participation.gif) -9px 0 no-repeat;} - .benefits h3 {background:url(benefits.gif) -9px 0 no-repeat;} - .requirements h3 {background:url(requirements.gif) -9px 0 no-repeat;} - -.sidebar {width:170px; position:absolute; top:170px; left:422px; background:url(linklistBottom.gif) 0 100% no-repeat; padding-bottom:200px; font:7.5pt georgia, serif; padding-left:7px;} - .sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - .sidebar h3 {width:165px; height:15px; margin:0;} - .sidebar h3.select {background:url(select.gif) no-repeat;} - .sidebar h3.archives {background:url(archives.gif) no-repeat;} - .sidebar h3.resources {background:url(resources.gif) no-repeat;} - .sidebar ul {margin:0 0 17px 0; padding:0;} - .sidebar li {line-height:1.2em; list-style-type:none; display:block; padding-top:5px; margin-left:0;} - - diff --git a/src/data/designs/177/metadata.json b/src/data/designs/177/metadata.json deleted file mode 100644 index 6d1c1d826b8d63fa6a9469a250f20b850bb3b773..0000000000000000000000000000000000000000 --- a/src/data/designs/177/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "177", - "url": "https://www.csszengarden.com/177", - "css_url": "https://www.csszengarden.com/177/177.css", - "description": "The visual design combines a dark, moody color palette with a striking silhouette of a city skyline, presented against a gradient backdrop. Its bold use of contrast draws the eye to key content areas, while the clean, structured layout ensures readability and easy navigation. The design cleverly merges aesthetics with functionality, leveraging vibrant color accents to highlight interactive elements.", - "categories": [ - "web", - "urban", - "modern", - "contrast" - ], - "visual_characteristics": [ - "dark color palette", - "city skyline silhouette", - "gradient background", - "high contrast" - ] -} \ No newline at end of file diff --git a/src/data/designs/177/screenshot_desktop.png b/src/data/designs/177/screenshot_desktop.png deleted file mode 100644 index 7b6f1ff1c073f5ad9cfeaa260e99ca1b8e75ec11..0000000000000000000000000000000000000000 --- a/src/data/designs/177/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:60cf52eeeb614fb25ffbffe0af72b879a8e7c2ac51c23d2edaf39c2d060c9b42 -size 502891 diff --git a/src/data/designs/177/screenshot_mobile.png b/src/data/designs/177/screenshot_mobile.png deleted file mode 100644 index 687c8748035e433ba400187a28ce19b8be0cf612..0000000000000000000000000000000000000000 --- a/src/data/designs/177/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:563fa0044a04907f1a1baaaa1ac933f35ce692c6ba42ad420a0cc188397fd661 -size 313179 diff --git a/src/data/designs/177/style.css b/src/data/designs/177/style.css deleted file mode 100644 index a4711f7fd7a64fcd92f0366f630e2ec04874a735..0000000000000000000000000000000000000000 --- a/src/data/designs/177/style.css +++ /dev/null @@ -1,196 +0,0 @@ -/* css Zen Garden submission 177 - 'Zen City Morning', by Ray Henry, http://www.reh3.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Ray Henry */ -/* Added: July 9th, 2005 */ - -/* 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. */ - - -/* ------------------------------------------------------------------------------------------ -Global --------------------------------------------------------------------------------------- */ -* {margin:0;padding:0;} /* zero out everything */ -body { - width:100%; - background:#0A3443 url(r3_zc_main_bg.jpg) repeat-y top left; - font-family:verdana, arial, sans-serif; -} -ul, ol {list-style:none;} -/* ------------------------------------------------------------------------------------------ -Layout Structure --------------------------------------------------------------------------------------- */ -.page-wrapper {width:760px;} -.intro, .supporting { - float:left; - width:570px; -} -.sidebar { - padding:190px 0 0 0; - margin:0 0 0 570px; - font-size:11px; -} -* html .sidebar {position:absolute;left:0;top:0;} /* For Internet Explorer */ -/* ------------------------------------------------------------------------------------------ -=intro --------------------------------------------------------------------------------------- */ -header h1 { - width:570px; - height:190px; - background:url(r3_zc_title.gif) no-repeat top left; - text-indent:-5000px; -} -header h2 {display:none;} -.summary p {font-size:11px;margin:0;padding:0;} -.summary p:first-child { - float:left; - width:380px; - height:178px; - background:url(r3_zc_summary.gif) no-repeat top left; - text-indent:-5000px; -} -.summary p:last-child { - float:left; - width:190px; - padding:102px 0 50px 9px; - height:76px; - background:url(r3_zc_download.gif) no-repeat top left; - color:#E6B788; - /* start box model to fix main nav in IE 5.5 */ - voice-family: "\"}\""; - voice-family:inherit; - width:181px; - padding:102px 0 0 9px; - height:76px; - /* end box model to fix main nav in IE 5.5 */ -} -.summary p:last-child a:link, .summary p:last-child a:visited, .summary p:last-child a:active {color:#E6B788;} -.summary p:last-child a:hover {color:#F4D3B3;} -.preamble { - clear:both; - width:570px; - padding:0 0 20px 0; - background:#4A6774 url(r3_zc_road_bg.gif) repeat-x top left; - font-size:11px; -} -.preamble h3 { - width:268px; - height:45px; - background:url(r3_zc_road_title.gif) no-repeat top left; - text-indent:-5000px; -} -.preamble p { - margin:12px; - color:#CFD9DC; -} -/* ------------------------------------------------------------------------------------------ -=supportingText --------------------------------------------------------------------------------------- */ -.supporting div { - padding: 19px 0; - background:#DECD95 url(r3_zc_support_bg.gif) repeat-x top left; -} -.supporting h3 { - float:left; - width:190px; - text-indent:-5000px; -} -.supporting .explanation h3 { - height:40px; - background:url(r3_zc_what_title.gif) no-repeat top left; -} -.supporting .participation h3 { - height:28px; - background:url(r3_zc_participation_title.gif) no-repeat top left; -} -.supporting .benefits h3 { - height:26px; - background:url(r3_zc_benefits_title.gif) no-repeat top left; -} -.supporting .requirements h3 { - height:26px; - background:url(r3_zc_requirements_title.gif) no-repeat top left; -} -.supporting p { - margin:0 0 0 190px; - padding:0 10px 22px 0; - font-size:11px; - line-height:16.5px; - color:#4D3A33; -} -.supporting p a {padding:2px;text-decoration:none;} -.supporting p a:link {color:#C64708;} -.supporting p a:visited {color:#4D3A33;} -.supporting p a:active {color:#C64708;} -.supporting p a:hover {background:#C6B478;color:#fff;} -.supporting footer { - clear:both; - padding:6px 0; - background:#555; - text-align:center; - font-size:10px; -} -.supporting footer a { - margin:5px 15px; - padding:5px; -} -.supporting footer a:link, .supporting footer a:visited, .supporting footer a:active {color:#999;text-decoration:none;} -.supporting footer a:hover {background:#777;color:#bbb;} -/* ------------------------------------------------------------------------------------------ -=linkList --------------------------------------------------------------------------------------- */ -.sidebar .wrapper { - width:180px; - padding:0 0 250px 10px; - background:url(r3_zc_linklist_bg.gif) no-repeat top left; -} -.sidebar .wrapper h3 { - width:180px; - height:22px; - text-indent:-5000px; -} -.design-selection h3 {background:url(r3_zc_lselect_title.gif) no-repeat top left;} -.design-archives h3 {background:url(r3_zc_larchives_title.gif) no-repeat top left;} -.zen-resources h3 {background:url(r3_zc_lresources_title.gif) no-repeat top left;} -.sidebar .wrapper ul { - margin:10px 0 20px 0; - color:#7FA2B0; -} -.sidebar .wrapper ul li {margin:10px 0 0 0;padding: 1px 0 0 12px;} -.design-selection ul li {background:url(r3_zc_lselect_bullet.gif) no-repeat top left;} -.design-selection ul li a:link, .design-selection ul li a:visited, .design-selection ul li a:active { - color:#fff; - font-weight:bold; - text-decoration:none; -} -.design-selection ul li a:hover {color:#C64708;} -.design-selection ul li a.designer-name:link, .design-selection ul li a.designer-name:visited, .design-selection ul li a.designer-name:active, .design-archives ul li a:link, .design-archives ul li a:visited, .design-archives ul li a:active, .zen-resources ul li a:link, .zen-resources ul li a:visited, .zen-resources ul li a:active { - color:#7FA2B0; - font-weight:normal; -} -.design-selection ul li a.designer-name:hover, .design-archives ul li a:hover, .zen-resources ul li a:hover {color:#C64708;} - { - color:#7FA2B0; - font-weight:normal; -} - -/* ------------------------------------------------------------------------------------------ -=Extra Divs --------------------------------------------------------------------------------------- */ -.extra1 { - position:fixed; - left:0; - top:0; - width:770px; - height:184px; - background:url(r3_zc_clouds.png) no-repeat top left; -} -* html .extra1 {display:none;} /* Hide from Internet Explorer */ diff --git a/src/data/designs/178/metadata.json b/src/data/designs/178/metadata.json deleted file mode 100644 index 0ea4a1980bb8b22bde75424c1bc13d021c7f34cf..0000000000000000000000000000000000000000 --- a/src/data/designs/178/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "178", - "url": "https://www.csszengarden.com/178", - "css_url": "https://www.csszengarden.com/178/178.css", - "description": "The design features a warm, retro aesthetic with a predominant use of orange and cream colors, creating a nostalgic and welcoming atmosphere. The layout is vertically structured, utilizing sections effectively for content organization, with playful vintage imagery complementing the theme. Sans-serif typography enhances readability and aligns with the nostalgic style.", - "categories": [ - "Retro", - "Web Design", - "Nostalgic", - "Informational", - "Typography Focused" - ], - "visual_characteristics": [ - "Warm Color Palette", - "Vertical Layout", - "Vintage Imagery", - "Sans-serif Typography", - "Sectioned Content" - ] -} \ No newline at end of file diff --git a/src/data/designs/178/screenshot_desktop.png b/src/data/designs/178/screenshot_desktop.png deleted file mode 100644 index f54edff7a1286c7cecd7fc0f36c804eba8ad9d82..0000000000000000000000000000000000000000 --- a/src/data/designs/178/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:794c503f5318ba0ef7de4708bdc35701e254068e6cb3e7f2ad715655b66e3055 -size 483263 diff --git a/src/data/designs/178/screenshot_mobile.png b/src/data/designs/178/screenshot_mobile.png deleted file mode 100644 index 1710b76e5e5ee3e8bb1ee515a6eccadf3d7bb257..0000000000000000000000000000000000000000 --- a/src/data/designs/178/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8ba301e87a53cea7d0fc6d4ff871a714f95bd31f5f49a8d5586d8af1d41866f3 -size 468724 diff --git a/src/data/designs/178/style.css b/src/data/designs/178/style.css deleted file mode 100644 index 369cf84f23c7c179c06c2f722d9a3bd0ecce2644..0000000000000000000000000000000000000000 --- a/src/data/designs/178/style.css +++ /dev/null @@ -1,306 +0,0 @@ -/* css Zen Garden submission 178 - 'Pinups', by Emiliano Pennisi, http://www.peamarte.it/02/03.html */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Emiliano Pennisi */ -/* Added: July 9th, 2005 */ - -/* 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. */ - - - -/* css Zen Garden - 'Pinups', by Emiliano Pennisi -All illustrations and design was made by Emiliano Pennisi, MetroStation Design, for more info visit --> http://www.peamarte.it/02/03.html -The image of the first list it has been taken give: Stylegala Bullet Madness list -************************************************************************************/ -/* General */ -body{ - font-family: "Lucida Grande", Georgia, "Times New Roman", Times, serif; - font-size: 0.8em; - background: #d07b00; - text-align: center; - margin: 0; -} -body>.page-wrapper{ - margin-top: -20px; -} - -/* General links */ -a:link,a:visited{ - color: #000; - font-weight: bold; -} - -a:hover{ - color: #B74213; -} - -/* Paragraphs */ -p{ - line-height: 1.3em; - margin: 15px 0 0 10px; -} - -abbr { - color: #B74213; - font-weight: bold; - font-size: 10px; - border-bottom: 1px dashed #B74213; -} - -h3{ - font-size: 12px; -} - -/* Start layout rules */ -.preamble h3{ - background: url(01.gif); - width: 380px; - height: 72px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/* Images replacement group */ -.explanation h3{ - background: url(02.gif); - width: 380px; - height: 60px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation h3{ - background: url(03.gif); - width: 380px; - height: 60px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.benefits h3{ - background: url(04.gif); - width: 380px; - height: 60px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.requirements h3{ - background: url(05.gif); - width: 380px; - height: 60px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/* Container */ -.page-wrapper{ - position: relative; - width: 700px; - margin-left: auto; - margin-right: auto; - margin-top: -10px; -} - -.summary { - position: absolute; - top: 320px; - left: 44%; - font-size: 10px; - font-weight: bold; - text-transform: uppercase; -} - -/* Child Selector - compliant browser */ -.intro>header{ - width: 700px; -} - -header{ - background: url(head.jpg); - width: 690px; - height: 356px; -} - -h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.summary p:first-child { - display: none; -} - -.preamble,.supporting{ - text-align: left; - padding: 10px; -} - -.preamble{ - background: #ecca99; - width: 408px; - margin: -20px 0 0 214px; - voice-family: "\"}\""; - voice-family: inherit; - width: 388px; -} - -/* Child Selector - compliant browser */ -.intro>.preamble{ - margin: 0px 0 0 248px; -} - -.supporting{ - background: #ecca99; - width: 408px; - margin: -10px 0 0 214px; - voice-family: "\"}\""; - voice-family: inherit; - width: 388px; -} - -/* Child Selector - compliant browser */ -.page-wrapper>.supporting{ - background: #ecca99; - width: 388px; - margin: -10px 0 0 248px; -} - -.design-archives li a, .zen-resources li a { - display: inline; - font-weight: normal; - font-size: 9px; - line-height: 15px; - padding: 0; - margin: 0; - text-transform: uppercase; -} - -/* Navigation rules */ -.sidebar{ - position: absolute; - top: 350px; /* bottom: 0;*/ - left: 46px; - font-size: 10px; - background: #ecca99; - width: 200px; - background: #ecca99 url("bottom_linklist.gif") no-repeat left bottom; - padding-bottom: 24px; -} - -/* Child Selector - compliant browser */ -.page-wrapper>.sidebar{ - left: 41px; -} - -.sidebar ul{ - text-align: left; - list-style: url(list.png); -} - -.sidebar a{ - text-decoration: none; -} - -.sidebar li { - margin: 0 0 5px -10px; - border-bottom: 1px solid #ebab6b; - background: #ecca99; - width: 150px; - padding-bottom: 5px; -} - -.design-selection li a { - text-transform: uppercase; - font-size: 11px; -} - -.design-selection li a:hover{ - color: #d07b00; -} - -.design-selection a.designer-name { - text-transform: capitalize; - font-size: 10px; -} - -.design-selection a { - display: block; - font-weight: bold; -} - -.design-selection a.designer-name { - display: inline; - font-weight: bold; - color: #B74213; -} - -.design-archives ul li,.zen-resources ul li{ - border-bottom: none; -} - -.design-archives ul,.zen-resources ul{ - list-style: url(star_blt.png); -} - -.design-archives ul li,.zen-resources ul li{ - margin: 0 0 -5px -10px; -} - -.design-archives ul a,.zen-resources ul a{ - color: #000; - font-weight: bold; -} - -h3.select{ - color: #ecca99; - background: url(bgh3sel.gif); - height: 14px; - text-align: left; - padding: 5px; -} - -h3.archives,h3.resources{ - color: #ECCA99; - background: url(bgh3.gif); - height: 14px; - text-align: left; - padding: 5px; - border-bottom: none; -} - -/*Footer*/ -footer{ - background: url(footer.gif); - line-height: 45px; - height: 45px; - margin: 30px -10px -10px -10px; - padding: 0 10px 0 0; - font-weight: bold; - text-align: right; -} - -footer a{ - text-transform: uppercase; - font-size: 9px; - color: #EFECDE; - text-decoration: none; -} - -/* End code */ diff --git a/src/data/designs/179/metadata.json b/src/data/designs/179/metadata.json deleted file mode 100644 index 1ba461a4768499fab4e3f3a66fb3548b8871f2b4..0000000000000000000000000000000000000000 --- a/src/data/designs/179/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "179", - "url": "https://www.csszengarden.com/179", - "css_url": "https://www.csszengarden.com/179/179.css", - "description": "This design uses a rich, dark color palette to create an elegant and sophisticated layout, combining subtle gradients and wave elements to add visual interest. The use of serif typography against the deep background accentuates the content while maintaining readability. The layout is structured with a clear visual hierarchy, guiding the viewer's eye through the sections seamlessly.", - "categories": [ - "Web Design", - "Typography", - "Dark Theme", - "Modern", - "Elegant" - ], - "visual_characteristics": [ - "Dark color palette", - "Elegant typography", - "Subtle gradients", - "Wave motifs", - "Structured layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/179/screenshot_desktop.png b/src/data/designs/179/screenshot_desktop.png deleted file mode 100644 index a74286d9ad522c6a3b85d84f1657e364688f1773..0000000000000000000000000000000000000000 --- a/src/data/designs/179/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d046ba925c5b17e8ecf073581c14e50dbc0e91b58db13aa9452752c25e99d67a -size 484956 diff --git a/src/data/designs/179/screenshot_mobile.png b/src/data/designs/179/screenshot_mobile.png deleted file mode 100644 index 66a6f429cf7453899728edecd3dc3e966e04feb4..0000000000000000000000000000000000000000 --- a/src/data/designs/179/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:45c3fe382c327c13108a08f942e25110bcc62964676928a08d6f862ec711a1a6 -size 462013 diff --git a/src/data/designs/179/style.css b/src/data/designs/179/style.css deleted file mode 100644 index 1b0daaea08fa1fe116a14623f22e4c1c675e3c80..0000000000000000000000000000000000000000 --- a/src/data/designs/179/style.css +++ /dev/null @@ -1,265 +0,0 @@ -/* css Zen Garden submission 179 - 'Vin Rouge', by Thorsten Bopp, http://www.bopp-medien.de/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Thorsten Bopp */ -/* Added: September 1st, 2005 */ - -/* 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. */ - - - - - -/* tested with IE5+/Win, Mozilla, IE5/Mac, Safari, Opera8/Win */ - -/* colors -wine red: #9E2E2F -dark brown: #541D1D -light yellow:#F7F5D9 -link: #EA907F -*/ - - -body { - background: #371212 url(background.gif) top repeat-x; - font-family: Tahoma, Arial, Helvetica, sans-serif; - color: #F7F5D9; - font-size: 0.75em; - line-height: 1.6em; - padding: 0; - margin: 0; - text-align: center; - } - - -/* fonts ------------------------------------------------------------------------- */ - -a:link {color: #EA907F;text-decoration: none;} -a:visited {color: #EA907F;text-decoration: none;} -a:hover {color: #F7F5D9;text-decoration: underline;} - -p, h1, h2, h3 {margin: 0; padding: 0;} - -abbr, abbr { - text-decoration: none; - border-bottom: 1px dotted #F7F5D9; - cursor: help; - } - - -/* container ------------------------------------------------------------------- */ - -.page-wrapper { - background: #000000 url(background_header.gif) top center no-repeat; - width: 760px; - margin-left: auto; - margin-right: auto; - margin-top: 0; - margin-bottom: -50px; - padding: 0; - text-align: left; - } - - -/* intro ------------------------------------------------------------------- */ - -.intro { - width: 580px; - margin: 0; - padding: 0; - } - -header { - display: none; - } - -div.summary { - width: 260px; - height: 20px; - padding: 220px 0 0 0; - margin: 0 0 30px 310px; - color: #9E2E2F; - } - -div.summary p:first-child { - display: none; - } - - -/* preamble ------------------------------------------------------------------- */ - -div.preamble { - background: url(content_boxes_middle_preamble.gif) repeat-y; - width: 375px; - margin-left: 205px; - } - -div.preamble h3 { - background: url(headline_preamble.gif) top left no-repeat; - height: 85px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -div.preamble p { - padding: 0 10px 10px 20px; - } - -div.preamble p:nth-child(2) { - margin-top: -25px; - } - -div.preamble p:nth-child(4) { - background: url(content_boxes_bottom_preamble.gif) bottom left no-repeat; - padding-bottom: 65px; - /* for IE5 */ - margin-bottom: 0px; - } - - -/* supportingText ------------------------------------------------------------------- */ - -.supporting { - width: 580px; - margin: 0 0 50px 0; - padding: 0; - } - -div.explanation, div.participation, div.benefits, div.requirements { - background: url(content_boxes_middle.gif) repeat-y; - width: 550px; - margin-left: 30px; - } - -div.explanation p, div.participation p, div.benefits p, div.requirements p { - padding: 0 10px 10px 20px; - } - -div.explanation p:nth-child(2), div.participation p:nth-child(2), div.benefits p:nth-child(2), div.requirements p:nth-child(2) { - margin-top: -25px; - } - -div.explanation p:nth-child(3), div.participation p:nth-child(4), div.benefits p:nth-child(2), div.requirements p:nth-child(6) { - background: url(content_boxes_bottom.gif) bottom left no-repeat; - padding-bottom: 65px; - /* for IE5 */ - margin-bottom: 0px; - } - - -div.explanation h3 { - background: url(headline_explanation.gif) top left no-repeat; - } - -div.participation h3 { - background: url(headline_participation.gif) top left no-repeat; - } - -div.benefits h3 { - background: url(headline_benefits.gif) top left no-repeat; - } - -div.requirements h3 { - background: url(headline_requirements.gif) top left no-repeat; - } - -div.explanation h3, div.participation h3, div.benefits h3, div.requirements h3 { - height: 85px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - -/* footer ------------------------------------------------------------------- */ - -footer { - width: 425px; - height: 40px; - margin-left: 155px; - text-align: right; - font-size: 0.9em; - padding-top: 20px; - } -footer a:link {color: #9E2E2F;} -footer a:visited {color: #9E2E2F;} -footer a:hover {color: #F7F5D9;} - - -/* linkList ------------------------------------------------------------------- */ - -.sidebar { - position: absolute; left:auto; right:auto; top:290px; - width: 155px; - margin-left: 595px; - padding: 0; - font-size: 0.9em; - line-height: 1.6em; - color: #9E2E2F; - } - -ul { - list-style: none; - background: url(marginal_boxes_bottom.gif) bottom left no-repeat; - margin: 5px 0 0 0; - padding: 0 0 45px 0; - } - -li { - margin-left: 0; - padding: 0 10px 5px 15px; - } - -div.design-selection li { - background: url(li_element.gif) bottom center no-repeat; - padding: 0 10px 25px 15px; - } - -div.design-selection a { - display: block; - font-weight: bold; - } - -div.design-selection a.designer-name { - display: inline; - font-weight: normal; - } - -div.design-selection, div.design-archives, div.zen-resources { - background: url(marginal_boxes_middle.gif) repeat-y; - width: 155px; - } - -div.design-selection h3 { - background: url(headline_select.gif) top left no-repeat; - } - -div.design-archives h3 { - background: url(headline_archives.gif) top left no-repeat; - } - -div.zen-resources h3 { - background: url(headline_resources.gif) top left no-repeat; - } - -div.design-selection h3, div.design-archives h3, div.zen-resources h3 { - height: 35px; - } - -div.zen-resources h3, div.design-selection h3, div.design-archives h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - -/* extraDivs ------------------------------------------------------------------- */ - -div.extra1, div.extra2, div.extra3, div.extra4, div.extra5, div.extra6 { - display: none; - } \ No newline at end of file diff --git a/src/data/designs/180/metadata.json b/src/data/designs/180/metadata.json deleted file mode 100644 index 9503d81552e1699b554f5b684f840a83b87e6eb5..0000000000000000000000000000000000000000 --- a/src/data/designs/180/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "180", - "url": "https://www.csszengarden.com/180", - "css_url": "https://www.csszengarden.com/180/180.css", - "description": "This design employs a vintage newspaper aesthetic with a classic serif typography that evokes an old-world charm, utilizing sepia-toned paper backgrounds to enhance its nostalgic feel. The layout is text-heavy with a deliberate obfuscation, reflecting a layered collage effect. Its balanced placement keeps the focus central, inviting closer inspection and interaction.", - "categories": [ - "Vintage", - "Nostalgic", - "Typography", - "Collage", - "Editorial" - ], - "visual_characteristics": [ - "Sepia tone", - "Serif typography", - "Textured background", - "Layered elements", - "Central focus" - ] -} \ No newline at end of file diff --git a/src/data/designs/180/screenshot_desktop.png b/src/data/designs/180/screenshot_desktop.png deleted file mode 100644 index f573b4b3ce954be9f1dd0970d74d5585fbad89b1..0000000000000000000000000000000000000000 --- a/src/data/designs/180/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c80f6e0a8bd7563958a672be9c092f1dd4ef84cf9e384915548669b33baa0b7c -size 666834 diff --git a/src/data/designs/180/screenshot_mobile.png b/src/data/designs/180/screenshot_mobile.png deleted file mode 100644 index 013b396ac61d1720d8608f8e322f29750dbb4db4..0000000000000000000000000000000000000000 --- a/src/data/designs/180/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f3b011ec08aca427ed7b5cb3b9b82302c7c77863bc17cf9b6127a016b85fdea1 -size 216646 diff --git a/src/data/designs/180/style.css b/src/data/designs/180/style.css deleted file mode 100644 index a09f612af13d670f26a23679f1587aa2b70804de..0000000000000000000000000000000000000000 --- a/src/data/designs/180/style.css +++ /dev/null @@ -1,252 +0,0 @@ -/* css Zen Garden submission 180 - 'Vertigo', by Antonio Cella, http://www.digitalink.it/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Antonio Cella */ -/* Added: September 1st, 2005 */ - -/* 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. */ - - - -/* GENERAL STYLES */ - -body { - margin: 0; - padding: 0; - background: url(bck.jpg) no-repeat top left; - } - -h1, h2{ - margin: 0; - padding: 0; - } - -h3 { - margin: 3px 0 3px 0; - padding: 0; - font-size: 17px; - font-weight: 500; - background: none; - } - -p { - margin: 2px 0; - } - -a:link { - font-weight: bold; - text-decoration: underline; - color: #000; - } - -a:visited { - font-weight: bold; - text-decoration: underline; - color: #000; - } - -a:hover, a:active { - text-decoration: underline; - font-weight: bold; - text-decoration: underline; - color: #333; - background: #ccc; - } - -ul { - margin: 0; - padding: 0; - list-style: none; - } - - -/* MAIN DIV STYLES*/ - -.page-wrapper { - margin: 0 0 20px 0; - padding:0; - background: url(bck2.jpg) no-repeat 150px 0; - } - -/* CLASS STYLES */ - -p:nth-child(2) { - text-indent: 33px; - } - -p:nth-child(6) { - margin-top: 15px; - width: 300px; - text-align: left; - } - -.select { - margin: 3px 0 3px 0; - padding: 0; - font-size: 17px; - font-weight: 500; - background: none; - } - -/* ID STYLES */ - -.intro { - margin: 0; - padding: 0; - } - -header { - margin: 0; - padding: 0; - } - -.summary { - text-align: justify; - padding: 100px 0 0 150px; - width: 550px; - font-family: "lucida grande", verdana, tahoma, arial; - font-size: xx-small; - voice-family: "\"}\""; - voice-family:inherit; - font-size: x-small; - width: 400px; - } - -html>.summary { - font-size: x-small; - width: 400px; - } - -.preamble { - text-align: justify; - padding: 10px 0 0 150px; - width: 550px; - font-family: "lucida grande", verdana, tahoma, arial; - font-size: xx-small; - voice-family: "\"}\""; - voice-family:inherit; - font-size: x-small; - width: 400px; - } - -html>#preable { - font-size: x-small; - width: 400px; - } - -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { - margin: 8px 0 3px 0; - padding: 3px 0 0 0; - font-size: 17px; - font-weight: 500; - background: url(piuma.gif) no-repeat top left; - text-indent: 33px; - } - - -.supporting { - text-align: justify; - padding: 0 0 0 150px; - width: 550px; - font-family: "lucida grande", verdana, tahoma, arial; - font-size: xx-small; - voice-family: "\"}\""; - voice-family:inherit; - font-size: x-small; - width: 400px; - } - -html>.supporting { - font-size: x-small; - width: 400px; - } - -.sidebar { - top: 170px; - margin-left: 588px; - position: absolute; - text-align: right; - font-family: "lucida grande", verdana, tahoma, arial; - font-size: xx-small; - width: 198px; - padding: 0 12px; - voice-family: "\"}\""; - voice-family:inherit; - font-size: x-small; - width: 174px; - } - -html>.sidebar { - font-size: x-small; - width: 174px; - } - -.sidebar a:link { - font-weight: normal; - text-decoration: none; - color: #000; - } - -.sidebar a:visited { - font-weight: normal; - text-decoration: none; - color: #000; - } - -.sidebar a:hover, .sidebar a:active { - font-weight: normal; - text-decoration: none; - color: #000; - } - -.design-archives, .zen-resources { - margin-top: 10px; - } - -.extra1 { - top: 0; - left: 265px; - background: url(title2.jpg) no-repeat top left; - position: absolute; - width: 143px; - height: 100px; - } - -footer { - text-align: center; - margin-top: 20px; - } - -footer a:link { - width: 40px; - padding: 20px 15px 0 10px; - font-weight: bold; - text-decoration: none; - color: #000; - } - -footer a:visited { - width: 40px; - padding: 20px 15px 0 10px; - font-weight: bold; - text-decoration: none; - color: #000; - } - -footer a:hover, footer a:active { - width: 40px; - padding: 20px 15px 2px 10px; - font-weight: bold; - text-decoration: none; - color: #333; - background: #fff url(svirgolata.gif) no-repeat -2px 10px ; - } - - -/* OTHER STYLES */ - -h1, h2 { - display: none; -} \ No newline at end of file diff --git a/src/data/designs/181/metadata.json b/src/data/designs/181/metadata.json deleted file mode 100644 index 492db830001f395291de70e596ebc883dd861778..0000000000000000000000000000000000000000 --- a/src/data/designs/181/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "181", - "url": "https://www.csszengarden.com/181", - "css_url": "https://www.csszengarden.com/181/181.css", - "description": "This design features a vibrant magenta color palette with a bold, high-contrast aesthetic. It utilizes dynamic typography with various font sizes to guide the viewer's attention and create a sense of hierarchy. The layout is segmented into clear sections using horizontal lines and blocks of color to differentiate content areas. The left sidebar provides navigation options with visual elements like textures and overlays, adding depth to the design. The overall style is energetic and engaging, aimed at capturing the viewer's interest through strong visual impact.", - "categories": [ - "web design", - "typography", - "navigation", - "colorful", - "modern" - ], - "visual_characteristics": [ - "bold color palette", - "high contrast", - "dynamic typography", - "segmented layout", - "textured elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/181/screenshot_desktop.png b/src/data/designs/181/screenshot_desktop.png deleted file mode 100644 index b1f9559b6d0825db3aa704c99d99eb4b913dc53d..0000000000000000000000000000000000000000 --- a/src/data/designs/181/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:526b06886fef598f34ae9f397b10c181a04460658a98d3a4cd00115697225b74 -size 387584 diff --git a/src/data/designs/181/screenshot_mobile.png b/src/data/designs/181/screenshot_mobile.png deleted file mode 100644 index aca965f42329a4a71fed907e641ab3dd07e91705..0000000000000000000000000000000000000000 --- a/src/data/designs/181/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:16125b944b4cced7cdc8b523662cef6e8cbe7cd57c831924a1bc8541894523a8 -size 722719 diff --git a/src/data/designs/181/style.css b/src/data/designs/181/style.css deleted file mode 100644 index 0bf5246c6ff9ead43c80a713b65f9c96fda507d5..0000000000000000000000000000000000000000 --- a/src/data/designs/181/style.css +++ /dev/null @@ -1,227 +0,0 @@ -/* css Zen Garden submission 181 - 'Pretty in Pink', by Jordi Romkema, http://www.jor-on.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Jordi Romkema */ -/* Added: September 1st, 2005 */ - -/* 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. */ - - - -html, body { - background: url(images/bg.gif) left top repeat-y #F06; - background-attachment: fixed; - margin: 0; - padding: 0; - font-family: "Trebuchet MS", Tahoma, Lucida Sans, Arial, Verdana, Helvetica, sans-serif; -} - -abbr, abbr { - border-bottom: 1px dotted #FFE6F0; -} - -header h1, header h2, .sidebar h3 { - display: none; -} - -.wrapper { - display: block; -} - -.intro { - display: block; -} - -@media screen { - header, div.summary { - position: fixed; - } - - * html header, * html div.summary { - position: absolute; - } -} - -header { - left: 0; - top: 0; - width: 200px; - height: 320px; - background: url(images/logo.gif) left top no-repeat; -} - -div.summary { - left: 0; - top: 250px; - width: 185px; - color: #FFE6F0; - font-size: 12px; - padding: 5px; - padding-right: 10px; -} - -div.summary a { - font-weight: bold; - color: #FFE6F0; -} - -div.summary a:hover { - color: #000; -} - -div.preamble, .supporting { - margin-left: 463px; - padding: 10px; - padding-left: 20px; - padding-bottom: 0; -} - -div.preamble h3, .supporting h3 { - display: block; - background: url(images/hbg.gif) left top repeat #000; - margin: 0; - padding: 0; - padding-left: 20px; - color: #FFF; - font-size: 24px; - line-height: 50px; - text-transform: lowercase; -} - -div.preamble p, .supporting p { - font-size: 14px; - color: #000; - line-height: 1.5em; -} - -div.preamble a, .supporting a { - color: #000; -} - -div.preamble a:hover, .supporting a:hover { - color: #FFF; -} - -div.preamble abbr, div.preamble abbr, .supporting abbr, .supporting abbr { - border-bottom: 1px dotted #000; -} - -footer { - display: block; - height: 20px; - background: url(images/hbg.gif) left top repeat #000; - padding: 3px; - font-size: 12px; - line-height: 20px; - text-align: center; - margin-bottom: 10px; -} - -footer a { - color: #FFF; - font-weight: bold; -} - -footer a:hover { - color: #000; -} - -.sidebar { - position: absolute; - left: 200px; - top: 0px; - width: 263px; - font-family: Baskerville, Georgia, Garamond, Times New Roman, serif; -} - -.sidebar ul { - list-style: none; - padding: 0; - margin: 0; -} - -.sidebar ul { - list-style: none; -} - -.sidebar ul li { - border-bottom: 1px solid #CCC; -} - -.sidebar ul li a { - display: block; - padding: 5px; - padding-left: 20px; - padding-right: 20px; - font-weight: bold; - font-size: 12px; - color: #F06; - text-transform: uppercase; - text-decoration: none; -} - -.sidebar ul li a:hover { - background-color: #000; - color: #FFF; -} - -.sidebar div.design-selection ul li { - padding: 5px; - padding-left: 20px; - padding-right: 20px; - font-size: 10px; -} - -.sidebar div.design-selection ul li a { - padding: 0; - font-size: 12px; -} - -.sidebar div.design-selection ul li a:hover { - color: #000; - background-color: #FFF; -} - -.sidebar div.design-selection ul li a.designer-name { - display: inline; - text-transform: none; - font-size: 10px; - color: #000; -} - -.sidebar div.design-selection ul li a.designer-name:hover { - text-decoration: underline; -} - -.sidebar div.design-selection, .sidebar div.design-archives, .sidebar div.zen-resources { - display: block; - margin-top: 10px; -} - -.sidebar div.design-selection h3, .sidebar div.design-archives h3, .sidebar div.zen-resources h3 { - display: block; - height: 35px; - width: 100%; - margin: 0; - padding: 0; -} - -.sidebar div.design-selection h3, .sidebar div.design-archives h3, .sidebar div.zen-resources h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.sidebar div.design-selection h3 { - background: url(images/ll_selectadesign.gif) left top no-repeat; -} - -.sidebar div.design-archives h3 { - background: url(images/ll_archives.gif) left top no-repeat; -} - -.sidebar div.zen-resources h3 { - background: url(images/ll_resources.gif) left top no-repeat; -} \ No newline at end of file diff --git a/src/data/designs/182/metadata.json b/src/data/designs/182/metadata.json deleted file mode 100644 index aefd7c247c22ff1ff9febd11c564188c5a044433..0000000000000000000000000000000000000000 --- a/src/data/designs/182/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "182", - "url": "https://www.csszengarden.com/182", - "css_url": "https://www.csszengarden.com/182/182.css", - "description": "The design creatively utilizes a retro theme with vinyl records as the prominent visual element to evoke a sense of nostalgia and classic style, complemented by a muted green color palette that brings harmony and balance. Handwritten and vintage-style typography enhance the retro aesthetic, while background illustrations and decorative elements like stars add whimsy and depth to the composition.", - "categories": [ - "Retro", - "Nostalgic", - "Music-themed", - "Decorative", - "Vintage" - ], - "visual_characteristics": [ - "Vinyl Records", - "Muted Green Palette", - "Handwritten Typography", - "Background Illustrations", - "Decorative Elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/182/screenshot_desktop.png b/src/data/designs/182/screenshot_desktop.png deleted file mode 100644 index b88f712b9f9d80b49e0f8b93dd81408128895d92..0000000000000000000000000000000000000000 --- a/src/data/designs/182/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1bb21f7f65fdd88e5d49dd79f3bf63039edf1433a6078956ce05909aa5cd6046 -size 438458 diff --git a/src/data/designs/182/screenshot_mobile.png b/src/data/designs/182/screenshot_mobile.png deleted file mode 100644 index a10b73e0fe2d29b0855b0207264ba924ac6988bc..0000000000000000000000000000000000000000 --- a/src/data/designs/182/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fb6a7142bacfd96aec7fdae5fd2120ebcb7421d4950f65604cbfc8e6c59405ed -size 551166 diff --git a/src/data/designs/182/style.css b/src/data/designs/182/style.css deleted file mode 100644 index 7f31f8c86cb059d57ee9f900e48d4cb873f7f56c..0000000000000000000000000000000000000000 --- a/src/data/designs/182/style.css +++ /dev/null @@ -1 +0,0 @@ -/* css Zen Garden submission 182 - '45 RPM', by Thomas Michaud, http://www.ivfx.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2005, Thomas Michaud */ /* Added: September 1st, 2005 */ /* 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. */ /* --HTML and BODY Information-- */ html { margin: 0px; padding: 0px; } body { font-family: "Trebuchet MS", "Times New Roman", serif; font-size: 12px; color: #83986D; background: #E0E8B6 url(sidegraphic.gif) no-repeat fixed; margin: 0px; padding: 0px; line-height: 17px; font-weight: normal; } /* --Typography and Links-- */ p { text-align: justify; width: 380px; margin: 0px; } h1,h2,h3 { margin: 0px; } abbr { color: #706D32; font-weight: bold; font-style: oblique; border: 0px; } a:link { color: #83986d; text-decoration: none; font-weight: bold; } a:visited{ color: #83986d; text-decoration: none; } a:hover, a:active { color: #DB7762; border-bottom: 1px dotted #e6ad6c; } /*End Links*/ /* --Container-- */ .page-wrapper { width: 560px; margin-left: 100px; padding-left: 5px; } .summary{ padding: 0px 0px 0px 5px; margin: 0px 1px 10px 0px; background-image: url(bar.gif); background-repeat: no-repeat; width: 325px; height: 30px; } /* --Hide the Text for Logo-- */ h1, h2 { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* --Hide quicksummary Text-- */ .summary p:first-child { text-indent: 100%; white-space: nowrap; overflow: hidden; } .summary p:last-child { text-transform: uppercase; font-size: 12px; } header { background-image: url(preamble.gif); background-repeat: no-repeat; height: 455px; width: 552px; margin: 0px; padding: 0px; } /* --Hide Header3 Text for image replacement-- */ .preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* --Image Replacement for each h3 subject-- */ .preamble h3 { background-image: url(01.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 400px; } .explanation h3 { background-image: url(02.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 400px; } .participation h3 { background-image: url(03.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 325px; } .benefits h3 { background-image: url(04.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 325px; } .requirements h3 { background-image: url(05.gif); background-repeat: no-repeat; background-position: left top; height: 60px; width: 325px; } /* --Link Menu Position on Right-- */ .sidebar { position: absolute; top: 300px; margin-left: 400px; width:240px; } .sidebar a{ display: inline; } .sidebar .wrapper { font-size: 12px; padding: 10px; margin-top: 150px; width:240px; } .sidebar h3.select { background: url(playlist.gif) no-repeat top left; margin: 0px 0px 5px 0px; width: 195px; height: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar h3.archives { background: url(goldenoldies.gif) no-repeat top left; margin: 15px 0px 5px 0px; width: 195px; height: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar h3.resources { background: url(resources.gif) no-repeat top left; margin: 15px 0px 5px 0px; width: 195px; height: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar ul { margin: 0px; padding: 0px; } .sidebar li { line-height: 2ex; list-style-type: none; display: block; padding-top: 5px; margin-bottom: 5px; } .sidebar li a:link { color: #83986D; } .sidebar li a:hover { color: #706D32; } .sidebar li a:visited { color: #B6BB68; } .sidebar li a.designer-name{ color: #DB7762; font-size: 12px; font-weight: normal; } /* --Footer Information to Close everything out-- */ footer { background-image: url(footer.gif); background-repeat: no-repeat; background-position: left top; height: 100px; width: 400px; margin: 10px 35px 10px; text-align: center; } footer a { cursor: help; font: 0.8em "Trebuchet MS", "Times New Roman", serif; text-transform: uppercase; color: #83986D; font-weight: bold; } footer a:hover { color: #DB7762; border: 0px; font-weight: bold; } /* --Fini-- */ \ No newline at end of file diff --git a/src/data/designs/183/metadata.json b/src/data/designs/183/metadata.json deleted file mode 100644 index 66ec7498e4283c0377af82398b2efa2e65c1fce7..0000000000000000000000000000000000000000 --- a/src/data/designs/183/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "183", - "url": "https://www.csszengarden.com/183", - "css_url": "https://www.csszengarden.com/183/183.css", - "description": "The visual design presents a clean, classic approach focusing on typography with a minimalist layout. The design uses a monochromatic color palette accentuated with blue links for clarity and easy navigation. Strategic use of whitespace enhances readability and draws attention to headings and links, creating a streamlined and easily digestible user experience.", - "categories": [ - "Typography", - "Minimalism", - "Web Design", - "User Experience" - ], - "visual_characteristics": [ - "Monochrome", - "Whitespace Utilization", - "Classic Layout", - "Text-Focused" - ] -} \ No newline at end of file diff --git a/src/data/designs/183/screenshot_desktop.png b/src/data/designs/183/screenshot_desktop.png deleted file mode 100644 index 1ea83fe93a436b68101bed3878b37f3b75171d60..0000000000000000000000000000000000000000 --- a/src/data/designs/183/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e331ff1966f22e102f4ca3c7f3266c251ea1101a5cf2d9070d65e2c97ad24d0d -size 403861 diff --git a/src/data/designs/183/screenshot_mobile.png b/src/data/designs/183/screenshot_mobile.png deleted file mode 100644 index e18bcc75c1bc87f40fe2f8730163c54f75bb08e7..0000000000000000000000000000000000000000 --- a/src/data/designs/183/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:409ac6e3ad005c1416173466c6dcc32530e94327361f2bf70d6491874a849e9d -size 337381 diff --git a/src/data/designs/183/style.css b/src/data/designs/183/style.css deleted file mode 100644 index 321a5510890a06658620eb74a04135b6732b5591..0000000000000000000000000000000000000000 --- a/src/data/designs/183/style.css +++ /dev/null @@ -1,9 +0,0 @@ - - -The requested URL was not found on this server.
-Additionally, a 404 Not Found -error was encountered while trying to use an ErrorDocument to handle the request.
- diff --git a/src/data/designs/184/metadata.json b/src/data/designs/184/metadata.json deleted file mode 100644 index 97b6df64e58be0d1f1897b5f0a23fff4ed5ac7f5..0000000000000000000000000000000000000000 --- a/src/data/designs/184/metadata.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "id": "184", - "url": "https://www.csszengarden.com/184", - "css_url": "https://www.csszengarden.com/184/184.css", - "description": "The design features a subtle and harmonious aesthetic using a pastel green color scheme that evokes tranquility and balance. The layout is clean and structured, with a mix of serif and sans-serif typography that enhances readability. Decorative elements like the zen-like symbol and soft imagery provide an abstract, soothing quality, contributing to the theme of enlightenment and calm. This design is suited for audiences interested in modern CSS design principles and invites exploration and participation.", - "categories": [ - "Minimalist", - "Modern", - "Educational", - "Web-focused" - ], - "visual_characteristics": [ - "Subtle color palette", - "Sophisticated typography", - "Clean layout", - "Zen imagery", - "Textured background" - ] -} \ No newline at end of file diff --git a/src/data/designs/184/screenshot_desktop.png b/src/data/designs/184/screenshot_desktop.png deleted file mode 100644 index dbdd86cf4331d0f9357efa0a00556671280a700a..0000000000000000000000000000000000000000 --- a/src/data/designs/184/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:559cc84d0253f3f004227640be27f8e4393c93ee31cb9ccb3a32b91ea90132ec -size 588526 diff --git a/src/data/designs/184/screenshot_mobile.png b/src/data/designs/184/screenshot_mobile.png deleted file mode 100644 index effdaa7f1d17a6348c3dc40d7d75f224e726d8a9..0000000000000000000000000000000000000000 --- a/src/data/designs/184/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0bb7708c25ffee5d8a2135c4abf6abdfb308403e7c73c963cdf80bb9b759a225 -size 557917 diff --git a/src/data/designs/184/style.css b/src/data/designs/184/style.css deleted file mode 100644 index d8817484989996e94719f040f5dd57aa6587b302..0000000000000000000000000000000000000000 --- a/src/data/designs/184/style.css +++ /dev/null @@ -1,310 +0,0 @@ -/* css Zen Garden submission 184 - 'Peace of Mind', by Carlos Varela, http://www.carlosvarela.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Carlos Varela */ -/* Added: September 16th, 2005 */ - -/* 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. */ - - - -html { -min-width:750px; -} - -body { -font:11px/32px Georgia, 'Times New Roman', Times, serif; -color:#28780A; -text-align:center; -background:#fff url(bg.gif) repeat-x; -margin:0; -padding:0; -} - -a,a:link,a:visited,a:active { -text-decoration:none; -color:#5EA936; -text-transform:uppercase; -font-weight:700; -} - -a:hover { -color:#ABD550; -} - -abbr { -cursor:help; -border-bottom:1px dotted #5EA936; -color:#ABD550; -font-weight:600; -letter-spacing:1px; -text-transform:uppercase; -} - - - -h1,h2,h3,ul ,li { -margin:0; -padding:0; -} - - - -li { -list-style:none; -} - -p { -line-height:1.5em; -margin:0; -padding:5px 0 0 12px; -} - - -.benefits h3 { -background:url(benefits.gif) no-repeat; -} - -.page-wrapper { -width:750px; -height:1500px; -background:url(girl.jpg) top right no-repeat; -text-align:left; -position:relative; -margin:0 auto; -padding:0; -} - -.explanation h3 { -background:url(sowhat.gif) no-repeat; -} - -.explanation,.participation,.benefits { -background:transparent url(bg_text.jpg) left bottom no-repeat; -margin:0 0 50px 0; -padding:0; -} - - -footer { -text-align:center; -height:50px; -background:url(footer_bg.png) top right no-repeat; -margin:0; -padding:0 0 0 15px; -font-family: 'Times New Roman', Times, serif; -letter-spacing: 1.5px; -font-size: 12px; - -} - -footer a { -text-transform:uppercase; -color:#96CB18 -} - -footer a:hover { color: #99CC00 } - -.intro { -text-align:center; -} - -.design-archives h3 { -background:url(archives.gif) no-repeat; -} - -.sidebar { -position:absolute; -width:255px; -left:444px; -top:581px; -margin:0; -padding:0; -} - -.sidebar ul { -text-align:left; -list-style:none; -} - -.zen-resources h3 { -background:url(resources.gif) no-repeat; -} - -.design-selection a.designer-name { -text-transform:capitalize; -font-size:10px; -line-height:11px; -} - -.design-selection a { -display:block; -} - -.design-selection a.designer-name { -display:inline; -line-height:5px; -margin:0; -padding:0; -} - -.design-selection h3 { -background:url(select.gif) no-repeat; -} - -.design-selection li a { -text-transform:uppercase; -font-size:11.5px; -line-height:13px; -font-weight:bold; -background:url(bg_li.gif); -margin:0; -font-family:Georgia, 'Times New Roman', Times, serif; -color: #96CB18 -} - -.design-selection li a:hover { -color:#CEC81A; -} - -.design-selection li,.zen-resources li,.design-archives li { -background:url(bg_li.gif); -margin:0 0 1px; -padding:8px 0 0 10px; -} - -.design-selection,.design-archives,#lresoucers { -margin:0 0 50px; -} - -.design-archives li a, .zen-resources li a { -text-transform: lowercase; -font-size: 11px; -font-family:Georgia, 'Times New Roman', Times, serif; -color: #96CB18 -} - -header { -position:absolute; -height:300px; -width:500px; -background:transparent url(title.gif) top right no-repeat; -left:0; -top:16px; -z-index:10; -margin:0; -padding:0; -} - -h1, h2, .preamble h3,.explanation h3,.participation h3,.benefits h3,.requirements h3,.design-selection h3,.design-archives h3,.zen-resources h3 { - text-indent: 200%; - white-space: nowrap; - overflow: hidden; -} - -.participation h3 { -background:url(participation.gif) no-repeat; -} - -.preamble { - position:absolute; - top:270px; - left:12px; - text-align:justify; - width:390px; - background:transparent url(bg_text.jpg) left bottom no-repeat; - margin:0 0 50px; - padding:0; - height: 351px; -} - -.preamble h3 { -background:url(theroad.gif) no-repeat; -} - -.preamble h3,.explanation h3,.participation h3,.benefits h3,.requirements h3,.design-selection h3 ,.design-archives h3,.zen-resources h3 { -width:380px; -height:60px; -} - -.preamble p,.explanation p,.participation p,.benefits p,.requirements p { -text-align:justify; -font:12px/22px Georgia, 'Times New Roman', Times, serif; -margin:0; -padding:10px 0 0 35px; -} - -.summary { -position:absolute; -width:300px; -height:250px; -background:url(quicksummary_bg.gif) no-repeat; -font-style:italic; -font-size:12px; -left:421px; -top:325px; -text-align:center; -} - -.summary p:first-child { -text-indent:-9999px; -height:200px; -display:none; -margin:0; -padding:0; -} - -.summary p:last-child { -background:transparent; -font-style:normal; -text-transform:uppercase; -font-family:Arial, Helvetica, sans-serif; -font-size:10px; -margin:210px 0 0; -padding:0; -} - -.requirements { -background:transparent url(bg_text.jpg) left bottom no-repeat; -margin:0; -padding:0; -} - -.requirements p:nth-child(6) { -height:200px; -background:url(flower.jpg) center no-repeat; -text-align:center; -margin:0; -padding:135px 0 0; -} - -.requirements h3 { -background:url(requirements.gif) no-repeat; -} - -.supporting { -position:absolute; -width:390px; -float:left; -left:13px; -top:641px; -margin:0 70px 0 0; -padding:0; -} - -.extra1 { -position:absolute; -background:url(leaves.jpg) no-repeat; -height:242px; -width:332px; -left:666px; /* 6 6 6 the number of the div! */ -top:1641px; - -} - - - - -.extra2, .extra3, .extra4, .extra5, .extra6 { display:none } diff --git a/src/data/designs/185/metadata.json b/src/data/designs/185/metadata.json deleted file mode 100644 index b16aac9dc4cb06a5ee1e1488aba8be9732fb2520..0000000000000000000000000000000000000000 --- a/src/data/designs/185/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "185", - "url": "https://www.csszengarden.com/185", - "css_url": "https://www.csszengarden.com/185/185.css", - "description": "The design features a bold contrast between a bright blue header and a predominantly black background, creating a modern and striking visual impact. The use of crisp typography in white enhances readability against the dark backdrop, while an accent of orange in a sidebar provides additional contrast and attention-grabbing potential. The layout follows a structured and logical arrangement, guiding the viewer's eye through a series of selectable design options and resource links, creating a user-friendly and engaging experience.", - "categories": [ - "Modern", - "Typography", - "Web Design", - "Classic", - "User Friendly" - ], - "visual_characteristics": [ - "High Contrast", - "Bold Colors", - "Structured Layout", - "Readable Typography", - "Accent Highlights" - ] -} \ No newline at end of file diff --git a/src/data/designs/185/screenshot_desktop.png b/src/data/designs/185/screenshot_desktop.png deleted file mode 100644 index d8fa7a5154ce2743950082b82ac7b5eb49cd17d8..0000000000000000000000000000000000000000 --- a/src/data/designs/185/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:487182443ab3aa6bc300612a149c95388135e6b31e10487e30eec7817b91f957 -size 329471 diff --git a/src/data/designs/185/screenshot_mobile.png b/src/data/designs/185/screenshot_mobile.png deleted file mode 100644 index 016caa6cbb49d94ae7190f88cad4009a56b269a0..0000000000000000000000000000000000000000 --- a/src/data/designs/185/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4108e68e43d89535eecd341a8fef168d8f81a1ee13bc9c13d3c82cb7a250330a -size 315074 diff --git a/src/data/designs/185/style.css b/src/data/designs/185/style.css deleted file mode 100644 index dd16f39f2ff1948312613d6e46d073a0b7e51e6b..0000000000000000000000000000000000000000 --- a/src/data/designs/185/style.css +++ /dev/null @@ -1,199 +0,0 @@ -/* css Zen Garden submission 185 - 'Manhattan Edition', by TheOm3ga, http://www.theom3ga.tk/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, TheOm3ga */ -/* Added: September 16th, 2005 */ - - -/* 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. */ - - - -body{ - margin: 0; - padding: 0; - background-color: #0D0C0D; - background-image:url(fondo.gif); - background-repeat:repeat-x; - background-position:7px 0; - color: white; - font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; - font-size: 10px; -} -.page-wrapper{ - width:759px; - margin: 0; - padding: 0; -} -header{ - background-image: url(top.jpg); - background-repeat: no-repeat; - background-position: top left; - width: 759px; - height: 432px; - margin: 0; - padding: 0; -} -.summary{ - position: absolute; - top: 437px; - left: 565px; - font-family: Tahoma, Arial, Helvetica, sans-serif; - - color: white; - padding-bottom: 10px; -} -.summary p:first-child{ - width: 116px; - padding: 9px 10px 15px 35px; - margin-bottom: 0px; - background-image: - url(panel_naranja_top.gif), - url(panel_naranja_medio.gif); - background-repeat: - no-repeat, - repeat; - background-position: - 0 0, - 0 0; -} -.summary p:last-child{ - margin-top: 0px; - margin-bottom: 0px; - width: 116px; - padding: 26px 10px 9px 35px; - min-height: 24px; - background-image: - url(panel_naranja_bottom.gif), - url(panel_azul_bajo.gif), - url(panel_azul_medio.gif); - background-repeat: - no-repeat, - no-repeat, - repeat; - background-position: - left top, - left bottom, - 0 0; -} -.summary a{ - color: white; -} -.sidebar{ - position: absolute; - left: 565px; - /*top:600px;*/ - /*top: 56.5em; /* top for fonts @ 10px */ - top: 61em; /* top for fonts @ 11px */ - float:right; - width: 159px; - background-image:url(panel3_top.gif); - background-position:top; - background-repeat: no-repeat; -} -.sidebar .wrapper{ - position:relative; - top: 10px; - background-image:url(panel3_med.gif); -} -.zen-resources{ - background-image:url(panel3_bot.gif); - background-repeat:no-repeat; - background-position:bottom; -} -.sidebar h3{ - margin-top: 0; - margin-left: 10px; - margin-bottom: 0px; - padding: 0; - font-size: 12px; -} -.sidebar a{ - color: white; -} -.sidebar abbr, .summary abbr{ - border-bottom-color: white; -} -.sidebar ul{ - margin-top: 3px; - margin-left: 0px; - padding-left: 25px; - padding-bottom: 5px; - background-image:url(divizor.gif); - background-repeat:no-repeat; - background-position:bottom center; -} -li{ - margin-bottom: 5px; -} -.zen-resources ul{ - background-image: none; -} - -footer{ - width: 558px; - text-align: center; - margin-bottom: 30px; -} -header h1{ display: none; } -header h2{ display: none; } - -.preamble h3{ background-image:url(theRoadTo.jpg); } -.explanation h3{ background-image:url(soWhatIs.jpg); } -.participation h3{ background-image:url(participation.jpg); } -.benefits h3{ background-image:url(benefits.jpg); } -.requirements h3{ background-image:url(requirements.jpg); } - -.preamble h3, .supporting h3{ - margin: 0; - padding: 0; - width: 558px; - height: 37px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.preamble{ - margin-top: 6px; -} -.preamble, .explanation, .participation, .benefits, .requirements{ - position: relative; - display: block; - left: 4px; - background-image: url(fondoParagraphBottom.gif); - background-position:bottom; - background-repeat:no-repeat; - font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; - font-size: 11px; - color: #666666; - width: 558px; - padding-bottom: 29px; -} -.preamble p, .explanation p, .participation p, .benefits p, .requirements p{ - margin-top: 0px; - margin-bottom: 0px; - padding-left: 26px; - padding-right: 35px; - padding-bottom: 10px; - background-image:url(fondoParagraph1.gif); - background-repeat:repeat-y; -} -a{ - color: #666666; - font-weight: bold; - text-decoration: none; -} -a:hover{ - text-decoration: underline; -} -abbr{ - font-style:italic; - border-bottom: 1px dotted #666666; -} -.benefits p{ - padding-bottom: 0px; -} \ No newline at end of file diff --git a/src/data/designs/186/metadata.json b/src/data/designs/186/metadata.json deleted file mode 100644 index 5b0ec03deec4731bd6067c1077f25ccf4e820ccd..0000000000000000000000000000000000000000 --- a/src/data/designs/186/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "186", - "url": "https://www.csszengarden.com/186", - "css_url": "https://www.csszengarden.com/186/186.css", - "description": "The design features a fresh and calming aesthetic, with a predominant use of soft pastel green and pink hues, enhanced by floral imagery that exudes a natural and serene atmosphere. The typography is clean and well-organized, enabling easy readability, while a sidebar with navigation links provides clear structure and accessibility.", - "categories": [ - "web page layout", - "clean design", - "readability", - "navigation" - ], - "visual_characteristics": [ - "pastel color scheme", - "floral imagery", - "sans-serif typography", - "structured layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/186/screenshot_desktop.png b/src/data/designs/186/screenshot_desktop.png deleted file mode 100644 index 391c9d5bd5da23d073e01b46d461d90f106db897..0000000000000000000000000000000000000000 --- a/src/data/designs/186/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3e4f888e35f368ebe666b3e4ea29b858d6c34e059cb46ad5cb82ba319fc2e66c -size 568179 diff --git a/src/data/designs/186/screenshot_mobile.png b/src/data/designs/186/screenshot_mobile.png deleted file mode 100644 index 47cb46d8082948d18fde2ec5b10dfc1b5e3c1fc1..0000000000000000000000000000000000000000 --- a/src/data/designs/186/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c4a0d4654d24f1cfa4582aadd91405080eb494e7fa3cf298f905be9cdb75497e -size 533355 diff --git a/src/data/designs/186/style.css b/src/data/designs/186/style.css deleted file mode 100644 index f3b834fec6ac7439de9daeb19cef544fc59de719..0000000000000000000000000000000000000000 --- a/src/data/designs/186/style.css +++ /dev/null @@ -1,205 +0,0 @@ -/* css Zen Garden submission 186 - 'Floral Simplicity', by Mani Sheriar, http://www.manisheriar.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Mani Sheriar */ -/* Added: November 10th, 2005 */ - - -/* 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. */ - - - - -* { - margin:0; - padding:0; - } -body { - background:#cadeb9 url(zenGarden.gif) no-repeat top left; - background-attachment:fixed; - padding:14px 20px 0 73px; - margin:0; - } -p { - margin:12px 0; - } -.page-wrapper { - position:absolute; - width:700px; - margin:0; - padding:0; - background:transparent url(lines.gif) repeat-y top left; - } -.intro { - position:relative; - text-align:left; - background:transparent url(pink.jpg) no-repeat top left; - width:335px; - font:normal 13px/18px arial; - color:#333; - padding:150px 75px 0 75px; - } -header { - display:none; - } -.summary { - } -.summary p:first-child { - color:#7CAF6B; - font-style:italic; - font-size:14px; - padding-top:0 !important; - padding-top:12px; - } -.summary p:last-child { - padding-left:20px; - background:transparent url(download.gif) no-repeat top left; - color:#C99AAD; - } -.summary p:last-child a { - color:#C99AAD; - } -.summary p:last-child a:hover { - color:#fff; - text-decoration:none; - background-color:#E2C0CE; - } -.preamble { - margin-top:24px; - color:#999; - } -h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.preamble h3 { - width:260px; - height:16px; - background:url(enlightenment.gif) no-repeat; - } -.supporting { - position:relative; - font:normal 13px/18px arial; - color:#999; - width:335px; - margin-left:75px; - z-index:200; - } -.supporting h3 { - margin-top:24px; - } -.supporting a { - color:#98A892; - } -.supporting a:hover { - text-decoration:none; - color:#fff; - background-color:#ADC8A2; - } -.explanation h3 { - width:202px; - height:16px; - background:url(about.gif) no-repeat; - } -.participation h3 { - width:202px; - height:16px; - background:url(participation.gif) no-repeat; - } -.benefits h3 { - width:202px; - height:16px; - background:url(benefits.gif) no-repeat; - } -.requirements h3 { - width:230px; - height:16px; - background:url(requirements.gif) no-repeat; - } -.requirements { - padding-bottom:1px; - } -footer { - position:absolute; - background:url(footerBg.gif) no-repeat top center; - width:485px; - height:48px; - margin-left:-150px; - padding-left:150px; - padding-top:27px; - padding-bottom:0; - margin-bottom:0; - z-index:300; - text-indent:-150px; - text-align:center; - font-size:11px; - } -.sidebar { - position:absolute; - top:0; - width:200px; - left:500px; - font:normal 11px/15px arial; - color:#999; - background:#fff url(lines2.gif) repeat-y top center; - color:#666; - float:left; - } -.sidebar .wrapper { - background:transparent url(orange.jpg) no-repeat top left; - padding:50px 25px 0 25px; - width:150px; - } -h3.select { - width:115px; - height:18px; - background:url(select.gif) no-repeat; - } -h3.archives { - width:115px; - height:18px; - background:url(archives.gif) no-repeat; - } -h3.resources { - width:115px; - height:18px; - background:url(resources.gif) no-repeat; - } -.sidebar a { - color:#98A892; - } -.sidebar a:hover { - color:#fff; - background-color:#ADC8A2; - text-decoration:none; - } -.design-selection a { - display:block; - } -.design-selection a.designer-name { - display:inline; - color:#999; - } -.design-selection a.designer-name:hover { - color:#C99AAD; - background:none; - } -ul { - margin:4px 0 16px 18px; - } -li { - margin:4px 0; - list-style-image:url(bullet.gif); - } -.zen-resources { - margin:0 -25px; - padding:0 25px 15px 25px; - background:url(linkListBottom.gif) no-repeat bottom center; - } -.zen-resources ul { - margin-bottom:0; - padding-bottom:14px; - } \ No newline at end of file diff --git a/src/data/designs/187/metadata.json b/src/data/designs/187/metadata.json deleted file mode 100644 index e577c9bddcf9c71dc769fd1a5fd3861fb0b50547..0000000000000000000000000000000000000000 --- a/src/data/designs/187/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "187", - "url": "https://www.csszengarden.com/187", - "css_url": "https://www.csszengarden.com/187/187.css", - "description": "The design features a mystical, nature-inspired theme with a rustic color palette of dark greens and earthy reds. Intricate textures and foliage imagery offer a sense of depth, complemented by elegant serif typography that conveys a classic and sophisticated mood. The layout uses clear sections for content, enhancing readability and user engagement.", - "categories": [ - "Nature", - "Mystical", - "Classic", - "Rustic", - "Elegant" - ], - "visual_characteristics": [ - "Dark Green Palette", - "Earthy Red Accents", - "Serif Typography", - "Textured Background", - "Nature Imagery" - ] -} \ No newline at end of file diff --git a/src/data/designs/187/screenshot_desktop.png b/src/data/designs/187/screenshot_desktop.png deleted file mode 100644 index 771077aa6fac147482f6c388298c86f227f5eaab..0000000000000000000000000000000000000000 --- a/src/data/designs/187/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:479511899634aac70bb87d834582ebc656e002ad7780cc4cb540ac59e6f25ab4 -size 745004 diff --git a/src/data/designs/187/screenshot_mobile.png b/src/data/designs/187/screenshot_mobile.png deleted file mode 100644 index 19bb15460738fd26c451c81a9bb00adf1eea2da0..0000000000000000000000000000000000000000 --- a/src/data/designs/187/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:07444459fb37cbe3b6cc4e1e4843bde723bf163ab28e9cd0f36a3f4c9e31433a -size 662467 diff --git a/src/data/designs/187/style.css b/src/data/designs/187/style.css deleted file mode 100644 index e7ee023e1916886b7ac38073a449d117c5921ae0..0000000000000000000000000000000000000000 --- a/src/data/designs/187/style.css +++ /dev/null @@ -1,275 +0,0 @@ -/* css Zen Garden submission 187 - 'Wilderness', by Aadesh Mistry, http://www.idizyn.com/blog/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Aadesh Mistry */ -/* Added: November 10th, 2005 */ - - -/* 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. */ - - - - -/*------------------------------------------------------ -G L O B A L E L E M E N T S -------------------------------------------------------*/ - -* { - margin: 0; - padding: 0; -} -body { - margin: 0; - padding: 0; - background: url(background.gif); -} -a { - color: #E0B53D; -} -a:hover { - color: #FBBA04; -} -h1, h2 { - display: none; -} - -h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -/*------------------------------------------------------ -C O N T A I N E R -------------------------------------------------------*/ - -.page-wrapper { - position: relative; - margin: 0 auto 0 auto; - padding: 0 50px 0 50px; - width: 640px !important; - width /**/: 750px; - background: url(background_container.gif) repeat-y; - font-family: "Trebuchet MS", Arial, Verdana, sans-serif; - font-size: .75em; - color: #BBB5A2; -} -header { - width: 670px; - height: 150px; - background: url(page_header.jpg) no-repeat; -} -.intro { - width: 460px; -} -.summary { - margin: -10px 0 0 30px; -} -.summary p:first-child { - display: none; -} -.preamble { - margin: 20px 0 30px 0; - padding: 0 0 0 30px; - width: 420px !important; - width /**/: 460px; -} -.preamble h3{ - margin: 0; - padding: 0; - width: 265px; - height: 20px; - background: url(h_preamble.gif) no-repeat; -} -.preamble p:nth-child(2) { - padding: 0; - margin: 5px 0 0 0; -} - -/*------------------------------------------------------ -S U P P O R T I N G T E X T -------------------------------------------------------*/ - -.supporting { - width: 460px; -} -.supporting { - padding: 30px; - padding-bottom: 0; - width: 408px !important; - width /**/: 468px; - background: url(background_supportingtext.gif) repeat-y; - /*background: url(i_supportingtext_header.gif) no-repeat;*/ - color: #BDC1BC; -} -.explanation { - margin: -30px -30px 0 -30px ; - padding: 30px 30px 0 30px; - background: url(i_supportingtext_header.gif) no-repeat; -} -.explanation h3 { - width: 369px; - height: 25px; - background: url(h_sowhat.gif) no-repeat; -} -.participation h3 { - width: 396px; - height: 25px; - background: url(h_participation.gif) no-repeat; -} -.benefits h3 { - width: 396px; - height: 25px; - background: url(h_benefits.gif) no-repeat; -} -.requirements h3 { - width: 396px; - height: 25px; - background: url(h_requirements.gif) no-repeat; -} -.explanation,.participation,.benefits,.requirements { - margin-bottom: 30px; -} -p:nth-child(2),p:nth-child(3),p:nth-child(4),p:nth-child(5),p:nth-child(6) { - margin-top: 10px; -} -p:nth-child(6) { - padding: 10px; - background: #0B1C07; -} - -/*------------------------------------------------------ -F O O T E R -------------------------------------------------------*/ - -footer { - margin: 0 -30px; - padding: 40px 30px 10px 30px; - height: 20px !important; - height /**/: 70px; - background: #000000 url(background_footer.gif) no-repeat; -} -footer a{ - color: #FFFFFF; -} - -/*------------------------------------------------------ -L E F T C O L U M N -------------------------------------------------------*/ - -.sidebar { - position: absolute; - top: 160px; - left: 530px; - width: 177px; -} -.sidebar .wrapper { - color: #C13003; -} - -/*------------------------------------------------------ -S E L E C T A D E S I G N -------------------------------------------------------*/ - -.select { - margin-top: 20px; - padding-bottom: 5px; - width: 177px; - height: 31px; - background: url(h_selectadesign.gif) no-repeat; -} -.design-selection ul { - width: 150px; - list-style-type: none; -} -.design-selection ul li { - width: 150px; - padding: 5px 0 5px 25px; - display: block; - background: url(bullets.gif) 14px 7px no-repeat; - border-bottom: 1px solid #311D00; -} -.design-selection ul li a{ - display: block; - font-weight: bold; - color: #D07B02; - text-decoration: none; - line-height: 12px; -} -.design-selection ul li a:hover{ - color: #FAA123; -} -.design-selection ul li a.designer-name { - color: #C13003; - display: inline; - font-weight: bold; -} -.design-selection ul li a.designer-name:hover { - color: #C13003; - text-decoration: underline; -} - -/*------------------------------------------------------ -A R C H I V E S -------------------------------------------------------*/ - -.archives { - margin-top: 20px; - padding-bottom: 5px; - width: 177px; - height: 31px; - background: url(h_archives.gif) no-repeat; -} -.design-archives ul { - width: 150px; - list-style-type: none; -} -.design-archives ul li { - width: 150px; - padding: 3px 0 3px 25px; - border-bottom: 1px solid #311D00; -} -.design-archives ul li a{ - font-weight: bold; - color: #D07B02; - text-decoration: none; - line-height: 12px; -} -.design-archives ul li a:hover{ - color: #FAA123; -} - -/*------------------------------------------------------ -R E S O U R C E S -------------------------------------------------------*/ - -.resources { - margin-top: 20px; - padding-bottom: 5px; - width: 177px; - height: 31px; - background: url(h_resources.gif) no-repeat; -} -.zen-resources ul { - width: 150px; - list-style-type: none; -} -.zen-resources ul li { - width: 150px; - padding: 3px 0 3px 25px; - background: url(bullets.gif) 14px 8px no-repeat; - border-bottom: 1px solid #311D00; -} -.zen-resources ul li a{ - font-weight: bold; - color: #D07B02; - text-decoration: none; - line-height: 12px; -} -.zen-resources ul li a:hover{ - color: #FAA123; -} - - diff --git a/src/data/designs/188/metadata.json b/src/data/designs/188/metadata.json deleted file mode 100644 index 202ff721dbef9a85fc66170d8ce61c3faa498e95..0000000000000000000000000000000000000000 --- a/src/data/designs/188/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "188", - "url": "https://www.csszengarden.com/188", - "css_url": "https://www.csszengarden.com/188/188.css", - "description": "This design features a vibrant and modern aesthetic with a bright lime green background and a distinct vertical content layout. The use of circular motifs and playful typography adds a creative and engaging touch, while the organized layout ensures readability. The color palette is bold, with accents of blue and orange to highlight important sections, creating a dynamic and visually appealing interface.", - "categories": [ - "Modern Design", - "Creative Typography", - "Vibrant Colors", - "Web Design Aesthetics", - "Dynamic Layout" - ], - "visual_characteristics": [ - "Bright Color Palette", - "Circular Motifs", - "Playful Typography", - "Vertical Content Layout", - "Highlighted Sections" - ] -} \ No newline at end of file diff --git a/src/data/designs/188/screenshot_desktop.png b/src/data/designs/188/screenshot_desktop.png deleted file mode 100644 index ff0b68be4ef6fc53143840060d073f8e7b068ded..0000000000000000000000000000000000000000 --- a/src/data/designs/188/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:90ac8e09f33be30907e99861010bb7548f56e4962ef36935c54e4595affe02ff -size 642900 diff --git a/src/data/designs/188/screenshot_mobile.png b/src/data/designs/188/screenshot_mobile.png deleted file mode 100644 index fccec64680934f885c420f06c1c0a740121e143d..0000000000000000000000000000000000000000 --- a/src/data/designs/188/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c83f80b6d170dca076a9b8be5d9b682833db79368ea09a74183b7b5689905b1c -size 458397 diff --git a/src/data/designs/188/style.css b/src/data/designs/188/style.css deleted file mode 100644 index 2e7803026196c33f6f1c50474372ac421dd058fd..0000000000000000000000000000000000000000 --- a/src/data/designs/188/style.css +++ /dev/null @@ -1,331 +0,0 @@ -/* css Zen Garden submission 188 - 'Organica Creativa', by Eduardo Cesario, http://www.criaturacreativa.com.ar/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Eduardo Cesario */ -/* Added: November 10th, 2005 */ - - -/* 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. */ - - - - -/* css Zen Garden "Organica Creativa", by Eduardo Cesario, La Criatura Creativa. - - All images, photos and vector art present on this design, are copyrighted by Eduardo Cesario, - La Criatura Creativa. To see more of my work, you can go to http://www.criaturacreativa.com.ar - -*/ - - -a:link { - text-decoration: none; -} - -.participation a:link { - color: #FF0000; - } - -.requirements a:link { - color: #009999; - } - -a:visited { - text-decoration: none; - color: #666666; - } -a:hover { - text-decoration: underline; -} -a:active { - text-decoration: none; -} - -body { - background-color: #99CC00; - background-image: url("bg_body.gif"); - background-repeat:no-repeat; - margin: 0px; - margin-left:122px; - font-family: Tahoma, Arial, Verdana, sans-serif; - font-size: 11px; - line-height: 15px; - color: #999999; - font-weight: bold; - } - -.page-wrapper { - position:absolute; - margin-top:0px; - width: 658px; - background-image: url("bg_container.gif"); - background-repeat: repeat-y; - background-position:left; - } - -.intro { - margin-top: 250px; - } - -header h1, header h2 { - display: none; - } - -.summary { - position: absolute; - top: 1330px; - left: 415px; - width: 230px; - height: 111px; - background-image: url("sidebar_part_4.gif"); - background-repeat: no-repeat; - margin: 5px; - } - - -.summary p:nth-child(2) { - display: none; - } - -.summary p:nth-child(3) { - margin: 10px; - margin-top: 30px; - color: #FF6600; - } -.summary a { - color: #CC0000; - } - -.intro, .supporting, .sidebar { - padding: 25px; - width: 320px; - } - -.intro h3, .supporting h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.intro h3 { - background: url("title1.jpg"); - width: 313px; - height: 75px; - } - -p:nth-child(2) { - color: #666666; - } - -p:nth-child(2), p:nth-child(3), p:nth-child(4) { - margin: 0px; - padding: 0px; - margin-top: 8px; - } - -.explanation h3 { - background: url("title2.jpg"); - width: 313px; - height: 75px; - margin: 0px; - padding: 0px; - } - -.participation h3 { - background: url("title3.jpg"); - width: 313px; - height: 75px; - } - -.benefits h3 { - background: url("title4.jpg"); - width: 313px; - height: 75px; - } - -.requirements h3 { - background: url("title5.jpg"); - width: 313px; - height: 75px; - } - -.extra1 { - background-image: url("header.gif"); - background-repeat: no-repeat; - background-position:top; - position: absolute; - top: 0px; - left: 122px; - width: 658px; - height: 259px; - } - -.extra2 { - background: transparent url("photo_csspill.jpg") top left no-repeat; - position: absolute; - top: 191px; - left: 485px; - width: 295px; - height: 339px; - } - -.sidebar { - position: absolute; - top: 530px; - left: 363px; - width: 295px; - height: 755px; - z-index: 1; - } - -.sidebar .wrapper { - margin-top: 70px; - margin-left: 26px; - } - -.design-selection { - width: 230px; - height: 384px; - background-image: url("sidebar_part_1.gif"); - color:#CCCCCC; - } - -.design-selection h3 , .design-archives h3, .zen-resources h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.design-selection h3, .design-archives h3, .zen-resources h3 { - width: 229px; - height: 50px; - } - -.design-selection h3 { - background: url("sidetitle_01.gif"); - width: 229px; - height: 40px; - top: 0px; - margin: 0px; - padding: 0px; - } - -.design-selection ul, .design-archives ul, .zen-resources ul { - margin-top: 5px; - } - -.design-selection li { - border-bottom: 1px dotted #FFFFFF; - width: 170px; - margin-bottom: 8px; - list-style-position: outside; - list-style-image: url("bullet_01.jpg"); -} - -.design-selection a.designer-name { - text-transform: capitalize; -} - -.design-selection a { - display: block; - font-weight: bold; - color:#FFFFFF; -} - -.design-selection a:hover { - display: block; - font-weight: bold; - color: #3399FF; - background-color:#FFFFFF; -} - -.design-selection a.designer-name { - color: #FFCC00; - display: inline; - font-weight: bold; -} - -.design-selection a.designer-name:hover { - color: #FFCC00; - display: inline; - font-weight: bold; - background-color:#3399FF; -} - - -.design-archives a, .zen-resources a { - /*display: block;*/ - font-weight: bold; - color:#FFFFFF; -} - -.design-archives li, .zen-resources li { - width: 170px; - list-style-position: outside; -} - -.zen-resources li { - list-style-image: url("bullet_02.jpg"); -} - -.design-archives li { - list-style-image: url("bullet_03.jpg"); -} - -.design-archives { - width: 230px; - height: 169px; - background-image: url("sidebar_part_2.gif"); - } - -.design-archives h3 { - background: url("sidetitle_02.gif"); - width: 229px; - height: 40px; - top: 0px; - margin: 0px; - padding: 0px; - } - -.zen-resources { - width: 230px; - height: 156px; - background-image: url("sidebar_part_3.gif"); - } - -.zen-resources h3 { - background: url("sidetitle_03.gif"); - width: 229px; - height: 40px; - top: 0px; - margin: 0px; - padding: 0px; - } - -.requirements p:nth-child(6) { - font-variant:small-caps; - font-size: 9px; - border-bottom: 2px dotted #FFCC00; - text-align: center; - width: 470px; - } - -footer { - background: url("footer.jpg"); - background-repeat:no-repeat; - width: 470px; - height: 46px; - text-align:center; - margin-top:10px; - padding: 10px; - } - -footer a { - color: #FF9900; - } - -abbr { - font-style:italic; - } \ No newline at end of file diff --git a/src/data/designs/189/metadata.json b/src/data/designs/189/metadata.json deleted file mode 100644 index ce0a7de1ac4fef505e7a9f7972c423862f19b6cf..0000000000000000000000000000000000000000 --- a/src/data/designs/189/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "189", - "url": "https://www.csszengarden.com/189", - "css_url": "https://www.csszengarden.com/189/189.css", - "description": "This visual design features a bold and minimalistic color scheme with a stark black background contrasted by yellow text. The layout is highly structured, using horizontal and vertical alignment to guide the reader's eye through the content smoothly. Typography employs a classic serif font that adds sophistication and readability. The design creates a sense of elegance and focus, using whitespace strategically to avoid clutter, while the high contrast between background and text ensures clarity.", - "categories": [ - "Minimalism", - "Dark Theme", - "Typography-Focused", - "Professional", - "Sophisticated" - ], - "visual_characteristics": [ - "High Contrast", - "Structured Layout", - "Serif Typography", - "Whitespace Utilization", - "Vertical Navigation" - ] -} \ No newline at end of file diff --git a/src/data/designs/189/screenshot_desktop.png b/src/data/designs/189/screenshot_desktop.png deleted file mode 100644 index 1a01baa3ab3c4527243dcd8ffe3cfc5aa4b7429f..0000000000000000000000000000000000000000 --- a/src/data/designs/189/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:35116bfba1d52214f32a667dcae7417d57f5456f3b5504ab3754a169e3ed11a9 -size 403561 diff --git a/src/data/designs/189/screenshot_mobile.png b/src/data/designs/189/screenshot_mobile.png deleted file mode 100644 index 92e7dab0b9a8efe42831eb153de8ec67ba730c66..0000000000000000000000000000000000000000 --- a/src/data/designs/189/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0a1b22dec84b7ab55109e7711c4f3cbebba0342378bbc3b8f1025e79ab4642dc -size 428971 diff --git a/src/data/designs/189/style.css b/src/data/designs/189/style.css deleted file mode 100644 index 0d3195581412993741be66f2e1f72baa4220b021..0000000000000000000000000000000000000000 --- a/src/data/designs/189/style.css +++ /dev/null @@ -1,257 +0,0 @@ -/* css Zen Garden submission 189 - 'Mozart', by Andrew Brundle, http://mr-thomas-dot-com.port5.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Andrew Brundle */ -/* Added: November 10th, 2005 */ - - -/* 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. */ - - - -/*************** Main background, container & logo. *************************/ -HTML{ -margin: 0px; -padding: 0px;} - -BODY{ -margin: 0px; -padding: 0px; -background: #292421 url(bg-mozart.jpg) repeat-y fixed 50% 48%;} - -.page-wrapper{ -width: 703px; -position: absolute; left: 50%; -background: transparent url(bg-bio.gif) no-repeat 0px 50px; -margin-left: -352px;} - -header h1{ -width: 533px; -height: 173px; -margin: 0px 0px 0px 170px; -background: url(logo.jpg); -text-indent: 100%; -white-space: nowrap; -overflow: hidden;} - -header h2{ -display: none;} -/*************** End background, container & logo. *************************/ - - - - - -/*************** Fonts and decoration. *************************/ -P{ -font: 9pt Times, "Times New Roman", Georgia, Verdana, serif; -color: #cfb35b; -text-align: left; -text-indent: 10px; -padding: 3px 5px 2px 5px; -margin: 0px;} - -.preamble p:nth-child(4), .explanation p:nth-child(3), .participation p:nth-child(4), .benefits p:nth-child(2), .requirements p:nth-child(6){ -padding-bottom: 5px; -border-bottom: solid 1px #cfb35b;} -/*************** End fonts and decoration. *************************/ - - - - - -/*************** Main links & abbr. *************************/ -abbr{ -border: none;} - -A:link, A:visited{ -color: #cfb35b;} - -A:hover, A:active{ -color: #000; -background: #cfb35b;} -/*************** End main links. *************************/ - - - - - -/*************** Main content. *************************/ -.preamble{ -width: 360px; -margin: 0px 0px 25px 172px; -border-bottom: solid 1px #000; -background: #000 url(border-1.gif);} - -.preamble h3{ -margin: 0px; -height: 26px; -background: url(preamble.gif); -text-indent: 100%; -white-space: nowrap; -overflow: hidden;} - -.supporting{ -width: 365px; -margin: 0px 0px 0px 170px; -padding: 0px 0px 31px 0px; -background: url(bottom.gif) no-repeat bottom;} - -.explanation, .participation, .benefits, .requirements{ -width: 360px; -margin: 0px 0px 25px 2px; -border-bottom: solid 1px #000; -background: #000 url(border-1.gif);} - -.explanation h3, .participation h3, .benefits h3, .requirements h3{ -margin: 0px; -height: 27px; -text-indent: 100%; -white-space: nowrap; -overflow: hidden;} - -.explanation h3{ -background: url(explanation.gif);} - -.participation h3{ -background: url(participation.gif);} - -.benefits h3{ -background: url(benefits.gif);} - -.requirements h3{ -background: url(requirements.gif);} -/*************** End main content. *************************/ - - - - - -/*************** Footer division. *************************/ -footer{ -width: 360px; -text-transform: uppercase; -font-weight: bold; -text-align: center; -word-spacing: 2px; -padding: 5px 0px 0px 0px; -margin: -10px 0px 0px 2px; -border-top: solid 1px #cfb35b; -background: #000 url(border-1.gif);} html>body footer{padding: 8px 0px 0px 0px;} - -footer a:link, a:visited{ -font-size: 11pt; -text-decoration: none; -color: #cfb35b; -background: #000; -border: solid 1px #292421;} - -footer a:hover, a:active{ -color: #cfb35b; -background: #000;} -/*************** End footer division. *************************/ - - - - - -/*************** Download sample CSS & HTML files. *************************/ -.summary{ -width: 169px; -position: absolute; left: 534px; top: 173px; -padding: 5px 0px 50px 0px; -background: #000 url(border-3.gif) repeat-y right;} - -.summary p:first-child{ -display: none} - -.summary p:last-child{ -text-align: center; -text-indent: 0px; -padding: 0px 0px 10px 0px; -margin: 0px 13px 0px 10px; -background: url(divider.gif) no-repeat center bottom;} - -.summary p:last-child a:link, a:visited{ -font-weight: bold; -text-decoration: none;} - -.summary p:last-child a:hover, a:active{ -color: #000; -background: #cfb35b;} - -.extra1{ -width: 167px; -height: 1px; -background: #cfb35b; -position: absolute; top: 173px; left: 50%; -margin-left: 182px;} -/*************** End download sample CSS & HTML files. *************************/ - - - - - -/*************** Right column: navigation & graphics. *************************/ -UL{ -list-style-type: none; -margin: 0px 3px 0px 0px; -padding: 0px; -border-top: double 3px #cfb35b; -background: url(corners.gif) no-repeat center 3px;} html>body UL{background: url(corners.gif) no-repeat top;} - -li{ -padding: 0px 0px 9px 0px; -margin: 0px 10px 0px 10px; -background: url(divider.gif) no-repeat center bottom;} html>body Li{padding: 5px 0px 9px 0px;} - -.sidebar{ -position: absolute; top:240px; left: 534px; -margin: 0px; -width: 169px; -padding-bottom: 13px; -background: #000 url(border-2.gif) no-repeat bottom;} - -.sidebar .wrapper{ -font-size: 9pt; -color: #cfb35b; -text-align: center; -background: url(border-3.gif) repeat-y right;} - -.design-selection, .design-archives, .zen-resources{ -padding: 0px 0px 20px 0px;} - -.design-selection h3, .design-archives h3, .zen-resources h3{ -height: 23px; -margin: 0px; -text-indent: 100%; -white-space: nowrap; -overflow: hidden;} - -.design-selection h3{ -background: url(select.gif) no-repeat left;} - -.design-archives h3{ -background: url(archives.gif) no-repeat left;} - -.zen-resources h3{ -background: url(resources.gif) no-repeat left;} - -.sidebar li a:link, a:visited{ -font: 9pt "Times New Roman", Times, Georgia, Verdana, serif; -color: #cfb35b; -font-weight: bold; -text-decoration: none; -display: block;} - -.design-selection li a.designer-name{ -font-weight: normal; -display: inline;} - -.sidebar li a:hover, a:active{ -color: #000; -background: #cfb35b;} -/*************** End right column: navigation & graphics. *************************/ - diff --git a/src/data/designs/190/metadata.json b/src/data/designs/190/metadata.json deleted file mode 100644 index b4121b7524da37b9fbe8f701784ecf8e9624e5df..0000000000000000000000000000000000000000 --- a/src/data/designs/190/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "190", - "url": "https://www.csszengarden.com/190", - "css_url": "https://www.csszengarden.com/190/190.css", - "description": "The design features a harmonious blend of bright green and white colors with a structured layout, highlighting a list of CSS design examples. It incorporates nature-inspired elements for a fresh and inviting aesthetic while maintaining a professional and clean appearance through effective typography and organized information sections.", - "categories": [ - "Web Design", - "CSS Showcase", - "Nature-inspired", - "Educational", - "Modern" - ], - "visual_characteristics": [ - "Bright Green Palette", - "Structured Layout", - "Nature Elements", - "Clean Typography", - "Highlighting Effects" - ] -} \ No newline at end of file diff --git a/src/data/designs/190/screenshot_desktop.png b/src/data/designs/190/screenshot_desktop.png deleted file mode 100644 index 33b94b42d53e4219ca9ae56ab364a563028bdd29..0000000000000000000000000000000000000000 --- a/src/data/designs/190/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7bb810064a4606c8c037b59882788a1740fe674a242e64cd707643a7549d5fb2 -size 494590 diff --git a/src/data/designs/190/screenshot_mobile.png b/src/data/designs/190/screenshot_mobile.png deleted file mode 100644 index 9ec4cdeef3a3ec102e370d2180d51c3926218d89..0000000000000000000000000000000000000000 --- a/src/data/designs/190/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:a28b40a1582039378c58f5e6a9ab6d0aaecaa35447a39fab0cfebe00dd0e12e2 -size 404442 diff --git a/src/data/designs/190/style.css b/src/data/designs/190/style.css deleted file mode 100644 index 901f511f9110b618d0f32e02c4be6fff7f1cf803..0000000000000000000000000000000000000000 --- a/src/data/designs/190/style.css +++ /dev/null @@ -1,216 +0,0 @@ -/* css Zen Garden submission 190 - 'Lonely Flower', by Mitja Ribic, http://mitja.impresija.com/mic/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2005, Mitja Ribic */ -/* Added: November 10th, 2005 */ - - -/* 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. */ - - - -/* ----- BASICS ELEMENTS ------------------------------------------------------------------------------------------------- */ -body { - font: Tahoma; - color: #999999; - background-color: #626262; - margin: 0px; - padding: 0px; - text-align: center; - } - -p { - padding: 0px; - font: 11px Tahoma; - margin-top: 8px; - margin-bottom: 15px; - text-align: justify; - } - -h1,h2,h3 { - margin-top: 15px; - padding: 0px; - } - -h3 { - font: bold 11pt Tahoma; - margin-bottom: 0px; - color: #6AA14E; - padding-bottom: 0px; - } - -.supporting h3,.preamble h3 { - background: url(flower3.gif) no-repeat 0 0; - padding-left: 24px; - } - - -a:link { - font-weight: bold; - text-decoration: none; - color: #7F7F7F; - } - -a:visited { - font-weight: bold; - text-decoration: line-through; - color: #7F7F7F; - } - -a:hover, a:active { - text-decoration: underline; - color: #3C9A35; - } -abbr { - font-weight: bold; - border-bottom: 1px dotted #bbbbbb; - } - -/* ----- LAYOUT ------------------------------------------------------------------------------------------------------ */ -.page-wrapper { - background: url(bg_main.gif) repeat-y; - width: 569px; - margin-left: auto; - margin-right: auto; - margin-top: 0px; - padding-top: 0px; - text-align: left; - position: relative; - } - - header { - background: url(bg_header.jpg) no-repeat right top; - width: 378px; - height: 217px; - float: left; - } - - .summary { - background: url(bg_header2.jpg) no-repeat left top; - width: 180px; - height: 217px; - float: right; - } - - .preamble { - margin-left: 31px; - padding: 20px; - padding-top: 1px; - padding-bottom: 30px; - width: 306px; - clear: both; - background: url(bg_divide.gif) no-repeat bottom; - } - -.supporting { - margin-left: 31px; - padding: 0px 20px; - width: 306px; - position: relative; - } - -.preamble h3 { - margin-top: 20px; - } - -.sidebar { - width: 148px; - font: 10px Tahoma; - position: absolute; - top: 217px; - left: 389px; - margin: 0px; - padding: 0px; - } - -footer { - text-align: center; - font: bold 10px Tahoma; - padding: 20px; - text-transform: uppercase; - margin-top: 20px; - border-top: 1px dashed #dddddd; - } - -/* ----- OTHER ------------------------------------------------------------------------------------------------- */ - -.design-selection,.design-archives,.zen-resources { - padding: 0px 15px 45px 15px; - margin: 0px; - background: url(bg_divide1.gif) no-repeat bottom center; - } - -.explanation,.participation,.benefits,.requirements { - margin-top: 0px; - padding-top: 0px; - } - -.explanation h3 { - margin-top: 15px; - } - -.sidebar h3 { - font-size: 11px; - padding: 3px 3px 3px 14.5px; - color: #E98523; - margin-bottom: 10px; - margin-top: 20px; - background: url(flower2.gif) no-repeat 1px 50%; - } - -.design-selection ul, .design-archives ul, .zen-resources ul { - list-style-type: none; - padding: 0px 0px 0px 0px; - margin: 0px; - } - -.design-selection li, .design-archives li, .zen-resources li { - padding: 5px 0px; - background: url(bullet.gif) no-repeat 0 50%; - } - -.design-selection li a { - display: block; - } - -.design-selection li a.designer-name { - display: inline; - } - -.sidebar .design-selection ul li { - border-bottom: 1px solid #EEEEEE; - display: block; - padding: 5px 0 5px 15px; - } - -.sidebar .design-archives ul li { - border-bottom: 1px solid #EEEEEE; - display: block; - padding: 5px 0 5px 15px; - } - -.sidebar .zen-resources ul li { - border-bottom: 1px solid #EEEEEE; - display: block; - padding: 5px 0 5px 15px; - } - -.summary p:first-child { - display: none; - } - -header h1, header h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:last-child { - text-align: left; - color: #ffffff; - font: 11px Tahoma; - width: 120px; - padding: 145px 0px 0px 15px; - } \ No newline at end of file diff --git a/src/data/designs/191/metadata.json b/src/data/designs/191/metadata.json deleted file mode 100644 index 69d0a12b91059f2c66fc22a2ff26959c4e3f0a62..0000000000000000000000000000000000000000 --- a/src/data/designs/191/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "191", - "url": "https://www.csszengarden.com/191", - "css_url": "https://www.csszengarden.com/191/191.css", - "description": "The design showcases a classic, elegant style with a focus on typography and structured layout, featuring a cream background that enhances readability. It utilizes a two-column format with artistic flourishes and subtle paper textures, creating a sophisticated and professional appearance.", - "categories": [ - "Classic Design", - "Typography", - "Elegant Layout", - "Web Presentation" - ], - "visual_characteristics": [ - "Cream Background", - "Two-Column Format", - "Subtle Textures", - "Artistic Flourishes" - ] -} \ No newline at end of file diff --git a/src/data/designs/191/screenshot_desktop.png b/src/data/designs/191/screenshot_desktop.png deleted file mode 100644 index ea721a13e17003aa575d019e15524af97c4ae515..0000000000000000000000000000000000000000 --- a/src/data/designs/191/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:94e63e8beb583d79d06689cdb670a31b148a894efd7d631b99565b68c2027d53 -size 1157677 diff --git a/src/data/designs/191/screenshot_mobile.png b/src/data/designs/191/screenshot_mobile.png deleted file mode 100644 index 2b3c1793554fa2806c9291ad90706f4b753b62af..0000000000000000000000000000000000000000 --- a/src/data/designs/191/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7c488317f17cd7d057a5d6f23c9497f189792b709afe262ae4825ecb783c8e30 -size 772889 diff --git a/src/data/designs/191/style.css b/src/data/designs/191/style.css deleted file mode 100644 index e1dd69b3652841ff60014f977920de924c83beb8..0000000000000000000000000000000000000000 --- a/src/data/designs/191/style.css +++ /dev/null @@ -1,295 +0,0 @@ -/* css Zen Garden submission 191 - 'The Diary', by Alexander Shabuniewicz, http://eye.loveline.ru/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Alexander Shabuniewicz */ -/* Added: February 15th, 2006 */ - - -/* 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. */ - - - -body{ -font:11px/20px Georgia,"Times New Roman",Times,serif; -color:#666; -background:#00496C; -margin:0; -padding:0 -} -h1,h2,h3{ -margin:0; -padding:0 -} -a{ -color:#191970 -} -a:hover{ -color:#B22222 -} -a:visited{ -color:#696969 -} -a abbr{ -border:none -} -abbr{ -cursor:help -} -/* main */ -.page-wrapper{ -background:url("cover_bot.png") no-repeat left bottom; -left:50%; -position:absolute; -width:770px; -margin:10px 0 20px -385px; -padding-bottom:120px -} -/* intro */ -.intro{ -padding:0 30px; -background:url("cover.png") repeat-y; -padding-bottom:1px -} -header{ -margin:0 -30px; -background:url("cover_top.png") no-repeat -} -header h1{ -background:url("csszengarden.jpg") no-repeat; -height:71px; -width:268px; -position:relative; -top:50px; -left:71px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -header h2{ -background:url("thebeauty.jpg") no-repeat; -height:20px; -width:299px; -position:relative; -top:55px; -left:57px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -.summary{ -position:absolute; -top:41px; -padding:0 0 0 380px -} -.summary p:first-child{ -margin:10px 81px 0 0; -font-size:120% -} -.summary p:last-child{ -margin:0; -background:url("bookmark.jpg") no-repeat; -position:absolute; -top:-25px; -left:620px; -width:61px; -height:91px; -display:block; -padding:20px 10px; -color:#fff; -font:11px/18px "Trebuchet MS",Arial,Helvetica,sans-serif -} -.summary p:last-child a{ -color:#fff -} -.summary p:last-child a:hover{ -text-decoration:none; -color:#ccc -} -.preamble{ -padding-top:120px; -background:url("img_1.jpg") 10px 170px no-repeat; -height:1% -} -.preamble h3{ -background:url("roadto.png") no-repeat; -position:relative; -left:120px; -height:44px; -width:212px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -.preamble p{ -text-align:left; -margin-top:-44px; -font-style:italic; -padding:0 10px 35px 380px -} -/* main content */ -.supporting{ -background:url("cover.png") repeat-y; -padding:0 30px -} -.explanation{ -height:1%; -background:url("img_2.jpg") 370px 50% no-repeat -} -.explanation h3{ -background:url("sowhat.png") no-repeat; -position:relative; -left:380px; -height:45px; -width:176px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -.explanation p{ -text-align:right; -margin-top:-45px; -font-style:italic; -padding:0 380px 35px 10px -} -.participation{ -height:1%; -background:url("img_3.jpg") 5px 50% no-repeat -} -.participation h3{ -background:url("participation.png") no-repeat; -position:relative; -left:180px; -height:45px; -width:157px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -.participation p{ -text-align:left; -margin-top:-45px; -font-style:italic; -padding:0 10px 35px 380px -} -.benefits{ -background:url("img_4.png") 380px 50% no-repeat -} -.benefits h3{ -background:url("benefits.png") no-repeat; -position:relative; -left:380px; -height:47px; -width:150px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -.benefits p{ -text-align:right; -margin-top:-47px; -font-style:italic; -padding:0 380px 35px 10px -} -.requirements h3{ -background:url("requirements.png") no-repeat; -position:relative; -left:180px; -height:46px; -width:150px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -.requirements p{ -text-align:left; -margin-top:-46px; -font-style:italic; -padding:0 10px 35px 380px -} -footer{ -padding-left:380px; -text-align:center -} -footer a{ -color:#666; -text-decoration:none; -border:1px solid #fffcf1; -padding:5px -} -footer a:hover{ -border:1px solid #ccc -} -/* notes */ -.sidebar{ -font-size:120%; -font-style:italic; -position:absolute; -width:300px; -bottom:70px; -left:80px -} -.sidebar h3.select{ -width:142px; -height:29px; -background:url("select.png") no-repeat; -position:relative; -left:8px; -top:8px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -.sidebar h3.archives{ -width:74px; -height:25px; -background:url("archives.png") no-repeat; -position:relative; -left:8px; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} -.sidebar ul{ -margin:10px 5px 10px 40px; -padding:0 5px -} -.sidebar ul li{ -list-style-type:none; -list-style-image:none -} -.design-selection ul li{ -list-style:outside url("bull.png") -} -.sidebar ul li a{ -text-decoration:none -} -.zen-resources{ -font:16px/22px "Trebuchet MS",Arial,Helvetica,sans-serif; -display:block; -background:url("notes.jpg") no-repeat; -padding:20px 15px; -width:252px -} -.zen-resources ul{ -margin:30px 20px 50px 25px -} -.zen-resources h3.resources{ -width:85px; -height:22px; -background:url("resources.png") no-repeat; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} diff --git a/src/data/designs/192/metadata.json b/src/data/designs/192/metadata.json deleted file mode 100644 index 1b527f70e91043a261e8d6c8f72750ee984cf291..0000000000000000000000000000000000000000 --- a/src/data/designs/192/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "192", - "url": "https://www.csszengarden.com/192", - "css_url": "https://www.csszengarden.com/192/192.css", - "description": "The design captures a vintage, parchment-like aesthetic with an emphasis on typography and hierarchical structure, creating an old-world, manuscript feel. With a muted color palette and intricate detailing, it effectively draws attention to the text content, enhancing readability and focus. The sidebar and border accents add to the design's ornate character, while the use of decorative fonts and layout ensures a coherent thematic experience throughout.", - "categories": [ - "vintage", - "typography-focused", - "decorative", - "manuscript-style", - "dark theme" - ], - "visual_characteristics": [ - "ornate fonts", - "parchment texture", - "sepia tones", - "structured layout", - "decorative borders" - ] -} \ No newline at end of file diff --git a/src/data/designs/192/screenshot_desktop.png b/src/data/designs/192/screenshot_desktop.png deleted file mode 100644 index 48cbf9a354dda724e61798496ab75e412005dbd5..0000000000000000000000000000000000000000 --- a/src/data/designs/192/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:132e7f6203080ce08935b48c46a2c5b90270697e0986799689c839b415750587 -size 1470607 diff --git a/src/data/designs/192/screenshot_mobile.png b/src/data/designs/192/screenshot_mobile.png deleted file mode 100644 index 9a8e475a4f1604edfb8f6d4a93d309731d2e6138..0000000000000000000000000000000000000000 --- a/src/data/designs/192/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ace637ed1939e83953769974f3cbac3eb8fadcfad8e5a4dd5c4862c7e96bec18 -size 1271586 diff --git a/src/data/designs/192/style.css b/src/data/designs/192/style.css deleted file mode 100644 index 5ad0113cc7d9153d41d1249304e8d3aee74c0a61..0000000000000000000000000000000000000000 --- a/src/data/designs/192/style.css +++ /dev/null @@ -1,234 +0,0 @@ -/* css Zen Garden submission 192 - 'LuGoZee', by Viallon Pierre-Antoine, http://www.accxs.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Viallon Pierre-Antoine */ -/* Added: February 15th, 2006 */ - - -/* 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. */ - - - -/* CSS Document */ -body { - font-family:Georgia, Garamond, serif; - font-size:12px; - color:#000001; - background-color:#000000; - background-image:url(mur_fond.jpg); - background-position:top left; - background-repeat:repeat-x; - } -h1 { - margin:0px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -h2 { - margin:30px 0px 0px 0px; - padding:25px 0px 0px 0px; - height:75px; - text-align:center; - font-size:16px; - - } - -h3 { - color:#4A0000; - padding:30px 0px 0px 42px; - margin:10px 0px 0px 0px; - height:53px; - font-size:16px; - text-transform:uppercase; - } -h3:first-letter {font-size:2px;} -p { - margin:0px; - } -a { - color:#960000; - text-decoration:none; - font-weight:bold; - } -a:hover { - text-decoration:underline; - } - - - -abbr { - text-decoration:overline; - color:#9A7339; - } - -.page-wrapper { - position:absolute; - top:0px; - left:215px; - width:600px; - background:url(fond-centre.jpg); - background-position:top left; - background-repeat:repeat-y; - z-index:10; - } - -.intro { - background:url(H1.jpg); - background-position:top left; - background-repeat:no-repeat; - width:550px; - border-top:1px solid black; - margin:0px; - } - -.summary { - width:350px; - padding:0px 0px 0px 50px; - text-align:center; - margin-top:-25px; - } - -.explanation, .benefits { - padding:0px 0px 0px 15px; - width:385px; - margin-top:15px; - } - -.preamble { - padding:0px 0px 0px 15px; - width:385px; - margin:15px 0 0 15px; - } - -.supporting { - padding:0px 15px 0px 15px; - } -.benefits, .participation { - width:500px; - padding:0px 0px 0px 15px; -} -.preamble H3 { - background-image:url(T.gif); - background-repeat:no-repeat; - background-position:top left; - } - -.explanation H3 { - background-image:url(S.gif); - background-repeat:no-repeat; - background-position:top left; - } -.participation H3 { - background-image:url(P.gif); - background-repeat:no-repeat; - background-position:top left; - } -.benefits H3 { - background-image:url(B.gif); - background-repeat:no-repeat; - background-position:top left; - } - -.sidebar {position:absolute; - top:0px; - left:463px; - z-index:15; - background:url("menu_droite_fd_center.jpg") top left repeat-y; - width:230px; - font-family:"Courier New", Courier, serif; - } -.sidebar H3 { - margin:0px 0px 0px 10px; - padding:0px; - text-align:center; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.sidebar .select { - background:url(select_design.gif) top right no-repeat; - width:100px; - height:65px; - margin-top:90px; - } -.sidebar .archives { - background:url(archives.gif) top center no-repeat; - width:100px; - height:65px; - } -.sidebar .resources{ - background:url(resources.gif) top center no-repeat; - width:100px; - height:40px; - } - -.sidebar A { - color:#9C5600; - text-decoration:none;} - -.sidebar A:HOVER { - color:#FF8D00; - } - -.sidebar UL {margin:-5px 42px 0 25px; - list-style-image:url(clou.gif); - padding:0; - } -.sidebar UL LI {margin:-5px 0 0 0; padding-top:0} -.sidebar .wrapper { - background:URL("menu_droite_fd_top.jpg") top left no-repeat; - width:210px; - border-top:1px solid black; - margin:0 0px 0px 0px; - color:#FFFFFF; - } - -.zen-resources { - background:URL("menu_droite_fd_bottom.jpg") bottom left no-repeat; - margin:0 0 0 0; - padding: 0 0 20px 0; - } - -.requirements { - background:url(author.jpg) bottom left no-repeat; - width:420px; - padding:0px 70px 125px 70px; - margin:0px 0px 0px -15px; - } - -.requirements H3 { - background:url(R.gif) top left no-repeat; - } - -footer A{color:#D6AE73} - -footer { - margin-top:-100px; - text-align:center; - height:75px; - } - -.extra1 { - background:url(bella.jpg) top left no-repeat; - width:119px; - height:600px; - position:absolute; - left:90px; - top:0px; - } -.extra2 { - background:url(candel.jpg) top left no-repeat; - width:126px; - height:600px; - position:absolute; - top:0px; - left:775px; - z-index:2; - } \ No newline at end of file diff --git a/src/data/designs/193/metadata.json b/src/data/designs/193/metadata.json deleted file mode 100644 index 735ab3c5edb4b24da9127bba4cac24506e4afddf..0000000000000000000000000000000000000000 --- a/src/data/designs/193/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "193", - "url": "https://www.csszengarden.com/193", - "css_url": "https://www.csszengarden.com/193/193.css", - "description": "The design showcases a retro, pixel-art inspired theme with a meticulous attention to detail, creating a visually appealing and whimsical aesthetic. Featuring an intricate illustration at the top, the design exhibits a creative interplay between text and art. The mixed typography adds to the vintage feel, while the structured layout ensures readability and organized content display.", - "categories": [ - "Pixel Art", - "Typography", - "Nostalgia", - "Retro", - "Illustration" - ], - "visual_characteristics": [ - "Pixelated Illustrations", - "Mixed Typography", - "Neutral Color Palette", - "Structured Layout", - "Decorative Elements" - ] -} \ No newline at end of file diff --git a/src/data/designs/193/screenshot_desktop.png b/src/data/designs/193/screenshot_desktop.png deleted file mode 100644 index 6471b57adcd636c27205ac12ce48e76f3caa0ad4..0000000000000000000000000000000000000000 --- a/src/data/designs/193/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:de6e2d7de4ed7aa318eaff28561313f27421b4f571facc2321c22f11fe31af42 -size 588100 diff --git a/src/data/designs/193/screenshot_mobile.png b/src/data/designs/193/screenshot_mobile.png deleted file mode 100644 index c7e461f259bdefb5bf5cb602514877dd7c19648c..0000000000000000000000000000000000000000 --- a/src/data/designs/193/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:63ad5d1115eebf003ffddeff0dd0071915bb54c249e6ff753d32408272521479 -size 504439 diff --git a/src/data/designs/193/style.css b/src/data/designs/193/style.css deleted file mode 100644 index 8ee6cec1c21e85ec3300a288a988f1679c8fc527..0000000000000000000000000000000000000000 --- a/src/data/designs/193/style.css +++ /dev/null @@ -1,178 +0,0 @@ -/* css Zen Garden submission 193 - 'Leggo My Ego', by Jon Tan, http://www.gr0w.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Jon Tan */ -/* Added: February 15th, 2006 */ - - -/* 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. */ - - - -/* -css Zen Garden 'Leggo My Ego' By Jon Tan - -Knowledge is like Lego: Bits of data. Design is how you present the bits. Wisdom is understanding why. - -It's autumn in the Zen Garden. CSS is bedding in to the World Wide Web for the duration. Bits of data are falling through the community on the breeze. The debates still flow beneath the bridge that the ancients built between design and structure but as the sun rises, the message is clear: CSS is beautiful. - -I stand on the shoulders of those who came before. There are too many to list here but if you search for mezzoblue, stopdesign, tantek, zeldman, meyerweb, southcot, pwhitrow, joe clark, alistapart, carter and cone or css you will probabaly find most of them. Thank you to them all. -*/ - -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ - - -/* start the fun */ - -body { -margin: 0 0 30px 0; -padding:0; -border:0; -font: 80% tahoma,sans-serif; -color: #7A745A; -line-height:1.5em; -background: #fff url(bg.gif) top center no-repeat; -text-align:center; -} - -/* layers */ - -.page-wrapper{ -position:relative; -width:750px; -margin: 270px auto 0 auto; -background: url(bg_container.gif) bottom left no-repeat; -} - -.supporting{ -margin: 0 0 0 405px; -text-align:left; -} - -.preamble{ -position:absolute; -top:120px; -left:0; -width:170px; -text-align:left; -} - -.sidebar{ -position:absolute; -top:120px; -left:205px; -width:200px; -text-align:left; -} - -footer{ -height:3.5em; -background: url(bg_p_p2.gif) right no-repeat; -margin-top:2em; -} - -/* display:none content */ - -.intro h2, .summary p:first-child{display:none;} - -/* headers and paragraphs */ - -h1, .explanation h3, .preamble h3, .supporting h3, .sidebar h3 - {margin:0;text-indent: -9999px;} - -h1{ -height:120px; -background: url(bg_h1.gif) no-repeat; -} - -h3 {font-size:150%} -.explanation h3 {height:6em;background: url(bg_h3_ex.gif) no-repeat;} -.preamble h3 {height:220px;background: url(bg_h3_preamble.gif) top no-repeat;} -.participation h3 {height:30px;background: url(bg_h3_participation.gif) no-repeat;} -.benefits h3 {height:30px;background: url(bg_h3_benefits.gif) no-repeat;} -.requirements h3 {height:30px;background: url(bg_h3_requirements.gif) no-repeat;} -h3.select {height:120px;background: url(bg_h3_select.gif) no-repeat;} -h3.archives {height:30px;background: url(bg_h3_archives.gif) no-repeat;} -h3.resources {height:30px;background: url(bg_h3_resources.gif) no-repeat;} - -p{ -letter-spacing:+0.05em; -word-spacing:0.1em; -} -.summary p:last-child { -float:right; -width:70px; -height:4em; -margin:75px 0 0 0; -padding-left:40px; -text-align:right; -font: 80% tahoma,sans-serif; -line-height:1.1em; -letter-spacing:0; -word-spacing:0; -background: url(bg_p_p2.gif) top left no-repeat; -} -.benefits p, .preamble p{ -letter-spacing:0; -font:italic 120% georgia,serif; -} - -/* hyperlinks and lists*/ - -a{ -color:#d25c3e; -text-decoration:none; -border-bottom:1px dotted #d25c3e; -} -a:hover{ -color:#0cf; -text-decoration:none; -border-bottom:1px solid #ddd1a8; -} - -/*So the IE audience sees somthing visual for abbrs */ -abbr{cursor:help;border-bottom:1px dotted #ccc;} - -.design-selection a{ -font:normal 100% tahoma,sans-serif; -text-transform:uppercase; -display:block; -text-decoration:none; -background: #fff0f0; -padding-left:0.25em; -margin-left:-0.25em; -border-bottom:0; -} -.design-selection a:hover{ -background:#f3efe0; -} - -.design-selection a.designer-name{ -font: italic 100% georgia,serif; -text-transform:none; -color:#d25c3e; -display:inline; -padding-left:0; -margin-left:0; -background:none; -} -.design-selection a.designer-name:hover{ -color:#0cf; -background:none; -border-bottom:1px solid #ddd1a8; -} - -.sidebar ul{ -list-style:none; -padding:0; -margin-right:40px; -margin-left:0.5em; -} - -.sidebar ul li{ -margin: 0.5em 0; -padding: 0.3em 0; -font: normal 90% tahoma,serif; -} \ No newline at end of file diff --git a/src/data/designs/194/metadata.json b/src/data/designs/194/metadata.json deleted file mode 100644 index cbf876f376490cb8b727de02ee935838795cbfbe..0000000000000000000000000000000000000000 --- a/src/data/designs/194/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "194", - "url": "https://www.csszengarden.com/194", - "css_url": "https://www.csszengarden.com/194/194.css", - "description": "This design exudes a minimalist elegance with a muted, earthy color palette and a clean layout, embodying a sense of calm and sophistication. The subtle use of textures and classic serif typography enhances the refined aesthetic, while the centered alignment and generous spacing contribute to a relaxed readability. The incorporation of a delicate floral illustration adds a touch of organic charm, making the design feel both timeless and inviting.", - "categories": [ - "Minimalism", - "Elegant", - "Organic", - "Sophisticated", - "Classic" - ], - "visual_characteristics": [ - "Muted Color Palette", - "Serif Typography", - "Centered Layout", - "Generous Spacing", - "Floral Illustration" - ] -} \ No newline at end of file diff --git a/src/data/designs/194/screenshot_desktop.png b/src/data/designs/194/screenshot_desktop.png deleted file mode 100644 index 86d36b1253d97abde864667936ee7fbfef6dc3da..0000000000000000000000000000000000000000 --- a/src/data/designs/194/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:57dbe9833a5d30cc8afbdc4e45bf48ac2f5021a28e33e20fcd2bce410dd089cb -size 1151653 diff --git a/src/data/designs/194/screenshot_mobile.png b/src/data/designs/194/screenshot_mobile.png deleted file mode 100644 index cc213827f8400495ac1396443a96871dfe552812..0000000000000000000000000000000000000000 --- a/src/data/designs/194/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4b20abcb90fee2f13a32106ecc589e665df84e1bb2de0fed9a69a05823f5ab4f -size 1098726 diff --git a/src/data/designs/194/style.css b/src/data/designs/194/style.css deleted file mode 100644 index e07c75634d78a0c2ca6ef5949d36edcb182decef..0000000000000000000000000000000000000000 --- a/src/data/designs/194/style.css +++ /dev/null @@ -1,332 +0,0 @@ -/* css Zen Garden submission 194 - 'Dark Rose', by Rose Fu, http://www.rosefu.net/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Rose Fu */ -/* Added: February 15th, 2006 */ - - -/* 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. */ - - -/* ~~~ General Properties ~~~ */ - -* { - padding: 0; - margin: 0; - } - -body { - color: #64645A; - background: #A09B7D url(bg.jpg) repeat; - font: normal 70% Georgia, Palatino, Times, Times New Roman, serif; - color: #666; - } - -a:link { - text-decoration: none; - border-bottom: 1px solid #BEB9AA; - color: #968C5A; - } - -a:visited { - text-decoration: none; - border-bottom: 1px solid #BEB9AA; - color: #B3AE94; - } - -a:hover { - text-decoration: none; - border-bottom: 1px solid #AAA08C; - color: #AA7846; - } - -a:active { - text-decoration: none; - border-bottom: 1px solid #AAA08C; - color: #8C7846; - } - -/* ~~~ Text Properties ~~~ */ - -p { - font: 115% Georgia, Palatino, Times, Times New Roman, serif; - line-height: 1.5; - margin-top: 0px; - text-align: justify; - padding-left: 14px; - padding-bottom: 10px; - padding-right: 100px; - } - -p:nth-child(6) { - padding-bottom: 40px; - } - -h3 { - text-indent: -1000em; - } - -abbr { - font-style: italic; - border: 0px; - cursor: help; - } - -/* ~~~ Div Properties ~~~ */ - -.page-wrapper { - background: url(back.jpg) center center repeat-y; - width: 750px; - height: auto; - margin-left: auto; - margin-right: auto; - } - -.intro { - display: block; - } - -header { - background: url(header.jpg) no-repeat; - position: relative; - width: 660px; - height: 175px; - top: 0px; - left: 80px; - text-indent: -1000em; - } - -.summary p:first-child { - background: url(summary.jpg) no-repeat; - left: 80px; - position: relative; - width: 660px; - height: 155px; - text-indent: -1000em; - } - -.summary p:last-child { - background: url(download.jpg) top right no-repeat; - font: 100% Georgia, Times, Times New Roman, serif; - line-height: 20px; - position: absolute; - top: 1500px; - display: block; - width: 100px; - height: 340px; - padding: 80px 35px 0 105px; - z-index: 5; - - text-align: center; - } - -.preamble { - background: url(preamble.jpg) no-repeat; - position: relative; - top: -10px; - left: 240px; - width: 500px; - height: 540px; - } - -.supporting { - background: url(paper.jpg) repeat-y; - display: block; - position: relative; - top: 0px; - left: 92px; - margin-top: -270px; - width: 500px; - height: auto; - padding-left: 150px; - } - -/* ~~~ Header Properties ~~~ */ - -.preamble h3 { - background: url(preamble.gif) no-repeat; - position: relative; - width: 306px; - height: 50px; - top: 0px; - left: 0px; - } - -.explanation h3 { - background: url(explanation.gif) no-repeat; - position: relative; - width: 250px; - height: 50px; - top: 0px; - left: 0px; - } - -.participation h3 { - background: url(participation.gif) no-repeat; - position: relative; - width: 164px; - height: 50px; - top: 0px; - left: 0px; - } - -.benefits h3 { - background: url(benefits.gif) no-repeat; - position: relative; - width: 100px; - height: 50px; - top: 0px; - left: 0px; - } - -.requirements h3 { - background: url(requirements.gif) no-repeat; - position: relative; - width: 157px; - height: 50px; - top: 0px; - left: 0px; - } - -/* ~~~ List Properties ~~~ */ - -.sidebar { - position: absolute; - top: 330px; - } - -.sidebar ul { - margin-top: 35px; - list-style-type: none; - } - -.sidebar ul li { - list-style-image: url(button.gif); - font-size: 90%; - width: 120px; - margin-left: 15px; - margin-top: 5px; - } - -.sidebar ul li a { - display: block; - font-size: 110%; - width: 120px; - border: 0px; - line-height: 15px; - } - -.sidebar ul li a:hover { - text-decoration: underline; - } - -.design-selection { - background: url(lselect.jpg) no-repeat; - width: 210px; - height: 540px; - padding-left: 25px; - position: relative; - left: 30px; - } - -.design-selection h3.select { - background: url(select.gif) no-repeat; - display: block; - width: 106px; - height: 31px; - position: relative; - top: 25px; - left: 15px; - } - -.design-selection li a.designer-name { - font: 100% Georgia, Times, Times New Roman, serif; - text-transform: none; - display: inline; - color: #64645A; - } - -.design-selection ul li a:hovera.designer-name { - color: #8C7846; - text-decoration: underline; - } - -.design-archives { - background: url(archives.jpg) no-repeat; - width: 210px; - height: 200px; - position: relative; - left: 30px; - padding-left: 45px; - padding-top: 35px; - } - -.design-archives ul li a { - font: 110% Georgia, Times, Times New Roman, serif; - line-height: 17px; - } - -.design-archives h3.archives { - background: url(archives.gif) no-repeat; - display: block; - width: 145px; - height: 145px; - position: absolute; - top: -100px; - left: 20px; - text-indent: -1000em; - } - -.design-archives h3.resources { - background: url(resources.gif) no-repeat; - display: block; - width: 69px; - height: 31px; - position: relative; - top: 25px; - left: 30px; - } - -.zen-resources { - background: url(resources.jpg) no-repeat; - width: 210px; - height: 470px; - position: relative; - left: 30px; - padding-left: 45px; - } - -.zen-resources ul li a { - font: 110% Georgia, Times, Times New Roman, serif; - line-height: 17px; - } - -.zen-resources h3.resources { - background: url(resources.gif) no-repeat; - display: block; - width: 69px; - height: 31px; - position: relative; - top: 25px; - left: 30px; - } - -/* ~~~ Misc Properties ~~~ */ - -footer { - display: block; - background: url(footer.jpg) no-repeat; - width: 400px; - height: 45px; - font: 11px Verdana, Tahoma, Arial, Helvetica, sans-serif; - line-height: 45px; - text-align: center; - text-transform: uppercase; - padding-bottom: 20px; - } - -.extra1, .extra2, .extra3, .extra4, .extra5, .extra6 { - display: none; - } diff --git a/src/data/designs/195/metadata.json b/src/data/designs/195/metadata.json deleted file mode 100644 index 999ccd6b544e1bc8f310c41967cf00dc21bf01a0..0000000000000000000000000000000000000000 --- a/src/data/designs/195/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "195", - "url": "https://www.csszengarden.com/195", - "css_url": "https://www.csszengarden.com/195/195.css", - "description": "The design exemplifies a clean and minimalistic style, highlighting simplicity and readability through a dominance of white space and light, pastel background textures. It integrates a single-column layout with a sidebar for easy navigation, using a consistent and harmonious color palette composed mainly of soft greens, oranges, and muted text colors to ensure a smooth visual experience.", - "categories": [ - "Minimalist", - "Web Design", - "Modern", - "Typography" - ], - "visual_characteristics": [ - "Simple Layout", - "Light Color Palette", - "Ample White Space", - "Readable Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/195/screenshot_desktop.png b/src/data/designs/195/screenshot_desktop.png deleted file mode 100644 index 25acdf9f9318f00bab42fb9fa2dd355ece1d9c2e..0000000000000000000000000000000000000000 --- a/src/data/designs/195/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:36e44dcb5ec978040e3c31ece55672f6d2a332d6ade5e7881ef2a6552147fd77 -size 388999 diff --git a/src/data/designs/195/screenshot_mobile.png b/src/data/designs/195/screenshot_mobile.png deleted file mode 100644 index 0e052840a71e4188e35a4233c4d0f525da3bcf0a..0000000000000000000000000000000000000000 --- a/src/data/designs/195/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9206bec47556d9594e69c1ee31b6a7ba5922862210e67d7ef5f506ebdfb1298d -size 335909 diff --git a/src/data/designs/195/style.css b/src/data/designs/195/style.css deleted file mode 100644 index e425015a6aa348b6a21aed921cd95c42ad3a7d47..0000000000000000000000000000000000000000 --- a/src/data/designs/195/style.css +++ /dev/null @@ -1,263 +0,0 @@ -/* css Zen Garden submission 195 - 'Dazzling Beauty', by Deny Sri Supriyono, http://blog.denysri.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Deny Sri Supriyono */ -/* Added: February 15th, 2006 */ - - -/* 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. */ - - - -* { - margin: 0; - padding: 0; -} -html { - background: transparent url(htmlbg.jpg) repeat-x; -} - -body { - margin: 0; - padding: 0; - font: normal 0.7em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif; - color: #7c7c7c; - text-align: center; - background: transparent url(bodybg.jpg) no-repeat center top; -} - -.page-wrapper { - margin: 0px auto; - padding: 0; - width: 696px; - border: none; - text-align: left; - background-image: url(footerbg.jpg); - background-repeat: no-repeat; - background-position: bottom; - padding-bottom: 70px; -} - -header, -.preamble h3, -.explanation h3, -.participation h3, -.benefits h3, -.requirements h3, -.design-selection h3, -.design-archives h3, -.zen-resources h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:first-child, -.extra3, -.extra4, -.extra5, -.extra6 { - display:none; -} - -a, a:visited { - text-decoration: none; - color: #D7661C; - border-bottom: 1px dotted #ccc; -} - -a:hover { - text-decoration: none; - color: #94AB36; - border-bottom: 1px solid #ccc; -} - -abbr { - text-decoration: none; - color: #D7661C; - border-bottom: 1px dotted #ccc; - cursor: help; -} - -p { - margin-bottom: 10px; -} - -.summary p:last-child { - padding-top: 189px; - margin-left: 430px; - font: normal 0.9em/0.9em Arial, Tahoma, Georgia, sans-serif; - letter-spacing: -1px; - color: #C3A176; - text-transform: uppercase; - width: 220px; -} - -.sidebar{ - position: absolute; - left:auto; - right:auto; - top: 385px; - margin-left: 410px; - width: 196px; - background-image: url(bgsidebar.jpg); - background-repeat: no-repeat; - background-position: left top; - padding-left: 30px; -} - -.sidebar .wrapper{ - padding: 0; - margin: 0; - background-image: url(extraflower.jpg); - background-repeat: no-repeat; - background-position: right bottom; - padding-bottom: 250px; -} - -.sidebar ul { - text-align: left; - list-style: none; - margin: 0; - padding: 0; -} - -.sidebar ul li{ - margin: 0; - padding: 3px 0 3px 10px; - border-bottom: 1px solid #ECEFD7; -} - -.sidebar ul li a, .sidebar ul li a:visited { - border-bottom: none; -} - -.sidebar ul li a:hover { - color: #94AB36; -} - -.design-selection { - font-size: 0.9em; -} - -.design-selection ul li { - background: transparent url(ikonli.jpg) no-repeat 0% 25%; - padding: 3px 0 3px 25px; -} - -.design-selection a { - display: block; - font-size: 1.1em; - color: #789B51; -} - -.design-selection a.designer-name { - display:inline; - line-height:5px; - margin:0; - padding:0; - font: normal 1.0em/0.9em Verdana, Arial, Tahoma, sans-serif; - color: #B9B9B9; - letter-spacing: -1px; -} - -.preamble, .explanation, .participation, .benefits, .requirements{ - top: 150px; - position: relative; - left: 63px; - color: #B0A77E; - width: 340px; - padding-bottom: 29px; - text-align: justify; -} - -.preamble h3 { - background-image: url(theroadto.jpg); - background-repeat: no-repeat; - background-position: left; - width: 340px; - height: 38px; -} - -.explanation h3 { - background-image: url(sowhatgitulowh.jpg); - background-repeat: no-repeat; - background-position: left; - width: 340px; - height: 38px; -} - -.participation h3 { - background-image: url(participation.jpg); - background-repeat: no-repeat; - background-position: left; - width: 340px; - height: 38px; -} - -.benefits h3 { - background-image: url(benefits.jpg); - background-repeat: no-repeat; - background-position: left; - width: 340px; - height: 38px; -} - -.requirements h3 { - background-image: url(requirements.jpg); - background-repeat: no-repeat; - background-position: left; - width: 340px; - height: 38px; -} - -.design-selection, .design-archives { - margin-bottom: 20px; -} - -.design-selection h3 { - background-image: url(selectadesign.jpg); - background-repeat: no-repeat; - background-position: left; - width: 196px; - height: 40px; -} - -.design-archives h3 { - background-image: url(archives.jpg); - background-repeat: no-repeat; - background-position: left; - width: 196px; - height: 40px; -} - -.zen-resources h3 { - background-image: url(resources.jpg); - background-repeat: no-repeat; - background-position: left; - width: 196px; - height: 40px; -} - -footer{ - text-align: left; - padding-left: 63px; - padding-top: 140px; -} - -footer a, footer a:visited { - padding: 5px; - border: 1px solid #f4f4f4; - background-color: #fff; -} - -footer a:hover { - padding: 5px; - border: 1px solid #993300; - background-color: #D94904; - color: #fff; -} - -.extra1, .extra2, .extra3, .extra4, .extra5, .extra6 { display:none } \ No newline at end of file diff --git a/src/data/designs/196/metadata.json b/src/data/designs/196/metadata.json deleted file mode 100644 index 53feb07035c56fa3399490ec0f544aaba073453e..0000000000000000000000000000000000000000 --- a/src/data/designs/196/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "196", - "url": "https://www.csszengarden.com/196", - "css_url": "https://www.csszengarden.com/196/196.css", - "description": "The design showcases a minimalist and elegant style, featuring a soft color palette of whites and greens that conveys a sense of tranquility. The layout is clean and orderly, with a strong focus on typography, using a mix of serif and sans-serif fonts to create a harmonious reading experience. The background incorporates subtle floral imagery to enhance the serene atmosphere, while the content is neatly organized into columns for easy navigation.", - "categories": [ - "minimalist", - "elegant", - "informative", - "serene", - "classic" - ], - "visual_characteristics": [ - "soft color palette", - "clean typography", - "floral background", - "columnar layout", - "serif and sans-serif mix" - ] -} \ No newline at end of file diff --git a/src/data/designs/196/screenshot_desktop.png b/src/data/designs/196/screenshot_desktop.png deleted file mode 100644 index 5aad529f2ca20db6e2a67aaf9df8b92ed45ffe68..0000000000000000000000000000000000000000 --- a/src/data/designs/196/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:9ba9904a2618282f66c575109453515787cce77746f6bc34d07d7faf9fcd040a -size 464185 diff --git a/src/data/designs/196/screenshot_mobile.png b/src/data/designs/196/screenshot_mobile.png deleted file mode 100644 index d890a2b1370645020c06f0aed062d2220c279db5..0000000000000000000000000000000000000000 --- a/src/data/designs/196/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:745e1550efc441b3eaeaff85f1469d62dcf542dcc348a32189c726d3e73b15e7 -size 333211 diff --git a/src/data/designs/196/style.css b/src/data/designs/196/style.css deleted file mode 100644 index 52cfc14453e48d3b4830710b2b38bc60a1f72a0f..0000000000000000000000000000000000000000 --- a/src/data/designs/196/style.css +++ /dev/null @@ -1,244 +0,0 @@ -/* css Zen Garden submission 196 - 'Elegance in Simplicity', by Mani Sheriar, http://www.manisheriar.com/blog/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Mani Sheriar */ -/* Added: December 1st, 2006 */ - - -/* 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. */ - - - -* { - margin:0; - padding:0; - } -body { - background:#fff; - padding:0 0 20px 0; - } -a { - color:#8fb34f; - font-weight:bold; - text-decoration:none; - } -a:hover { - border:1px solid #d7d6b7; - border-right:none; - border-left:none; - } -abbr, abbr { - cursor:help; - } -.page-wrapper { - position:relative; - width:781px; - left:50%; - margin-left:-390px; - background:#fff url(bg.gif) repeat-y center; - overflow:auto; - z-index:100; - } -.intro { - position:relative; - padding-bottom:14px; - height:auto !important; - height:1%; - } -header { - position:relative; - width:781px; - height:245px; - margin:0 auto; - background:url(header.jpg) no-repeat right; - } -header h1, -header h2 { - display:none; - } -h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.summary p:first-child { - display:none; - } -.summary p:last-child { - font:normal 12px/12px Georgia,"Times New Roman",Times, serif; - color:#a8a781; - position:absolute; - bottom:0px; - left:58px; - background:url(download.gif) no-repeat left center; - text-indent:14px; - } -.summary p:last-child a { - display:inline; - position:relative; - } -.preamble { - width:440px; - margin-left:42px; - font:normal 12px/18px Georgia,"Times New Roman",Times, serif; - font-style:italic; - color:#a8a781; - margin-top:19px; - } -.preamble h3 { - width:302px; - height:14px; - background:url(enlightenment.gif); - } -.preamble p { - margin:18px 0 18px 17px; - letter-spacing:0.03em; - text-align:justify; - } -.supporting { - width:430px; - font:normal 11px/16px "Lucida Grande","Lucida Sans","Lucida Sans Unicode",Lucida,Arial,Helvetica,sans-serif; - color:#a1a07b; - margin:55px 0 0 59px; - padding-bottom:26px !important; - padding-bottom:0; - text-align:justify; - } -.explanation h3 { - width:424px; - height:18px; - background:url(about.gif); - } -.participation h3 { - width:424px; - height:22px; - background:url(participation.gif); - margin:25px 0 -5px 0; - } -.benefits h3 { - width:424px; - height:22px; - background:url(benefits.gif); - margin:25px 0 -5px 0; - } -.requirements h3 { - width:424px; - height:22px; - background:url(requirements.gif); - margin:25px 0 -5px 0; - } -.supporting p { - margin:16px 0; - } -.requirements { - margin-bottom:37px; - } -footer { - display:inline; - float:right; - background:url(check.gif) no-repeat left center; - padding-left:18px; - margin-bottom:-26px; - } -.extra1 { - position:relative; - left:50%; - margin-left:-390px; - background:url(bottom.gif); - width:781px; - height:42px; - } -.sidebar { - width:196px; - position:absolute; - top:284px; - right:59px; - } -.sidebar h3.select { - width:196px; - height:34px; - background:url(select.gif); - } -.sidebar h3.archives { - width:196px; - height:25px; - background:url(archives.gif); - } -.sidebar h3.resources { - width:196px; - height:12px; - background:url(resources.gif); - margin-top:30px; - } -.sidebar ul { - list-style-image:url(blt_sm.gif); - margin:5px 0 20px 23px; - font:normal 11px/16px "Lucida Grande","Lucida Sans","Lucida Sans Unicode",Lucida,Arial,Helvetica,sans-serif; - color:#bcbb93; - } -.sidebar ul li { - margin-bottom:8px; - } -.sidebar ul a { - color:#a9a867; - font-weight:normal; - font-style:italic; - font-size:12px; - text-transform:lowercase; - } -.sidebar ul a:hover { - color:#b2d378; - border:none; - } -.sidebar .design-selection ul { - list-style-image:url(blt_lrg.gif); - margin:5px 0 20px 23px; - font:normal 11px/16px "Lucida Grande","Lucida Sans","Lucida Sans Unicode",Lucida,Arial,Helvetica,sans-serif; - color:#bcbb93; - } -.sidebar .design-selection ul a { - display:block; - color:#a9a867; - font-weight:normal; - font-style:italic; - font-size:12px; - text-transform:none; - line-height:14px; - } -.sidebar .design-selection ul a.designer-name { - display:inline; - font-style:normal; - font-size:11px; - color:#bcbb93; - letter-spacing:0; - text-transform:lowercase; - } -.sidebar .design-selection ul a:hover { - color:#b2d378; - border:none; - } -.sidebar .design-archives ul, -.sidebar .zen-resources ul { - margin:10px 0 20px 24px; - } -.extra2 { - width:49%; - position:absolute; - top:0; - left:0; - height:127px; - background:url(topLeft_bg.gif) repeat-x; - z-index:10; - } -.extra3 { - width:49%; - position:absolute; - top:0; - right:0; - height:141px; - background:url(topRight_bg.gif) repeat-x; - z-index:10; - } - \ No newline at end of file diff --git a/src/data/designs/197/metadata.json b/src/data/designs/197/metadata.json deleted file mode 100644 index 2b934317ad4b957083f2b0247e1d3117716197d7..0000000000000000000000000000000000000000 --- a/src/data/designs/197/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "197", - "url": "https://www.csszengarden.com/197", - "css_url": "https://www.csszengarden.com/197/197.css", - "description": "This design features a harmonious blend of minimalism and functionality with soft pastel colors and a floral motif at the top, creating an inviting and tranquil atmosphere. The layout is structured with clear divisions, supported by a gentle pink background, and straightforward typography, enhancing readability. This combination of elements effectively guides the viewer's attention and supports the navigation links on the right, emphasizing ease of access and content engagement.", - "categories": [ - "Minimalist Design", - "Web Aesthetics", - "Typography", - "Pastel Color Scheme", - "Usability" - ], - "visual_characteristics": [ - "Pastel Colors", - "Floral Motif", - "Clean Layout", - "Simple Typography", - "Structured Navigation" - ] -} \ No newline at end of file diff --git a/src/data/designs/197/screenshot_desktop.png b/src/data/designs/197/screenshot_desktop.png deleted file mode 100644 index 73d6ff4300be25d4029943688ce60d9fb95d948b..0000000000000000000000000000000000000000 --- a/src/data/designs/197/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0b9eca1a57fb384cf1341eb029e765e0912328a46bfaefe3a9637fc6753e3193 -size 331215 diff --git a/src/data/designs/197/screenshot_mobile.png b/src/data/designs/197/screenshot_mobile.png deleted file mode 100644 index ddc054bc7ea896096c054ca8f668a10cdb93b805..0000000000000000000000000000000000000000 --- a/src/data/designs/197/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:bc7f09b203b7c6b4741ab4f0ba0d9cdf5638c093d9c85851f3652c72e1cbbeb1 -size 264433 diff --git a/src/data/designs/197/style.css b/src/data/designs/197/style.css deleted file mode 100644 index 09e4b3c143a3900a47056474760e3e6b12006416..0000000000000000000000000000000000000000 --- a/src/data/designs/197/style.css +++ /dev/null @@ -1,319 +0,0 @@ -/* css Zen Garden submission 197 - 'Floral Touch', by Jadas Jimmy, http://www.jahmasta.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Jadas Jimmy */ -/* Added: December 4th, 2006 */ - - -/* 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. */ - - - -/* basic elements */ -body { - font-family: Arial, Helvetica, sans-serif; - font-size: 10px; - color: #919191; - background-image: url(back.gif); - background-repeat: repeat; - margin-left: 0px; - margin-top: 0px; - margin-right: 0px; - margin-bottom: 0px; -} -p { - margin-top: 10px; - text-align: justify; - font-family: arial; - font-size: 8pt; - line-height: 10pt; - } -h3 { - font: normal 12pt arial; - letter-spacing: 1px; - margin-bottom: 0px; - color: #7D775C; - } -a:link { - font-weight: bold; - text-decoration: none; - color: #74529A; - } -a:visited { - font-weight: bold; - text-decoration: none; - color: #993399; - } -a:hover, a:active { - text-decoration: underline; - color: #74529A; - } -abbr { - font-weight: bold; - border-bottom: 1px dotted #DB008C; - } - -/* specific divs */ -.page-wrapper { - margin-top: 0px; - margin-right: auto; - margin-bottom: 0px; - margin-left: auto; - padding: 0px; - width: 691px; - text-align: left; - position: relative; - border-left: 1px solid #F1F1F1; - border-right: 1px solid #F1F1F1; - background-color: #ffffff; - } - -.intro { - min-width: 470px; - background: url(header.png) no-repeat right top; - } -header { - width: 506px; - height: 234px; - float: left; - } - -/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */ -h1 { - margin-top: 10px; - width: 219px; - height: 87px; - float: left; - } -h1, h2, h3 { - text-indent: 200%; - white-space: nowrap; - overflow: hidden; - } - -.summary { - background: url(down1.gif) no-repeat left top; - margin-top: 165px; - margin-right: 6px; - width: 179px; - height: 117px; - float: right; - } - -.preamble { - margin-left: 10px; - padding-top: 1px; - padding-bottom: 30px; - width: 460px; - clear: both; - padding-right: 0px; - padding-left: 0px; - } - -.supporting { - margin-left: 10px; - padding: 0px 0px; - width: 460px; - position: relative; - } - -footer { - text-align: center; - font: bold 10px arial; - padding: 0px; - text-transform: uppercase; - margin-top: 0px; - width: 660px; - margin-bottom: 0px; - height: 20px; - } - -footer a:link, footer a:visited { - margin-right: 20px; - margin-bottom: 30px; - } - -.sidebar { - background-image: url(menuback.gif); - width: 179px; - font: 10px verdana #A50069; - position: absolute; - top: 293px; - left: 506px; - margin: 0px; - padding-top: 0px; - padding-right: 6px; - padding-bottom: 0px; - padding-left: 0px; - background-repeat: repeat-y; - } -.sidebar .wrapper { - font: 10px verdana; - padding: 0px; - margin-top: 0px; - width: 179px; - } -.sidebar h3.select { - background: url(m1.gif) no-repeat top left; - margin: 0px 0px 0px 0px; - width: 179px; - height: 41px; - } -.sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.sidebar h3.archives { - background: url(m2.gif) no-repeat top left; - margin: 0px 0px 0px 0px; - width: 179px; - height: 41px; - } -.sidebar h3.resources { - background: url(m3.gif) no-repeat top left; - margin: 0px 0px 0px 0px; - width: 179px; - height: 41px; - } - -.zen-resources { - background-image: url(mfoot.gif); - background-repeat: no-repeat; - width: 179px; - height: 514px; - background-position: 0px 200px; - } - - -.sidebar ul { - margin: 0px; - padding: 0px; - } -.sidebar li { - border-bottom: 1px solid #F2E1EC; - line-height: 15px; - list-style-type: none; - display: block; - padding-left: 20px; - padding-top: 0px; - padding-bottom: 10px; - margin-bottom: 5px; - margin-top: 5px; - background-image: url(picto.gif); - background-repeat: no-repeat; - background-position: 5px 0px; - } -.sidebar li a:link { - color: #999999; - border-bottom: 1px dotted #DB008C; - } -.sidebar li a:hover { - color: #996699; - } -.sidebar li a:visited { - color: #919191; - } --------------------------------------------- -/* Modifications */ - - -p:nth-child(3){ - font: bold 11px verdana; - text-align: center; - color: #DB008C; - padding: 30px 10px 0px 10px;} - - -.summary p:last-child{ - font: bold 11px verdana; - text-align: center; - color: #DB008C; - padding: 30px 10px 0px 10px;} - -.summary p:first-child -{display: none;} - - -.preamble h3 { - text-align: left; - color: #919191; - font: 11px Arial; - width: 479px; - height: 40px; - padding: 0px 0px 0px 0px; - background-image: url(t1.gif); - background-repeat: no-repeat; - background-position: 0px top; -} - -.explanation h3 { - text-align: left; - color: #919191; - font: 11px Arial; - width: 479px; - height: 40px; - padding: 0px 0px 0px 0px; - background-image: url(t2.gif); - background-repeat: no-repeat; - background-position: 0px top; -} - -.participation h3 { - text-align: left; - color: #919191; - font: 11px Arial; - width: 479px; - height: 40px; - padding: 0px 0px 0px 0px; - background-image: url(t3.gif); - background-repeat: no-repeat; - background-position: 0px top; -} - -.benefits h3 { - text-align: left; - color: #919191; - font: 11px Arial; - width: 479px; - height: 40px; - padding: 0px 0px 0px 0px; - background-image: url(t4.gif); - background-repeat: no-repeat; - background-position: 0px top; -} - -.requirements h3 { - text-align: left; - color: #919191; - font: 11px Arial; - width: 479px; - height: 40px; - padding: 0px 0px 0px 0px; - background-image: url(t5.gif); - background-repeat: no-repeat; - background-position: 0px top; -} - - -p:nth-child(2) {padding: 0px 0px 0px 21px;} -p:nth-child(3) {padding: 0px 0px 0px 21px;} -p:nth-child(4) {padding: 0px 0px 0px 21px;} -p:nth-child(5) {padding: 0px 0px 0px 21px;} -p:nth-child(6) {padding: 0px 0px 0px 21px;} - -.requirements p:nth-child(6) { - font: bold 15px arial; - text-align: center; - color: #DB008C; - background-image: url(footer1.gif); - background-repeat: no-repeat; - background-position: 0px top; - display: block; - width: 531px; - height: 60px; - margin: 0px 0px 0px -10px; - padding: 25px 80px 0px 80px; - } diff --git a/src/data/designs/198/metadata.json b/src/data/designs/198/metadata.json deleted file mode 100644 index 80388ca17ae1abc609f6e43e9347269b7089c37e..0000000000000000000000000000000000000000 --- a/src/data/designs/198/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "198", - "url": "https://www.csszengarden.com/198", - "css_url": "https://www.csszengarden.com/198/198.css", - "description": "This visual design leverages a minimalist and modern aesthetic, characterized by a stark contrast of black background with white and red typography, creating a striking and sophisticated look. The use of negative space effectively highlights the content and guides the viewer's eye through the distinct sections, each separated by varying font styles and weights. The design combines a functional grid layout with artistic elements, such as a subtle background pattern at the bottom, enhancing depth and visual interest while maintaining clarity.", - "categories": [ - "Minimalism", - "Modern Aesthetic", - "Typography", - "High Contrast", - "Grid Layout" - ], - "visual_characteristics": [ - "Black Background", - "White and Red Text", - "Negative Space", - "Subtle Patterns", - "Defined Sections" - ] -} \ No newline at end of file diff --git a/src/data/designs/198/screenshot_desktop.png b/src/data/designs/198/screenshot_desktop.png deleted file mode 100644 index 760ef2ae0d7feb7c9f747ab028b6a347484e1685..0000000000000000000000000000000000000000 --- a/src/data/designs/198/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0b0b9f0ce9be848aac08625417339f19705ff1e2fd4d70067bd7d7f269bb3ce5 -size 451932 diff --git a/src/data/designs/198/screenshot_mobile.png b/src/data/designs/198/screenshot_mobile.png deleted file mode 100644 index ac7212d8965f5926709c7f320a875b4660bd8fb1..0000000000000000000000000000000000000000 --- a/src/data/designs/198/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e921b16fd0888a6187ad54c86fe03abbb720115151b57ac92e74f9da2a40f7b8 -size 458357 diff --git a/src/data/designs/198/style.css b/src/data/designs/198/style.css deleted file mode 100644 index 7fe7d443ac3f0113072746cf992979fe7787fdb3..0000000000000000000000000000000000000000 --- a/src/data/designs/198/style.css +++ /dev/null @@ -1,280 +0,0 @@ -/* css Zen Garden submission 198 - 'The Original', by Joachim Shotter, http://www.bluejam.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Joachim Shotter */ -/* Added: December 4th, 2006 */ - - -/* 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. */ - - - -body { - font: 12px Arial, Helvetica, sans-serif; - color: #CCCCCC; - background: #000000 url(background.jpg) no-repeat center bottom; - margin: 0px; - } - -p { - width: 354px; - padding-right: 25px; - text-align: justify; - color: #999999; - margin-bottom: 10px; - float: right; - clear: both; - margin-top: 0px; - margin-right: 0px; - margin-left: 0px; - padding-top: 0px; - padding-bottom: 0px; - padding-left: 0px; - } - -a, a:visited { - background :url(a_link.jpg) left center; - color: #FFFFFF; - text-decoration: none; - text-transform: uppercase; - height: 15px; - padding-right: 2px; - padding-left: 2px; - } - -abbr{ - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: #FF0000; - } - -.page-wrapper { - background: url(../zen-bg.jpg) no-repeat top left; - width: 770px; - margin-right: auto; - margin-left: auto; - margin-top: 0px; - margin-bottom: 0px; - } - -header { - background: url(css_zen.jpg) no-repeat; - background-position: left bottom; - display: block; - height: 459px; - width: 770px; - margin: 0px; - padding: 0px; - } - -header h1, header h2 { - margin: 0px; - padding: 0px; - } - -header h1 span { - display:none; - } - -header h2 span { - display: none; - } - -.summary { - top: 175px; - width: 770px; - position: absolute; - font-size: 10px; - } - -.summary p { - width: 376px; - text-transform: uppercase; - } - -.summary p:last-child{ - float: left; - padding-left: 20px; - position: absolute; - top: 300px; - } - -h3{ - margin: 0px; - padding-bottom: 10px; - float: right; - } - -h3 span{ - display: none; - } - -.preamble h3{ - background: url(preamble.jpg) no-repeat; - width: 434px; - height: 155px; - } - -.supporting h3{ - background: url(supportingText.jpg) no-repeat; - width: 434px; - height: 169px; - } - -.participation h3{ - background: url(participation.jpg) no-repeat; - width: 434px; - height: 129px; - } - -.benefits h3{ - background: url(benefits.jpg) no-repeat; - width: 434px; - height: 129px; - } - -.requirements h3{ - background: url(requirements.jpg) no-repeat; - width: 434px; - height: 129px; - } - -.sidebar { - background: url(original.jpg) no-repeat; - background-position: left bottom; - color: #777777; - position: absolute; - top: 500px; - width: 321px; - padding-bottom: 431px; - } - -.sidebar .wrapper { - background: url(linkList.jpg) repeat-y; - width: 100%; - } - -.design-selection ul{ - list-style-type: none; - margin: 0px; - padding: 0px 0px 180px 100px; - clear: both; - } - -.design-selection li { - margin-bottom: 15px; - width: 190px; - } - -.design-selection li a, .design-selection li a:visited { - color:#999999; - background-image: none; - font-size: 15px; - font-weight: bold; - display: block; - margin: 0px; - padding: 0px; - } - -.design-selection li a.designer-name, .design-selection li a.designer-name:visited { - display: inline; - background-image: none; - font-size: 10px; - color: #CCCCCC; - margin: 0px; - padding: 0px; - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: #FF0000; - } - -.design-archives li, .zen-resources li { - margin-bottom: 5px; - } - -.design-archives ul, .zen-resources ul { - list-style-type: none; - margin: 0px; - padding: 0px 0px 20px 115px; - clear: both; - } - -.design-archives li a, .zen-resources li a{ - font-size: 10px; - text-transform: uppercase; - background-image: none; - color: #999999; - border-bottom-width: 1px; - border-bottom-style: solid; - border-bottom-color: #FF0000; - } - -.design-selection li a:hover, .design-archives li a:hover, .zen-resources li a:hover { - color: #FFFFFF; - } - -.sidebar h3.select { - background: url(selectAdesign.jpg); - height: 90px; - width: 100%; - } - -.sidebar h3.archives { - background: url(archives.jpg); - margin-top: 250px; - height: 100px; - width: 100%; - } - -.sidebar h3.resources { - background: url(resources.jpg); - height: 100px; - width: 100%; - } - -footer { - height: 80px; - clear: both; - padding-left: 305px; - padding-top: 150px; - font-size: 10px; - } - - -footer a, footer a:visited { - color: #999999; - background-image: none; - } - -p:nth-child(6){ - width: 340px; - float: right; - position: relative; - top: 150px; - font-size: 10px; - text-transform: uppercase; - margin: 0px; - padding: 0px; - text-align: right; - left: 90px; - } - - - - - -/* - -a:hover, a:active {} -.intro {} -.sidebar h3.select span {} -.sidebar h3.favorites {} -.sidebar h3.favorites span {} -.sidebar h3.archives span {} -.sidebar h3.resources span {} -.zen-resources{} -.extra1 {} - -*/ diff --git a/src/data/designs/199/metadata.json b/src/data/designs/199/metadata.json deleted file mode 100644 index 9f32d5a857add861687429d3a5dfd6ddad1e52b7..0000000000000000000000000000000000000000 --- a/src/data/designs/199/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "199", - "url": "https://www.csszengarden.com/199", - "css_url": "https://www.csszengarden.com/199/199.css", - "description": "This design features a militaristic theme with a robust combination of bold typography and imagery, evoking a sense of strength and authority. The page employs a beige background with red and green accents, showcasing a central tank graphic that enhances the military motif. Text is arranged in a structured, easy-to-read format with clear headings and sections, embodying a vintage or historical aesthetic. The playful use of icons, combined with the textured background, adds depth and interest, making it visually engaging.", - "categories": [ - "military theme", - "vintage design", - "structured layout", - "playful graphics", - "textured background" - ], - "visual_characteristics": [ - "bold typography", - "central tank imagery", - "red and green accents", - "beige background", - "clear headings" - ] -} \ No newline at end of file diff --git a/src/data/designs/199/screenshot_desktop.png b/src/data/designs/199/screenshot_desktop.png deleted file mode 100644 index cb005bdff5763e9858e351d074ed92a65941b152..0000000000000000000000000000000000000000 --- a/src/data/designs/199/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2e51b769ce070aba13b4292e85c500bd11ae59fa7edf7c400a2cb152755976fb -size 1151008 diff --git a/src/data/designs/199/screenshot_mobile.png b/src/data/designs/199/screenshot_mobile.png deleted file mode 100644 index c1ebd88535bff0b373b51fe6d5c39b5f07e39b96..0000000000000000000000000000000000000000 --- a/src/data/designs/199/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b6731b63ce2edaf26d4f8ed5e18c4386c417a0e373f869702ec4fb80603cce7f -size 460461 diff --git a/src/data/designs/199/style.css b/src/data/designs/199/style.css deleted file mode 100644 index c2b03c9e047c00b5470bec050ed7acf7f60d36a0..0000000000000000000000000000000000000000 --- a/src/data/designs/199/style.css +++ /dev/null @@ -1 +0,0 @@ -/* css Zen Garden submission 199 - 'Zen Army', by Carl Desmond, http://www.niceguy.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2006, Carl Desmond */ /* Added: December 5th, 2006 */ /* 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. */ html { margin: 0px; padding: 0px; min-width:764px; background: url(topgrnd.jpg) repeat-x top; background-color:#E7D8AF; } body { font: 10pt/18pt "Trebuchet MS", Arial, Verdana, sans-serif; color: #000; margin: 0px; background: url(btmgrnd.jpg) no-repeat bottom left; height:2200px; width:764px; } p { font: 10pt/18pt "Trebuchet MS", Arial, Verdana, sans-serif; margin-top: 0px; text-align: left; } h3 { font: italic normal 12pt georgia; letter-spacing: 1px; margin-bottom: 0px; color: #7D775C; } a:link { font-weight: bold; text-decoration: none; color: red; } a:visited { font-weight: bold; text-decoration: none; color: red; } a:hover, a:active { text-decoration: underline; color: #3B6132; } .page-wrapper { position:absolute; left:50%; width: 750px; margin-left: -380px; } .intro { min-width: 764px; } header { margin-bottom: 20px; } header { background: transparent url(header.jpg) no-repeat top center; margin-top: 0px; width: 764px; height: 380px; } h1, h2 { display: none; } .summary { position:absolute; top:365px; left:30px; width: 100%; } .summary p:first-child { display:none; } .summary p:last-child { padding-right: 50px; float: right; } .preamble { position: absolute; top:400px; left:250px; } .preamble h3 { background:url(h1_road.gif) no-repeat; width:400px; height:43px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .explanation h3 { background:url(h1_sowhat.gif) no-repeat; width:400px; height:43px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .participation h3 { background:url(h1_participate.gif) no-repeat; width:400px; height:43px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .benefits h3 { background:url(h1_benefit.gif) no-repeat; width:400px; height:43px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .requirements h3 { background:url(h1_requirements.gif) no-repeat; width:400px; height:43px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .supporting { position: absolute; left:250px; top: 680px; padding-left: 0px; margin-bottom: 0px; } .sidebar { position: absolute; top: 385px; } .sidebar li{ text-align:left; padding-left: 45px; } .sidebar .wrapper { font: 10pt "Trebuchet MS", Arial, Verdana, sans-serif; line-height:12px; background-image:url(linklist_bk.gif); background-repeat:repeat-y; background-position:left; width: 222px; } .sidebar h3.select { background: url(selectdesign.jpg) no-repeat top left; width: 222px; height: 169px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar h3.archives { background: transparent url(archives.jpg) no-repeat top left; margin: 0px 0px 0px 0px; width:222px; height: 191px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar h3.resources { background: transparent url(resources.jpg) no-repeat top left; width:222px; height: 202px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar ul { margin: 0px; padding: 0px; padding-bottom:5px; } .sidebar li { background: url(hrzline.gif) no-repeat top right; display: block; padding-top: 10px; } .sidebar li a:link { color: red; } .sidebar li a:visited { color: #3B6132; } .zen-resources { padding-bottom:10px; } .design-selection li a { font-size: 12px; } .design-selection li a:hover{ color: #3B6132; } .design-selection a.designer-name { font-size: 10px; } .design-selection a { display: block; font-weight: bold; } .design-selection a.designer-name { display: inline; color: #3B6132; } footer { text-align: right; } footer a:link, footer a:visited { margin-right: 20px; } \ No newline at end of file diff --git a/src/data/designs/200/metadata.json b/src/data/designs/200/metadata.json deleted file mode 100644 index e33d028db876c3879c7d21449bbffc178b7c9a0f..0000000000000000000000000000000000000000 --- a/src/data/designs/200/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "200", - "url": "https://www.csszengarden.com/200", - "css_url": "https://www.csszengarden.com/200/200.css", - "description": "The design features a vibrant blue color scheme complemented by white and black typography, creating a striking contrast. The use of textured borders and background effects adds depth and visual interest. The layout is organized, with distinct sections for text content that enhance readability. The design reflects a modern and clean aesthetic, offering a sense of technological advancement and innovation.", - "categories": [ - "Modern", - "Typography", - "Web Design", - "Colorful" - ], - "visual_characteristics": [ - "Vibrant Color", - "Textured Background", - "High Contrast", - "Organized Layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/200/screenshot_desktop.png b/src/data/designs/200/screenshot_desktop.png deleted file mode 100644 index 42865f4eea7807b4344866b79e676c2b5198e449..0000000000000000000000000000000000000000 --- a/src/data/designs/200/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:f59b55c723d2c4675b2ec6be51a209414624d0a81e181960c324397ffd866066 -size 443598 diff --git a/src/data/designs/200/screenshot_mobile.png b/src/data/designs/200/screenshot_mobile.png deleted file mode 100644 index f64c0e9e9a0ad5594b07a78fcfaed7e2cd108fbf..0000000000000000000000000000000000000000 --- a/src/data/designs/200/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:32d033eade9fb410d924a489ba1cc0c7a0fef4c2c548c751249ea89ed378f50e -size 620446 diff --git a/src/data/designs/200/style.css b/src/data/designs/200/style.css deleted file mode 100644 index 5d3b0ba7e4396e23afe40be0e1989893854a3cae..0000000000000000000000000000000000000000 --- a/src/data/designs/200/style.css +++ /dev/null @@ -1,224 +0,0 @@ -/* css Zen Garden submission 200 - 'Icicle Outback', by Timo Virtanen, http://www.timovirtanen.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Timo Virtanen */ -/* Added: December 6th, 2006 */ - - -/* 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. */ - - - -body{ - font-family:Arial, Helvetica, sans-serif; - background:#2baffa url(pics/content_background.jpg) repeat-y top left; - font-size:0.8em; - color:#fff; - font-weight:normal; - margin:0; - padding:0; - } - -/*left column*/ - -header{ - position:absolute; - top:0; - left:0; - background:#2baffa url(pics/header.jpg) no-repeat top left; - height:467px; - width:100%; - } - -.summary{ - font-size:0.8em; - overflow:hidden; - position:absolute; - left:590px; - top:140px; - height:140px; - text-align:center; - width:230px; - z-index:3; - } - -.summary a{ text-transform:uppercase; } - -.preamble, .supporting{ - position:relative; - text-align:justify; - width:370px; - top:302px; - left:150px; - z-index:4; - } - -.preamble h3, .supporting h3{ margin-top:40px; } - -* html .preamble{ top:302px; } - -.preamble h3 { background:transparent url(pics/header1.gif) no-repeat center top; height:55px; } -.explanation h3 { background:transparent url(pics/header2.gif) no-repeat center top; height:55px; } -.participation h3 { background:transparent url(pics/header3.gif) no-repeat center top; height:55px; } -.benefits h3 { background:transparent url(pics/header4.gif) no-repeat center top; height:55px; } -.requirements h3 { background:transparent url(pics/header5.gif) no-repeat center top; height:55px; } - -.supporting{ - width:370px; - left:150px; - margin-top:0; - padding-bottom:40px; - } - -* html .supporting{ padding-bottom:240px; } - -footer{ - text-align:center; - background:transparent url(pics/footer.jpg) no-repeat top center; - height:55px; - padding-top:10px; - margin-top:40px; - } - -footer a{ border-bottom:none; } - -/*right column*/ - -.sidebar{ - position:absolute; - top:251px; - width:210px; - text-align:center; - left:602px; - font-size:0.85em; - background:transparent url(pics/right_list_bg.jpg) repeat-y top left; - } - -.sidebar h3{ padding:0; margin:0; } - -.design-selection h3{ margin-bottom:14px; } - -.design-selection a:link, .design-selection a:visited{ - text-transform:uppercase; - display:block; - font-weight:bold; - color:#fff; - border-bottom:none; - } - -.design-selection a:hover, .design-selection a:active{ - color:#a9e0ff; - text-decoration:underline; - } - -.design-selection a:link.c, .design-selection a:visited.c{ - display:inline; - text-transform:none; - color:#a9e0ff; - font-weight:normal; - border-bottom:#a9e0ff dotted 1px; - text-decoration:none; - } - -.design-selection a.designer-name:hover, .design-selection a:active.c{ - color:#fff; - border-bottom:#fff dotted 1px; - } - -.design-selection ul{ margin-top:-290px; } - -.design-selection ul li + li{ - background:transparent url(pics/list_background.jpg) no-repeat center top; - padding-bottom:5px; - padding-top:2px; - } - -* html .design-selection ul li{ background:transparent url(pics/list_background_ie.jpg) no-repeat center top; } - -.design-selection ul li{ - padding-bottom:5px; - padding-top:2px; - } - -.design-archives ul li, .zen-resources ul li{ - padding-bottom:0; - padding-top:0; - } - -.design-selection ul{ - background:transparent url(pics/design_bottom.jpg) no-repeat left bottom; - padding-bottom:30px; - padding-right:30px; - width:215px; - } - -.design-archives ul{ - background:transparent url(pics/archives_bottom.jpg) no-repeat left bottom; - margin-top:-28px; - padding-bottom:20px; - padding-right:40px; - width:205px; - } - -* html .design-archives ul{ padding-bottom:14px; } - -.zen-resources ul{ - background:transparent url(pics/resources_bottom.jpg) no-repeat left bottom; - padding-bottom:60px; - margin-top:-28px; - padding-right:40px; - width:205px; - } - -* html .zen-resources ul{ padding-bottom:57px; } - -.design-selection h3 { background:transparent url(pics/design_header.jpg) no-repeat left top; height:378px; width:245px; } -.design-archives h3 { background:transparent url(pics/archives_header.jpg) no-repeat left top; height:90px; width:245px; } -.zen-resources h3 { background:transparent url(pics/resources_header.jpg) no-repeat left top; height:90px; width:245px; } - -* html .design-archives ul li, * html .zen-resources ul li{ background:none; } - -/* global typography */ - -a:link, a:visited{ - color:#a9e0ff; - text-decoration:none; - border-bottom:#a9e0ff dotted 1px; - } - -a:hover, a:active{ - color:#fff; - border-bottom:#fff dotted 1px; - } - -abbr, abbr{ - border-bottom:#fff dotted 1px; - cursor:help; - } - -/*lists*/ - -ul{ - margin:0; - padding:0; - } - -ul li{ list-style:none; } - -/* hidden stuff */ - -h1,h2, -.extra1, -.extra2, -.extra3, -.extra4, -.extra5, -.extra6 { display:none; } - -h3 { - text-indent: 200%; - white-space: nowrap; - overflow: hidden; -} \ No newline at end of file diff --git a/src/data/designs/201/metadata.json b/src/data/designs/201/metadata.json deleted file mode 100644 index 5a4dafd76400b821f8f13e98148bff5f7a220a9d..0000000000000000000000000000000000000000 --- a/src/data/designs/201/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "201", - "url": "https://www.csszengarden.com/201", - "css_url": "https://www.csszengarden.com/201/201.css", - "description": "The design employs a strong typographical hierarchy set against a dual-tone purple and blue palette. It combines natural imagery with text overlays to create an artistic and informative layout. The vertical text orientation and illustrative floral elements contribute to an engaging and elegant visual experience.", - "categories": [ - "Typography", - "Web Design", - "Nature", - "Artistic", - "Informative" - ], - "visual_characteristics": [ - "Dual-tone palette", - "Vertical text orientation", - "Illustrative elements", - "Typographical hierarchy", - "Minimalistic imagery" - ] -} \ No newline at end of file diff --git a/src/data/designs/201/screenshot_desktop.png b/src/data/designs/201/screenshot_desktop.png deleted file mode 100644 index 0bdf9ebf5ced3ee667f7f375b78af8e3eda1d3aa..0000000000000000000000000000000000000000 --- a/src/data/designs/201/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ad077331b0bea6bd1383de93f3331423d33cb7c850c05d3ea9ea60b652656071 -size 510651 diff --git a/src/data/designs/201/screenshot_mobile.png b/src/data/designs/201/screenshot_mobile.png deleted file mode 100644 index 850942e0792279934d59c586dfc1e4cecdf70757..0000000000000000000000000000000000000000 --- a/src/data/designs/201/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:4ea7bb03ac664418b044d4fa19077d684652dc5230b52c8f3ec2c2a3a852fa7f -size 492129 diff --git a/src/data/designs/201/style.css b/src/data/designs/201/style.css deleted file mode 100644 index eee09ded0fced278c82f1bba071f7c5f33d1da8d..0000000000000000000000000000000000000000 --- a/src/data/designs/201/style.css +++ /dev/null @@ -1,352 +0,0 @@ -/* css Zen Garden submission 201 - 'Lily Pond', by Rose Thorogood, http://tulips4rose.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Rose Thorogood */ -/* Added: December 11th, 2006 */ - - -/* 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. */ - - - - -/* --- LAYOUT ---------------------------------- */ - -body { - margin: 0px; - padding: 0px; - background: #421d42 url(images/bg.gif); - color: #471c47; - font-family: Verdana, Arial, sans-serif; - font-size: 0.7em; -} - - -.page-wrapper { - width: 750px; - height: 1335px; -} - - -header { - width: 250px; - height: 625px; - background: url('bg-pageHeader.gif') no-repeat; - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: 350px; - left: 250px; - z-index: 0; -} - -.summary { - margin-top: 0px; - margin-left: 0px; - position: relative; - top: 350px; - left: 250px; - z-index: 1; -} - .summary p:first-child { - display: none; - } - .summary p:last-child { - width: 425px; - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: -18px; - left: -250px; - z-index: 2; - } - -.preamble { - width: 500px; - height: 350px; - background: #471c47 url('bg-road.gif'); - margin-top: 0px; - position: absolute; - top: 0px; -} - -.explanation { - width: 250px; - height: 490px; - background: #a690af url('bg-about.gif'); - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: 0px; - left: 500px; -} - -.participation { - width: 250px; - height: 485px; - background: #a690af url('bg-participation.gif'); - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: 490px; - left: 500px; -} - -.benefits { - width: 250px; - height: 230px; - background: #85a3c2 url('bg-benefits.gif'); - margin-top: 0px; - position: absolute; - top: 350px; -} - -.requirements { - width: 250px; - height: 755px; - background: #85a3c2 url('bg-requirements.gif'); - margin-top: 0px; - position: absolute; - top: 580px; -} - -footer { - width: 500px; - height: 20px; - background: #336699 url('bg-footer.gif'); - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: 1280px; - left: 250px; -} - -.sidebar { - width: 500px; - height: 305px; - background: #336699 url('bg-select.gif'); - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: 975px; - left: 250px; -} - -.design-selection { - margin-bottom: 0px; - margin-left: 0px; - position: absolute; - bottom: -5px; - left: 10px; - width: 300px; -} - -.design-archives { - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: 30px; - left: 290px; -} - -.zen-resources { - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: 180px; - left: 290px; -} - - -/* --- FORMATTING HEADINGS --------------------- */ - -h1, h2 { - display: none; -} - -.explanation h3 { - background-image: url('heading-about.gif'); - width: 250px; - height: 100px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.participation h3 { - background-image: url('heading-participation.gif'); - width: 250px; - height: 50px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.benefits h3 { - background-image: url('heading-benefits.gif'); - width: 250px; - height: 60px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.requirements h3 { - background-image: url('heading-requirements.gif'); - width: 250px; - height: 50px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.design-selection h3 { - display: none; -} - -.design-archives h3 { - display: none; -} - -.zen-resources h3 { - display: none; -} - - -/* --- FORMATTING TEXT ------------------------- */ - -p { - padding: 0 15px 0 15px; -} - -.preamble p:nth-child(2) { - margin-top: -20px; -} - -.preamble p:nth-child(2), .preamble p:nth-child(3), .preamble p:nth-child(4) { - color: #ffffff; - font-size: 1.25em; - font-style: italic; -} - -.supporting { - background-color: #341256; -} - -.summary p:first-child { - display: none; - } - -.summary p:last-child { - color: #ffffff; - font-weight: bold; - text-align: right; - padding: 0; -} - -.benefits, .requirements { - color: #072849; -} - -.requirements p:nth-child(6) { - margin-top: 0px; - margin-left: 0px; - position: absolute; - top: 720px; - left: 250px; - width: 420px; - height: 30px; - font-size: .9em; - background-color: #ffffff; - color: #471c47; - text-align: center; - padding: 5px 40px 0 40px; - } - -footer { - text-align: center; - text-transform: uppercase; -} - -abbr { - font-weight: bold; - border-bottom: 1px dotted #ffffff; - } - -.summary abbr { - font-weight: bold; - border-bottom: 1px dotted #339999; - } - - -/* --- FORMATTING NAVIGATION ------------------- */ - -a { - color: #ffffff; - text-decoration: none; -} - -a:hover { - color: #336699; - text-decoration: underline; -} - -.summary a { - color: #339999; - text-decoration: none; -} - -.summary a:hover { - color: #336699; - text-decoration: underline; -} - -.explanation a:hover, .participation a:hover { - color: #770e77; -} - -.requirements p:nth-child(6) a { - color: #336699; - font-weight: bold; - text-decoration: none; -} - -.requirements p:nth-child(6) a:hover { - color: #339999; - text-decoration: underline; -} - -footer a { - font-weight: bold; -} - -.sidebar a, footer a { - color: #ffffff; - text-decoration: none; -} - -.sidebar a:hover, footer a:hover { - background-color: #ffffff; - color: #471c47; - text-decoration: underline; -} - -.design-selection a { - font-weight: bold; -} - -.design-selection a.designer-name { - font-weight: normal; -} - -li { - padding-bottom: 3px; - list-style: none; -} - diff --git a/src/data/designs/202/metadata.json b/src/data/designs/202/metadata.json deleted file mode 100644 index 3d4ee78dbe0c285ec5dd9eb266cb668cc9e50e6e..0000000000000000000000000000000000000000 --- a/src/data/designs/202/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "202", - "url": "https://www.csszengarden.com/202", - "css_url": "https://www.csszengarden.com/202/202.css", - "description": "This visual design combines a vintage cinema aesthetic with modern graphic elements, featuring a theatrical curtain framing and elegant typography for a sophisticated and nostalgic feel. The grayscale color palette enhances the retro theme, while the use of vertical symmetry in the layout adds order and clarity to the content presentation.", - "categories": [ - "theatrical", - "vintage", - "graphic design", - "monochrome", - "elegant" - ], - "visual_characteristics": [ - "grayscale palette", - "symmetrical layout", - "theatrical motif", - "vintage typography", - "curtain framing" - ] -} \ No newline at end of file diff --git a/src/data/designs/202/screenshot_desktop.png b/src/data/designs/202/screenshot_desktop.png deleted file mode 100644 index 688ac7c03636fed1a30798f419654acc2c63e94f..0000000000000000000000000000000000000000 --- a/src/data/designs/202/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6144b6bd462c737a67dd84bad47b255d3fb279d7d5810300c3b5b00e0164d8f0 -size 3286639 diff --git a/src/data/designs/202/screenshot_mobile.png b/src/data/designs/202/screenshot_mobile.png deleted file mode 100644 index 717f61118f0a8f1dd329b20bc48839972239be27..0000000000000000000000000000000000000000 --- a/src/data/designs/202/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c1619312b6c8c5d1eaf297fc6af8d22bb967e8eb5238056b2d80b55c53c8cca8 -size 1871132 diff --git a/src/data/designs/202/style.css b/src/data/designs/202/style.css deleted file mode 100644 index 031cbdf031782ded2aca17a67ad8b40a73d723a0..0000000000000000000000000000000000000000 --- a/src/data/designs/202/style.css +++ /dev/null @@ -1,388 +0,0 @@ -/* css Zen Garden submission 202 - 'Retro Theater', by Eric Rog, http://space-sheeps.info/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Eric Rog */ -/* Added: December 12th, 2006 */ - - -/* 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. */ - - -a, -a:visited -{ - text-decoration:none; - color:#ccc; - position:relative; -} -a:hover -{ - text-decoration:underline; -} -div, -p, -body, -ul, -li, -h1, -h2, -h3 -{ - display:block; - margin:0; - padding:0; - border:none; -} -ul -{ - list-style:none; -} -h1, -h2, -h3{ - text-transform:uppercase; - font-weight:normal; -} -abbr -{ - border:none; -} -body -{ - position:relative; - background:#000 url('cote.png') repeat-y 50% 0%; - text-align:center; - z-index:1; -} -.page-wrapper -{ - position:relative; - width:450px; - margin:0 auto; - padding:230px 0 350px 0; - font-size:0.8em; - font-family:arial, sans serif; - background-color:#313131; - color:#b9b9b9; - text-align:left; - background-image:url('ecran.gif'); - z-index:3; -} -p -{ - font-variant:small-caps; -} -.intro -{ - text-align:center; -} -h1 -{ - width:450px; - height:258px; - background:url('titre.png') no-repeat 50% 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -h2 -{ - margin-top:-20px; - width:450px; - height:37px; - background:url('sous-titre.png') no-repeat 90% 0; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} -.summary -{ - width:80%; - margin:10em auto 0 auto; - text-align:center; -} -.summary p -{ - display:inline; - font-size:125%; - line-height:80%; -} -.preamble h3 -{ - margin-top:1.5em; - font-size:80%; -} -.preamble p -{ - width:80%; - font-size:95%; - line-height:90%; - margin:0 auto; - margin:0 auto; -} -.supporting -{ - float:left; - padding:10em 0; -} -.supporting -{ - width:100%; - margin-top:2em; -} -.explanation -{ - float:left; - width:60%; -} -.explanation h3 -{ - font-size:125%; - font-weight:bold; - text-align:right; - margin:0 5% 0 10%; - margin-bottom:-1.1em; -} - -.explanation p -{ - line-height:4em; - text-align:right; - margin:0 5% 0 10%; - font-variant:normal; - text-transform:capitalize; - padding-bottom:4em; -} - -.participation -{ - float:right; - width:40%; -} - -.participation h3 -{ - font-size:125%; - font-weight:bold; - margin:0 10% 0 5%; -} - -.participation p -{ - line-height:2em; - margin:0 10% 0 5%; - font-weight:bold; - font-variant:normal; - text-transform:uppercase; -} -.benefits -{ - float:left; - clear:left; - margin-top:10em; - width:24%; -} -.benefits h3 -{ - font-size:125%; - font-weight:bold; - margin:0 10% 0 5%; - text-align:center; - margin-bottom:1.2em; -} -.benefits p -{ - line-height:2em; - font-weight:bold; - margin:0 20px 0 5%; - font-variant:normal; - text-transform:uppercase; - text-align:center; -} -.requirements -{ - float:right; - margin:10em 0 0 0; - width:72%; - text-align:center; -} -.requirements h3 -{ - font-size:125%; - font-weight:bold; - margin-bottom:1.2em; -} -.requirements p -{ - line-height:2em; - font-weight:bold; - font-variant:normal; - text-transform:uppercase; -} -.requirements p:nth-child(2) -{ - float:left; - /*margin-top:-1em; - line-height:4em;*/ - width:20%; - margin-right:3%; - text-align:left; - text-transform:none; -} -.requirements p:nth-child(3) -{ - float:left; - width:36%; -} -.requirements p:nth-child(4), -.requirements p:nth-child(5), -.requirements p:nth-child(6) -{ - float:right; - width:35%; - text-align:right; - margin-right:2%; -} -.sidebar -{ - clear:both; -} -.design-selection h3, -.design-archives h3, -.zen-resources h3 -{ - padding-top:7em; - font-size:125%; - font-weight:bold; - text-align:center; - clear:both; -} -.design-selection ul -{ - margin:0; - padding:0; -} -.design-selection li -{ - position:relative; - width:90%; - margin:.5em auto; - padding:0; - color:#313131; - border-bottom:2px dashed #b9b9b9; -} -.design-selection a -{ - position:relative; - top:5px; - padding:0 4px 0 0; - font-weight:bold; - text-transform:uppercase; - background:url('ecran.gif'); -} -.design-selection a.designer-name -{ - position:absolute; - right:-1px; - padding:0 0 0 4px; -} -.design-archives, -.zen-resources -{ - clear:both; -} -.design-archives h3, -.zen-resources h3 -{ - padding-top:6em; - font-size:125%; - font-weight:bold; - text-align:center; -} -.design-archives ul, -.zen-resources ul -{ - margin:1em 0 0 0; - width:100%; -} -.zen-resources ul -{ - padding-bottom:200px; - background:url('sponsorts.png') no-repeat 50% 100%; -} -.design-archives li, -.zen-resources li -{ - text-align:center; -} -.design-archives a, -.zen-resources a -{ - visibility:visible; - font-weight:bold; - text-transform:uppercase; -} -footer -{ - position:absolute; - clear:both; - bottom:300px; - left:0; - width:100%; - text-align:center; -} -.extra1 -{ - position:fixed; - top:0; - left:0; - width:100%; - height:23.2% !important; - height:102px; - min-height:102px; - max-height:230px; - z-index:2; -} -.extra1::after -{ - content: " "; - display:block; - position:absolute; - bottom:-198px; - left:0; - width:100%; - height:428px; - background:url('haut1.png') no-repeat 50% 100%; -} -.extra2 -{ - position:fixed !important; - position:absolute; - top:0; - left:0; - width:100%; - height:23.2% !important; - height:102px; - min-height:102px; - max-height:230px; - background:url('haut2.png') no-repeat 50% 100%; - z-index:4; -} -.extra3 -{ - position:fixed !important; - position:absolute; - bottom:0; - left:0; - width:100%; - height:30% !important; - height:110px; - min-height:110px; - max-height:318px; - background:url('bas.png') no-repeat 50% 0%; - z-index:4; -} \ No newline at end of file diff --git a/src/data/designs/203/metadata.json b/src/data/designs/203/metadata.json deleted file mode 100644 index 1ed49d57184c732145804f7c3f2168c7c0c1ea6e..0000000000000000000000000000000000000000 --- a/src/data/designs/203/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "203", - "url": "https://www.csszengarden.com/203", - "css_url": "https://www.csszengarden.com/203/203.css", - "description": "This design offers a serene and minimalist aesthetic with a focus on clarity and enlightenment. Featuring a calming blue color palette highlighted by a water droplet image, it prioritizes clean typography and well-structured sections. The layout is vertical and spaced, creating a smooth flow from one section to the next, while the consistent use of blue tones reinforces a peaceful mood.", - "categories": [ - "Minimalism", - "Typography", - "Calm Aesthetic", - "Water Theme", - "Serenity" - ], - "visual_characteristics": [ - "Blue Color Palette", - "Vertical Layout", - "Calming Imagery", - "Structured Sections", - "Clean Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/203/screenshot_desktop.png b/src/data/designs/203/screenshot_desktop.png deleted file mode 100644 index 31f5d3affde7fd6de363ee3a381152f58b23fc32..0000000000000000000000000000000000000000 --- a/src/data/designs/203/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e0065c57ebe7053d4b3bf822ac0de3ce3d8276c3c3c2d78621b19273fd73dc45 -size 117737 diff --git a/src/data/designs/203/screenshot_mobile.png b/src/data/designs/203/screenshot_mobile.png deleted file mode 100644 index 5acb5ebd5be486524fd6e3b5234b8d956e0b9dfc..0000000000000000000000000000000000000000 --- a/src/data/designs/203/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1fb91ee9a853c675513cddb485e491454d7273ff89f68b73426741418adcbdd5 -size 374271 diff --git a/src/data/designs/203/style.css b/src/data/designs/203/style.css deleted file mode 100644 index 7c22a2447ba164b8019db5fcdadbafdfe3e3bedb..0000000000000000000000000000000000000000 --- a/src/data/designs/203/style.css +++ /dev/null @@ -1,226 +0,0 @@ -/* css Zen Garden submission - 'Tiny Blue', by Timo Virtanen, http://www.timovirtanen.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Timo Virtanen */ - - -/* 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. */ - -body{ - text-align:center; - margin:0; - padding:0; - font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; - font-size:0.75em; - color:#fff; - background:#fff url(pics/background.gif) repeat-y top center; - } - -h1, h2, h3{ - font-size:1.4em; - text-align:center; - margin:0; - padding:0; - } - -p{ - margin:0.9em 0 0.9em 0; - padding:0; - line-height:1.2em; - } - -.page-wrapper{ - width:396px; - position:absolute; - left:50%; - margin-left:-198px; - } - -* html .page-wrapper{ /*IE FIX*/ - margin-left:-197px; - } - -.page-wrapper h3{ - padding:6px 0; - background:url(pics/header_bg.gif) top left repeat; - } - -.supporting, .preamble, .sidebar{ - padding:0 30px; - text-align:justify; - } - -.preamble h3{ - margin-top:1.4em; - } - -ul{ - padding:0; - margin:0; - } - -ul li{ - list-style:none; - padding-left:1em; - border-bottom:1px #365779 solid; - height:1.6em; - } - -ul li a:link, ul li a:visited, ul li abbr{ - color:#ffa94d; - font-weight:normal; - text-decoration:none; - } - -ul li abbr{ - border-bottom:1px dotted #ffa94d; - } - -ul li a:hover, ul li a:active, ul li a:hover abbr{ - color:#fff; - text-decoration:underline; - } - -ul li a.designer-name:link, ul li a.designer-name:visited{ - color:#bcd0e5; - font-style:italic; - } - -ul li a.designer-name:hover, ul li a.designer-name:active{ - color:#fff; - } - -ul li:hover{ - background:url(pics/list_over.gif) top left repeat-x; - } - -abbr{ - color:#bcd0e5; - border-bottom:1px dotted #bcd0e5; - cursor:help; - } - -a:link, a:visited{ - color:#fff; - font-weight:bold; - text-decoration:underline; - } - -a:hover, a:active{ - color:#bcd0e5; - text-decoration:none; - } - -header{ - width:396px; - height:319px; - background:url(pics/header.jpg) no-repeat top left; - } - -.summary{ - margin:0; - padding:0; -} - -.summary p:last-child{ - padding: 0; - margin:0 0 0.9em 0; - width:396px; - height:25px; - background:url(pics/download.gif) no-repeat top left; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:last-child { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - -.summary p:last-child a{ - visibility:visible; - text-indent:-9000px; - display:block; - margin-top:-1.1em; - height:25px; - float:left; - width:198px; - overflow:hidden; - } - -.sidebar{ - background:#fff url(pics/background2.gif) repeat-y top center; - padding-top:0.5em; - } - -.design-selection h3, .design-archives h3, .zen-resources h3{ - width:336px; - height:21px; - margin-top:1em; - } - -.design-selection h3{ - background:url(pics/header_design.gif) no-repeat top left; - } - -.design-archives h3{ - background:url(pics/header_archives.gif) no-repeat top left; - } - -.zen-resources h3{ - background:url(pics/header_resources.gif) no-repeat top left; - } - -.zen-resources ul{ - padding-bottom:8em; - } - -footer{ - text-align:center; - position:absolute; - margin-top:43em; - margin-left:-30px; - padding:6px 0; - padding-bottom:1em; - width:396px; - height:72px; - text-transform:uppercase; - background:url(pics/footer.gif) bottom left no-repeat; - } - -.extra1{ - position:fixed; - top:0; - width:37px; - height:433px; - left:50%; - margin-left:-235px; - background:url(pics/the_beauty.gif) no-repeat top left; - } - -* html .extra1{ - position:absolute; - } - -/*hidden*/ - -.sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:first-child, h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } -.summary p:first-child, -header h1, -header h2 { - display:none; - } \ No newline at end of file diff --git a/src/data/designs/204/metadata.json b/src/data/designs/204/metadata.json deleted file mode 100644 index 7b671275846ceb95c672e2c40cdd6ab5fc7a4277..0000000000000000000000000000000000000000 --- a/src/data/designs/204/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "204", - "url": "https://www.csszengarden.com/204", - "css_url": "https://www.csszengarden.com/204/204.css", - "description": "The design utilizes a dark, textured background to create an atmospheric and immersive experience, with subtle vintage imagery. The text is crisp and legible, standing out against the deep tones, and the layout guides the reader through various sections with elegance. The overall mood is one of sophistication and mystery, engaging the audience through its visual storytelling.", - "categories": [ - "Dark Theme", - "Vintage Style", - "Textured Background", - "Visual Storytelling" - ], - "visual_characteristics": [ - "Dark Tones", - "Textured Imagery", - "Elegant Layout", - "Legible Typography" - ] -} \ No newline at end of file diff --git a/src/data/designs/204/screenshot_desktop.png b/src/data/designs/204/screenshot_desktop.png deleted file mode 100644 index 2e42d192a2b1bc02afc4d0671fe117ae78998383..0000000000000000000000000000000000000000 --- a/src/data/designs/204/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8535e0cb16d6c79828c45b8e137724e4b64cb50cc459f4fe723ae2e7bd5eb400 -size 566929 diff --git a/src/data/designs/204/screenshot_mobile.png b/src/data/designs/204/screenshot_mobile.png deleted file mode 100644 index 200a4e5b1d9b9f3e8da9b7c10ba6e515e30fae82..0000000000000000000000000000000000000000 --- a/src/data/designs/204/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:af5090e5afe4434019b37826f097a949291753182a809b64729660e264ef0ea8 -size 485669 diff --git a/src/data/designs/204/style.css b/src/data/designs/204/style.css deleted file mode 100644 index 8502b2e6c6bca85a0d374d54676c4cb366d87504..0000000000000000000000000000000000000000 --- a/src/data/designs/204/style.css +++ /dev/null @@ -1,244 +0,0 @@ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/* CSS Zen Garden Top Level Styles || William Duffy || www.wdart.co.uk || 01 March 2006 -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ - -body { - color: #AB9F82; - font: 9pt/13pt georgia, sans-serif; - margin: 0px; padding: 0px; - background: black url(images/background_body.jpg) no-repeat center top; - } - -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ - -abbr { - border-bottom: 1px dotted #AB9F82; - cursor: help; - font-weight: bold; - } - -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/* Container Styles -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ - -.page-wrapper { - margin: 0px auto 0px auto; - position: relative; - width: 750px; - } - -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/* Intro Styles -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ - -.intro header { - background: transparent url(images/background_pageheader.jpg) no-repeat 17px 22px; - width: 464px; height: 446px; - } - - .intro header h1, .intro header h2 { - margin: 0px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - -.intro .summary { - background: transparent url(images/txt_quicksummary.gif) no-repeat left top; - color: #D9D0B7; - position: absolute; top: 186px; left: 336px; - width: 172px; height: 160px; - } - - .intro .summary p:first-child { - display: none; - } - - .intro .summary p:last-child { - background: transparent url(images/bullet_download.gif) no-repeat 0px 4px; - color: #E8D6A3; - padding: 0px 0px 0px 12px; - position: absolute; top: 1110px; left: 203px; z-index: 100; - width: 150px; - } - - .intro .summary p:last-child a {color: #DEC35A; text-decoration: underline;} - .intro .summary p:last-child a:visited {color: #DEC35A;} - .intro .summary p:last-child a:hover {color: #E8D6A3;} - - -.intro .preamble { - background: transparent url(images/breakrule.gif) no-repeat center bottom; - padding: 25px 0px 37px 0px; - width: 464px; - } - - .intro .preamble p:nth-child(2), .intro .preamble p:nth-child(3), .intro .preamble p:nth-child(4), .intro .preamble p:nth-child(5), .intro .preamble p:nth-child(6) { - padding: 0px 0px 0px 49px; - } - - .intro .preamble h3 { - background: transparent url(images/txt_sowhatisthisabout.gif) no-repeat left top; - height: 25px; - margin: 0px 0px -9px 27px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/* supportingText Styles -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ - -.supporting .explanation, .supporting .participation, .supporting .benefits, .supporting .requirements { - background: transparent url(images/breakrule.gif) no-repeat center bottom; - padding: 25px 0px 37px 0px; - width: 464px; - } - - .supporting p:nth-child(2), .supporting p:nth-child(3), .supporting p:nth-child(4), .supporting p:nth-child(5), .supporting p:nth-child(6) { - padding: 0px 0px 0px 49px; - } - - .supporting a {color: #D2C9BB;} - .supporting a:visited {color: #D2C9BB;} - .supporting a:hover {color: #D34E1A;} - - .supporting h3 { - height: 25px; - margin: 0px 0px -9px 27px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - .supporting .explanation h3 {background: transparent url(images/txt_participation.gif) no-repeat left top;} - .supporting .participation h3 {background: transparent url(images/txt_benefits.gif) no-repeat left top;} - .supporting .benefits h3 {background: transparent url(images/txt_participation.gif) no-repeat left top;} - .supporting .requirements h3 {background: transparent url(images/txt_requirements.gif) no-repeat left top;} - -.supporting footer { - background: transparent url(images/background_footer.jpg) no-repeat right bottom; - height: 20px; - padding: 152px 0px 0px 0px; - text-align: right; - } - - .supporting footer a {color: #CCAD50; font-weight: bold; text-decoration: none;} - .supporting footer a:visited {color: #CCAD50;} - .supporting footer a:hover {color: #D2C9BB;} - - -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/* linkList Styles -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ -/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ - -.sidebar { - color: #E8D6A3; - position: absolute; top: 75px; left: 516px; - width: 205px; - } - - .sidebar a {color: #E8D6A3; text-decoration: none;} - .sidebar a:visited {color: #E8D6A3;} - .sidebar a:hover {color: #DEC35A; text-decoration: underline;} - - - /* Begin lselect styles */ - .sidebar .design-selection { - font-style: italic; - } - - .sidebar .design-selection h3 { - background: transparent url(images/txt_designs.gif) no-repeat left top; - margin: 0px 0px -17px 0px; - width: 168px; height: 79px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - .sidebar .design-selection ul { - list-style-type: none; - margin: 0px 0px 0px 20px; padding: 0px; - } - - .sidebar .design-selection ul li { - background: transparent url(images/bullet_designs.gif) no-repeat left 4px; - padding: 0px 0px 12px 14px; - } - - .sidebar .design-selection a {display: block; font-style: normal; font-weight: bold;} - .sidebar .design-selection a.designer-name {display: inline; font-weight: normal;} - /* End lselect styles */ - - - /* Begin larchives styles */ - .sidebar .design-archives h3 { - background: transparent url(images/txt_archives.gif) no-repeat left top; - margin: 0px 0px -17px 0px; - width: 168px; height: 79px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - .sidebar .design-archives ul { - list-style-type: none; - margin: 0px 0px 0px 20px; padding: 0px; - } - - .sidebar .design-archives ul li { - background: transparent url(images/bullet_designs.gif) no-repeat left 4px; - padding: 0px 0px 0px 14px; - } - /* End larchives styles */ - - - /* Begin lresources styles */ - .sidebar .zen-resources { - background: transparent url(images/background_lresources.jpg) no-repeat left top; - padding: 117px 0px 0px 38px; - position: absolute; top: 950px; left: -37px; - width: 233px; height: 422px; - } - - .sidebar .zen-resources h3 { - background: transparent url(images/txt_resources.gif) no-repeat left top; - margin: 0px 0px -17px 0px; - width: 168px; height: 79px; - - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - } - - .sidebar .zen-resources ul { - list-style-type: none; - margin: 0px 0px 0px 20px; padding: 0px; - } - - .sidebar .zen-resources ul li { - background: transparent url(images/bullet_resources.gif) no-repeat left 5px; - padding: 0px 0px 0px 14px; - } - /* End lresources styles */ - - \ No newline at end of file diff --git a/src/data/designs/205/metadata.json b/src/data/designs/205/metadata.json deleted file mode 100644 index b736860fe2d46f2730b1c48154592d5a0551ca17..0000000000000000000000000000000000000000 --- a/src/data/designs/205/metadata.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "id": "205", - "url": "https://www.csszengarden.com/205", - "css_url": "https://www.csszengarden.com/205/205.css", - "description": "The design showcases a clean and minimalist layout with a muted color palette, highlighting a well-organized content structure. A sidebar on the right uses contrasting colors for sections and links, complemented by subtle typography variations to enhance readability. The overall mood is professional and calm, suitable for presenting technical or educational content.", - "categories": [ - "minimalism", - "professional", - "educational", - "technical" - ], - "visual_characteristics": [ - "clean layout", - "muted color palette", - "contrast in sidebar", - "subtle typography", - "organized content structure" - ] -} \ No newline at end of file diff --git a/src/data/designs/205/screenshot_desktop.png b/src/data/designs/205/screenshot_desktop.png deleted file mode 100644 index 95d8616e1890aaf861ae5206c5ca867d92480ea3..0000000000000000000000000000000000000000 --- a/src/data/designs/205/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:87a0f8a487a16ab1b6667fa5aef6fb7c10a382f8574bd85d80842fbd3fa03a43 -size 427271 diff --git a/src/data/designs/205/screenshot_mobile.png b/src/data/designs/205/screenshot_mobile.png deleted file mode 100644 index b54a8b4a9d68bf383a4a361f461c494a715ee46c..0000000000000000000000000000000000000000 --- a/src/data/designs/205/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b9cd881fa66e9ac4f332fd381fe4a70684f026e31c51562a8f2d01c1d7916ca5 -size 405868 diff --git a/src/data/designs/205/style.css b/src/data/designs/205/style.css deleted file mode 100644 index 2fef0708c55de2cb49bec3373c45b78bdc544151..0000000000000000000000000000000000000000 --- a/src/data/designs/205/style.css +++ /dev/null @@ -1,219 +0,0 @@ -/* css Zen Garden submission - 'spring360', by Rene Hornig, http://www.medialab360.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Rene Hornig */ - - -/* 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. */ - - -/* basic elements */ -* { - margin: 0; - padding: 0; -} - -body { - background: #DFDBD3 url(images/bg.gif) top left repeat-x; - color: #4C4C4C; - font-family: Verdana,Arial,Helvetica,sans-serif; -} - -p { - font-size: .8em; - line-height: 2em; -} - -h3 { - font-size: .7em; - font-weight: bold; - line-height: 1.3em; - padding-top: 2.5em; -} - -abbr, -abbr { - background: transparent url(images/abbr.gif) bottom left repeat-x; - border: 0 none; - cursor: help; - font-style: italic; -} - -a:link, -a:visited { - background: #EBF3CE; - color: #5D7403; - text-decoration: none; -} - -a:hover, -a:active, -a:focus { - background: #B2CF42; - color: #FFF; -} - - -.page-wrapper { - background: transparent url(images/contbg.gif) top left repeat-y; - width: 700px; -} - -.intro, -.supporting { - padding: 0 69px 0 86px; - width: 545px; -} - -.intro { - background: transparent url(images/logo.gif) top left no-repeat; - padding-top: 230px; -} - -.preamble h3, -.preamble p, -.supporting h3, -.supporting p { - padding-left: 10px; - padding-right: 40px; -} - -.preamble, -.explanation, -.participation, -.benefits, -.requirements { - border-bottom: 1px solid #E4E1DB; - padding-bottom: 20pt; -} - -header, -.summary p:first-child { - display: none; -} - -.sidebar h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:last-child { - background: transparent url(images/nav_dl.gif) top left no-repeat; - display: block; - font-size: .6em; - font-weight: bold; - left: 661px; - line-height: 1.4em; - padding: 40px 40px 0 30px; - position: absolute; - top: 160px; - width: 141px; - z-index: 20; -} - -.summary p:last-child a:link, -.summary p:last-child a:visited { - background: transparent; - color: #E6E3DE; - text-decoration: none; -} - -.sidebar { - background: transparent url(images/navbg.gif) top left repeat-y; - left: 661px; - padding-top: 10em; - position: absolute; - top: 130px; - width: 285px; - z-index: 10; -} - -.sidebar .wrapper { - background: transparent url(images/navbtmbg.gif) bottom left no-repeat; - font: .6em/1.4em verdana, sans-serif; - padding-bottom: 160px; -} - -.sidebar .wrapper h3 { - background: transparent top left no-repeat; - display: block; - height: 26px; - padding: 0 0 10px 0; - width: 285px; -} - -.sidebar .wrapper .select { - background-image: url(images/nav_des.gif); -} - -.sidebar .wrapper .archives { - background-image: url(images/nav_arch.gif); -} - -.sidebar .wrapper .resources { - background-image: url(images/nav_res.gif); -} - -.sidebar .wrapper ul { - list-style-type: none; - padding: 0 75px 25px 15px; -} - -.sidebar .wrapper li { - color: #E6E3DE; - padding: 6px 10px; -} - -.sidebar .wrapper a:link, -.sidebar .wrapper a:visited { - background: transparent; - color: #4C4C4C; - font-weight: bold; -} - -.sidebar .wrapper a.designer-name:link, -.sidebar .wrapper a.designer-name:visited { - color: #E6E3DE; - font-weight: normal; -} - -.summary p:last-child a:hover, -.summary p:last-child a:active, -.summary p:last-child a:focus, -.sidebar .wrapper a:hover, -.sidebar .wrapper a:active, -.sidebar .wrapper a:focus, -.sidebar .wrapper a.designer-name:hover, -.sidebar .wrapper a.designer-name:active, -.sidebar .wrapper a.designer-name:focus { - background: #B2CF42; - color: #FFF; - text-decoration: none; -} - - -.sidebar .design-selection li { - background: transparent url(images/navico.gif) 3pt 5pt no-repeat; - border-bottom: 1px solid #CFCCC4; - padding: 7px 10px 7px 25px; -} - -footer { - font-size: .7em; - line-height: 1.5em; - padding-top: 10px; - padding-bottom: 40px; - text-align: center; -} - -footer a:link, -footer a:visited, -footer a:hover, -footer a:active, -footer a:focus { - background: transparent; - color: #857E70; -} \ No newline at end of file diff --git a/src/data/designs/206/metadata.json b/src/data/designs/206/metadata.json deleted file mode 100644 index ffbf89e956bad683a991360e9f3925d03d5e7ca4..0000000000000000000000000000000000000000 --- a/src/data/designs/206/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "206", - "url": "https://www.csszengarden.com/206", - "css_url": "https://www.csszengarden.com/206/206.css", - "description": "The design adopts a minimalistic and clean aesthetic featuring a light background with earthy green accents, promoting a natural and serene theme. It uses simple typography, with titles and emphasis on certain words using bold and color variations, enhancing readability and visual flow.", - "categories": [ - "Minimalism", - "Clean Design", - "Typography", - "Nature Theme" - ], - "visual_characteristics": [ - "Light Background", - "Green Accents", - "Simple Typography", - "Serene Aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/206/screenshot_desktop.png b/src/data/designs/206/screenshot_desktop.png deleted file mode 100644 index 4b7dc318752419bcb496b6450837f6a42dd0a245..0000000000000000000000000000000000000000 --- a/src/data/designs/206/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ca98eefeaabafc85cbe12faf5e2b8f4df515df2a7f31fec057da7b56865f7102 -size 579251 diff --git a/src/data/designs/206/screenshot_mobile.png b/src/data/designs/206/screenshot_mobile.png deleted file mode 100644 index e68f455666702a7aea0d89d44c3c4628b428004e..0000000000000000000000000000000000000000 --- a/src/data/designs/206/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:74393a1b6ec77bac8db724cbcd5bd2943cda876abc9a0bb611ad98b58e8af9da -size 415519 diff --git a/src/data/designs/206/style.css b/src/data/designs/206/style.css deleted file mode 100644 index a32f1cd67e23ae58b6e24247d078a454b79eb3e2..0000000000000000000000000000000000000000 --- a/src/data/designs/206/style.css +++ /dev/null @@ -1,252 +0,0 @@ -/* css Zen Garden submission - 'A Walk in the Garden', by Simon Van Hauwermeiren,, http://users.skynet.be/bk316398/temp.html */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Simon Van Hauwermeiren */ - - -/* 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. */ - -html { - background: url(02.gif); - margin: 0; - padding: 0; -} - -body { - margin: 0; - padding: 0; -} - -.page-wrapper { - background: url(08.jpg) no-repeat 270px 1335px; -} - -p { - font-family: Georgia, serif; - font-size: 12px; - color: #666; - margin: 10px 15px 20px 10px; - line-height: 16px; -} - -abbr { - color: #063; - border-bottom: 1px dotted #063; - cursor: help; -} - -header h1 { - background: url(01.jpg) no-repeat left top; - width: 750px; - height: 404px; - margin: 0; - - text-indent: 300%; - white-space: nowrap; - overflow: hidden; -} - -header h2, .summary p:first-child { - display: none; -} - -.preamble h3 { - background: url(conh1.gif) no-repeat left top; - width: 367px; - height: 68px; - margin: 0; -} - -h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.explanation h3 { - background: url(conh2.gif) no-repeat left top; - width: 367px; - height: 68px; - margin: 0; -} - -.participation h3 { - background: url(conh3.gif) no-repeat left top; - width: 367px; - height: 68px; - margin: 0; -} - -.benefits h3 { - background: url(conh4.gif) no-repeat left top; - width: 367px; - height: 68px; - margin: 0; -} - -.requirements h3 { - background: url(conh5.gif) no-repeat left top; - width: 367px; - height: 68px; - margin: 0; -} - -.participation a, .requirements a, .summary a, footer a { - color: #063; - text-decoration: underline; -} - -.participation a:hover, .requirements a:hover, .summary a:hover { - text-decoration: none; -} - -footer a:hover { - color: #FFF; - text-decoration: none; - background: #063; -} - -.supporting { - width: 367px; - text-align: justify; -} - -.intro { - width: 367px; - text-align: justify; -} - -.summary p:last-child { - background: url(05.gif) no-repeat right top; - padding: 0 40px 0 0; - margin: -20px 0 0 0; - height: 50px; - line-height: 42px; - text-align: right; - font-style: italic; -} - -.sidebar { - position: absolute; - top: 470px; - left: 405px; - font-family: Verdana, Arial, sans-serif; - font-size: 10px; -} - -.design-selection ul { - background: url(03.gif) no-repeat left top; - height: 465px; - width: 208px; - margin: 0; - padding: 0; -} - -.design-selection li { - background: url(04.gif) no-repeat left top; - height: 39px; - width: 120px; - list-style-type: none; - padding: 5px 0 0 55px; -} - -.design-archives ul { - background: url(06.gif) no-repeat left top; - width: 208px; - height: 113px; - margin: 0; - padding: 0; -} - -.design-archives li { - list-style-type: square; - padding: 7px 0 0 5px; - margin: 0 0 0 35px; -} - -.zen-resources ul { - background: url(07.gif) no-repeat left top; - width: 208px; - height: 164px; - margin: 0; - padding: 0; -} - -.zen-resources li { - list-style-type: square; - padding: 7px 0 0 5px; - margin: 0 0 0 35px; -} - -.zen-resources h3 { - padding: 0; - background: url(listh3.gif) no-repeat left bottom; - width: 208px; - height: 50px; - margin: 0; -} - -.design-archives h3 { - padding: 0; - background: url(listh2.gif) no-repeat left bottom; - width: 208px; - height: 50px; - margin: 0; -} - -.design-selection h3 { - background: url(listh1.gif) no-repeat left bottom; - width: 208px; - height: 50px; - margin: 0; -} - -.zen-resources h3, .design-archives h3, .design-selection h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.design-selection a.designer-name { - display: inline; - color: #333; - text-decoration: underline; - font-size: 10px; -} - -.design-selection a.designer-name:hover { - color: #333; - text-decoration: none; -} - -.design-selection a { - font-family: Arial, Verdana, sans-serif; - display: block; - font-size: 12px; - color: #063; - text-decoration: underline; -} - -.design-selection a:hover, .zen-resources a:hover, .design-archives a:hover { - color: #633; - text-decoration: none; -} - -.zen-resources a, .design-archives a { - font-family: Arial, Verdana, sans-serif; - font-size: 12px; - color: #063; - text-decoration: underline; -} - -footer { - clear: both; - width: 605px; - border-top: 1px solid #666; - font-family: Verdana, Arial, sans-serif; - font-size: 14px; - text-align: right; - margin: 0 0 15px 0; -} \ No newline at end of file diff --git a/src/data/designs/207/metadata.json b/src/data/designs/207/metadata.json deleted file mode 100644 index 547953733fcfebe4aef952af811da2444e2aea30..0000000000000000000000000000000000000000 --- a/src/data/designs/207/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "207", - "url": "https://www.csszengarden.com/207", - "css_url": "https://www.csszengarden.com/207/207.css", - "description": "The design features a clean and minimalistic layout with a soothing green background that incorporates nature elements, promoting tranquility and reflection. The use of serif typography enhances readability while maintaining an elegant look. The layout is structured with clear sections for easy navigation, supported by strategic use of white space to create a calm and inviting atmosphere.", - "categories": [ - "Minimalism", - "Nature", - "Typography", - "Web Design", - "Modern" - ], - "visual_characteristics": [ - "Soothing Color Palette", - "Nature Elements", - "Clean Layout", - "Serif Typography", - "Use of White Space" - ] -} \ No newline at end of file diff --git a/src/data/designs/207/screenshot_desktop.png b/src/data/designs/207/screenshot_desktop.png deleted file mode 100644 index 4975ffcc5abd515887f351ae6b7e8475656cba7e..0000000000000000000000000000000000000000 --- a/src/data/designs/207/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e72dcf4d03d06aacaa607fd67df2f64f2c3bd1e17361966998977736c56cf6e4 -size 445608 diff --git a/src/data/designs/207/screenshot_mobile.png b/src/data/designs/207/screenshot_mobile.png deleted file mode 100644 index ce4ccad836c13988e7b08caa7d64066b0ade28c1..0000000000000000000000000000000000000000 --- a/src/data/designs/207/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:523d6c2ba1132bade63acc42ad18c3ac9168c10cbee18e9bee1466a047c14ca5 -size 743158 diff --git a/src/data/designs/207/style.css b/src/data/designs/207/style.css deleted file mode 100644 index e8b01d18493565156fdd4f57ba65b76107f46e17..0000000000000000000000000000000000000000 --- a/src/data/designs/207/style.css +++ /dev/null @@ -1,185 +0,0 @@ -/* css Zen Garden submission - 'Kyoto Forest', by John Politowski, http://rpmdesignfactory.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2007, John Politowski */ - - -/* 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. */ - - -/* basic elements */ - -html { - margin: 0; - padding: 0; -} - -body { - font-family:Arial, Helvetica, sans-serif; - line-height:18px; - font-size:12px; - color: #06185c; - background: #e6fad6 url(body_bg.jpg) no-repeat top center; - margin: 0; - padding: 0; -} - -body a:link, a:active, a:visited{ - text-decoration:none; - color:#720a0b; -} - -body a:hover{ - text-decoration:underline; -} - -p{ - margin: 10px; - padding: 0; -} - -h1, h2, h3 { - display:none; -} - -ul { - list-style-type: none; - padding-left: 0; - margin-left: 0; -} - -li { - background: url(bullet.gif) left center no-repeat; - padding-left: 7px; - margin-bottom: 5px; -} - -abbr { - border-bottom: none; -} - -/* content div's */ - -.page-wrapper { - margin: auto; - width:892px; - background:url(content_bg_top.jpg) no-repeat top center; - position:relative; -} - -.intro{ - width:892px; - height:451px; -} - -header { - background:url(header_what_about.gif) no-repeat top center; - height:34px; - overflow:hidden; - position:absolute; - top:462px; - left:205px; - width:587px; -} - -h1, h2 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary { - display:none; -} - -.preamble{ - padding:240px 100px 0 205px; -} - -.preamble p:nth-child(2){ - margin-top: 20px; -} - -.supporting{ - background-image:url(content_tile.jpg); - height:100%; -} - -.explanation { - padding:50px 100px 30px 205px; - background:url(content_bg_bottom.jpg) top no-repeat; - height:100%; -} - -.participation { - margin:20px 100px 30px 205px; - padding-top:40px; - background: url(header_participation.gif) no-repeat top center; - height:100%; -} - -.benefits { - margin:65px 100px 30px 205px; - padding-top:40px; - background: url(header_benefits.gif) no-repeat top center; - height:100%; -} - -.requirements{ - margin:65px 100px 30px 205px; - padding:40px 0 15px 0; - background: url(header_requirements.gif) no-repeat top center; - border-bottom:1px solid #720a0b; - height:100%; -} - -footer{ - padding:10px; - text-align:center; -} - -/* link list and extra div's */ - -.sidebar { - position:absolute; - width:150px; - top:603px; - z-index:5; - color: #666666; - font-size:10px; - left: 25px; - height:550px; - line-height:13px; -} - -.sidebar a:link, a:active, a:visited { - color:#113c05; - text-decoration:none; -} - -.sidebar a:hover{ - text-decoration: underline; -} - -.design-selection{ - background:url(header_select_design.gif) top left no-repeat; - margin: 5px 0 0 0; - padding: 20px 0 0 0; - width:150px; -} - -.design-archives{ - background:url(header_archives.gif) top left no-repeat; - margin: 10px 0 0 0; - padding: 30px 0 0 0; - width:150px; -} - -.zen-resources{ - background:url(header_resources.gif) top left no-repeat; - margin: 15px 0 0 0; - padding: 30px 0 0 0; - width:150px; -} \ No newline at end of file diff --git a/src/data/designs/208/metadata.json b/src/data/designs/208/metadata.json deleted file mode 100644 index 110f8447eb6455cfd6014507707d6b75939b1a3c..0000000000000000000000000000000000000000 --- a/src/data/designs/208/metadata.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "id": "208", - "url": "https://www.csszengarden.com/208", - "css_url": "https://www.csszengarden.com/208/208.css", - "description": "This visual design showcases a clean and structured layout with a soft color palette, featuring a central content section flanked by sidebars. The use of floral imagery and white space creates a calm and serene atmosphere, while the typographical hierarchy aids in effective content navigation.", - "categories": [ - "web design", - "information layout", - "minimalist design", - "typography-focused" - ], - "visual_characteristics": [ - "soft color palette", - "floral imagery", - "structured layout", - "ample white space", - "typographical hierarchy" - ] -} \ No newline at end of file diff --git a/src/data/designs/208/screenshot_desktop.png b/src/data/designs/208/screenshot_desktop.png deleted file mode 100644 index 16e96635626c9fb1aeb88dad78eb898ba997c40e..0000000000000000000000000000000000000000 --- a/src/data/designs/208/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ad663d13c089590e92e5d7a8ae14993b8484480c198800a95f37eb2aa24e5651 -size 794572 diff --git a/src/data/designs/208/screenshot_mobile.png b/src/data/designs/208/screenshot_mobile.png deleted file mode 100644 index 630ff598081038a5eedd7966d54c13c7f8c06e45..0000000000000000000000000000000000000000 --- a/src/data/designs/208/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:5f1bc296fbadab34bfcfbd04760d5596ea6cbdb2c78e4151ce8c5e5fb4938508 -size 400871 diff --git a/src/data/designs/208/style.css b/src/data/designs/208/style.css deleted file mode 100644 index 6b392ac2f8cec9ce2dda9db20dd9939dc5fbd281..0000000000000000000000000000000000000000 --- a/src/data/designs/208/style.css +++ /dev/null @@ -1,251 +0,0 @@ -/* css Zen Garden submission - 'Sakura', by Tatsuya Uchida, http://www.re-bloom.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Tatsuya Uchida */ - - -/* 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. */ - - -/* /////////////// basic elements /////////////// */ - -body { -margin:0; -padding:0; -font:75%/1.4 verdana,Helvetica,sans-serif; -background-image:url(body_bg.gif); -text-align:center; -} - -h1,h2 { -display:none; -} - -h3 { -height:38px; -margin:0; -padding:0; - -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} - -p {margin:0;padding:0;} - -abbr { -border:none; -} - -a { -color:#D9189F; -background-color:#ffffff; -text-decoration:underline; -} - -a:hover, a:hover { -color:#FC7AD5; -background-color:#ffffff; -} - - -/* ////////////// layout ///////////////// */ - -.page-wrapper { -width:772px; -margin:0 auto; -padding:0 13px; -position:relative; -background:url(bg.gif) repeat-x #dfdfdf; -border-left:1px solid #ffffff; -border-right:1px solid #ffffff; -color:#454545; -text-align:left; -} - -header { -width:772px; -height:178px; -background:url(top.jpg); -} - -.summary, .preamble, .explanation, .participation, .benefits, .requirements { -width:546px; -background-color:#ffffff; -background-repeat:repeat-y; -margin:0 0 2px 226px; -color:#454545; -display:block;padding:0; -} - -footer { -width:539px; -margin:5px 0 0 226px; -text-align:right; -padding:3px 14px 43px 0; -} - -.sidebar { -position:absolute; -top:179px; -left:20px; -width:207px; -} - -.design-selection, .design-archives, .zen-resources { -margin:0 0 2px 0; -} - -.summary p, .explanation p, .benefits p { -padding:0 15px 10px 77px; -} - -.preamble p, .participation p, .requirements p { -padding:0 85px 10px 17px; -} - -.requirements p:nth-child(6) { -padding:0 85px 10px 17px; -} - -.sidebar li { -list-style:none; -padding:6px 0 10px 0; -background:url(line.gif) bottom repeat-x; -} - -.sidebar li a { -padding-left:7px; -background:url(link.gif) left center no-repeat; -text-decoration:none; -} - -.sidebar li a:hover { -text-decoration:underline; -} - -.summary p:first-child { -padding-top:14px; -background: - url(quicksummary_top.gif) top no-repeat, - url(right_bg.gif) right repeat-y; -} - -.summary p:last-child { -padding-bottom:20px; -background: - url(right_bottom.gif) bottom no-repeat, - url(right_bg.gif) right repeat-y; -} - -.design-selection li a { -display:block; -font-weight:bold; -background-position:0 0.6em; -} - -.design-selection a.designer-name { -display:inline; -color:#666666; -padding:0; -background:none; -background-color:#ffffff; -} - -footer a{ -text-decoration:none; -color:#888888; -background-color:#dfdfdf; -border:1px solid #bdbdbd; -padding:3px 3px; -height:100%; -} - -footer a:hover{ -background-color:#ebebeb; -color:#777777; -} - -.extra1, .extra2, .extra3, .extra4, .extra5, .extra6{display:none;} - - -/* ///////////// background image ////////////// */ - -.summary p:first-child { -padding-top:14px; -position: relative; -background:url(quicksummary_top.gif) top no-repeat; -} - -.summary p:last-child { -padding-bottom:20px; -} - -/* right image */ -.summary p, .explanation p , .benefits p { -background:url(right_bg.gif) right repeat-y; -} -.design-selection, .design-archives, .zen-resources { -background:url(left_bg.gif) repeat-y; -} - -/* side image */ -.summary {background-image:url(img_quicksummary.jpg);background-position:left bottom;} -.preamble {background-image:url(img_preamble.jpg);background-position:right bottom;} -.explanation {background-image:url(img_explanation.jpg);background-position:left bottom;} -.participation {background-image:url(img_participation.jpg);background-position:right bottom;} -.benefits {background-image:url(img_benefits.jpg);background-position:left bottom;} -.requirements {background-image:url(img_requirements.jpg);background-position:right bottom;} - -.preamble p:last-child, .main p:last-child { - padding-bottom: 25px; -} - -/* h3 image */ -.preamble h3 {background:url(title_preamble.gif) no-repeat;} -.explanation h3 {background:url(title_explanation.gif) no-repeat;} -.participation h3 {background:url(title_participation.gif) no-repeat;} -.benefits h3 {background:url(title_benefits.gif) no-repeat;} -.requirements h3 {background:url(title_requirements.gif) no-repeat;} -.design-selection h3 {background:url(title_select.gif) no-repeat;} -.design-archives h3 {background:url(title_archives.gif) no-repeat;} -.zen-resources h3 {background:url(title_resources.gif) no-repeat;} - -/* bottom image */ -.summary p:last-child, .preamble p:nth-child(4), .explanation p:nth-child(3), .participation p:nth-child(4), .benefits p:nth-child(2), .requirements p:nth-child(6) { -position: relative; -padding-bottom: 20px; -} - -.summary p:first-child:before { -content: ' '; -display: block; -position: absolute; -top: 20px; -bottom: 0; -right: 0; -width:20px; -background:url(right_bg.gif) right repeat-y; -} -.summary p:last-child:after, .preamble p:nth-child(4):after, .explanation p:nth-child(3):after, .participation p:nth-child(4):after, .benefits p:nth-child(2):after, .requirements p:nth-child(6):after { -content: ' '; -display: block; -position: absolute; -bottom: 0; -left: 0; -right: 0; -height:20px; - -background:url(right_bottom.gif) bottom no-repeat; -width: 100%; -height: 20px; -margin-top: -20px; -} - -.design-selection ul, .design-archives ul, .zen-resources ul{ -margin:0; -padding:0 25px 20px 17px; -background:url(left_bottom.gif) bottom no-repeat; -} diff --git a/src/data/designs/209/metadata.json b/src/data/designs/209/metadata.json deleted file mode 100644 index 6514c88d1a750dcc48996349f6ab3651e46363e2..0000000000000000000000000000000000000000 --- a/src/data/designs/209/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "209", - "url": "https://www.csszengarden.com/209", - "css_url": "https://www.csszengarden.com/209/209.css", - "description": "The design showcases a clean and modern aesthetic with an emphasis on typography and readability. The layout uses a structured grid with ample whitespace, enhancing clarity and focus on the content. The color scheme is muted, with contrasting elements to draw attention to key areas, such as headings and hyperlinks. Imagery complements the textual content, offering visual interest alongside information delivery.", - "categories": [ - "Modern", - "Minimalist", - "Text-centric", - "Web Design-Inspired" - ], - "visual_characteristics": [ - "Clean Typography", - "Grid Layout", - "Muted Color Palette", - "Whitespace Utilization" - ] -} \ No newline at end of file diff --git a/src/data/designs/209/screenshot_desktop.png b/src/data/designs/209/screenshot_desktop.png deleted file mode 100644 index 301c02b51c0c19e8b21b81773cc6f54549d1a092..0000000000000000000000000000000000000000 --- a/src/data/designs/209/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:0343dbda9a5ca5172f02cb8b70de8507fb27f7568fd44c1261fb8cd29fe8330c -size 585106 diff --git a/src/data/designs/209/screenshot_mobile.png b/src/data/designs/209/screenshot_mobile.png deleted file mode 100644 index 320cd369441921b45923d30fa3729db2a207bcbf..0000000000000000000000000000000000000000 --- a/src/data/designs/209/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3e72dd25bcbf4a299b560968d0f0183c14a7cb2ff3a74a92e7a59fcb9022416c -size 519881 diff --git a/src/data/designs/209/style.css b/src/data/designs/209/style.css deleted file mode 100644 index 8ab36a84107f39e9c3973682e2b79b130d499baf..0000000000000000000000000000000000000000 --- a/src/data/designs/209/style.css +++ /dev/null @@ -1,351 +0,0 @@ -/* css Zen Garden submission - 'CSS Co., Ltd.', by Benjamin Klemm, http://www.re-bloom.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2007, Benjamin Klemm */ - - -/* 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. */ - - -* { - margin: 0; - padding: 0; -} - - -body { - background: #DADADA url(bg_body.gif) left top repeat-x; - margin: 0 auto; - font-family: Arial, Helvetica, sans-serif; -} - - -.page-wrapper { - margin: 0 auto; - width: 776px; - position: relative; - background: transparent url(bg_container.gif) left top repeat-y; - z-index: 1; - margin-bottom: 50px; - -} - - - -/* Formatierung des Intro Blocks ------------------------------------------------------------------------*/ - -.intro { - background: transparent url(bg_intro.jpg) right top no-repeat; - position: relative; - padding: 1px; - -} - - -header { - display: inline; - height: 0; - left: -1000px; - overflow: hidden; - position: absolute; - top: -1000px; - width: 0; -} - - h1{ - font: bold 154%/25px Arial, Helvetica, sans-serif; - } - - h2{ - font: bold 90%/25px Arial, Helvetica, sans-serif; - } - - -.summary { - color: #000; - font: normal 75%/18px Arial, Helvetica, sans-serif; - right: 60px; - position: absolute; - top: 25px; -} - - .summary p:first-child { - display: inline; - height: 0; - left: -1000px; - overflow: hidden; - position: absolute; - top: -1000px; - width: 0; - } - - .summary a, .summary a:link, .summary a:visited { - color: #F29E00; - font-weight: bold; - } - - .summary a:hover, .summary a:active, .summary a:focus { - text-decoration: none; - } - - -.preamble { - background: transparent url(bg_preamble.jpg) right top no-repeat; - color: #fff; - font: normal 80%/18px Arial, Helvetica, sans-serif; - padding: 80px 30px 15px 15px; - margin-left: 210px; - margin-top: 192px; - height: 100%; -} - - .preamble h3 { - background: transparent url(hl_roadto.gif) left top no-repeat; - height: 37px; - margin: 0 0 10px 0; - width: 508px; - } - - .preamble abbr { - border-bottom:1px dotted #F29E00; - color: #F29E00; - font-weight: normal; - font-size: 85%; - } - - .preamble p { - padding-left: 30px; - } - - - -/* Formatierung des Content Blocks (supportingText) ------------------------------------------------------------------------*/ - -.supporting { - color: #fff; - margin-left: 210px; - font: normal 80%/18px Arial, Helvetica, sans-serif; - padding: 15px 35px 15px 15px; - position: relative; - height: 100%; -} - - .supporting abbr { - border-bottom:1px dotted #F29E00; - color: #F29E00; - font-size: 85%; - font-weight: normal; - } - - .supporting a, .supporting a:link, .supporting a:visited { - color: #F29E00; - font-weight: bold; - text-decoration: underline; - } - - .supporting a:hover, .supporting a:active, .supporting a:focus { - text-decoration: none - } - - .supporting p { - padding-left: 30px; - - } - - -.explanation { - width: 250px; - float: left; -} - - .explanation h3 { - background: transparent url(hl_sowhat.gif) left top no-repeat; - height: 37px; - margin: 0 0 10px 1px; - width: 260px; - } - - .explanation p:nth-child(2) { - background: transparent url(cont_img_01.jpg) 30px 0px no-repeat; - padding-top: 130px; - } - - -.participation { - margin-left: 265px; - margin-top: -23px; - width: 240px; -} - - .participation h3 { - background: transparent url(hl_participation.gif) left top no-repeat; - height: 37px; - margin: 23px 0 10px 1px; - width: 247px; - } - - .participation p:nth-child(2) { - background: transparent url(cont_img_02.jpg) 30px 0px no-repeat; - padding-top: 130px; - } - - -.benefits h3 { - background: transparent url(hl_benefits.gif) left top no-repeat; - height: 37px; - margin: 23px 0 10px 1px; - width: 508px; -} - - -.requirements { - margin-bottom: 50px; -} - - .requirements h3 { - background: transparent url(hl_requirements.gif) left top no-repeat; - height: 37px; - margin: 23px 0 10px 1px; - width: 508px; - } - - -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { - text-indent: 105%; - white-space: nowrap; - overflow: hidden; -} - - - -/* Die Linklisten ------------------------------------------------------------------------*/ - -.sidebar { - background: transparent url(bg_linkList.gif) 0px 2px repeat-y; - color: #fff; - font-weight: normal; - padding: 15px 10px 0 0; - position: absolute; - top: 193px; - width: 221px; -} - - .sidebar h3 { - padding-left: 10px; - } - - .sidebar a, .sidebar a:link, .sidebar a:visited { - color: #000; - text-decoration: underline; - } - - .sidebar a:hover, .sidebar a:active, .sidebar a:focus { - text-decoration: none; - } - - .sidebar ul li { - font-size: 70%; - list-style: square; - - } - - -.design-selection { - background: transparent url(bg_lselect.gif) left bottom no-repeat; - padding-bottom: 25px; -} - - .select { - background: transparent url(h1_lselect.gif) left top no-repeat; - display: block; - margin: 0 auto; - height: 29px; - width: 185px; - } - - .design-selection ul li a { - display: block; - font: bold 110%/19px Arial, Helvetica, sans-serif; - } - - .design-selection ul li a.designer-name { - color: #fff; - display: inline; - font: normal 90%/19px Arial, Helvetica, sans-serif; - } - - -.design-archives { - background: transparent url(bg_lselect.gif) left bottom no-repeat; - padding: 15px 0 40px 0; -} - - - .archives { - background: transparent url(h1_larchives.gif) left top no-repeat; - display: block; - margin: 0 auto; - height: 29px; - width: 185px; - } - - -.zen-resources { - background: transparent url(bg_lresources.gif) left bottom no-repeat; - padding-bottom: 30px; -} - - - .resources { - background: transparent url(h1_lresources.gif) left top no-repeat; - display: block; - margin: 15px auto; - height: 29px; - width: 185px; - } - - -.design-archives ul li a, .zen-resources ul li a { - font-weight: bold; -} - - -.zen-resources ul li, .design-archives ul li, .design-selection ul li { - margin: 14px 0 14px 35px; -} - - -.resources, .archives, .select { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -/* Footer Formatierung ------------------------------------------------------------------------*/ - -footer { - background: transparent url(bg_footer.gif) left top no-repeat; - bottom: -27px; - left: 25px; - height: 54px; - line-height: 50px; - position: absolute; - width: 312px; - padding-left: 37px; -} - - .supporting footer a, .supporting footer a:link, .supporting footer a:visited { - color: #000; - padding: 0 6px; - } - - * html footer { - bottom: -28px; - } diff --git a/src/data/designs/210/metadata.json b/src/data/designs/210/metadata.json deleted file mode 100644 index 0bc2eac63e2b68e00b4f04e2e033c1ca988c1e5a..0000000000000000000000000000000000000000 --- a/src/data/designs/210/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "210", - "url": "https://www.csszengarden.com/210", - "css_url": "https://www.csszengarden.com/210/210.css", - "description": "The design features a tranquil ocean theme with a deep blue color palette, creating a soothing and immersive visual experience. The gradient background mimics ocean depths, complemented by images of fish and a clear sky with clouds. The typography is clean and modern, with white and orange text that stands out against the blue background, maintaining readability. The layout is well-structured, guiding the viewer's attention systematically from top to bottom, while the sidebar lists additional navigation options.", - "categories": [ - "Ocean Theme", - "Tranquil", - "Immersive", - "Informative", - "Navigation" - ], - "visual_characteristics": [ - "Gradient Background", - "Clean Typography", - "Imagery of Fish", - "Bright Accent Colors", - "Structured Layout" - ] -} \ No newline at end of file diff --git a/src/data/designs/210/screenshot_desktop.png b/src/data/designs/210/screenshot_desktop.png deleted file mode 100644 index c00888b3651339a33f92bb63509e87e140957a12..0000000000000000000000000000000000000000 --- a/src/data/designs/210/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b2f6c54fb497582616a1ba8127e3c6df21bd6c6d6b558ed988c5bceac0708a81 -size 604804 diff --git a/src/data/designs/210/screenshot_mobile.png b/src/data/designs/210/screenshot_mobile.png deleted file mode 100644 index 9934405615cafe3e17bcc41a94aeb300480ba8ed..0000000000000000000000000000000000000000 --- a/src/data/designs/210/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6d667aafca8a7075daf7f412aa3471fdb1db19ee220a4160a18a0bdec395955e -size 412792 diff --git a/src/data/designs/210/style.css b/src/data/designs/210/style.css deleted file mode 100644 index 742f8873abba7c72250f171d3711c494ea0641c2..0000000000000000000000000000000000000000 --- a/src/data/designs/210/style.css +++ /dev/null @@ -1,301 +0,0 @@ -/* css Zen Garden submission 210 - 'Oceanscape', by Justin Gray, http://www.pixel-house.com.au/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2007, Justin Gray */ - - -/* 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. */ - - - - -/*------ basic elements -------------------------------------------------------------*/ - -body { - font-family: Arial, Helvetica, sans-serif; - background: #122981 url(gradient_bg.jpg) repeat-x; - margin: 0px; - } - -p { text-align: justify; color: #fff; font-size: 0.70em; line-height: 1.25em; } -a:link, a:visited { text-decoration: underline; color: #a5bcff; } -a:hover, a:active { text-decoration: none; color: #ff9600; } -li { text-decoration: none; list-style-type: none; display: block; color: #fff; } - - - -/*------ specific divs --------------------------------------------------------------*/ - -.page-wrapper { - width: 536px; - padding-left: 20px; - padding-right: 20px; - margin: 200px auto 0px auto; - position: relative; - z-index: 6; - } - - -.intro { width: 356px; float: left; } -header { margin-bottom: 20px; float: left; } - - -h1 { - background: transparent url(h1.gif) no-repeat top left; - width: 355px; - height: 29px; - float: left; - margin: 0px; - } - -h2 { - background: transparent url(h2.gif) no-repeat top left; - width: 167px; - height: 12px; - float: right; - margin: 2px 0 0 0; - } - -.summary { - background: transparent url(divider01.jpg) no-repeat; - float: left; - padding-top: 50px; - } - -.summary p:first-child { - background: transparent url(summary.gif) no-repeat; - width: 356px; - height: 49px; - margin: 0px 0px 6px 0px; - } -.summary p:first-child, h2, h1 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.summary p:last-child { width: 355px; display: block; } - - - -/*-----------------------------------------------------------------------------------*/ - -.supporting { width: 356px; float: left; } - -.supporting h3, .intro h3 { - letter-spacing: 1px; - margin: 0px 0px 20px 0px; - color: #7D775C; - width: 355px; - height: 18px; - } -.preamble, .explanation, .participation, .benefits, .requirements -{ padding-top: 60px; margin-top: 6px; float: left; } - - -.preamble { background: transparent url(divider02.jpg) no-repeat; } -.explanation { background: transparent url(divider03.jpg) no-repeat; } -.participation { background: transparent url(divider04.jpg) no-repeat; } -.benefits { background: transparent url(divider05.jpg) no-repeat; } -.requirements { background: transparent url(divider06.jpg) no-repeat; } - - -.sidebar { - width: 141px; - position: absolute; - top: 101px; - left: 410px; - margin: 0px; - padding: 0px; - } - -.sidebar .wrapper { - font-size: 0.70em; - background: transparent url(paper-bg.jpg) top left repeat-y; - padding: 10px; - width: 141px; - } - -.sidebar ul { - margin: 0px; - padding: 0px; - } - -.sidebar a.designer-name { - display: inline; - color: #ff9600; - text-decoration: none; - font-weight: normal; - text-transform: capitalize; -} - -.sidebar li a { - color: #fff; - text-decoration: none; - } - -.sidebar li a:hover { - text-decoration: underline; - } - -.design-selection li { - line-height: 16px; - padding: 5px 0px; - border-bottom: 1px solid #003d90; - } -.design-selection li a { - font-weight: bold; - color: #fff; - display: block; - text-transform: uppercase; - text-decoration: none; - } - -.design-archives li, .zen-resources li { - line-height: 16px; - padding: 1px 0px; - color: #fff; - } - - -/*------ Image Replacement for headings----------------------------------------------*/ - - -.sidebar h3 { - width: 141px; - height: 20px; - display: block; - margin: 0px; - } - -.preamble h3 { background: transparent url(h3_road.gif) no-repeat; } -.explanation h3 { background: transparent url(h3_about.gif) no-repeat; } -.participation h3 { background: transparent url(h3_participation.gif) no-repeat; } -.benefits h3 { background: transparent url(h3_benefits.gif) no-repeat; } -.requirements h3 { background: transparent url(h3_requirements.gif) no-repeat; } - - -.sidebar h3.select { background: transparent url(h3_select.gif) no-repeat; } -.sidebar h3.archives { - margin-top: 22px; - background: transparent url(h3_archives.gif) no-repeat; - } -.sidebar h3.resources { - margin-top: 22px; - background: transparent url(h3_resources.gif) no-repeat; - } - -.preamble h3, -.explanation h3, -.participation h3, -.benefits h3, -.requirements h3, -.sidebar h3.select, -.sidebar h3.archives, -.sidebar h3.resources { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - - -/*------ footer ---------------------------------------------------------------------*/ - -footer { - margin-top: 20px; - margin-bottom: 25px; -} - -footer a:link, footer a:visited { - margin-right: 6px; - color: #ff9600; - } - - -/*------ main images -----------------------------------------------------------------*/ - - -.extra1, .extra2, .extra3, .extra3::after, .extra4, .extra5, .extra6, .extra6::after { - position: absolute; -} - - -.extra1 { - background: url(clouds.jpg) repeat-x; - top: 0px; - right: 0px; - width: 100%; - height: 104px; - } - -.extra2 { - background: url(water_edge.jpg) repeat-x; - top: 104px; - right: 0px; - width: 100%; - height: 75px; - } - -.extra3 { - background: url(fish01.jpg) no-repeat right top; - z-index: 3; - top: 960px; - right: 4%; - width: 300px; - height: 123px; - } - -.extra3::after { - display: block; - content: " "; - background: url(fish_bottom.gif) no-repeat; - z-index: 3; - top: 1000px; - width: 224px; - height: 108px; - } - -.extra4 { - background: url(sunlight.jpg) no-repeat; - z-index: 3; - top: 0px; - left: 0px; - width: 472px; - height: 481px; - } - -.extra5 { - background: url(fish_top.gif) no-repeat; - z-index: 7; - top: 220px; - left: 20px; - width: 180px; - height: 80px; - } - -.extra6 { - z-index: 2; - top: 125em; - left: 0px; - width: 100%; - height: 426px; - background: url(seafloor_bg.jpg) repeat-x left bottom; - } - -.extra6::after { - display: block; - content: " "; - z-index: 2; - top: 0px; - left: 0px; - width: 633px; - height: 426px; - background: url(seafloor.jpg) no-repeat; -} - - - - - diff --git a/src/data/designs/211/metadata.json b/src/data/designs/211/metadata.json deleted file mode 100644 index 5f8f2ca68167494f87562c9ce60fe92731baed63..0000000000000000000000000000000000000000 --- a/src/data/designs/211/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "211", - "url": "https://www.csszengarden.com/211", - "css_url": "https://www.csszengarden.com/211/211.css", - "description": "The design is elegant and minimalistic, utilizing a clean white background with a sophisticated purple orchid image that adds a splash of color and complements the refined typography. The layout is vertically oriented with distinct sections, enhancing readability and a sense of tranquility, which aligns with the theme of 'Zen Garden'.", - "categories": [ - "Minimalistic", - "Elegant", - "Botanical", - "Vertical Layout" - ], - "visual_characteristics": [ - "White Background", - "Purple Orchid Image", - "Refined Typography", - "Clean Lines" - ] -} \ No newline at end of file diff --git a/src/data/designs/211/screenshot_desktop.png b/src/data/designs/211/screenshot_desktop.png deleted file mode 100644 index c179801e3251ef563a04d7662f7ce0b2075d7851..0000000000000000000000000000000000000000 --- a/src/data/designs/211/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:872a47973e1733d639f7c2afaedb78fa7e7683ffa047205f63c8c36c28e634fd -size 471438 diff --git a/src/data/designs/211/screenshot_mobile.png b/src/data/designs/211/screenshot_mobile.png deleted file mode 100644 index 3ffb7a1e8c4be5685c0a12d8117bf3437b72b909..0000000000000000000000000000000000000000 --- a/src/data/designs/211/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:89b5db867927f283936d2c755954d6eba0883c5bdcf4dae96d76e2da57786978 -size 480960 diff --git a/src/data/designs/211/style.css b/src/data/designs/211/style.css deleted file mode 100644 index 9272e0f571309c4fec35dde92419ac40f66e6e55..0000000000000000000000000000000000000000 --- a/src/data/designs/211/style.css +++ /dev/null @@ -1,276 +0,0 @@ -/* css Zen Garden submission 211 - 'Orchid Beauty', by Kevin Addison, http://www.kevinaddison.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2006, Kevin Addison */ - - -/* 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. */ - - - - - -/* Orchid Beauty Style Sheet */ -/* --------------------------*/ - -a:link { - color: #6D2542; - text-decoration: none; - } -a:visited { - color: #999999; - text-decoration: none; - } -a:hover { - color: #999999; - text-decoration: underline; - } -a:active { - color: #999999; - text-decoration: none; - } - -body { -margin:0 0 0 0; -padding:0 0 0 0; -} - - -.page-wrapper { -width:630px; -margin: auto; -padding: 0 0 100px 0; -background-image:url(rounded.jpg); -background-repeat: no-repeat; -background-position:bottom; -border:0px dotted #999999; -position:relative; -} - -header { -background: transparent url(header.jpg) no-repeat center top; -border:0px dotted #999999; -width:630px; -height:387px; -} - -.intro { -width:400px; -margin:0 0 0 0; -border:0px dotted #999999; -} - -.summary p:last-child { -border:0px solid #000000; -margin:-110px 0 95px 288px; -padding: 0 0 0 15px; -text-transform: uppercase; -width:290px; -font-family:Geneva, Arial, Helvetica, sans-serif; -font-size:10px; -font-weight:normal; -color:#999999; -background: transparent url(bullet.jpg) no-repeat 0% 28%; -} - -.supporting { -width:350px; -margin:0 0 0 0; -} - -.preamble, .explanation, .participation, .benefits, .requirements { -border-bottom:0px dotted #999999; -position:relative; -width:350px; -margin:0 0 0 60px; -} - -.requirements { -margin-bottom:35px; -} - -.preamble h3 { -background-image: url(title01.jpg); -background-repeat: no-repeat; -background-position: left top; -width:286px; -height:64px; -margin-bottom:-5px; -} - -.explanation h3 { -background-image: url(title02.jpg); -background-repeat: no-repeat; -background-position: left top; -width:286px; -height:66px; -margin-bottom:-5px; -} - -.participation h3 { -background-image: url(title03.jpg); -background-repeat: no-repeat; -background-position: left top; -width:286px; -height:66px; -margin-bottom:-5px; -} - -.benefits h3 { -background-image: url(title04.jpg); -background-repeat: no-repeat; -background-position: left top; -width:286px; -height:66px; -margin-bottom:-5px; -} - -.requirements h3 { -background-image: url(title05.jpg); -background-repeat: no-repeat; -background-position: left top; -width:286px; -height:66px; -margin-bottom:-5px; -} - -header h1, header h2, .summary p:first-child { -display:none; -} -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { - text-indent: 100%; - white-space: nowrap; - overflow: hidden; -} - -.preamble h3, .explanation h3, .participation h3, .benefits h3, .requirements h3 { -text-indent: 100%; -white-space: nowrap; -overflow: hidden; -} - -p { -color: #999999; -font-size:11px; -font-weight:normal; -line-height:1.4em; -font-family: Geneva, Arial, Helvetica, sans-serif; -} - -.sidebar { -position: absolute; -left:160px; -right:auto; -top: 400px; -padding:0 0 0 0; -margin-left: 270px; -width: 180px; -border:0px dotted #666666; -background: transparent url(orchid.jpg) no-repeat bottom; -height:810px; -} - -.sidebar ul { - text-align: left; - list-style: none; - margin: 0 0 0 0; - padding:0 0 15px 35px; - font-size:10px; - font-family:Geneva, Arial, Helvetica, sans-serif; - border:0px dotted #666666; - width:120px; - } - -.sidebar ul li{ - margin: 0; - padding: 3px 0 3px 0; - border-bottom: 1px dotted #999999; -} - -.sidebar ul li a, .sidebar ul li a:visited { - border-bottom: none; - outline:0; -} - -.sidebar ul li a:hover { - color: #999999; - text-decoration: underline; -} - -.design-selection { - font-size: 0.9em; -} - -.design-selection ul li { - padding: 3px 0 3px 20px; - background: transparent url(bullet.jpg) no-repeat 2% 25%; - color:#999999; -} - -.design-selection a { - display: block; - font-size: 1.1em; - color: #6D2542; -} - -.design-selection a.designer-name { - display:inline; - line-height:5px; - margin:0; - padding:0; - font: normal 1.0em/0.9em Geneva, Arial, Tahoma, sans-serif; - color: #999999; - letter-spacing: -1px; -} - -.design-selection, .design-archives { - margin-bottom: 5px; - border:0px solid #000000; -} - -.design-archives ul li a, .zen-resources ul li a { -color:#6D2542; -} - -.design-selection h3, .design-archives h3, .zen-resources h3 { - width: 196px; - height: 40px; - margin-bottom:-20px; - padding:10px 0 0 35px; - font-family:Geneva, Arial, Helvetica, sans-serif; - font-size:11px; - font-weight:normal; - text-transform: uppercase; - color:#999999; -} - -footer{ - text-align: left; - padding:0 0 0 0; - margin:0 0 0 60px; -} - -footer a, footer a:visited { - padding: 5px; - border: 1px solid #eeeeee; - background-color: #fff; - color: #666666; - font-family:Geneva, Arial, Helvetica, sans-serif; - font-size:10px; -} - -footer a:hover { - padding: 5px; - border: 1px solid #eeeeee; - background-color: #eeeeee; - color: #999999; - font-family:Geneva, Arial, Helvetica, sans-serif; - font-size:10px; - text-decoration: none; -} - -.extra1, .extra2, .extra3, .extra4, .extra5, .extra6{ -display:none; -} diff --git a/src/data/designs/212/metadata.json b/src/data/designs/212/metadata.json deleted file mode 100644 index 35e4afc34223a192db17f7a7900c2b45a5cb4a3c..0000000000000000000000000000000000000000 --- a/src/data/designs/212/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "212", - "url": "https://www.csszengarden.com/212", - "css_url": "https://www.csszengarden.com/212/212.css", - "description": "The design features a retro aesthetic using a muted color palette of browns and creams, creating a nostalgic and vintage feel. The asymmetrical layout and bold typography contribute to the visual hierarchy, guiding the viewer through the content effortlessly. Illustrations with a mid-century modern style add character, merging traditional design elements with contemporary functionality.", - "categories": [ - "Retro", - "Typography", - "Illustration", - "Vintage Style", - "Educational" - ], - "visual_characteristics": [ - "Muted Color Palette", - "Asymmetrical Layout", - "Bold Typography", - "Retro Illustrations", - "Functional Design" - ] -} \ No newline at end of file diff --git a/src/data/designs/212/screenshot_desktop.png b/src/data/designs/212/screenshot_desktop.png deleted file mode 100644 index 429ef975823f5a887f66d5bf3040d62cabafec4e..0000000000000000000000000000000000000000 --- a/src/data/designs/212/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:046b9e30c0b9e2ac07474e79bbf92dcf3e6d9c6b6ce80b2414b377325a2ee081 -size 1598054 diff --git a/src/data/designs/212/screenshot_mobile.png b/src/data/designs/212/screenshot_mobile.png deleted file mode 100644 index f2fa4ed40b17fd03a302a4bd874fce93d00fad1e..0000000000000000000000000000000000000000 --- a/src/data/designs/212/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b07f59ea43201f3c1d422d4f5cb0b382470beee4467d7902d3a18209a4b13bd8 -size 544272 diff --git a/src/data/designs/212/style.css b/src/data/designs/212/style.css deleted file mode 100644 index 7740209ab2441a9f94ff8d2fcc777e6d9ce8e0d9..0000000000000000000000000000000000000000 --- a/src/data/designs/212/style.css +++ /dev/null @@ -1,297 +0,0 @@ -/* css Zen Garden submission 212 - 'Make 'em Proud!', by Michael McAghon and Scotty Reifsnyder, http://skybased.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2007, Michael McAghon and Scotty Reifsnyder */ - - -/* 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. */ - - - -/* hi, and welcome */ -/* Make'em Proud! */ -/* CSS Zen Garden */ -/* 2007 */ - -/* meyer reset */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, abbr, address, big, cite, code, -del, dfn, em, font, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td { - margin: 0; - padding: 0; - border: 0; - outline: 0; - font-weight: inherit; - font-style: inherit; - font-size: 100%; - font-family: inherit; - vertical-align: baseline; -} -/* remember to define focus styles! */ -:focus { - outline: 0; -} -body { - line-height: 1; - color: black; - background: white; - max-width: 1024px; -} -ol, ul { - list-style: none; -} -/* tables still need 'cellspacing="0"' in the markup */ -table { - border-collapse: separate; - border-spacing: 0; -} -caption, th, td { - text-align: left; - font-weight: normal; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ""; -} -blockquote, q { - quotes: "" ""; -} -/* end meyer reset */ - -body#css-zen-garden { - font: 62.5%/1.6 Georgia, Times, "Times New Roman", serif; - color: #3C1700; - position: relative; - background: #edefd0 url("bg.jpg") top left repeat; - margin-top: 75px; -} - -p { - font-size: 1.4em; - margin: 0 0 1.6em; - padding: 0 24px; - clear: both; -} - -abbr { cursor: help; } - -:link, :visited { font-weight: bold; text-decoration: none; color: #1e0c00; } -a:active { color: #f00; } -a:hover { color: #000; font-weight: bold; text-decoration: underline; } -a img { border: 0; } - -.page-wrapper { - width: 645px; - padding: 0 30px 0 180px; - float: left; - background: url("bg_container.gif") 0 50px repeat-y; -} - - h1 { - position: absolute; - z-index: 101; - top: -75px; - left: 0; - width: 179px; - height: 152px; - text-indent: -10001px; - background: url("zen-troop-seal.gif") top left no-repeat; - } - - h2 { - margin: 0 0 2.5em -95px; - width: 770px; - height: 352px; - text-indent: -10001px; - display: block; - background: url("make-em-proud.jpg") top left no-repeat; - border-bottom: 4px solid #f7fad9; - } - - h3 { - text-align: center; - color: #472101; - height: 27px; - text-indent: -10001px; - background-position: 50% 0; - background-repeat: no-repeat; - margin: 0 0 .8em; - } - - .preamble h3 { background-image: url("h_path-to-achieve.gif"); } - .explanation h3 { background-image: url("h_what-is-about.gif"); } - .participation h3 { background-image: url("h_participation.gif"); } - .benefits h3 { background-image: url("h_merit-benefits.gif"); } - .requirements h3 { - background-image: url("h_requirements.gif"); - width: 621px; - margin-left: -633px; - } - - .intro .summary { - background: #3C1700 url("leader.gif") 54% 15px no-repeat; - color: #fff; - position: absolute; - top: 110px; - left: 10px; - width: 150px; - padding: 125px 0 0; - } - - .intro .summary p:first-child { - font-size: 1.2em !important; - font-style: italic; - padding: 0 11px 0 14px; - } - - .intro .summary p:last-child { - background: #2d1100 url("h_get-started.gif") 50% 1.5em no-repeat; - padding: 5em 15px 1.6em; - margin: 0; - font-size: 1.2em !important; - } - - .intro .summary a { color: #fff; } - -.sidebar { - width: 130px; - background-color: #3c1700; - position: absolute; - top: 53.5em; - left: 10px; - padding: 2.4em 10px .8em; - color: #cec5bf; -} - -.sidebar a { color: #ebe7e5; } - - .sidebar h3 { - display: block; - margin: 0 0 1.2em; - } - - .sidebar ul { - margin: 0 0 2.4em; - font-size: 1em; - text-align: center; - line-height: 1.2em; - } - - .sidebar ul li { - margin-bottom: .8em; - text-align: center; - } - - .design-selection h3 { - background-image: url("h_other-scouts.gif"); - } - - .design-selection ul li { - margin: 0 0 1.2em; - } - - .design-selection ul li a { - background-color: #2d1100; - display: block; - padding: .5em 5px .6em; - font-size: 1.1em; - margin-bottom: .3em; - color: #fff; - } - - .design-selection ul li a.designer-name { - background-color: transparent; - display: inline; - padding: 0; - font-size: 1em; - margin-bottom: 0; - color: #ebe7e5; - } - - .design-archives h3 { - background-image: url("h_archives.gif"); - } - - .zen-resources h3 { - background-image: url("h_resources.gif"); - } - -.supporting { - padding: .5em 0 0; - position: relative; -} - - .benefits { - margin-bottom: 1em; - } - - .requirements { - float: right; - width: 1px; - margin: 145px -1px 0 0; - display: inline; - } - - .requirements p { - width: 598px; - margin-left: -646px; - } - - footer { - float: left; - background: url("merit-badges.gif") top left no-repeat; - width: 645px; - height: 130px; - overflow: visible; - position:relative; - display: inline; - } - - footer a { - text-indent: -10001px; - float: right; - display: block; - width: 114px; - height: 114px; - margin: 0 7px; - } - -.extra1 { - width: 855px; - height: 100px; - display: block; - float: left; - background: url("bg_req.gif") top left no-repeat; -} - -/* don't need'em */ -.extra2, .extra3, .extra4, .extra5, .extra6 { display: none; } - -/* IE6 help for repositioning of badges, overall weirdness */ - -* html .page-wrapper { - float: left; - height: 170em; -} - -* html .requirements { - height: 1px; - width: 1px; - position: relative; - margin-right: -30px; -} - -* html .requirements p, * html .requirements h3 { - position: relative; -} -/* end sad IE6 */ - -/* thanks, */ -/* skybased */ \ No newline at end of file diff --git a/src/data/designs/213/metadata.json b/src/data/designs/213/metadata.json deleted file mode 100644 index 5daa5652f40b09c6a7c27e9635f857a0a9470390..0000000000000000000000000000000000000000 --- a/src/data/designs/213/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "213", - "url": "https://www.csszengarden.com/213", - "css_url": "https://www.csszengarden.com/213/213.css", - "description": "This design embraces a minimalist aesthetic with a clean, cream-colored background that draws attention to the centrally aligned text content. The absence of images and decorative elements emphasizes readability and a sense of calm. Text is organized into structured sections, enhancing navigability, while the use of contrasting colors for links adds a subtle visual appeal.", - "categories": [ - "Minimalist", - "Typography-based", - "Calm", - "Retro" - ], - "visual_characteristics": [ - "Cream background", - "Central alignment", - "Text-focused", - "Subtle color contrast" - ] -} \ No newline at end of file diff --git a/src/data/designs/213/screenshot_desktop.png b/src/data/designs/213/screenshot_desktop.png deleted file mode 100644 index 1ca63f2e657af61444fc73e564193433e5c99fe0..0000000000000000000000000000000000000000 --- a/src/data/designs/213/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6e8a087402459f947e7bf0c99b566c80ad91d8c798646fe0b20a28e77b4b834f -size 442197 diff --git a/src/data/designs/213/screenshot_mobile.png b/src/data/designs/213/screenshot_mobile.png deleted file mode 100644 index 82ec7691b58457c8a2dc1a1c530198ff4ab38ef1..0000000000000000000000000000000000000000 --- a/src/data/designs/213/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ad7b2722a3c2abf3bdacf9e328f645b9e224583f4ad980073ae4c71ce2744ae8 -size 458371 diff --git a/src/data/designs/213/style.css b/src/data/designs/213/style.css deleted file mode 100644 index 43c2f638e127a67d7c7df12f43e5f427b8813daf..0000000000000000000000000000000000000000 --- a/src/data/designs/213/style.css +++ /dev/null @@ -1 +0,0 @@ -/* css Zen Garden submission 213 - 'Under the Sea', by Eric Stoltz, http://www.ericstoltz.com/ */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* All associated graphics copyright 2007, Eric Stoltz */ /* 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. */ /* "Under the Sea" by Eric Stoltz December 20, 2007 www.ericstoltz.com */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ html { margin: 0px; padding: 0px; height: 100%; width: 100%; } body { margin: 0px; padding: 0px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 0.9em; height: 100%; width: 100%; background-image: url(water.png); background-repeat: repeat-x; background-position: top; background-color: #F0ECD6; } a:link { color: #993300; text-decoration: none; } a:visited { color: #999900; text-decoration: none; } a:hover, a:active { color: #993300; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #993300; } .page-wrapper { width: 700px; margin-right: auto; margin-left: auto; margin-top: 0px; background-image: url(squid-blowfish.png); background-repeat: no-repeat; background-position: right top; z-index: 4; position: relative; } .intro { margin-top: 0px; padding-top: 130px; } header h1 { background-image: url(title.png); height: 195px; width: 290px; background-repeat: no-repeat; margin-top: 0px; position: absolute; text-indent: -999px; white-space: nowrap; overflow: hidden; } header h2 { background-image: url(beauty.png); background-repeat: no-repeat; height: 234px; width: 33px; margin-left: 8px; position: absolute; margin-top: 250px; text-indent: -999px; white-space: nowrap; overflow: hidden; } header { z-index: 5; margin-top: -130px; position: absolute; } .summary { background-image: url(top.png); background-repeat: no-repeat; width: 385px; padding-bottom: 20px; } .summary p { font-size: 0.7em; font-style: italic; margin-left: 60px; margin-right: 60px; line-height: 120%; text-align: center; } .summary p:first-child { padding-top: 60px; } .summary p:last-child { font-style: normal; font-variant: small-caps; font-size: .8em; } .preamble { margin-top: 0px; width: 385px; margin-bottom: 0px; padding-bottom: 20px; background-image: url(back.png); } .preamble h3{ margin-top: 0px; background-image: url(enlightenment.png); height: 45px; width: 242px; margin-left: 70px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .preamble p { font-size: 0.8em; margin-left: 60px; margin-right: 60px; line-height: 140%; } .supporting { margin-top: 0px; width: 385px; background-image: url(end.png); background-repeat: no-repeat; background-position: bottom; padding-bottom: 600px; margin-bottom: 50px; } .supporting h3 { margin-top: 0px; } .supporting p { font-size: 0.8em; margin-left: 60px; margin-right: 60px; line-height: 140%; } .explanation { background-image: url(back.png); padding-bottom: 20px; } .explanation h3 { background-image: url(about.png); background-repeat: no-repeat; height: 45px; width: 242px; margin-left: 70px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .participation { background-image: url(back.png); padding-bottom: 20px; } .participation h3 { background-image: url(participation.png); background-repeat: no-repeat; height: 45px; width: 242px; margin-left: 70px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .benefits { background-image: url(back.png); padding-bottom: 20px; } .benefits h3 { background-image: url(benefits.png); background-repeat: no-repeat; height: 45px; width: 242px; margin-left: 70px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .requirements { background-image: url(back.png); margin-bottom: 0px; } .requirements h3 { background-image: url(requirements.png); background-repeat: no-repeat; height: 45px; width: 242px; margin-left: 70px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .requirements p:nth-child(6) { margin-bottom: 0px; padding-bottom: 20px; background-image: url(huzzah.png); background-repeat: no-repeat; background-position: center top; padding-top: 45px; text-align: center; font-style: italic; } .requirements p:nth-child(6) a { display: block; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: bold; text-transform: uppercase; } .requirements p:nth-child(6) a:hover { color: #333333; text-decoration: underline; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } footer { position: absolute; bottom: 700px; margin-left: 350px; z-index: 6; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 0.75em; background-image: url(footer.png); background-repeat: no-repeat; height: 57px; width: 252px; text-align: center; padding-top: 15px; padding-right: 40px; visibility: visible; } .sidebar { background-image: url(menu-top.png); background-repeat: no-repeat; background-position: top; width: 225px; padding-top: 104px; position: absolute; top: 300px; margin-left: 375px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 0.8em; } .sidebar ul { margin-left: 35px; padding-left: 10px; list-style-image: url(bullet.png); list-style-position: outside; margin-top: 5px; } .sidebar li { margin-bottom: 10px; line-height: 130%; margin-right: 30px; } .design-selection { background-image: url(menu-back.png); margin-bottom: 0px; padding-bottom: 20px; } .design-selection h3 { background-image: url(select.png); background-repeat: no-repeat; height: 15px; width: 200px; margin-top: 0px; margin-left: 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .design-selection a { display: block; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight: bold; } .design-selection a:hover { color: #333333; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; text-decoration: underline; } .design-selection li { font-style: italic;; } .design-selection a.designer-name { display: inline; } .design-selection a.designer-name { font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; } .design-archives { background-image: url(menu-back.png); margin-top: 0px; margin-bottom: 0px; padding-bottom: 20px; } .design-archives h3 { background-image: url(archives.png); background-repeat: no-repeat; height: 15px; width: 200px; margin-top: 0px; margin-left: 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .zen-resources { background-image: url(menu-back.png); margin-top: 0px; margin-bottom: 0px; padding-bottom: 20px; } .zen-resources h3 { background-image: url(resources.png); background-repeat: no-repeat; height: 15px; width: 200px; margin-top: 0px; margin-left: 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; } .sidebar .wrapper { background-image: url(menu-end.png); background-repeat: no-repeat; padding-bottom: 352px; background-position: bottom; } .extra2 { background-image: url(bottom.png); background-repeat: no-repeat; background-position: center; height: 200px; width: 100%; position: fixed; bottom: 0px; z-index: 5; } .extra1 { z-index: 2; height: 800px; width: 100%; position: absolute; top: 1200px; background-image: url(critters.png); background-repeat: no-repeat; background-position: center; } \ No newline at end of file diff --git a/src/data/designs/214/metadata.json b/src/data/designs/214/metadata.json deleted file mode 100644 index 667c11c289c431547b5ead6dffaff42b757c2490..0000000000000000000000000000000000000000 --- a/src/data/designs/214/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "214", - "url": "https://www.csszengarden.com/214", - "css_url": "https://www.csszengarden.com/214/214.css", - "description": "The design is a visually balanced layout with a natural and calming aesthetic achieved through the use of a green color palette and subtle background images. It effectively highlights content through clear typographic hierarchy and incorporates sections for navigation and information, enhancing readability and user engagement.", - "categories": [ - "web aesthetics", - "typography", - "natural theme", - "user interface", - "navigation design" - ], - "visual_characteristics": [ - "green color palette", - "textured background", - "minimalist layout", - "clear typographic hierarchy", - "high readability" - ] -} \ No newline at end of file diff --git a/src/data/designs/214/screenshot_desktop.png b/src/data/designs/214/screenshot_desktop.png deleted file mode 100644 index 5be2d84c283cdc618ca44830776169b13363cb14..0000000000000000000000000000000000000000 --- a/src/data/designs/214/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1eff5dc07c9e2c368f28f98ef615be898e62425309628ca82d94f787c536d849 -size 2784492 diff --git a/src/data/designs/214/screenshot_mobile.png b/src/data/designs/214/screenshot_mobile.png deleted file mode 100644 index 372e30d120fc9acd510e9d0e7ffc03d17e9caf59..0000000000000000000000000000000000000000 --- a/src/data/designs/214/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:567153f232bdde41159a9545844580498762aa5c9666e3bbed0de9f1f50d73c5 -size 992200 diff --git a/src/data/designs/214/style.css b/src/data/designs/214/style.css deleted file mode 100644 index e71f75894844c1ae6ef811c8876bb359c670e73b..0000000000000000000000000000000000000000 --- a/src/data/designs/214/style.css +++ /dev/null @@ -1,1027 +0,0 @@ -/* css Zen Garden submission 214 - 'Verde Moderna', 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 2013, Dave Shea */ - -/* 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. */ - -/* - Verde Moderna by Dave Shea - - 10 Years. - http://mezzoblue.com/archives/2013/05/07/10_years/ - - We've come a long way. Here it is, the first of what will hopefully be - many more modern designs in the CSS Zen Garden. - - With this design, I've attempted to hit as many of 2013's front end - buzzwords as possible. It's a mobile-first, responsive layout that was - designed in the browser from start to finish. CSS3 is used liberally - with fallbacks where necessary. - - All photos are mine, and were taken in the Japanese Garden at the - Huntington Botanical Garden in Southern California. - - Other production notes: - * Vector assets are used where appropriate. The logo is an SVG file, - the icons are a custom web font built with icomoon.io - * The column effect is a CSS gradient instead of a background image. - By forcing a sharp transition at 66%, we can simulate columns. The way - Chrome rounds gradient values causes the columns to jump unexpectedly when - the window is resized, which means that using an equal padding or width - value doesn't align the way you think it would. That forced a bit of - extra contortion to get the header and body columns perfectly lined up. - * Various sidebar H3s were hidden with display:none; This was a design - decision. Their inclusion seemed extraneous. Same goes for HTML/CSS - download links at low screen sizes, presumably that screen is a phone - and can't download the files anyway. - * The sidebar positioning style is (necessarily) quite a mess on wider - windows, especially the resource list. When flexbox is a bit closer to - usable, maybe I'll take another crack at fixing that up. - * A more logical place for the design list to appear in the mobile - version would have been up closer to the top, possibly disclosed with a - menu toggle of some kind. Not something that's easily doable with CSS - alone, if you don't want to rely on hovers. - * The medium- and low-res versions don't differ that much; I may still push - the tablet layout a bit further, it doesn't quite feel right. - * Parallax scrolling isn't doable without Javascript so you won't find it - in this design. I was able to use a bit of multiple background-position - trickery to create a slightly more interesting scrolling effect. - -*/ - - -/* - web fonts from Google: - Julius Sans One â https://fonts.google.com/specimen/Julius+Sans+One?query=julius - Libre Baskerville â https://fonts.google.com/specimen/Libre+Baskerville?query=baskerville - */ -@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One|Libre+Baskerville:400,400italic); - - - -/* base CSS */ -* { - -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ - -moz-box-sizing: border-box; /* Firefox, other Gecko */ - box-sizing: border-box; /* Opera/IE 8+ */ -} - -html, body { - padding: 0; - margin: 0; -} -body { - color: #325050; - background: #fff; - font-family: 'Libre Baskerville', sans-serif; - font-size: 70%; -} -a { - color: #0d8ba1; - text-decoration: none; -} -a:visited { - color: #1a5952; -} -a:hover, a:focus { - color: #0599c2; - text-decoration: underline; - -webkit-transition: all 0.25s ease-out; - -moz-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} - -abbr { - border: none; - text-transform: uppercase; - font-size: 0.9em; - letter-spacing: 0.01em; -} -header { - height: 230px; - padding: 20px 0 70px 0; - background: #2d6360 50% 0 url(huntington.jpg) no-repeat; /* old IE fallback */ - background-attachment: fixed, fixed, fixed, scroll; - background-image: url(contours.png), url(noise.png), url(gridlines.png), url(huntington.jpg); - background-position: 0 0, 0 0, -5px -25px, 0 50%; - background-repeat: repeat, repeat, repeat, no-repeat; - background-size: auto, auto, auto, cover; - text-align: center; -} - -h1, h2 { - padding: 0 10%; - margin: 0; - color: #fff; - font-weight: normal; -} - -h1 { - padding-top: 0; - padding-bottom: 5px; - border-bottom: none; - font-family: 'Julius Sans One', sans-serif; - font-size: 3.2em; - text-transform: uppercase; -} -h1::before { - display: inline-block; - position: relative; - top: 20px; - content: ""; - width: 80px; - height: 80px; - margin: -20px 20px 0 0; - background: url(enso.svg); - background-repeat: no-repeat; - background-size: 100%; - opacity: 0.6; -} -h2 { - display: block; - padding-top: 5px; - padding-bottom: 30px; - border-top: none; - color: rgba(255,255,255,0.6); - font-size: 1.6em; - font-style: italic; -} - -h2::before { - content: " "; - padding: 50px; -} -h3 { - margin: 2em 0 0 0; - color: #2e484c; - font-family: 'Julius Sans One', sans-serif; - font-size: 1.8em; - font-weight: normal; - text-transform: uppercase; -} -p { - margin: 0.75em 0; - line-height: 2; -} - - -.page-wrapper { - position: relative; -} -.summary, .preamble { - width: 80%; - margin: 0 auto; - -} -.supporting h3, .supporting p { - width: 80%; - margin-left: auto; - margin-right: auto; -} -.summary { - padding-top: 2em; -} - - -/* intro block links -- download HTML/CSS */ -.intro a, .intro a:visited { - position: relative; - display: inline-block; - padding: 1px 10px 0 32px; - margin: -1px -10px -1px -6px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - color: #809b7e; - font-family: 'Julius Sans One', sans-serif; - text-transform: uppercase; -} -.intro a:hover, .intro a:focus { - z-index: 2; - color: #fff; - background: #3d8a9f; - text-decoration: none; -} -.intro a::before { - display: inline-block; - position: absolute; - top: 6px; - left: 8px; - padding: 2px; - color: #a9b995; - background: #d9e1cd; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - -o-border-radius: 2px; - content: "D"; - font-size: 16px; - text-indent: 0; - - /* icomoon.io defaults */ - font-family: 'verdemoderna'; - speak: none; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -webkit-transition: all 0.25s ease-out; - -moz-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -.intro a:hover::before { - color: #fff; - background: #357d93; -} - - - - -/* coloured cutoff */ -div.participation, div.benefits { - background-attachment: scroll, scroll, fixed; - background-color: rgba(138,188,159,0.5); - background-image: url(contours-opaque.png), url(gridlines-opaque.png), url(bamboo.png); - background-repeat: repeat, repeat, no-repeat; - background-size: auto, auto, cover; -} - -/* extra padding at the cutoffs */ -div.participation { - padding: 3em 0; - margin-top: 3em; -} -div.benefits { - padding-bottom: 3em; - margin-bottom: 3em; -} -div.participation h3, div.benefits h3 { - margin-top: 0; -} -div.participation p, div.benefits p { - margin-bottom: 0; -} - -/* sidebar base styles */ -.sidebar { - background: #edf4f0; -} -.sidebar h3 { - display: none; -} -.sidebar a { - color: #607476; - text-decoration: none; -} -.sidebar a:hover, .sidebar a:focus { - color: #49968e; -} -.sidebar ul { - padding: 0; - margin: 0; - list-style: none; - overflow: hidden; -} - -/* shared sidebar styling */ - -.design-selection ul, .zen-resources ul { - margin: 0; -} - -.design-selection li, .zen-resources li { - float: left; - width: 50%; - padding: 1.5em 10%; - border-top: solid 1px #d9e3dc; - color: #c0cac3; - font-style: italic; -} -.design-selection li:hover, .design-selection li:focus { - background: -moz-linear-gradient(left, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0.5) 50%, - rgba(255,255,255,0) 100%) - ; /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right top, - color-stop(0%,rgba(255,255,255,0)), - color-stop(50%,rgba(255,255,255,0.5)), - color-stop(100%,rgba(255,255,255,0))) - ; /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0.5) 50%, - rgba(255,255,255,0) 100%) - ; /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0.5) 50%, - rgba(255,255,255,0) 100%) - ; /* Opera 11.10+ */ - background: -ms-linear-gradient(left, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0.5) 50%, - rgba(255,255,255,0) 100%) - ; /* IE10+ */ - background: linear-gradient(to right, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0.5) 50%, - rgba(255,255,255,0) 100%) - ; /* W3C */ -} -.design-selection li:nth-child(2n+1), .zen-resources li:nth-child(2n+1) { - clear: left; -} -.design-selection .design-name, .zen-resources a, li.viewall a { - display: block; - margin-bottom: 0.25em; - font-family: 'Julius Sans One', sans-serif; - font-size: 1.2em; - font-style: normal; - text-transform: uppercase; -} - - -/* select a design */ -.design-selection h3 { - display: none; -} -.design-selection .designer-name { - color: #616857; - font-size: 0.9em; - font-style: normal; -} - - - -/* archives navigation */ -.design-archives { - position: absolute; - top: 160px; - right: 0; - width: 100%; - height: 70px; - background: rgba(255,255,255,0.2); -} -.design-archives h3 { - display: none; -} -.design-archives ul { - margin: 0; -} -.design-archives li { - position: absolute; - top: 0; - padding: 0; - margin: 0; - border: none; - list-style: none; -} -.design-archives li.viewall { - top: 0; - left: 0; - width: 100%; - padding: 0 71px; - line-height: 50px; -} -.previous, .next { - left: 0; - z-index: 3; -} -.next { - left: auto; - right: 0; -} -.design-archives a, .design-archives a:visited { - color: rgba(255, 255, 255, 0.65); -} -.design-archives a:hover, .design-archives a:focus { - color: #fff; -} -.design-archives .previous a, .design-archives .next a { - display: block; - overflow: hidden; - width: 70px; - height: 70px; - text-indent: 100%; - text-decoration: none; - white-space: nowrap; -} -.design-archives .viewall a { - z-index: 2; - width: 100%; - min-height: 70px; - padding: 12px 0 0 0; - text-align: center; -} -.design-archives a::before { - position: absolute; - left: 0; - width: 70px; - height: 70px; - text-align: center; - text-indent: 0; - font-size: 44px; - /* icomoon.io defaults */ - font-family: 'verdemoderna'; - speak: none; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 70px; - -webkit-font-smoothing: antialiased; -} -.design-archives .viewall a:hover, .design-archives .viewall a:focus, .design-archives .viewall a:active, -.design-archives a:hover::before, .design-archives a:focus::before, .design-archives a:active::before { - background-color: rgba(255,255,255,0.25); - box-shadow: inset 0 0 10px rgba(255,255,255,0.1); -} -.design-archives .previous a::before { - content: "<"; -} -.design-archives .next a::before { - content: ">"; -} - - -/* resources */ - -.zen-resources { - overflow: hidden; - background-color: rgba(138,188,159,0.5); - background-image: url(bamboo.png); -} -.zen-resources li { - border-top: solid 1px #a0b9ad; - font-style: normal; -} -.zen-resources li:last-child { - float: none; - width: auto; - border-bottom: solid 1px #a0b9ad; -} - -/* busting out the credits block */ - -.requirements p:nth-child(5) { - padding-bottom: 2em; -} -.supporting .requirements { - float: none; - clear: both; - width: 100%; - padding-left: 0; - padding-right: 0; -} -.supporting .requirements a { - text-decoration: none; -} -.supporting .requirements a:hover, .supporting .requirements a:focus { - text-decoration: underline; -} -.supporting .requirements h3 { - padding-top: 0; -} -.requirements p:last-child { - width: auto; - padding: 1em 12%; - margin: 0; - color: rgba(255, 255, 255, 0.4); - background: #3e5d67; - background-attachment: fixed, fixed, fixed, scroll; - background-image: url(contours.png), url(gridlines.png), url(noise.png), url(koi.jpg); - background-position: 0 0, -5px -25px, 0 0, 0 50%; - background-repeat: repeat, repeat, repeat, no-repeat; - background-size: auto, auto, auto, cover; - font-size: 2em; - font-style: italic; - text-align: center; -} -.requirements p:last-child a { - color: rgba(255, 255, 255, 0.7); - font-style: normal; -} - - -/* main footer */ -footer { - clear: both; - padding: 3em 10%; - color: #fff; - background: #134347; - text-align: center; -} -footer a { - display: inline-block; - overflow: hidden; - width: 40px; - height: 40px; - padding: 40px 0 0 0; - margin: 0 0.5em; - position: relative; - color: rgba(255, 255, 255, 0.5); - -webkit-transition: color 0.25s ease-out, box-shadow 0.25s ease-out; - -moz-transition: color 0.25s ease-out, box-shadow 0.25s ease-out; - transition: color 0.25s ease-out, box-shadow 0.25s ease-out; -} -footer a:hover, footer a:focus { - color: rgba(255, 255, 255, 0.3); - text-decoration: none; -} -footer a:visited { - color: rgba(255, 255, 255, 0.2); -} -footer a::before { - display: block; - position: absolute; - top: 3px; - left: 0; - overflow: visible; - font-size: 36px; - text-indent: 0; - /* icomoon.io defaults */ - font-family: 'verdemoderna'; - speak: none; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; -} -footer a.zen-validate-html::before {content: "5";} -footer a.zen-validate-html:hover::before, footer a.zen-validate-html:focus::before {content: "%";} -footer a.zen-validate-css::before {content: "3";} -footer a.zen-validate-css:hover::before, footer a.zen-validate-css:focus::before {content: "#";} -footer a.zen-license::before {content: "c";} -footer a.zen-license:hover::before, footer a.zen-license:focus::before {content: "C";} -footer a.zen-accessibility::before {content: "a";} -footer a.zen-accessibility:hover::before, footer a.zen-accessibility:focus::before {content: "A";} -footer a.zen-github::before {content: "g";} -footer a.zen-github:hover::before, footer a.zen-github:focus::before {content: "G";} - - - -/* low-res CSS */ -@media only screen and (max-width: 600px) { - - /* these download links make approximately zero sense - on a phone without a user-accessible file system. */ - .summary p:last-child { - display: none; - } - /* type adjustments */ - h1 { - margin-top: 30px; - font-size: 2.5em; - } - h1::before { - width: 50px; - height: 50px; - } - h2::before { - padding: 25px; - } - .requirements p:last-child { - padding: 1em 6%; - } - -} - - -@media only screen and (max-width: 500px) { - header { - height: 250px; - padding-top: 0; - } - h1 { - margin: 0; - } - h1::before { - display: block; - left: 50%; - width: 50px; - height: 50px; - margin: 0 0 0 -25px; - padding: 0 0 35px 0; - } - h2::before { - padding: 0; - } - .design-archives { - top: 180px; - } - .design-selection li, .zen-resources li { - padding: 1em 5%; - } - footer a { - margin: 0 0.5em; - } -} - - -@media only screen and (max-width: 320px) { - - /* adjusting the site header type size */ - h1 { - font-size: 2em; - } - h2 { - font-size: 1.3em; - } - /* linearizing the design list on small screens */ - .design-selection li, .zen-resources li { - float: none; - width: 100%; - } - /* adjusting footer type, icons */ - .requirements p:last-child { - font-size: 1.4em; - } - footer { - padding: 2em 5%; - } - footer a { - width: 35px; - height: 35px; - padding: 35px 0 0 0; - margin: 0 0.5em; - } - footer a::before { - font-size: 32px; - } - -} - - -/* mid-res CSS */ -@media only screen and (max-width: 1132px) { - - header { - border-top: solid 10px rgba(19, 67, 71, 0.9); - } - p, li { - font-size: 1.2em; - } - -} - -@media only screen and (min-width: 500px) and (max-width: 1150px) { - - .requirements p:last-child { - padding-bottom: 2em; - padding-top: 2em; - } - /* page footer */ - footer { - padding: 3em 0; - } - footer a { - width: 52px; - height: 52px; - padding: 52px 0 0 0; - margin: 0 2em; - } - footer a::before { - font-size: 48px; - } - -} - - -/* high-res CSS */ -@media only screen and (min-width: 1132px) { -body { - background: #ffffff; - background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%); - background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(66%,#ffffff), color-stop(66%,#e5ede8), color-stop(100%,#e5ede8)); - background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%); - background: -o-linear-gradient(left, #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%); - background: -ms-linear-gradient(left, #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%); - background: linear-gradient(to right, #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%); - font-size: 100%; -} -header { - width: 100%; - height: 310px; - padding: 0 10%; - border-top: solid 12px rgba(19, 67, 71, 0.8); - box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3); - vertical-align: middle; - text-align: left; -} -header::before, header::after { - display: block; - content: " "; - position: absolute; - z-index: 3; - top: 9px; - left: 0; - width: 100%; - height: 7px; - background: rgba(0, 39, 43, 0.2); -} -header::after { - top: 306px; - height: 4px; - background: rgba(0, 39, 43, 0.075); -} -h1 { - display: inline-block; - position: relative; - margin: 15px 0 0 0; - padding: 60px 0 5px 0; -} -h1::before { - display: inline-block; - position: relative; - top: 65px; - content: ""; - width: 125px; - height: 125px; - margin: -65px 40px 0 0; - background: url(enso.svg); - background-size: 100%; - opacity: 0.6; - -webkit-animation: koan 36000s infinite alternate; - -moz-animation: koan 36000s infinite alternate; - animation: koan 36000s infinite alternate; -} -h2 { - display: block; - margin: 0; - padding: 5px 0 60px 70px; -} -p { - font-size: 1em; -} -/* main layout blocks */ -nav, .supporting { - display: inline; -} -.summary, .preamble, .supporting div, .requirements h3, .requirements p { - float: left; - clear: left; - width: 66%; - padding: 1em 5% 1em 10%; -} -.explanation h3, .explanation p, -.participation h3, .participation p, -.benefits h3, .benefits p { - width: 100%; -} -.summary { - padding-top: 3.25em; -} -.requirements h3, .requirements p { - margin: 0; - padding-bottom: 0; -} - -/* coloured cutoff */ -div.participation, div.benefits { - width: 100%; - padding-left: 10%; - padding-right: 38%; - margin: 0; -} -/* extra padding at the cutoffs */ -div.participation, div.requirements { - padding-top: 4em; -} -div.explanation, div.benefits { - padding-bottom: 4em; -} -.requirements p:nth-child(5) { - padding-bottom: 4em; -} - -.intro h3, .supporting h3 { - margin-top: 0; -} -.intro p:last-child, .supporting p:last-child { - margin-bottom: 0; -} - -.requirements p:last-child { - padding-bottom: 3em; - padding-top: 3em; - box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3); -} - -/* sidebar styling */ -.design-selection, .zen-resources { - position: absolute; - top: 360px; - right: 0; - width: 33.3%; - padding: 0 0 20px 0; - margin: 0; - overflow: visible; - background: transparent; -} -.sidebar li { - float: none; - width: auto; - padding-left: 0; - padding-right: 0; - margin: 0 29.4% 0 14.7%; /* 0 10% 0 5% of total width */ -} - -/* select a design */ -.design-selection li:first-child { - border-top: 0; -} -.design-selection li:hover, .design-selection li:focus { - background: none; -} -/* archives navigation */ -.design-archives { - position: absolute; - z-index: 2; - top: 0; - left: 0; - width: 100%; - height: 310px; - background: -moz-linear-gradient(left, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0) 66%, - rgba(0,0,0,0.2) 66%, - rgba(33,84,95,0.3) 100%) - ; /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right top, - color-stop(0%,rgba(255,255,255,0)), - color-stop(66%,rgba(255,255,255,0)), - color-stop(66%,rgba(33,84,95,0.3)), - color-stop(100%,rgba(33,84,95,0))) - ; /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0) 66%, - rgba(33,84,95,0.3) 66%, - rgba(33,84,95,0) 100%) - ; /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0) 66%, - rgba(33,84,95,0.3) 66%, - rgba(33,84,95,0) 100%) - ; /* Opera 11.10+ */ - background: -ms-linear-gradient(left, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0) 66%, - rgba(33,84,95,0.3) 66%, - rgba(33,84,95,0) 100%) - ; /* IE10+ */ - background: linear-gradient(to right, - rgba(255,255,255,0) 0%, - rgba(255,255,255,0) 66%, - rgba(33,84,95,0.3) 66%, - rgba(33,84,95,0) 100%) - ; /* W3C */ -} -.design-archives nav { - display: block; - position: absolute; - right: 1%; - top: 120px; - width: 32%; -} -.design-archives li { - margin: 0; -} -.design-archives .viewall a, .design-archives a::before { - background: rgba(255,255,255,0.1); - text-decoration: none; -} -.design-archives .viewall a:hover, .design-archives a:hover::before { - background-color: rgba(255,255,255,0.2); -} - -/* resources navigation */ -.zen-resources { - position: absolute; - top: 1310px; - right: 0; - width: 34%; - background: transparent; -} -.zen-resources h3 { - display: none; -} -.zen-resources ul { - width: 55.9%; - margin: 0 29.4% 0 14.7%; -} -.zen-resources li { - padding: 1.5em 0 1.25em 0; - margin: 0; -} - -} - - -@media only screen and (min-width: 1150px) { - - /* page footer */ - footer a { - width: 76px; - height: 76px; - padding: 76px 0 0 0; - margin: 0 3em; - } - footer a::before { - font-size: 72px; - } - -} - - -/* -Okay, look, I feel rather awful about this. But due to source order it -seems like the only way to pull off the separated sidebar. Perhaps -flexbox is the way forward here, once the syntax settles down a bit. -*/ -@media only screen and (min-width: 1120px) {.zen-resources {top: 1490px;}} -@media only screen and (min-width: 1240px) {.zen-resources {top: 1460px;}} -@media only screen and (min-width: 1260px) {.zen-resources {top: 1420px;}} -@media only screen and (min-width: 1320px) {.zen-resources {top: 1390px;}} -@media only screen and (min-width: 1370px) {.zen-resources {top: 1360px;}} -@media only screen and (min-width: 1520px) {.zen-resources {top: 1330px;}} -@media only screen and (min-width: 1812px) {.zen-resources {top: 1300px;}} -@media only screen and (min-width: 1848px) {.zen-resources {top: 1270px;}} -@media only screen and (min-width: 2015px) {.zen-resources {top: 1240px;}} -@media only screen and (min-width: 2115px) {.zen-resources {top: 1210px;}} -@media only screen and (min-width: 2400px) {/* you're kidding, right? */} - - -@-webkit-keyframes koan { - from { - -webkit-transform: scale(1); - opacity: 1; - } - to { - -webkit-transform: scale(3); - opacity: 0; - } -} -@-moz-keyframes koan { - from { - -moz-transform: scale(1); - opacity: 1; - } - to { - -moz-transform: scale(3); - opacity: 0; - } -} -@keyframes koan { - from { - transform: scale(1); - opacity: 1; - } - to { - transform: scale(3); - opacity: 0; - } -} - -/* high-DPI adjustments */ -@media - (min--moz-device-pixel-ratio: 1.5), - (-o-min-device-pixel-ratio: 3 / 2), - (-webkit-min-device-pixel-ratio: 1.5), - (min-device-pixel-ratio: 1.5), - (min-resolution: 1.5dppx) { - header { - background-image: url(contours@2x.png), url(noise.png), url(gridlines.png), url(huntington.jpg); - background-size: 50% auto, auto, auto, cover; - } - .requirements p:last-child { - background-image: url(contours@2x.png), url(gridlines.png), url(noise.png), url(koi.jpg); - background-size: 50% auto, auto, auto, cover; - } - /* - This shouldn't be necessary, but it is. Due to differences in how - Chrome calculates gradients and % widths / padding, the archives - spill out of the visual container at some screen sizes. - */ - .design-archives nav { - right: 3%; - width: 29%; - } -} - -/* icon fonts */ -@font-face { - font-family: 'verdemoderna'; - src:url('verdemoderna.eot'); - src:url('verdemoderna.eot?#iefix') format('embedded-opentype'), - url('verdemoderna.woff') format('woff'), - url('verdemoderna.ttf') format('truetype'), - url('verdemoderna.svg#verdemoderna') format('svg'); - font-weight: normal; - font-style: normal; -} /* 1000+ lines?! */ diff --git a/src/data/designs/215/metadata.json b/src/data/designs/215/metadata.json deleted file mode 100644 index 9459a3ed5932b809c483abb6d3a9783c22affcd8..0000000000000000000000000000000000000000 --- a/src/data/designs/215/metadata.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "id": "215", - "url": "https://www.csszengarden.com/215", - "css_url": "https://www.csszengarden.com/215/215.css", - "description": "The CSS Zen Garden design showcases a clean, structured layout aimed at demonstrating the possibilities of CSS styling. It uses a primarily blue and white color palette with red accents to draw attention to headings and separators. The design incorporates a formal serif and a modern sans-serif typography, creating an elegant and readable interface. The use of graphical illustrations adds visual interest and helps convey the collaborative and creative theme. The overall aesthetic balance, combined with functional elements like navigation, ensures a clear and engaging user experience.", - "categories": [ - "Typography", - "User Interface", - "Minimalist Design", - "Educational", - "Professional", - "Web Design" - ], - "visual_characteristics": [ - "Blue and White Palette", - "Elegant Typography", - "Illustrative Graphics", - "Clean Layout", - "Contrasting Accents", - "Symmetry" - ] -} \ No newline at end of file diff --git a/src/data/designs/215/screenshot_desktop.png b/src/data/designs/215/screenshot_desktop.png deleted file mode 100644 index f1367d581b70ad6c365b6b248af904468e934843..0000000000000000000000000000000000000000 --- a/src/data/designs/215/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:2f99fd30530d21121384c41b2a6e5f696d413cc17aedde5583271cb971a48cd3 -size 640531 diff --git a/src/data/designs/215/screenshot_mobile.png b/src/data/designs/215/screenshot_mobile.png deleted file mode 100644 index 58eedfa66195c494e8783eda2c0add576b0225b9..0000000000000000000000000000000000000000 --- a/src/data/designs/215/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:6bbe1855c2c1080cab11dcb00b63fe4c192bb63659fa5072511035cddf23569f -size 480833 diff --git a/src/data/designs/215/style.css b/src/data/designs/215/style.css deleted file mode 100644 index f96ca84f823b773c6060c9263f2bd2c6f1e05ad6..0000000000000000000000000000000000000000 --- a/src/data/designs/215/style.css +++ /dev/null @@ -1,862 +0,0 @@ -/* css Zen Garden submission 215 - 'A Robot Named Jimmy', by meltmedia, http://meltmedia.com */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2013, meltmedia */ - - -/* 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. */ - - -/* - * A submission from meltmedia for the CSS Zen Garden's 10th Anniversary - * - * Design by @guitrasher - * Development by @jimmyking - * - * http://meltmedia.com - * - * - * +N@@@@@@?~ +@@@@@@N+~ - * @@@@@@@@@@@D~ $@@@@@@@@@@@Z - * ~$@@@@@@@@@@@@@@ ~N@@@@@@@@@@@@@@~ - * 7@@@@@@@@@@@@@@@N 8@@@@@@@@@@@@@@@D - * ~@@@@@@@@@@@@@@@@@~ @@@@@@@@@@@@@@@@@~ - * @@@@@@@@@@@@@@@@@~ ~@@@@@@@@@@@@@@@@@~ - * 8@@@@@@@@@@@@@@@@ ~@@@@@@@@@@@@@@@@@ - * ?@@@@@@@@@@@@@@@7 $@@@@@@@@@@@@@@@I - * @@@@@@@@@@@@@@D @@@@@@@@@@@@@@8 - * @@@@@@@@@@@@@+ ~@@@@@@@@@@@@@ - * @@@@@@@@@@@7 @@@@@@@@@@@I - * ~$@@@@@@@@@@@ $@@@@@@@@@@@~ ~@@@@@@ ~ - * @@@@@@@@@@@@@ @@@@@@@@@@@@@~ +@@@@@@@@@@I - * 7@@@@@@@@@@@@@@ O@@@@@@@@@@@@@@~ ~@@@@@@@@@@@@@@ - * +@@@@@@@@@@@@@@@~ O@@@@@@@@@@@@@@@~ @@@@@@@@@@@@@@@@ - * ~@@@@@@@@@@@@@@@@8 @@@@@@@@@@@@@@@@8~ @@@@@@@@@@@@@@@@N - * ~@@@@@@@@@@@@@@@@@~ @@@@@@@@@@@@@@@@@ $@@@@@@@@@@@@@@@@@ - * ~@@@@@@@@@@@@@@@@@~ ~@@@@@@@@@@@@@@@@@~ ?@@@@@@@@@@@@@@@@@ - * ~8@@@@@@@@@@@@@@@? N@@@@@@@@@@@@@@@+ ~@@@@@@@@@@@@@@@@+ - * ~@@@@@@@@@@@@@@@~ ~@@@@@@@@@@@@@@N @@@@@@@@@@@@@@8 - * ~N@@@@@@@@@@@? ~D@@@@@@@@@@@+ @@@@@@@@@@@@+~ - * ~ $@@@@@@@I $@@@@@@D ~Z@@@@@@N~ - * - * _ _ _ _ - * | | | | (_) - * _ __ ___ ___| | |_ _ __ ___ ___ __| |_ __ _ - * | '_ ` _ \ / _ \ | __| '_ ` _ \ / _ \/ _` | |/ _` | - * | | | | | | __/ | |_| | | | | | __/ (_| | | (_| | - * |_| |_| |_|\___|_|\__|_| |_| |_|\___|\__,_|_|\__,_| - * - * - * See the original LESS files at https://github.com/jking90/zen-garden - * - */ - -@import url('http://fonts.googleapis.com/css?family=Arvo:700|Open+Sans:400italic,400'); - -@import url('http://fast.fonts.com/cssapi/95b765fd-fae4-4f1b-8155-d8244914a5c6.css'); - -aside, -footer, -header, -nav, -section { - display: block; -} -[hidden] { - display: none; -} -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} -body { - margin: 0; -} -a:focus { - outline: thin dotted; -} -a:active, -a:hover { - outline: 0; -} -h1 { - font-size: 2em; - margin: 0.67em 0; -} -abbr[title] { - border-bottom: 1px dotted; -} -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} -body { - color: #0f2a36; - font-family: 'Open Sans', Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 1.25em; -} -h1 { - font-family: 'Adelle W01 Bold', 'Arvo', Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; - font-size: 91px; - font-weight: 500; -} -h2 { - color: #dd3b2a; - font-size: 22px; - font-style: italic; - font-weight: 400; -} -h3 { - color: #dd3b2a; - font-family: 'Adelle W01 Bold', 'Arvo', Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; - font-size: 40px; - font-weight: 500; - line-height: 1.25em; - margin: 0.5em 0; -} -h3 + p { - margin-top: 0; -} -a { - color: #2babe1; - text-decoration: none; -} -abbr[title] { - border: none; -} -.preamble abbr, -.supporting div abbr, -.requirements abbr { - border-bottom: 1px dotted #30e0ad; -} -.preamble abbr:hover:after, -.supporting div abbr:hover:after, -.requirements abbr:hover:after { - content: ' (' attr(title) ')'; - text-shadow: 0 0 1em #dd3b2a; -} -.spin from { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); -} -.spin to { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - -o-transform: rotate(360deg); - transform: rotate(360deg); -} -.rise from { - top: 100%; -} -.rise to { - top: 165px; -} -.rise-short from { - top: 100%; -} -.rise-short to { - top: 275px; -} -@-webkit-keyframes spin { - from { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - -o-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-moz-keyframes spin { - from { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - -o-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-ms-keyframes spin { - from { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - -o-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-o-keyframes spin { - from { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - -o-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@keyframes spin { - from { - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - transform: rotate(0deg); - } - to { - -webkit-transform: rotate(360deg); - -moz-transform: rotate(360deg); - -ms-transform: rotate(360deg); - -o-transform: rotate(360deg); - transform: rotate(360deg); - } -} -@-webkit-keyframes rise { - from { - top: 100%; - } - to { - top: 165px; - } -} -@-moz-keyframes rise { - from { - top: 100%; - } - to { - top: 165px; - } -} -@-ms-keyframes rise { - from { - top: 100%; - } - to { - top: 165px; - } -} -@-o-keyframes rise { - from { - top: 100%; - } - to { - top: 165px; - } -} -@keyframes rise { - from { - top: 100%; - } - to { - top: 165px; - } -} -@-webkit-keyframes rise-short { - from { - top: 100%; - } - to { - top: 275px; - } -} -@-moz-keyframes rise-short { - from { - top: 100%; - } - to { - top: 275px; - } -} -@-ms-keyframes rise-short { - from { - top: 100%; - } - to { - top: 275px; - } -} -@-o-keyframes rise-short { - from { - top: 100%; - } - to { - top: 275px; - } -} -@keyframes rise-short { - from { - top: 100%; - } - to { - top: 275px; - } -} -aside:before { - -webkit-animation: spin 8s infinite linear; - -moz-animation: spin 8s infinite linear; - -ms-animation: spin 8s infinite linear; - -o-animation: spin 8s infinite linear; -} -aside:after { - -webkit-animation: rise 1.5s 1 ease; - -moz-animation: rise 1.5s 1 ease; - -ms-animation: rise 1.5s 1 ease; - -o-animation: rise 1.5s 1 ease; -} -header { - margin: 0 auto; - max-width: 1040px; - position: relative; - text-align: center; - top: 0; - width: 100%; - z-index: 1; -} -header h1 { - border-top: 4px solid white; - color: #00374f; - display: inline-block; - min-height: 70px; - margin: 55px auto 0; - padding: 0 10px; - z-index: 2; -} -header h1:after { - background-color: #dd3b2a; - content: ''; - height: 2px; - left: 0; - margin-top: -3px; - position: absolute; - width: 100%; - z-index: -1; -} -header h2 { - text-align: right; - max-width: 695px; - margin: -10px auto 0; - width: 100%; -} -.summary { - position: relative; - max-width: 1040px; - margin: 80px auto 0; - width: 100%; - z-index: 2; -} -.summary p { - clear: right; - color: #dd3b2a; - float: right; - font-style: italic; - margin: 0; - width: 300px; -} -.summary p a:last-child { - white-space: nowrap; -} -.preamble { - clear: left; - float: left; - left: 50%; - margin-left: -520px; - max-width: 495px; - position: relative; - top: 298px; - width: 50%; - z-index: 4; -} -.intro { - background: #edf6ff; - background: -moz-linear-gradient(top, #ffffff 0%, #edf6ff 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #edf6ff)); - background: -webkit-linear-gradient(top, #ffffff 0%, #edf6ff 100%); - background: -o-linear-gradient(top, #ffffff 0%, #edf6ff 100%); - background: -ms-linear-gradient(top, #ffffff 0%, #edf6ff 100%); - background: linear-gradient(to bottom, #ffffff 0%, #edf6ff 100%); - float: left; - height: 590px; - width: 100%; -} -.supporting { - background-color: rgba(255, 255, 255, 0.9); - border-top: 5px solid #dd3b2a; - border-bottom: 5px solid #2babe1; - float: left; - position: relative; - width: 100%; - z-index: 3; -} -.supporting > * { - float: left; - width: 50%; -} -.explanation { - float: left; - margin-left: 1.5%; - max-width: 495px; - padding-bottom: 15px; - position: relative; - left: 50%; -} -.participation { - background: #edf6ff; - border-top: 5px solid #cce4fb; - padding-top: 15px; - width: 100%; -} -.participation h3, -.participation p { - clear: left; - float: left; - left: 50%; - margin-left: -520px; - max-width: 495px; - position: relative; -} -.participation:after { - background: url(../images/participation.png) 40px center no-repeat; - background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDExLjg0N3B4IiBoZWlnaHQ9IjQxMS44NDdweCIgdmlld0JveD0iMCAwIDQxMS44NDcgNDExLjg0NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDExLjg0NyA0MTEuODQ3Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNDQ0UzRkMiIGQ9Ik0yMDUuOTIzLDQxMS44NDdDOTIuMzc4LDQxMS44NDcsMCwzMTkuNDY4LDAsMjA1LjkyM0MwLDkyLjM3OSw5Mi4zNzgsMCwyMDUuOTIzLDANCgljMTEzLjU0NiwwLDIwNS45MjQsOTIuMzc5LDIwNS45MjQsMjA1LjkyM0M0MTEuODQ3LDMxOS40NjgsMzE5LjQ2OSw0MTEuODQ3LDIwNS45MjMsNDExLjg0N3oiLz4NCjxnPg0KCTxkZWZzPg0KCQk8Y2lyY2xlIGlkPSJTVkdJRF8xXyIgY3g9IjIwNS45MjMiIGN5PSIyMDUuOTIzIiByPSIxOTcuOTU3Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJPC9jbGlwUGF0aD4NCgk8Y2lyY2xlIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRkZGRkYiIGN4PSIyMDUuOTIzIiBjeT0iMjA1LjkyMyIgcj0iMTk3Ljk1NyIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNFRTgxMTIiIGQ9Ik0zNTcuMzg2LDM1NC42MWMtMTAuNzA5LTI0LjczNC0xOC41MDktNDEuODYtMjEuNDg0LTUwLjIwMWwyMi42OTItNTIuMDc4DQoJCWwtMjUuNDAyLTIuNjQ1bC0xMi45NDgsMzMuMTU0YzAuMDA4LDAuMDA0LDAuMDM0LDAuMDIyLDAuMDM0LDAuMDIyYy0wLjAxNi0wLjAxMy0wLjAzLDAtMC4wNDgsMGwtMC4wNzksMC4yMDdsLTAuMDY5LTAuMjINCgkJYy0zMC4xOTktMi4yODgtNDMuOTQ4LDIyLjI2OS00My45NDgsMjIuMjY5YzE3LjEyMi0zNi4xMDYsNDEuMzA4LTIzLjg1MSw0My45MDctMjIuNDAxbC0zLjI3NC05Ljg5N2wtOS42MzUtNDMuMTQ2bC0yMi41MTgsMS45NDENCgkJbDIuMzQ4LDM4Ljg1OWwtMjAuMjU1LTQxLjExN2wtMjEuMTY4LDYuMTc2bDE3LjgwNiw0Ny43NGwtMzAuMDkyLTMxLjI2NmwtMTIuNTExLDEyLjA5OGwyNi4zOTIsMzMuMjQ5bC0zMS4wNTItMTQuMDY1DQoJCWwtOS45NjEsMTMuNDM4bDMwLjY0NCwyMS4wMjZsMjguNCwzOS40ODlsMjYuNDUxLTYuOTY1bDQuODkzLTExLjA0OWwxNC43ODEtMi4wNTRsMTMuOTYzLTE5LjE0MWwtOS40MDgsMjIuNzk0bC0xNC4yNzEsMy4zODMNCgkJbC01LjQwNCw5LjcyOWwtMzAuOTMxLDMuNDA0bDI3LjE3OSw0My4zMUwzNTcuMzg2LDM1NC42MXoiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjMkJBQkUyIiBkPSJNMTExLjAyNiwzOTcuODFsMjcuMTc4LTQzLjMxbC0zMC45MzMtMy40MDdsLTUuNDAyLTkuNzI3bC0xNC4yNzMtMy4zODMNCgkJbC05LjQwNy0yMi43OTZsMTMuOTYzLDE5LjE0MmwxNC43ODQsMi4wNTNsNC44OSwxMS4wNWwyNi40NTQsNi45NjRsMjguMzk4LTM5LjQ4N2wzMC42NDUtMjEuMDI3bC05Ljk2Mi0xMy40MzhsLTMxLjA1MSwxNC4wNjcNCgkJbDI2LjM5MS0zMy4yNTJsLTEyLjUxMi0xMi4wOThsLTMwLjA5MiwzMS4yNjdsMTcuODA3LTQ3Ljc0bC0yMS4xNjctNi4xNzNsLTIwLjI1NSw0MS4xMTRsMi4zNDgtMzguODZsLTIyLjUyMS0xLjk0bC05LjYzMyw0My4xNDYNCgkJbC0zLjI3MSw5Ljg5NmMyLjU5OC0xLjQ0NywyNi43ODYtMTMuNzA2LDQzLjkwNCwyMi40MDNjMCwwLTEzLjc0Ny0yNC41Ni00My45NDUtMjIuMjY4bC0wLjA3MiwwLjIxOGwtMC4wNzYtMC4yMDgNCgkJYy0wLjAxOSwwLTAuMDM1LTAuMDEtMC4wNDgsMGMwLDAsMC4wMjUtMC4wMTgsMC4wMzItMC4wMjFsLTEyLjk0OS0zMy4xNTZsLTI1LjQwMiwyLjY0NmwyMi42OTUsNTIuMDc3DQoJCWMtMi45NzcsOC4zNDMtMTAuNzc3LDI1LjQ2Ni0yMS40ODYsNTAuMjAyTDExMS4wMjYsMzk3LjgxeiIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGMDU4MTkiIGQ9Ik0yOTIuNDE3LDE2Ljg1NGwtMjcuMTc5LDQzLjMwOGwzMC45MzEsMy40MDdsNS40MDQsOS43MjlsMTQuMjcxLDMuMzgzDQoJCWw5LjQwOCwyMi43OTVsLTEzLjk2My0xOS4xNDFsLTE0Ljc4MS0yLjA1NGwtNC44OTMtMTEuMDUxbC0yNi40NTEtNi45NjRsLTI4LjQsMzkuNDg5bC0zMC42NDQsMjEuMDI3bDkuOTYxLDEzLjQzOGwzMS4wNTItMTQuMDY3DQoJCWwtMjYuMzkyLDMzLjI1MmwxMi41MTEsMTIuMDk3bDMwLjA5Mi0zMS4yNjhsLTE3LjgwNiw0Ny43NDJsMjEuMTY4LDYuMTc2bDIwLjI1NS00MS4xMThsLTIuMzQ4LDM4Ljg1OGwyMi41MTgsMS45NDNsOS42MzUtNDMuMTQ2DQoJCWwzLjI3NC05Ljg5OWMtMi42LDEuNDQ5LTI2Ljc4NSwxMy43MDgtNDMuOTA3LTIyLjQwMWMwLDAsMTMuNzQ5LDI0LjU1OSw0My45NDgsMjIuMjY5bDAuMDY5LTAuMjE4bDAuMDc5LDAuMjA4DQoJCWMwLjAxOCwwLDAuMDMyLDAuMDEsMC4wNDgsMGMwLDAtMC4wMjYsMC4wMTgtMC4wMzQsMC4wMjFsMTIuOTQ4LDMzLjE1NWwyNS40MDItMi42NDZsLTIyLjY5Mi01Mi4wNzcNCgkJYzIuOTc2LTguMzQzLDEwLjc3NS0yNS40NjYsMjEuNDg0LTUwLjIwMkwyOTIuNDE3LDE2Ljg1NHoiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjRkFENDAwIiBkPSJNNDYuMDU2LDY1Ljc0NGMxMC43MDksMjQuNzM2LDE4LjUxLDQxLjg2LDIxLjQ4Niw1MC4yMDNsLTIyLjY5NSw1Mi4wNzcNCgkJbDI1LjQwMiwyLjY0NWwxMi45NDktMzMuMTU1Yy0wLjAwNy0wLjAwMi0wLjAzMi0wLjAyMi0wLjAzMi0wLjAyMmMwLjAxMywwLjAxMiwwLjAyOSwwLDAuMDQ4LDBsMC4wNzYtMC4yMDhsMC4wNzIsMC4yMg0KCQljMzAuMTk4LDIuMjkxLDQzLjk0NS0yMi4yNjcsNDMuOTQ1LTIyLjI2N2MtMTcuMTE4LDM2LjEwNy00MS4zMDcsMjMuODUtNDMuOTA0LDIyLjM5OWwzLjI3MSw5Ljg5OGw5LjYzMyw0My4xNDdsMjIuNTIxLTEuOTQxDQoJCWwtMi4zNDgtMzguODU3bDIwLjI1NSw0MS4xMTNsMjEuMTY3LTYuMTczbC0xNy44MDctNDcuNzQybDMwLjA5MiwzMS4yNjZsMTIuNTEyLTEyLjA5NWwtMjYuMzkxLTMzLjI1M2wzMS4wNTEsMTQuMDY3bDkuOTYyLTEzLjQzNw0KCQlsLTMwLjY0NS0yMS4wMjdsLTI4LjM5OC0zOS40ODhsLTI2LjQ1NCw2Ljk2MmwtNC44OSwxMS4wNTJsLTE0Ljc4NCwyLjA1MUw3OC4xODgsMTAyLjMybDkuNDA3LTIyLjc5M2wxNC4yNzMtMy4zODRsNS40MDItOS43MjcNCgkJbDMwLjkzMy0zLjQwN0wxMTEuMDI2LDE5LjdMNDYuMDU2LDY1Ljc0NHoiLz4NCgk8ZyBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIj4NCgkJPHBvbHlnb24gZmlsbD0iI0YwNUExQyIgcG9pbnRzPSIyNDUuNTM4LDIzNS41MzQgMjYwLjk3OCwyNzYuOTI2IDI2OC45MjksMjc2LjkyNiAyNjguOTI5LDIzMy44NzIgMjY2LjcwNiwyMjkuMzU4IAkJIi8+DQoJCTxwb2x5Z29uIGZpbGw9IiNGMDVBMUMiIHBvaW50cz0iMjMzLjI1MiwyNTIuMDA5IDIyMC43NDEsMjY0LjEwNiAyMzAuOTE5LDI3Ni45MjYgMjU3LjIzNCwyNzYuOTI2IAkJIi8+DQoJCTxwb2x5Z29uIGZpbGw9IiMwNThERDEiIHBvaW50cz0iMTU3LjkwMywyMzIuNjg4IDE0Mi45OTEsMjI4LjMzNiAxNDIuOTkxLDI3Mi42NjcgCQkiLz4NCgkJPHBvbHlnb24gZmlsbD0iIzA1OEREMSIgcG9pbnRzPSIxNzAuMTg4LDI0OS4xNjEgMTQzLjQ2NiwyNzYuOTI2IDE3MC4yNjcsMjc2LjkyNiAxODIuNywyNjEuMjU5IAkJIi8+DQoJCTxwb2x5Z29uIGZpbGw9IiMyREUwQUQiIHBvaW50cz0iMTU2LjY1LDEyMy43MTQgMTU2LjY1LDI2My4yNjcgMjU1LjI3MSwyNjMuMjY3IDI1NS4yNzEsMTYzLjE4OCAyMTUuODAzLDEyMy43MTQgCQkiLz4NCgkJPHBvbHlnb24gZmlsbD0iIzEzQTg3QSIgcG9pbnRzPSIyNTUuMjcxLDE2My4yMDYgMjE1Ljc1OSwxNjMuMjA2IDIxNS43NTksMTIzLjcxNCAyMTAuMzc2LDE2OC40MDggCQkiLz4NCgkJPGc+DQoJCQk8cG9seWdvbiBmaWxsPSIjMzdGNEJBIiBwb2ludHM9IjIxNS44MDMsMTIzLjcxNCAyMTUuNzU5LDEyMy43MTQgMjE1Ljc1OSwxNjMuMjA2IDI1NS4yNzEsMTYzLjIwNiAyNTUuMjcxLDE2My4xODggCQkJIi8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTkyLjg3OSwyMTcuMTg3Yy0yLjQxNywxLjQ3NC02LjUwOCwyLjI0OC0xMC4yMzEsMi4yNDhjLTEwLjE5MywwLTE0LjM3Mi01LjkzNC0xNC4zNzItMTUuNDMNCgkJCQljMC04LjcyLDUuMDM3LTE1LjIzMSwxNS4yMzEtMTUuMjMxYzMuMzk5LDAsNy4wNCwwLjg2LDkuMjksMi4zMzN2OC4wMmwtNC40OTgtMC4zNjJsLTAuNjYtNC4wMTcNCgkJCQljLTAuMDgxLTAuNDA5LTAuMjQzLTAuNjE2LTAuNjUyLTAuNzM1Yy0wLjkwNS0wLjI4Mi0yLjI5NC0wLjQ4OS0zLjY0My0wLjQ4OWMtNS4yMDIsMC04LjUxNywzLjUyMi04LjUxNywxMC40ODINCgkJCQljMCw3LjI0NCwzLjE1MSwxMC43NjYsOC4yMzEsMTAuNzY2YzEuMzQ4LDAsMy4wMjItMC4yMDYsNC4wOTEtMC41MzRjMC40ODktMC4xMTgsMC42MTUtMC4yNDYsMC43MzktMC44NTdsMC42MDktMy44MWg0LjM4MQ0KCQkJCVYyMTcuMTg3eiIvPg0KCQkJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIxMS42OTQsMTk3Ljk4M2wtMC40OTctMy4zMTVjLTAuMDc5LTAuNDg4LTAuMjA0LTAuNjU2LTAuNDg5LTAuNzgNCgkJCQljLTAuNjU4LTAuMjAzLTEuNjM2LTAuNDQ5LTIuOTkxLTAuNDQ5Yy0zLjA3MiwwLTQuNTg5LDEuMzkzLTQuNTg5LDMuNDc5YzAsMi43MDEsMi43ODcsMy40MzgsNS44OTYsNC4zODENCgkJCQljMy44OTIsMS4xOSw4LjIzLDIuNjYyLDguMjMsOC44YzAsNi43MTgtNS4yMzksOS4zMzYtMTEuNTA0LDkuMzM2Yy0zLjY4MSwwLTcuODE3LTAuOTM4LTkuMzc3LTEuNjc0di03Ljk4OGg0LjU4NmwwLjgyLDMuODkyDQoJCQkJYzAuMDg0LDAuNDksMC4xNjcsMC42MTcsMC42OTYsMC43MzNjMC40OTMsMC4xMjcsMS44ODIsMC40NTMsMy40MzgsMC40NTNjMy4zMTcsMCw1LjE2Mi0xLjMxMSw1LjE2Mi0zLjgwNQ0KCQkJCWMwLTIuNjItMi4zMzctMy40MzktNS4wNzQtNC4yMTRjLTQuMDU2LTEuMTUyLTkuMDUtMi4yNTgtOS4wNS04Ljg0OWMwLTYuMzA0LDQuNzQ3LTkuMjEsMTAuOTY4LTkuMjENCgkJCQljMy41MjEsMCw2LjU1MSwwLjg2LDguMzk3LDEuNjMydjcuOTg4TDIxMS42OTQsMTk3Ljk4M3oiLz4NCgkJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMzUuOTg1LDE5Ny45ODNsLTAuNDk4LTMuMzE1Yy0wLjA3Ni0wLjQ4OC0wLjIwMi0wLjY1Ni0wLjQ5LTAuNzhjLTAuNjUxLTAuMjAzLTEuNjMyLTAuNDQ5LTIuOTg4LTAuNDQ5DQoJCQkJYy0zLjA2OSwwLTQuNTg0LDEuMzkzLTQuNTg0LDMuNDc5YzAsMi43MDEsMi43ODUsMy40MzgsNS44OTYsNC4zODFjMy44OTEsMS4xOSw4LjIzMSwyLjY2Miw4LjIzMSw4LjgNCgkJCQljMCw2LjcxOC01LjI0LDkuMzM2LTExLjUwOCw5LjMzNmMtMy42NzksMC03LjgxNS0wLjkzOC05LjM3NC0xLjY3NHYtNy45ODhoNC41ODFsMC44MjQsMy44OTINCgkJCQljMC4wODMsMC40OSwwLjE2MywwLjYxNywwLjY5MywwLjczM2MwLjQ5NiwwLjEyNywxLjg4NiwwLjQ1MywzLjQ0MSwwLjQ1M2MzLjMxNCwwLDUuMTU5LTEuMzExLDUuMTU5LTMuODA1DQoJCQkJYzAtMi42Mi0yLjMzNC0zLjQzOS01LjA3Ny00LjIxNGMtNC4wNTQtMS4xNTItOS4wNDktMi4yNTgtOS4wNDktOC44NDljMC02LjMwNCw0Ljc1Mi05LjIxLDEwLjk3My05LjIxDQoJCQkJYzMuNTIxLDAsNi41NDcsMC44Niw4LjM5NSwxLjYzMnY3Ljk4OEwyMzUuOTg1LDE5Ny45ODN6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==') 40px center no-repeat; - clear: right; - content: ''; - display: block; - float: left; - height: 412px; - left: 50%; - margin-top: -310px; - max-width: 495px; - min-width: 412px; - position: relative; - width: 100%; -} -.benefits { - background-color: #edf6ff; - border-bottom: 5px solid #cce4fb; - margin-bottom: 25px; - padding: 150px 0 50px 0; - width: 100%; -} -.benefits h3, -.benefits p { - clear: left; - float: left; - left: 50%; - margin-left: 1.5%; - max-width: 495px; - position: relative; - width: 50%; -} -.benefits:before { - border: 1px solid #dd3b2a; - content: ''; - display: block; - height: 0px; - left: 50%; - position: absolute; - margin: -60px 0 0 -110px; - width: 220px; -} -.benefits:after { - background: url(../images/benefits.png) 150px center no-repeat; - background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzEyLjA5N3B4IiBoZWlnaHQ9IjMxMi4wOTdweCIgdmlld0JveD0iMCAwIDMxMi4wOTcgMzEyLjA5NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzEyLjA5NyAzMTIuMDk3Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNDQ0UzRkMiIGQ9Ik0xNTYuMDQ4LDMxMi4wOTdDNzAuMDAzLDMxMi4wOTcsMCwyNDIuMDk0LDAsMTU2LjA0OEMwLDcwLjAwMyw3MC4wMDMsMCwxNTYuMDQ4LDANCglzMTU2LjA0OSw3MC4wMDMsMTU2LjA0OSwxNTYuMDQ4QzMxMi4wOTcsMjQyLjA5NCwyNDIuMDkzLDMxMi4wOTcsMTU2LjA0OCwzMTIuMDk3eiIvPg0KPGc+DQoJPGRlZnM+DQoJCTxjaXJjbGUgaWQ9IlNWR0lEXzFfIiBjeD0iMTU2LjA0OCIgY3k9IjE1Ni4wNDgiIHI9IjE0NS45NzYiLz4NCgk8L2RlZnM+DQoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgb3ZlcmZsb3c9InZpc2libGUiLz4NCgk8L2NsaXBQYXRoPg0KCTxnIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiPg0KCQk8Y2lyY2xlIGZpbGw9IiMyREUwQUQiIGN4PSIxNTYuMDQ4IiBjeT0iMTU2LjA0OCIgcj0iMTQ1Ljk3NiIvPg0KCTwvZz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjQ0NFM0ZDIiBkPSJNMjM5Ljc5OCwyMjIuMTc1YzEuNzY2LTcuOTAzLDEuNzk1LTM3LjIzMS0xOC45MTYtNzcuNDQ1DQoJCWMtMS44MjMtMy41NS0zLjQ0NS03LjY0Ni01LjE2Mi0xMS45NzVjLTIuMjcxLTUuNzI1LTQuODI4LTEyLjE2OS04LjQwMi0xOC42OTdjLTIuMzA1LTcuODI5LTEzLjI0LTQxLjY0NC0zMy41OTYtNTQuMDk3DQoJCWMtMTMuMTAyLTguMDE1LTIwLjQ0Ny0xMS45MjUtMzUuNzQ0LTE5LjA0MWMtMS4zOC0wLjYzNy0yLjctMS4zMDItMy45NTEtMS45MTljLTQuNDIyLTIuMjAyLTguMjQ4LTQuMTA3LTEyLjQ0LTQuMzY5bC0wLjg4Mi0wLjAyNw0KCQljLTExLjUzLTAuMDUyLTE3LjU2OCwxMC4xNTItMTkuNTQ3LDEzLjQ5MWMtMC40MjIsMC42ODYtMi4xNjUsMy4wMTctMy40MzgsNC43MjVjLTQuODAyLDYuNDE5LTcuODA4LDEwLjU2Mi05LjEyMSwxMy45MzkNCgkJYy0xLjUxOCwzLjkxLTAuOTgxLDcuNDMxLDIuNzM1LDEzLjkyYy0xLjI3OSwxLjk1NC0yLjQ3Niw0LjE2OC0zLjE5Miw2LjQ3N2MtMC41NjcsMS44NTMtMS4xMTUsNS41NjMsMS40ODcsOS43MzcNCgkJYzEuOTEsMy4wNjUsOS44ODIsMTEuMDgxLDE2LjAyMSwxMi4wNmwwLjc3MywwLjEwOGwwLjQ5MSwwLjAzYzIuNzI4LDAuMTY5LDUuNDA4LTAuNDM3LDguNTAyLTEuMTMxDQoJCWMyLjA1NS0wLjQ3LDUuMTU3LTEuMTY0LDYuNjIxLTEuMDczYzAuMDA4LDAuMDAyLDAuMDA4LDAuMDAyLDAuMDA4LDAuMDAyYzEuMTQxLDAuMTA0LDIuMjM2LDAuNTQ5LDQuMDc1LDEuMzE5DQoJCWMyLjQ5NCwxLjA0Nyw1LjU4NiwyLjM0Niw5LjU3NSwyLjU5NGMxLjM1OCwwLjA4NSwyLjczLDAuMDQxLDQuMDk0LTAuMTQ1YzAuNTE0LTAuMDY1LDEuNzQ2LTAuMTUzLDQuMjczLDAuMDAzDQoJCWMxLjc1NCwwLjEwOSwzLjUxOCwwLjI5Miw1LjA1NywwLjQ0NWMwLjA0OSwwLjAxLDAuMTA1LDAuMDEzLDAuMTU0LDAuMDE2YzIuNTU5LDYuMDUxLDYuNDc4LDE4LjE0Myw3LjM0NiwyOC45Nw0KCQljLTEuNjIzLDQuMzI2LTQuNjI2LDEzLjQ4LTQuODIzLDIyLjU2N2MtMC4wNzIsMy4xODMtMC4yNTYsNi44MDctMC41MTksMTAuMzU5Yy02LjMtNi4zNzMtMTYuMDI3LTEyLjM5MS0zMC42NTMtMTMuNDM4DQoJCWwtMC43MTgtMC4wNTRjLTEzLjg2Ni0wLjg2MS0yMi4yMjUsMi42MjMtMjcuMjM3LDUuODc4Yy0wLjE2OS0wLjE2NC0wLjMzMy0wLjMyMy0wLjQ5MS0wLjQ4MQ0KCQljLTcuMjI5LTcuMDgzLTE4LjE1NC0xNy43OTUtMzMuMzEyLTIwLjI3NmMtMi40NDUtMC40MDctNC44NzgtMC42ODEtNy4yMjYtMC44MjhjLTE4LjQ0OC0xLjE0NS0yOS45MTQsNS44MTItMzYuNzY2LDkuOTY0DQoJCWMtMC43MjMsMC40NC0xLjU5NCwwLjk2Ny0yLjM0MiwxLjM5NmMtMC43MjktMC4zODMtMS40NTMtMC43NjMtMS44ODgtMS4wMTFsLTQuOTQxLTMuMzg0bC01LjI2MSw4NC42ODdsNzIuODY1LDQ4LjMzNmwwLjg3Mi0zLjIxMw0KCQljMC43MS0yLjYwNCwyLjI0My04LjI1OSwzLjYzNy0xMi4yMDhjMy45NjgsMS4yNjMsOS41NjcsMy42NzksMTQuMzM0LDUuNzI4YzMuNzMyLDEuNjA0LDcuNjI5LDMuMjgyLDExLjU1Myw0LjgyOQ0KCQljNS44NDcsMi4zMDYsMTUuMTcsNC4wMDMsMjUuNTgxLDQuNjUxYzkuMDM0LDAuNTYxLDIyLjg3LDAuNTk4LDM3LjQ0MS0yLjM4NmMxMC41NjQtMi4xNTYsMTguMjk1LTIuMTg0LDI1LjEyMS0yLjIwMg0KCQljMTAuNjQ2LTAuMDM5LDIwLjczLTAuMDY2LDMxLjYxNy05LjM5YzMuOTcxLTEuODYxLDguNTYxLTQuMTE5LDEwLjUyMS01LjQ4MWM4LjA3NC01LjYxMSwxNC4wMzgtMTcuMzc4LDguMDM3LTI5Ljk1NA0KCQlDMjM5LjQ1NCwyMjguNzk2LDIzOS42NCwyMjMuMTUsMjM5Ljc5OCwyMjIuMTc1eiIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiMwRTgzQzQiIGQ9Ik0yMjkuNTcyLDIxOS45YzAuOTU0LTQuMjg3LDIuMTkxLTMxLjE1NS0xOC4wMDQtNzAuMzc4DQoJCWMtNC43NDktOS4yMzQtNy43MzUtMjAuMzM3LTEzLjk5MS0zMS40MjljMCwwLTEwLjQ0Ny0zNy42NDgtMjkuMzI2LTQ5LjE5N2MtMTIuNzc5LTcuODEyLTE5LjktMTEuNTk0LTM0LjY3MS0xOC40NjUNCgkJYy01LjQ2Mi0yLjUyMi0xMC4wNjYtNS4zNDMtMTIuOTIzLTUuMzQ4Yy01LjA1MS0wLjAyNy04LjI0Nyw0LjU3Mi0xMC40OTEsOC4zNjFjLTEuNzA0LDIuODktMTAuMzkzLDEzLjQ3OS0xMS44MDIsMTcuMTA3DQoJCWMtMC41MzMsMS4zNyw1LjgyOCwxMC45MDEsNS44MjgsMTAuOTAxcy00Ljc2Myw0LjcwNS02LjAzLDguNzYxYy0wLjQ5NCwxLjY0Miw3LjMyOCw4LjEwNyw5LjEsOC4zOTMNCgkJYzIuNzIyLDAuNDIsMTAuNDc1LTIuNjY1LDE1Ljc3Mi0yLjE1NGM2LjI2NCwwLjYwMiw5LjcwMiw0LjU2MywxNS4zOCwzLjgxNWM1LjY4My0wLjc0MywxNS4yMjgsMS4xMzcsMTYuODg5LDAuNjg4DQoJCWMxLjY1OS0wLjQ1MywxMS4xMjIsMjIuMDQxLDExLjkyMyw0MC44MjRjMCwwLTQuNzMyLDExLjAxOC00Ljk1MiwyMS4xMDJjLTAuMTkxLDguNzQ4LTEuNjgzLDI5LjYxMS0zLjk0OSwzMS41OTUNCgkJYy0yLjI2MywxLjk3Ny00LjIzMiwwLjk3NC02LjY4Ny0xLjkyN2MwLDAtNi4zMS0yMC42OTEtMzEuNzYyLTIyLjUxN2MtMjEuODkyLTEuNTc0LTI1LjA2Niw5LjE1NS0yNy42NDcsOC40Mg0KCQljLTUuMTUtMS40Ni0xNy4yNjgtMjAuNTQ3LTM1LjA2NS0yMy40NzJjLTMwLjEzNi00Ljk0LTM5LjQ3MiwxNC40NTMtNDYuODY2LDEwLjgxOWMtMC42NDUtMC4zMi00LjcwNi0yLjM5NC01LjM1MS0yLjgzNw0KCQlsLTQuNTI1LDcyLjgyN2w2My42Miw0Mi4xODdjMi4xMzctNy44ODcsNS41MDQtMjAuMzMzLDguNjI3LTIwLjgyOGM2LjU1OS0xLjAzNiwyMC41NSw2LjM4NywzNC44OCwxMi4wNDgNCgkJYzkuNTUyLDMuNzYxLDM0LjYzOCw2LjMzNSw1Ny4wNzYsMS43NDljMjguODE4LTUuOTAyLDM5LjAwNCwyLjcxMSw1My4wMzYtMTAuMTc3YzAsMCw4LjQzNC0zLjkxNSwxMC4zNDYtNS4yNDENCgkJYzQuNDA1LTMuMDYyLDguMDA1LTkuNjE2LDQuNTU4LTE2LjgzM0MyMjguNjk0LDIzMC41OCwyMjkuMDQ3LDIyMi4yNjIsMjI5LjU3MiwyMTkuOXoiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjMkJBQkUyIiBkPSJNMTI4LjA5Niw1Mi4zODZjMCwwLTguNy02LjQ4Ny0xMS43MDctMy4xNzgNCgkJYy0zLjAwMSwzLjMxNC0xNC41ODIsMjAuNzA1LTE0LjU4MiwyMC43MDVsNC45NzUsMTAuMTk0bDkuNjg3LTEuMTQ4TDEyOC4wOTYsNTIuMzg2eiIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiMyQkFCRTIiIGQ9Ik0xMDUuNTM3LDgzLjE3OWMwLDAtNC41MzEsNS4zMTctNC42MzgsNy4wNTkNCgkJYy0wLjEwOSwxLjc0OSwxNi4zNCwxLjcyMSwxNy4yMDYtMS4wMzFDMTE4Ljk4MSw4Ni40NjYsMTA4LjY3OCw4My4zNzIsMTA1LjUzNyw4My4xNzl6Ii8+DQoJPHBhdGggY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iIzJCQUJFMiIgZD0iTTE2Mi4xNDUsMTAxLjM5OWMtMi40OTcsMC44OTYsOC44NTIsMzAuNDA3LDkuMzI0LDQxLjUyNg0KCQljMCwwLTUuNTQyLDEwLjc5MS01Ljc1OCwyMC44NzVjLTAuMTkxLDguNzM5LTMuOTg4LDMxLjg4OS0xLjc4MSwzMi44OTRjOC4zMDUsMy43NzksMTEuNjk2LTIyLjAyNSwxMS41NTItMjguMzI3DQoJCWMtMC4zNy0xNi40NjcsNi45ODEtMjIuMzE3LDYuNjUzLTI4LjI4M0MxODEuODE4LDEzNC4xMTksMTY0LjY1NywxMDAuNDk4LDE2Mi4xNDUsMTAxLjM5OXoiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjMDQ3MkI2IiBkPSJNNC43NTgsMjMzLjYzMmwyLjAyNC0zMi42MzNjMTUsOC4zNjEsNDcuNTE0LDI1LjYyMiw3NiwxNy41OTkNCgkJYzExLjI3LTMuMTc5LDguODU0LDIuNjk3LDIyLjkyOCw4LjI1YzE2LjUyMSw2LjUyLDM0LjQzNSwxNS4xMzksNTIuMTI1LDUuODYzYzQuNDc5LTIuMzUsMTEuNjEyLTYuNDg0LDE2LjE0My0yLjM2Mw0KCQljMjAuOTc0LDE5LjAxMyw0MS42MzksMTIuNTg0LDU1LjYxLDEyLjU1MWMwLjg1Niw0LjQtMS45MSw3Ljc1Ni0zLjk3Niw5LjE5NGMtMC45OTQsMC42ODUtNS44MTgsMy4wNjgtOS43MDksNC44NjlsLTAuNjAyLDAuMjczDQoJCWwtMC40NzgsMC40NDVjLTcuMTkzLDYuNjA0LTEyLjgxNCw2LjYyNy0yMy4wMjYsNi42NTZjLTcuMTM4LDAuMDI1LTE2LjAxNCwwLjA0Ny0yOC4wMTEsMi41MDENCgkJYy0xMC4xNDEsMi4wNzYtMjIuMDc0LDIuODI4LTMzLjU5MywyLjExMmMtOC44MDgtMC41NS0xNi43MDUtMS45MTUtMjEuMTEtMy42NDhjLTMuNzc2LTEuNDk4LTcuNTMxLTMuMTA5LTExLjEzNS00LjY2Mg0KCQljLTkuMjEtMy45NjUtMTcuMTY1LTcuMzg5LTIyLjk0Mi03Ljc1Yy0xLjA3LTAuMDY1LTIuMDgyLTAuMDMtMi45OTQsMC4xMjFjLTQuMzM3LDAuNjg4LTYuNzg4LDUuNTQ3LTEwLjQ2MiwxOC4yOTVMNC43NTgsMjMzLjYzMnoNCgkJIi8+DQoJPHBhdGggY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iIzJCQUJFMiIgZD0iTTE1Ni44NzYsMjA4Ljg1NWMtMTAuMjE3LDEuMTExLTM2Ljc1MiwyLjczNS01MC40NzktNC4zMDINCgkJYy02Ljg1My0zLjUyLTEwLjEyNy0xMC4yMTUtMTUuNDIxLTEwLjk4OGMtNi4yMDUtMC45MTItMTIuMDU5LDkuNTQ2LTQ2Ljg5NiwwLjExNWMtMTguNjQzLTUuMDQ4LTMyLjQzOS0xNi42MzUtMzUuNDItMTguMzk0DQoJCWwwLjI2OC00LjMyM2MwLjk1NiwwLjQzMiwxMC45NDctMS42NTQsMTQuNzcyLTMuOTc3YzYuMDc4LTMuNjg1LDE0Ljk4My04LjE3MywyOC43MzQtNi4yNjMNCgkJYzI0LjcxNCwzLjQyOSwzMy4yODIsMjQuMjk2LDM5LjA4MywyNS41ODNjNi41NjMsMS40NDgsMTAuODEzLTEzLjUwMiwzMS4wMzUtMTAuOTA2YzEyLjY5MywxLjYyMywyMy40ODgsMTAuNzMzLDI1Ljk5NiwyMS4wMzQNCgkJQzE1MC42MDgsMjA0Ljg5OCwxNTcuMzI1LDIwOC4xMTcsMTU2Ljg3NiwyMDguODU1eiIvPg0KCTxwb2x5Z29uIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiMyMEFCREEiIHBvaW50cz0iMTMxLjM1OCw4NC4zNDggMTM0LjM1Miw4OC45OTMgMTMwLjUyLDg5LjQxNCAxMjYuOTM5LDg3Ljc0NyAJIi8+DQoJPHBhdGggY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iIzA0NzJCNiIgZD0iTTE4MC45MDgsMjEwLjU3NmMwLjc0OS0zLjYyNiwxNC4xNDUsNy45NjcsMjUuNDE3LDEzLjQ4MQ0KCQljOC43MDYsNC4yNjYsMTcuOTY4LTAuNTE1LDE2LjYzNCwyLjYwOWMtMS4xODcsMi43NzEtNy45NTcsOS44MjktMTguNjkxLDUuMTM3QzE5Mi4wOTYsMjI2LjQ4NywxODAuMTU2LDIxNC4yMDUsMTgwLjkwOCwyMTAuNTc2eiINCgkJLz4NCgk8cG9seWdvbiBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjIxNS42MDUsMTc2Ljg1IDIxNC41MzQsMTcwLjY0NyAxODMuNjIyLDE3OS4yNTUgMTg2LjA0NSwxODUuMDc1IA0KCQkyMDEuNzMzLDE4MC43MSAyMDAuOTk3LDE4MS4yOTMgMTg4LjM0OSwxOTEuMjQgMTkwLjQ2MiwxOTYuOTk3IDE5MC40ODMsMTk2Ljk4MyAxOTAuNDgzLDE5Ni45ODcgMjExLjcyNywxOTEuMTUzIDIxMy40MzgsMTk5LjE0NiANCgkJMjA3LjAwMywyMDMuMDYyIDE5OS44MjEsMjAzLjIzNCAxOTguMDUsMTk4LjQ2OCAxOTEuODE0LDIwMC4xOTggMTk1LjI1NywyMDkuMzk2IDIwOC44OTksMjA5LjYxNCAyMjAuNDIzLDIwMi40NiAyMTYuODQ0LDE4My4yOTkgDQoJCTIwMi42MTEsMTg3LjI2NSAyMDIuNjQ5LDE4Ny4yMzQgCSIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiMwRTgzQzQiIGQ9Ik0xMjAuNzM5LDIyNi4wNzFjLTcuODkyLTAuMjk4LTE0LjU2OC01LjAxMi0xNy4xMDYtMTEuNzc4aC0wLjAwNA0KCQljLTEuNTM3LTAuMDc5LTIuNzI3LTAuNjc4LTMuNTA4LTEuNjQ4Yy0wLjc1MS0wLjkzNS0xLjA3Ny0yLjE1NS0wLjg4Ni0zLjM0N2MwLjA3LTAuMzkyLDAuMTYyLTAuNjk2LDAuMjc0LTAuOTY3bDIuNTE3LTcuMjk3DQoJCWMwLjY5LTEuODE5LDIuNDI2LTIuOTg0LDQuMzUtMi45ODRsMC4zMDIsMC4wMDhjMS4yMjYsMC4wOCwyLjM2NSwwLjY1NiwzLjEyLDEuNTg1bDUuMTIxLDUuMzAyYzAuMTc4LDAuMTUzLDAuNDMyLDAuNDcsMC42NDUsMC44NA0KCQljMC41NTgsMC44MzYsMC43NjMsMi4wMDgsMC40ODksMy4xNThjLTAuMjY5LDEuMTE4LTAuOTc2LDIuMTA0LTEuOTYyLDIuNzQ2YzAuNjcyLDEuMDQ0LDEuNTkzLDEuOTM1LDIuNywyLjYxNWwyLjA4Mi0xOC43MzENCgkJYy0xLjk1NC0xLjY0MS0zLTQuMDgxLTIuNjg5LTYuNTQ1YzAuNDYyLTMuODUyLDMuOTk4LTYuNzY3LDguMjI0LTYuNzY3YzAuMjY4LDAsMC41MzcsMC4wMTEsMC44MTIsMC4wMzUNCgkJYzQuNDc0LDAuNDA1LDcuODIyLDQuMDk3LDcuNDcxLDguMjMzYy0wLjIyMSwyLjQ4MS0xLjY5MSw0LjY0My0zLjg5Niw1Ljg5NmwtMS43NjgsMTcuOTkxYzAuOTk3LTAuNTUyLDEuODg1LTEuMjYzLDIuNjE3LTIuMDk2DQoJCWMtMC43MDgtMC43MjUtMS4xNDYtMS42NzMtMS4yMjgtMi42NzNjLTAuMDk2LTEuMTc1LDAuMzA0LTIuMzU3LDEuMDk2LTMuMjQ2YzAuMjM4LTAuMjYsMC40NzctMC40NjgsMC43MjUtMC42NDdsNS44OTctNC41NTENCgkJYzAuNjY3LTAuNTksMS42OTEtMC45NzUsMi43NDktMC45NzVsMC4zMDEsMC4wMTFjMi4wMjEsMC4xNDUsMy42NTYsMS42MjYsMy45NzEsMy41OTlsMC44NjYsNy4zNTkNCgkJYzAuMDIzLDAuMDczLDAuMDUyLDAuNDAxLDAuMDQzLDAuNzUyYy0wLjEyLDIuNDA0LTIuMDU4LDQuMjI5LTQuNDEyLDQuMjI5Yy0wLjAwMywwLTAuMjk5LTAuMDE0LTAuNDM2LTAuMDI0DQoJCWMtMy40OTgsNi4wMjgtMTAuMzA1LDkuOTMzLTE3LjY4Niw5LjkzM0MxMjEuMjY3LDIyNi4wODcsMTIxLjAwNSwyMjYuMDgyLDEyMC43MzksMjI2LjA3MXoiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjRkZGRkZGIiBkPSJNMTI0LjI1NCwxOTEuODM0Yy0xLjIzOS0wLjEwMy0yLjE1Ni0xLjA4Ni0yLjAzMy0yLjE4Mg0KCQljMC4xMjgtMS4xMDIsMS4yMzQtMS44OTQsMi40NS0xLjc5YzEuMjQ3LDAuMTExLDIuMTQ2LDEuMDY1LDIuMDQxLDIuMTY1QzEyNi42MDYsMTkxLjEyLDEyNS41MTQsMTkxLjkzNSwxMjQuMjU0LDE5MS44MzR6DQoJCSBNMTQxLjIzOSwyMTEuNTIybC0wLjg1LTcuMjQyYy0wLjEwNi0wLjY2Ni0wLjY4My0xLjE5OS0xLjQwNi0xLjI1MWMtMC40NDQtMC4wMjctMC44MzksMC4xMjUtMS4xNDMsMC4zOTFsLTUuOTU1LDQuNTkzDQoJCWMtMC4xMDIsMC4wNzQtMC4xOTksMC4xNTYtMC4yODcsMC4yNTNjLTAuNTk1LDAuNjY2LTAuNTE3LDEuNjYsMC4xNzYsMi4yMTljMC4xMzcsMC4xMDgsMC4yODYsMC4xODMsMC40MzQsMC4yNWwxLjQwNSwwLjUzNg0KCQljLTEuNjcsMy43MTEtNS4zODEsNi40OS05Ljc5Miw3LjEyMmwyLjM0OC0yMy44NzhjMi4wNTMtMC41OTksMy41NTYtMi4yMywzLjczMy00LjIyM2MwLjIyNC0yLjYyOS0xLjk2OC00Ljk0LTQuOTM2LTUuMjA5DQoJCWMtMi45NzctMC4yNjgtNS42ODcsMS42MzItNi4wMDcsNC4yOTNjLTAuMjU0LDIuMDE4LDAuOTc5LDMuODkyLDIuODg0LDQuODA0bC0yLjY3MywyNC4wNDhjLTQuNDU4LTAuOTgzLTcuODM4LTQuMjAyLTguODEtOC4yMzgNCgkJbDEuNjAxLTAuMzgzYzAuMTc4LTAuMDQ5LDAuMzQ3LTAuMTA2LDAuNTA5LTAuMjA1YzAuODUtMC40ODYsMS4xNTItMS40ODYsMC42NjktMi4yMTljLTAuMDctMC4xMjMtMC4xNDUtMC4yMTMtMC4yMzgtMC4yOTgNCgkJbC01LjI3MS01LjQ3NGMtMC4yNTUtMC4zMTItMC42NjctMC41MjktMS4xMzUtMC41NjFjLTAuODA2LTAuMDUyLTEuNTY4LDAuNDIxLTEuODI1LDEuMDk3bC0yLjU1NSw3LjQwOA0KCQljLTAuMDU3LDAuMTE0LTAuMDk0LDAuMjUxLTAuMTE3LDAuMzhjLTAuMTQ2LDAuOTEyLDAuNTQxLDEuNzAyLDEuNTQ0LDEuNzZjMC4xOSwwLjAwNSwwLjM2OC0wLjAwNiwwLjU0Ni0wLjA1M2wxLjUyNy0wLjM1Nw0KCQljMS4zMzksNi43MDksNy4zOTEsMTEuODk0LDE1LjIyNywxMi4xOWM3LjY4LDAuMjg0LDE0LjM3Ny00LjIzMywxNi45MTItMTAuNDg1bDEuMzExLDAuNDkyYzAuMTUyLDAuMDYsMC4zMTEsMC4wOSwwLjQ4OCwwLjA5Ng0KCQljMC45MDgsMC4wNDksMS42NjctMC42MTcsMS43MTEtMS40OTFDMTQxLjI2NywyMTEuNzYzLDE0MS4yNjIsMjExLjYzMiwxNDEuMjM5LDIxMS41MjJ6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==') 150px center no-repeat; - content: ''; - display: block; - float: left; - height: 312px; - left: 50%; - margin: -90px 0 0 -1050px; - max-width: 495px; - min-width: 312px; - position: relative; - width: 100%; -} -.requirements { - left: 50%; - margin-left: -520px; - max-width: 1040px; - min-height: 350px; - position: relative; - width: 100%; -} -.requirements h3 { - text-align: center; -} -.requirements p { - float: left; - margin-top: 0; - max-width: 495px; - width: 47.5%; -} -.requirements p:nth-child(-n+3) { - clear: left; - margin-right: 5%; -} -.requirements p:nth-child(4) { - position: absolute; - right: 0; -} -.requirements p:last-child { - font-size: 24px; - line-height: 1.25em; - margin-top: 40px; - max-width: none; - padding: 0 22.5% 20px; - text-align: center; - width: 55%; -} -aside { - background: #2babe1; - border-top: 5px solid #edf6ff; - clear: both; - display: block; - float: left; - margin-bottom: -5px; - width: 100%; -} -aside:before { - background: url('../images/starburst.png') center top no-repeat; - background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOTIyLjU3NHB4IiBoZWlnaHQ9IjkyMS4wNzJweCIgdmlld0JveD0iMCAwIDkyMi41NzQgOTIxLjA3MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTIyLjU3NCA5MjEuMDcyIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNzQ1Ljk0NSw4MjkuMDQyIDUxNS4wNzIsNTc3LjIyMiA1NzIuNjM1LDkxMy45NzIgNDY0LjE0Niw1OTAuMDIgMzc5Ljc2Myw5MjEuMDcyIDQxMi40MjEsNTgwLjk5OSANCgkyMDAuNjgyLDg0OS4xMDggMzY4LjgzNSw1NTEuNzIxIDY2LjM1Miw3MTAuNTI2IDM0MC45MjgsNTA3LjIzOSAwLDUyOS4yOTEgMzMzLjUyLDQ1NS4yNTYgMTMuMTAxLDMzNi43MzEgMzQ3Ljg5Niw0MDQuNzU2IA0KCTEwMy4zOTMsMTY2LjE1MyAzODEuNTc2LDM2NC40NzEgMjU1LjI1Nyw0Ny4wNDUgNDI4LjcyNCwzNDEuMzY2IDQ0Mi40MzYsMCA0ODEuMTk3LDMzOS40MzUgNjMyLjU2NiwzMy4xNTcgNTI5LjkyLDM1OS4wMTIgDQoJNzkyLjc3NiwxNDAuNzgyIDU2Ni40NjgsMzk2LjcxNCA4OTUuMzU2LDMwNC4yNjQgNTg0LjUxNCw0NDYuMDIxIDkyMi41NzQsNDk1LjMzNiA1ODAuOTUxLDQ5OC40MDkgODY5LjcyNCw2ODAuOTY0IA0KCTU1Ni4zODgsNTQ0LjgxNSAiLz4NCjwvc3ZnPg0K') center top no-repeat; - content: ''; - height: 921px; - left: 50%; - margin-left: -461.5px; - position: fixed; - top: 60px; - width: 923px; -} -aside:after { - background: url('../images/robot.png') center top no-repeat; - background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDI4LjY5N3B4IiBoZWlnaHQ9Ijk0OS42NDlweCIgdmlld0JveD0iMC4wMDEgLTI3OS4zNTEgNDI4LjY5NyA5NDkuNjQ5Ig0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAuMDAxIC0yNzkuMzUxIDQyOC42OTcgOTQ5LjY0OSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Y2lyY2xlIGZpbGw9IiMwNDcyQjYiIGN4PSIyMTYuNDk3IiBjeT0iLTM5LjEzMyIgcj0iNDguODc4Ii8+DQo8Zz4NCgk8cG9seWdvbiBmaWxsPSIjMkJBQkUyIiBwb2ludHM9IjIxNS41NDYsMTkxLjY3NCAzMjguNDA0LDE5MC41OTMgMzIzLjIxMywxODcuMTI3IDIxNS41NDYsMTcyLjY1OSAJIi8+DQoJPHBhdGggZmlsbD0ibm9uZSIgZD0iTTE3My40MDMtNTcuOTk0YzAsMCw4Ljg1NSwzMS41NDgsNDIuMTc4LDMzLjM3OHYtMjQuODMzQzE5MS4xNzUtNDkuNDUsMTczLjQwMy01Ny45OTQsMTczLjQwMy01Ny45OTR6Ii8+DQoJPGNpcmNsZSBmaWxsPSJub25lIiBjeD0iMTkuNzQ5IiBjeT0iLTM2LjQ3NyIgcj0iOC42NDUiLz4NCgk8cGF0aCBmaWxsPSJub25lIiBkPSJNMjE1LjU2LTExMS44OGMtOC44OSwwLTE2LjA5NSw3LjIwNi0xNi4wOTUsMTYuMDk3YzAsMS4zMTcsMC4xNzgsMi41ODksMC40NzUsMy44MTINCgkJYzEuNzE4LTcuMDQ4LDguMDUtMTIuMjg1LDE1LjYyLTEyLjI4NWMwLjAwOCwwLDAuMDE1LDAuMDA0LDAuMDIxLDAuMDA0di03LjYyOUMyMTUuNTc0LTExMS44OCwyMTUuNTY3LTExMS44OCwyMTUuNTYtMTExLjg4eiIvPg0KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMjE1LjU0NiwxNzIuNjUyIDEwNy41MDcsMTg3LjcxMiAxMDMuODY1LDE5MC45ODIgMjE1LjU0NiwxOTEuNjY3IAkiLz4NCgk8cG9seWdvbiBmaWxsPSIjMDU4REQxIiBwb2ludHM9IjIxNS41NDYsMTYyLjYxNSAyMTUuNTQ2LDE2Mi41OTUgMTA0LjAxNCwxODcuNzIzIDEwNy41MDcsMTg3LjcxMiAyMTUuNTQ2LDE3NC4wNjkgCSIvPg0KCTxwYXRoIGZpbGw9IiMyQkFCRTIiIGQ9Ik0yMTAuMzEsMjgwLjQzNXYtMTAuMjU4Yy0yLjE2MS0wLjUxNS00LjE4OC0xLjM3LTYuMDI2LTIuNTA0bC03LjI1OSw3LjI1OGwtNi44MzktNi44MzdsNy4yNTktNy4yNTINCgkJYy0xLjEzNS0xLjg0LTEuOTg4LTMuODY2LTIuNTA1LTYuMDM0aC0xMC4yNTd2LTkuNjY1aDEwLjI1N2MwLjUxNi0yLjE2MywxLjM2OS00LjE5MiwyLjUwMi02LjAzMmwtNy4yNTYtNy4yNTJsNi44MzktNi44NA0KCQlsNy4yNTksNy4yNTNjMS44MzktMS4xMjksMy44NjUtMS45OCw2LjAyNi0yLjQ5NnYtMTAuMjYxaDUuMjcxbC0wLjAzNS0yOS4yNjRIMTA0LjA1M2MxLjE0NCwxMi45MzMsMi41MzMsMjYuNTkyLDQuMjEyLDM5LjI2OQ0KCQljMTAuNzA4LDAuNzQzLDI5LjQ5NywxLjg5NSw1My44NiwyLjgyM2MtMS42MjgsNS4yNDctMi41MDUsMTAuODI0LTIuNTA1LDE2LjYwNGMwLDguMzMxLDEuODMxLDE2LjIzNiw1LjA5OSwyMy4zMzYNCgkJYy0xOS40MzctMC44MjQtMzcuNjktMS45ODctNDkuOTMtMi44NDRjMy4wNDgsMTUuMjEsNi42NTUsMjkuNTEzLDEwLjkzOSw0Mi4yODRsLTAuNTcyLDAuMDcybC0wLjAwNiwwLjAxNA0KCQljMC4zODMsMCwwLjYwNCwwLDAuNjA0LDBzMjEuODEsMTIuMDQ3LDQ2LjUwMywxMC44MTRjMCwwLTIwLjExOSw3LjM3NC01MC41MjgsMC42NDJjLTcuMywyNS4yMDYtMjQuMDIzLDg3LjQ4NS0yNy44NTUsMTQxLjE2NQ0KCQljLTAuMDc2LDEuMDQ2LTAuMTUxLDIuMTAzLTAuMjMsMy4xNjJsMTQuOTA0LDEuMDkzYzIuODgtNy44NTUsMTAuNDAyLTEzLjQ2NSwxOS4yNTMtMTMuNDY1YzkuOTEyLDAsMTguMTgzLDcuMDIxLDIwLjEwNywxNi4zNjENCgkJbDEzLjEwNCwwLjk2NGMwLjU2Mi0yLjIyMywxLjExOS00LjQzMywxLjY4Ny02LjYzNmMxMC45MTctNDIuNDYxLDMzLjY0NC05Ny4xMjUsNTIuODgxLTEzMi4yMTJsMTIuMTk5LTUzLjI1OUgyMTAuMzFWMjgwLjQzNXoiLz4NCgk8cGF0aCBmaWxsPSIjMkJBQkUyIiBkPSJNMTQ3LjU4OCw0ODEuMTU1Yy0yLjM3Niw4LjcxMS0xMC4zMjEsMTUuMTIyLTE5Ljc4OCwxNS4xMjJjLTEwLjg4OCwwLTE5Ljc3NC04LjQ4OS0yMC40Ni0xOS4yMDcNCgkJbC0xNC4yNzctMS40NDZDODguOTA1LDUzMi4yNiw4My41OSw1OTQuMTk3LDgyLjA5OSw2MTEuMzhjNi42NzEsNS42MjgsMTguMzY0LDExLjcyNywxOC4zNjQsMTEuNzI3cy0xNi4yMzItMi41OTMtMjQuNjIyLTYuNjY2DQoJCWMtNzYuMDIxLDUuODg2LTQ5LjM5Myw0OC40NDQtMzYuOTIxLDUyLjc2NmM2LjcyMiwyLjMyOCw2NC41MDQsMC4yMDgsNjQuNTA0LDAuMjA4YzQxLjQ5My0xLjk3Myw0MS42NTUtOS44ODIsNDEuNDkzLTIwLjU3Nw0KCQljLTAuMTcyLTEwLjcwNS0xMy44MzQtMzIuNzcyLTEzLjgzNC0zMi43NzJzMTEuNzU4LTY4Ljg1MiwyNy41MjktMTMzLjc5NUwxNDcuNTg4LDQ4MS4xNTV6Ii8+DQoJPHBhdGggZmlsbD0iIzJCQUJFMiIgZD0iTTE4Ni42NDgsOTUuNTg4YzAsMTUuNzQsMTIuNzUsMjguNTAxLDI4LjQ5NiwyOC41MDFjMC4xNDgsMCwwLjI4OC0wLjAxOSwwLjQzNy0wLjAxOXYtNC40MjcNCgkJYy0wLjE0NiwwLjAwNC0wLjI4NywwLjAyNC0wLjQzNywwLjAyNGMtMTMuMzAzLDAtMjQuMDgxLTEwLjc3OS0yNC4wODEtMjQuMDhjMC0wLjc5MiwwLjA0Ny0xLjU2NCwwLjEyMS0yLjMzMg0KCQljMC4wMTktMC4xODksMC4wNS0wLjM3MiwwLjA3NC0wLjU1N2MwLjA2NS0wLjU1NCwwLjE0Ni0xLjEsMC4yNDgtMS42MzljMC4wNTUtMC4yNzYsMC4xMTYtMC41NTQsMC4xNzktMC44MjUNCgkJYzAuMDk4LTAuNDI5LDAuMjA1LTAuODQ5LDAuMzI1LTEuMjY4YzAuMDk0LTAuMzI0LDAuMTkxLTAuNjQ5LDAuMjk2LTAuOTczYzAuMTExLTAuMzI5LDAuMjM0LTAuNjUzLDAuMzU4LTAuOTc3DQoJCWMwLjE0Ni0wLjM3MywwLjI4NS0wLjc0OSwwLjQ0NC0xLjExNWMwLjA3Mi0wLjE1NywwLjE1MS0wLjMxLDAuMjI3LTAuNDY3YzAuNzQ2LTEuNTk3LDEuNjU1LTMuMDk3LDIuNzE2LTQuNDc5DQoJCWMwLjAzMS0wLjAzOSwwLjA1NS0wLjA3NiwwLjA4NS0wLjExNWMwLDAuMDA2LTAuMDAzLDAuMDA2LTAuMDAzLDAuMDFjMi4xNjEtMi43ODMsNC45MTUtNS4wODEsOC4wOC02LjY5NWgtMC4wMTcNCgkJYzAuMDUxLTAuMDMsMC4xMDktMC4wNDIsMC4xNjItMC4wNzJjMC42OTctMC4zNTMsMS40MTYtMC42NjcsMi4xNTEtMC45NWMwLjE3OS0wLjA3LDAuMzU5LTAuMTMzLDAuNTQtMC4xOTkNCgkJYzAuNjI4LTAuMjI0LDEuMjctMC40MjUsMS45MjEtMC41OTdjMC4yNTgtMC4wNjYsMC41MTQtMC4xMzcsMC43NzUtMC4xOTljMC41OTgtMC4xMzUsMS4yMDQtMC4yNDQsMS44MTQtMC4zMzMNCgkJYzAuMy0wLjA0MiwwLjU5NS0wLjEwMSwwLjg5NS0wLjEzNGMwLjczNS0wLjA4NywxLjQ3OC0wLjEyNCwyLjIyNi0wLjEzOWMwLjE1Ni0wLjAwNSwwLjMwNS0wLjAyOSwwLjQ2My0wLjAyOQ0KCQljMC4xNDYsMCwwLjI4OCwwLjAxOSwwLjQzNiwwLjAyNHYtNC40MjdjLTAuMTQ3LTAuMDA0LTAuMjg3LTAuMDI1LTAuNDM2LTAuMDI1QzE5OS4zOTgsNjcuMDgsMTg2LjY0OCw3OS44NDcsMTg2LjY0OCw5NS41ODh6Ii8+DQoJPHBhdGggZmlsbD0iIzJCQUJFMiIgZD0iTTIxNS41Ni0xMTEuODhjMC4wMDgsMCwwLjAxNSwwLDAuMDIxLDB2LTUyLjI5MmMtMy40Nyw1LjI3Ny0wLjg0OSwxMC4xNzYtMC44NDksMTAuMTc2DQoJCWMtNi4xNzIsMC0xMi4zNDctMTYuMDUzLTEyLjM0Ny0xNi4wNTNjLTYuNzg2LDguMTQzLTQuOTk0LDE3LjAzLTIuMDA0LDIzLjM4MWMtMzQuNzY3LDEwLjA2Mi00NS44MjIsMzguMTgyLTQ1LjgyMiw0OC42NTcNCgkJYzAsMTAuNDc0LDExLjQyNCw5MC43MzMsMTEuNDI0LDkwLjczM2MtOC4yMzIsMS41NjQtMTYuMTM2LDMuMzQtMjMuNDQ2LDUuMTUyYy0wLjUwMSwxMy4wNTgtMy42MjQsMjMuMzE3LTMuNjI0LDE2Ljg5OA0KCQljMC00LjY2NS0yLjQ4LTEwLjE0Ni01LjEtMTQuNjQ0Yy0xLjEwMywwLjI5NS0yLjE5OCwwLjU5LTMuMjYzLDAuODgxYy0yNS42MTUtMTEuMDc2LTU4Ljk5Ni0yOS41NDEtNjguMTczLTUzLjM2Mg0KCQljLTExLjg4Nyw3LjE1Ny0yNC43MjEsNi42MTktMjQuNzIxLDYuNjE5YzEwLjczNC0xLjQwMSwxOC4wMjEtOS42ODUsMjIuMzMtMTYuNTk0Yy0wLjY5NS01LjYyNC0wLjUwMi0xMS44MTMsMC4zODQtMTguMzc5DQoJCWMtMjcuMDUyLTkuNzUxLTM0LjI0LTIyLjY1Ni0zNC4yNC0yMi42NTZjMTcuMjQ2LDExLjY1MiwyOC42NzgsMTUuMTIyLDM1LjM1OSwxNS45NGMxLjU1NS03LjkwNSwzLjkzOS0xNi4yMSw2LjkxNy0yNC42NDYNCgkJYy0yNi44ODItOS43NC0zNC4wNDQtMjIuNTc0LTM0LjA0NC0yMi41NzRjMTguMjIzLDEyLjMwOSwyOS45NTgsMTUuNDg3LDM2LjQ1NCwxNi4wNTVjMy4wMDItNy44MzksNi40Mi0xNS42OTYsMTAuMDIxLTIzLjMzNg0KCQljLTI4LjI5My05LjgwOC0zNS43NzMtMjMuMTgyLTM1Ljc3My0yMy4xODJjMjEuMTQzLDE0LjI4MSwzMy41NTEsMTYuMjcxLDM5LjE3MSwxNi4xNTJjMy4yMjYtNi41MzcsNi41MjgtMTIuODUyLDkuNzYtMTguNzY5DQoJCWMtMjkuNjE4LTkuODUxLTM3LjQwNS0yMy43MjgtMzcuNDA1LTIzLjcyOGMyNS40MTcsMTcuMTc0LDM4LjIxNCwxNi41NzUsNDEuNzYyLDE1LjkwNmM4LjU5My0xNS4xNTgsMTYuMDg0LTI2Ljg0OCwxOS4yMjgtMzEuNjMyDQoJCWwzMy43MzktNS42NDJsLTguNTI5LTE0LjEzNWwtMjIuMTQ4LDYuMjMyYzAsMC4wMDYsMCwwLjAyNSwwLDAuMDI1YzAtMC4wMTEtMC4wMTItMC4wMTUtMC4wMTctMC4wMjNsLTAuMTM5LDAuMDRsMC4wODYtMC4xMjMNCgkJYy0xMC41ODItMTYuNDY5LTI4LjYwMy0xMy45OTktMjguNjAzLTEzLjk5OWMyNS4yOTYtNS4yMjksMjguMzg5LDEyLjAyMSwyOC42NTQsMTMuOTI2bDMuODM2LTUuNTQybDE4LjUwNi0yMS43NzZsLTkuNzcxLTEwLjg2MQ0KCQlsLTE5LjEzNCwxNi4zNDhsMTMuMzItMjYuNDY1bC0xMS40MjYtOC41MThsLTE3LjY5NywyNy43ODNsNC40MS0yNy43MDJsLTExLjExMi0xLjc0M2wtNi44NzgsMjYuNTY2bC00LjgzNi0yMS40OTlsLTEwLjgxMSwwLjA5NA0KCQlsMS4wODgsMjMuOTk4bC05LjMxNCwzMC4wMzFsMTMuODk5LDEwLjkzNmw3LjYwNS0xLjc4bDYuODE2LDYuODI0bDE1LjMxNi0wLjI1MWwtMTUuNDI4LDQuMDI1bC03LjMwMS02LjA0N2wtNy4xMjMsMS4wMDUNCgkJbC0xMy44MDQtMTQuNjM1bC0wLjE5NCwwLjYzOWMwLDAsMC4wMywwLjA1NCwwLjA3MywwLjEyN2wtMC43NzctMC4xMjdjMCwwLTEwMC40MzksMTQ5LjgzMy00MS4xNjQsMjE0LjA0Ng0KCQlDMjMuMTUtMC42MDYsMjcuNDg2LDQuMDI2LDMxLjc1LDguNTI0YzYuOTI5LTUuMzg1LDE4LjQ1Ny0xNS4xODgsMjQuMDE0LTI0LjYzM2MwLDAtNS4xODEsMTcuNDQzLTE3LjIzOSwzMS43Mw0KCQljNC40ODcsNC42NTUsOC44ODcsOS4xNTMsMTMuMTkxLDEzLjQ1OGM2Ljc1MS01LjE3MiwxOS4yMDEtMTUuNDk0LDI1LjA0Ni0yNS40MjRjMCwwLTUuMzgxLDE4LjA1Ni0xNy45MDIsMzIuNDcyDQoJCWM0LjQ2Niw0LjM1OSw4Ljg0MSw4LjUyNiwxMy4xMDcsMTIuNDcyYzYuOTM1LTUuNDAzLDE4LjM5NS0xNS4xNjQsMjMuOTMxLTI0LjU3MWMwLDAtNS4wMjEsMTYuOTUtMTYuNzEzLDMxLjExNA0KCQljNi44NzgsNi4xMjcsMTMuNDk4LDExLjY4OSwxOS44NDIsMTYuNjE3YzAsMC4wNjIsMCwwLjEyNSwwLDAuMTgyYzMuMjA4LTAuNjAyLDEzLjUtMy4wNDEsMjAuNjQzLTEwLjY1Ng0KCQljMCwwLTYuMDk2LDE3LjM4OS0yMC41NDgsMjEuNDE1YzAuMzU3LDMwLjYsMS42MTYsNjcuNzU1LDQuODk0LDEwNS4wMjFsMTExLjQ2Ny0yMi4yOTJsMC4xMDEsMC4wMnYtMzEuMzYyDQoJCWMtMC4xNDcsMC0wLjI4NywwLjAxOS0wLjQzNSwwLjAxOWMtMjEuMjc1LDAtMzguNTItMTcuMjQxLTM4LjUyLTM4LjUxOWMwLTIxLjI3OCwxNy4yNDYtMzguNTE5LDM4LjUyLTM4LjUxOQ0KCQljMC4xNDYsMCwwLjI4NywwLjAyLDAuNDM1LDAuMDI0di0xOC42OEwxNjQuNjU1LDEyLjc2bDUwLjkyNywxOS43NjZ2LTU3LjE0MmMtMzMuMzIyLTEuODMtNDIuMTc4LTMzLjM3OC00Mi4xNzgtMzMuMzc4DQoJCXMxNy43NzMsOC41NDQsNDIuMTc4LDguNTQ0di01NC44MDNjLTAuMDA3LDAtMC4wMTQtMC4wMDQtMC4wMjItMC4wMDRjLTcuNTcsMC0xMy45MDEsNS4yMzctMTUuNjE5LDEyLjI4NQ0KCQljLTAuMjk2LTEuMjIzLTAuNDc1LTIuNDk3LTAuNDc1LTMuODEyQzE5OS40NjUtMTA0LjY3NSwyMDYuNjctMTExLjg4LDIxNS41Ni0xMTEuODh6IE0xOS43NDktMjcuODMzDQoJCWMtNC43NzMsMC04LjY0NC0zLjg3LTguNjQ0LTguNjQ1YzAtNC43NzYsMy44Ny04LjY0NSw4LjY0NC04LjY0NWM0Ljc3NSwwLDguNjQ3LDMuODY3LDguNjQ3LDguNjQ1DQoJCUMyOC4zOTYtMzEuNzAyLDI0LjUyNS0yNy44MzMsMTkuNzQ5LTI3LjgzM3oiLz4NCgk8cGF0aCBmaWxsPSIjMkJBQkUyIiBkPSJNMTM1LjcwMSw0NzUuNzQ5YzAtNC43ODItMy44NzItOC42NDUtOC42NDMtOC42NDVjLTQuNzc0LDAtOC42NDcsMy44NjUtOC42NDcsOC42NDUNCgkJYzAsNC43NzIsMy44NzIsOC42MzksOC42NDcsOC42MzlDMTMxLjgzLDQ4NC4zODcsMTM1LjcwMSw0ODAuNTIxLDEzNS43MDEsNDc1Ljc0OXoiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjEwLjMxLDIyOS43NzRjLTIuMTYxLDAuNTE1LTQuMTg4LDEuMzY3LTYuMDI2LDIuNDk2bC03LjI1OS03LjI1M2wtNi44MzksNi44NGw3LjI1Niw3LjI1Mg0KCQljLTEuMTMzLDEuODQtMS45ODUsMy44NjktMi41MDIsNi4wMzJoLTEwLjI1N3Y5LjY2NWgxMC4yNTdjMC41MTYsMi4xNjgsMS4zNyw0LjE5MywyLjUwNSw2LjAzNGwtNy4yNTksNy4yNTFsNi44MzksNi44MzkNCgkJbDcuMjU5LTcuMjU4YzEuODM5LDEuMTM0LDMuODY1LDEuOTg4LDYuMDI2LDIuNTA0djEwLjI1OGg1LjI3MXYtNjAuOTIxaC01LjI3MVYyMjkuNzc0eiIvPg0KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTY0LjY1NCwxMi43NiAyMTUuNTgxLDM4LjQxMiAyMTUuNTgxLDMyLjUyNiAJIi8+DQoJPHBhdGggZmlsbD0iIzA1OEREMSIgZD0iTTIxNS4xNDUsMTI0LjA4OWMtMTUuNzQ2LDAtMjguNDk2LTEyLjc2MS0yOC40OTYtMjguNTAxczEyLjc1LTI4LjUwNiwyOC40OTYtMjguNTA2DQoJCWMwLjE0OCwwLDAuMjg4LDAuMDIsMC40MzcsMC4wMjRWNTcuMDkzYy0wLjE0Ni0wLjAwNC0wLjI4Ny0wLjAyNC0wLjQzNy0wLjAyNGMtMjEuMjczLDAtMzguNTE5LDE3LjI0Mi0zOC41MTksMzguNTE5DQoJCXMxNy4yNDYsMzguNTE5LDM4LjUxOSwzOC41MTljMC4xNDgsMCwwLjI4OC0wLjAxOSwwLjQzNy0wLjAxOXYtMTAuMDE2QzIxNS40MzUsMTI0LjA3LDIxNS4yOTQsMTI0LjA4OSwyMTUuMTQ1LDEyNC4wODl6Ii8+DQoJPHBhdGggZmlsbD0iI0Y0RjVGNSIgZD0iTTIwNC4zNiw3NC4wODVjMC42OTktMC4zNTIsMS40MTYtMC42NjcsMi4xNTEtMC45NDlDMjA1Ljc3Niw3My40MTgsMjA1LjA2LDczLjczMywyMDQuMzYsNzQuMDg1eiIvPg0KCTxwYXRoIGZpbGw9IiNGNEY1RjUiIGQ9Ik0xOTIuNjY1LDg3LjAyYzAuMTQ2LTAuMzczLDAuMjgyLTAuNzQ5LDAuNDQ0LTEuMTE1QzE5Mi45NSw4Ni4yNywxOTIuODExLDg2LjY0NywxOTIuNjY1LDg3LjAyeiIvPg0KCTxwYXRoIGZpbGw9IiNGNEY1RjUiIGQ9Ik0yMDYuMzYzLDk2LjA0YzMuODU5LDAsNy4yNDItMS45ODIsOS4yMTgtNC45ODVWNzguOTIyYy0xLjk3Ni0yLjk5Ni01LjM1OC00Ljk4Ni05LjIxOC00Ljk4Ng0KCQljLTAuNzMyLDAtMS40NTIsMC4wODMtMi4xNDksMC4yMmMtMy4xNjUsMS42MTUtNS45MTksMy45MTItOC4wOCw2LjY5NWMtMC41MjMsMS4yNzctMC44MTcsMi42NjktMC44MTcsNC4xMzINCgkJQzE5NS4zMTYsOTEuMDk0LDIwMC4yNjUsOTYuMDQsMjA2LjM2Myw5Ni4wNHoiLz4NCgk8cGF0aCBmaWxsPSIjRjRGNUY1IiBkPSJNMTkzLjMzNyw4NS40MzZjMC43NDgtMS41OTcsMS42NTYtMy4wOTcsMi43MTYtNC40NzlDMTk0Ljk5Myw4Mi4zMzksMTk0LjA4Myw4My44NCwxOTMuMzM3LDg1LjQzNnoiLz4NCgk8cGF0aCBmaWxsPSIjRjRGNUY1IiBkPSJNMTk3LjgyMywxMDQuODUyYy0xLjU0Mi0yLjE1OS0yLjU5My00LjUyOC0zLjE5My02Ljk2M2MwLjIwOSwzLjc1NiwxLjQyNSw3LjQ4MiwzLjc2MiwxMC43NDcNCgkJYzQuMDg4LDUuNzA0LDEwLjU4Miw4LjY2OSwxNy4xODksOC41NzRWMTEzLjRDMjA4Ljc3NywxMTMuNjkxLDIwMi4wMjgsMTEwLjcyMiwxOTcuODIzLDEwNC44NTJ6Ii8+DQoJPHBhdGggZmlsbD0iI0Y0RjVGNSIgZD0iTTE5MS4xODUsOTMuMjU2YzAuMDE5LTAuMTg5LDAuMDUtMC4zNzIsMC4wNzQtMC41NTdDMTkxLjIzNCw5Mi44ODQsMTkxLjIwMyw5My4wNjYsMTkxLjE4NSw5My4yNTZ6Ii8+DQoJPHBhdGggZmlsbD0iI0Y0RjVGNSIgZD0iTTE5Mi4wMTEsODguOTY5YzAuMDk0LTAuMzI1LDAuMTg4LTAuNjQ5LDAuMjk2LTAuOTc0QzE5Mi4yMDIsODguMzIsMTkyLjEwNSw4OC42NDQsMTkyLjAxMSw4OC45Njl6Ii8+DQoJPHBhdGggZmlsbD0iI0Y0RjVGNSIgZD0iTTIwOS43NDksNzIuMTQzYzAuNTk3LTAuMTM5LDEuMjAzLTAuMjQsMS44MTUtMC4zMzRDMjEwLjk1MSw3MS44OTgsMjEwLjM0Niw3Mi4wMDcsMjA5Ljc0OSw3Mi4xNDN6Ii8+DQoJPHBhdGggZmlsbD0iI0Y0RjVGNSIgZD0iTTIwNy4wNTMsNzIuOTM4YzAuNjI3LTAuMjI1LDEuMjcxLTAuNDIsMS45MjEtMC41OThDMjA4LjMyLDcyLjUxMiwyMDcuNjgsNzIuNzEzLDIwNy4wNTMsNzIuOTM4eiIvPg0KCTxwYXRoIGZpbGw9IiNGNEY1RjUiIGQ9Ik0xOTEuNTA3LDkxLjA2YzAuMDU1LTAuMjc2LDAuMTE2LTAuNTU0LDAuMTc5LTAuODI1QzE5MS42MjMsOTAuNTA4LDE5MS41NjIsOTAuNzg0LDE5MS41MDcsOTEuMDZ6Ii8+DQoJPHBhdGggZmlsbD0iI0Y0RjVGNSIgZD0iTTIxMi40NTgsNzEuNjc0YzAuNzMxLTAuMDg2LDEuNDc0LTAuMTIzLDIuMjI2LTAuMTM5QzIxMy45MzYsNzEuNTUxLDIxMy4xOTEsNzEuNTg4LDIxMi40NTgsNzEuNjc0eiIvPg0KCTxwYXRoIGZpbGw9IiMwMDM3NEYiIGQ9Ik0yMDYuNTEyLDczLjEzNmMwLjE3OS0wLjA3MSwwLjM1OS0wLjEzMywwLjU0MS0wLjE5OUMyMDYuODcxLDczLjAwMywyMDYuNjksNzMuMDY1LDIwNi41MTIsNzMuMTM2eiIvPg0KCTxwYXRoIGZpbGw9IiMwMDM3NEYiIGQ9Ik0yMDQuMTk4LDc0LjE1OGgwLjAxN2MwLjA1LTAuMDI1LDAuMDk5LTAuMDQ4LDAuMTQ2LTAuMDcxQzIwNC4zMDgsNzQuMTE0LDIwNC4yNTEsNzQuMTI4LDIwNC4xOTgsNzQuMTU4eiINCgkJLz4NCgk8cGF0aCBmaWxsPSIjMDAzNzRGIiBkPSJNMTkxLjI1OSw5Mi42OTljMC4wNjQtMC41NTQsMC4xNDYtMS4xLDAuMjQ4LTEuNjM5QzE5MS40MDQsOTEuNTk5LDE5MS4zMjQsOTIuMTQ2LDE5MS4yNTksOTIuNjk5eiIvPg0KCTxwYXRoIGZpbGw9IiMwMDM3NEYiIGQ9Ik0xOTMuMTEsODUuOTA1YzAuMDcyLTAuMTU4LDAuMTUyLTAuMzExLDAuMjI3LTAuNDY4QzE5My4yNjMsODUuNTk0LDE5My4xODIsODUuNzQ2LDE5My4xMSw4NS45MDV6Ii8+DQoJPHBhdGggZmlsbD0iIzAwMzc0RiIgZD0iTTIwOC45NzQsNzIuMzRjMC4yNTktMC4wNjYsMC41MTMtMC4xMzcsMC43NzUtMC4xOTlDMjA5LjQ4Niw3Mi4yMDQsMjA5LjIzMiw3Mi4yNzMsMjA4Ljk3NCw3Mi4zNHoiLz4NCgk8cGF0aCBmaWxsPSIjMDAzNzRGIiBkPSJNMTkyLjMwNyw4Ny45OTZjMC4xMDktMC4zMjksMC4yMzUtMC42NTMsMC4zNTgtMC45NzZDMTkyLjU0MSw4Ny4zNDMsMTkyLjQxOCw4Ny42NjcsMTkyLjMwNyw4Ny45OTZ6Ii8+DQoJPHBhdGggZmlsbD0iIzAwMzc0RiIgZD0iTTE5MS42ODYsOTAuMjM1YzAuMDk4LTAuNDI5LDAuMjA2LTAuODQ5LDAuMzI1LTEuMjY4QzE5MS44OSw4OS4zODksMTkxLjc4Myw4OS44MDYsMTkxLjY4Niw5MC4yMzV6Ii8+DQoJPHBhdGggZmlsbD0iIzAwMzc0RiIgZD0iTTE5Ni4xMzcsODAuODQyYy0wLjAzLDAuMDM5LTAuMDUzLDAuMDc3LTAuMDg1LDAuMTE1YzAuMDI5LTAuMDMzLDAuMDU1LTAuMDcyLDAuMDgyLTAuMTA1DQoJCUMxOTYuMTM0LDgwLjg0OCwxOTYuMTM3LDgwLjg0OCwxOTYuMTM3LDgwLjg0MnoiLz4NCgk8cGF0aCBmaWxsPSIjMDAzNzRGIiBkPSJNMjE1LjE0NSwxMTkuNjYzYy0xMy4yOTYsMC0yNC4wNzgtMTAuNzgxLTI0LjA3OC0yNC4wNzVjMC0wLjc4OCwwLjA0NC0xLjU2NCwwLjExOC0yLjMzMg0KCQljLTAuMDc0LDAuNzY4LTAuMTIxLDEuNTQtMC4xMjEsMi4zMzJjMCwxMy4zMDEsMTAuNzc4LDI0LjA4LDI0LjA4MSwyNC4wOGMwLjE0OCwwLDAuMjg4LTAuMDIxLDAuNDM3LTAuMDI0di0wLjAwNg0KCQlDMjE1LjQzNSwxMTkuNjQzLDIxNS4yOTQsMTE5LjY2MywyMTUuMTQ1LDExOS42NjN6Ii8+DQoJPHBhdGggZmlsbD0iIzAwMzc0RiIgZD0iTTIxNS41ODEsNzEuNTM1di0wLjAwNGMtMC4xNDYtMC4wMDYtMC4yODctMC4wMjQtMC40MzctMC4wMjRjLTAuMTU2LDAtMC4zMDYsMC4wMjQtMC40NjEsMC4wMjgNCgkJYzAuMTU0LTAuMDA0LDAuMzA4LTAuMDI0LDAuNDYxLTAuMDI0QzIxNS4yOTQsNzEuNTExLDIxNS40MzUsNzEuNTMxLDIxNS41ODEsNzEuNTM1eiIvPg0KCTxwYXRoIGZpbGw9IiMwMDM3NEYiIGQ9Ik0yMTEuNTY0LDcxLjgwOGMwLjI5OC0wLjA0MiwwLjU5My0wLjEwMSwwLjg5NC0wLjEzNEMyMTIuMTU3LDcxLjcwNywyMTEuODYyLDcxLjc2NSwyMTEuNTY0LDcxLjgwOHoiLz4NCgk8cGF0aCBmaWxsPSIjMDAzNzRGIiBkPSJNMjE1LjE0NSwxMTkuNjYzYzAuMTQ4LDAsMC4yODgtMC4wMiwwLjQzNy0wLjAyNnYtMi40MjljLTYuNjA3LDAuMDk0LTEzLjEwMi0yLjg2OS0xNy4xODktOC41NzUNCgkJYy0yLjMzNy0zLjI2NS0zLjU1My02Ljk5LTMuNzYyLTEwLjc0NmMwLjYwMSwyLjQzNSwxLjY1MSw0LjgwNCwzLjE5Myw2Ljk2M2M0LjIwNSw1Ljg3MiwxMC45NTQsOC44MzksMTcuNzU4LDguNTQ4VjkxLjA1NA0KCQljLTEuOTc2LDMuMDAyLTUuMzU4LDQuOTg1LTkuMjE4LDQuOTg1Yy02LjA5OSwwLTExLjA0Ny00Ljk0NS0xMS4wNDctMTEuMDU2YzAtMS40NjMsMC4yOTQtMi44NTUsMC44MTctNC4xMzINCgkJYy0wLjAyNywwLjAzMy0wLjA1MywwLjA3Mi0wLjA4MiwwLjEwNWMtMS4wNjEsMS4zODItMS45NjgsMi44ODItMi43MTYsNC40NzljLTAuMDc1LDAuMTU3LTAuMTU0LDAuMzExLTAuMjI3LDAuNDY3DQoJCWMtMC4xNjIsMC4zNjctMC4zMDIsMC43NDItMC40NDQsMS4xMTVjLTAuMTIzLDAuMzI1LTAuMjQ5LDAuNjQ4LTAuMzU4LDAuOTc3Yy0wLjEwNywwLjMyNC0wLjIwMiwwLjY0Ny0wLjI5NiwwLjk3Mw0KCQljLTAuMTE5LDAuNDE5LTAuMjI4LDAuODM4LTAuMzI1LDEuMjY4Yy0wLjA2MiwwLjI3MS0wLjEyNCwwLjU0OC0wLjE3OSwwLjgyNWMtMC4xMDMsMC41MzktMC4xODQsMS4wODYtMC4yNDgsMS42MzkNCgkJYy0wLjAyNCwwLjE4Ni0wLjA1NiwwLjM2OC0wLjA3NCwwLjU1N2MtMC4wNzQsMC43NjgtMC4xMTgsMS41NDQtMC4xMTgsMi4zMzJDMTkxLjA2NiwxMDguODgxLDIwMS44NTEsMTE5LjY2MywyMTUuMTQ1LDExOS42NjN6Ii8+DQoJPHBhdGggZmlsbD0iIzAwMzc0RiIgZD0iTTIxNS41ODEsNzguOTIydi03LjM4N2MtMC4xNDYtMC4wMDQtMC4yODctMC4wMjQtMC40MzctMC4wMjRjLTAuMTUzLDAtMC4zMDcsMC4wMi0wLjQ2MSwwLjAyNA0KCQljLTAuNzUyLDAuMDE2LTEuNDk1LDAuMDUzLTIuMjI2LDAuMTM5Yy0wLjMwMSwwLjAzMy0wLjU5NiwwLjA5MS0wLjg5NCwwLjEzNGMtMC42MTMsMC4wOTQtMS4yMTksMC4xOTYtMS44MTUsMC4zMzQNCgkJYy0wLjI2MywwLjA2Mi0wLjUxNywwLjEzMy0wLjc3NSwwLjE5OWMtMC42NDksMC4xNzctMS4yOTQsMC4zNzMtMS45MjEsMC41OTdjLTAuMTgyLDAuMDY2LTAuMzYyLDAuMTI5LTAuNTQxLDAuMTk5DQoJCWMtMC43MzUsMC4yODItMS40NTEsMC41OTctMi4xNTEsMC45NWMtMC4wNDcsMC4wMjMtMC4wOTYsMC4wNDYtMC4xNDYsMC4wNzJjMC42OTYtMC4xMzksMS40MTctMC4yMiwyLjE0OS0wLjIyDQoJCUMyMTAuMjIzLDczLjkzNywyMTMuNjA1LDc1LjkyNiwyMTUuNTgxLDc4LjkyMnoiLz4NCgk8Y2lyY2xlIGZpbGw9IiMyQkFCRTIiIGN4PSI0MDYuODg2IiBjeT0iLTM2LjQ3NyIgcj0iOC42NDUiLz4NCgk8cG9seWdvbiBmaWxsPSIjMDE3NEIzIiBwb2ludHM9IjIxNS41NDYsMTc0LjA4MyAzMjMuMTU4LDE4Ny4xMjIgMzI4LjQ2MSwxODcuMTA2IDIxNS41NDYsMTYyLjYxNSAJIi8+DQoJPHBhdGggZmlsbD0iIzA1OEREMSIgZD0iTTI2OS44MjIsNDcyLjcyOWwxMC44NDctMC43OThjMS44MDEtMTAuMTEyLDEwLjYyLTE3Ljc5NSwyMS4yNDktMTcuNzk1DQoJCWM5LjUyOSwwLDE3LjU5OSw2LjE2NiwyMC40NzQsMTQuNzI1bDE0Ljc2My0xLjA4M2MtMC4wNzgtMS4xMi0wLjE1Ny0yLjI0My0wLjI0LTMuMzU0Yy0zLjgtNTMuMjMzLTIwLjI3Ni0xMTQuOTE3LTI3LjY2LTE0MC41MDgNCgkJYy0yOC42MjYsNS41NjItNDcuMzU5LTEuMjk4LTQ3LjM1OS0xLjI5OGMxOS44NjIsMC45OTcsMzcuODM0LTYuNTk0LDQ0LjExNS05LjYwNGMtMC4yMjktMC43NS0wLjM2Ny0xLjE4MS0wLjM3My0xLjIwOWgwLjI2Nw0KCQloMC43NTljNC4zMS0xMi44NDUsNy45MzktMjcuMjQyLDExLjAwNi00Mi41NjNjLTEyLjg3MiwwLjY3OC0zMS40MjYsMS42MDItNTAuODk0LDIuNDA3YzMuMDgyLTYuOTQyLDQuODEtMTQuNjE2LDQuODEtMjIuNzAzDQoJCWMwLTUuNDk0LTAuODA3LTEwLjc5OS0yLjI4Mi0xNS44MTdjMjQuNTQ4LTAuODIzLDQzLjYzMy0yLjI1Myw1NC44MTEtMy4yNWMxLjcxNC0xMi45MTgsMy4xMzEtMjYuMjc2LDQuMjkxLTM5LjQ1OEgyMTUuNTQ2DQoJCWwwLjAzNSwyOS4wOTJoNC4zOTd2NjAuOTIxaDUuMzYzbC05Ljc2Miw1My4yNTdjMTUuMzQ5LDM1LjE1Myw0MS42MDUsODkuODA5LDUyLjUxLDEzMi4yMTMNCgkJQzI2OC42NzIsNDY4LjE2OCwyNjkuMjUsNDcwLjQ0NCwyNjkuODIyLDQ3Mi43Mjl6Ii8+DQoJPHBhdGggZmlsbD0iIzA1OEREMSIgZD0iTTM1NC45NTQsNjE2LjQ0MWMtOC4zOTUsNC4wNzMtMjQuNjIzLDYuNjY2LTI0LjYyMyw2LjY2NnMxMS42ODctNi4xMDIsMTguMzYxLTExLjcyNw0KCQljLTEuNDk0LTE3LjE2Mi02Ljc5Mi03OC45MjctMTAuOTQzLTEzNS40OTVsLTE0LjI5OCwxLjQ0NGMtMC44MTgsMTEuMTk3LTEwLjEzLDIwLjAyOS0yMS41MzMsMjAuMDI5DQoJCWMtOS44ODcsMC0xOC4yMS02LjY1Ny0yMC43NzUtMTUuNzI4bC04LjkwNCwwLjg5NmMxNS43MzYsNjQuODY2LDI3LjQ2OCwxMzMuNTM0LDI3LjQ2OCwxMzMuNTM0cy0xMy42NjUsMjIuMDcxLTEzLjgzMSwzMi43NzQNCgkJYy0wLjE2OSwxMC42OTcsMCwxOC42MDYsNDEuNDg5LDIwLjU3NmMwLDAsNTcuNzg4LDIuMTE5LDY0LjUwMS0wLjIwNUM0MDQuMzQzLDY2NC44ODcsNDMwLjk2Nyw2MjIuMzI3LDM1NC45NTQsNjE2LjQ0MXoiLz4NCgk8cGF0aCBmaWxsPSIjMDU4REQxIiBkPSJNMjM5LjIyNCw5NS41ODhjMCwxMy4xNTItMTAuNTQ2LDIzLjgyMS0yMy42NDMsMjQuMDU1djQuNDI3YzE1LjU0LTAuMjM5LDI4LjA2Ny0xMi44OTEsMjguMDY3LTI4LjQ4Mg0KCQlzLTEyLjUyNy0yOC4yNDktMjguMDY3LTI4LjQ4MnY0LjQyOEMyMjguNjc3LDcxLjc2NSwyMzkuMjI0LDgyLjQzMywyMzkuMjI0LDk1LjU4OHoiLz4NCgk8Y2lyY2xlIGZpbGw9IiMwNThERDEiIGN4PSIyMTUuNzg4IiBjeT0iLTEwMC4wNTMiIHI9IjI2LjkxOCIvPg0KCTxwYXRoIGZpbGw9IiMwNThERDEiIGQ9Ik0zNjguODEzLTIxOS40NDNsLTAuMTk0LTAuNjM5bC0xMy44MDksMTQuNjM1bC03LjExMi0xLjAwNGwtNy4zMDQsNi4wNDdsLTE1LjQzMy00LjAyNmwxNS4zMTUsMC4yNTENCgkJbDYuODE5LTYuODI0bDcuNjA0LDEuNzhsMTMuODk1LTEwLjkzNmwtOS4zMS0zMC4wMzFsMS4wODktMjMuOTk3bC0xMC44MDctMC4wOTRsLTQuODM1LDIxLjQ5OWwtNi44ODQtMjYuNTY4bC0xMS4xMDgsMS43NDQNCgkJbDQuNDA2LDI3LjcwMmwtMTcuNzAyLTI3Ljc4M2wtMTEuNDIyLDguNTE4bDEzLjMxOSwyNi40NjVsLTE5LjEzNC0xNi4zNDhsLTkuNzcsMTAuODYxbDE4LjUwNSwyMS43NzZsMy44MzQsNS41MzcNCgkJYzAuMjY2LTEuOTI0LDMuMzcyLTE5LjE0NywyOC42NDktMTMuOTIxYzAsMC0xOC4wMTYtMi40NzEtMjguNTk5LDE0bDAuMDg4LDAuMTIzbC0wLjE0NS0wLjA0M2MtMC4wMDgsMC4wMS0wLjAxNCwwLjAxNC0wLjAyLDAuMDI2DQoJCWMwLDAsMC4wMDQtMC4wMiwwLjAwNC0wLjAyNmwtMjIuMTQ2LTYuMjMybC04LjUyNSwxNC4xMzVsMzIuOTUxLDUuNTA4YzMuMDc4LDQuNjg2LDEwLjU4NywxNi4zODQsMTkuMjIsMzEuNjExDQoJCWMyLjE4NCwwLjYwNSwxNC45MTMsMi44NjUsNDIuNDY2LTE1Ljc0OWMwLDAtNy44NzYsMTQuMDM4LTM3LjkzLDIzLjg5OGMzLjIwMSw1Ljg2Nyw2LjQ2NSwxMi4xMDgsOS42NjMsMTguNTgNCgkJYzUuMjg3LDAuMjc1LDE3LjgzNy0xLjI5OCwzOS43OTQtMTYuMTM1YzAsMC03LjU4NSwxMy41MzctMzYuMywyMy4zNThjMy41NzQsNy42LDYuOTY1LDE1LjQxMiw5Ljk1NCwyMy4yMDMNCgkJYzYuMzU2LTAuNDIsMTguMjQ5LTMuMzk3LDM3LjA0OS0xNi4wOThjMCwwLTcuMjM4LDEzLjAxOS0zNC41OSwyMi43OWMyLjk0Nyw4LjM3Niw1LjMxMiwxNi42NCw2Ljg1NCwyNC40OTcNCgkJYzYuNTg0LTAuNjgsMTguMTg4LTMuOTkyLDM1Ljk2NC0xNi4wMDZjMCwwLTcuMjg2LDEzLjA5NS0zNC44MjcsMjIuODY5YzAuODc3LDYuNTk3LDEuMDQ0LDEyLjgwNiwwLjMxNSwxOC40NDMNCgkJYzQuMzI1LDYuODUzLDExLjU2MiwxNC45MywyMi4xNiwxNi4zMThjMCwwLTEyLjcxNywwLjUzOS0yNC41NTktNi41MTZjLTkuMDI0LDIzLjIzLTQxLjA1OSw0MS4zNjQtNjYuMzcxLDUyLjQ5Nw0KCQljLTAuODA2LTAuMjE4LTEuNjM0LTAuNDQtMi40NTctMC42NThjLTIuNzMyLDQuNTg5LTUuNDEsMTAuMzMyLTUuNDEsMTUuMTgyYzAsNi41MjEtMy4yMjctNC4xNjktMy42NDUtMTcuNTEyDQoJCWMtNy4zOTQtMS44Mi0xNS4zNjktMy41ODMtMjMuNjg3LTUuMTA3YzAsMCwxNi42MzktNzkuNDAyLDE2LjYzOS04OC41MThjMC05LjExOC0xMC4yOTQtNDMuMTgxLTUwLjI5Mi01MS4zNTQNCgkJYzEuMzUzLTQuNzg4LTEuOTYtOS41MTctMS45Ni05LjUxN2MtMC45MjUsNC42MjktMi4xNjUsNS4wOTYtMy4zOTYsNS4wOTZjLTUuNTU3LDAtOC4zMzQtMTQuMTk5LTguMzM0LTE0LjE5OQ0KCQljLTAuNzI1LDAuNzI0LTEuMzA0LDEuNDQ2LTEuNzc3LDIuMTY5Yy0zLjQ3MSw1LjI3Ny0wLjg0OSwxMC4xNzctMC44NDksMTAuMTc3YzAuMzAyLDAuMjg0LDAuNTQ3LDAuNjYsMC44NDksMC44NTV2NDEuMjYyDQoJCWM4Ljg4MywwLjAxNSwxNi4wNzMsNy4yMTYsMTYuMDczLDE2LjA5N2MwLDEuMzE2LTAuMTc2LDIuNTg4LTAuNDcsMy44MTJjLTEuNzEzLTcuMDM5LTguMDM4LTEyLjI2OS0xNS42MDQtMTIuMjgxdjU0LjgwMw0KCQljMTMuMTM2LDAsMjguMTg2LTIuNDcyLDQzLjQzNi0xMC4wOTdjMCwwLTMuMDIyLDM1LjAyMS00MC4zODMsMzUuMDIxYy0xLjA0MiwwLTIuMDU3LTAuMDMzLTMuMDUzLTAuMDg5djU3LjE0MmwwLjYwNSwwLjIzOA0KCQlsNDkuNDUtMjAuMDA1bC00OS40NSwyNS45NTdsLTAuNjA1LTAuMzA1djE4LjY4YzIxLjA3LDAuMjMzLDM4LjA4MywxNy4zNjYsMzguMDgzLDM4LjQ5NmMwLDIxLjEyOS0xNy4wMTMsMzguMjYxLTM4LjA4MywzOC41DQoJCXYzMS4zNjFsMTEyLjg3OCwyMS42NThjMy4zMjgtMzguMTA4LDQuNTU4LTc2LjA3LDQuODczLTEwNi45ODNjLTE1LjE0Ny0zLjUwMy0yMS41MjctMjEuNjIxLTIxLjUyNy0yMS42MjENCgkJYzguMzQyLDguOTAxLDIwLjk4NywxMC43NDEsMjEuNjA1LDEwLjgyMmMwLTAuMTY3LDAtMC4zNDIsMC0wLjUwNGM0Ljg5OS0zLjkyNiw5Ljk2Mi04LjIyNSwxNS4xNjgtMTIuODM5DQoJCWMtMTIuMTkxLTE0LjMyOS0xNy40MzgtMzEuOTUyLTE3LjQzOC0zMS45NTJjNS43ODMsOS44MjksMTguMDM3LDIwLjA0MiwyNC44MzcsMjUuMjY1YzQuMjI0LTMuODg4LDguNTQ2LTcuOTgyLDEyLjk3Mi0xMi4yOQ0KCQljLTEzLjA3My0xNC41NDktMTguNjY4LTMzLjM0OC0xOC42NjgtMzMuMzQ4YzYuMTIsMTAuNDAzLDE5LjUwNywyMS4yNDgsMjUuOTgsMjYuMTM3YzQuMjYtNC4yNSw4LjYwNC04LjY2OCwxMy4wNDYtMTMuMjY2DQoJCWMtMTIuNjE5LTE0LjQ0NC0xOC4wMzItMzIuNjM0LTE4LjAzMi0zMi42MzRjNS44MjQsOS45MDMsMTguMjA4LDIwLjE5MSwyNC45NzYsMjUuMzc3YzQuNDg3LTQuNzM0LDkuMDU2LTkuNjA3LDEzLjcyNy0xNC42NjkNCgkJQzQ2OS4yNTctNjkuNjEsMzY4LjgxMy0yMTkuNDQzLDM2OC44MTMtMjE5LjQ0M3ogTTQwNi44ODYtMjcuODMzYy00Ljc3MywwLTguNjQ2LTMuODctOC42NDYtOC42NDUNCgkJYzAtNC43NzYsMy44NzEtOC42NDUsOC42NDYtOC42NDVjNC43NzIsMCw4LjY0NSwzLjg2Nyw4LjY0NSw4LjY0NUM0MTUuNTMtMzEuNzAyLDQxMS42NTgtMjcuODMzLDQwNi44ODYtMjcuODMzeiIvPg0KCTxwYXRoIGZpbGw9IiMyQkFCRTIiIGQ9Ik0zMDEuMTczLDQ4NC4zODdjNC43NzUsMCw4LjY0OC0zLjg2Niw4LjY0OC04LjY0M2MwLTQuNzc4LTMuODcyLTguNjQ1LTguNjQ4LTguNjQ1DQoJCWMtNC43NywwLTguNjQxLDMuODY2LTguNjQxLDguNjQ1QzI5Mi41MzIsNDgwLjUyMSwyOTYuNDAzLDQ4NC4zODcsMzAxLjE3Myw0ODQuMzg3eiIvPg0KCTxwYXRoIGZpbGw9IiMyQkFCRTIiIGQ9Ik0yMTkuOTgsMjgwLjQzNXYtMTAuMjU4YzIuMTYtMC41MTUsNC4xOS0xLjM3LDYuMDI3LTIuNDk5bDcuMjU1LDcuMjUybDYuODM5LTYuODM3bC03LjI1Ny03LjI1Mg0KCQljMS4xMzYtMS44NCwxLjk4NS0zLjg2NiwyLjUwMy02LjAzNGgxMC4yNTRsMC4wMDgtOS42NjVoLTEwLjI2MmMtMC41MTMtMi4xNjMtMS4zNjctNC4xOTItMi41MDMtNi4wMzJsNy4yNTctNy4yNTJsLTYuODM5LTYuODQNCgkJbC03LjI0OSw3LjI1M2MtMS44NDMtMS4xMjktMy44NjgtMS45OC02LjAzMy0yLjQ5NnYtMTAuMjYxaC00LjM5OHY2MC45MjFIMjE5Ljk4eiIvPg0KCTxwb2x5Z29uIGZpbGw9IiMyQkFCRTIiIHBvaW50cz0iMjY1LjYzOSwxMi43NiAyMTYuMTg4LDMyLjc2NSAyMTUuNTgxLDMyLjUyNiAyMTUuNTgxLDM4LjQxMiAyMTYuMTg4LDM4LjcxNiAJIi8+DQoJPHBhdGggZmlsbD0iIzAxNzRCMyIgZD0iTTI1My42NjUsOTUuNTg4YzAtMjEuMTI5LTE3LjAxNC0zOC4yNjItMzguMDg0LTM4LjQ5NnYxMC4wMTJjMTUuNTQsMC4yMzMsMjguMDY3LDEyLjg5MSwyOC4wNjcsMjguNDgyDQoJCWMwLDE1LjU5MS0xMi41MjcsMjguMjQ1LTI4LjA2NywyOC40ODJ2MTAuMDE3QzIzNi42NTEsMTMzLjg0NywyNTMuNjY1LDExNi43MTgsMjUzLjY2NSw5NS41ODh6Ii8+DQoJPHBhdGggZmlsbD0iIzJCQUJFMiIgZD0iTTIyNy43NjUsMTEzLjE5NmM3LjMzMy01LjI0NiwxMC4zNzEtMTQuMjA3LDguMzUzLTIyLjMxMmMwLjQwMyw2Ljk5MS0yLjcxOCwxNC4wODEtOC45MTgsMTguNTIyDQoJCWMtMC4wMzIsMC4wMy0wLjA3MSwwLjA0OS0wLjEwNSwwLjA3M2MwLjEzOC0wLjM5LDAuMjIxLTAuODA1LDAuMjIxLTEuMjM4YzAtMi4xMTEtMS43MDctMy44MjMtMy44MTYtMy44MjMNCgkJYy0yLjExNywwLTMuODIxLDEuNzExLTMuODIxLDMuODIzYzAsMS43NzIsMS4yMTEsMy4yNTksMi44NTYsMy42ODljLTIuMjU2LDAuODkxLTQuNjA0LDEuMzcxLTYuOTQ4LDEuNDcydjMuODA4DQoJCUMyMTkuNzk2LDExNy4xNDUsMjI0LjA1NCwxMTUuODQ4LDIyNy43NjUsMTEzLjE5NnoiLz4NCgk8cGF0aCBmaWxsPSIjMkJBQkUyIiBkPSJNMjE1LjU4MSw3OC45MjJ2MTIuMTMyYzEuMTQ5LTEuNzQzLDEuODI1LTMuODI1LDEuODI1LTYuMDdDMjE3LjQwNiw4Mi43NDQsMjE2LjczLDgwLjY2MSwyMTUuNTgxLDc4LjkyMnoiDQoJCS8+DQoJPHBhdGggZmlsbD0iIzJCQUJFMiIgZD0iTTIzOS4yMjQsOTUuNTg4YzAtMTMuMTUzLTEwLjU0Ni0yMy44MjEtMjMuNjQzLTI0LjA1NXYwLjAwNGMxMy4wOTQsMC4yMzQsMjMuNjM3LDEwLjkwNCwyMy42MzcsMjQuMDUyDQoJCWMwLDEzLjE0OS0xMC41NDIsMjMuODE4LTIzLjYzNywyNC4wNTF2MC4wMDZDMjI4LjY3NywxMTkuNDA5LDIzOS4yMjQsMTA4Ljc0LDIzOS4yMjQsOTUuNTg4eiIvPg0KCTxwYXRoIGZpbGw9IiMyQkFCRTIiIGQ9Ik0yMjQuMDEzLDI1MC4wMTFjMC00Ljc4LTMuODctOC42NDYtOC42NDItOC42NDZjLTQuNzc0LDAtOC42NDgsMy44NjYtOC42NDgsOC42NDYNCgkJYzAsNC43NzUsMy44NzEsOC42NDEsOC42NDgsOC42NDFDMjIwLjE0MywyNTguNjQ5LDIyNC4wMTMsMjU0Ljc4NiwyMjQuMDEzLDI1MC4wMTF6Ii8+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIxNS41ODEsMjQxLjM3N3YxNy4yNjJjNC42NzItMC4xMTIsOC40MzItMy45MjUsOC40MzItOC42MjgNCgkJQzIyNC4wMTMsMjQ1LjMwMiwyMjAuMjUzLDI0MS40OTEsMjE1LjU4MSwyNDEuMzc3eiIvPg0KPC9nPg0KPGc+DQoJPGNpcmNsZSBmaWxsPSIjRjRGNUY1IiBjeD0iMjE0Ljk4MSIgY3k9Ijk1LjU4OCIgcj0iMjQuMDc1Ii8+DQo8L2c+DQo8Zz4NCgk8Y2lyY2xlIGZpbGw9IiNGRkZGRkYiIGN4PSIyMTQuMzUiIGN5PSI5OC4wMTIiIHI9IjQwLjg1OSIvPg0KCTxwYXRoIGZpbGw9IiMyQkFCRTIiIGQ9Ik0yMTUuNDI5LDU2LjgxdjgyLjM5OWMyMi4xODYtMC42ODYsMzkuOTc3LTE4Ljg0MywzOS45NzctNDEuMTk3UzIzNy42MTQsNTcuNDk3LDIxNS40MjksNTYuODF6Ii8+DQoJPGNpcmNsZSBmaWxsPSIjMDQ3MkI2IiBjeD0iMjE0LjM0OSIgY3k9Ijk4LjAxMiIgcj0iMzQuNTEzIi8+DQoJPHBhdGggZmlsbD0iIzJCQUJFMiIgZD0iTTIzOS44OTEsOTguMDEyYzAsMTQuMTExLTExLjQzNSwyNS41MzgtMjUuNTQxLDI1LjUzOGMtMTQuMTEsMC0yNS41NDUtMTEuNDI2LTI1LjU0NS0yNS41MzgNCgkJYzAtMTQuMTExLDExLjQzNS0yNS41NDIsMjUuNTQ1LTI1LjU0MkMyMjguNDU2LDcyLjQ2OSwyMzkuODkxLDgzLjkwMSwyMzkuODkxLDk4LjAxMnoiLz4NCgk8Y2lyY2xlIGZpbGw9IiMyQkFCRTIiIGN4PSIyMTQuMzcyIiBjeT0iOTguMTE2IiByPSI3Ljc5MiIvPg0KPC9nPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiMyQkFCRTIiIGQ9Ik0zMzMuMjc0LDY4LjQ4NyIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMTUuNTYtMTA1LjMwOGMwLjAwOCwwLDAuMDE1LDAuMDA2LDAuMDIxLDAuMDA2YzcuNTY1LDAuMDA4LDEzLjg5Miw1LjI0LDE1LjYwNCwxMi4yOA0KCQljMC4yOTMtMS4yMjYsMC40NzEtMi41LDAuNDcxLTMuODEyYzAtOC44ODMtNy4xOTItMTYuMDgzLTE2LjA3NS0xNi4wOTdjLTAuMDA3LDAtMC4wMTQsMC0wLjAyMSwwDQoJCWMtOC44OSwwLTE2LjA5NSw3LjIwNS0xNi4wOTUsMTYuMDk3YzAsMS4zMTQsMC4xNzgsMi41ODcsMC40NzUsMy44MTJDMjAxLjY1Ny0xMDAuMDcsMjA3Ljk4OS0xMDUuMzA4LDIxNS41Ni0xMDUuMzA4eiIvPg0KPC9nPg0KPGc+DQoJPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIwNi40MTMsOTguNTI3Yy0wLjA3MywwLjcsMC4yLDEuMzg5LDAuMzQ2LDEuOTQ5YzAuMTU2LDAuNjAzLDAuMzE2LDEuMjE5LDAuMjUxLDIuMDQzDQoJCWMtMC4xOTcsMi41MjYtMi4wNTEsNC4zNjItNC4zMzksNC43ODJjLTIuODE5LDAuNTE1LTQuOTg3LTEuMTk5LTUuNzg2LTMuMTQ2Yy0wLjQ0Ni0xLjA4OS0wLjU2LTIuNTg5LTAuMDk1LTMuODM2DQoJCWMwLjU5MS0xLjU4NiwxLjgyMS0yLjgzMSwzLjU1NS0zLjMwMmMwLjU5Ni0wLjE2MywxLjIyMS0wLjI1MywxLjc2MS0wLjUwM2MwLjczNS0wLjM0MSwxLjM2MS0xLjEsMS4zNTMtMi4xMzkNCgkJYy0wLjAwNC0wLjUxNS0wLjIxNC0wLjk1Mi0wLjM0NS0xLjQxNWMtMC4xMzgtMC40NzctMC4yNDYtMC45NTMtMC4yODQtMS40NzljLTAuMDc5LTEuMDU3LDAuMTctMi4wNzcsMC41OTgtMi44NjINCgkJYzAuMzcxLTAuNjc5LDAuOTMzLTEuMzU3LDEuNjY3LTEuODU3YzAuNzA4LTAuNDc5LDEuNjA0LTAuNzk3LDIuNzA1LTAuODc5YzEuNDQ5LTAuMTA2LDIuODA4LDAuNDkyLDMuNjQ3LDEuMTk2DQoJCWMwLjg2MiwwLjcyNSwxLjUzLDEuNjUyLDEuNzk0LDMuMDE5YzAuNTc0LDIuOTg3LTEuMjU3LDUuMjY1LTMuMzY1LDYuMDA3Yy0wLjY0MSwwLjIyNS0xLjUxNSwwLjI2OC0yLjE0LDAuNTY2DQoJCUMyMDcuMDk1LDk2Ljk3NCwyMDYuNTExLDk3LjU4OCwyMDYuNDEzLDk4LjUyN3ogTTIxNS41NjUsMTA3LjMwMWMtMi44MjEsMC41MTUtNC45ODgtMS4xOTktNS43ODctMy4xNDYNCgkJYy0wLjQ0Ny0xLjA4OS0wLjU2LTIuNTg5LTAuMDk0LTMuODM2YzAuNTktMS41ODYsMS44MjEtMi44MzEsMy41NTUtMy4zMDJjMC41OTQtMC4xNjMsMS4yMTgtMC4yNTMsMS43Ni0wLjUwMw0KCQljMC43MzQtMC4zNDEsMS4zNi0xLjEsMS4zNTItMi4xMzljLTAuMDA0LTAuNTE1LTAuMjEzLTAuOTUyLTAuMzQ2LTEuNDE1Yy0wLjEzNS0wLjQ3Ny0wLjI0NC0wLjk1My0wLjI4My0xLjQ3OQ0KCQljLTAuMDgtMS4wNTcsMC4xNjktMi4wNzcsMC41OTktMi44NjJjMC4zNzEtMC42NzksMC45MzItMS4zNTcsMS42NjYtMS44NTdjMC43MDgtMC40NzksMS42MDYtMC43OTcsMi43MDYtMC44NzkNCgkJYzEuNDUtMC4xMDYsMi44MDgsMC40OTIsMy42NDYsMS4xOTZjMC44NjQsMC43MjUsMS41MjksMS42NTIsMS43OTQsMy4wMTljMC41NzUsMi45ODctMS4yNTcsNS4yNjUtMy4zNjUsNi4wMDcNCgkJYy0wLjY0MSwwLjIyNS0xLjUxNiwwLjI2OC0yLjEzOSwwLjU2NmMtMC42MzksMC4zMDMtMS4yMjMsMC45MTctMS4zMjEsMS44NTVjLTAuMDcyLDAuNzAyLDAuMiwxLjM5MSwwLjM0NiwxLjk1DQoJCWMwLjE1NywwLjYwNCwwLjMxNywxLjIyLDAuMjUyLDIuMDQzQzIxOS43MDgsMTA1LjA0NSwyMTcuODU0LDEwNi44ODEsMjE1LjU2NSwxMDcuMzAxeiBNMjI1LjYyOSwxMDcuMDQ4DQoJCWMtMS42OTMtMC42Ny0zLjIzNy0yLjI0Ni0zLjM5Ni00LjU2MWMtMC4xMTktMS43MTksMC41NTktMy4wMjIsMS4zMjEtMy45YzAuMzcyLTAuNDI4LDAuODY5LTAuODUyLDEuNDQ2LTEuMTY0DQoJCWMwLjU3MS0wLjMwNywxLjI3Ny0wLjUzMSwyLjA3OC0wLjU5OGMyLjUwOS0wLjIwNyw0LjM1NCwxLjI0Miw1LjE1NywyLjc5OWMwLjUwMSwwLjk3NSwwLjcyNiwyLjE1OSwwLjUzNCwzLjMzNQ0KCQlDMjMyLjI4MSwxMDUuOTI0LDIyOS4wMzQsMTA4LjM5NCwyMjUuNjI5LDEwNy4wNDh6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==') center top no-repeat; - content: ''; - height: 949px; - left: 50%; - margin-left: -215px; - position: fixed; - top: 165px; - width: 429px; - z-index: 1; -} -aside .wrapper { - background: #2babe1; - border-top: 5px solid #edf6ff; - margin: -5px auto 0; - max-width: 1040px; - padding: 40px 0 30px 0; - position: relative; - width: 100%; - z-index: 2; -} -aside .wrapper:after { - clear: both; - content: " "; - display: block; - font-size: 0; - height: 0; - line-height: 0; - visibility: hidden; - width: 0; -} -aside .wrapper h3 { - color: #00374f; - font-size: 24px; - margin-top: 0; -} -aside .wrapper a { - color: #edf6ff; -} -aside .wrapper a.designer-name { - color: #00374f; -} -aside .wrapper ul { - list-style: none; - padding: 0; -} -aside .wrapper ul li { - margin-bottom: 12px; -} -aside .wrapper ul li:last-child { - margin-bottom: 0; -} -aside .wrapper .design-selection { - border-right: 2px solid #edf6ff; - float: left; - margin-right: 40px; - width: 50%; -} -aside .wrapper .design-selection .design-name { - display: block; -} -aside .wrapper .zen-resources { - margin-top: 40px; -} -.supporting footer { - background: #00374f; - font-size: 22px; - height: 65px; - text-align: center; - width: 100%; -} -.supporting footer a { - color: #edf6ff; - margin-right: 25px; - vertical-align: -1em; -} -.supporting footer a:last-child { - margin-right: 0; -} -@media (max-width: 1040px) { - .intro { - height: 700px; - } - .intro .summary { - left: auto; - margin-top: 15px; - text-align: center; - top: auto; - } - .intro .summary p { - float: none; - margin: 0 auto 10px; - max-width: 300px; - width: 90%; - } - .preamble { - left: auto; - margin: 0 2.5% 0 5%; - top: 413px; - width: 42.5%; - } - .explanation { - margin: 0 5% 0 2.5%; - width: 42.5%; - } - .participation h3, - .participation p { - left: auto; - margin-left: 5%; - width: 47%; - } - .participation:after { - background-position: center; - -webkit-background-size: contain; - -moz-background-size: contain; - background-size: contain; - float: right; - margin: -330px 5% 0 0; - min-width: 0; - position: static; - width: 40%; - } - .benefits h3, - .benefits p { - margin-right: 5%; - width: 47%; - } - .benefits:after { - background-position: center; - -webkit-background-size: contain; - -moz-background-size: contain; - background-size: contain; - clear: left; - margin: -230px 0 0 5%; - min-width: 0; - position: static; - width: 40%; - } - .requirements { - left: auto; - margin-left: 0; - padding: 0 5%; - width: 90%; - } - .requirements p:nth-child(4) { - right: 5%; - width: 42.5%; - } - .requirements p:last-child { - padding: 0 20% 20px; - width: 60%; - } - aside:before { - top: 170px; - } - aside:after { - -webkit-animation: rise-short 1.5s 1 ease; - -moz-animation: rise-short 1.5s 1 ease; - -ms-animation: rise-short 1.5s 1 ease; - -o-animation: rise-short 1.5s 1 ease; - top: 275px; - } - aside .wrapper { - padding: 40px 5% 30px; - width: 90%; - } -} -@media (max-width: 750px) { - .intro header h1 { - font-size: 60px; - min-height: 50px; - margin-top: 35px; - } - .intro header h2 { - max-width: 455px; - } - .intro .summary { - margin-top: 35px; - } - .intro .preamble { - top: 433px; - } -} -@media (max-width: 650px) { - .intro { - height: 985px; - position: relative; - } - .intro .preamble { - background: rgba(255, 255, 255, 0.9); - border-top: 5px solid #dd3b2a; - bottom: 0; - margin: 0; - max-width: none; - padding: 25px 0; - position: absolute; - top: auto; - width: 100%; - } - .intro .preamble h3, - .intro .preamble p { - width: 85%; - margin: 0 auto; - } - .supporting { - border-top: none; - } - .supporting footer { - font-size: 18px; - } - .supporting footer a { - vertical-align: -1.25em; - } - .explanation { - float: none; - left: auto; - margin: 0; - max-width: none; - padding: 0 7.5% 10px; - width: 85%; - } - .participation h3, - .participation p { - float: none; - margin: 0 auto; - width: 85%; - } - .participation:after { - float: none; - margin: 50px auto 0; - width: 80%; - } - .benefits h3, - .benefits p { - float: none; - left: auto; - margin: auto; - width: 85%; - } - .benefits:after { - background-position: center; - float: none; - margin: 50px auto 0; - width: 80%; - } - .requirements { - padding: 0 7.5%; - width: 85%; - } - .requirements p { - float: none; - position: static !important; - width: 100% !important; - } - .requirements p:last-child { - padding: 0 0 20px; - } - aside .wrapper .design-selection, - aside .wrapper > div { - border: none; - float: none; - margin: 0; - padding: 0; - text-align: center; - width: 100%; - } - aside .wrapper .design-archives { - margin-top: 40px; - } - aside .wrapper > div h3 { - margin: 0; - } - aside .wrapper > div ul { - margin-top: 0; - } - aside:after { - -webkit-background-size: contain; - -moz-background-size: contain; - background-size: contain; - left: auto; - margin: 0 5%; - width: 90%; - } -} -@media (max-width: 500px) { - .intro header h1 { - background: white; - font-size: 40px; - line-height: 1em; - margin: 15px 0 10px; - min-height: 40px; - } - .intro header h1:after { - margin-top: 18px; - } - .intro header h2 { - font-size: 16px; - max-width: 310px; - } -} diff --git a/src/data/designs/216/metadata.json b/src/data/designs/216/metadata.json deleted file mode 100644 index e83d53a1f4b94c3ff92ff8ca5764e38829db2e68..0000000000000000000000000000000000000000 --- a/src/data/designs/216/metadata.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "id": "216", - "url": "https://www.csszengarden.com/216", - "css_url": "https://www.csszengarden.com/216/216.css", - "description": "The design showcases a rich, warm color palette with a focus on a brown and deep pink theme, creating an inviting and sophisticated atmosphere. The layout centers around a vertical alignment with sections defined by color contrasts and text blocks, providing clarity and visibility. Typography is varied, with elegant serif fonts mingling with bold sans-serif styles, emphasizing different text sections. A background gradient and blurred image add depth and a sense of mystery, enhancing the overall visual appeal.", - "categories": [ - "web design", - "print design", - "editorial", - "modern style" - ], - "visual_characteristics": [ - "warm color palette", - "vertical layout", - "contrasting text blocks", - "serif and sans-serif typography", - "gradient background" - ] -} \ No newline at end of file diff --git a/src/data/designs/216/screenshot_desktop.png b/src/data/designs/216/screenshot_desktop.png deleted file mode 100644 index 06a007533fd4bb428bf03c35df9b9708c61eaa55..0000000000000000000000000000000000000000 --- a/src/data/designs/216/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:fedf8b6a33104c387b8a5904e9d40591b8a409838cc9277098fc594fd9880094 -size 1837398 diff --git a/src/data/designs/216/screenshot_mobile.png b/src/data/designs/216/screenshot_mobile.png deleted file mode 100644 index 14e4c8a3c591a9f7e990137312c544eb0b206087..0000000000000000000000000000000000000000 --- a/src/data/designs/216/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:3011d80f022efecf5b5dc700476ab86d69984ae86cfda704c504666de03dfe55 -size 740315 diff --git a/src/data/designs/216/style.css b/src/data/designs/216/style.css deleted file mode 100644 index 578869e9607a6c4fdf4a0d3908f6f19aa40d45b9..0000000000000000000000000000000000000000 --- a/src/data/designs/216/style.css +++ /dev/null @@ -1,1245 +0,0 @@ -/* css Zen Garden submission 216 - 'Fountain Kiss', by Jeremy Carlson, http://jeremycarlson.com */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ -/* All associated graphics copyright 2013, Jeremy Carlson */ - -/* xoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo - CSS Zen Garden 2013 - - Theme: Fountain Kiss - by Jeremy Carlson - @eyesofjeremy :: http://jeremycarlson.com - - A theme inspired by an enchanted summer evening - at the end of a fine Bumbershoot in Seattle. - - - _.===._ - .oooooooooo._ - .oooooooooooooo. .=oooo=.._ - .oooooooooooooooo.ooooooooooo:. - .oooooooooooooooooooooooooooooo. - ooooooooooooooooooooooooooooooo - :oooooooooooooooooooooooooooooo - ooooooooooooooooooooooooooooo: - :oooooooooooooooooooooooooo: - ooooooooooooooooooooooo= - :oooooooooooooooooo=~ - ~oooooooooooo=~ - ooooooo=~ - ~ - - - css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ - - =Typography - - First, let's talk type, colors, that kind of thing. - -------------------------------------------------- */ - -/* Ultra & Montserrat: a charming pair. */ -@import url(http://fonts.googleapis.com/css?family=Ultra|Montserrat:700); - -body { - font-family: Georgia, serif; - line-height: 1.4; - padding: 0; - margin: 0; - } - -body, .preamble h3 { - color: #724; - } - -abbr { border: none } - -h3, .design-archives a:before { - font-size: 1.1875em; -} -/* These selection declarations have to be separate. - No text-shadow: twitter.com/miketaylr/status/12228805301 -*/ -::-moz-selection{ background: #fff; color:#804; text-shadow: none; } -::selection { background:#fff; color:#804; text-shadow: none; } - -a abbr { border-bottom: none } - -a:link, p:hover a abbr { color: #804 } -.sidebar a:link { - color: #550028; -} -.sidebar .designer-name:link, a:visited { color: #935 } -.sidebar .designer-name:visited { color: #b68 } - -a:hover, p:hover a:hover abbr, .sidebar a:hover, .sidebar .designer-name:hover { - color: #000; - text-shadow: 2px 2px 0 rgba(255,255,255,0.51); - } - -p:hover abbr, h3:hover abbr { - color: #000; - } - -.summary p:hover abbr, footer a:hover { - color: #fff; - text-shadow: none; -} - -h1, h2, h3, .design-archives a:before, footer a, -footer:after, .supporting p:nth-child(2)::first-letter { - font-family: 'Ultra', 'Arial Black', serif; - -webkit-font-smoothing: antialiased; - font-weight: normal; - font-style: normal; -} - -a { - font-family: 'Montserrat', Verdana, Helvetica, Arial, sans-serif; - font-weight: bold; - font-style: normal; - font-size: .875em; - text-decoration: none; - text-transform: uppercase; -} - -.supporting p:nth-child(2)::first-letter { - font-size: 2.8em; - line-height: 0.8; - float: left; - margin: .1em .1em 0 -.2em; - color: #804; - text-shadow: 1px 1px 0 rgba(255,255,255,0.4); -} -.benefits p:nth-child(2)::first-letter, .requirements p:nth-child(2)::first-letter { - margin-left: -.4em; -} - -h3:before, h3:after, footer:before { - font-family: Georgia; - font-style: italic; -} - -footer a { - text-transform: lowercase; -} -h1, h3 { - color: #fff; -} -.supporting h3 { - background-color: #804; -} - -.sidebar h3 { - color: #fff; - background: #5b0a2a; -} - -ul { - margin: 0; - padding: 0; - list-style: none; -} - -.summary p, .preamble { - font-size: .875em; -} - -header[role=banner] { - font-size: 30px; -} - -/* xoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo - =Layout - - All righty then. Let's roll. - - First, backgrounds + set up the page wrapper - -------------------------------------------------- */ - -body { - text-align: right; - max-width: 540px; - margin-left: 40px; -} -@media screen and (max-width: 420px) { body { margin-left: 0 } } - -.page-wrapper { - position: relative; - max-width: 460px; - padding: 30px 0 0; - margin: 0 0 0 auto; - text-align: left; - -webkit-box-shadow: 0 0 24px rgba(0,0,0,0.3); - -moz-box-shadow: 0 0 24px rgba(0,0,0,0.3); - box-shadow: 0 0 24px rgba(0,0,0,0.3); -} -@media screen and (max-width: 580px) { .page-wrapper { z-index: 3 } } - -@media screen and (min-width: 581px) { - body { - text-align: left; - max-width: 100%; - } - .page-wrapper { - margin-left: 80px; - } -} - -body, .page-wrapper:before, .page-wrapper:after { - background: #3c1d08 url('kiss.jpg') no-repeat fixed 50% top; -} -.page-wrapper, .intro:after, .supporting div, .supporting footer { - background: #fceec6 url('kiss_light.jpg') no-repeat fixed 50% top; -} -/* Somewhat torn about these bg images. - - The large-sized images are not ideal for mobile devices. - But serving up a smaller image really requires background-size, - and this compromises the design severely on older browsers. -*/ - -.page-wrapper:before { - content: ' '; - position: fixed; - display: block; - z-index: -1; - top: 0; - right: 0; - left: 0; - bottom: 0; -} - -/* xoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo - =Intro - Note: IE<9 ignores styles for HTML5 elements. .intro is one. - -------------------------------------------------- */ - -.intro { - padding: 96px 0 36px; - position: relative; - text-align: center; - margin: -30px 0 0; - background: rgba(250,243,204,0.6); - background: -moz-radial-gradient(center, ellipse cover, rgba(249,249,249,1) 0%, rgba(250,223,154,0.4) 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(250,223,154,0.4))); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, rgba(249,249,249,1) 0%,rgba(250,223,154,0.4) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, rgba(249,249,249,1) 0%,rgba(250,223,154,0.4) 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, rgba(249,249,249,1) 0%,rgba(250,223,154,0.4) 100%); /* IE10+ */ - background: radial-gradient(ellipse at center, rgba(249,249,249,1) 0%,rgba(250,223,154,0.4) 100%); /* W3C */ - border-color: rgba(250,223,154,0.3); - border-style: solid; - -webkit-transition: all .2s ease; - -moz-transition: all .2s ease; - -ms-transition: all .2s ease; - -o-transition: all .2s ease; - transition: all .2s ease; -} - -.intro:after { - content: ' '; - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - z-index: -1; -} - -.summary, .preamble, header[role=banner] { - text-align: center; -} - -.preamble { - padding: 0 20px; -} - -header[role=banner] { - margin: 0 auto; - width: 7.1em; - position: relative; - z-index: 1; - top: -186px; -} - -.summary { - padding: 0 3em .1em; -} - -.summary p:last-child { - padding: .4em .5em; - border-top: 1px solid rgba(255,255,255,0.6); - border-bottom: 1px solid rgba(255,255,255,0.6); -} - -.summary p { - position: relative; - margin-top: 0; - margin-bottom: 0; -} - -.summary p:first-child { - margin-top: 60px; - padding: 30px .5em 1em; -} -.summary p:first-child:before { - content: ' '; - height: 60px; - width: 70px; - position: absolute; - top: -30px; - left: 50%; - margin-left: -35px; - display: block; - background: url('heart-and-lips.png') no-repeat 50% top; -} - -.preamble h3 { - padding-bottom: 60px; - background: url('heart-and-lips.png') no-repeat 50% bottom; -} - -.preamble h3:before, .preamble h3:after { - display: block; -} - -.preamble h3:before { - content: 'when walking on '; -} -.preamble h3:after { - content: ' donât forget to kiss a stranger.'; -} - -/* h1 - "CSS Zen Garden" */ -h1 { - position: fixed; - left:-.3em; - top:0; - width: 1em; - font-size: 48px; - line-height: .8; - text-align: center; - text-transform: uppercase; - word-wrap: break-word; - text-shadow: 0 0 48px rgba(0,0,0,0.3); - -webkit-transition: all 0.2s ease-out; - -moz-transition: all 0.2s ease-out; - -ms-transition: all 0.2s ease-out; - -o-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} -@media screen and (min-height: 650px) { h1 { font-size: 60px } } -@media screen and (min-height: 800px) { h1 { font-size: 72px } } -@media screen and (min-height: 950px) { h1 { font-size: 96px } } -@media screen and (min-height: 1200px) { h1 { font-size: 108px } } -@media screen and (max-width: 480px) { - .intro { - z-index: 3; - } - h1 { - width: auto; - left: 0; - right: 0; - top: -22px; - font-size: 24px; - background: #804; - z-index: 3; - padding: 8px 0; - -webkit-box-shadow: 0 0 8px #000; - -moz-box-shadow: 0 0 8px #000; - box-shadow: 0 0 8px #000; - - } - .summary { - padding: 0 0 .1em; - } -} - -/* h2 - "The Beauty..." */ -h2 { - text-align: center; -} - -@media screen and (min-width: 240px) { - h2 { - position: absolute; - top: 3em; - right: 0; - left: 0; - margin: 0 auto; - font-size: 1em; - width: 10em; - height: 6em; - clip:rect(0,7.2em,6em,-.5em); - line-height: 2; - text-align: left; - color:#fff; - text-shadow: 0 0 4px rgba(68,0,32,0.6); - filter: progid:DXImageTransform.Microsoft.Shadow(color='#aa3355',direction=135,strength=1); - } - h2:before { - content: 'of'; - position: absolute; - z-index: 1; - left: 0; - width: 6.9em; - text-align: center; - top: 1em; - color: rgba(136,0,68,1); - font-family: Georgia; - font-weight: bold; - font-style: italic; - } - /* Making little lines around the "of" */ - h2 abbr:before, h2 abbr:after { - display: block; - content: ' '; - border-top: 3px solid rgb(136,0,68); - border-top: 3px solid rgba(136,0,68,0.7); - -webkit-box-shadow: 0 0 4px rgba(136,0,68,0.3); - -moz-box-shadow: 0 0 4px rgba(136,0,68,0.3); - box-shadow: 0 0 4px rgba(136,0,68,0.3); - - width: 2.5em; - height: 0; - position: absolute; - top: 2em; - } - h2 abbr:before { - left: .1em; - } - h2 abbr:after { - right: 3.1em; - } - -} - -@media screen and (min-width: 840px) { - header[role=banner], .summary { - position: fixed; - } - - header[role=banner] { - top: -1.7em; - right: 0; - left: 580px; /* abut page-wrapper */ - height: 9em; - } - - .intro { padding-top: 36px } - - .summary { - right: 0; - left: 580px; /* abut page-wrapper */ - bottom: 0; - padding: 0 1.2em 10px; - } - - .summary p { - max-width: 26.5em; - margin-right: 0; - margin-left: auto; - font-family: Montserrat; - font-size: .75em; - text-shadow: 1px 1px 0 rgba(68,0,32,0.2); - } - .summary p, .summary p:last-child:after { - background: rgba(138,0,68,0.3); - } - .summary p:first-child { - -webkit-border-top-left-radius: 50%; - -webkit-border-top-right-radius: 50%; - -moz-border-radius-topleft: 50%; - -moz-border-radius-topright: 50%; - border-top-left-radius: 50%; - border-top-right-radius: 50%; - } - .summary p:first-child:before { - top: -35px; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - background: url('heart-and-lips.png') no-repeat 50% top, url('kiss.jpg') no-repeat fixed 50% top; - } - .summary p:last-child { - font-family: Georgia, serif; - font-style: italic; - border-color: rgba(255,255,255,0.3); - } - .summary p:last-child:after { - content: ' '; - height: 11px; - display: block; - position: absolute; - bottom: -12px; - left: 0; - right: 0; - } - .summary, .summary a { - color: #fff; - } - -} - -@media screen and (min-width: 960px) { - .intro { - padding: 36px 100px; - margin: 0 -52px 30px; - border-width: 2px; - } - .intro:before { - content: ' '; - position: absolute; - top: -16px; - left: -16px; - right: -16px; - bottom: -16px; - border: 2px solid rgba(250,223,154,0.4); - } - .intro, .intro:before { - -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; - } - .intro:after { - top: -34px; - right: 50px; - left: 50px; - bottom: -32px; - } - .intro div:last-child p:last-child { - margin: 0 0 3em; - } - - header[role=banner] { - width: auto; - } - - h2 { - right: -.3em; - left: auto; - } -} - -@media screen and (max-width: 480px), screen and (max-device-width: 480px) { - .intro { - padding-top: 120px; - } - header[role=banner] { - font-size: 24px; - top: -6.5em; - } -} - -/* xoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo - Background Sizing for main elements - -------------------------------------------------- */ - -@media screen and (min-width: 1201px) { - body, .page-wrapper, .page-wrapper:before, .page-wrapper:after, .intro:after, .supporting div, .supporting footer { - background-size: 100%; /* if wider than bg image, make those suckers grow! */ - } - .summary p:first-child:before { - background-size: auto, 100%; /* match for keyhole */ - } -} -@media screen and (min-width: 580px) and (max-width: 960px) { - body, .page-wrapper, .page-wrapper:before, .page-wrapper:after, .intro:after, .supporting div, .supporting footer { - background-position: 25% top; /* shift image for medium-tight compositions */ - } - .summary p:first-child:before { - background-position: 50% top, 25% top; /* match for keyhole */ - } -} - -@media screen and (max-device-width: 1024px) { - /* - Necessary b/c Mobile Safari does not support fixed background positioning - http://stackoverflow.com/questions/3011226/using-background-attachmentfixed-in-safari-on-the-ipad - */ - .intro:after { - background: none; - } - .intro, .supporting >div, .supporting footer, .page-wrapper { - background: rgba(250,223,154,0.6); - } -} -@media screen and (max-device-width: 600px) { body, .page-wrapper:before { background-size: 800px } } -@media screen and (max-device-width: 400px) { body, .page-wrapper:before { background-size: 600px } } - -/* xoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo - =Supporting Content - - Primarily backgrounds and added content on h3s - - Because we want the bgs to show up on scrolling, - background-position does get a little involved, - with a fair amount of fine-tuning required. - -------------------------------------------------- */ - -.supporting { - position: relative; - z-index: 1; -} - -.supporting h3 { - margin: 0; - padding: 1em 20px; -} -.supporting h3, .supporting footer:before { - -webkit-box-shadow: inset 0 0 18px rgba(70,15,35,0.8); - -moz-box-shadow: inset 0 0 18px rgba(70,15,35,0.8); - box-shadow: inset 0 0 18px rgba(70,15,35,0.8); - - background-image: url('story.gif'); - background-attachment: fixed; - background-repeat: no-repeat; -} -.explanation h3 { background-position: 300px 200px } -.participation h3 { background-position: -600px 200px } -.benefits h3 { background-position: -1200px 250px } -.requirements h3 { background-position: -2200px 250px } -.supporting footer:before { background-position: -2900px 300px } - -/* If a wider screen, shift the images - (footer:before gets special SPECIAL treatment, below) */ -@media screen and (min-width: 1360px) { - .explanation h3 { background-position: 550px 200px } - .participation h3 { background-position: -450px 200px } - .benefits h3 { background-position: -950px 250px } - .requirements h3 { background-position: -1980px 250px } -} - -/* If a taller screen, reveal the images lower */ -@media screen and (min-height: 800px) { - .explanation h3 { background-position: 300px 350px } - .participation h3 { background-position: -600px 350px } - .benefits h3 { background-position: -1200px 350px } - .requirements h3 { background-position: -2200px 350px } -} - -/* If a wider AND taller screen, well... */ -@media screen and (min-width: 1360px) and (min-height: 800px) { - .explanation h3 { background-position: 550px 350px } - .participation h3 { background-position: -450px 350px } - .benefits h3 { background-position: -950px 350px } - .requirements h3 { background-position: -1980px 350px } -} - -/* Target smaller screens ... and the iPad, since mobile safari does not support bg attach: fixed */ -@media screen and (max-width: 580px), screen and (max-device-width: 580px), -screen and (device-width: 768px), screen and (device-width: 1024px) { - .supporting h3, .supporting footer:before { - background-size: 3375px; /* 90% size */ - background-attachment: scroll; - min-height: 4em; - } - .explanation h3 { background-position: 200px -10px } - .participation h3 { background-position: -620px 0 } - .benefits h3 { background-position: -1150px 0 } - .requirements h3 { background-position: -2080px 5px } - .supporting footer:before { background-position: -2700px -20px } -} - -/* target smallest screen setup */ -@media screen and (max-width: 420px) { - .supporting h3, .supporting footer:before { - background-size: 2625px; /* 75% size */ - } - .explanation h3 { background-position: 120px 10px } - .participation h3 { background-position: -500px 20px } - .benefits h3 { background-position: -930px 0 } - .requirements h3 { background-position: -1600px 10px } - .supporting footer:before { background-position: -2100px -15px } -} - -.explanation h3, .benefits h3 { - padding-right: 60%; -} -.explanation h3:before { - content: 'she asked '; - display: block; -} -.supporting .participation h3, .supporting .requirements h3 { - text-align: right; - padding-left: 55%; -} -@media(max-width: 480px) { - .explanation h3, .benefits h3 { - padding-right: 40%; - } - .supporting .participation h3, .supporting .requirements h3 { - padding-left: 40%; - } -} -.participation h3:before { - content: 'he requested her '; - display: block; -} -.benefits h3:before { - content: 'they became friends with '; -} -.requirements h3:before { - content: 'before long, though, '; -} -.requirements h3:after { - content: ' had crept in'; -} -.supporting div { - padding: 0 0 3em; -} - -.supporting p { - margin: 0; - padding: 1em 40px 0; -} - -.supporting p:nth-child(2) { - padding-top: 2em; - background: url('letter-flourish.png') no-repeat .45em .7em; -} - -div[class^=design] a, div[class^=zen] a { - padding: 2px 4px; -} - -.supporting footer { - font-size: 125%; - position: relative; - margin: 0; - padding: 20px; - text-align: center; - border-top: 6em solid #804; - background: #41071e; -} -.supporting footer:before, .supporting footer:after { - display: block; - position: absolute; - color: #fff; - right: 20px; -} - -.supporting footer:before { - top: -6em; - height: 5em; - right: 0; - left: 0; - text-align: right; - padding: 1em 20px 0; - content: '... and all because of a '; -} - -.supporting footer:after { - top: -3.7em; - content: 'fountain kiss '; -} - - -/* xoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo - =Sidebar Styling - - We are using borders liberally instead of padding - so iOS devices can just have an image shine through. - Desktop has background: fixed, but mobile Safari no likey. - - Again, IE<9 ignores styles for HTML5 elements. - .sidebar is one. We will take advantage of that... - -------------------------------------------------- */ - -.sidebar .wrapper div { - padding: 20px; -} - -.wrapper h3 { - padding: 1em 20px; - margin: 0; - background: #5b0a2a url('border.png') no-repeat 50% -120px; -} - -.sidebar h3 { - position: relative; - z-index: 1; - text-align: center; - padding: 30px 20px 1em; - margin: -20px -20px 0; -} - -.wrapper li { - padding: 3px 1em; - font-style: italic; - color: #c57e88; - font-size: .75em; -} -.wrapper a, footer a { - font-size: 1em; -} - -.design-selection li { - padding: 4px 1.5em 4px 1em; - clear: left; - text-align: right; -} - -.design-selection li:hover { - background: rgba(255,255,255,0.2); -} - -.design-name { - float: left; - max-width: 66%; - text-align: left; - margin: -1px -4px -4px 0; - padding-right: .5em; -} -.designer-name { - margin-right: -5px; -} - -/* >> The Magnificent CLEARFIX << */ -.zen-resources ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } -.zen-resources ul { display: inline-block; } -* html .zen-resources ul { height: 1%; } /* Hides from IE-mac \*/ -.zen-resources ul { display: block; } - -.zen-resources li { - width: 42%; - float: left; -} -.zen-resources li:nth-child(2n+1) { - float: right; - text-align: right; -} -.zen-resources li.view-css { - float: none; - width: auto; - position: relative; - text-align: center; - text-indent: 0; - padding-bottom: 9px; -} -.view-css:before, .view-css:after { - content: ' '; - display: block; - position: absolute; - top: .75em; - border-top: 2px solid rgba(136,0,68,0.2); - width: 4em; -} -.view-css:after { right: 1em } - -.zen-resources .view-css a { - padding: 1.5em 0; -} - - -/* Next / Previous / View All */ - -.design-archives ul { - padding: 0 !important; -} -@media screen and (min-width: 240px) { - - .design-archives { - text-align: center; - } - - .design-archives li { - padding: 0; - margin: 0; - } - - .design-archives a { - padding: 1em 0 !important; - display: block; - } - - .design-archives .next, .design-archives .previous { - width: 33%; - padding: 0; - position: absolute; - top: 0; - z-index: 3; - font-size: 1em; - } - - .design-archives .next { - right: 0; - } - - .design-archives .previous { - left: 0; - } - - .design-archives .next a, .design-archives .previous a { - text-indent: 100%; - white-space: nowrap; - text-transform: none; - overflow: hidden; - padding-left: 0; - padding-right: 0; - } - - .design-archives .next a:before, .design-archives .previous a:before { - display: block; - position: absolute; - top: .8em; - text-indent: 0; - } - .design-archives .next a:before { - content: 'Next'; - right: 2.25em; - } - .design-archives .previous a:before { - content: 'Prev.'; - left: 2.25em; - } - - .design-archives .next a:after, .design-archives .previous a:after { - display: block; - content: ' '; - position: absolute; - top: 1.4em; - left: 8px; - margin-top: -2px; - border: 10px solid transparent; - border-width: 8px 12px; - } - .design-archives .next a:after{ - right: 8px; - left: auto; - border-left-color: #804; - } - .design-archives .next a:hover:after { border-left-color: #000 } - .design-archives .previous a:after { border-right-color: #804 } - .design-archives .previous a:hover:after { border-right-color: #000 } - - .design-archives .viewall { - width: 8em; - margin: 0 auto; - } -} - - -.sidebar .design-selection nav, -.sidebar .design-archives ul, -.sidebar .zen-resources ul { - position: relative; - display: block; - margin: 0 -20px -20px; - padding: 1em 0; - background: rgba(250,154,223,0.2); -} - -.design-selection nav ul, -.design-archives ul li, -.zen-resources ul li { - position: relative; - z-index: 2; -} - -.design-selection h3 { - -webkit-box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); - -moz-box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); - box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); -} - -/* xoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxoxo - =Responsive Sidebars - - Depending on screen dimensions, we can place sidebar - elements on the right of the screen. - -------------------------------------------------- */ - -@media screen and (min-width: 960px) and (min-height: 700px) { - .sidebar .wrapper .design-selection { - border: none; - position: fixed; - top: 200px; - right: 0; - padding: 0 2em; - left: 580px; /* abut page-wrapper */ - } - .sidebar .wrapper .design-selection:before { - content: ' '; - position: absolute; - top: -35px; - right: 2em; - width: 310px; - height: 75px; - background: url('border.png') no-repeat 50% 0; - } - .sidebar .wrapper .design-selection:after { - content: ' '; - position: absolute; - bottom: -30px; - right: 2em; - width: 310px; - height: 30px; - background: url('border.png') no-repeat 50% bottom; - } - .sidebar .design-selection h3 { - background: url('heart-and-lips.png') no-repeat 90% -440px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - padding: .5em 19px .2em; - width: 272px; - margin: 0 0 0 auto; - } - .sidebar .design-selection nav { - border: none; - max-width: 310px; - margin: 0 0 0 auto; - background: #fceec6 url('kiss_light.jpg') no-repeat fixed 50% top; - } - .sidebar .design-archives h3 { - -webkit-box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); - -moz-box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); - box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); - } -} - -@media screen and (min-width: 960px) and (min-height: 700px) and (max-height: 739px) { .supporting footer:before { background-position: -2900px 180px } } -@media screen and (min-width: 960px) and (min-height: 740px) and (max-height: 779px) { .supporting footer:before { background-position: -2900px 220px } } -@media screen and (min-width: 960px) and (min-height: 780px) and (max-height: 819px) { .supporting footer:before { background-position: -2900px 260px } } - -@media screen and (min-width: 1360px) and (min-height: 700px) and (max-height: 739px) { .supporting footer:before { background-position: -2730px 180px } } -@media screen and (min-width: 1360px) and (min-height: 740px) and (max-height: 779px) { .supporting footer:before { background-position: -2730px 220px } } -@media screen and (min-width: 1360px) and (min-height: 780px) and (max-height: 819px) { .supporting footer:before { background-position: -2730px 260px } } - -@media screen and (min-width: 960px) and (min-height: 820px) { - .sidebar .wrapper .design-archives { - border: none; - position: fixed; - top: 510px; - right: 0; - padding: 0 2em; - left: 580px; /* abut page-wrapper */ - } - .sidebar .wrapper .design-selection:after { display: none } - .sidebar .wrapper .design-archives:after { - content: ' '; - position: absolute; - bottom: -30px; - right: 2em; - width: 310px; - height: 30px; - background: url('border.png') no-repeat 50% bottom; - } - .sidebar .design-archives h3 { - background: #771139 url('heart-and-lips.png') no-repeat 10% -450px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - padding: .5em 19px .2em; - width: 272px; - margin: 0 0 0 auto; - } - .sidebar .design-archives ul { - max-width: 310px; - margin: 0 0 0 auto; - background: #fceec6 url('kiss_light.jpg') no-repeat fixed 50% top; - } - .sidebar .design-selection nav { - height: 280px; - } - .sidebar .zen-resources h3 { - -webkit-box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); - -moz-box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); - box-shadow: inset 0 12px 18px -6px rgba(0,0,0,0.4); - } - .supporting footer:before { background-position: -2900px 430px } -} -@media screen and (min-width: 960px) and (min-height: 860px) and (max-height: 899px) { .supporting footer:before { background-position: -2900px 470px } } -@media screen and (min-width: 960px) and (min-height: 900px) and (max-height: 939px) { .supporting footer:before { background-position: -2900px 510px } } -@media screen and (min-width: 960px) and (min-height: 940px) and (max-height: 969px) { .supporting footer:before { background-position: -2900px 550px } } - -@media screen and (min-width: 1360px) and (min-height: 820px) { .supporting footer:before { background-position: -2730px 430px } } -@media screen and (min-width: 1360px) and (min-height: 860px) and (max-height: 899px) { .supporting footer:before { background-position: -2730px 470px } } -@media screen and (min-width: 1360px) and (min-height: 900px) and (max-height: 939px) { .supporting footer:before { background-position: -2730px 510px } } -@media screen and (min-width: 1360px) and (min-height: 940px) and (max-height: 969px) { .supporting footer:before { background-position: -2730px 550px } } - - .sidebar .wrapper .zen-resources:after { - content: ' '; - position: absolute; - bottom: -40px; - right: 0; - left: 0; - height: 40px; - background: #5b0a2a url('border.png') no-repeat 50% 4px; - -webkit-box-shadow: inset 0 -12px 18px -6px rgba(0,0,0,0.4); - -moz-box-shadow: inset 0 -12px 18px -6px rgba(0,0,0,0.4); - box-shadow: inset 0 -12px 18px -6px rgba(0,0,0,0.4); - } -@media screen and (min-width: 960px) and (min-height: 960px) { - .sidebar .wrapper .zen-resources { - border: none; - position: fixed; - top: 610px; - right: 0; - padding: 0 2em; - left: 580px; /* abut page-wrapper */ - } - .sidebar .wrapper .design-archives:after { display: none } - .sidebar .wrapper .zen-resources:after { - bottom: -30px; - right: 2em; - left: auto; - width: 310px; - height: 30px; - background: url('border.png') no-repeat 50% bottom; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } - .sidebar .zen-resources h3 { - background: #771139 url('heart-and-lips.png') no-repeat 80% -460px; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - padding: .5em 19px .2em; - width: 272px; - margin: 0 0 0 auto; - } - .sidebar .zen-resources ul { - border: none; - max-width: 310px; - margin: 0 0 0 auto; - background: #fceec6 url('kiss_light.jpg') no-repeat fixed 50% top; - } - .sidebar .design-archives ul { - height: 80px; - } - - .supporting footer { - padding-bottom: 2em; - background-image: url('border.png'); - background-repeat: no-repeat; - background-position: 50% 50px; - } - .supporting footer:before { background-position: -2900px bottom } -} -@media screen and (min-width: 1360px) and (min-height: 960px) { .supporting footer:before { background-position: -2730px bottom } } - -.design-selection li, .wrapper>div a { - -webkit-transition: all 0.2s ease-out; - -moz-transition: all 0.2s ease-out; - -ms-transition: all 0.2s ease-out; - -o-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} -.wrapper>div a { - text-shadow: 2px 2px 0 rgba(255,255,255,0.51); -} -.wrapper>div a:hover { - opacity: 1; -} - -@media screen and (min-width: 1201px) { - .sidebar .design-selection nav, .sidebar .design-archives ul, .sidebar .zen-resources ul { - background-size: 100%; /* if wider than bg image, make those suckers grow! */ - } -.intro { - -webkit-transition: none; - -moz-transition: none; - -ms-transition: none; - -o-transition: none; - transition: none; -} -} -@media screen and (min-width: 1360px) { - .page-wrapper { - max-width: 660px; - margin-left: 160px; - } - .explanation h3, .benefits h3 { - padding-left: 40px; - padding-right: 70%; - } - .supporting .participation h3, .supporting .requirements h3, .supporting footer:before { - padding-left: 65%; - padding-right: 40px; - } -} -@media screen and (min-width: 1360px) and (max-height: 819px) { - .intro { - margin-left: 50px; - margin-right: 50px; - } -} -@media screen and (min-width: 1360px) and (min-height: 820px) { - .intro { - padding: 84px 150px 96px; - } - .preamble { - font-size: 1em; - line-height: 1.5; - } - .preamble h3, .supporting h3 { - font-size: 1.3125em; - } - .preamble h3 { - padding-bottom: 72px; - margin-bottom: 36px; - } - .supporting footer:after { - padding-right: 20px; - } - .supporting p { - line-height: 1.5; - padding-left: 60px; - padding-right: 60px; - } - .supporting p:nth-child(2) { - padding-top: 3em; - background-position: 1.65em 1.7em; - } -} -@media screen and (min-width: 1360px) { - header[role=banner], .summary { - right: 50%; - margin-right: -672px; - } - h2 { - right: 10px; - } - #zen-summary p { - padding-left: 30px; - padding-right: 30px; - } - } -@media screen and (min-width: 1360px) and (min-height: 700px) { - .sidebar .wrapper .design-selection { - right: 50%; - margin-right: -672px; - } - .sidebar .design-selection h3 { - width: 314px; - } - .sidebar .wrapper .design-selection nav { - max-width: 352px; - } - .sidebar .wrapper .design-selection:before, - .sidebar .wrapper .design-selection:after { - width: 352px !important; - } -} -@media screen and (min-width: 1360px) and (min-height: 820px) { - .sidebar .wrapper .design-archives { - right: 50%; - margin-right: -672px; - } - .sidebar .design-archives h3 { width: 314px } - .sidebar .wrapper .design-archives ul { max-width: 352px } - .sidebar .wrapper .design-archives:after { width: 352px !important } -} -@media screen and (min-width: 1360px) and (min-height: 960px) { - .sidebar .wrapper .zen-resources { - right: 50%; - margin-right: -672px; - } - .sidebar .zen-resources h3 { width: 314px } - .sidebar .wrapper .zen-resources ul { max-width: 352px } - .sidebar .wrapper .zen-resources:after { width: 352px !important } -} - -/* -fin- */ \ No newline at end of file diff --git a/src/data/designs/217/metadata.json b/src/data/designs/217/metadata.json deleted file mode 100644 index 028c606ee41a68dacbc7844fdfff52cce4ef71ff..0000000000000000000000000000000000000000 --- a/src/data/designs/217/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "217", - "url": "https://www.csszengarden.com/217", - "css_url": "https://www.csszengarden.com/217/217.css", - "description": "The design embraces a minimalist and modern aesthetic with a refreshing color palette of soft blues, creams, and reds, highlighted by a structured layout that organizes content effectively into distinct sections. The typography is bold and clear, drawing attention to key headings while maintaining readability. The use of contrasting colors for different sections adds a dynamic feel to the design, and the sidebar provides easy navigation, enhancing user experience.", - "categories": [ - "Modern", - "Minimalist", - "Educational", - "Structured", - "Interactive" - ], - "visual_characteristics": [ - "Bold typography", - "Contrasting colors", - "Organized layout", - "Clean lines", - "Effective use of white space" - ] -} \ No newline at end of file diff --git a/src/data/designs/217/screenshot_desktop.png b/src/data/designs/217/screenshot_desktop.png deleted file mode 100644 index bbc42b537ea96fe42b81bd822a1839ba168ee9b3..0000000000000000000000000000000000000000 --- a/src/data/designs/217/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:1e3c53e650bd5b5870ff3e53c26d98baa058686ba5d69f24545a71944791e702 -size 990269 diff --git a/src/data/designs/217/screenshot_mobile.png b/src/data/designs/217/screenshot_mobile.png deleted file mode 100644 index bcc22e0de34cbf6bf2d0cdae8796af2accaf3dce..0000000000000000000000000000000000000000 --- a/src/data/designs/217/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:406d6c19b3b4b82fd04e6b0c2bb530b1c9dc7208b867c076f08c1f6eba567517 -size 414028 diff --git a/src/data/designs/217/style.css b/src/data/designs/217/style.css deleted file mode 100644 index dec5727ab10bbb9f2a1386c530d75bf7dfd74dcd..0000000000000000000000000000000000000000 --- a/src/data/designs/217/style.css +++ /dev/null @@ -1,207 +0,0 @@ -/* css Zen Garden submission 217 - 'Screen Filler', by Elliot Jay Stocks, http://elliotjaystocks.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ - - /* TYPEKIT_KIT_ID: lxq7gid */ - - /* - ================================================ - CSS Zen Garden theme for Typekit 01 - ================================================ - Handcrafted by Elliot Jay Stocks - http://elliotjaystocks.com/ - Last updated on 18.11.2013 - ================================================ - 01 Sensible Defaults - 02 Typography - 03 Layout - 04 Media Queries - ================================================ - */ - - /* ---------------------------------------------------------------------------------------------------------- - 01 Sensible defaults ---------------------------------------------------------------------------------------- - ---------------------------------------------------------------------------------------------------------- */ - - * { margin:0; padding:0; /* So sue me */ } - - div, - article, - section, - header, - footer, - nav, - figure, - li { position:relative; } /* For absolutely positioning elements within containers */ - .group:after { display: block; height: 0; font-size: 0; content: "."; clear: both; visibility: hidden; } /* For clearing */ - * { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /* Apply a natural box layout model to all elements â see http://paulirish.com/2012/box-sizing-border-box-ftw */ - - ::-moz-selection { background:#333; color:#fff; } - ::selection { background:#333; color:#fff; } - - /* ---------------------------------------------------------------------------------------------------------- - 02 Typography ----------------------------------------------------------------------------------------------- - ---------------------------------------------------------------------------------------------------------- */ - /* - - 14 / 16 = 0.875em (14px equivalent) - 16 / 16 = 1em (16px equivalent) - 18 / 16 = 1.125em (18px equivalent) - 21 / 16 = 1.3125em (21px equivalent) - 24 / 16 = 1.5em (24px equivalent) - 30 / 16 = 1.875em (30px equivalent) - 36 / 16 = 2.25em (36px equivalent) - 48 / 16 = 3em (48px equivalent) - 60 / 16 = 3.75em (60px equivalent) - 72 / 16 = 4.5em (72px equivalent) - 96 / 16 = 6em (96px equivalent) - - */ - - /* Rendering */ - body, - input, - textarea { color:#333; /*-webkit-font-smoothing:antialiased;*/ } - - /* Families */ - body { font-family:"tablet-gothic", verdana, arial, sans-serif; /* Weights from Typekit: 300, 400 */ } - h2, - h3 { font-family:"tablet-gothic-condensed", "arial narrow", arial, verdana, sans-serif; /* Weights from Typekit: 200, 900 */ } - - /* Headings */ - h1, - h2, - h3, - h4, - h5, - h6 { font-weight:normal; } - h1 { background:#ea2e49; color:#fff; display:inline-block; margin-bottom:1em; padding:0.5em 1em; } - h2 { color:#fff; font-weight:900; /* Heavy */ font-size:6em; letter-spacing:1px; line-height:1em; } - h3 { font-size:2.25em; font-weight:200; /* Thin */ letter-spacing:1px; line-height:1em; padding:0.5em 0 0.25em 0; } - - /* Links */ - a { border-bottom:1px solid rgba(0,0,0,0.2); color:#333; text-decoration:none; -moz-transition:border-color 0.2s ease-in-out; -ms-transition:border-color 0.2s ease-in-out; -o-transition:border-color 0.2s ease-in-out; -webkit-transition:border-color 0.2s ease-in-out; transition:border-color 0.2s ease-in-out; } - a:hover { border-color:#ea2e49; } - section.intro div.summary p a, - div.explanation p a, - div.participation p a { color:#fff; } - div.participation p a:hover { border-color:#fff; } - - /* Paragraph styles */ - p, - li { font-size:1em; font-weight:400; /* Regular */ line-height:1.5em; padding:0.5em 0; } - h1, - section.intro div.summary p, - div.requirements p:last-child { font-weight:300; letter-spacing:2px; text-transform:uppercase; } - section.intro div.summary p:last-child, - div.requirements p:last-child { border-top:1px solid #ea2e49; margin-top:1em; padding-top:1.5em; } - - /* Other bits & bobs */ - em, - strong { font-style:normal; font-weight:400; } - - /* ---------------------------------------------------------------------------------------------------------- - 03 Layout --------------------------------------------------------------------------------------------------- - ---------------------------------------------------------------------------------------------------------- */ - - html { background:#daede2; padding:5%; } - body { background:#77c4d3; } - div.page-wrapper { z-index:2; } - - section.intro { padding:5%; } - section.intro div.summary { color:#fff; padding:15% 0; } - section.intro div.preamble { background:rgba(255,255,255,0.9); color:#333; margin-left:-30%; padding:5% 5% 5% 30%; } - div.main { padding:5%; } - aside.sidebar { background:rgba(246,247,146,0.9); padding:5%; } - aside.sidebar ul { padding:0.5em 0 2em 0; } - aside.sidebar ul li { color:rgba(0,0,0,0.4); list-style:none; margin:0; padding:0 0 0.825em 0; } - footer { background:rgba(246,247,146,0.9); clear:both; color:#fff; padding:1em 5%; width:50%; } - footer a { margin-right:0.5em; } - - div.explanation { color:#fff; padding:5%; } - div.participation { background:rgba(234,46,73,0.9); color:#fff; padding:5%; } - div.benefits { background:rgba(255,255,255,0.9); margin-top:10%; padding:5%; } - div.requirements { background:rgba(255,255,255,0.9); padding:5%; } - - /* ---------------------------------------------------------------------------------------------------------- - 04 Media queries (using a mobile-first approach) ------------------------------------------------------------ - ---------------------------------------------------------------------------------------------------------- */ - - /* 1 and up */ - @media screen and (min-width:1px) { - - body { font-size:85%; } - - } - - - /* 550 and up */ - @media screen and (min-width:550px) { - - h2 { font-size:8em; } - section.intro { width:66.6%; } - aside.sidebar { position:absolute; right:0; top:2.5%; width:32.75%; } - div.extra1 { background:rgba(51,55,69,0.9); bottom:0; right:0; position:fixed; top:0; width:30%; z-index:1; } - div.explanation { float:left; width:50%; } - div.participation { float:left; width:49%; } - div.benefits { float:left; } - div.requirements { float:left; } - } - - /* 650 and up */ - @media screen and (min-width:650px) { - - div.benefits { margin-top:12%; width:30%; } - div.requirements { width:69%; } - - } - - /* 700 and up */ - @media screen and (min-width:700px) { - - body { font-size:90%; } - - } - - /* 800 and up */ - @media screen and (min-width:800px) { - - body { font-size:100%; } - - } - - /* 900 and up */ - @media screen and (min-width:900px) { - - body { font-size:110%; } - - } - - /* 1500 and up */ - @media screen and (min-width:1500px) { - - body { font-size:125%; } - - } - - /* 1800 and up */ - @media screen and (min-width:1800px) { - - body { font-size:150%; } - - } - - /* 2100 and up */ - @media screen and (min-width:2100px) { - - body { font-size:175%; } - - } - - - /* 2500 and up */ - @media screen and (min-width:2500px) { - - body { font-size:200%; } - - } - diff --git a/src/data/designs/218/metadata.json b/src/data/designs/218/metadata.json deleted file mode 100644 index bcf206167f8a7fd76a833dc172f0dd79fb0c7b9a..0000000000000000000000000000000000000000 --- a/src/data/designs/218/metadata.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "id": "218", - "url": "https://www.csszengarden.com/218", - "css_url": "https://www.csszengarden.com/218/218.css", - "description": "This design of the CSS Zen Garden showcases a classic, minimal layout with a vintage aesthetic. It utilizes a consistent color palette of black, white, and muted earth tones, complemented by serif fonts that create an elegant and timeless feel. The use of imagery, such as the vintage-style bottle and illustrations, adds charm and character, enhancing the theme of enlightenment and exploration. The typography is well-organized, with bold headings and distinct sections making the content easy to navigate.", - "categories": [ - "minimalist", - "vintage", - "typography-focused", - "educational", - "illustrative" - ], - "visual_characteristics": [ - "muted color palette", - "serif typography", - "vintage illustrations", - "clean layout", - "elegant aesthetic" - ] -} \ No newline at end of file diff --git a/src/data/designs/218/screenshot_desktop.png b/src/data/designs/218/screenshot_desktop.png deleted file mode 100644 index a81e361c7d36f36d75c83bb6c02a8cb91b251eb7..0000000000000000000000000000000000000000 --- a/src/data/designs/218/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d1e1c86e7ed68c9e8a3c570770c26c460195d93b430d0df087a8c6b0bc7cd3f2 -size 2211582 diff --git a/src/data/designs/218/screenshot_mobile.png b/src/data/designs/218/screenshot_mobile.png deleted file mode 100644 index fc706d7ac911b7efa1c68e39da38a5c18948e555..0000000000000000000000000000000000000000 --- a/src/data/designs/218/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b8e40b76783eaa4e8ba729b5880dcaba14fb084d1d736d661326cdf1bf3e6a99 -size 809464 diff --git a/src/data/designs/218/style.css b/src/data/designs/218/style.css deleted file mode 100644 index b3d50391d55783756ae3016757ff5156ba1e7adc..0000000000000000000000000000000000000000 --- a/src/data/designs/218/style.css +++ /dev/null @@ -1,1242 +0,0 @@ -/* css Zen Garden submission 218 - 'Apothecary', by Trent Walton, http: //www.trentwalton.com/ */ -/* css released under Creative Commons License - http: //creativecommons.org/licenses/by-nc-sa/1.0/ */ - -/* TYPEKIT_KIT_ID: xtk3kmd */ - -html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,a,abbr,acronym,em,img,ol,ul,li {border: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;margin: 0;padding: 0;} - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -html { - overflow-y: auto; - background: #faf3e6; - background-size: 22em; -} - -body { - font: 112.5%/1.3 "ltc-bodoni-175",serif; - color: #3f3d3a; - overflow: hidden; -} - -body:before, body:after { - content: ''; - display: block; - width: 0; - height: 0; -} - -body:before { - border-left: 45px solid #faf3e6; - border-right: 45px solid #faf3e6; - border-top: 45px solid transparent; - background: #f7644d url('img-halftone.png') repeat; - margin: 0 auto -45px; -} - -body:after { - border-left: 7em solid #faf3e6; - border-right: 7em solid #faf3e6; - border-bottom: 10em solid transparent; - background: #ffb14d url('img-halftone.png') repeat; - margin: -10em auto 0; -} - -.page-wrapper { - width: 100%; - margin: 0.25em auto; - max-width: 1800px; - position: relative; - padding: 0 4%; -} - -.page-wrapper:before { - content: ""; - height: 20px; - background: - url('img-lg-horiz-border.png') repeat-x 0 -2px; - background-size: 40em; - display: block; -} - -.page-wrapper:after { - content: ""; - display: table; - clear: both; -} - -h1, h2, h3, h4, h5 { - text-align: center; - color: #272625; - text-transform: uppercase; -} - -a { - color: #e5452c; -} - -a:hover, a:focus { - color: #3f3d3a; -} - -p { - margin-bottom: 0.15em; -} - -/* -------INTRO SECTION------ */ -.intro { - clear: both; - padding-top: 2em; -} - -.intro p { - margin: 0 auto 1em; -} - - -.summary p:nth-child(2) { - font-style: italic; -} - -.summary a { - display: inline-block; -} - -.intro h1 { - font-size: 3em; - line-height: 1; - font-weight: 400; - font-style: italic; - letter-spacing: 0.05em; - text-transform: capitalize; -} - -.intro h1:before { - content: "Dr. Shea\2019s Miraculous"; - font-family: "refrigerator-deluxe",sans-serif; - font-style: normal; - text-transform: uppercase; - display: block; - font-size: 1.12rem; - letter-spacing: 0.1rem; - font-weight: 700; - background: url('img-sprite.png') no-repeat center 0.25em; - background-size: 25rem; - margin-bottom: 1.3em; -} - -.intro h2 { - font-family: "french-clarendon-ornamented",sans-serif; - font-size: 2.25em; - font-weight: 400; - padding-top: 4.5em; - margin-top: 0.1em; - margin-bottom: 0em; - letter-spacing: 0.05rem; - line-height: 1.275em; - background: url('img-bottle.png') no-repeat center 0.75em; - background-size: 1.45em; -} - -.preamble { - margin: 0 auto 1em; -} - -.preamble p { - margin-bottom: 0.15em; -} - -.preamble h3 { - margin: 0.5em auto 0.55em; - padding: 0.5em 0 0.55em; - font-family: "grecian-light-face",sans-serif; - font-size: 1.5em; - line-height: 1; - background: - url('img-lg-horiz-border.png') repeat-x top right, - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 13em; -} - -.preamble p:first-line { - text-transform: uppercase; -} - -.preamble p:nth-child(1n+3) { - text-indent: 1.5em; -} - -.preamble p:nth-child(1n+3):first-line { - text-transform: none; -} - - -/* -------SIDEBAR ASIDE------- */ -.design-selection h3 { - font-family: "refrigerator-deluxe",sans-serif; - font-size: 2em; - letter-spacing: 0.05em; - padding: 0.5em 0; - margin: 0.35em auto 0.75em; - background: - url('img-lg-horiz-border.png') repeat-x top right, - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 15em; - line-height: 1; -} - -.design-selection { - margin: 0 auto; -} - -.design-selection ul { - list-style-type: none; - padding: 0; - overflow-x: hidden; -} - -.design-selection li { - color: transparent; - margin-bottom: 0.28em; - clear: both; -} - -.design-selection li a { - text-decoration: none; - color: #3f3d3a; -} - -.sidebar a:hover, sidebar a:focus { - color: #e5452c; -} - -.design-name { - font-style: italic; - background: #faf3e6; - padding-right: 0.25em; -} - -.design-name:after { - float: left; - width: 0; - white-space: nowrap; - color: #3f3d3a; - content: "....................................................................................................................." -} - -.designer-name { - float: right; - font-family: "refrigerator-deluxe",sans-serif; - font-size: 1em; - text-transform: uppercase; - background: #faf3e6; - padding-left: 0.25em; -} - -h3.archives, h3.resources { - display: none; -} - -.design-archives { - margin: 0.8em auto; - position: relative; -} - -.design-archives ul { - list-style-type: none; - background: - url('img-lg-horiz-border.png') repeat-x top right, - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 36em; - padding: 1.25em 0; -} - -.design-archives .viewall { - text-align: center; - text-transform: uppercase; - font-style: italic; - letter-spacing: 0.02em; - font-size: 1.125em; -} - -.design-archives .previous a, .design-archives .next a { - position: absolute; - overflow: hidden; - width: 2em; - height: 1.25em; - color: #3f3d3a; - text-decoration: none; - white-space: nowrap; - text-indent: -9999px; - -webkit-transition: margin ease-out 0.1s; - -moz-transition: margin ease-out 0.1s; - -o-transition: margin ease-out 0.1s; - transition: margin ease-out 0.1s; -} - -.design-archives .next a:hover, .design-archives .next a:focus { - margin-right: -4px; -} - -.design-archives .previous a:hover, .design-archives .previous a:focus { - margin-left: -4px; -} - -.viewall a, .zen-resources a { - color: #3f3d3a; - text-decoration: none; -} - -.design-archives .next a { - right: 0; - background: url('img-sprite.png') no-repeat bottom right; - background-size: 20em; -} - -.design-archives .previous a { - left: 0; - background: url('img-sprite.png') no-repeat bottom left; - background-size: 20em; -} - -.sidebar .wrapper { - background: - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 40em; - margin: 0 2px -1px; -} - -.zen-resources { - background: url('img-pointer-guy-sm.png') no-repeat 28% 95%; - background-size: 5em; - overflow: hidden; -} - -.zen-resources:after, .zen-resources ul:after { - width: 9em; - height: 9em; - content: ''; - margin: 0 auto; - display: block; - z-index: -1; - position: relative; -} - -.zen-resources:after { - margin-top: 9em; - background: #ffb14d url('img-halftone.png') repeat; - -webkit-transform: rotate(45deg) translateY(5.25em) translateX(2.75em); - -moz-transform: rotate(45deg) translateY(5.25em) translateX(2.75em); - -ms-transform: rotate(45deg) translateY(5.25em) translateX(2.75em); - -o-transform: rotate(45deg) translateY(5.25em) translateX(2.75em); - transform: rotate(45deg) translateY(5.25em) translateX(2.75em); -} - -.zen-resources ul:after { - margin-top: 3.5em; - background: #bad1c2 url('img-halftone.png') repeat; - -webkit-transform: rotate(45deg) translateY(0.2em) translateX(3em); - -moz-transform: rotate(45deg) translateY(0.2em) translateX(3em); - -ms-transform: rotate(45deg) translateY(0.2em) translateX(3em); - -o-transform: rotate(45deg) translateY(0.2em) translateX(3em); - transform: rotate(45deg) translateY(0.2em) translateX(3em); - margin-bottom: -21.5em; -} - -.zen-resources ul { - list-style-type: none; - margin: 0 auto; - font-family: "refrigerator-deluxe",sans-serif; - text-transform: uppercase; - text-align: center; -} - -.zen-resources li { - display: block; - text-align: center; - line-height: 1.6; -} - - -/* -------EXPLANATION------- */ -.explanation { - padding: 1.75em 0 0; - margin: 0 auto; - position: relative; - background: #faf3e6; -} - -.explanation p:first-line, -.participation p:first-line, -.benefits p:first-line { - text-transform: uppercase; -} - -.explanation p:nth-child(1n+3):first-line, -.participation p:nth-child(1n+3):first-line, -.benefits p:nth-child(1n+3):first-line { - text-transform: none; -} - -.explanation h3 { - font-size: 2.15em; - padding-bottom: 1.75rem; - font-style: italic; - letter-spacing: 0.03em; - text-align: center; - width: 100%; -} - -.explanation p:nth-child(1n+3) { - text-indent: 1.5em; -} - -.participation { - padding: 1.5em 0 0.5em; - background: url('img-lg-horiz-border.png') repeat-x top left; - background-size: 40em; - margin: 3em 2px 0; -} - -.participation h3 { - font-family: "refrigerator-deluxe",sans-serif; - font-size: 2.5em; - letter-spacing: 0.025em; - padding-bottom: 1rem; - background: url('img-sprite.png') no-repeat center center; - background-size: 9em; -} - -.participation p { - margin: 0 auto; -} - -.participation p:nth-child(2) { - background: - url('img-lg-horiz-border.png') repeat-x top left; - background-size: 44em; - padding-top: 2em; -} - -.participation p:nth-child(1n+3) { - text-indent: 1.5em; -} - -.benefits { - padding: 1em 0 20em; - margin: 0 2px; - background: url('img-lg-horiz-border.png') repeat-x bottom center; - background-size: 45em; - position: relative; -} - -.benefits p:last-child { - background: - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 44em; - padding-bottom: 1em; -} - -.benefits h3 { - margin: 0em auto 0.5em; - font-family: "grecian-light-face",sans-serif; - font-size: 2.65em; - background: - url('img-lg-horiz-border.png') repeat-x top center, - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 12em; - padding: 0.25em 0; -} - -.benefits p { - margin: 0 auto; -} - -.benefits:before { - content: 'Apply Liberally'; - font-size: 3em; - position: absolute; - bottom: 3.5rem; - text-align: center; - width: 100%; - font-family: "french-clarendon-ornamented",sans-serif; - text-transform: uppercase; - padding-bottom: 14.35rem; - letter-spacing: 0.03em; -} - -.benefits:after { - content: 'And Regularly!'; - font-size: 3em; - position: absolute; - bottom: -13rem; - text-align: center; - width: 100%; - font-family: "french-clarendon-ornamented",sans-serif; - text-transform: uppercase; - padding-bottom: 14.35rem; - letter-spacing: 0.03em; -} - -.benefits p:after { - content: ''; - display: block; - width: 100%; - height: 26em; - margin: 0 auto -26em; - padding-bottom: 2em; - background: url('img-look-right-sm.png') no-repeat center 7.75rem; - background-size: 8.5rem; -} - -.requirements h3 { - font-family: "refrigerator-deluxe",sans-serif; - font-size: 2.75em; - letter-spacing: 0.025em; - margin-bottom: 0.725em; - position: absolute; - top: 0.1em; - text-align: center; - display: block; - padding-bottom: 1rem; - width: 100%; - background: - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 16em; -} - -.requirements { - padding: 6.5em 0 2em; - margin: 0 auto 4.15em; - position: relative; - background: - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 46em; -} - -.requirements p:nth-child(1n+3) { - text-indent: 1.5em; -} - -.requirements p:last-child { - font-style: italic; - position: absolute; - left: 0; - bottom: -2em; - margin-bottom: -2.75em; - text-align: center; - width: 100%; - text-indent: 0; -} - - -footer:after { - content: ''; - display: block; - width: 100%; - height: 15em; - margin: 0 auto -13.5em; - background: url('img-lookup.png') no-repeat center center; - background-size: 10em; -} - - -footer { - background: - url('img-lg-horiz-border.png') repeat-x bottom left; - background-size: 40em; - margin: 5.5em 1px -1px; - text-align: center; - font-family: "refrigerator-deluxe",sans-serif; - font-size: 1.15em; - text-transform: uppercase; - text-align: center; - padding-bottom: 8.5em; -} - -footer a { - text-decoration: none; - background: #272625; - padding: 0.15rem 0.5rem; - color: #faf3e6; - margin: 0 0.15em; - letter-spacing: 0.05em; -} - -footer a:hover, footer a:focus { - background-color: #e5452c; -} - - -@media (min-width:600px) { - body { - font-size: 1.12em; - line-height: 1.6; - } - - .intro p, - .preamble, - .design-selection, - .design-selection ul, - .design-archives, - .zen-resources ul, - .participation p, - .benefits h3, - .benefits p { - max-width: 30rem; - } - - - .explanation, - .requirements { - max-width: 30rem; - } - - body:before { - border-left: 89px solid #faf3e6; - border-right: 89px solid #faf3e6; - border-top: 89px solid transparent; - margin: 0 auto -5em; - } - - body:after { - border-left: 11em solid #faf3e6; - border-right: 11em solid #faf3e6; - border-bottom: 14.5em solid transparent; - margin: -14.5em auto 0; - position:relative; - z-index:-2; - } - - .page-wrapper { - width: 99%; - background: - url('img-lg-vert-border.png') repeat-y top left, - url('img-lg-vert-border.png') repeat-y right 100px; - background-size: 0.75em; - margin: 0.5em auto; - padding: 0 2px; - } - - .page-wrapper:before { - background-size: 50em; -} - - .intro { - padding-top: 7em; - } - - .intro h1 { - font-size: 5.25em; - line-height: 1; - max-width: 94%; - margin: 0 auto; - } - - .intro h1:before { - font-size: 0.25em; - letter-spacing: 0.175rem; - font-weight: 700; - background: url('img-sprite.png') no-repeat center 0.2em; - background-size: 38rem; - margin-bottom: 1.2em; - } - - .intro h2 { - font-size: 3.75em; - padding-top: 4.25em; - margin-top: 0.85em; - margin-bottom: 0em; - line-height: 1.275em; - background: url('img-bottle.png') no-repeat center top; - background-size: 1.65em; - } - - .summary p:nth-child(2) { - text-align: center; - } - - .preamble h3 { - font-size: 2.5em; - } - - .preamble h3:first-line { - font-family: "refrigerator-deluxe",sans-serif; - font-size: 1.1em; - display: inline-block; - margin: 0 auto; - line-height: 1.25; - letter-spacing: 0.025em; - } - - .design-selection h3 { - font-size: 2.6em; - letter-spacing: 0.05em; - padding: 0.75em 0; - } - - .design-archives .viewall { - font-size: 1.8em; - } - - .design-archives .previous a, .design-archives .next a { - width: 4em; - height: 2.4em - } - - .design-archives .next a { - background: url('img-sprite.png') no-repeat bottom right; - background-size: 35em; - } - - .design-archives .previous a { - background: url('img-sprite.png') no-repeat bottom left; - background-size: 35em; - } - - - .zen-resources:after, .zen-resources ul:after { - width: 24em; - height: 24em; - } - - .zen-resources { - background: url('img-pointer-guy.png') no-repeat 28% 95%; - } - - .zen-resources:after { - margin-top: 20em; - background: #ffb14d url('img-halftone.png') repeat; - -webkit-transform: rotate(45deg) translateY(11em) translateX(8.5em); - -moz-transform: rotate(45deg) translateY(11em) translateX(8.5em); - -ms-transform: rotate(45deg) translateY(11em) translateX(8.5em); - -o-transform: rotate(45deg) translateY(11em) translateX(8.5em); - transform: rotate(45deg) translateY(11em) translateX(8.5em); - } - - .zen-resources ul:after { - margin-top: 3em; - background: #bad1c2 url('img-halftone.png') repeat; - -webkit-transform: rotate(45deg) translateY(4.75em) translateX(9em); - -moz-transform: rotate(45deg) translateY(4.75em) translateX(9em); - -ms-transform: rotate(45deg) translateY(4.75em) translateX(9em); - -o-transform: rotate(45deg) translateY(4.75em) translateX(9em); - transform: rotate(45deg) translateY(4.75em) translateX(9em); - margin-bottom: -52.5em; - } - - .zen-resources { - background: url('img-pointer-guy.png') no-repeat 43.8% bottom; - background-size: 13em; - } - - .zen-resources ul { - font-size: 0.885em; - } - - .zen-resources a { - font-size: 1.25em; - } - - .explanation { - padding: 10.75em 0 0.5em; - width: 84%; - margin: 1px auto 0; - position: relative; - background: #faf3e6; - } - - .explanation h3 { - font-size: 3em; - line-height: 1; - font-style: italic; - letter-spacing: 0.03em; - position: absolute; - top: 1em; - text-align: center; - display: block; - width: 100%; - } - - .explanation p { - line-height: 1.475; - } - - .participation { - background-size: 48em; - } - - .participation h3 { - font-size: 3.25em; - background-size: 8em; - } - - .participation p:nth-child(2) { - padding-top: 2em; - } - - .participation p:nth-child(1n+3) { - text-indent: 1.5em; - } - - .benefits { - padding: 1em 0 24em; - } - - .benefits h3 { - font-size: 3em; - } - - .benefits:before { - bottom: 5.5rem; - } - - .benefits:after { - bottom: -13rem; - } - - .benefits p:after { - content: ''; - display: block; - width: 100%; - height: 25em; - margin: 0 auto -26em; - padding-bottom: 2em; - background: url('img-look-right.png') no-repeat center center; - background-size: 32%; - } - - .requirements { - padding: 11.5em 0 2.5em; - width: 84%; - margin: 0 auto 4.15em; - } - - .requirements h3 { - font-size: 4.5em; - margin-bottom: 0.725em; - padding-bottom: 1.5rem; - background-size: 10em; - } - - footer { - padding-bottom: 14em; - } - - footer:after { - background: url('img-lookup.png') no-repeat center bottom; - background-size: 15em; - } - - .participation h3:before, .participation h3:after { - position: absolute; - font-size: 1.125rem; - color: #3f3d3a; - letter-spacing: 0; - font-family: "ltc-bodoni-175",serif; - font-style: italic; - text-transform: lowercase; - } - - .participation h3:after { - content: '5.23 fl oz'; - top: 1.1em; - right: 1.6em; - } - - .participation h3:before { - content: 'no. 218'; - top: 1.1em; - left: 1.6em; - } -} - - -@media (min-width:800px) { - body { - font-size: 1.188em; - } - - .intro { - padding-top: 8em; - } - - .intro p, - .preamble, - .design-selection, - .design-selection ul, - .design-archives, - .zen-resources ul, - .participation p, - .benefits h3, - .benefits p { - max-width: 36rem; - } - - - .explanation, - .requirements { - max-width: 36rem; - } - - body:before { - border-left: 115px solid #faf3e6; - border-right: 115px solid #faf3e6; - border-top: 115px solid transparent; - margin: 0 auto -6em; - } - - .intro h1 { - font-size: 5.65em; - } - - .intro h1:before { - font-size: 2rem; - letter-spacing: 0.175rem; - font-weight: 700; - background: url('img-sprite.png') no-repeat center 0.25em; - background-size: 42rem; - margin-bottom: 1em; - } - - .intro h2 { - padding-top: 4.5em; - margin-top: 0.7em; - margin-bottom: 0em; - background-size: 1.75em; - } - - .preamble h3 { - font-size: 3em; - } - - - .zen-resources li { - display: inline-block; - text-align: left; - } - - .zen-resources li a { - margin: 0 0.75em; - } - - .zen-resources li:first-child a { - margin-left: 0; - } - - .zen-resources li:last-child a { - margin-right: 0; - } - - .zen-resources a { - font-size: 1em; - } - - .explanation { - padding: 13.75em 0 0.5em; - width: 84%; - margin: 1px auto 0; - position: relative; - background: #faf3e6; - -webkit-column-count: 2; - -webkit-column-gap: 2em; - -moz-column-count: 2; - -moz-column-gap: 2em; - -o-column-count: 2; - -o-column-gap: 2em; - column-count: 2; - column-gap: 2em; - } - - .explanation h3 { - font-size: 3.9em; - font-style: italic; - text-align: center; - display: block; - width: 100%; - } - - .participation h3 { - font-size: 5.25em; - background-size: 9em; - } - - .benefits:before { - bottom: 6.5rem; - } - - .benefits:after { - bottom: -12.5rem; - } - - .benefits p:after { - content: ''; - display: block; - width: 100%; - height: 26em; - margin: 0 auto -30.5em; - padding-bottom: 6em; - background: url('img-look-right.png') no-repeat center 40%; - background-size: 28%; - } - - .benefits h3 { - font-size: 3.75em; - } - - .requirements { - padding: 11.5em 0 2.5em; - width: 84%; - margin: 0 auto 4.15em; - background-size: 68rem; - -webkit-column-count: 2; - -webkit-column-gap: 2em; - -moz-column-count: 2; - -moz-column-gap: 2em; - -o-column-count: 2; - -o-column-gap: 2em; - column-count: 2; - column-gap: 2em; - line-height: 1.475; - } - - .requirements h3 { - font-size: 5.5em; - margin-bottom: 0.725em; - padding-bottom: 1.5rem; - background-size: 8em; - } - - .zen-github:after, .zen-validate-html:after { - font-size: 1.12rem; - } -} - -@media (min-width:1050px) { - body { - font-size: 1.25em; - } - - .intro { - padding-top: 9em; - } - - .intro p, - .preamble, - .design-selection, - .design-selection ul, - .design-archives, - .zen-resources ul, - .participation p, - .benefits h3, - .benefits p { - max-width: 40rem; - } - - body:before { - border-left: 140px solid #faf3e6; - border-right: 140px solid #faf3e6; - border-top: 140px solid transparent; - margin: 0 auto -7em; - } - - .intro h1 { - font-size: 6em; - } - - .preamble h3:first-child { - font-size: 3em; - } - - .explanation h3 { - top: 1em; - } - - .benefits:before, .benefits:after { - font-size: 3.7em; - top: 64.25%; - height: 0; - padding: 0 3%; - width: auto; - } - - .benefits:before { - right: 63%; - } - - .benefits:after { - left: 63%; - } - - .benefits p:after { - content: ''; - display: block; - width: 100%; - height: 26em; - margin: 0 auto -26em; - padding-bottom: 2em; - background: url('img-look-right.png') no-repeat center center; - background-size: 42%; - } - - .explanation, - .requirements { - max-width: 60em; - } - - .explanation { - padding: 9em 0 0.5em; - } - - .explanation h3 { - font-size: 3.3em; - } - - .requirements { - -webkit-column-count: 3; - -moz-column-count: 3; - -o-column-count: 3; - column-count: 3; - } - - .requirements p:last-child { - margin-bottom: -1.2rem; - } - - footer { - margin-top: 0; - } -} - - -@media (min-width:1200px) { - body { - font-size: 1.315em; - } - - .intro { - padding-top: 10.5em; - } - - body:before { - border-left: 168px solid #faf3e6; - border-right: 168px solid #faf3e6; - border-top: 168px solid transparent; - margin: 0 auto -8em; - } - - .intro h1 { - font-size: 7em; - } - - .intro h1:before { - background: url('img-sprite.png') no-repeat center 0.3em; - background-size: 56rem; - font-size: 2.75rem; - } - - .intro h2 { - padding-top: 5em; - background-size: 1.85em; - } - - .benefits:before { - right: 60%; - } - - .benefits:after { - left: 60%; - } - - .explanation { - padding: 10.5em 0 0.5em; - } - - .explanation h3 { - font-size: 3.7em; - } -} - -@media (min-width:1300px) { - body { - font-size: 1.375em; - } - - .intro { - padding-top: 13.5em; - } - - body:before { - border-left: 198px solid #faf3e6; - border-right: 198px solid #faf3e6; - border-top: 198px solid transparent; - margin: 0 auto -9em; - } - - .intro h1 { - font-size: 7.35em; - line-height: 1.4; - } - - .intro h1:before { - background: url('img-sprite.png') no-repeat center 0.5em; - background-size: 58rem; - margin-bottom: 0; - } - - .benefits:before { - right: 58.5%; - } - - .benefits:after { - left: 58.5%; - } -} - - -/* ------- OMG FLEXBOX ------ */ -.page-wrapper { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - -moz-box-orient: vertical; - -webkit-box-orient: vertical; - -ms-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.intro { - -webkit-box-ordinal-group: 1; - -moz-box-ordinal-group: 1; - -ms-flex-order: 1; - -webkit-order: 1; - order: 1; - align-self: flex-start; - width: 100%; -} - -.main { - -webkit-box-ordinal-group: 3; - -moz-box-ordinal-group: 3; - -ms-flex-order: 3; - -webkit-order: 3; - order: 3; - align-self: flex-start; - width: 100%; -} - -.sidebar { - -webkit-box-ordinal-group: 2; - -moz-box-ordinal-group: 2; - -ms-flex-order: 2; - -webkit-order: 2; - order: 2; -} diff --git a/src/data/designs/220/metadata.json b/src/data/designs/220/metadata.json deleted file mode 100644 index 8101d29e8150701cd75afd20aff031b72a570824..0000000000000000000000000000000000000000 --- a/src/data/designs/220/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "220", - "author": "Dave Shea", - "url": "https://www.csszengarden.com/220", - "css_url": "https://www.csszengarden.com/220/220.css", - "description": "The design is minimalistic with a focus on typography, subtle background elements, and a neutral color palette. It emphasizes a clean and organized layout, suitable for showcasing content-heavy pages such as articles or educational materials.", - "categories": [ - "Minimalism", - "Typography-focused" - ], - "visual_characteristics": [ - "Neutral color palette", - "Clean layout", - "Subtle typography", - "Organized content" - ], - "responsive_design": "4. **Mobile Adaptation**:\n - Elements are stacked for vertical scrolling\n - Maintains readability with adjusted font sizes\n - Navigation is simplified and intuitive" -} \ No newline at end of file diff --git a/src/data/designs/220/screenshot_desktop.png b/src/data/designs/220/screenshot_desktop.png deleted file mode 100644 index 0dfc6001a6d256a3d04d4ce71631c218e75e29ac..0000000000000000000000000000000000000000 --- a/src/data/designs/220/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:56b00f807d74e5e1d058393dc4c2c4ee5bbff172987921dfb93f81b9b84f4e81 -size 1011121 diff --git a/src/data/designs/220/screenshot_mobile.png b/src/data/designs/220/screenshot_mobile.png deleted file mode 100644 index 8aa64b30560d34493b051fe91e78f1cca6783d80..0000000000000000000000000000000000000000 --- a/src/data/designs/220/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:c53710797a76ce450772656e48f701bb6a4d0f0f732c8ceb8c6e26e88d41935b -size 715109 diff --git a/src/data/designs/220/style.css b/src/data/designs/220/style.css deleted file mode 100644 index a101b3896f2571a652da4c763b3cabe8fb31bfd8..0000000000000000000000000000000000000000 --- a/src/data/designs/220/style.css +++ /dev/null @@ -1,438 +0,0 @@ -/* css Zen Garden submission 220 - 'Garments', by Dan Mall, http://www.danielmall.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ - -/* -************************************************* - -CSS ZEN GARDEN -General Screen Styles - -Created by the epic SuperFriendly team. -http://superfriend.ly/ - -************************************************* -*/ - -/* TYPEKIT_KIT_ID: qoj3gsc */ - -/*------------------------------------------- - Base --------------------------------------------*/ -* { margin: 0; padding: 0; } -html { font-size: 62.5%; } /* for rems */ -body { font-family: Helvetica, Arial, sans-serif; color: #333; background: #e8ecf0 url(i/denim2.png) no-repeat 50% 350px; } - - -/* block level */ - -h1 { font: bold 4.2rem Helvetica, Arial, sans-serif; margin: 0 0 0.5em; } -h2 { font: bold 1.8rem Helvetica, Arial, sans-serif; margin: 0 0 1em; } -h3 { font: bold 1.5rem Helvetica, Arial, sans-serif; margin: 0 0 1em; } -h4, h5, h6 { font: bold 1.2rem Helvetica, Arial, sans-serif; margin: 0 0 1em; } - -.wf-active body, -.wf-active h1, -.wf-active h2, -.wf-active h3, -.wf-active h4, -.wf-active h5, -.wf-active h6 { font-family: "effra"; } - -p, ul, dl, ol, table { font-size: 16px; margin: 0 0 1.5em; } -.wf-active p { font-weight: 300; } - -form { margin: 0 0 1.5em; } - -/* inline */ - -label { font-size: 1.6rem; } -input, select, textarea { } -input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { } -input.empty::-webkit-input-placeholder, textarea.empty::-webkit-input-placeholder { color: red; } -input.empty:-moz-placeholder, textarea.empty:-moz-placeholder { color: red; } -.error { color: red; } - -table { } - td { padding: 0.25em 1em; border-top: 1px solid #aaa; } - -em { font-style: italic; } -strong { font-weight: bold; } - -mark { background: none; font-style: normal; } - -video { width: 100%; height: auto; } - -a { - text-decoration: none; color: #a28351; position: relative; - transition: all 0.25s linear; - -moz-transition: all 0.25s linear; --webkit-transition: all 0.25s linear; - -o-transition: all 0.25s linear; -} - -a:after { - content: ""; display: block; background: #a28351; height: 2px; width: 100%; position: absolute; bottom: -0.2em; left: 0; opacity: 0; - transition: all 0.25s linear; - -moz-transition: all 0.25s linear; --webkit-transition: all 0.25s linear; - -o-transition: all 0.25s linear; -} - -a:hover, a:focus { color: #000; } -a:hover:after, a:focus:after { opacity: 1; bottom: 0; } - -img { display: block; margin: 0 10px 10px 0; max-width: 100%; } - -a img { border: none; } - -i { font-style: normal; } -b { font-weight: normal; } - -abbr, abbr[title], acronym { font-size: 75%; letter-spacing: 0.2em; text-transform: uppercase; border: none; } - -code { font: 1.4rem/1 Consolas, 'Courier New', Courier, monospace; color: #999; } - -sub, sup { line-height: 0; } - -::selection { background: #d5d9dc; color: #333; } -::-moz-selection { background: #d5d9dc; color: #333; } - - -/*------------------------------------------- - Global --------------------------------------------*/ - -/* Phark Image Replacement - http://phark.typepad.com/phark/2003/08/accessible_imag.html */ -.phark { display: block; text-indent: -9999px; background-position: 0 0; background-repeat: no-repeat; background-color: transparent; } - -/* Trimming Outline in Firefox - http://snook.ca/archives/html_and_css/trimming_long_o */ -/*\*/ .phark-link { overflow: hidden; } /**/ - -/* Easy Clearing - http://www.positioniseverything.net/easyclearing.html */ -.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } - -.offscreen { position: absolute; left: -9999px; display: block; } -.onscreen { left: 0; } - -.hide { display: none; } - -.no-bullets { list-style: none; } - -.bulleted { list-style: disc; } - -.uppercase { text-transform: uppercase; } - -.rwd-break { display: block; } - -.kellum { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; } - -/*------------------------------------------- - Modules --------------------------------------------*/ -.page-wrapper { width: 90%; margin: 0 auto; } - -.main h3, .preamble h3, .select { visibility: hidden; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.1em; color: #263358; } -.wf-active .main h3, .wf-active .preamble h3 { font-weight: 900; } - -.main h3:after, .preamble h3:after, .select:after { visibility: visible; display: block; } - -.main p, .preamble p { font-size: 2rem; } -.wf-active .main p, .wf-active .preamble p { line-height: 1.4; } - -.next a, -.previous a, -.viewall a, -.zen-resources a, -.summary p:nth-child(2) a -{ - transition-property: none; - -moz-transition-property: none; --webkit-transition-property: none; - -o-transition-property: none; -} - -.next a:after, -.previous a:after, -.viewall a:after, -.zen-resources a:after, -.summary p:nth-child(2) a:after -{ opacity: 0; } - - - -/*------------------------------------------- - Banner --------------------------------------------*/ -[role="banner"] h1 { padding: 1em 0 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 3.5rem; font-weight: 900; color: #182e4f; visibility: hidden; } -[role="banner"] h1:before { content: "CSS Zen Garments"; visibility: visible; display: block; } -[role="banner"] h1:after { content: "Made Locally"; visibility: visible; display: block; color: #aaa; letter-spacing: 0.5em; font-size: 1.4rem; font-weight: normal; margin: 0.5em 0 3em; color: rgba(24, 46, 79, 0.4); } - -[role="banner"] h2 { visibility: hidden; display: none; text-transform: uppercase; font-weight: 400; color: rgba(41, 78, 134, 0.5); } -[role="banner"] h2:after { content: "Impeccable Quality"; visibility: visible; display: block; } - - - -/*------------------------------------------- - Preamble --------------------------------------------*/ -.summary p { text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.8rem; line-height: 1.6; } - - -/*------------------------------------------- - Preamble --------------------------------------------*/ -.preamble { background: transparent url(i/sep.png) no-repeat 50% 0; } - .preamble h3:after { visibility: visible; content: "A Fashion-Forward Future"; } - - -/*------------------------------------------- - Explanation --------------------------------------------*/ -.explanation h3:after { content: "See Yourself in a Different Way"; } - - -/*------------------------------------------- - Participation --------------------------------------------*/ -.participation h3:after { content: "Get Into a Brand New Pair"; } - - -/*------------------------------------------- - Benefits --------------------------------------------*/ -.benefits h3:after { content: "Look Great\2026 and Feel Great Too!"; } - - -/*------------------------------------------- - Requirements --------------------------------------------*/ -.requirements h3:after { content: "âOne Size Fitsâ All Be Damned!"; text-indent: -0.5em; } - - - -/*------------------------------------------- - Design Selection --------------------------------------------*/ -.design-selection { margin: 3em 0 0; } - .design-selection ul { list-style: none; width: 94%; margin: 0 auto; } - .design-selection ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } - .design-selection li { float: left; width: 50%; font-size: 1.2rem; margin: 0 0 1em; color: #aaa; } - .design-selection li:nth-child(odd) { width: 47%; padding-right: 3%; clear: left; } - - .design-name { display: block; font-size: 1.4rem; font-weight: bold; margin: 0 0 0.24em; text-transform: uppercase; letter-spacing: 0.1em; position: relative; } - .design-name:after { background: none; opacity: 0; } - .design-name:hover { font-style: italic; } - - .designer-name { color: #7989a3; } - .designer-name:after, footer a:after { height: 1px; } - - -.select:after { content: "Washes & Styles"; font-size: 1.8rem; text-align: center; width: 7em; margin: 0 auto 2em; background: transparent url(i/waves.png) no-repeat 50% 0; padding: 2em 0 0; color: #182e4f; visibility: visible; } - -.archives, .resources { position: absolute; left: -9999px; } - -.design-archives ul { list-style: none; margin: 1em 0 0; width: 100%; text-align: center; } - .design-archives li { display: inline-block; position: relative; } - .design-archives a { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; } - -.next { margin-right: 3em; } - .next a { background: transparent url(s/czg.svg) no-repeat 10px -56px; width: 43px; height: 37px; } - .next a:hover, .next a:focus { background-position: 10px -138px; } - -.previous { margin-right: 3em; } - .previous a { background: transparent url(s/czg.svg) no-repeat 10px -220px; width: 43px; height: 37px; } - .previous a:hover, .previous a:focus { background-position: 10px -302px; } - -.viewall { margin-left: 1em; } - .viewall a { background: transparent url(s/czg.svg) no-repeat -56px -55px; width: 39px; height: 39px; } - .viewall a:hover, .viewall a:focus { background-position: -56px -137px; } - -footer { font-size: 1.3rem; } - footer a { margin-left: 1em; } - footer a:first-child { margin-left: 0; } - -.zen-resources ul { list-style: none; margin: 2em 0 4em; text-align: center; } -.zen-resources ul:before { content: ""; height: 4px; width: 80px; background: #d5d9dc; display: block; text-align: center; margin: 0 auto 2em; } - .zen-resources li { margin: 0 0 1em 3em; display: inline-block; } - .zen-resources li:first-child { margin-left: 0; } - .zen-resources a { display: inline-block; text-indent: 100%; white-space: nowrap; overflow: hidden; background: transparent url(s/czg.svg) no-repeat 0 0; width: 60px; height: 60px; } - - .view-css a { background-position: -502px 12px; } - .view-css a:hover, .view-css a:focus { background-position: -502px -78px; } - - .css-resources a { background-position: -150px -194px; } - .css-resources a:hover, .css-resources a:focus { background-position: -150px -286px; } - - .zen-faq a { background-position: -265px -192px; } - .zen-faq a:hover, .zen-faq a:focus { background-position: -265px -284px; } - - .zen-submit a { background-position: -502px -194px; } - .zen-submit a:hover, .zen-submit a:focus { background-position: -502px -286px; } - - .zen-translations a { background-position: -380px -193px; } - .zen-translations a:hover, .zen-translations a:focus { background-position: -380px -285px; } - - -@media screen and (min-width: 700px) { - - body { background-attachment: fixed; background-position: 90% 80%; } - - .intro:before { content: ""; display: block; width: 105px; height: 30px; position: fixed; top: 154px; left: 3%; background: transparent url(s/czg.svg) no-repeat -184px -99px; } - - [role="article"], [role="banner"], footer { padding: 0 30% 10em 10%; text-align: right; position: relative; } - [role="article"] h3, [role="banner"] h2 { position: absolute; top: -0.75em; left: 75%; width: 10em; text-align: left; font-size: 1.5rem; letter-spacing: 0; } - [role="article"] h3:after { position: absolute; top: 0; } - - [role="banner"] { padding-top: 200px; padding-bottom: 3em; } - - [role="banner"] h1 { font-size: 4.8rem; letter-spacing: 0; line-height: 0.8; } - [role="banner"] h1:after { position: absolute; top: 15.7em; right: 30%; } - - [role="banner"] h2 { display: block; top: 8.1em; width: 3em; left: 75.5%; font-size: 1.9rem; line-height: 1; } - [role="banner"] h2:before { visibility: visible; content: "Est. 2003"; display: block; position: fixed; top: -0.1em; bottom: 0; left: -0.5em; right: 0; margin: auto; /*right: 25%;*/ font-weight: 900; font-size: 50rem; color: rgba(0, 0, 0, 0.15); width: 100%; height: 2em; line-height: 1; transform: rotate(-90deg); -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Safari and Chrome */ -webkit-mask-image: url(i/denim-mask2.png); -o-mask-image: url(i/denim-mask2.png); -moz-mask-image: url(i/denim-mask2.png); mask-image: url(i/denim-mask2.png); } - - .summary p:nth-child(2) { background: yellow; position: relative; visibility: hidden; top: 2em; font-size: 1.4rem; } - - .summary p:nth-child(2):before { content: ""; display: block; visibility: visible; position: absolute; right: 21em; top: -0.25em; background: transparent url(s/czg.svg) no-repeat -159px -1px; width: 6em; height: 30px; } - - .summary p:nth-child(2):after { content: ""; display: block; visibility: visible; position: absolute; right: 14em; top: -0.25em; background: transparent url(s/czg.svg) no-repeat -277px 0; width: 6em; height: 30px; } - - .summary p:nth-child(2) a { visibility: visible; background: transparent url(s/czg.svg) no-repeat -376px -93px; width: 6em; height: 25px; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; position: absolute; top: 0; right: 7em; } - .summary p:nth-child(2) a:hover, .summary p:nth-child(2) a:focus { background-position: -396px -3px; text-indent: 0; background: none; } - - .summary p:nth-child(2) a[href*="css"] { background-position: -472px -94px; right: 0; } - .summary p:nth-child(2) a[href*="css"]:hover, .summary p:nth-child(2) a[href*="css"]:focus { background-position: -512px -4px; } - - .preamble { padding-top: 10em; } - .preamble h3 { top: 5.9em; } - - .design-selection li { width: 23%; margin-bottom: 3em; padding-right: 2%; } - .design-selection li:nth-child(odd) { width: 23%; clear: none; padding-right: 2%; } - - .next { margin-right: 2em; margin-left: -0.4em; } - .viewall { margin-left: 0; } - - footer { padding-bottom: 3em; margin-top: -5em; } -} - - -@media screen and (min-width: 1130px) { - - [role="article"], [role="banner"] { padding-left: 25%; } - - .design-selection { position: absolute; left: 5%; top: 30em; } - .design-selection ul { margin: 0; width: 100%; } - .design-selection li { float: none; width: 100% !important; padding: 0 !important; margin-bottom: 2em;} - .select:after { text-align: left; background-position: 0 bottom; padding: 0 0 2em; margin: 0 0 2em; } - - .design-archives { position: absolute; left: 5%; top: 95em; } - -} - - -@media screen and (min-width: 1130px) and (min-height: 1037px) { - .design-selection, .design-archives { position: fixed; } - -} - - - -/*------------------------------------------- - Animations --------------------------------------------*/ -@-webkit-keyframes FADEY { - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -.intro { - -webkit-animation-name: FADEY; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: ease-in-out; - -webkit-animation-iteration-count: 1; -} - - -[role="article"] { - -webkit-opacity: 0; - -webkit-animation-name: FADEY; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: ease-in-out; - -webkit-animation-delay: 0.5s; - -webkit-animation-fill-mode: forwards; - -webkit-animation-iteration-count: 1; -} - - -.design-selection, .design-archives { - -webkit-opacity: 0; - -webkit-animation-name: FADEY; - -webkit-animation-duration: 1s; - -webkit-animation-timing-function: ease-in-out; - -webkit-animation-delay: 1s; - -webkit-animation-fill-mode: forwards; - -webkit-animation-iteration-count: 1; -} - - -/*------------------------------------------- - IE, i.e. Internet Explorer (heh) --------------------------------------------*/ - -@media screen and (min-width:0\0) { /* IE9 and IE10 rule sets go here */ - - .main h3, .preamble h3, .select { visibility: visible; } - [role="banner"] h1 { visibility: visible; width: auto; display: block; } - - .main h3:after, .preamble h3:after, .select:after { display: none; } - [role="banner"] h1:before { display: none; } - -} - - -/* IE8 and below */ -.main h3, .preamble h3, .select { visibility: visible\9; font-size: 20px\9; } -.main h3:after, .preamble h3:after, .select:after { display: none\9; } - -.page-wrapper { width: 800px\9; } -.preamble { padding-top: 50px\9; margin-top: 50px\9; } - -h1 { font-size: 48px\9; text-transform: uppercase\9; margin: 0\9; padding-top: 30px\9;} -h2 { font-size: 20px\9; } - -.next a, .previous a, .viewall a, .zen-resources a { background-image: url(i/czg.png)\9; } - - - -/* IE7 & below */ -.next a, -.previous a, -.viewall a, -.zen-resources a { - *background: none; - *width: auto; - *height: auto; - *display: block; - *text-indent: 0; - *white-space: normal; - *overflow: visible; -} - -.design-archives { - *position: static; - *margin-top: 30px; -} - -.design-archives li { - *display: inline; - *margin-right: 20px; -} - -.next { - *margin-right: 2em; - *margin-left: -0.4em; -} - -.viewall { - *margin-left: 0; -} diff --git a/src/data/designs/221/metadata.json b/src/data/designs/221/metadata.json deleted file mode 100644 index 20522de8ed7f150271a288569b66fd32ad26743f..0000000000000000000000000000000000000000 --- a/src/data/designs/221/metadata.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "id": "221", - "author": "Dave Shea", - "url": "https://www.csszengarden.com/221", - "css_url": "https://www.csszengarden.com/221/221.css", - "description": "The visual design features a bold, colorful layout with a mix of geometric shapes and high-contrast text blocks. It uses a playful color palette of purples, blues, oranges, and cream tones. The design is structured to guide the viewer's eye vertically and horizontally across sections with clear typography. It appears modern and suited for showcasing CSS design capabilities in a playful yet professional manner.", - "categories": [ - "Modern", - "Playful" - ], - "visual_characteristics": [ - "Bold colors", - "Geometric shapes", - "High-contrast typography", - "Vertical and horizontal layout" - ], - "responsive_design": "4. **Mobile Adaptation**: The design adapts well to mobile by stacking elements vertically for better readability. It maintains color consistency and legibility, ensuring navigation and content remain accessible on smaller screens." -} \ No newline at end of file diff --git a/src/data/designs/221/screenshot_desktop.png b/src/data/designs/221/screenshot_desktop.png deleted file mode 100644 index b17f00801af272865b7962f9b0d15a7acf5dde12..0000000000000000000000000000000000000000 --- a/src/data/designs/221/screenshot_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:b9d478265cc6d7564b0aef537269a2aca2babffe463f790858f032f2158c0eda -size 1697375 diff --git a/src/data/designs/221/screenshot_mobile.png b/src/data/designs/221/screenshot_mobile.png deleted file mode 100644 index 6b203863bd4456c0ce412aace1c93a99441afb53..0000000000000000000000000000000000000000 --- a/src/data/designs/221/screenshot_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:11a61af6ef299a18cb9fe50939c329548bf6e7ebac39bd2bc41675f496dca8aa -size 674717 diff --git a/src/data/designs/221/style.css b/src/data/designs/221/style.css deleted file mode 100644 index 8feedcf6f3a447a43c6039b0b7c4a9ccd6319226..0000000000000000000000000000000000000000 --- a/src/data/designs/221/style.css +++ /dev/null @@ -1,980 +0,0 @@ -/* css Zen Garden submission 221 - 'Mid Century Modern', by Andrew Lohman, http://www.andrewlohman.com/ */ -/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ - -/* TYPEKIT_KIT_ID: vzq4ipz */ - -/* -========================================================================== -Reset -========================================================================== -*/ - -/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ -article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;} -audio,canvas,video {display: inline-block;} -audio:not([controls]) {display: none;height: 0;} -[hidden] {display: none;} -html {font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;} -body {margin: 0;} -a:focus {outline: thin dotted;} -a:active,a:hover {outline: 0;} -h1 {font-size: 2em;margin: 0.67em 0;} -abbr[title] {border-bottom: 1px dotted;} -b,strong {font-weight: bold;} -dfn {font-style: italic;} -hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;} -mark {background: #ff0;color: #000;} -code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em;} -pre {white-space: pre-wrap;} -q {quotes: "\201C" "\201D" "\2018" "\2019";} -small {font-size: 80%;} -sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;} -sup {top: -0.5em;} -sub {bottom: -0.25em;} -img {border: 0;} -svg:not(:root) {overflow: hidden;} -figure {margin: 0;} -fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;} -legend {border: 0;padding: 0;} -button,input,select,textarea {font-family: inherit;font-size: 100%;margin: 0;} -button,input {line-height: normal;} -button,select {text-transform: none;} -button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;} -button[disabled],html input[disabled] {cursor: default;} -input[type="checkbox"],input[type="radio"] {box-sizing: border-box;padding: 0;} -input[type="search"] {-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;} -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} -button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;} -textarea {overflow: auto;vertical-align: top;} -table {border-collapse: collapse;border-spacing: 0;} - -/* -========================================================================== -Some globals -========================================================================== -*/ -abbr[title], -acronym[title] { - border-bottom-width: 0; -} -html, -body { - font-family: "ff-meta-web-pro", sans-serif; - text-rendering: optimizeLegibility; - font-size: 100%; - line-height: 26px; - background: #f6efe5; - background-size: 60%; - color: #0d2c40; -} -a { - color: #0d2c40; - text-decoration: none; - border-bottom: 1px solid #0d2c40; - -webkit-transition: all 0.2s ease-out; - -moz-transition: all 0.2s ease-out; - -o-transition: all 0.2s ease-out; - -ms-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} -a:hover { - color: rgba(0, 0, 0, 0.4); - border-bottom: 1px solid rgba(0, 0, 0, 0.4); -} -/* -========================================================================== -Page wrapper -========================================================================== -*/ -.page-wrapper { - position: relative; - width: 100%; - max-width: 120em; - margin: 0 auto; - padding: 0; - overflow: hidden; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -/* -========================================================================== -Intro -========================================================================== -*/ -.intro { - overflow: hidden; -} -.intro header { - position: relative; - background: #c879b2; - overflow: hidden; - width: 40%; - height: 50em; - float: left; - -webkit-transition: all 0.4s ease; - -moz-transition: all 0.4s ease; - -o-transition: all 0.4s ease; - -ms-transition: all 0.4s ease; - transition: all 0.4s ease; -} - @media (max-width: 70em) { - .intro header { - background: #f15a30; - width: 100%; - height: 27em; - } - } - @media (max-width: 53em) { - .intro header { - height: 20em; - } - } -.intro header h1 { - position: absolute; - color: #ffffff; - font-size: 100%; - line-height: 2em; - top: 4.2em; - left: -3em; - width: auto; - margin: 0; - padding: 1em; - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.intro header h2 { - position: relative; - background: #0d2c40 url(icon-star.svg) no-repeat left bottom; - background-size: 101%; - float: right; - color: #ffffff; - font-size: 250%; - line-height: 1.25em; - width: 50%; - height: 20.019em; - margin: 0 0 0 0; - padding: 6em 0.5em 0 0.5em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .intro header h2 { - background: #0d2c40 url(icon-star.svg) no-repeat left bottom; - background-size: 49%; - width: 66.666%; - height: 11em; - padding: 1em 0.5em 0 0.5em; - } - } - @media (max-width: 53em) { - .intro header h2 { - background: #0d2c40 url(icon-star.svg) no-repeat left bottom; - background-size: 49%; - font-size: 200%; - width: 66.666%; - height: 10em; - padding: 1em 0.5em 0 0.5em; - } - } -.intro .summary { - font-size: 100%; - color: #ffffff; - width: 60%; - float: left; - background: #c879b2 url(icons-3-pack.svg); - background-repeat: no-repeat; - background-position: center bottom; - background-size: 101%; - height: 50em; - margin: 0; - padding: 16.3em 2em 10em 2em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .intro .summary { - width: 100%; - height: auto; - padding: 2em 1em 37% 1em; - } - } -.intro .summary p { - padding: 0 40% 2em 0 ; - margin: 0; -} - @media (max-width: 70em) { - .intro .summary p { - padding: 0 0 1em 35%; - } - } - @media (max-width: 53em) { - .intro .summary p { - padding: 0 0 1em 0; - } - } -.intro .summary a { - color: #ffffff; - text-decoration: none; - border-bottom: 1px solid #ffffff; -} -.intro .summary a:hover { - color: rgba(0, 0, 0, 0.4); - border-bottom: 1px solid rgba(0, 0, 0, 0.4); -} -.intro .preamble { - position: relative; - float: left; - width: 60.1%; - margin: 0 0 0 20%; - padding: 8em 0.5em 32em 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .intro .preamble { - width: 100%; - margin: 0 0 0 0; - padding: 2em 1em 28em 1em; - } - } - @media (max-width: 53em) { - .intro .preamble { - overflow: hidden; - width: 100%; - margin: 0; - padding: 0 1em; - } - } -.intro .preamble h3 { - font-size: 150%; - margin-right: 35%; -} - @media (max-width: 53em) { - .intro .preamble h3 { - margin-right: 0; - } - } -.intro .preamble p { - margin-right: 35%; -} - @media (max-width: 53em) { - .intro .preamble p { - margin-right: 0; - } - } -.intro .preamble p:last-child { - position: absolute; - z-index: 2; - color: #ffffff; - background: rgba(0, 188, 217, 0.8); - width: 33.650%; - top: -1em; - right: 0; - margin-right: 0; - padding: 10em 1em 20em 1em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .intro .preamble p:last-child { - background: rgba(239, 54, 5, 0.8); - width: 33.250%; - padding: 6em 1em 10em 1em; - } - } - @media (max-width: 53em) { - .intro .preamble p:last-child { - color: #0d2c40; - background: transparent; - position: relative; - top: 0; - width: 100%; - padding: 0; - } - } -/* -========================================================================== -Main -========================================================================== -*/ -.main { - background: url(mid-century-1.jpg) no-repeat center center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - z-index: 1; - top: -25em; - margin-bottom: 1em; - padding: 20em 0; - position: relative; -} - @media (max-width: 70em) { - .main { - top: -25em; - } - } - @media (max-width: 53em) { - .main { - background: #f6efe5; - top: 0; - padding: 0; - } - } -.main footer { - display: block; - position: absolute; - left: 1em; - bottom: 1em; - width: 20%; - padding: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 53em) { - .main footer { - display: inline; - position: relative; - top: 1em; - left: 0; - bottom: 0; - width: 100%; - padding: 0 0 0 0.5em; - } - } -.main footer a { - margin: 0 0.25em; - display: block; - border-bottom: 0px solid transparent; -} - @media (max-width: 53em) { - .main footer a { - display: inline; - } - } -.main .explanation { - background: #0d2c40 url(icon-half.svg); - background-repeat: no-repeat; - background-position: right center; - background-size: 40%; - position: relative; - color: #ffffff; - width: 40%; - margin: 0; - padding: 2em 1em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .main .explanation { - width: 66.666%; - margin: 0; - } - } - @media (max-width: 53em) { - .main .explanation { - background: #0d2c40; - width: 100%; - margin: 0; - padding: 1em; - } - } -.main .explanation h3 { - position: absolute; - color: #ffffff; - font-size: 150%; - line-height: 2em; - top: 6em; - left: -4.5em; - margin: 0; - padding: 1em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -} - @media (max-width: 53em) { - .main .explanation h3 { - position: relative; - font-size: 150%; - top: 0; - left: 0; - padding: 0; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); - } - } -.main .explanation p { - width: 60%; - padding-left: 15%; -} - @media (max-width: 70em) { - .main .explanation p { - width: 66%; - padding-left: 15%; - } - } - @media (max-width: 53em) { - .main .explanation p { - width: 100%; - padding-left: 0; - } - } -.main .participation { - background: #f6efe5; - position: absolute; - right: 40%; - z-index: 2; - margin-top: 14em; - width: 40%; - padding: 1em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .main .participation { - margin-top: 20em; - width: 66.866%; - right: 33.200%; - } - } - @media (max-width: 53em) { - .main .participation { - position: relative; - margin-top: 0; - width: 100%; - right: 0; - } - } -.main .participation h3 { - font-size: 150%; -} -.main .benefits { - background: rgba(0, 188, 217, 0.8) url(icon-circles.svg) no-repeat left top; - background-size: 100%; - position: absolute; - right: 20%; - z-index: 2; - margin-top: 3em; - margin-left: 0; - width: 20%; - padding: 22em 1em 25em 1em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .main .benefits { - right: 0; - width: 33.250%; - margin-top: 12em; - padding: 21em 1em 24em 1em; - } - } - @media (max-width: 53em) { - .main .benefits { - background: rgba(0, 188, 217, 0.8) url(icon-circles.svg) no-repeat center top; - background-size: 33%; - position: relative; - right: 0; - width: 100%; - margin-top: 0; - padding: 11em 1em 1em 1em; - } - } - @media (max-width: 33em) { - .main .benefits { - background: rgba(0, 188, 217, 0.8) url(icon-circles.svg) no-repeat center top; - background-size: 33%; - position: relative; - right: 0; - width: 100%; - margin-top: 0; - padding: 7em 1em 1em 1em; - } - } -.main .benefits h3 { - font-size: 150%; -} -.main .requirements { - position: absolute; - -moz-column-count: 2; - -moz-column-gap: 2em; - -webkit-column-count: 2; - -webkit-column-gap: 2em; - right: 0; - z-index: 2; - margin: 60em 0 0 0; - width: 60%; - padding: 1em 0 0 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .main .requirements { - position: absolute; - margin: 65em 0 0 0; - width: 75%; - -moz-column-count: 1; - -moz-column-gap: 1em; - -webkit-column-count: 1; - -webkit-column-gap: 1em; - } - } - @media (max-width: 53em) { - .main .requirements { - position: relative; - width: 100%; - margin: 0; - padding: 1em; - } - } -.main .requirements h3 { - position: absolute; - z-index: 3; - font-size: 300%; - line-height: 2em; - top: 0em; - left: -6em; - margin: 0; - padding: 1em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -} - @media (max-width: 53em) { - .main .requirements h3 { - position: relative; - font-size: 150%; - left: 0em; - padding: 0; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); - } - } -.main .requirements p { - margin: 0 1em 1em 1em; -} - @media (max-width: 53em) { - .main .requirements p { - margin: 0 0 1em 0; - } - } -.main .requirements::before { - content: ""; - position: absolute; - top: 0; - left: -60%; - background: url(mid-century-2.jpg) no-repeat left center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - z-index: 2; - width: 60%; - height: 40em; - margin-top: 0; - padding: 1em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .main .requirements::before { - left: -66.666%; - width: 66.6666%; - height: 45em; - } - } -/* -========================================================================== -Sidebar -========================================================================== -*/ -.sidebar { - margin-top: 55em; - padding-top: 20em; - background: #c879b2; - overflow: hidden; -} - @media (max-width: 70em) { - .sidebar { - margin-top: 65em; - } - } - @media (max-width: 53em) { - .sidebar { - margin-top: 2em; - padding-top: 2em; - } - } -.sidebar .design-selection h3 { - color: #ffffff; - font-size: 150%; - line-height: 1em; - width: 20%; - float: left; - padding: 5em 1em; - text-align: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .sidebar .design-selection h3 { - width: 100%; - padding: 0 1em; - text-align: right; - } - } - @media (max-width: 53em) { - .sidebar .design-selection h3 { - text-align: left; - } - } -.sidebar .design-selection nav { - width: 80%; - margin-left: 20%; - padding: 1em 0 2em 0; -} - @media (max-width: 70em) { - .sidebar .design-selection nav { - width: 100%; - margin-left: 0; - } - } -.sidebar .design-selection nav ul { - padding: 0; -} -.sidebar .design-selection nav ul li { - display: inline-block; - list-style: none; - color: #ffffff; - width: 25%; - float: left; - padding: 10em 1em 2em 1em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - text-align: left; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li { - width: 100%; - padding: 5em 1em 2em 1em; - } - } -.sidebar .design-selection nav ul li a { - color: #ffffff; - text-decoration: none; - display: block; - border-bottom: 0 solid transparent; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li a { - display: inline; - } - } -.sidebar .design-selection nav ul li a:hover { - color: rgba(0, 0, 0, 0.4); - border-bottom: 0 solid transparent; -} -.sidebar .design-selection nav ul li:nth-child(1) { - background: #0d2c40; - margin-top: -29em; - padding: 39em 1em 2em 1em; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(1) { - margin-top: 0; - padding: 5em 1em 2em 1em; - } - } -.sidebar .design-selection nav ul li:nth-child(2) { - background: #f15a30; -} -.sidebar .design-selection nav ul li:nth-child(3) { - background: #31c5da; -} -.sidebar .design-selection nav ul li:nth-child(4) { - background: #f15a30; -} -.sidebar .design-selection nav ul li:nth-child(5) { - background: #0d2c40; -} -.sidebar .design-selection nav ul li:nth-child(6) { - background: #f15a30; -} -.sidebar .design-selection nav ul li:nth-child(7) { - background: #31c5da; -} -.sidebar .design-selection nav ul li:nth-child(8) { - background: #f15a30; -} -.sidebar .design-selection nav ul li:nth-child(1)::before { - content: "1"; - font-size: 700%; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(1)::before { - font-size: 300%; - display: block; - padding: 0 0 0.25em 0; - } - } -.sidebar .design-selection nav ul li:nth-child(2)::before { - content: "2"; - font-size: 700%; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(2)::before { - font-size: 300%; - display: block; - padding: 0 0 0.25em 0; - } - } -.sidebar .design-selection nav ul li:nth-child(3)::before { - content: "3"; - font-size: 700%; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(3)::before { - font-size: 300%; - display: block; - padding: 0 0 0.25em 0; - } - } -.sidebar .design-selection nav ul li:nth-child(4)::before { - content: "4"; - font-size: 700%; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(4)::before { - font-size: 300%; - display: block; - padding: 0 0 0.25em 0; - } - } -.sidebar .design-selection nav ul li:nth-child(5)::before { - content: "5"; - font-size: 700%; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(5)::before { - font-size: 300%; - display: block; - padding: 0 0 0.25em 0; - } - } -.sidebar .design-selection nav ul li:nth-child(6)::before { - content: "6"; - font-size: 700%; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(6)::before { - font-size: 300%; - display: block; - padding: 0 0 0.25em 0; - } - } -.sidebar .design-selection nav ul li:nth-child(7)::before { - content: "7"; - font-size: 700%; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(7)::before { - font-size: 300%; - display: block; - padding: 0 0 0.25em 0; - } - } -.sidebar .design-selection nav ul li:nth-child(8)::before { - content: "8"; - font-size: 700%; -} - @media (max-width: 53em) { - .sidebar .design-selection nav ul li:nth-child(8)::before { - font-size: 300%; - display: block; - padding: 0 0 0.25em 0; - } - } -.sidebar .design-archives { - background: #31c5da; - position: relative; - width: 20%; - margin: 0 20% 0 60%; - padding: 10em 1em 3em 1em; - float: right; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .sidebar .design-archives { - width: 25%; - margin: 0 25% 0 50%; - } - } - @media (max-width: 53em) { - .sidebar .design-archives { - background: #31c5da; - width: 100%; - margin: 0; - padding: 4em 1em 1em 1em; - } - } -.sidebar .design-archives h3 { - position: absolute; - color: #ffffff; - z-index: 3; - font-size: 150%; - line-height: 2em; - top: 8.5em; - left: -4em; - margin: 0; - padding: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -} - @media (max-width: 53em) { - .sidebar .design-archives h3 { - top: 0; - left: 0; - position: relative; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); - } - } -.sidebar .design-archives nav { - overflow: hidden; - width: 100%; -} -.sidebar .design-archives ul { - padding: 0; - overflow: hidden; -} -.sidebar .design-archives ul li { - display: inline-block; - list-style: none; - width: 100%; - float: left; - padding: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - text-align: left; -} -.sidebar .zen-resources { - background: #31c5da url(icon-circles.svg) no-repeat left bottom; - background-size: 100%; - position: relative; - z-index: 2; - width: 20%; - margin: 0 20% 0 60%; - padding: 8em 1em 22em 1em; - float: right; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - @media (max-width: 70em) { - .sidebar .zen-resources { - width: 25%; - margin: 0 25% 0 50%; - } - } - @media (max-width: 53em) { - .sidebar .zen-resources { - background: #31c5da url(icon-circles.svg) no-repeat center bottom; - background-size: 35%; - width: 100%; - margin: 0; - padding: 2em 1em 10em 1em; - } - } -.sidebar .zen-resources h3 { - position: absolute; - color: #ffffff; - z-index: 3; - font-size: 150%; - line-height: 2em; - top: 8em; - left: -4.5em; - margin: 0; - padding: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -} - @media (max-width: 53em) { - .sidebar .zen-resources h3 { - top: 0; - left: 0; - position: relative; - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); - } - } -.sidebar .zen-resources ul { - padding: 0; - overflow: hidden; -} -.sidebar .zen-resources ul li { - display: inline-block; - list-style: none; - width: 100%; - float: left; - padding: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - text-align: left; -} diff --git a/src/data/detailed/001/metadata.json b/src/data/detailed/001/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..5a875c8ba860263edc26fa8a4d26f26f97c9997b --- /dev/null +++ b/src/data/detailed/001/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "001", + "url": "https://www.csszengarden.com/001", + "css_url": "https://www.csszengarden.com/001/001.css", + "title": "Tranquille", + "author": "Dave Shea", + "description": { + "summary": "A serene web design that combines Eastern aesthetic elements with minimalist layout principles, featuring soft colors and symbolic imagery like lotus flowers and a traditional torii gate.", + "visual_style": "The design employs a calm, light aesthetic with subtle watercolor-like backgrounds and symbolic Eastern elements creating a balanced, harmonious composition.", + "emotional_impact": "The visual elements evoke tranquility and contemplation through the use of soft colors, ample white space, and delicate natural imagery.", + "compositional_elements": "The layout is structured with a central content area flanked by decorative side elements, creating a framed, balanced composition with clear visual hierarchy." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, traditional Eastern art, watercolor painting techniques", + "visual_metaphors": "Serenity, balance, enlightenment, natural harmony" + }, + "categories": [ + "minimalist", + "eastern-inspired", + "elegant", + "structured", + "harmonious", + "zen-aesthetic" + ], + "visual_characteristics": [ + "pastel-palette", + "symbolic-imagery", + "balanced-composition", + "negative-space", + "typographic-hierarchy", + "watercolor-effects" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "contrast", + "hierarchy" + ], + "visual_techniques": [ + "framing", + "symbolic imagery", + "tonal gradation" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/002/metadata.json b/src/data/detailed/002/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..cba359141513ac2383bfac4aea6ff364fc802cfa --- /dev/null +++ b/src/data/detailed/002/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "002", + "url": "https://www.csszengarden.com/002", + "css_url": "https://www.csszengarden.com/002/002.css", + "title": "Salmon Cream Cheese", + "author": "Dave Shea", + "description": { + "summary": "A serene, minimalist web design featuring a soft peach color palette with an Eastern aesthetic influence, centered around a garden photograph that serves as a focal point.", + "visual_style": "The design employs a clean, structured layout with a delicate balance between textual content and visual elements, creating a sense of tranquility through organized simplicity.", + "emotional_impact": "The warm peachy tones combined with the garden imagery evoke feelings of calm, harmony, and natural beauty, reinforcing the zen philosophy suggested by the design.", + "compositional_elements": "A clear vertical hierarchy divides the page into distinct functional zones, with a prominent header, a central showcase area featuring natural imagery, and an organized content section with well-defined typographic rhythm." + }, + "artistic_context": { + "style_influences": "Eastern minimalism, Japanese design principles, web-centric modernism", + "visual_metaphors": "Garden as structure, simplicity as clarity, natural harmony as design philosophy" + }, + "categories": [ + "minimalist", + "zen-inspired", + "structured", + "monochromatic", + "educational", + "grid-based" + ], + "visual_characteristics": [ + "soft-peach palette", + "hierarchical typography", + "clean whitespace", + "natural photography", + "horizontal sectioning", + "muted contrast" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "simplicity", + "hierarchy" + ], + "visual_techniques": [ + "color monochrome", + "structured layout", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/003/metadata.json b/src/data/detailed/003/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..4e569ee6f80227378dc4359c2197c49629211be5 --- /dev/null +++ b/src/data/detailed/003/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "003", + "url": "https://www.csszengarden.com/003", + "css_url": "https://www.csszengarden.com/003/003.css", + "title": "Stormweather", + "author": "Dave Shea", + "description": { + "summary": "A serene, minimalist web design with a blue-gray color scheme featuring a structured layout with photographic elements and clean typography, creating a sense of calm and order.", + "visual_style": "The design employs a zen-inspired aesthetic with ample white space, framed photographic thumbnails, and carefully structured text blocks within a soothing color environment.", + "emotional_impact": "The soft color palette, spacious layout, and nature imagery evoke tranquility and contemplation, reinforced by the balanced typography and gentle visual hierarchy.", + "compositional_elements": "Three equally-sized photographic thumbnails serve as focal points above neatly organized text columns, all contained within a subtle blue-tinted frame that creates unified visual harmony." + }, + "artistic_context": { + "style_influences": "Minimalism, Japanese aesthetic principles, modernist typography, digital photography", + "visual_metaphors": "Garden path, mist, water reflections, journey, enlightenment" + }, + "categories": [ + "minimalist", + "structured", + "grid-based", + "photographic", + "serene", + "monochromatic" + ], + "visual_characteristics": [ + "blue-gray palette", + "framed imagery", + "white space", + "photographic elements", + "structured columns", + "subtle texture" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "unity", + "contrast" + ], + "visual_techniques": [ + "framing", + "grid layout", + "tonal harmony" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/004/metadata.json b/src/data/detailed/004/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..12abb3c3bb6c80280d2dc9d91d1c390f0cb1421b --- /dev/null +++ b/src/data/detailed/004/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "004", + "url": "https://www.csszengarden.com/004", + "css_url": "https://www.csszengarden.com/004/004.css", + "title": "css Zen Garden submission 004 - 'arch4.20'", + "author": "Dave Shea", + "description": { + "summary": "A structured web design demonstration page showcasing CSS capabilities with a clean, professional layout and architectural imagery header", + "visual_style": "The design employs a functional, minimalist approach with clear typographic hierarchy and a deep blue-teal color scheme that creates a professional, academic atmosphere", + "emotional_impact": "The design evokes a sense of organized tranquility and technical authority through its structured layout and cool color palette", + "compositional_elements": "The page features a horizontal architectural header image, a prominent title area, and a multi-column content structure with clear section divisions and sidebar navigation" + }, + "artistic_context": { + "style_influences": "Web standards movement, functional minimalism, academic documentation design", + "visual_metaphors": "Architecture as structure, garden as growth and cultivation, path/road as journey" + }, + "categories": [ + "functional", + "minimalist", + "structured", + "educational", + "grid-based", + "technical" + ], + "visual_characteristics": [ + "blue-teal color scheme", + "architectural header imagery", + "hierarchical typography", + "clear section divisions", + "sidebar navigation", + "multi-column layout" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "readability", + "organization" + ], + "visual_techniques": [ + "color blocking", + "typographic scaling", + "white space management" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/005/metadata.json b/src/data/detailed/005/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..56d2234e9670bdbd053278fcff37bbc82f3f56de --- /dev/null +++ b/src/data/detailed/005/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "005", + "url": "https://www.csszengarden.com/005", + "css_url": "https://www.csszengarden.com/005/005.css", + "title": "css Zen Garden submission 005 - 'Blood Lust'", + "author": "Dave Shea", + "description": { + "summary": "A deliberately chaotic yet structured web design featuring an experimental aesthetic with bold red washes against a grid background, integrating calligraphic script with technical typography.", + "visual_style": "The design employs a tension between structured technical elements and organic, painterly splashes creating a rebellious yet purposeful aesthetic.", + "emotional_impact": "Creates a sense of controlled chaos and artistic rebellion, suggesting both creative freedom and technical discipline.", + "compositional_elements": "Navigation elements frame the left side while content flows across the center and right, with dramatic red ink-like splashes overlaying a dotted grid background." + }, + "artistic_context": { + "style_influences": "Japanese calligraphy, deconstructivist design, digital grunge aesthetic, modernist typography", + "visual_metaphors": "Zen garden as ordered chaos, splashes of ink as creative disruption, grid as structural foundation" + }, + "categories": [ + "experimental", + "deconstructivist", + "juxtaposed", + "high-contrast", + "calligraphic", + "grid-based" + ], + "visual_characteristics": [ + "red ink splashes", + "dotted background grid", + "multi-column layout", + "script typography", + "layered elements", + "monospaced text" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "tension", + "asymmetry" + ], + "visual_techniques": [ + "overlay", + "typographic contrast", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/006/metadata.json b/src/data/detailed/006/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f2a30f222041ca15c042134ffff84f4d650f4f6f --- /dev/null +++ b/src/data/detailed/006/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "006", + "url": "https://www.csszengarden.com/006", + "css_url": "https://www.csszengarden.com/006/006.css", + "title": "Wicked Grove", + "author": "D. Keith Robinson", + "description": { + "summary": "A serene web design that blends natural imagery with structured content, creating a harmonious balance between organic and digital elements", + "visual_style": "The design employs a tranquil blue gradient background paired with a natural green foliage canopy, creating a zen-like digital environment that invites exploration", + "emotional_impact": "Evokes a sense of calm contemplation through the combination of natural imagery and orderly content presentation", + "compositional_elements": "Three-column layout with natural imagery framing the top, clear content blocks with distinct typographic hierarchy, and accented navigation elements in vibrant red" + }, + "artistic_context": { + "style_influences": "Digital minimalism, natural-digital fusion, information architecture", + "visual_metaphors": "Garden as knowledge cultivation, natural canopy as shelter for digital content" + }, + "categories": [ + "nature-inspired", + "columnar", + "structured", + "educational", + "minimalist", + "gradient-based" + ], + "visual_characteristics": [ + "blue-gradient background", + "green canopy frame", + "three-column layout", + "high-contrast typography", + "color-coded navigation", + "bordered content areas" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "framing" + ], + "visual_techniques": [ + "natural framing", + "color blocking", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/007/metadata.json b/src/data/detailed/007/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..5ff5fb58ecdec9195d0153f7218cfc2fce346440 --- /dev/null +++ b/src/data/detailed/007/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "007", + "url": "https://www.csszengarden.com/007", + "css_url": "https://www.csszengarden.com/007/007.css", + "title": "deep thought", + "author": "Jason Estes", + "description": { + "summary": "A minimalist, elegant web design that combines Eastern aesthetic influences with a monochromatic color scheme, creating a serene digital space that emphasizes typographic hierarchy and thoughtful negative space.", + "visual_style": "The design employs a Zen-inspired aesthetic with calligraphic headings, strategic placement of red accent elements, and a grayscale background featuring subtle water imagery that creates depth and tranquility.", + "emotional_impact": "The composition evokes a sense of calm contemplation through its balanced structure, measured spacing, and contrast between dark background and light typography.", + "compositional_elements": "Vertical navigation strips frame the content, while decorative Asian-inspired red emblems serve as visual anchors, creating rhythm across the structured layout." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, calligraphic traditions, monastic simplicity", + "visual_metaphors": "Water ripples as transformation, stone path as journey, emptiness as potential" + }, + "categories": [ + "minimalist", + "eastern-inspired", + "monochromatic", + "typographic", + "structured", + "contemplative" + ], + "visual_characteristics": [ + "vertical-alignment", + "high-contrast", + "red-accents", + "water-imagery", + "calligraphic-headings", + "grid-based" + ], + "design_principles": { + "primary_principles": [ + "balance", + "contrast", + "rhythm", + "hierarchy" + ], + "visual_techniques": [ + "negative space", + "tonal contrast", + "symbolic accents" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/008/metadata.json b/src/data/detailed/008/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..3f146339dabc6bfbf58325c2179adf36b6792d0b --- /dev/null +++ b/src/data/detailed/008/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "008", + "url": "https://www.csszengarden.com/008", + "css_url": "https://www.csszengarden.com/008/008.css", + "title": "RPM", + "author": "Bruno Cunha", + "description": { + "summary": "A bold, high-contrast web design featuring dynamic abstract imagery integrated with structured content blocks. The composition juxtaposes organic, flowing visual elements against rigid information architecture.", + "visual_style": "The design employs a striking industrial-digital aesthetic with abstract metallic forms and geometric patterns set against a vivid red background, creating a sense of technological energy.", + "emotional_impact": "The intense red palette and sharp angular elements evoke excitement, passion, and creative energy, suggesting innovation and avant-garde sensibilities.", + "compositional_elements": "A dramatic header with fractured metallic/glass-like objects occupies the upper portion, while structured content blocks below create an organized grid system that contrasts with the fluid header imagery." + }, + "artistic_context": { + "style_influences": "Digital abstract art, techno-industrial design, Y2K-era web aesthetics, deconstructivist typography", + "visual_metaphors": "Shattering barriers, digital transformation, creative explosion, structured freedom" + }, + "categories": [ + "dynamic", + "industrial", + "high-contrast", + "grid-based", + "technical", + "avant-garde" + ], + "visual_characteristics": [ + "vibrant-red", + "metallic-textures", + "angular-forms", + "fractured-imagery", + "hierarchical-layout", + "boxed-content" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "emphasis" + ], + "visual_techniques": [ + "layering", + "color blocking", + "geometric abstraction" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/009/metadata.json b/src/data/detailed/009/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f7de0041dd4e01520af3121fa7b52dcbfb1b2d65 --- /dev/null +++ b/src/data/detailed/009/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "009", + "url": "https://www.csszengarden.com/009", + "css_url": "https://www.csszengarden.com/009/009.css", + "title": "Dead or Alive", + "author": "Michael Pick", + "description": { + "summary": "A meticulously structured webpage design that combines elegant minimalism with traditional Eastern aesthetic influences, creating a harmonious balance between ornamental elements and functional typography.", + "visual_style": "The design employs a clean, structured layout with decorative borders framing a predominantly black and white content area, creating a sense of classical formality with subtle Eastern-inspired embellishments.", + "emotional_impact": "The visual elements evoke a sense of tranquility and contemplative focus, reinforced by the balanced composition and thoughtful spacing between content sections.", + "compositional_elements": "A symmetrical layout with a distinct header featuring an emblematic logo, bordered by decorative patterns, and organized content sections separated by horizontal dividers and consistent typographic treatments." + }, + "artistic_context": { + "style_influences": "Japanese woodblock printing, Art Deco ornamentation, classical manuscript design, Eastern calligraphic traditions", + "visual_metaphors": "Zen garden structure, path of enlightenment, architectural blueprint, sacred scroll" + }, + "categories": [ + "minimalist", + "traditional", + "typographic", + "structured", + "ornamental", + "monochromatic" + ], + "visual_characteristics": [ + "decorative borders", + "centered typography", + "high contrast", + "geometric patterns", + "horizontal dividers", + "hierarchical spacing" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "rhythm", + "contrast" + ], + "visual_techniques": [ + "framing", + "typographic scale", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/010/metadata.json b/src/data/detailed/010/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..a19b0b1f607c9f4a9f74ebc7b6232e79208c6352 --- /dev/null +++ b/src/data/detailed/010/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "010", + "url": "https://www.csszengarden.com/010", + "css_url": "https://www.csszengarden.com/010/010.css", + "title": "A Garden Apart", + "author": "Dan Cederholm, http://www.simplebits.com/", + "description": { + "summary": "A serene, structured webpage design featuring a balanced two-column layout with a nature-inspired header and earthy color palette.", + "visual_style": "The design employs a minimalist aesthetic with organic zen elements, combining structured content with natural imagery to create visual harmony.", + "emotional_impact": "The calm, peaceful atmosphere evokes a sense of tranquility and clarity, reinforced by the subtle use of natural textures and muted colors.", + "compositional_elements": "A curving green header defines the top space, while content is organized in a clear left-right structure with consistent typographic hierarchy and ample whitespace." + }, + "artistic_context": { + "style_influences": "Japanese zen garden aesthetics, minimalist web design, natural photography", + "visual_metaphors": "Stone pathway, bamboo simplicity, organic growth, enlightened clarity" + }, + "categories": [ + "minimalist", + "nature-inspired", + "structured", + "educational", + "two-column", + "zen-aesthetic" + ], + "visual_characteristics": [ + "curved header element", + "natural texture photography", + "earthy color palette", + "hierarchical typography", + "organized content blocks", + "balanced negative space" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "harmony", + "simplicity" + ], + "visual_techniques": [ + "textural contrast", + "color zoning", + "typographic rhythm" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/011/metadata.json b/src/data/detailed/011/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f91c5b0226dcc1b56bfaddbab5b193988501c7a1 --- /dev/null +++ b/src/data/detailed/011/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "011", + "url": "https://www.csszengarden.com/011", + "css_url": "https://www.csszengarden.com/011/011.css", + "title": "css Zen Garden submission 011 - 'meliorism' by Brett J. Gilbert - www.paragraphic.co.uk", + "author": "Brett J. Gilbert", + "description": { + "summary": "A serene, nature-inspired web design showcasing an elegant blue botanical illustration against a soft gradient background, creating harmony between content and artistic elements.", + "visual_style": "The design employs a minimalist aesthetic with a prominent decorative illustration of a blue tree or branch as its focal point, balancing structured content columns with organic visual elements.", + "emotional_impact": "Evokes tranquility and contemplation through its gentle color palette and flowing botanical imagery, reinforcing the 'zen garden' concept while maintaining clarity of purpose.", + "compositional_elements": "Uses a multi-column layout with clear content hierarchy, where the central organic illustration serves as both divider and visual anchor between functional content areas." + }, + "artistic_context": { + "style_influences": "Japanese watercolor, minimalist web design, natural illustration", + "visual_metaphors": "Growth, organic flow, digital tranquility, enlightenment" + }, + "categories": [ + "minimalist", + "nature-inspired", + "elegant", + "grid-based", + "monochromatic", + "harmonious" + ], + "visual_characteristics": [ + "blue-dominant palette", + "botanical illustration", + "multi-column layout", + "gradient header", + "typographic contrast", + "balanced white space" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "hierarchy", + "contrast" + ], + "visual_techniques": [ + "color harmony", + "negative space", + "focal illustration" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/012/metadata.json b/src/data/detailed/012/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..4eff1a93098b1992f56c0f2bedb4be03f4f7631c --- /dev/null +++ b/src/data/detailed/012/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "012", + "url": "https://www.csszengarden.com/012", + "css_url": "https://www.csszengarden.com/012/012.css", + "title": "TechnOhm", + "author": "Joshua Ambrutis", + "description": { + "summary": "A dark, tech-inspired interface featuring metallic textures and glowing yellow-gold accents against a charcoal background, structured with a modular panel layout and strong visual hierarchy.", + "visual_style": "The design employs an industrial-futuristic aesthetic with metallic surfaces, riveted borders, and glowing elements that create a sense of technical sophistication and digital craftsmanship.", + "emotional_impact": "The contrast between dark backgrounds and luminous yellow-gold elements creates a contemplative yet energetic atmosphere, evoking both technical precision and organic flow.", + "compositional_elements": "Structured content panels with distinct header elements organize information, while fluid, abstract golden waves at the bottom and top provide organic counterpoints to the rigid layout." + }, + "artistic_context": { + "style_influences": "Industrial design, cyberpunk aesthetics, early 2000s web interfaces, technical illustration", + "visual_metaphors": "Mechanical precision, illumination amid darkness, structured pathways, technological garden" + }, + "categories": [ + "industrial", + "tech-inspired", + "modular", + "high-contrast", + "metallic", + "illuminated" + ], + "visual_characteristics": [ + "glowing accents", + "metallic textures", + "riveted borders", + "paneled layout", + "golden gradients", + "abstract waves" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "alignment" + ], + "visual_techniques": [ + "texture layering", + "light emission", + "modular structuring" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/013/metadata.json b/src/data/detailed/013/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0514e2428aa5a4f5ed2542b1b543a01f6a86b715 --- /dev/null +++ b/src/data/detailed/013/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "013", + "url": "https://www.csszengarden.com/013", + "css_url": "https://www.csszengarden.com/013/013.css", + "title": "Coastal Breeze", + "author": "Dave Shea", + "description": { + "summary": "A serene, educational webpage design with organic decorative elements framing a clean, text-focused layout that conveys technical information in an aesthetically pleasing manner.", + "visual_style": "The design employs a minimalist approach with natural ornamentation, featuring a delicate balance between structured content and organic decorative elements at the top, bottom, and borders.", + "emotional_impact": "The natural imagery and earthy color palette evoke tranquility and contemplation, befitting the 'Zen Garden' theme while maintaining professional clarity.", + "compositional_elements": "A strong vertical flow guides the reader through well-spaced text blocks, with decorative natural elements creating a frame without overwhelming the content." + }, + "artistic_context": { + "style_influences": "Asian-inspired minimalism, digital naturalism, organic web design", + "visual_metaphors": "Garden as learning space, natural elements as digital growth, organic structure as web harmony" + }, + "categories": [ + "minimalist", + "nature-inspired", + "educational", + "two-column", + "organic", + "zen-aesthetic" + ], + "visual_characteristics": [ + "natural ornamentation", + "earth-tone palette", + "asymmetrical balance", + "decorative dividers", + "textured borders", + "botanical elements" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "rhythm", + "contrast" + ], + "visual_techniques": [ + "framing", + "white space utilization", + "natural texturing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/014/metadata.json b/src/data/detailed/014/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9731d1ea412ef5a663b750a0da0f563b82c4ce24 --- /dev/null +++ b/src/data/detailed/014/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "014", + "url": "https://www.csszengarden.com/014", + "css_url": "https://www.csszengarden.com/014/014.css", + "title": "Samuraai", + "author": "Minz Meyer", + "description": { + "summary": "A zen-inspired web design featuring an earthy, textured aesthetic with a vertical column layout balancing dark backgrounds against light text. The design employs natural imagery and organic textures to create a meditative atmosphere.", + "visual_style": "The design uses a structured layout with distinct sectioning, combining vertical striping patterns with textured backgrounds reminiscent of natural materials. Typography is presented in light colors against dark backgrounds for strong readability.", + "emotional_impact": "The earthy tones and textured backgrounds evoke a calm, contemplative mood, reinforced by the balanced composition and organized information hierarchy.", + "compositional_elements": "The layout employs a three-column structure with a wide central content area flanked by narrower navigation columns. Each content section is clearly delineated with horizontal dividers and consistent heading treatments." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, minimalist web design, natural texture photography, traditional scroll layouts", + "visual_metaphors": "Garden pathway, meditation space, structured enlightenment journey, natural order" + }, + "categories": [ + "textural", + "grid-based", + "earthy", + "zen-inspired", + "structured", + "hierarchical" + ], + "visual_characteristics": [ + "organic textures", + "triadic layout", + "vertical striping", + "high contrast typography", + "natural color palette", + "sectional divisions" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "contrast", + "repetition" + ], + "visual_techniques": [ + "textural layering", + "grid organization", + "natural motifs" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/017/metadata.json b/src/data/detailed/017/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..a48f56e08ff35ea97de2e4651d9c52a044ca30f0 --- /dev/null +++ b/src/data/detailed/017/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "017", + "url": "https://www.csszengarden.com/017", + "css_url": "https://www.csszengarden.com/017/017.css", + "title": "Golden Mean", + "author": "Douglas Bowman", + "description": { + "summary": "A meticulously structured web design with a harmonious balance of earthy colors and clear visual hierarchy, showcasing an elegant integration of ornamental headers and functional content areas.", + "visual_style": "The design employs a classical structure with modern execution, using subtle patterns and textural elements to create depth while maintaining clarity through consistent spacing and alignment.", + "emotional_impact": "The warm, organic color palette paired with structured layout creates a sense of organized tranquility that feels both educational and inviting.", + "compositional_elements": "The layout features distinct horizontal sections with ornate headers in yellow-green tones contrasting against neutral content areas, creating a rhythmic visual flow from top to bottom." + }, + "artistic_context": { + "style_influences": "Arts and Crafts movement, minimalist web design, classical document layout", + "visual_metaphors": "Garden growth represented by organic patterns and earthy tones, structure as foundation for creativity" + }, + "categories": [ + "grid-based", + "organic", + "hierarchical", + "textural", + "classical", + "informational" + ], + "visual_characteristics": [ + "earthy-palette", + "decorative-headers", + "patterned-borders", + "multi-column-layout", + "typographic-contrast", + "textural-backgrounds" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "balance" + ], + "visual_techniques": [ + "textural layering", + "color blocking", + "ornamental framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/018/metadata.json b/src/data/detailed/018/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8bfacc1c1939f5900cc8351d931aa1642d5102d6 --- /dev/null +++ b/src/data/detailed/018/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "018", + "url": "https://www.csszengarden.com/018", + "css_url": "https://www.csszengarden.com/018/018.css", + "title": "Wrapped in Burlap", + "author": "John Simons", + "description": { + "summary": "A zen-inspired web design showcasing textured, earthy aesthetics with a structured layout that balances organic elements against a clean information architecture", + "visual_style": "The design employs a harmonious contrast between rough, textured header backgrounds and organized content areas, creating a meditation-inspired visual narrative", + "emotional_impact": "The earthy color palette and textural elements evoke a sense of calm contemplation and grounded wisdom, balanced with practical organization", + "compositional_elements": "Clear hierarchical structure with textured banner headings, clean text blocks, and a two-column layout that guides the eye from left content to right navigation" + }, + "artistic_context": { + "style_influences": "Eastern minimalism, wabi-sabi aesthetics, traditional scroll design, natural textures", + "visual_metaphors": "Garden path as journey, bare tree as growth potential, textured backgrounds as weathered wisdom" + }, + "categories": [ + "textural", + "earth-toned", + "minimalist", + "hierarchical", + "organic", + "structured" + ], + "visual_characteristics": [ + "textured headers", + "muted earth palette", + "stark tree silhouette", + "two-column layout", + "typographic contrast", + "paper-like textures" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "balance" + ], + "visual_techniques": [ + "textural layering", + "compartmentalized layout", + "natural motifs" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/019/metadata.json b/src/data/detailed/019/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..5b931a6dfbef74d16d9a0d45da8d32e4da71626e --- /dev/null +++ b/src/data/detailed/019/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "019", + "url": "https://www.csszengarden.com/019", + "css_url": "https://www.csszengarden.com/019/019.css", + "title": "What Lies Beneath", + "author": "Michael Pick", + "description": { + "summary": "A dark, atmospheric web design with a Zen-inspired aesthetic that contrasts weathered textures against precise typography and structured content layout.", + "visual_style": "The design employs a dramatic, high-contrast visual language with textural dark backgrounds and carefully arranged textual elements that create an immersive, contemplative atmosphere.", + "emotional_impact": "Evokes a meditative, mysterious mood through the use of deep blacks, textural surfaces, and subtle organic elements, creating a sense of depth and ancient wisdom.", + "compositional_elements": "Structured as a horizontal layout with clear content divisions, featuring a prominent header, navigation strip, and content columns arranged in a balanced grid system." + }, + "artistic_context": { + "style_influences": "Japanese Zen aesthetics, digital grunge, industrial texture, minimalist typography", + "visual_metaphors": "Path through darkness, ancient wisdom, weathered artifacts, natural growth against structure" + }, + "categories": [ + "dark", + "textural", + "minimalist", + "grid-based", + "atmospheric", + "high-contrast" + ], + "visual_characteristics": [ + "textured backgrounds", + "weathered surfaces", + "columnar layout", + "stark typography", + "organic header element", + "dramatic lighting" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "rhythm" + ], + "visual_techniques": [ + "textural layering", + "typographic scale", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/020/metadata.json b/src/data/detailed/020/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..98e813ed31340936b0e9693dd7a7bb626a341659 --- /dev/null +++ b/src/data/detailed/020/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "020", + "url": "https://www.csszengarden.com/020", + "css_url": "https://www.csszengarden.com/020/020.css", + "title": "Friendly Beaches", + "author": "Sophie G", + "description": { + "summary": "A serene web design featuring smooth gradients of blue and white with zen-inspired imagery of rocks in water, complemented by a structured content layout with clear typographic hierarchy", + "visual_style": "Minimalist and tranquil design merging natural imagery with structured information architecture, creating a balanced digital experience", + "emotional_impact": "Evokes calmness and clarity through the use of water imagery, soft blue tones, and organized information presentation", + "compositional_elements": "Header banner with nature photography, clearly defined content sections with consistent spacing, and a side panel for navigation options" + }, + "artistic_context": { + "style_influences": "Zen garden aesthetics, minimalist web design, nature photography", + "visual_metaphors": "Rocks in water suggesting stability amid flow, clarity emerging from structure" + }, + "categories": [ + "minimalist", + "nature-inspired", + "structured", + "tranquil", + "instructional" + ], + "visual_characteristics": [ + "blue-white gradient", + "natural imagery", + "sectioned layout", + "hierarchical typography", + "organized information blocks", + "sidebar navigation" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "harmony" + ], + "visual_techniques": [ + "photographic integration", + "typographic structure", + "modular layout" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/021/metadata.json b/src/data/detailed/021/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..cd7a54f7a14ee414238c65fe6f91db2610c1d3b8 --- /dev/null +++ b/src/data/detailed/021/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "021", + "url": "https://www.csszengarden.com/021", + "css_url": "https://www.csszengarden.com/021/021.css", + "title": "Calm & Smooth", + "author": "Cornelia Lange", + "description": { + "summary": "A zen-inspired web design with an elegant blend of minimalist layout and decorative Eastern elements, showcasing CSS styling capabilities in a serene, functional presentation.", + "visual_style": "The design adopts a minimalist yet elegant approach, combining soft watercolor-like header imagery with structured content blocks and decorative calligraphic headings.", + "emotional_impact": "Creates a peaceful, contemplative atmosphere through spacious layout, soft color transitions, and balanced visual elements that evoke tranquility and harmony.", + "compositional_elements": "Organized in vertical sections with clear demarcation, featuring sidebar navigation, horizontal content blocks, and occasional illustrative elements like the stone statue and architectural icons." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, watercolor painting techniques, traditional Eastern calligraphy, minimalist web design", + "visual_metaphors": "Garden as digital space, path of enlightenment, stones as building blocks, water as fluidity of design" + }, + "categories": [ + "minimalist", + "zen-inspired", + "elegant", + "structured", + "instructional", + "Eastern-influenced" + ], + "visual_characteristics": [ + "watercolor-style header", + "calligraphic headings", + "structured grid layout", + "neutral color palette", + "hierarchical navigation", + "decorative Eastern elements" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "white space" + ], + "visual_techniques": [ + "vertical rhythm", + "typographic contrast", + "thematic illustration" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/022/metadata.json b/src/data/detailed/022/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..5ed13150299885043f69e9ed0e99e0bc18db447b --- /dev/null +++ b/src/data/detailed/022/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "022", + "url": "https://www.csszengarden.com/022", + "css_url": "https://www.csszengarden.com/022/022.css", + "title": "viridity", + "author": "Laura MacArthur", + "description": { + "summary": "A decorative web design showcasing a teal-based color scheme with intricate border patterns and a structured content layout that mimics traditional Japanese aesthetics in digital form.", + "visual_style": "The design employs a zen-inspired aesthetic with ornate patterned borders framing a central content area that features alternating light teal content blocks against a darker teal background.", + "emotional_impact": "The monochromatic teal palette creates a calming, meditative atmosphere with subtle decorative elements that evoke tranquility and focus.", + "compositional_elements": "A three-column layout with ornate borders enclosing the page, featuring a narrow navigation panel on the left, a wide central content area divided by light horizontal panels, and decorative botanical motifs subtly integrated into the background." + }, + "artistic_context": { + "style_influences": "Traditional Japanese decorative arts, Art Nouveau border patterns, early 2000s web design aesthetics", + "visual_metaphors": "Flowing water, botanical growth, meditative spaces" + }, + "categories": [ + "monochromatic", + "ornamental", + "structured", + "eastern-inspired", + "vintage-web", + "decorative" + ], + "visual_characteristics": [ + "repeating-borders", + "teal-gradient", + "botanical-motifs", + "layered-panels", + "vertical-navigation", + "textured-background" + ], + "design_principles": { + "primary_principles": [ + "rhythm", + "hierarchy", + "contrast", + "unity" + ], + "visual_techniques": [ + "pattern repetition", + "color harmony", + "framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/023/metadata.json b/src/data/detailed/023/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..1a23bba4bec32373389b681804425100f6b0c2e7 --- /dev/null +++ b/src/data/detailed/023/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "023", + "url": "https://www.csszengarden.com/023", + "css_url": "https://www.csszengarden.com/023/023.css", + "title": "fleur de l'avant-garde", + "author": "Michael Switzer", + "description": { + "summary": "A web design showcase featuring a large orange gerbera daisy against a blue gradient background, with organized content sections in a three-column layout structure.", + "visual_style": "Clean and structured web design that combines natural organic imagery with digital grid elements, creating a balance between technical precision and natural beauty.", + "emotional_impact": "Calming yet energizing atmosphere created through the contrast of the vibrant flower against the cool blue gradient, suggesting growth and enlightenment.", + "compositional_elements": "Strong asymmetrical composition with the organic flower element balancing the structured grid-based content, creating visual tension and harmony." + }, + "artistic_context": { + "style_influences": "Early 2000s web design aesthetic, Japanese zen philosophy as expressed through visual simplicity and natural elements", + "visual_metaphors": "Flower as growth/enlightenment, grid pattern as structure/order, blue gradient as serenity/wisdom" + }, + "categories": [ + "grid-based", + "nature-inspired", + "minimalist", + "educational", + "zen-influenced" + ], + "visual_characteristics": [ + "high-contrast", + "asymmetrical-balance", + "gradient-background", + "organic-digital-fusion", + "organized-hierarchy", + "multi-column-layout" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "hierarchy", + "unity" + ], + "visual_techniques": [ + "natural motif integration", + "grid structuring", + "color symbolism" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/024/metadata.json b/src/data/detailed/024/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..67e9a12e33b10ef0502a8dc1725614465d84f506 --- /dev/null +++ b/src/data/detailed/024/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "024", + "url": "https://www.csszengarden.com/024", + "css_url": "https://www.csszengarden.com/024/024.css", + "title": "Not So Minimal", + "author": "Daniel Rubin", + "description": { + "summary": "A clean, minimalist web design with a serene blue header and structured content sections using a harmonious color palette of blues, whites, and soft grays.", + "visual_style": "The design employs a balanced, functional approach with clear typographic hierarchy and sectioned content areas distinguished by subtle background colors.", + "emotional_impact": "The tranquil blue gradient header creates a calm, meditative atmosphere that complements the structural clarity below, evoking a sense of order and simplicity.", + "compositional_elements": "A two-column layout with navigation elements on the left and expanding content on the right, using gentle color blocking to separate distinct information areas." + }, + "artistic_context": { + "style_influences": "Minimalist web design, information architecture principles, Japanese zen aesthetics", + "visual_metaphors": "Water and sky in the header suggesting tranquility and depth, structured sections representing organized knowledge" + }, + "categories": [ + "minimalist", + "structured", + "functional", + "grid-based", + "clean", + "information-oriented" + ], + "visual_characteristics": [ + "gradient header", + "color blocking", + "typographic hierarchy", + "white space", + "sectioned content", + "two-column layout" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "clarity", + "structure" + ], + "visual_techniques": [ + "color separation", + "negative space", + "alignment" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/025/metadata.json b/src/data/detailed/025/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f0374087f8dd4f6c55866f1dad6523b10f2473f7 --- /dev/null +++ b/src/data/detailed/025/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "025", + "url": "https://www.csszengarden.com/025", + "css_url": "https://www.csszengarden.com/025/025.css", + "title": "mnemonic", + "author": "Dave Shea", + "description": { + "summary": "A web design gallery interface featuring a bold chartreuse and crimson color scheme with a clean, structured layout that showcases CSS design examples", + "visual_style": "The design adopts a contemporary web aesthetic with strong horizontal divisions, geometric navigation buttons, and a high-contrast color palette that creates visual energy", + "emotional_impact": "The vibrant color combination evokes excitement and creative energy, while the structured layout provides clarity and accessibility", + "compositional_elements": "A multi-column layout divides content between explanatory text and design examples, with prominent navigation elements and clear visual framing" + }, + "artistic_context": { + "style_influences": "Web 2.0 design principles, early 2000s digital aesthetics, minimalist navigation systems", + "visual_metaphors": "Garden as creative growth, zen as simplicity and harmony in design" + }, + "categories": [ + "high-contrast", + "geometric", + "modular", + "instructional", + "grid-based", + "web-oriented" + ], + "visual_characteristics": [ + "chartreuse-crimson palette", + "horizontal banding", + "squared buttons", + "multi-column layout", + "white content area", + "angular framing" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "alignment", + "repetition" + ], + "visual_techniques": [ + "color blocking", + "geometric framing", + "white space utilization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/026/metadata.json b/src/data/detailed/026/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..71da852aaf0026abcf919f0dd14658aaa474583f --- /dev/null +++ b/src/data/detailed/026/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "026", + "url": "https://www.csszengarden.com/026", + "css_url": "https://www.csszengarden.com/026/026.css", + "title": "Zunflower", + "author": "Radu Darvas", + "description": { + "summary": "A structured web design showcasing CSS potential through a zen-inspired aesthetic, combining organic floral imagery with precise typographic organization and a multi-column layout.", + "visual_style": "The design employs a clean, organized approach with hierarchical text blocks balanced against an organic floral element, creating tension between structured content and natural form.", + "emotional_impact": "The contrast between the vibrant organic flower and structured content conveys a sense of harmony and balance, suggesting the zen philosophy of finding beauty in simplicity and order.", + "compositional_elements": "Three-column layout with asymmetrical balance: a dominant floral element on the left anchoring the design, central content block providing information density, and a right sidebar offering navigational elements." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Japanese zen aesthetics, early 2000s CSS demonstration sites", + "visual_metaphors": "Blooming flower representing growth and potential, structured columns suggesting order and clarity" + }, + "categories": [ + "minimalist", + "educational", + "organic-geometric", + "structured", + "asymmetrical", + "hierarchical" + ], + "visual_characteristics": [ + "multi-column layout", + "organic imagery", + "orange-gold accent colors", + "typographic hierarchy", + "white negative space", + "header-based organization" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "repetition" + ], + "visual_techniques": [ + "asymmetrical layout", + "color accenting", + "typographic structure" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/028/metadata.json b/src/data/detailed/028/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0091648bfd1c09e487e0935f0255dec9379cdade --- /dev/null +++ b/src/data/detailed/028/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "028", + "url": "https://www.csszengarden.com/028", + "css_url": "https://www.csszengarden.com/028/028.css", + "title": "Atlantis", + "author": "Kevin Davis", + "description": { + "summary": "A thoughtfully designed web interface featuring a striking spiral fossil as a focal point against a deep blue-black background, creating an organic-digital harmony with clean typographic information presentation.", + "visual_style": "The design merges natural organic imagery with structured digital layout, using elegant typography against translucent panels to create a sophisticated, contemplative aesthetic.", + "emotional_impact": "The contrasting warm orange spiral against cool deep blues evokes a sense of discovery and enlightenment, creating a meditative, serene atmosphere with underlying technical precision.", + "compositional_elements": "The composition balances an asymmetrical layout featuring a dominant natural spiral motif on the left with structured text blocks on the right, unified by a curved frame containing both elements." + }, + "artistic_context": { + "style_influences": "Biomorphic design, minimalist web aesthetics, Eastern philosophical visual language, natural history illustration", + "visual_metaphors": "Spiral as journey, fossil as evolution of knowledge, dark background as contemplative space" + }, + "categories": [ + "organic", + "minimalist", + "educational", + "contemplative", + "structured", + "philosophical" + ], + "visual_characteristics": [ + "spiral-focal-point", + "dark-background", + "orange-blue-contrast", + "layered-transparency", + "structured-typography", + "natural-digital-fusion" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "hierarchy", + "rhythm" + ], + "visual_techniques": [ + "natural imagery", + "translucent overlays", + "typographic structuring" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/029/metadata.json b/src/data/detailed/029/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..c3d9f93c195cc4ea0f4fefe0db6191e0720b30ec --- /dev/null +++ b/src/data/detailed/029/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "029", + "url": "https://www.csszengarden.com/029", + "css_url": "https://www.csszengarden.com/029/029.css", + "title": "Backyard", + "author": "Ray Henry", + "description": { + "summary": "A thoughtfully structured web design showcasing a minimalist aesthetic with a delicate balance between functional content and artistic presentation", + "visual_style": "Clean, structured layout with subtle organic elements that contrast with the precise typography and organization of information", + "emotional_impact": "Serene and contemplative atmosphere created through soft color transitions and harmonious spacing", + "compositional_elements": "Multi-column layout with clear sectioning, using subtle decorative elements and a naturalistic header image to frame the content" + }, + "artistic_context": { + "style_influences": "Zen-inspired minimalism, early web design aesthetics, nature-meets-technology approach", + "visual_metaphors": "Garden as knowledge cultivation, enlightenment through clarity, organic growth in structured environment" + }, + "categories": [ + "minimalist", + "structured", + "educational", + "zen-inspired", + "functional", + "text-centric" + ], + "visual_characteristics": [ + "multi-column layout", + "muted color palette", + "organic header image", + "clear typographic hierarchy", + "generous white space", + "section demarcation" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "unity" + ], + "visual_techniques": [ + "header-to-content flow", + "typographic rhythm", + "natural-to-digital transition" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/030/metadata.json b/src/data/detailed/030/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f7281d8c111d06caca975abc449b47186512db50 --- /dev/null +++ b/src/data/detailed/030/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "030", + "url": "https://www.csszengarden.com/030", + "css_url": "https://www.csszengarden.com/030/030.css", + "title": "Entomology", + "author": "Jon Hicks", + "description": { + "summary": "A framed web design showcasing an elegant integration of natural motifs and structured typography, arranged within a wooden frame against a rich crimson background.", + "visual_style": "The design employs a vintage-inspired aesthetic with elegant script typography and naturalistic butterfly illustrations, creating a refined museum-like display case feeling.", + "emotional_impact": "The warm cream background against deep crimson creates a contemplative, serene atmosphere enhanced by the orderly arrangement of information and delicate natural imagery.", + "compositional_elements": "A vertical scroll layout with clear hierarchical sections, butterfly specimens as visual anchors, and a dual-column structure balancing navigation links and detailed content." + }, + "artistic_context": { + "style_influences": "Victorian specimen display, Japanese wabi-sabi simplicity, traditional manuscript design", + "visual_metaphors": "Butterflies as transformation, framed content as preserved knowledge, vertical scroll as journey" + }, + "categories": [ + "elegant", + "traditional", + "naturalistic", + "structured", + "minimalist", + "framed" + ], + "visual_characteristics": [ + "wooden frame", + "butterfly illustrations", + "script typography", + "vertical layout", + "cream-and-crimson palette", + "column structure" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "balance", + "unity" + ], + "visual_techniques": [ + "framing", + "natural motifs", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/031/metadata.json b/src/data/detailed/031/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..bb016ecf6a4b5ecf488c46c5ac598e62efe0e851 --- /dev/null +++ b/src/data/detailed/031/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "031", + "url": "https://www.csszengarden.com/031", + "css_url": "https://www.csszengarden.com/031/031.css", + "title": "Hedges", + "author": "Kev Mears", + "description": { + "summary": "A playful, illustrative web design with a cartoonish landscape theme featuring stylized trees, clouds, and interactive elements organized in a vertical layout", + "visual_style": "Whimsical, flat illustration style with bright colors and simplified forms creating a cheerful, garden-like digital environment", + "emotional_impact": "Friendly and inviting atmosphere that evokes a sense of exploration and discovery through its playful visual elements", + "compositional_elements": "Clear sectioning with illustrated icons and headers, using a consistent visual language of rounded shapes and green accents to guide navigation" + }, + "artistic_context": { + "style_influences": "Digital illustration, cartoon aesthetics, flat design, web 2.0 visual language", + "visual_metaphors": "Garden path as learning journey, trees representing growth and knowledge" + }, + "categories": [ + "whimsical", + "illustrative", + "educational", + "flat-design", + "colorful", + "landscape-themed" + ], + "visual_characteristics": [ + "stylized-trees", + "bright-color-palette", + "icon-based-navigation", + "sectioned-layout", + "geometric-simplification", + "consistent-motifs" + ], + "design_principles": { + "primary_principles": [ + "unity", + "hierarchy", + "repetition", + "emphasis" + ], + "visual_techniques": [ + "illustrative iconography", + "color blocking", + "spatial metaphor" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/032/metadata.json b/src/data/detailed/032/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..ee50f290be6a3d93b49749e3bbd29097c313f4b1 --- /dev/null +++ b/src/data/detailed/032/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "032", + "url": "https://www.csszengarden.com/032", + "css_url": "https://www.csszengarden.com/032/032.css", + "title": "Crab Apple", + "author": "Jai Brinkofski", + "description": { + "summary": "A structured educational webpage featuring a clean, organized layout with distinct sections divided by dark green header bars. The design employs a neutral background with an apple graphic serving as a visual anchor.", + "visual_style": "Traditional web interface with a hierarchical structure, combining informational text blocks with navigational elements in a functional, educational presentation.", + "emotional_impact": "Conveys a sense of stability and authority through its ordered structure, with occasional visual accents providing warmth to an otherwise technical presentation.", + "compositional_elements": "Organized in vertical sections with clear headers, sidebar navigation, and structured content areas using consistent spacing and alignment principles." + }, + "artistic_context": { + "style_influences": "Early 2000s web design aesthetics with structured layout blocks and minimal decorative elements", + "visual_metaphors": "The apple graphic suggests knowledge and learning in a digital garden environment" + }, + "categories": [ + "educational", + "structured", + "hierarchical", + "minimal", + "utilitarian", + "information-focused" + ], + "visual_characteristics": [ + "section-based", + "sidebar-navigation", + "header-delineation", + "neutral-palette", + "icon-accents", + "text-centric" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "clarity", + "organization", + "accessibility" + ], + "visual_techniques": [ + "structural separation", + "consistent formatting", + "visual anchoring" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/033/metadata.json b/src/data/detailed/033/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b0aad03a757bb974e486b9cbd9a9ba1b02512b75 --- /dev/null +++ b/src/data/detailed/033/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "033", + "url": "https://www.csszengarden.com/033", + "css_url": "https://www.csszengarden.com/033/033.css", + "title": "Fleur-de-lys", + "author": "Claire Campbell", + "description": { + "summary": "A traditional web design with Eastern philosophical influences featuring a balanced two-column layout with rich burgundy borders and subtle floral imagery. The design embodies a teaching concept through its serene visual structure.", + "visual_style": "The design employs a minimalist approach with defined frames, subtle gradients, and a purposeful color scheme to create a tranquil, meditative space structured around educational content.", + "emotional_impact": "The burgundy borders and soft background create a serene, contemplative atmosphere that evokes a sense of traditional wisdom and peaceful learning.", + "compositional_elements": "A strong two-column structure with clearly defined content areas, decorative borders, and subtle natural imagery creates a balanced, harmonious reading experience." + }, + "artistic_context": { + "style_influences": "Traditional East Asian aesthetics, minimalist web design, scroll-like information architecture", + "visual_metaphors": "Garden as knowledge cultivation, path as learning journey, framed panels as stepping stones" + }, + "categories": [ + "traditional", + "instructional", + "minimalist", + "structured", + "contemplative", + "two-column" + ], + "visual_characteristics": [ + "burgundy-borders", + "floral-motifs", + "cream-background", + "hierarchical-typography", + "framed-sections", + "decorative-dividers" + ], + "design_principles": { + "primary_principles": [ + "visual hierarchy", + "harmony", + "contrast", + "framing" + ], + "visual_techniques": [ + "bordered panels", + "typographic scale", + "natural imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/034/metadata.json b/src/data/detailed/034/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..13ee8ecd4f677ca04cfe8fb2d47329f2a0bfa043 --- /dev/null +++ b/src/data/detailed/034/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "034", + "url": "https://www.csszengarden.com/034", + "css_url": "https://www.csszengarden.com/034/034.css", + "title": "zengrounds", + "author": "Andrea Piernock", + "description": { + "summary": "A nostalgic web design showcasing a dark-themed educational interface with golden accents, combining early 2000s aesthetics with structured content organization to demonstrate CSS capabilities.", + "visual_style": "Deliberately retro design with a black background, gold heading typography, and segmented content panels that evoke early web design practices while maintaining functional clarity.", + "emotional_impact": "Creates a sense of digital nostalgia through its vintage web interface elements, balanced by an authoritative and educational tone established through structured layout and hierarchical information.", + "compositional_elements": "Three-column layout with a prominent header, distinct content sections marked by decorative dividers, and consistent typographic hierarchy throughout nested content blocks." + }, + "artistic_context": { + "style_influences": "Early web design aesthetics, Y2K-era interfaces, tech-oriented documentation sites, Japanese zen philosophy visual metaphors", + "visual_metaphors": "Digital garden as cultivated knowledge space, enlightenment path through structured learning" + }, + "categories": [ + "retro-digital", + "educational", + "structured", + "dark-themed", + "technical", + "nostalgic" + ], + "visual_characteristics": [ + "gold-black contrast", + "sectioned-content", + "pixel-graphics", + "decorative-dividers", + "hierarchical-typography", + "cartoon-illustration" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "consistency", + "emphasis" + ], + "visual_techniques": [ + "content compartmentalization", + "navigational framing", + "decorative header treatment" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/035/metadata.json b/src/data/detailed/035/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f36ad53a291059f6e5be87705d60aeebea7dbf95 --- /dev/null +++ b/src/data/detailed/035/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "035", + "url": "https://www.csszengarden.com/035", + "css_url": "https://www.csszengarden.com/035/035.css", + "title": "Release One", + "author": "Didier Hilhorst", + "description": { + "summary": "A structured web design showcase featuring a vibrant color-blocked layout that demonstrates CSS styling capabilities through various design themes.", + "visual_style": "The design employs a modular grid system with distinct color-coded sections, combining vibrant lime green headers with neutral content areas for a balanced technical aesthetic.", + "emotional_impact": "Creates a sense of organized creativity through its systematic layout while using bold color accents to energize what is otherwise an educational interface.", + "compositional_elements": "Structured into clear horizontal bands with a consistent vertical rhythm, using color blocking to separate functional areas and create visual hierarchy." + }, + "artistic_context": { + "style_influences": "Web design minimalism, Swiss/International style grid systems, digital-era color blocking", + "visual_metaphors": "Gardens as structured but organic spaces, pathways through knowledge, building blocks of design" + }, + "categories": [ + "grid-based", + "modular", + "minimalist", + "educational", + "technical", + "high-contrast" + ], + "visual_characteristics": [ + "color-blocking", + "structured-layout", + "typographic-hierarchy", + "vibrant-accents", + "sectional-organization", + "white-space-management" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "alignment" + ], + "visual_techniques": [ + "color coding", + "modular grid", + "typographic scaling" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/036/metadata.json b/src/data/detailed/036/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..17444de52baab26111d67f7521846bf6b242afd2 --- /dev/null +++ b/src/data/detailed/036/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "036", + "url": "https://www.csszengarden.com/036", + "css_url": "https://www.csszengarden.com/036/036.css", + "title": "White Lily", + "author": "Jens Kristensen", + "description": { + "summary": "A clean, structured web design that combines a vibrant natural imagery header with a minimalist content layout to demonstrate CSS design principles", + "visual_style": "The design employs a balanced contrast between organic imagery and structured grid-based content, using a restrained color palette with strategic accent colors", + "emotional_impact": "Creates a serene, contemplative atmosphere through the lily flower imagery and generous white space, evoking a sense of clarity and purpose", + "compositional_elements": "Features a horizontal band header with nature photography, followed by a two-column layout with clear vertical sections separated by subtle dividers" + }, + "artistic_context": { + "style_influences": "Zen minimalism, digital modernism, nature-inspired design", + "visual_metaphors": "Blooming flower suggesting growth and enlightenment, structured columns representing order and clarity" + }, + "categories": [ + "minimalist", + "structured", + "nature-inspired", + "educational", + "grid-based", + "hierarchical" + ], + "visual_characteristics": [ + "two-column layout", + "nature photography", + "white space", + "accent colors", + "typographic hierarchy", + "sectional dividers" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "unity" + ], + "visual_techniques": [ + "framing", + "negative space", + "color blocking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/037/metadata.json b/src/data/detailed/037/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..65e244fcd53bfdae8a222b723d0e687513935bb1 --- /dev/null +++ b/src/data/detailed/037/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "037", + "url": "https://www.csszengarden.com/037", + "css_url": "https://www.csszengarden.com/037/037.css", + "title": "pret-a-porter", + "author": "Minz Meyer", + "description": { + "summary": "A minimalist web design showcase that balances structured grid layout with subtle organic elements, creating a harmonious blend of technical precision and zen-like simplicity.", + "visual_style": "The design adopts a clean, structured approach with a muted color palette, organized content blocks, and thoughtful use of typography to create a professional yet calming aesthetic.", + "emotional_impact": "Creates a sense of order and tranquility through balanced composition, generous whitespace, and subtle color accents that guide the viewer through a structured information journey.", + "compositional_elements": "Employs a modular grid system with distinct horizontal content sections, sidebar navigation, and harmonious text-to-space ratios that create visual rhythm." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Japanese zen aesthetics, early 2000s CSS showcase sites, modular grid systems", + "visual_metaphors": "Garden as organized structure, pathway to enlightenment, natural versus technical elements" + }, + "categories": [ + "minimalist", + "grid-based", + "functional", + "organized", + "zen-inspired", + "educational" + ], + "visual_characteristics": [ + "horizontal content blocks", + "muted color palette", + "sidebar navigation", + "typographic hierarchy", + "organic accent elements", + "structured whitespace" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "unity" + ], + "visual_techniques": [ + "grid layout", + "color blocking", + "whitespace utilization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/038/metadata.json b/src/data/detailed/038/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..16e2b43aa28b8e91b4906190fd061d39f8f676b7 --- /dev/null +++ b/src/data/detailed/038/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "038", + "url": "https://www.csszengarden.com/038", + "css_url": "https://www.csszengarden.com/038/038.css", + "title": "Creepy Crawly", + "author": "Luke Redpath", + "description": { + "summary": "A harmonious web design employing a nature-inspired aesthetic with a Zen garden theme, combining organic imagery with structured layout elements to create a serene, educational experience.", + "visual_style": "The design merges organic natural elements with clean, structured typography and a muted color palette, creating a balanced tension between natural and digital worlds.", + "emotional_impact": "The design evokes tranquility and contemplation through its earthy color scheme, spacious layout, and nature-inspired header imagery.", + "compositional_elements": "A clear vertical hierarchy guides the viewer from the natural spider imagery header through distinct content sections, using consistent spacing and alignment to create rhythm." + }, + "artistic_context": { + "style_influences": "Japanese garden aesthetics, minimalist web design, natural-digital fusion", + "visual_metaphors": "Garden as learning environment, path to enlightenment, organic growth of knowledge" + }, + "categories": [ + "minimalist", + "nature-inspired", + "educational", + "structured", + "zen-aesthetic", + "harmonious" + ], + "visual_characteristics": [ + "muted-palette", + "hierarchical-layout", + "organic-header", + "structured-typography", + "vertical-rhythm", + "negative-space" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "contrast", + "unity" + ], + "visual_techniques": [ + "natural textures", + "structured grid", + "tonal harmony" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/039/metadata.json b/src/data/detailed/039/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..49eaae12f9bcd71eec22750ccc13ca4b7602614e --- /dev/null +++ b/src/data/detailed/039/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "039", + "url": "https://www.csszengarden.com/039", + "css_url": "https://www.csszengarden.com/039/039.css", + "title": "Erratic Blue", + "author": "Ian Main", + "description": { + "summary": "A minimalist web design featuring a calming blue color palette with a grid-based layout that demonstrates principles of CSS-based design through visual clarity and structured content blocks.", + "visual_style": "Clean, structured layout with a prominent header and clearly delineated content sections organized in horizontal bands with subtle gradients.", + "emotional_impact": "Serene and orderly atmosphere created through the use of cool blue tones and ample white space, evoking a sense of calm and methodical organization.", + "compositional_elements": "Two-column layout with primary content in wider left column and supplementary content in narrower right sidebar, creating a balanced asymmetrical composition with clear visual hierarchy." + }, + "artistic_context": { + "style_influences": "Web 2.0 minimalism, early 2000s digital aesthetics, Japanese zen-inspired simplicity", + "visual_metaphors": "Garden as cultivation of design, flowing water in blue gradients, path of enlightenment through structured spaces" + }, + "categories": [ + "minimalist", + "grid-based", + "monochromatic", + "functional", + "educational", + "zen-inspired" + ], + "visual_characteristics": [ + "blue gradient backgrounds", + "two-column layout", + "section headers", + "typographic contrast", + "horizontal banding", + "subtle grid texture" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "simplicity" + ], + "visual_techniques": [ + "color blocking", + "typographic scaling", + "white space utilization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/040/metadata.json b/src/data/detailed/040/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..ca3ceb51b90d106d3033c0bd6051456ee031e9f1 --- /dev/null +++ b/src/data/detailed/040/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "040", + "url": "https://www.csszengarden.com/040", + "css_url": "https://www.csszengarden.com/040/040.css", + "title": "The Question Why", + "author": "Diane Clayton", + "description": { + "summary": "A dark, atmospheric web design with a monochromatic background juxtaposed against structured content panels. The design uses an asymmetrical layout with strong typographic contrast and selective yellow highlighting for navigation elements.", + "visual_style": "The design employs a minimalist, industrial aesthetic with a dark monochromatic base. Abstract background textures create depth while rectangular content panels provide structural organization.", + "emotional_impact": "Creates a contemplative, intellectual atmosphere through its high-contrast dark palette and deliberate spacing. The selective use of bright yellow against dark backgrounds creates tension and draws attention.", + "compositional_elements": "Organized in a vertical flow with a distinctive header area featuring angled typography. Left-aligned navigation panels contrast with centered content boxes, creating a deliberate asymmetrical balance." + }, + "artistic_context": { + "style_influences": "Modernist web design, industrial aesthetics, brutalist digital interfaces, monochromatic photography", + "visual_metaphors": "Digital zen garden, pathway through darkness, architectural structure" + }, + "categories": [ + "minimalist", + "high-contrast", + "grid-based", + "industrial", + "monochromatic", + "brutalist" + ], + "visual_characteristics": [ + "dark-background", + "textured-surfaces", + "selective-highlighting", + "angular-typography", + "panel-based-layout", + "asymmetrical-balance" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "asymmetry", + "emphasis" + ], + "visual_techniques": [ + "selective coloration", + "textural layering", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/041/metadata.json b/src/data/detailed/041/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8032c38461bb3a0cd78c85b4215a3abd302f7b43 --- /dev/null +++ b/src/data/detailed/041/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "041", + "url": "https://www.csszengarden.com/041", + "css_url": "https://www.csszengarden.com/041/041.css", + "title": "door to my garden", + "author": "Patrick Lauke", + "description": { + "summary": "A minimalist web design featuring high contrast black and white aesthetics with a textured window background and transparent overlaid menu panels that create visual depth and spatial hierarchy.", + "visual_style": "The design employs a stark monochromatic palette with subtle textural elements, creating a contemplative, zen-inspired visual language that balances negative space with structured text blocks.", + "emotional_impact": "The dark, meditative atmosphere evokes a sense of calm focus and intellectual clarity, enhanced by the contrast between the shadowy background and illuminated text.", + "compositional_elements": "Layered transparent panels create dimensional depth against the textured window backdrop, with carefully structured text blocks and subtle curved bracket elements providing organic counterpoints to the geometric layout." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, early digital interface design, monochromatic photography", + "visual_metaphors": "Window as portal to knowledge, transparency as clarity of thought, organic curves against rigid structure" + }, + "categories": [ + "minimalist", + "monochromatic", + "textural", + "zen-inspired", + "transparent", + "grid-based" + ], + "visual_characteristics": [ + "high-contrast", + "layered-transparency", + "textured-background", + "typographic-hierarchy", + "negative-space", + "bracket-motifs" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "unity" + ], + "visual_techniques": [ + "transparency", + "textural contrast", + "spatial layering" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/043/metadata.json b/src/data/detailed/043/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0f63a2689a86bd7bd1a8b3d555ca98ac77d2ab79 --- /dev/null +++ b/src/data/detailed/043/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "043", + "url": "https://www.csszengarden.com/043", + "css_url": "https://www.csszengarden.com/043/043.css", + "title": "Burning", + "author": "Kevin & Ethel Davis", + "description": { + "summary": "A zen-inspired web design featuring an artistic abstract painting alongside structured textual content, creating a harmonious balance between organic artistry and technical precision.", + "visual_style": "The design employs a subdued earth-tone palette with an artistic abstract painting as a focal element, juxtaposed against structured content blocks in a minimalist layout.", + "emotional_impact": "The combination of organic artistic elements with ordered content creates a contemplative, serene atmosphere that evokes tranquility while maintaining functionality.", + "compositional_elements": "The layout is divided into distinct vertical sections with the artistic element occupying the top-right quadrant, while text blocks in muted green panels create a strong vertical rhythm." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, abstract expressionism, minimalist web design", + "visual_metaphors": "Path to enlightenment, garden as structured growth, organic versus structured forms" + }, + "categories": [ + "minimalist", + "zen-inspired", + "earthy", + "structured", + "artistic", + "functional" + ], + "visual_characteristics": [ + "abstract-painting", + "earth-tone-palette", + "panel-based-layout", + "typographic-hierarchy", + "negative-space", + "vertical-rhythm" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "hierarchy", + "unity" + ], + "visual_techniques": [ + "textural juxtaposition", + "color harmony", + "grid-based organization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/044/metadata.json b/src/data/detailed/044/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..dc0689ac559b1df290da49e85d304aba50edfda7 --- /dev/null +++ b/src/data/detailed/044/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "044", + "url": "https://www.csszengarden.com/044", + "css_url": "https://www.csszengarden.com/044/044.css", + "title": "si6", + "author": "Shaun Inman", + "description": { + "summary": "A minimalist web design featuring a clean, structured layout with a distinctive yellow highlight band and subtle architectural photography as background elements.", + "visual_style": "The design employs a modernist approach with asymmetrical balance, emphasizing negative space and typographic hierarchy to create a sense of order and clarity.", + "emotional_impact": "Creates a calm, meditative atmosphere through ample white space and selective use of vibrant yellow against neutral tones, conveying both zen-like simplicity and technical precision.", + "compositional_elements": "Organized in a vertical column structure with clear section demarcations, featuring a striking yellow highlight band across the top section that serves as a focal point against the predominantly white background." + }, + "artistic_context": { + "style_influences": "Bauhaus, Swiss modernism, Japanese minimalism, architectural photography", + "visual_metaphors": "Structure as foundation, light as enlightenment, space as clarity, contrast as focus" + }, + "categories": [ + "minimalist", + "grid-based", + "architectural", + "modernist", + "technical", + "asymmetrical" + ], + "visual_characteristics": [ + "high-contrast", + "selective-color", + "geometric", + "negative-space", + "typographic-hierarchy", + "monochromatic-with-accent" + ], + "design_principles": { + "primary_principles": [ + "balance", + "emphasis", + "hierarchy", + "contrast" + ], + "visual_techniques": [ + "selective highlighting", + "sectional organization", + "photographic integration" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/045/metadata.json b/src/data/detailed/045/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..757812c9600f456496bff70a5f12ab40bdddeee9 --- /dev/null +++ b/src/data/detailed/045/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "045", + "url": "https://www.csszengarden.com/045", + "css_url": "https://www.csszengarden.com/045/045.css", + "title": "I Dream in Colour", + "author": "Jeff Bilen", + "description": { + "summary": "A minimalist web design that blends Eastern-inspired aesthetics with clean, functional layout principles, featuring a subtle lily flower graphic as a decorative element against a predominantly white background.", + "visual_style": "The design employs a serene, understated approach with careful typography placement and generous white space, creating a calm, meditative visual experience.", + "emotional_impact": "The composition evokes tranquility and clarity through its balanced structure, subtle floral imagery, and restrained color palette.", + "compositional_elements": "The layout uses a well-defined grid system with clear content blocks, hierarchical typography, and strategic positioning of decorative elements that frame rather than overwhelm the content." + }, + "artistic_context": { + "style_influences": "Minimalism, Japanese design principles, traditional scroll layout", + "visual_metaphors": "Garden as knowledge cultivation, blooming flower as creative growth, path as learning journey" + }, + "categories": [ + "minimalist", + "elegant", + "grid-based", + "monochromatic", + "nature-inspired", + "zen" + ], + "visual_characteristics": [ + "botanical illustration", + "negative space", + "typographic hierarchy", + "column layout", + "delicate line work", + "faded imagery" + ], + "design_principles": { + "primary_principles": [ + "balance", + "whitespace", + "hierarchy", + "simplicity" + ], + "visual_techniques": [ + "framing", + "subtle contrast", + "visual anchoring" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/046/metadata.json b/src/data/detailed/046/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0bcf3c3cbb80c5ecea9cb03ab39f3e23f507e259 --- /dev/null +++ b/src/data/detailed/046/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "046", + "url": "https://www.csszengarden.com/046", + "css_url": "https://www.csszengarden.com/046/046.css", + "title": "sub:lime", + "author": "Andy Budd", + "description": { + "summary": "A structured, educational web design showcasing a clean two-column layout with a harmonious color palette of greens, yellows, and neutrals", + "visual_style": "Minimal and functional design approach with clear section delineation and hierarchical organization of content", + "emotional_impact": "Calm, meditative atmosphere created through soft green tones and ample white space, evoking the 'zen' theme", + "compositional_elements": "Two-column structure with clearly defined navigation sidebar and content area, using consistent header treatments and subtle separators" + }, + "artistic_context": { + "style_influences": "Early 2000s web design aesthetic with modern minimalist sensibilities", + "visual_metaphors": "Garden as a metaphor for cultivation and growth, expressed through the green color palette and organic header imagery" + }, + "categories": [ + "minimalist", + "structured", + "educational", + "grid-based", + "functional", + "zen-inspired" + ], + "visual_characteristics": [ + "green-yellow color scheme", + "two-column layout", + "section headers", + "consistent typography", + "subtle gradients", + "natural imagery" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "unity", + "clarity" + ], + "visual_techniques": [ + "color blocking", + "typographic contrast", + "consistent spacing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/047/metadata.json b/src/data/detailed/047/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..30c5baa7828fe320c34da4adcbb51b9686f122de --- /dev/null +++ b/src/data/detailed/047/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "047", + "url": "https://www.csszengarden.com/047", + "css_url": "https://www.csszengarden.com/047/047.css", + "title": "dusk", + "author": "Jon Hicks", + "description": { + "summary": "A minimalist web design showcasing the CSS Zen Garden project with a clean, modern aesthetic combining soft organic shapes with structured information presentation", + "visual_style": "The design employs a harmonious blend of organic green elements against a muted gray background, creating a zen-like atmosphere while maintaining functional clarity", + "emotional_impact": "Creates a sense of calm enlightenment through the balance of vibrant green accents against subdued tones, evoking natural growth and technical precision", + "compositional_elements": "Features asymmetrical balance with organic green shapes on the left contrasting with structured text layout on the right, creating visual flow through color and hierarchical spacing" + }, + "artistic_context": { + "style_influences": "Minimalist web design, organic modernism, digital zen aesthetics", + "visual_metaphors": "Growing garden (represented by green organic shapes), path to enlightenment (flowing design elements), structure and beauty (ordered layout with organic accents)" + }, + "categories": [ + "minimalist", + "organic", + "digital-zen", + "asymmetrical", + "structured-elegance", + "web-centric" + ], + "visual_characteristics": [ + "gradient-green-accents", + "gray-background", + "hierarchical-typography", + "barcode-elements", + "organic-shapes", + "clean-whitespace" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "asymmetrical balance", + "hierarchy", + "simplicity" + ], + "visual_techniques": [ + "color accents", + "negative space", + "typographic structure" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/048/metadata.json b/src/data/detailed/048/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..50bd9609eeb9ad0c4aeb4225a5ee799d519e033f --- /dev/null +++ b/src/data/detailed/048/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "048", + "url": "https://www.csszengarden.com/048", + "css_url": "https://www.csszengarden.com/048/048.css", + "title": "HoriZental", + "author": "Cl\u00e9ment 'fastclemmy' Hardouin", + "description": { + "summary": "A clean, structured web design for a CSS/design educational resource combining floral imagery with an organized information layout", + "visual_style": "The design employs a minimalist approach with clearly defined content sections balanced by organic floral imagery", + "emotional_impact": "Creates a serene, instructional atmosphere through the juxtaposition of natural elements and structured information", + "compositional_elements": "Features a tripartite layout with vertical navigation on the left, content in the center, and resources on the right, unified by a consistent color palette" + }, + "artistic_context": { + "style_influences": "Zen-inspired design, minimalist web aesthetics, nature-technology integration", + "visual_metaphors": "Blooming flowers suggesting growth and learning, structured content suggesting organized pathways to knowledge" + }, + "categories": [ + "minimalist", + "educational", + "nature-inspired", + "structured", + "zen-aesthetic", + "instructional" + ], + "visual_characteristics": [ + "soft-color-palette", + "floral-imagery", + "multi-column-layout", + "clear-typography", + "balanced-negative-space" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "unity" + ], + "visual_techniques": [ + "color blocking", + "natural imagery", + "structured grid" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/049/metadata.json b/src/data/detailed/049/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b19b3b325f880817c2b301dea6de84f22c8db7c1 --- /dev/null +++ b/src/data/detailed/049/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "049", + "url": "https://www.csszengarden.com/049", + "css_url": "https://www.csszengarden.com/049/049.css", + "title": "Buddha", + "author": "Daniel Leroux", + "description": { + "summary": "A minimalist, educational web interface designed with a zen-inspired aesthetic, combining a light color palette with structured information hierarchy and symbolic imagery", + "visual_style": "Clean and structured layout with a deliberate use of white space, subtle grid patterns, and considered typography that embodies simplicity and clarity", + "emotional_impact": "Creates a calm, contemplative atmosphere through balanced negative space, muted colors, and philosophical visual metaphors", + "compositional_elements": "Two-column layout with a narrow navigation sidebar and wider content area, using subtle dividers and yellow accent elements to create visual rhythm" + }, + "artistic_context": { + "style_influences": "Minimalism, Eastern aesthetic philosophy, technical documentation design", + "visual_metaphors": "The Buddha statue represents enlightenment and wisdom, complementing the 'zen garden' concept as a space for clarity and learning" + }, + "categories": [ + "minimalist", + "educational", + "structured", + "zen-inspired", + "technical" + ], + "visual_characteristics": [ + "limited-color-palette", + "hierarchical-typography", + "symbolic-imagery", + "grid-based", + "high-legibility", + "negative-space" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "simplicity", + "clarity" + ], + "visual_techniques": [ + "typographic contrast", + "spatial organization", + "accent coloring" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/050/metadata.json b/src/data/detailed/050/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..2d99ea004bf683e34bf966cc6f89d18a7d611064 --- /dev/null +++ b/src/data/detailed/050/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "050", + "url": "https://www.csszengarden.com/050", + "css_url": "https://www.csszengarden.com/050/050.css", + "title": "First Summary", + "author": "Cornelia Lange", + "description": { + "summary": "A modular grid-based web design that combines organic imagery with structured layout to showcase the aesthetics of CSS design. The layout uses color blocking and nature photography to create visual interest within a structured framework.", + "visual_style": "The design employs a multi-column grid system with distinct color-coded sections, integrating a mosaic of nature imagery with structured typography to demonstrate how technical structure can produce visual beauty.", + "emotional_impact": "The juxtaposition of organic natural elements against a structured grid creates a harmonious tension between order and nature, suggesting that technical constraints can still yield aesthetic results.", + "compositional_elements": "The composition is divided into clear vertical columns with a horizontal image grid at top, creating a framework that balances structured information with visual breathing space." + }, + "artistic_context": { + "style_influences": "Modernist grid systems, collage techniques, color blocking principles", + "visual_metaphors": "Garden as structure, natural elements representing organic design potential within technical constraints" + }, + "categories": [ + "grid-based", + "modular", + "organic-geometric", + "instructional", + "collage", + "color-blocked" + ], + "visual_characteristics": [ + "nature photography", + "columnar layout", + "color-coding", + "image mosaic", + "typographic hierarchy", + "sidebar navigation" + ], + "design_principles": { + "primary_principles": [ + "balance", + "contrast", + "modularity", + "hierarchy" + ], + "visual_techniques": [ + "color blocking", + "image grid", + "asymmetrical balance" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/051/metadata.json b/src/data/detailed/051/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..781bf153353cd0e08036753d8f47aa64561f0d30 --- /dev/null +++ b/src/data/detailed/051/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "051", + "url": "https://www.csszengarden.com/051", + "css_url": "https://www.csszengarden.com/051/051.css", + "title": "Commercial Drive", + "author": "Wendy Foster", + "description": { + "summary": "A vibrant web design showcasing a stylized illustration of a figure against a bold color-blocked layout with distinct vertical text columns.", + "visual_style": "The design employs a striking retro-punk aesthetic with sharp color contrasts, combining illustration with structured information blocks.", + "emotional_impact": "The bold color scheme and punk-influenced illustration create an energetic, rebellious atmosphere that challenges traditional web design conventions.", + "compositional_elements": "The layout uses a three-part structure with an illustrative area on the left, a vertical navigation menu, and content blocks against a gradient background." + }, + "artistic_context": { + "style_influences": "Punk zine culture, pop art, Japanese manga, late 90s/early 2000s web aesthetics", + "visual_metaphors": "Digital rebellion, artistic freedom, structural transformation" + }, + "categories": [ + "experimental", + "punk-digital", + "high-contrast", + "illustrative", + "retro-web" + ], + "visual_characteristics": [ + "gradient-background", + "sectioned-columns", + "manga-inspired-illustration", + "color-blocking", + "bold-typography", + "vertical-rhythm" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "emphasis", + "rhythm" + ], + "visual_techniques": [ + "color-blocking", + "figure-ground relationship", + "typographic grid" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/052/metadata.json b/src/data/detailed/052/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..2c65a5623c01c6301ac6e51fd51eabd091264262 --- /dev/null +++ b/src/data/detailed/052/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "052", + "url": "https://www.csszengarden.com/052", + "css_url": "https://www.csszengarden.com/052/052.css", + "title": "Postage Paid", + "author": "Mike Stenhouse", + "description": { + "summary": "A tactile, textured web design layout mimicking a physical bulletin board with paper notes and elements pinned onto a kraft paper background, creating an analog feel in digital space.", + "visual_style": "The design employs a collage-like aesthetic with distinct rectangular elements arranged on a textured background, combining nostalgic physical media references with digital functionality.", + "emotional_impact": "The warm kraft paper tones and handwritten-style elements evoke a sense of craftsmanship and accessibility, balancing structure with an approachable, artisanal quality.", + "compositional_elements": "The composition features a collection of distinct rectangular content blocks arranged in an asymmetrical but balanced layout, with contrasting color blocks creating visual interest and hierarchy." + }, + "artistic_context": { + "style_influences": "Material design, skeuomorphism, mid-century modern, DIY bulletin board aesthetics", + "visual_metaphors": "Bulletin board, mixed media collage, pinned notes, vintage postcard" + }, + "categories": [ + "skeuomorphic", + "textural", + "modular", + "vintage-inspired", + "collage", + "hand-crafted" + ], + "visual_characteristics": [ + "kraft-paper background", + "modular content blocks", + "contrasting color panels", + "barcode graphic elements", + "red stamp accents", + "layered composition" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "texture", + "modularity" + ], + "visual_techniques": [ + "color blocking", + "textural juxtaposition", + "visual metaphor" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/053/metadata.json b/src/data/detailed/053/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..662101bf532996d123b59f7cf319f8f79975ffa1 --- /dev/null +++ b/src/data/detailed/053/metadata.json @@ -0,0 +1,44 @@ +{ + "id": "053", + "url": "https://www.csszengarden.com/053", + "css_url": "https://www.csszengarden.com/053/053.css", + "title": "untitled", + "author": "Ray Henry", + "description": { + "summary": "A minimalist, text-heavy web design featuring a structured grid layout with clear content organization and muted color palette, demonstrating CSS-based design principles.", + "visual_style": "The design employs a clean, utilitarian aesthetic with emphasis on typography and white space, creating a methodical information hierarchy.", + "emotional_impact": "The sparse, academic approach creates a sense of authority and thoughtfulness, with a focus on clarity rather than emotional engagement.", + "compositional_elements": "Content is organized in a horizontal grid system with distinct column blocks, balanced text density, and minimal decorative elements." + }, + "artistic_context": { + "style_influences": "Modernist typography, digital minimalism, information design principles", + "visual_metaphors": "Structured knowledge, academic framework, design discipline" + }, + "categories": [ + "minimalist", + "grid-based", + "typographic", + "functional", + "instructional" + ], + "visual_characteristics": [ + "multi-column layout", + "text-dominant", + "monochromatic", + "negative space", + "hierarchical typography" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "clarity", + "simplicity" + ], + "visual_techniques": [ + "grid system", + "typographic contrast", + "spatial organization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/054/metadata.json b/src/data/detailed/054/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d397bb133ae9f71b4d731996ef122759cd506f91 --- /dev/null +++ b/src/data/detailed/054/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "054", + "url": "https://www.csszengarden.com/054", + "css_url": "https://www.csszengarden.com/054/054.css", + "title": "Gecko's Eye", + "author": "Sandra Greco", + "description": { + "summary": "A visually dynamic web gallery showcasing CSS design capabilities through a tri-column layout that balances vibrant imagery with structured information presentation", + "visual_style": "The design employs a playful yet structured approach with a distinctive color-blocked layout featuring organic illustrations against geometric content sections", + "emotional_impact": "The contrasting color palette creates a sense of energy and creativity while maintaining clear organization that feels both inviting and instructional", + "compositional_elements": "Three vertical columns create a strong structural rhythm with distinct color zones that guide the viewer through content hierarchically" + }, + "artistic_context": { + "style_influences": "Digital modernism with Eastern aesthetic elements visible in the dragon motif and zen-inspired naming", + "visual_metaphors": "Growth and enlightenment suggested by the garden metaphor and flowing dragon illustration" + }, + "categories": [ + "color-blocked", + "multi-column", + "instructional", + "illustrative", + "playful-professional" + ], + "visual_characteristics": [ + "vibrant color contrast", + "organic illustrations", + "structured hierarchy", + "mixed typography", + "vertical segmentation", + "horizontal dividers" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "repetition" + ], + "visual_techniques": [ + "color blocking", + "typographic variation", + "decorative illustration" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/055/metadata.json b/src/data/detailed/055/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..5e8aa849b4865182d30b1172c4eba6c2888f1a48 --- /dev/null +++ b/src/data/detailed/055/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "055", + "url": "https://www.csszengarden.com/055", + "css_url": "https://www.csszengarden.com/055/055.css", + "title": "zenlightenment", + "author": "Lance Leonard", + "description": { + "summary": "A structured web design showcasing CSS capabilities through a serene blue and yellow color scheme with a Zen-influenced aesthetic", + "visual_style": "Clean, structured layout with segmented content areas using calming blue panels and vibrant yellow sidebar", + "emotional_impact": "Tranquil yet instructive, balancing technical information with meditative visual elements", + "compositional_elements": "Multi-column layout with header banner featuring a stylized leaf icon, organized content sections with consistent heading treatments" + }, + "artistic_context": { + "style_influences": "Digital minimalism, Eastern philosophical aesthetics, information architecture", + "visual_metaphors": "Path to enlightenment represented through structured information flow, leaf symbolizing natural growth and wisdom" + }, + "categories": [ + "instructional", + "grid-based", + "minimalist", + "segmented", + "asymmetrical", + "technical" + ], + "visual_characteristics": [ + "blue-dominant", + "contrasting-sidebar", + "icon-enhanced", + "multi-column", + "banner-header", + "section-based" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "alignment" + ], + "visual_techniques": [ + "color blocking", + "icon integration", + "structured typography" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/056/metadata.json b/src/data/detailed/056/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..728bb4a30a8747f94c8a1892c155281a79a46552 --- /dev/null +++ b/src/data/detailed/056/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "056", + "url": "https://www.csszengarden.com/056", + "css_url": "https://www.csszengarden.com/056/056.css", + "title": "Zen Garden Internal Layout", + "author": "Dave Shea", + "description": { + "summary": "A minimalist, functional web design with a structured layout focused on content organization and accessibility. The interface employs a restrained color palette of blues, grays, and whites with clear typographic hierarchy.", + "visual_style": "Clean and utilitarian with an early web aesthetic, featuring segmented content areas, architectural photography, and systematic typography that emphasizes function over decoration.", + "emotional_impact": "Calm, instructional atmosphere created through ample white space, subtle blue accents, and methodical organization that conveys technical authority and accessibility.", + "compositional_elements": "Three-column layout with fixed navigation elements on the left, central content area with embedded imagery, and clear section demarcations through background color variations and horizontal dividers." + }, + "artistic_context": { + "style_influences": "Early web design principles, modernist grid systems, technical documentation layouts", + "visual_metaphors": "Architecture as structure, garden as cultivated design space, pathway to knowledge" + }, + "categories": [ + "minimalist", + "functional", + "grid-based", + "technical", + "instructional", + "utilitarian" + ], + "visual_characteristics": [ + "blue-gray color scheme", + "multi-column layout", + "architectural imagery", + "segmented content areas", + "subtle gradients", + "horizontal separators" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "clarity", + "consistency", + "accessibility" + ], + "visual_techniques": [ + "sectional contrast", + "typographic organization", + "structural framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/057/metadata.json b/src/data/detailed/057/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f7e3d80b9b4ecdee820e8c509b8d20c86a6359e8 --- /dev/null +++ b/src/data/detailed/057/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "057", + "url": "https://www.csszengarden.com/057", + "css_url": "https://www.csszengarden.com/057/057.css", + "title": "This is Cereal", + "author": "Shaun Inman", + "description": { + "summary": "A clean, text-focused web design using food metaphors and culinary imagery to present coding concepts. The layout resembles a recipe page with elegant typography and subtle food elements.", + "visual_style": "Minimalist with purposeful white space and food-themed visual elements like cereal, a spoon, and a bowl creating a peaceful, instructional aesthetic.", + "emotional_impact": "Calm, contemplative atmosphere created through ample white space, soft food imagery, and a gentle burgundy accent color suggesting a meditative approach to coding.", + "compositional_elements": "Single-column layout with hierarchical text sections, complemented by decorative food elements and subtle navigation tools positioned strategically throughout the page." + }, + "artistic_context": { + "style_influences": "Culinary publishing, zen minimalism, instructional design, traditional recipe book aesthetics", + "visual_metaphors": "Coding as nourishment, web design as cooking, learning as consumption" + }, + "categories": [ + "minimalist", + "instructional", + "metaphorical", + "single-column", + "typography-focused", + "zen-inspired" + ], + "visual_characteristics": [ + "food-imagery", + "burgundy-accents", + "ample-whitespace", + "hierarchical-typography", + "decorative-spoon-element", + "subtle-texture" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "white space", + "metaphor" + ], + "visual_techniques": [ + "photographic elements", + "typographic contrast", + "visual anchoring" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/058/metadata.json b/src/data/detailed/058/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..a43abd70e56065834f324c708ca48bfdc9bf72dc --- /dev/null +++ b/src/data/detailed/058/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "058", + "url": "https://www.csszengarden.com/058", + "css_url": "https://www.csszengarden.com/058/058.css", + "title": "Radio Zen", + "author": "Marc LA van den Heuvel", + "description": { + "summary": "A nostalgic web design that evokes vintage radio aesthetics through warm colors, retro typography, and radio dial imagery, creating a harmonious blend of digital functionality and analog charm.", + "visual_style": "The design employs a deliberate retro aesthetic with sepia tones, vintage-inspired typography, and decorative elements reminiscent of mid-century radio interfaces.", + "emotional_impact": "The warm color palette and nostalgic visual elements create a sense of familiarity and comfort, evoking a bygone era while maintaining functional clarity.", + "compositional_elements": "A hierarchical layout with radio dial header, centralized content blocks with decorative tags, and prominent branded elements at the bottom creates clear information architecture with decorative vintage flourishes." + }, + "artistic_context": { + "style_influences": "Mid-century radio design, vintage print ephemera, retro advertising layouts, analog interface styling", + "visual_metaphors": "Radio tuning as exploration, frequency bands as content organization, warm analog glow suggesting authenticity and craftsmanship" + }, + "categories": [ + "retro", + "nostalgic", + "analog-inspired", + "vintage", + "decorative", + "warm-toned" + ], + "visual_characteristics": [ + "sepia-toned palette", + "radio dial interface", + "script typography", + "decorative tabs", + "texture overlay", + "horizontal segmentation" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "nostalgia", + "metaphor" + ], + "visual_techniques": [ + "texture layering", + "ornamental typography", + "interface mimicry" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/059/metadata.json b/src/data/detailed/059/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..de104f30731d793b7673ebf12a65f4fb9ec7fcf9 --- /dev/null +++ b/src/data/detailed/059/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "059", + "url": "https://www.csszengarden.com/059", + "css_url": "https://www.csszengarden.com/059/059.css", + "title": "Dune Temple", + "author": "Greg Reimer", + "description": { + "summary": "A retro-inspired web design with a distinctive gold-amber monochromatic color scheme and geometric decorative elements that evoke early digital aesthetics", + "visual_style": "The design features a structured layout with strong geometric borders, pixel-like decorative elements, and a distinct early-web aesthetic reimagined with modern precision", + "emotional_impact": "Creates a nostalgic, contemplative atmosphere through its warm amber tones and purposefully retro styling that evokes early internet design principles", + "compositional_elements": "Organized in a traditional content hierarchy with a prominent header, two-column layout with content left and navigation right, framed by decorative geometric borders" + }, + "artistic_context": { + "style_influences": "Early web aesthetics, Japanese zen garden philosophy translated into visual elements, pixel art, vintage computing interfaces", + "visual_metaphors": "Digital contemplation space, technological garden, structured simplicity" + }, + "categories": [ + "retro", + "monochromatic", + "geometric", + "structured", + "minimalist", + "pixel-inspired" + ], + "visual_characteristics": [ + "amber-gold palette", + "geometric borders", + "pixel elements", + "two-column layout", + "decorative corners", + "horizontal section dividers" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "alignment" + ], + "visual_techniques": [ + "monochromatic color scheme", + "geometric framing", + "pixel decoration" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/060/metadata.json b/src/data/detailed/060/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..47ef5f515f943b95c9dbae09d7f00cf9fdb7d9a8 --- /dev/null +++ b/src/data/detailed/060/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "060", + "url": "https://www.csszengarden.com/060", + "css_url": "https://www.csszengarden.com/060/060.css", + "title": "Extreme Limits", + "author": "Richard Chatfield", + "description": { + "summary": "A web design showcase featuring dynamic imagery of extreme sports set against mountain backdrops, with a structured layout combining vibrant action photography and organized text content.", + "visual_style": "The design employs a contrast-heavy approach with deep blues, bright accents, and dramatic photography to create visual energy that reinforces the 'extreme' theme.", + "emotional_impact": "The juxtaposition of serene mountain landscapes with dynamic action poses creates a sense of adventure and possibility, enhanced by the bold color choices.", + "compositional_elements": "A three-panel structure divides the page with vertical sections - a sidebar, content area, and vertical title band, creating distinct functional zones that guide the viewer's journey." + }, + "artistic_context": { + "style_influences": "Early 2000s web design aesthetics with table-based layouts, high-contrast color schemes, and photographic hero elements", + "visual_metaphors": "Mountain landscapes and extreme sports imagery suggest pushing boundaries and reaching new heights" + }, + "categories": [ + "retro-web", + "high-contrast", + "photographic", + "structured", + "modular", + "panel-based" + ], + "visual_characteristics": [ + "multi-column layout", + "vertical text banners", + "action photography", + "color-coded sections", + "boxed content areas", + "dramatic color contrast" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "repetition", + "alignment", + "compartmentalization" + ], + "visual_techniques": [ + "photographic framing", + "color blocking", + "modular structure" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/061/metadata.json b/src/data/detailed/061/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..806c5d71d0de6176eaedf5b1ba3d64e37062d304 --- /dev/null +++ b/src/data/detailed/061/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "061", + "url": "https://www.csszengarden.com/061", + "css_url": "https://www.csszengarden.com/061/061.css", + "title": "Sky", + "author": "Stefan Petre", + "description": { + "summary": "A structured web design showcasing a harmonious blend of natural imagery and organized content within a three-column layout, featuring a serene cloud-filled header against deep blue navigation panels.", + "visual_style": "The design employs a balanced contrast between tranquil nature photography and structured information architecture, with thoughtful separation of functional areas through color blocking.", + "emotional_impact": "The calm sky imagery paired with deep blue navigation creates a peaceful, meditative atmosphere while maintaining professional organization and clarity.", + "compositional_elements": "The layout features a horizontal header with cloud imagery, a narrow left sidebar in deep blue for navigation, and a wider content area with clearly delineated sections marked by circular icons." + }, + "artistic_context": { + "style_influences": "Web 2.0 design, minimalist information architecture, zen-inspired natural imagery", + "visual_metaphors": "Sky and clouds suggesting enlightenment and clarity, structured panels representing organized thought" + }, + "categories": [ + "structured", + "columnar", + "nature-inspired", + "professional", + "hierarchical", + "informational" + ], + "visual_characteristics": [ + "three-column layout", + "natural header imagery", + "color-blocked sections", + "circular navigation icons", + "high text-to-image ratio", + "contrasting color panels" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "balance", + "clarity" + ], + "visual_techniques": [ + "sectioning", + "color blocking", + "iconic navigation" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/062/metadata.json b/src/data/detailed/062/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8a4e00a10002042cdf6336be27915a7ddee95118 --- /dev/null +++ b/src/data/detailed/062/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "062", + "url": "https://www.csszengarden.com/062", + "css_url": "https://www.csszengarden.com/062/062.css", + "title": "Gemination", + "author": "Egor Kloos", + "description": { + "summary": "A harmonious juxtaposition of natural imagery and digital structure, featuring a garden aesthetic paired with a multi-column layout that blends nature photography with organized textual content.", + "visual_style": "The design employs an earth-toned framework with natural garden photography supporting structured content blocks, creating a serene yet functional aesthetic that echoes its thematic title.", + "emotional_impact": "Evokes a sense of tranquility and contemplation through the combination of garden imagery, muted earth tones, and balanced spatial organization.", + "compositional_elements": "Organized into horizontal bands with a patterned header/footer, central tri-column content area, and prominent garden imagery establishing visual context and atmosphere." + }, + "artistic_context": { + "style_influences": "Traditional Japanese garden design aesthetics, early web design principles, natural-digital fusion approach", + "visual_metaphors": "Path through garden as journey through information, statue as guardian of knowledge, structured columns as organized contemplation" + }, + "categories": [ + "nature-inspired", + "structured", + "earthy", + "balanced", + "textural", + "contemplative" + ], + "visual_characteristics": [ + "patterned background", + "photographic elements", + "multi-column layout", + "earthy color palette", + "textural contrast", + "typographic hierarchy" + ], + "design_principles": { + "primary_principles": [ + "balance", + "rhythm", + "contrast", + "harmony" + ], + "visual_techniques": [ + "textural layering", + "photographic framing", + "grid-based organization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/063/metadata.json b/src/data/detailed/063/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..89a078898acf3602ca0d731821ec352d679eba11 --- /dev/null +++ b/src/data/detailed/063/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "063", + "url": "https://www.csszengarden.com/063", + "css_url": "https://www.csszengarden.com/063/063.css", + "title": "Elastic Lawn", + "author": "Patrick Griffiths", + "description": { + "summary": "A vibrant, nature-inspired web design featuring a grassy green background with distinctly structured content areas in yellow and dark brown panels.", + "visual_style": "The design employs a naturalistic aesthetic with a literal garden theme, using a textured grass pattern as the primary background with high-contrast content panels organized in a vertical flow.", + "emotional_impact": "The rich green texture evokes a sense of organic growth and natural harmony, while the yellow highlight panels create warmth and energy against the cool green backdrop.", + "compositional_elements": "The layout utilizes a clear three-column structure with a dominant center content area flanked by a narrower navigation column, all unified by the continuous textured background." + }, + "artistic_context": { + "style_influences": "Nature-inspired web design, digital zen aesthetics, organic texturalism", + "visual_metaphors": "Garden as digital space, cultivation as design practice, natural growth as learning path" + }, + "categories": [ + "nature-inspired", + "textural", + "organic", + "high-contrast", + "thematic", + "columnar" + ], + "visual_characteristics": [ + "textured-background", + "yellow-accent-panels", + "three-column-layout", + "hierarchical-typography", + "ornamental-headers", + "natural-patterning" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "repetition", + "alignment", + "theme-consistency" + ], + "visual_techniques": [ + "textural depth", + "color blocking", + "hierarchical spacing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/064/metadata.json b/src/data/detailed/064/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..2e05228f84695f01f4a3c30062f2264b3551c02f --- /dev/null +++ b/src/data/detailed/064/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "064", + "url": "https://www.csszengarden.com/064", + "css_url": "https://www.csszengarden.com/064/064.css", + "title": "Night Drive", + "author": "Dave Shea", + "description": { + "summary": "A dark, sophisticated web design featuring a split layout with urban nighttime photography and minimalist navigation against a black background with gold and amber accent text.", + "visual_style": "The design employs a stark contrast between the dark background and luminous text elements, creating a night-themed aesthetic with an emphasis on contemplative simplicity.", + "emotional_impact": "The dark color scheme paired with the urban night imagery evokes a sense of calm sophistication and technical refinement, suggesting both depth and clarity.", + "compositional_elements": "The layout is divided into a vertical split with photographic cityscape imagery on the left and structured textual content on the right, creating clear visual hierarchy and organized information flow." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Asian-inspired aesthetic, urban photography, technical documentation styling", + "visual_metaphors": "Light trails in darkness suggesting paths to knowledge, illumination emerging from darkness, structured simplicity" + }, + "categories": [ + "minimalist", + "dark-themed", + "split-layout", + "technical-aesthetic", + "zen-inspired", + "urban" + ], + "visual_characteristics": [ + "high-contrast", + "gold-amber accents", + "night photography", + "hierarchical typography", + "dark background", + "clean spacing" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "simplicity" + ], + "visual_techniques": [ + "negative space", + "typographic scaling", + "color restriction" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/065/metadata.json b/src/data/detailed/065/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9fa49e259cca4f5f12388cebdcba90fc2ec2a2ed --- /dev/null +++ b/src/data/detailed/065/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "065", + "url": "https://www.csszengarden.com/065", + "css_url": "https://www.csszengarden.com/065/065.css", + "title": "New Groove", + "author": "Martin Neumann", + "description": { + "summary": "A nostalgic web design showcase featuring a soft-colored, sectioned layout that demonstrates CSS styling capabilities through a zen garden concept", + "visual_style": "Early 2000s web design aesthetic with pastel colors, rounded elements, and a structured multi-column layout that combines whimsical decorative elements with functional information sections", + "emotional_impact": "Evokes a sense of calm and creativity through its soft color palette, organic flower icons, and contemplative design approach", + "compositional_elements": "Organized into clear content blocks with a header-sidebar-main content structure, utilizing visual anchors like floral motifs and colored section headers" + }, + "artistic_context": { + "style_influences": "Web 2.0 design era, Japanese zen aesthetics through simplified forms, early CSS demonstration sites", + "visual_metaphors": "Garden as creative growth, path to enlightenment, flowers as blooming creativity" + }, + "categories": [ + "nostalgic", + "instructional", + "organic", + "pastel", + "structured", + "whimsical" + ], + "visual_characteristics": [ + "rounded-corners", + "multi-column-layout", + "flower-motifs", + "purple-green-palette", + "sidebar-navigation", + "gradient-backgrounds" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "repetition", + "contrast", + "alignment" + ], + "visual_techniques": [ + "color-blocking", + "decorative-icons", + "section-delineation" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/066/metadata.json b/src/data/detailed/066/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0d75923b4798c3ec6be3bc4ac80bbd57da832168 --- /dev/null +++ b/src/data/detailed/066/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "066", + "url": "https://www.csszengarden.com/066", + "css_url": "https://www.csszengarden.com/066/066.css", + "title": "Focus & Shoot", + "author": "Colectivo YTW (Julio Beamonte, Beatriz Martinez, Gustavo Gavan, Franck Scipion)", + "description": { + "summary": "A complex multi-layered web interface that combines photography with a technical grid-based layout and HUD-like elements, creating a blend of digital functionality and artistic documentation", + "visual_style": "The design merges documentary photography with digital interface elements, utilizing overlays, frames, and technical indicators to create a camera/recording aesthetic", + "emotional_impact": "Creates tension between the organic human subject in the background and the mechanical, technical elements in the foreground, evoking a sense of digital documentation and surveillance", + "compositional_elements": "Structured with multiple content blocks arranged in a complex grid system, featuring navigation panels, information boxes, and technical overlays superimposed on a photographic background" + }, + "artistic_context": { + "style_influences": "Technical user interface design, military HUD displays, documentary photography, early 2000s web aesthetics", + "visual_metaphors": "Digital viewfinder, recording device, surveillance system, technical documentation" + }, + "categories": [ + "technical", + "grid-based", + "layered", + "documentary", + "interface-driven", + "high-contrast" + ], + "visual_characteristics": [ + "target/crosshair overlays", + "red-white-black color scheme", + "boxed information panels", + "technical indicators", + "framed photography", + "typography-heavy layout" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "layering", + "repetition" + ], + "visual_techniques": [ + "overlay", + "framing", + "grid structure" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/067/metadata.json b/src/data/detailed/067/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0da24a7e78b44677a0827bd74ed1206f96d652ca --- /dev/null +++ b/src/data/detailed/067/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "067", + "url": "https://www.csszengarden.com/067", + "css_url": "https://www.csszengarden.com/067/067.css", + "title": "A Silent Strength", + "author": "Ray Henry", + "description": { + "summary": "A sophisticated web design featuring a textured sage-green border framing a clean content area with well-structured typography and navigation elements.", + "visual_style": "The design blends organic textures with structured layout, creating a harmonious balance between natural elements and digital organization.", + "emotional_impact": "Evokes a sense of tranquility and contemplation through its earthy color palette and spacious layout, reinforcing its zen-inspired aesthetic.", + "compositional_elements": "Organized as a two-column layout with a navigation sidebar and main content area, unified by consistent typographic hierarchy and framed by textured borders." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, minimalist web design, organic textural art", + "visual_metaphors": "Garden as digital space, pathways through content, natural growth and structure" + }, + "categories": [ + "minimalist", + "textural", + "zen-inspired", + "organic", + "structured", + "earthy" + ], + "visual_characteristics": [ + "textured-borders", + "two-column-layout", + "typographic-hierarchy", + "monochromatic-palette", + "natural-textures", + "white-space" + ], + "design_principles": { + "primary_principles": [ + "balance", + "contrast", + "hierarchy", + "unity" + ], + "visual_techniques": [ + "texture-framing", + "negative-space", + "typographic-scale" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/068/metadata.json b/src/data/detailed/068/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..11480f71cf25872ee0e3f6c00bc967b572139ec6 --- /dev/null +++ b/src/data/detailed/068/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "068", + "url": "https://www.csszengarden.com/068", + "css_url": "https://www.csszengarden.com/068/068.css", + "title": "Ballade", + "author": "Charlotte Lambert", + "description": { + "summary": "A zen-inspired web design featuring a natural earth-tone color palette with contrasting black and white elements, organized in a traditional vertical scroll layout with illustrated Japanese garden motifs.", + "visual_style": "The design employs a minimal aesthetic with clear visual boundaries, combining Eastern artistic sensibilities with digital structure through ink-wash style illustrations and defined content areas.", + "emotional_impact": "Creates a sense of contemplative calm through its earthy background color, deliberate white space, and natural elements that evoke traditional East Asian landscape paintings.", + "compositional_elements": "Structured as a vertical scroll with distinct content sections framed by decorative borders, ink-brush illustrations, and a strong contrast between the tan background and black navigation elements." + }, + "artistic_context": { + "style_influences": "Japanese garden design, traditional East Asian ink painting, minimalist composition", + "visual_metaphors": "Path through a garden representing learning journey, gateway arches symbolizing transitions, brush-painted elements suggesting natural harmony" + }, + "categories": [ + "minimalist", + "nature-inspired", + "east-asian", + "structured", + "high-contrast", + "illustrative" + ], + "visual_characteristics": [ + "earth-tone palette", + "brush-stroke illustrations", + "framed content blocks", + "ornamental borders", + "pathway motifs", + "negative space" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "harmony" + ], + "visual_techniques": [ + "framing", + "illustrated accents", + "spatial zoning" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/069/metadata.json b/src/data/detailed/069/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..6ba1bf2f78a5405278a0617c9ff1591c5f979066 --- /dev/null +++ b/src/data/detailed/069/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "069", + "url": "https://www.csszengarden.com/069", + "css_url": "https://www.csszengarden.com/069/069.css", + "title": "Bonsai Sky", + "author": "Mike Davidson", + "description": { + "summary": "A serene web design that blends Eastern aesthetic principles with modern web layout techniques, featuring a misty mountain forest backdrop against a structured content area.", + "visual_style": "The design embodies a harmonious balance between nature and structure, using a translucent content area that allows the atmospheric background image to influence the entire composition.", + "emotional_impact": "Creates a contemplative, peaceful atmosphere through the misty forest imagery and balanced, uncluttered layout that evokes Zen principles of simplicity and harmony.", + "compositional_elements": "Two-column layout with main content area on the left and a navigation sidebar on the right, both overlaid on a full-width atmospheric nature photograph that creates depth and context." + }, + "artistic_context": { + "style_influences": "Traditional East Asian landscape painting, minimalist design philosophy, nature photography", + "visual_metaphors": "Path through misty mountains suggesting journey, enlightenment, and clarity emerging through simplicity" + }, + "categories": [ + "minimalist", + "nature-inspired", + "atmospheric", + "zen-aesthetic", + "translucent", + "balanced" + ], + "visual_characteristics": [ + "background-image", + "two-column-layout", + "semi-transparent-overlay", + "typographic-hierarchy", + "nature-photography", + "icon-integration" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "contrast", + "transparency" + ], + "visual_techniques": [ + "layering", + "atmospheric depth", + "textural contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/070/metadata.json b/src/data/detailed/070/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..c72954a2c7fd570fa70c75384694eaa01bbd4bae --- /dev/null +++ b/src/data/detailed/070/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "070", + "url": "https://www.csszengarden.com/070", + "css_url": "https://www.csszengarden.com/070/070.css", + "title": "CS(S) Monk", + "author": "Cedric Savarese", + "description": { + "summary": "A contemplative web design featuring Eastern aesthetic influences with a silhouetted meditating figure against a minimalist backdrop, complemented by red floral accents and structured information layout.", + "visual_style": "The design blends Eastern philosophical aesthetics with modern web layout principles, using contrasting elements of light and dark, organic and structured forms.", + "emotional_impact": "Creates a calm, meditative atmosphere while maintaining clarity and functionality through the structured information presentation.", + "compositional_elements": "Organized in a hierarchical grid with a prominent header area, distinct content sections, and decorative red floral elements that frame the composition." + }, + "artistic_context": { + "style_influences": "Japanese and Chinese brush painting, minimalist design, traditional Eastern art", + "visual_metaphors": "Meditation, harmony, balance, growth, enlightenment" + }, + "categories": [ + "minimalist", + "eastern-inspired", + "structured", + "monochromatic", + "grid-based", + "decorative" + ], + "visual_characteristics": [ + "silhouetted figure", + "red floral accents", + "high contrast", + "structured typography", + "boxed sections", + "vertical text elements" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "repetition" + ], + "visual_techniques": [ + "framing", + "negative space", + "typographic alignment" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/071/metadata.json b/src/data/detailed/071/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..3594f574333b7c438b28fe74eac0a83ed1e7e481 --- /dev/null +++ b/src/data/detailed/071/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "071", + "url": "https://www.csszengarden.com/071", + "css_url": "https://www.csszengarden.com/071/071.css", + "title": "Garden Party", + "author": "Bobby van der Sluis", + "description": { + "summary": "A vibrant web design showcasing a distinct aesthetic that combines retro styling with modern web interface elements, using bold color contrasts and flowing curved shapes.", + "visual_style": "The design employs a playful, almost retrofuturistic approach with organic flowing shapes framing a structured content layout within a striking aqua blue environment.", + "emotional_impact": "The bright turquoise backdrop creates an energetic, optimistic atmosphere that evokes digital creativity and innovation, balanced by the structured information presentation.", + "compositional_elements": "Curved, fluid container shapes house organized text blocks in a vertical flow, with distinct sectioning created through bold typography and spatial separation." + }, + "artistic_context": { + "style_influences": "Web 2.0 aesthetics, mid-century modern typography, digital zen minimalism, liquid design movement", + "visual_metaphors": "Flowing water, garden paths, digital oasis, information pools" + }, + "categories": [ + "retro-modern", + "liquid-design", + "high-contrast", + "typographic", + "sectional", + "organic-geometric" + ], + "visual_characteristics": [ + "curved-containers", + "aqua-dominant", + "bold-typography", + "flowing-shapes", + "vertical-hierarchy", + "nested-elements" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "alignment" + ], + "visual_techniques": [ + "color blocking", + "typographic scaling", + "organic framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/072/metadata.json b/src/data/detailed/072/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..59ee925537e702a9148c980df5b213a3ec916399 --- /dev/null +++ b/src/data/detailed/072/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "072", + "url": "https://www.csszengarden.com/072", + "css_url": "https://www.csszengarden.com/072/072.css", + "title": "Outburst", + "author": "Chris Vincent", + "description": { + "summary": "A vibrant web design featuring a prominent golden rose illustration with radiating rays against a bright orange background, complemented by an organized content layout with clearly defined sections.", + "visual_style": "The design employs a bold East Asian-inspired aesthetic with strong floral motifs, combining decorative illustration with structured information architecture.", + "emotional_impact": "The warm golden-orange color scheme evokes energy and optimism, while the zen-inspired rose creates a sense of balance between artistic expression and functional design.", + "compositional_elements": "The composition juxtaposes organic curved elements (rose illustration and decorative side flourishes) with geometric structured content boxes, creating visual tension between fluid and rigid forms." + }, + "artistic_context": { + "style_influences": "Japanese sunrise motifs, Art Nouveau line work, Mid-century modern organization", + "visual_metaphors": "Blooming knowledge, enlightenment rays, organic growth within structured systems" + }, + "categories": [ + "artistic", + "structured", + "eastern-inspired", + "illustrative", + "high-contrast", + "educational" + ], + "visual_characteristics": [ + "golden-orange palette", + "radial sunburst pattern", + "outlined floral illustration", + "modular content boxes", + "decorative scroll-work", + "sectioned information hierarchy" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "repetition", + "hierarchy" + ], + "visual_techniques": [ + "outlined illustration", + "color blocking", + "geometric division" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/073/metadata.json b/src/data/detailed/073/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f04cd90312c25fb39e20860e3e3120e1f6aecc4d --- /dev/null +++ b/src/data/detailed/073/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "073", + "url": "https://www.csszengarden.com/073", + "css_url": "https://www.csszengarden.com/073/073.css", + "title": "Emmakade", + "author": "Alexander Christiaan Jacob (ACJ)", + "description": { + "summary": "A minimalist, atmospheric web design featuring a monochromatic color scheme with dramatic typography and layered visual elements. The composition balances technical structure with zen-inspired aesthetics.", + "visual_style": "The design employs a dark, moody aesthetic with strong typographic contrast against a gradient background. Large, illuminated letterforms dominate the header while maintaining a sense of environmental context.", + "emotional_impact": "The monochromatic palette and luminous typography against dark backgrounds creates a contemplative, serene yet technical atmosphere, evoking both digital sophistication and natural tranquility.", + "compositional_elements": "The layout presents a vertical hierarchy with a dramatic header image transitioning to structured content blocks. Reflective imagery at the bottom mirrors the conceptual duality present throughout." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Japanese zen aesthetics, monochromatic photography, technical documentation styling", + "visual_metaphors": "Illumination emerging from darkness, reflection on water, path through obscurity, structural framework" + }, + "categories": [ + "minimalist", + "monochromatic", + "atmospheric", + "structured", + "zen-inspired", + "technical" + ], + "visual_characteristics": [ + "high-contrast", + "backlit-typography", + "gradient-transitions", + "reflective-imagery", + "vertical-hierarchy", + "negative-space" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "simplicity" + ], + "visual_techniques": [ + "dramatic lighting", + "typographic scaling", + "atmospheric photography" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/074/metadata.json b/src/data/detailed/074/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..c0dd738978bf96b383428c285f135c25af212d67 --- /dev/null +++ b/src/data/detailed/074/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "074", + "url": "https://www.csszengarden.com/074", + "css_url": "https://www.csszengarden.com/074/074.css", + "title": "Egyptian Dawn", + "author": "James Abbott", + "description": { + "summary": "A serene web design featuring warm golden hues and Eastern-influenced imagery, creating a contemplative atmosphere through balanced composition and minimal elements.", + "visual_style": "The design employs a warm golden gradient background with subtle texture, combining Eastern aesthetics with modern digital design elements in a harmonious layout.", + "emotional_impact": "The warm amber tones, simple silhouette illustrations, and balanced white space create a calm, meditative mood that evokes tranquility and focused attention.", + "compositional_elements": "A two-column layout with clearly defined content boxes, strategic white space, and decorative silhouettes creates visual rhythm while maintaining hierarchical organization." + }, + "artistic_context": { + "style_influences": "Eastern minimalism, desert landscape aesthetics, ancient Egyptian art motifs, traditional scroll designs", + "visual_metaphors": "Journey, illumination, wisdom, timelessness" + }, + "categories": [ + "minimalist", + "eastern-inspired", + "warm-toned", + "textural", + "structured", + "educational" + ], + "visual_characteristics": [ + "golden gradient background", + "silhouette illustrations", + "boxed content sections", + "textural parchment effect", + "sunrise/sunburst element", + "hierarchical typography" + ], + "design_principles": { + "primary_principles": [ + "balance", + "contrast", + "harmony", + "hierarchy" + ], + "visual_techniques": [ + "warm color palette", + "textural layering", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/075/metadata.json b/src/data/detailed/075/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..36dd9aeb37ffabd9e73df98ae2aa8ffc7799a1a2 --- /dev/null +++ b/src/data/detailed/075/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "075", + "url": "https://www.csszengarden.com/075", + "css_url": "https://www.csszengarden.com/075/075.css", + "title": "Lost HighWay", + "author": "Julien Roumagnac", + "description": { + "summary": "A dark, atmospheric web design featuring a deep red and black color scheme with a structured layout that conveys technical sophistication and artistic discipline.", + "visual_style": "The design employs a minimalist approach with strong geometric organization, creating a meditative atmosphere through dark backgrounds and precise typographic hierarchy.", + "emotional_impact": "The stark contrast between dark backgrounds and selective red accents creates a sense of zen-like focus and technical mastery.", + "compositional_elements": "The layout utilizes vertical columns with clear sectioning, dropdown menus, and a central content area framed by navigational elements on both sides." + }, + "artistic_context": { + "style_influences": "Eastern minimalism, industrial architecture photography, digital zen aesthetics", + "visual_metaphors": "Path through darkness, architectural framework, garden of knowledge" + }, + "categories": [ + "minimalist", + "high-contrast", + "dark-themed", + "technical", + "structured", + "zen-inspired" + ], + "visual_characteristics": [ + "red-black palette", + "geometric grid", + "typographic hierarchy", + "negative space", + "architectural backdrop", + "dropdown menus" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "balance" + ], + "visual_techniques": [ + "selective coloration", + "structural framing", + "textural depth" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/076/metadata.json b/src/data/detailed/076/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d5809429475d0cefd199d313bf41b6375f898861 --- /dev/null +++ b/src/data/detailed/076/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "076", + "url": "https://www.csszengarden.com/076", + "css_url": "https://www.csszengarden.com/076/076.css", + "title": "Lotus", + "author": "Chika", + "description": { + "summary": "A serene, minimalist web design with an Eastern-inspired aesthetic that combines subtle floral background elements with a structured content layout and organized navigation system.", + "visual_style": "The design employs a muted color palette with a semi-transparent background texture that creates depth while maintaining readability of the foreground content.", + "emotional_impact": "The soft, subdued color scheme and floral motifs evoke tranquility and contemplation, reinforcing the 'zen' theme while providing a calm, focused user experience.", + "compositional_elements": "A clear two-column layout with a header banner, defined content sections marked by subtle color blocks, and hierarchical typography that guides the eye through the information." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, web 2.0 functionality, botanical illustration", + "visual_metaphors": "Garden as knowledge cultivation, path as learning journey, natural elements representing organic growth" + }, + "categories": [ + "minimalist", + "functional", + "nature-inspired", + "zen", + "two-column", + "instructional" + ], + "visual_characteristics": [ + "muted-palette", + "subtle-background-texture", + "hierarchical-typography", + "floral-motifs", + "section-dividers", + "semi-transparent-elements" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "harmony" + ], + "visual_techniques": [ + "layering", + "color-blocking", + "typographic-scale" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/077/metadata.json b/src/data/detailed/077/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0cc1098edd2fb0fee99a79e2b63c77045688567d --- /dev/null +++ b/src/data/detailed/077/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "077", + "url": "https://www.csszengarden.com/077", + "css_url": "https://www.csszengarden.com/077/077.css", + "title": "Hop", + "author": "Guillaume L.", + "description": { + "summary": "A vibrant web design showcasing a gradient-based header with silhouetted figures in motion against a pink-to-purple backdrop, combined with a structured information layout below", + "visual_style": "The design employs early 2000s web aesthetics with dramatic gradients, silhouettes, and a mix of centered and left-aligned text elements arranged in a multi-column layout", + "emotional_impact": "The bright pink-purple gradient creates an energetic, dynamic atmosphere, while the silhouetted figures suggest movement, freedom and transformation", + "compositional_elements": "The composition features a banner header, silhouetted figures as dynamic visual elements, and a two-column information layout with clear typographic hierarchy" + }, + "artistic_context": { + "style_influences": "Early digital design aesthetics, early 2000s web design, zen-inspired minimalism through human silhouettes", + "visual_metaphors": "Floating figures suggesting freedom, enlightenment, and transcendence of limitations" + }, + "categories": [ + "gradient-based", + "two-column", + "silhouette", + "early-web", + "vibrant", + "zen-inspired" + ], + "visual_characteristics": [ + "purple-pink-gradient", + "silhouetted-figures", + "multi-column-layout", + "hierarchical-typography", + "centered-header", + "light-dark-contrast" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "movement", + "balance" + ], + "visual_techniques": [ + "silhouetting", + "gradient-flow", + "typographic-scaling" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/078/metadata.json b/src/data/detailed/078/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..2973ffa1ca776b31ff0be26bab61199e071ced19 --- /dev/null +++ b/src/data/detailed/078/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "078", + "url": "https://www.csszengarden.com/078", + "css_url": "https://www.csszengarden.com/078/078.css", + "title": "Muto Verde", + "author": "Alex Taylor", + "description": { + "summary": "A visually distinct web design featuring a zen-inspired aesthetic with muted green sidebar panels contrasting against a textured parchment-like header and content sections with photographic backgrounds.", + "visual_style": "The design employs an asymmetrical layout with a narrow navigation column and wider content area, using textural contrasts and organic imagery to reinforce its contemplative theme.", + "emotional_impact": "The earthy color palette and textural elements evoke a calm, meditative atmosphere, while the structured layout provides clarity and order.", + "compositional_elements": "The page is divided into clearly defined sections with a left sidebar navigation area, header banner, and content sections delineated by photographic background panels." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Japanese zen aesthetics, early 2000s web interface conventions", + "visual_metaphors": "Garden path imagery suggesting a journey, enlightenment symbolized through structured progression" + }, + "categories": [ + "minimalist", + "nature-inspired", + "structured", + "textural", + "asymmetrical", + "earthy" + ], + "visual_characteristics": [ + "muted color palette", + "textured backgrounds", + "clean typography", + "photographic panels", + "hierarchical layout", + "contrast banding" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "rhythm" + ], + "visual_techniques": [ + "textural layering", + "color blocking", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/079/metadata.json b/src/data/detailed/079/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..be5483b7b80a082fae7f0cada9fc2e81f22fb57c --- /dev/null +++ b/src/data/detailed/079/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "079", + "url": "https://www.csszengarden.com/079", + "css_url": "https://www.csszengarden.com/079/079.css", + "title": "Green Tea", + "author": "Amy Rae Som", + "description": { + "summary": "A serene, nature-inspired web interface featuring a soft green background with subtle plant silhouettes, creating a tranquil digital garden environment.", + "visual_style": "The design employs a zen-like aesthetic with organic elements and a structured information architecture, balancing nature imagery with organized content blocks.", + "emotional_impact": "The soft color palette and botanical imagery evoke feelings of tranquility and harmony, while maintaining clarity for information consumption.", + "compositional_elements": "A multi-column layout with clearly defined sections uses typography and white space to create hierarchical organization, framed by delicate plant illustrations." + }, + "artistic_context": { + "style_influences": "Japanese garden aesthetics, minimalist web design, natural-form decoration", + "visual_metaphors": "Digital garden as knowledge growth, enlightened path through information" + }, + "categories": [ + "organic", + "minimalist", + "nature-inspired", + "structured", + "harmonious", + "zen" + ], + "visual_characteristics": [ + "pale-green background", + "plant silhouettes", + "multi-column layout", + "typographic contrast", + "botanical motifs", + "transparent overlays" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "unity", + "contrast" + ], + "visual_techniques": [ + "natural motifs", + "typographic structure", + "complementary colors" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/081/metadata.json b/src/data/detailed/081/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d63617f1493422d114c6f94ac50ed549f0f7fbbc --- /dev/null +++ b/src/data/detailed/081/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "081", + "url": "https://www.csszengarden.com/081", + "css_url": "https://www.csszengarden.com/081/081.css", + "title": "seashore", + "author": "Christine Kirchmeier", + "description": { + "summary": "A serene web design featuring a tripartite layout that combines a tranquil coastal imagery header, structured navigation sidebar, and content-rich main area, all unified by a subtle patterned background.", + "visual_style": "The design employs a restrained, meditative aesthetic with a nature-inspired header image featuring a nautilus shell against a sunset gradient, creating visual metaphors of harmony and balance.", + "emotional_impact": "The calm color palette and organized structure evoke a sense of tranquility and clarity, reinforced by the zen-inspired nautilus motif that suggests natural order and progression.", + "compositional_elements": "A clear three-column structure with decorative borders, consistent section headers, and careful typographic hierarchy creates a methodical, educational presentation style." + }, + "artistic_context": { + "style_influences": "Early 2000s web design, minimalist information architecture, Asian-inspired natural motifs", + "visual_metaphors": "Natural spiral forms suggesting growth and harmony, water and earth elements symbolizing balance" + }, + "categories": [ + "minimalist", + "nature-inspired", + "instructional", + "grid-based", + "nautical", + "structured" + ], + "visual_characteristics": [ + "spiral motif", + "muted color palette", + "sectioned layout", + "patterned background", + "gradient header", + "consistent typography" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "repetition", + "contrast" + ], + "visual_techniques": [ + "pattern repetition", + "sectional division", + "natural imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/082/metadata.json b/src/data/detailed/082/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..682f40a3cae5dd4437b5b9d3e89c0a3a30c1f553 --- /dev/null +++ b/src/data/detailed/082/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "082", + "url": "https://www.csszengarden.com/082", + "css_url": "https://www.csszengarden.com/082/082.css", + "title": "Miracle Cure", + "author": "Joseph Pearson", + "description": { + "summary": "A nostalgic web design that deliberately evokes vintage medicine packaging and traditional remedies, juxtaposed with modern web design principles", + "visual_style": "The design employs a vintage aesthetic with parchment-like textures, sepia tones, and antique illustrations to create an intentionally retro digital experience", + "emotional_impact": "Creates a warm, nostalgic atmosphere that feels both educational and whimsical through its medicine bottle imagery and aged paper textures", + "compositional_elements": "Structured around a central scrolling text area with decorative vintage elements positioned at corners, creating a framed document effect" + }, + "artistic_context": { + "style_influences": "Victorian-era medicine advertisements, apothecary labels, vintage scientific documents", + "visual_metaphors": "Medicine bottles as containers of knowledge, remedy as skill improvement, antiquated relics as technological progress" + }, + "categories": [ + "vintage", + "nostalgic", + "textural", + "illustrative", + "apothecary-inspired" + ], + "visual_characteristics": [ + "parchment textures", + "sepia tones", + "vintage illustrations", + "ornamental typography", + "decorative borders", + "medicine bottle imagery" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "unity", + "emphasis" + ], + "visual_techniques": [ + "textural layering", + "vintage styling", + "metaphorical imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/083/metadata.json b/src/data/detailed/083/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..976f0806012fc4e741f0c893b169e076c13ba4e0 --- /dev/null +++ b/src/data/detailed/083/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "083", + "url": "https://www.csszengarden.com/083", + "css_url": "https://www.csszengarden.com/083/083.css", + "title": "Springtime", + "author": "Bo\u00ebr Attila", + "description": { + "summary": "A serene, nature-inspired web design that employs a minimalist aesthetic with organic visual elements to create a peaceful digital environment.", + "visual_style": "The design blends earthy colors with delicate botanical illustrations to create a zen-like atmosphere, using subtle gradients and transparent elements for depth.", + "emotional_impact": "Evokes tranquility and mindfulness through its soft color palette, ample white space, and gentle plant motifs that frame the content.", + "compositional_elements": "Features a three-column layout with clear vertical sections, using botanical illustrations and subtle background textures to unify the composition." + }, + "artistic_context": { + "style_influences": "Japanese garden design, minimalist aesthetics, natural organic forms", + "visual_metaphors": "Growth, cultivation, harmony with nature, enlightenment" + }, + "categories": [ + "minimalist", + "nature-inspired", + "organic", + "zen", + "elegant", + "structured" + ], + "visual_characteristics": [ + "botanical-illustrations", + "muted-palette", + "hierarchical-layout", + "semi-transparent-elements", + "textural-backgrounds", + "leaf-motifs" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "repetition", + "hierarchy" + ], + "visual_techniques": [ + "natural motifs", + "spatial zoning", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/084/metadata.json b/src/data/detailed/084/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..66bb346b9b089e09104e660dba5bfb8348dc68cb --- /dev/null +++ b/src/data/detailed/084/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "084", + "url": "https://www.csszengarden.com/084", + "css_url": "https://www.csszengarden.com/084/084.css", + "title": "Start Listening!", + "author": "Liz Lubowitz", + "description": { + "summary": "A stylized vintage-inspired web design that combines mid-century aesthetics with contemporary web concepts, featuring dramatic typography and retro imagery.", + "visual_style": "The design adopts a nostalgic aesthetic with ornate display typography, vintage photography, and a warm, aged color palette reminiscent of mid-20th century advertisements.", + "emotional_impact": "The design creates a sense of dramatic irony through the juxtaposition of retro visual elements with contemporary technical concepts, invoking both nostalgia and progressive ideals.", + "compositional_elements": "Arranged in a traditional newspaper-like layout with clearly defined columns, bold headlines, and a hierarchical structure that guides the eye from the dramatic header image downward through sections." + }, + "artistic_context": { + "style_influences": "Mid-century advertising, vintage propaganda posters, early web design, retro typography", + "visual_metaphors": "Enlightenment journey, zen garden as orderly structure, vintage authority figure as guide" + }, + "categories": [ + "retro", + "vintage", + "typographic", + "editorial", + "nostalgic", + "structured" + ], + "visual_characteristics": [ + "ornamental typography", + "aged texture", + "high-contrast imagery", + "column layout", + "dramatic header", + "hierarchical organization" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "nostalgia" + ], + "visual_techniques": [ + "textural overlay", + "typographic scaling", + "visual framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/085/metadata.json b/src/data/detailed/085/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..32248647aa88d8966933318f29d3e52be670b8c0 --- /dev/null +++ b/src/data/detailed/085/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "085", + "url": "https://www.csszengarden.com/085", + "css_url": "https://www.csszengarden.com/085/085.css", + "title": "Oceans Apart", + "author": "Ryan Sims", + "description": { + "summary": "A serene web design featuring a tranquil ocean landscape header with semitransparent overlay text, followed by a clean, minimal content layout with clear typographic hierarchy and structured navigation sections.", + "visual_style": "The design employs a minimalist aesthetic with zen-inspired elements, balancing natural imagery with structured information architecture to create a calm, professional presentation.", + "emotional_impact": "The atmospheric seascape header creates a sense of tranquility and contemplation, while the organized content below conveys clarity and accessibility.", + "compositional_elements": "A vertical layout with distinct sections: dramatic header image, navigation panel on left, and content area on right, all framed by a subtle textured border." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Japanese zen aesthetics, nature photography, digital modernism", + "visual_metaphors": "Ocean horizon suggesting possibility and exploration, clarity of space representing mental clarity" + }, + "categories": [ + "minimalist", + "nature-inspired", + "structured", + "professional", + "tranquil", + "grid-based" + ], + "visual_characteristics": [ + "atmospheric header image", + "two-column layout", + "subtle texture background", + "typographic hierarchy", + "translucent overlays", + "framed composition" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "white space" + ], + "visual_techniques": [ + "photographic header", + "columnar organization", + "bordered framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/086/metadata.json b/src/data/detailed/086/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..3bea22fb721506a8c9d08ed805b7ddd1f8e3abb7 --- /dev/null +++ b/src/data/detailed/086/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "086", + "url": "https://www.csszengarden.com/086", + "css_url": "https://www.csszengarden.com/086/086.css", + "title": "RedFrog", + "author": "Bernd Willenberg", + "description": { + "summary": "A structured web layout combining early 2000s web design aesthetics with Eastern philosophy themes, featuring a warm color palette, organized content sections, and a frog mascot.", + "visual_style": "The design employs a nostalgic, early web aesthetic with a multi-column layout, rounded panels, and a warm gradient background pattern.", + "emotional_impact": "The warm colors and organized layout create a calm, instructional atmosphere that evokes both nostalgia and a sense of structured guidance.", + "compositional_elements": "A three-panel structure with a header banner, narrow navigation sidebar, and main content area featuring alternating section backgrounds for visual rhythm." + }, + "artistic_context": { + "style_influences": "Early 2000s web design, Japanese zen gardens, instructional documentation", + "visual_metaphors": "Path to knowledge, garden of ideas, enlightenment journey" + }, + "categories": [ + "retro-web", + "instructional", + "structured", + "warm-toned", + "gradient", + "multi-column" + ], + "visual_characteristics": [ + "rounded-panels", + "warm-gradient-background", + "section-delineation", + "right-aligned-content", + "hierarchical-headings" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "repetition", + "contrast", + "organization" + ], + "visual_techniques": [ + "section-banding", + "color-coding", + "content-chunking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/087/metadata.json b/src/data/detailed/087/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..e63b4c3b360485ceb68bb3257aef2c578ac7c342 --- /dev/null +++ b/src/data/detailed/087/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "087", + "url": "https://www.csszengarden.com/087", + "css_url": "https://www.csszengarden.com/087/087.css", + "title": "Maya", + "author": "Bernd Willenberg", + "description": { + "summary": "A visually striking web design featuring a dark metallic background with sculptural imagery and organized textual content, creating a balance between artistic expression and technical showcase.", + "visual_style": "The design employs a dramatic aesthetic with sculptural art juxtaposed against a structured, grid-based layout. Orange-gold accent colors create visual anchors against the dark slate background.", + "emotional_impact": "Evokes a sense of mystique and ancient wisdom through the sculptural imagery, while maintaining technical authority through the structured information presentation.", + "compositional_elements": "Left column features navigational elements, center displays the main content in a hierarchical structure with distinct heading sections, while artistic imagery anchors the top-left portion creating visual weight." + }, + "artistic_context": { + "style_influences": "Eastern artistic motifs, industrial/metallic textures, early web design aesthetics", + "visual_metaphors": "Journey, illumination, craftsmanship, ancient wisdom" + }, + "categories": [ + "dark-themed", + "contrast-driven", + "asymmetrical", + "grid-based", + "sculptural", + "technical" + ], + "visual_characteristics": [ + "metallic textures", + "orange-gold accents", + "hierarchical typography", + "sculptural imagery", + "sidebar navigation", + "structured content blocks" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "emphasis" + ], + "visual_techniques": [ + "accent coloring", + "textural layering", + "asymmetrical composition" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/088/metadata.json b/src/data/detailed/088/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..76c0286c9d8460310bf7073d8011de1aac67b745 --- /dev/null +++ b/src/data/detailed/088/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "088", + "url": "https://www.csszengarden.com/088", + "css_url": "https://www.csszengarden.com/088/088.css", + "title": "Tulipe", + "author": "Eric Sheperd", + "description": { + "summary": "A harmonious web design showcasing minimalist principles with a soft natural aesthetic. The layout features a columnar structure containing text blocks balanced against a subtle patterned background and botanical imagery.", + "visual_style": "The design employs a tranquil, earth-toned palette with muted greens and soft beige backgrounds, creating a serene visual experience reinforced by organic textures and natural imagery.", + "emotional_impact": "The visual elements evoke a sense of calm and contemplation, with balanced proportions and generous white space creating an atmosphere of clarity and mindfulness.", + "compositional_elements": "A structured multi-column grid system presents content in clearly delineated panels, with subtle borders and consistent spacing. The natural floral element in the left corner provides organic contrast to the geometric layout." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, nature-inspired design, structured modernism", + "visual_metaphors": "Garden as ordered space, natural growth, tranquil contemplation" + }, + "categories": [ + "minimalist", + "grid-based", + "organic", + "earthy", + "structured", + "transparent" + ], + "visual_characteristics": [ + "columnar-layout", + "subtle-textures", + "botanical-elements", + "muted-palette", + "geometric-partitioning", + "transparent-layering" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "hierarchy", + "repetition" + ], + "visual_techniques": [ + "textural contrast", + "natural imagery", + "consistent spacing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/089/metadata.json b/src/data/detailed/089/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..e81d425a13f5d69167e349b4254189b806aca904 --- /dev/null +++ b/src/data/detailed/089/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "089", + "url": "https://www.csszengarden.com/089", + "css_url": "https://www.csszengarden.com/089/089.css", + "title": "Dark Industrial", + "author": "Ray Henry", + "description": { + "summary": "A minimalist, industrial-inspired web design with a monochromatic color scheme, featuring a structured two-column layout that balances informational content with navigational elements", + "visual_style": "The design employs a restrained, zen-like aesthetic with an industrial undertone, using mechanical imagery in the header and clearly delineated content sections", + "emotional_impact": "The dark, somber palette with selective accent coloring creates a contemplative, focused atmosphere that reflects the philosophical approach suggested by the visual elements", + "compositional_elements": "A vertical hierarchy organizes content into distinct rectangular sections with clear separation, using subtle visual cues like heading styles and background variations to guide the viewer's eye" + }, + "artistic_context": { + "style_influences": "Industrial minimalism, mechanical aesthetics, digital zen philosophy, utilitarian web design", + "visual_metaphors": "Mechanical gears symbolizing precision and craftsmanship, darkness giving way to enlightenment, structured pathways to knowledge" + }, + "categories": [ + "minimalist", + "industrial", + "monochromatic", + "structured", + "utilitarian", + "grid-based" + ], + "visual_characteristics": [ + "dark-palette", + "gear-motif", + "two-column-layout", + "hierarchical-typography", + "selective-highlighting", + "negative-space" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "simplicity" + ], + "visual_techniques": [ + "typographic scaling", + "color accent", + "spatial organization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/090/metadata.json b/src/data/detailed/090/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..010cb885e02b4f2ad7d1d17b8fd3e3bac59189b1 --- /dev/null +++ b/src/data/detailed/090/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "090", + "url": "https://www.csszengarden.com/090", + "css_url": "https://www.csszengarden.com/090/090.css", + "title": "Untitled", + "author": "Ray Henry", + "description": { + "summary": "A structured web design showcasing a three-column layout with a restrained color palette of blues and grays, emphasizing accessibility and clarity through thoughtful information architecture.", + "visual_style": "The design employs a clean, functional approach with sectioned content areas denoted by horizontal headers in deep blue, creating a methodical rhythm throughout the page.", + "emotional_impact": "The design evokes a sense of stability and professionalism through its structured composition and cool color palette, creating a calm, trustworthy atmosphere.", + "compositional_elements": "The layout follows a clear grid system with strong horizontal divisions and varying column widths that create visual hierarchy while maintaining balance across the page." + }, + "artistic_context": { + "style_influences": "Traditional web standards documentation, minimalist information design, early-2000s web accessibility principles", + "visual_metaphors": "Garden as structure and order, path/journey through content blocks, architectural framework" + }, + "categories": [ + "structured", + "minimalist", + "functional", + "grid-based", + "informational", + "utilitarian" + ], + "visual_characteristics": [ + "horizontal-banding", + "three-column-layout", + "monochromatic-palette", + "clear-segmentation", + "hierarchical-headers", + "contained-content-blocks" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "unity", + "balance", + "rhythm" + ], + "visual_techniques": [ + "sectioning", + "consistent spacing", + "color blocking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/091/metadata.json b/src/data/detailed/091/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..a0b3332cae5b5b79f3df3b4dff13132832ff1249 --- /dev/null +++ b/src/data/detailed/091/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "091", + "url": "https://www.csszengarden.com/091", + "css_url": "https://www.csszengarden.com/091/091.css", + "title": "webZine", + "author": "Cent", + "description": { + "summary": "A minimalist web design that combines traditional Eastern aesthetics with structured grid layout, featuring a Gothic-style header and tea stain visual elements against a light background.", + "visual_style": "The design employs a restrained, zen-inspired aesthetic with deliberate use of white space, structured information blocks, and subtle decorative elements that reference traditional Eastern art.", + "emotional_impact": "The visual treatment evokes a sense of tranquility and order, balancing instructional content with contemplative aesthetics.", + "compositional_elements": "Information is arranged in a clear grid system with horizontal sections delineated by thin rules, creating a balanced hierarchy between header elements, body text, and negative space." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, traditional scroll design, Gothic calligraphy, technical documentation", + "visual_metaphors": "Tea stain circular elements suggest meditation and natural imperfection within the structured digital environment" + }, + "categories": [ + "minimalist", + "grid-based", + "zen-inspired", + "typographic", + "instructional", + "heritage" + ], + "visual_characteristics": [ + "high-contrast typography", + "negative space", + "horizontal rules", + "calligraphic header", + "tea stain motifs", + "structured columns" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "contrast", + "simplicity" + ], + "visual_techniques": [ + "framing", + "typographic scale", + "white space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/092/metadata.json b/src/data/detailed/092/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..223a065dabfa8e5691bc21b660ff7c8a3b55b7dc --- /dev/null +++ b/src/data/detailed/092/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "092", + "url": "https://www.csszengarden.com/092", + "css_url": "https://www.csszengarden.com/092/092.css", + "title": "Port of Call", + "author": "Jessica Dunn", + "description": { + "summary": "A web design showcase featuring a dual-panel layout with atmospheric maritime imagery against a warm-toned navigation system, creating an artful blend of traditional aesthetics and technical functionality.", + "visual_style": "The design employs a zen-inspired aesthetic that pairs atmospheric photography with structured information architecture, creating contrast between organic imagery and precise typographic elements.", + "emotional_impact": "The warm amber glow against dark background creates a contemplative, enlightened mood reinforced by the metaphorical sailing vessels illuminated in golden light.", + "compositional_elements": "The layout features a vertical split with a primary content area in gold/amber tones on the left, a navigation system in dark brown on the right, and decorative maritime photography integrated as a header element." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, maritime photography, early 2000s web design, ornamental framing techniques", + "visual_metaphors": "Sailing vessels as journey, golden light as enlightenment, structured panels as organized wisdom" + }, + "categories": [ + "atmospheric", + "duotone", + "zen-inspired", + "ornamental", + "hierarchical", + "maritime" + ], + "visual_characteristics": [ + "golden-amber color scheme", + "split-panel layout", + "decorative maritime imagery", + "ornamental borders", + "high contrast typography", + "textural background" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "framing" + ], + "visual_techniques": [ + "atmospheric lighting", + "decorative borders", + "structural division" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/093/metadata.json b/src/data/detailed/093/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..89c2e20ffc537b0ce1cc35b0dbde263b83c6300a --- /dev/null +++ b/src/data/detailed/093/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "093", + "url": "https://www.csszengarden.com/093", + "css_url": "https://www.csszengarden.com/093/093.css", + "title": "South of the Border", + "author": "Rob Shields", + "description": { + "summary": "A minimalist web design featuring a dark blue gradient background with contrasting text blocks and section dividers, anchored by a desert sunset header image with silhouetted cacti.", + "visual_style": "The design employs a zen-inspired aesthetic with clean typography against a dark background, creating a serene digital environment through structured content blocks and subtle navigation elements.", + "emotional_impact": "The dark color scheme paired with the desert sunset imagery evokes a contemplative, peaceful atmosphere that reinforces the 'zen garden' concept while maintaining professional functionality.", + "compositional_elements": "The layout follows a vertical column structure with clear section headings, complemented by a right sidebar for navigation and a horizontal header image that establishes the thematic tone." + }, + "artistic_context": { + "style_influences": "Digital minimalism, Japanese zen aesthetics, early 2000s web design revival", + "visual_metaphors": "Desert landscape as digital enlightenment, path imagery suggesting journey, garden concept implying cultivated digital space" + }, + "categories": [ + "minimalist", + "dark-themed", + "vertical-oriented", + "zen-inspired", + "grid-based", + "utilitarian" + ], + "visual_characteristics": [ + "gradient-background", + "silhouette-imagery", + "sectioned-content", + "high-contrast-typography", + "desert-palette", + "hierarchical-headings" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "simplicity" + ], + "visual_techniques": [ + "negative space", + "typographic scale", + "atmospheric imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/094/metadata.json b/src/data/detailed/094/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..4e267bbf84e396a26edd159bb4710878c1bbd25b --- /dev/null +++ b/src/data/detailed/094/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "094", + "url": "https://www.csszengarden.com/094", + "css_url": "https://www.csszengarden.com/094/094.css", + "title": "Deco", + "author": "Marc Trudel", + "description": { + "summary": "A clean, structured web interface combining architectural photography with a minimalist information layout, creating a harmonious balance between visual inspiration and functional content", + "visual_style": "Minimalist and structured design with a strong emphasis on spatial organization, using a blue sidebar and white content panels for clear information hierarchy", + "emotional_impact": "Calm, orderly, and contemplative atmosphere created through the balanced composition, blue tones, and architectural imagery", + "compositional_elements": "Split-screen layout with a vertical blue navigation panel contrasting against white content areas and an architectural photograph creating visual depth" + }, + "artistic_context": { + "style_influences": "Modernist web design, architectural photography, minimalist information design", + "visual_metaphors": "Structure, clarity, ordered progression, openness" + }, + "categories": [ + "minimalist", + "architectural", + "structured", + "grid-based", + "clean", + "functional" + ], + "visual_characteristics": [ + "split-panel layout", + "blue-white color scheme", + "hierarchical typography", + "negative space", + "architectural imagery", + "modular content blocks" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "alignment", + "balance" + ], + "visual_techniques": [ + "color blocking", + "whitespace utilization", + "vertical rhythm" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/095/metadata.json b/src/data/detailed/095/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9f9d087c4df0ec674cc345239591484b1c67c754 --- /dev/null +++ b/src/data/detailed/095/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "095", + "url": "https://www.csszengarden.com/095", + "css_url": "https://www.csszengarden.com/095/095.css", + "title": "Corporate ZenWorks", + "author": "Derek Hansen", + "description": { + "summary": "A minimalist web design featuring a textured paper background with a clean, structured layout that blends classic typography with subtle decorative elements.", + "visual_style": "The design employs a restrained aesthetic with a focus on clarity and readability, using a torn paper effect alongside organized content blocks and strategic visual accents.", + "emotional_impact": "Conveys a sense of tranquility and thoughtfulness through its balanced composition, neutral color palette, and deliberate spacing.", + "compositional_elements": "Structured with a clear header-to-footer flow, using horizontal sections, left-aligned text blocks, and subtle visual elements like the handwritten note and yellow sidebar to create points of interest." + }, + "artistic_context": { + "style_influences": "Zen-inspired minimalism, traditional manuscript design, early web typography principles", + "visual_metaphors": "Paper as knowledge medium, handwritten notes suggesting personal connection, fountain pen representing craftsmanship" + }, + "categories": [ + "minimalist", + "structured", + "textural", + "elegant", + "paper-based" + ], + "visual_characteristics": [ + "torn-paper effect", + "serif typography", + "hierarchical layout", + "handwritten annotations", + "earth-tone palette", + "negative space" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "balance", + "rhythm" + ], + "visual_techniques": [ + "textural layering", + "typographic contrast", + "accent objects" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/096/metadata.json b/src/data/detailed/096/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..2f5a3ce3f76c3f4cb247910b719fc0c9be20d03f --- /dev/null +++ b/src/data/detailed/096/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "096", + "url": "https://www.csszengarden.com/096", + "css_url": "https://www.csszengarden.com/096/096.css", + "title": "Japanese Garden", + "author": "Masanori Kawachi", + "description": { + "summary": "A serene web design featuring a bamboo leaf background with a clean, structured layout that organizes content into distinct sections marked by Asian-inspired typographic elements.", + "visual_style": "The design combines Eastern aesthetics with minimalist web principles, using natural imagery and symbolic Chinese/Japanese characters as visual anchors.", + "emotional_impact": "Creates a calm, meditative atmosphere through soft green tones and organic elements, evoking a sense of tranquility and natural harmony.", + "compositional_elements": "Vertical content flow with distinct hierarchical sections, each introduced by a decorative character paired with English text, all contained within a balanced two-column layout." + }, + "artistic_context": { + "style_influences": "Traditional Asian calligraphy, Zen garden aesthetics, minimalist web design", + "visual_metaphors": "Nature as teacher, path to enlightenment, organic growth as learning" + }, + "categories": [ + "minimalist", + "asian-inspired", + "nature-themed", + "structured", + "educational", + "organic" + ], + "visual_characteristics": [ + "bamboo-leaf backdrop", + "dual-language headings", + "calligraphic elements", + "green monochromatic palette", + "clear typographic hierarchy", + "nested navigation lists" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "rhythm", + "contrast" + ], + "visual_techniques": [ + "textural layering", + "symbolic typography", + "natural imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/097/metadata.json b/src/data/detailed/097/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..758c42cd8724794bcd13cec1a37cdd05a7791c32 --- /dev/null +++ b/src/data/detailed/097/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "097", + "url": "https://www.csszengarden.com/097", + "css_url": "https://www.csszengarden.com/097/097.css", + "title": "No Frontiers!", + "author": "Michal Mokrzycki", + "description": { + "summary": "A serene, elegant website design featuring a harmonious blend of soft green hues and structured content areas that creates a zen-like atmosphere while maintaining clarity and readability.", + "visual_style": "The design employs a clean, minimalist approach with a calligraphic logo and thoughtful use of white space, embodying its 'zen garden' concept through visual restraint and careful placement.", + "emotional_impact": "The soft lime-green background creates a peaceful, refreshing atmosphere that feels both calming and intellectually stimulating, evoking a sense of natural tranquility.", + "compositional_elements": "A two-column layout with clear vertical sections provides organized content flow, while the accent elements like the fork illustration and decorative question mark add visual interest without disrupting harmony." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, digital zen aesthetics, calligraphic art traditions", + "visual_metaphors": "Garden as structured beauty, fork as tool for consumption/selection, enlightenment pathway" + }, + "categories": [ + "minimalist", + "organic", + "instructional", + "zen-inspired", + "two-column", + "nature-themed" + ], + "visual_characteristics": [ + "soft-green palette", + "calligraphic typography", + "white space utilization", + "rounded content areas", + "vertical rhythm", + "symbolic imagery" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "harmony" + ], + "visual_techniques": [ + "typographic contrast", + "asymmetrical balance", + "color blocking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/098/metadata.json b/src/data/detailed/098/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..6a7870016ec3fccf9a5f05f5790cdc407c505725 --- /dev/null +++ b/src/data/detailed/098/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "098", + "url": "https://www.csszengarden.com/098", + "css_url": "https://www.csszengarden.com/098/098.css", + "title": "Edo and Tokyo", + "author": "Daisuke Sato", + "description": { + "summary": "A striking juxtaposition of traditional Japanese architectural imagery with bold, modern graphic elements, creating a harmonious blend of Eastern aesthetics and contemporary digital design", + "visual_style": "High-contrast black and white illustrations combined with vibrant green geometric elements and decorative floral patterns, creating a balanced fusion of organic and structured forms", + "emotional_impact": "Evokes a sense of tranquility and contemplation while simultaneously communicating technical sophistication and creative innovation", + "compositional_elements": "Left-anchored architectural illustration with diagonal green shapes directing flow across the page, framed by delicate vine-like decorative elements creating an asymmetrical but balanced layout" + }, + "artistic_context": { + "style_influences": "Japanese woodblock prints, contemporary vector graphics, minimalist information design", + "visual_metaphors": "Garden as digital cultivation, natural growth patterns mirroring code structure, traditional and modern coexistence" + }, + "categories": [ + "contrast-driven", + "east-meets-west", + "modular", + "geometric", + "decorative", + "information-rich" + ], + "visual_characteristics": [ + "high-contrast monochrome", + "bold green accents", + "asymmetrical balance", + "ornamental border elements", + "multi-column layout", + "architectural illustration" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "hierarchy", + "rhythm" + ], + "visual_techniques": [ + "silhouetting", + "layering", + "directional flow" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/100/metadata.json b/src/data/detailed/100/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0c3ba6da02b272008f35dbd751e902b57b7bd5e0 --- /dev/null +++ b/src/data/detailed/100/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "100", + "url": "https://www.csszengarden.com/100", + "css_url": "https://www.csszengarden.com/100/100.css", + "title": "15 Petals", + "author": "Eric Meyer and Dave Shea", + "description": { + "summary": "A serene web design template featuring a Zen garden aesthetic with a prominent lotus flower integrated with a structured layout for content presentation.", + "visual_style": "A harmonious blend of natural imagery and structured digital elements, with a calming color scheme anchored by muted greens and accented by vibrant florals.", + "emotional_impact": "Creates a peaceful, contemplative atmosphere through the use of natural imagery, soft color transitions, and balanced spacing.", + "compositional_elements": "Two-column layout with a header featuring nature photography, a prominent flower element overlaying the header, and clearly defined content sections with ample white space." + }, + "artistic_context": { + "style_influences": "Japanese garden aesthetics, minimalist web design, nature-inspired digital art", + "visual_metaphors": "Blooming flower suggesting growth and enlightenment, water elements conveying tranquility and flow" + }, + "categories": [ + "nature-inspired", + "minimalist", + "structured", + "serene", + "elegant", + "functional" + ], + "visual_characteristics": [ + "floral-motif", + "two-column-layout", + "translucent-panels", + "gradient-backgrounds", + "natural-photography", + "soft-color-transitions" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "hierarchy", + "contrast" + ], + "visual_techniques": [ + "transparency", + "photographic integration", + "textural contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/101/metadata.json b/src/data/detailed/101/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..e60e9cbe76ce2bbcc4defe3b282366ba1bcaaca6 --- /dev/null +++ b/src/data/detailed/101/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "101", + "url": "https://www.csszengarden.com/101", + "css_url": "https://www.csszengarden.com/101/101.css", + "title": "punkass", + "author": "Mikhel Proulx", + "description": { + "summary": "A balanced and multi-column web layout for a CSS design showcase combining Eastern-inspired illustrations with structured content organization. The design blends organic, hand-drawn floral motifs with structured typographic elements.", + "visual_style": "The aesthetic combines minimalist structure with decorative organic elements, creating contrast between geometric organization and free-flowing illustrations that frame the content.", + "emotional_impact": "Creates a contemplative, artistic atmosphere that suggests the meeting of technical precision and creative expression, reinforced by the Zen garden metaphor in both text and illustrations.", + "compositional_elements": "A three-column grid layout with clear sectional divisions, unified by decorative line drawings of lotus flowers and branches that weave throughout the composition to create visual cohesion." + }, + "artistic_context": { + "style_influences": "East Asian ink drawings, minimalist web design, botanical illustration, technical documentation", + "visual_metaphors": "Garden as creative space, flowering ideas, paths to knowledge, balance between structure and nature" + }, + "categories": [ + "grid-based", + "illustrative", + "minimalist", + "educational", + "eastern-inspired", + "technical" + ], + "visual_characteristics": [ + "multi-column layout", + "botanical line drawings", + "vertical rhythm", + "photographic elements", + "white space utilization", + "typographic hierarchy" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "unity", + "hierarchy" + ], + "visual_techniques": [ + "framing", + "negative space", + "organic linework" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/103/metadata.json b/src/data/detailed/103/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..a28fe3d42b10a6282a62a195939f4ca9394579c4 --- /dev/null +++ b/src/data/detailed/103/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "103", + "url": "https://www.csszengarden.com/103", + "css_url": "https://www.csszengarden.com/103/103.css", + "title": "Odyssey", + "author": "Terrence Conley", + "description": { + "summary": "An elegant medieval-inspired web design with rich gold and dark burgundy tones, featuring ornate decorative elements and classical illustration motifs that evoke ancient manuscripts and epic voyages.", + "visual_style": "The design employs a luxurious, antique aesthetic with ornamental borders, decorative medallions, and illustrated ship imagery that creates a sense of historical grandeur and craftsmanship.", + "emotional_impact": "The dark background with golden accents creates a sense of mystery, wisdom, and reverence, invoking the feeling of discovering ancient knowledge or treasure.", + "compositional_elements": "A vertical scroll layout with clearly defined sections marked by medallion icons, framed by ornate golden borders and featuring illustrated elements that guide the viewer through the content." + }, + "artistic_context": { + "style_influences": "Medieval illuminated manuscripts, Byzantine art, classical Greek motifs, maritime historical art", + "visual_metaphors": "Journey, exploration, ancient wisdom, treasure maps" + }, + "categories": [ + "ornate", + "medieval", + "decorative", + "classical", + "gilded", + "historical" + ], + "visual_characteristics": [ + "gold-on-dark contrast", + "ornamental borders", + "decorative medallions", + "illustrated elements", + "vertical scrolling layout", + "wave-pattern motifs" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "unity" + ], + "visual_techniques": [ + "framing", + "ornamental detailing", + "illustrative elements" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/104/metadata.json b/src/data/detailed/104/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..1f2b45cd3a2df54214496e682737d8617cf0bb76 --- /dev/null +++ b/src/data/detailed/104/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "104", + "url": "https://www.csszengarden.com/104", + "css_url": "https://www.csszengarden.com/104/104.css", + "title": "Invitation", + "author": "Brad Dailey", + "description": { + "summary": "An elegant, formal invitation design with Eastern-influenced aesthetics, featuring a balanced layout with contrasting typography and subtle decorative elements.", + "visual_style": "A harmonious blend of traditional elegance and modern minimalism, with careful attention to typographic hierarchy and negative space.", + "emotional_impact": "Creates a sense of tranquility and contemplation through its balanced composition, muted color palette, and formal typographic treatment.", + "compositional_elements": "Two-column layout with clear vertical organization, featuring centered decorative header and structured content sections with subtle dividing elements." + }, + "artistic_context": { + "style_influences": "Japanese aesthetic principles, formal invitation design, traditional manuscript layouts", + "visual_metaphors": "Garden as a space of cultivation and growth, path of enlightenment, structural elegance" + }, + "categories": [ + "minimal", + "elegant", + "formal", + "traditional", + "structured", + "typographic" + ], + "visual_characteristics": [ + "two-column layout", + "serif typography", + "earth-tone palette", + "hierarchical headings", + "subtle dividers", + "negative space" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "unity" + ], + "visual_techniques": [ + "typographic scaling", + "formal alignment", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/105/metadata.json b/src/data/detailed/105/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..5e3627be240a7af8ae60a863a6e41fdada5c6b28 --- /dev/null +++ b/src/data/detailed/105/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "105", + "url": "https://www.csszengarden.com/105", + "css_url": "https://www.csszengarden.com/105/105.css", + "title": "Austrian's Dark Side", + "author": "Rene Grassegger", + "description": { + "summary": "A dark, atmospheric web design utilizing a stark contrast between black backgrounds and sepia-toned paper elements to create a zen-like, artistic space", + "visual_style": "The design employs a collage-like arrangement of torn paper notes pinned against a black void, creating a tactile, handcrafted aesthetic with digital precision", + "emotional_impact": "Contemplative and mysterious mood established through the dramatic lighting, shadow effects, and isolated paper fragments floating in darkness", + "compositional_elements": "A vertical asymmetrical layout with paper notes clustered along the left side and larger content areas floating to the right, creating a deliberate imbalance and visual tension" + }, + "artistic_context": { + "style_influences": "Japanese wabi-sabi aesthetics, film noir lighting techniques, physical scrapbooking, analog photography", + "visual_metaphors": "Meditation through fragments, emergence from darkness, pinned thoughts, tactile knowledge" + }, + "categories": [ + "minimalist", + "high-contrast", + "textural", + "asymmetrical", + "zen-inspired", + "analog-digital" + ], + "visual_characteristics": [ + "shadow-play", + "paper-texture", + "pinned-elements", + "sepia-toning", + "dramatic-lighting", + "hand-imagery" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "tension", + "depth" + ], + "visual_techniques": [ + "vignetting", + "material simulation", + "dimensional layering" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/106/metadata.json b/src/data/detailed/106/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..43db80c8ce1f9f0a52be3f02729193122aaaac55 --- /dev/null +++ b/src/data/detailed/106/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "106", + "url": "https://www.csszengarden.com/106", + "css_url": "https://www.csszengarden.com/106/106.css", + "title": "Mediterranean", + "author": "John Whittet", + "description": { + "summary": "A harmonious web design featuring a gradient blue-to-green background complemented by architectural steps with orange accents, creating a serene yet structured visual experience.", + "visual_style": "The design employs minimalist principles with an Eastern aesthetic influence, using architectural elements and a tranquil color palette to evoke contemplation and clarity.", + "emotional_impact": "The composition conveys tranquility and enlightenment through its soothing color gradient, clear hierarchy, and rhythmic structural elements.", + "compositional_elements": "The layout combines a striking header with architectural imagery, a narrow sidebar with navigation elements, and a flowing content area against a gradient background." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, modernist architecture, minimalist web design", + "visual_metaphors": "Steps representing progression, clarity, ascension to knowledge" + }, + "categories": [ + "minimalist", + "nature-inspired", + "gradient", + "architectural", + "harmonious", + "structured" + ], + "visual_characteristics": [ + "blue-green gradient", + "geometric steps", + "orange accents", + "clean typography", + "vertical sidebar", + "textural contrast" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "rhythm", + "hierarchy" + ], + "visual_techniques": [ + "color gradient", + "structural framing", + "consistent spacing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/107/metadata.json b/src/data/detailed/107/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..ba2d78c99d350aa2eee71f7188e51e5e7294b147 --- /dev/null +++ b/src/data/detailed/107/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "107", + "url": "https://www.csszengarden.com/107", + "css_url": "https://www.csszengarden.com/107/107.css", + "title": "Defiance", + "author": "Angelo Paralos", + "description": { + "summary": "A striking, high-contrast web design using a dramatic red and black color scheme with raw, handwritten typography and distressed visual elements creating a rebellious, anarchic aesthetic.", + "visual_style": "The design employs a gritty, aggressive approach with hand-drawn elements, cross-outs, and intentionally chaotic typography that evokes protest art and punk aesthetics.", + "emotional_impact": "Creates an unsettling, provocative atmosphere through harsh color contrast, jagged lines, and deliberately crude execution that communicates rebellion and defiance.", + "compositional_elements": "A vertical scroll layout featuring irregular text blocks against a vibrant red background, punctuated by black hand-drawn symbols and white accents creating dynamic tension." + }, + "artistic_context": { + "style_influences": "Punk rock aesthetics, anarchist zines, street art, protest posters, underground manifestos", + "visual_metaphors": "Rebellion, destruction, challenging convention, raw expression" + }, + "categories": [ + "anarchic", + "high-contrast", + "experimental", + "brutalist", + "anti-design", + "punk-inspired" + ], + "visual_characteristics": [ + "hand-drawn", + "distressed", + "asymmetrical", + "stark-contrast", + "grunge", + "scratchy-textures" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "disruption", + "tension", + "visual hierarchy" + ], + "visual_techniques": [ + "gestural marks", + "chaotic typography", + "limited palette" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/108/metadata.json b/src/data/detailed/108/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..07b1bb23702f62566f457c4b824dad206d40d3bb --- /dev/null +++ b/src/data/detailed/108/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "108", + "url": "https://www.csszengarden.com/108", + "css_url": "https://www.csszengarden.com/108/108.css", + "title": "404 Not Found", + "author": null, + "description": { + "summary": "A minimalist web design featuring a clean, text-focused layout with a traditional document structure presenting information in a hierarchical format.", + "visual_style": "The design employs a restrained, functional approach with emphasis on readability and information hierarchy through basic typography and spacing.", + "emotional_impact": "Creates a sense of order and clarity through its straightforward presentation and minimal aesthetic, evoking a feeling of simplicity and accessibility.", + "compositional_elements": "Vertical flow with clear section headings, body text blocks, and bulleted lists organized in a single-column layout with consistent spacing." + }, + "artistic_context": { + "style_influences": "Early web design sensibilities, document-oriented layouts, academic information design", + "visual_metaphors": "Paper document, scholarly text, instructional manual" + }, + "categories": [ + "minimalist", + "text-centric", + "functional", + "hierarchical", + "structured", + "accessible" + ], + "visual_characteristics": [ + "black-text-on-white", + "single-column", + "bulleted-lists", + "hyperlink-formatting", + "section-headings", + "consistent-margins" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "readability", + "simplicity", + "consistency" + ], + "visual_techniques": [ + "typographic contrast", + "vertical rhythm", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/109/metadata.json b/src/data/detailed/109/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..4f38f9b2798257b7d0dc4513b21d137d8e474f85 --- /dev/null +++ b/src/data/detailed/109/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "109", + "url": "https://www.csszengarden.com/109", + "css_url": "https://www.csszengarden.com/109/109.css", + "title": "Pneuma", + "author": "Adam Polselli", + "description": { + "summary": "A visually striking web layout demonstrating CSS capabilities through a contrasting color scheme and structured information hierarchy, combining organic floral imagery with technical content presentation.", + "visual_style": "The design merges organic natural elements with structured digital typography, creating tension between the fluid and the technical through vibrant color contrasts.", + "emotional_impact": "The vivid magenta against teal creates an energetic, almost meditative atmosphere that balances technical precision with creative expression.", + "compositional_elements": "The layout uses a three-column structure with a dramatic header, clear sectioning through typographic hierarchy, and consistent spacing patterns." + }, + "artistic_context": { + "style_influences": "Digital-organic fusion, Web 2.0 aesthetics, Eastern-inspired minimalism", + "visual_metaphors": "Blooming flower representing growth and possibility, contrasting colors suggesting harmony of opposites" + }, + "categories": [ + "digital-organic", + "instructional", + "high-contrast", + "grid-based", + "typographic", + "technical" + ], + "visual_characteristics": [ + "color-blocking", + "layered-imagery", + "typographic-hierarchy", + "magenta-teal-palette", + "sectioned-content", + "photo-typography-integration" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "balance" + ], + "visual_techniques": [ + "color opposition", + "typographic scaling", + "negative space utilization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/110/metadata.json b/src/data/detailed/110/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..3697dbe097e579b75fa8441d5b635ae6587b917e --- /dev/null +++ b/src/data/detailed/110/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "110", + "url": "https://www.csszengarden.com/110", + "css_url": "https://www.csszengarden.com/110/110.css", + "title": "Perfume de Gardenias", + "author": "Armando Sosa", + "description": { + "summary": "A vibrant, early 2000s web design featuring bold orange and burgundy color scheme with decorative floral and figurative elements framing content areas", + "visual_style": "Retro web aesthetic combining strong contrasting colors, illustrative silhouettes, and textured borders with a central white content area", + "emotional_impact": "Warm, energetic atmosphere created through high-saturation colors and organic decorative elements, conveying nostalgia for early web design periods", + "compositional_elements": "Asymmetrical layout with distinct content zones, bordered by decorative elements, featuring sidebar navigation and central text content" + }, + "artistic_context": { + "style_influences": "Y2K web design, early CSS demonstration sites, digital art nouveau", + "visual_metaphors": "Garden/floral elements suggesting growth and organic beauty, hand gesture indicating guidance or invitation" + }, + "categories": [ + "retro-web", + "decorative", + "high-contrast", + "asymmetrical", + "textured", + "illustrative" + ], + "visual_characteristics": [ + "halftone-borders", + "silhouette-illustrations", + "floral-motifs", + "burgundy-sidebar", + "content-framing", + "textured-background" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "repetition", + "emphasis", + "framing" + ], + "visual_techniques": [ + "visual hierarchy", + "decorative framing", + "color blocking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/112/metadata.json b/src/data/detailed/112/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..fd0b8b114c8ed29d0a47a44240db8fba18fd8454 --- /dev/null +++ b/src/data/detailed/112/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "112", + "url": "https://www.csszengarden.com/112", + "css_url": "https://www.csszengarden.com/112/112.css", + "title": "Mountain Resort", + "author": "Jordi Romkema", + "description": { + "summary": "A thematic web design with a strong nature motif, featuring a rustic wooden sign framed by evergreen trees against a blue sky, combined with a structured content layout using gold ribbon headers and sidebar navigation.", + "visual_style": "The design employs a nostalgic, rustic aesthetic with natural imagery contrasted against structured information architecture. The composition combines photographic elements with stylized web interface components.", + "emotional_impact": "The visual elements create a sense of tranquility and natural order, while the structured content areas establish clarity and purposefulness.", + "compositional_elements": "The layout features a strong vertical structure with horizontal gold ribbon dividers organizing content sections. A prominent header image establishes the theme, while a right-aligned sidebar creates a functional navigation area." + }, + "artistic_context": { + "style_influences": "National park signage, traditional web design conventions, nature photography", + "visual_metaphors": "Path through wilderness as journey to knowledge, zen garden as orderly digital space" + }, + "categories": [ + "rustic", + "nature-inspired", + "hierarchical", + "traditional", + "structured", + "educational" + ], + "visual_characteristics": [ + "gold-accent-ribbons", + "nature-photography", + "sectioned-content", + "sidebar-navigation", + "earthy-palette", + "typographic-contrast" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "alignment" + ], + "visual_techniques": [ + "photographic framing", + "color blocking", + "visual metaphor" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/113/metadata.json b/src/data/detailed/113/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9a373735b88a2e7c785147b0b5d21bc69074f53a --- /dev/null +++ b/src/data/detailed/113/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "113", + "url": "https://www.csszengarden.com/113", + "css_url": "https://www.csszengarden.com/113/113.css", + "title": "Switch On", + "author": "Michael Fasani", + "description": { + "summary": "A stark, code-focused web design featuring a high-contrast neon green and black color scheme with a power button symbol as its iconic visual element.", + "visual_style": "The design employs a digital aesthetic that references code structures while using minimalist iconography and matrix-like visual elements.", + "emotional_impact": "Creates a technical, underground atmosphere that evokes hacker culture and digital enlightenment through its glowing green text against deep black backgrounds.", + "compositional_elements": "Structured in clearly defined horizontal sections with a consistent left-aligned layout, punctuated by arrow indicators and bordered content areas." + }, + "artistic_context": { + "style_influences": "Digital terminal interfaces, 1990s web aesthetics, hacker culture visuals, matrix-inspired typography", + "visual_metaphors": "Illumination through code, digital zen, power/activation symbolism" + }, + "categories": [ + "technical", + "high-contrast", + "digital", + "minimalist", + "code-aesthetic", + "retro-digital" + ], + "visual_characteristics": [ + "neon-green accents", + "terminal-like typography", + "circular power icon", + "grid background", + "code snippets as decoration", + "directional arrows" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "alignment" + ], + "visual_techniques": [ + "monochromatic color scheme", + "typographic contrast", + "visual framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/114/metadata.json b/src/data/detailed/114/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..935accf5a709987e48daf6318823674e8ac79705 --- /dev/null +++ b/src/data/detailed/114/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "114", + "url": "https://www.csszengarden.com/114", + "css_url": "https://www.csszengarden.com/114/114.css", + "title": "Salvage Yard", + "author": "Justin Peters", + "description": { + "summary": "A nostalgic web design demonstrating CSS styling capabilities through a zen garden concept, combining organic imagery with structured layout patterns", + "visual_style": "The design employs a harmonious blend of natural photographic elements and structured text areas, creating a juxtaposition between organic and digital aesthetics", + "emotional_impact": "Evokes a calm, contemplative mood through soft color transitions and natural imagery, balanced with an organized information hierarchy", + "compositional_elements": "Features a multi-column layout with distinct content zones, using header banners with photographic elements to separate thematic sections" + }, + "artistic_context": { + "style_influences": "Japanese zen garden philosophy, early 2000s web design aesthetics, nature-inspired digital art", + "visual_metaphors": "Path/journey imagery, natural elements representing growth and harmony, structured layout symbolizing order within organic systems" + }, + "categories": [ + "instructional", + "nature-inspired", + "minimalist", + "grid-based", + "educational", + "retro-web" + ], + "visual_characteristics": [ + "muted color palette", + "photographic headers", + "multi-column layout", + "contrasting text sections", + "natural texture elements", + "hierarchical typography" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "repetition", + "alignment", + "proximity" + ], + "visual_techniques": [ + "textural juxtaposition", + "photographic framing", + "color blocking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/115/metadata.json b/src/data/detailed/115/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..711fbe4f0d9faa8d073a6220f2b76dd804dc2aaf --- /dev/null +++ b/src/data/detailed/115/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "115", + "url": "https://www.csszengarden.com/115", + "css_url": "https://www.csszengarden.com/115/115.css", + "title": "Burnt Offering", + "author": "Jonny Blair", + "description": { + "summary": "A dramatic, high-contrast web design featuring a deep red color scheme with flame imagery creating a powerful, mystical atmosphere around a structured content layout.", + "visual_style": "The design employs a strong Eastern aesthetic with contemplative spiritual undertones, using fire motifs against dark backgrounds to create tension and visual impact.", + "emotional_impact": "Evokes a sense of enlightenment and transformation through the dramatic contrast between dark backgrounds and fiery red-orange accents, creating both urgency and wisdom.", + "compositional_elements": "Organized in clear horizontal sections with a two-column layout. Strong header dominates the top, with alternating background colors defining content areas below." + }, + "artistic_context": { + "style_influences": "Eastern philosophical aesthetics, meditative arts, elemental symbolism", + "visual_metaphors": "Fire as transformation, journey as enlightenment, structure as discipline" + }, + "categories": [ + "dramatic", + "high-contrast", + "structured", + "eastern-inspired", + "elemental", + "minimalist" + ], + "visual_characteristics": [ + "flame-imagery", + "dark-red-palette", + "sectioned-layout", + "typographic-hierarchy", + "negative-space", + "border-defined-areas" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "balance" + ], + "visual_techniques": [ + "color symbolism", + "textural background", + "vertical rhythm" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/116/metadata.json b/src/data/detailed/116/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..fbea28b8a3a153e1687e22291b8d25ab6575f2b0 --- /dev/null +++ b/src/data/detailed/116/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "116", + "url": "https://www.csszengarden.com/116", + "css_url": "https://www.csszengarden.com/116/116.css", + "title": "Ragged", + "author": "Jose Florido", + "description": { + "summary": "A minimalist web design featuring a stark red and white color scheme with distressed textured edges, combining Eastern aesthetic influences with structured information display.", + "visual_style": "The design employs a highly structured grid layout with a distinctive red and white color palette, enhanced by intentionally rough, textured borders that create a handcrafted feel against the otherwise digital format.", + "emotional_impact": "The high-contrast color scheme creates visual tension while the structured layout provides clarity. The distressed elements evoke a sense of craftsmanship within a digital medium.", + "compositional_elements": "Clearly defined content sections with hierarchical headings delineated by textured red dividers, creating a rhythmic vertical flow with careful use of negative space." + }, + "artistic_context": { + "style_influences": "Japanese aesthetics, wabi-sabi philosophy, brutalist web design, minimalist typographic systems", + "visual_metaphors": "Digital craftsmanship, structured simplicity, contrasting elements coexisting harmoniously" + }, + "categories": [ + "minimalist", + "high-contrast", + "grid-based", + "textural", + "eastern-influenced", + "brutalist" + ], + "visual_characteristics": [ + "distressed borders", + "red-white contrast", + "hierarchical typography", + "negative space", + "structural grid", + "textural elements" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "rhythm" + ], + "visual_techniques": [ + "textural distressing", + "color blocking", + "typographic scaling" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/118/metadata.json b/src/data/detailed/118/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..59ac705cffd72b94e3776df6c585df48c0f979aa --- /dev/null +++ b/src/data/detailed/118/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "118", + "url": "https://www.csszengarden.com/118", + "css_url": "https://www.csszengarden.com/118/118.css", + "title": "Some Leafs", + "author": "Michael Tupy", + "description": { + "summary": "A serene, nature-inspired web design with a clear three-column layout featuring vibrant green bamboo imagery that establishes a tranquil atmosphere while maintaining functional organization of content.", + "visual_style": "The design employs a minimalist Zen aesthetic with natural elements integrated throughout, using organic leaf motifs as decorative elements to reinforce the garden theme.", + "emotional_impact": "Creates a sense of calm and clarity through generous white space, natural imagery, and a soothing green color palette that evokes feelings of growth and harmony.", + "compositional_elements": "Structured with a clear header featuring the bamboo macro photography, followed by a balanced three-column layout with distinct content areas separated by subtle borders and spacing." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, organic design, digital naturalism", + "visual_metaphors": "Growth, clarity, organic structure, natural harmony" + }, + "categories": [ + "minimalist", + "nature-inspired", + "organized", + "elegant", + "structured", + "harmonious" + ], + "visual_characteristics": [ + "green-dominant palette", + "natural textures", + "leaf motifs", + "columnar layout", + "macro photography", + "subtle borders" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "unity", + "contrast" + ], + "visual_techniques": [ + "repetition of organic elements", + "textural depth", + "natural color harmony" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/119/metadata.json b/src/data/detailed/119/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9243f580c50b60fe1887cffafbb65c9f016af641 --- /dev/null +++ b/src/data/detailed/119/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "119", + "url": "https://www.csszengarden.com/119", + "css_url": "https://www.csszengarden.com/119/119.css", + "title": "Pleasant Day", + "author": "Kyle Jones", + "description": { + "summary": "A nature-inspired web design featuring a vibrant green color scheme with a blurred grass background and a clean, structured layout that demonstrates CSS capabilities", + "visual_style": "The design blends organic natural imagery with structured digital interface elements, creating harmony between nature and technology", + "emotional_impact": "The bright green palette and flowing grass imagery evoke feelings of growth, renewal, and organic beauty within a digital context", + "compositional_elements": "The page uses a three-column layout with a prominent header banner, main content area, and sidebar navigation, all framed by a soft blue background" + }, + "artistic_context": { + "style_influences": "Digital minimalism, organic design, zen-inspired aesthetics", + "visual_metaphors": "Garden as digital growth, cultivated design, nurturing creativity" + }, + "categories": [ + "nature-inspired", + "minimalist", + "structured", + "educational", + "organic", + "grid-based" + ], + "visual_characteristics": [ + "green-dominant palette", + "blurred nature photography", + "hierarchical typography", + "clean section dividers", + "decorative floral emblem", + "high-contrast headers" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "balance", + "unity" + ], + "visual_techniques": [ + "photographic backdrop", + "color blocking", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/120/metadata.json b/src/data/detailed/120/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..66cd0cabf7bad24800b50350c58a888cf04fe4cb --- /dev/null +++ b/src/data/detailed/120/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "120", + "url": "https://www.csszengarden.com/120", + "css_url": "https://www.csszengarden.com/120/120.css", + "title": "Medioevo", + "author": "Emiliano Pennisi", + "description": { + "summary": "A dark, atmospheric web design with strong contrast between a decorative header and structured content area, blending ornate calligraphic elements with organized information architecture.", + "visual_style": "The design employs a gothic-romantic aesthetic with dramatic contrast between a textured, atmospheric header and a clean, text-heavy content area on black background.", + "emotional_impact": "Creates a mysterious, contemplative mood through the juxtaposition of ethereal imagery and structured information, evoking a sense of ancient wisdom in modern form.", + "compositional_elements": "Features a horizontal hierarchy with a decorative banner at top, followed by organized text columns against a dark background, with small iconic elements marking section headings." + }, + "artistic_context": { + "style_influences": "Asian-inspired calligraphy, gothic architecture imagery, minimalist information design, decorative serif typography", + "visual_metaphors": "Garden as structure, path to enlightenment, ancient wisdom in modern form" + }, + "categories": [ + "dark-aesthetic", + "elegant", + "high-contrast", + "calligraphic", + "structured", + "minimalist" + ], + "visual_characteristics": [ + "dramatic-header", + "ornate-typography", + "black-background", + "iconic-elements", + "decorative-calligraphy", + "structured-layout" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "balance" + ], + "visual_techniques": [ + "textural juxtaposition", + "typographic scale", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/121/metadata.json b/src/data/detailed/121/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9713472a2f96c3490782e5cac72c220d0ef591dd --- /dev/null +++ b/src/data/detailed/121/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "121", + "url": "https://www.csszengarden.com/121", + "css_url": "https://www.csszengarden.com/121/121.css", + "title": "60's Lifestyle", + "author": "Emiliano Pennisi", + "description": { + "summary": "A nostalgic web design featuring a 1960s-inspired header with a vintage car and whimsical elements set against a geometric blue backdrop, paired with a structured content layout below", + "visual_style": "The design blends retro illustration with modern web layout principles, creating a distinct contrast between the playful header and the organized, functional content sections", + "emotional_impact": "Evokes a sense of nostalgia and whimsy through the vintage imagery while maintaining clarity and usability through structured information architecture", + "compositional_elements": "Strong horizontal divisions separate content areas, with a vibrant illustrative header balanced by organized, text-heavy sections below in a more subdued color palette" + }, + "artistic_context": { + "style_influences": "Mid-century modern graphic design, 1960s advertising aesthetics, blue-print geometric patterns", + "visual_metaphors": "Journey through time, organized chaos, technological evolution" + }, + "categories": [ + "retro-modern", + "illustrative", + "geometric", + "structured", + "educational", + "two-toned" + ], + "visual_characteristics": [ + "vintage automobile illustration", + "geometric background pattern", + "split complementary color scheme", + "hierarchical navigation", + "segmented content blocks", + "accordion-style information design" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "balance" + ], + "visual_techniques": [ + "color blocking", + "illustrated iconography", + "boxed content sections" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/122/metadata.json b/src/data/detailed/122/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..498021191739f50da15823828806083fafb0daf9 --- /dev/null +++ b/src/data/detailed/122/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "122", + "url": "https://www.csszengarden.com/122", + "css_url": "https://www.csszengarden.com/122/122.css", + "title": "Centerfold", + "author": "John Oxton", + "description": { + "summary": "A minimalist web design with a split-layout structure that combines elegant typography with subtle green accents, creating a balanced and serene aesthetic reminiscent of zen philosophy.", + "visual_style": "The design employs a clean, asymmetrical composition with a prominent vertical division, utilizing negative space purposefully while balancing typographic elements against a striking portrait image.", + "emotional_impact": "Evokes a sense of tranquility and sophistication through its restrained color palette, thoughtful spacing, and delicate visual rhythm.", + "compositional_elements": "Features a two-column layout with a navigation sidebar on the left and content area on the right, anchored by an artistic portrait photograph at the top that establishes visual hierarchy." + }, + "artistic_context": { + "style_influences": "Minimalist design, Japanese zen aesthetics, mid-century modern typography", + "visual_metaphors": "Harmony through balance, simplicity as elegance, organic growth through structure" + }, + "categories": [ + "minimalist", + "elegant", + "structured", + "asymmetrical", + "typographic", + "zen-inspired" + ], + "visual_characteristics": [ + "split-layout", + "green-accents", + "negative-space", + "typographic-hierarchy", + "portrait-focal-point", + "muted-palette" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "whitespace" + ], + "visual_techniques": [ + "asymmetrical layout", + "typographic scaling", + "color accent" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/123/metadata.json b/src/data/detailed/123/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0d1aac529d2d8e91d6dd98ee2f07a6fce2e50d13 --- /dev/null +++ b/src/data/detailed/123/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "123", + "url": "https://www.csszengarden.com/123", + "css_url": "https://www.csszengarden.com/123/123.css", + "title": "'Skyroots'", + "author": "Axel Hebenstreit", + "description": { + "summary": "A serene web design themed around lotus flowers and zen aesthetics, featuring a rich purple gradient background with delicate floral imagery and golden accents.", + "visual_style": "The design employs an Eastern-inspired aesthetic with floating lotus flowers against a meditative color scheme, creating a harmonious digital garden environment.", + "emotional_impact": "Evokes tranquility and spiritual calm through the combination of deep purple tones, floating lotus imagery, and balanced spatial composition.", + "compositional_elements": "Structured with a prominent header featuring lotus imagery, a left sidebar for navigation, and a main content area with vertical text blocks organized in a rhythmic flow." + }, + "artistic_context": { + "style_influences": "Eastern philosophy aesthetics, digital minimalism, early 2000s web design, decorative spiritualism", + "visual_metaphors": "Floating lotus as enlightenment, garden as growth and learning, purple as wisdom and creativity" + }, + "categories": [ + "spiritual", + "nature-inspired", + "nostalgic", + "gradient-rich", + "decorative", + "asymmetrical" + ], + "visual_characteristics": [ + "floating lotus flowers", + "purple-magenta gradient", + "golden typography", + "textured backgrounds", + "asymmetrical composition", + "decorative floral motifs" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "balance" + ], + "visual_techniques": [ + "pattern overlay", + "floating elements", + "gradient backdrop" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/124/metadata.json b/src/data/detailed/124/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d63c340a9b1e2d5d36cd51b22e9ec6dd3c4f4d77 --- /dev/null +++ b/src/data/detailed/124/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "124", + "url": "https://www.csszengarden.com/124", + "css_url": "https://www.csszengarden.com/124/124.css", + "title": "Teatime", + "author": "Michaela Maria Sampl", + "description": { + "summary": "An elegant, minimalist web design that blends Eastern aesthetic principles with modern web layout techniques, featuring a delicate balance between ornamental elements and functional content hierarchy.", + "visual_style": "The design employs a serene, contemplative aesthetic with subtle organic decorative elements that frame a clean, structured content area.", + "emotional_impact": "Creates a calm, meditative atmosphere through the use of soft colors, ample white space, and natural imagery that evokes tranquility and focus.", + "compositional_elements": "The layout features a clear three-column structure with a prominent content area, subtle ornamental flourishes at the corners, and a rhythmic pattern background that unifies the composition." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, classical manuscript design, natural minimalism", + "visual_metaphors": "Tea ceremony (represented by the tea bowl), organic growth (shown in decorative flourishes), path to knowledge (structured content flow)" + }, + "categories": [ + "minimalist", + "organic", + "elegant", + "structured", + "traditional", + "zen-inspired" + ], + "visual_characteristics": [ + "geometric pattern background", + "ornamental flourishes", + "three-column layout", + "hierarchical typography", + "natural imagery", + "subdued color palette" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "contrast", + "hierarchy" + ], + "visual_techniques": [ + "framing", + "pattern repetition", + "typographic scale" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/125/metadata.json b/src/data/detailed/125/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..33c279dea7405674a4e655559a9cf9aac42b6846 --- /dev/null +++ b/src/data/detailed/125/metadata.json @@ -0,0 +1,44 @@ +{ + "id": "125", + "url": "https://www.csszengarden.com/125", + "css_url": "https://www.csszengarden.com/125/125.css", + "title": "Beccah", + "author": "Chris Morrell", + "description": { + "summary": "This design blends textured watercolor backgrounds with structured typography to create an artistic yet functional web layout. The composition juxtaposes organic visual elements against organized content sections.", + "visual_style": "The design employs a painterly aesthetic with translucent washes of color overlaid on a structured text layout, creating a contemplative and artistic digital space.", + "emotional_impact": "The watercolor textures and calligraphic elements evoke a sense of tranquility and creative reflection, balanced by the clarity of the information architecture.", + "compositional_elements": "A layered composition with textured background, subtle calligraphy, and organized content blocks creating visual depth while maintaining readability." + }, + "artistic_context": { + "style_influences": "Eastern watercolor painting, calligraphic arts, minimalist information design", + "visual_metaphors": "Organic nature elements (butterfly silhouette) suggesting transformation and beauty within structure" + }, + "categories": [ + "artistic", + "textural", + "layered", + "elegant", + "zen-inspired" + ], + "visual_characteristics": [ + "watercolor-wash", + "translucent-layers", + "typographic-hierarchy", + "organic-textures", + "subtle-color-gradients" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "hierarchy", + "unity" + ], + "visual_techniques": [ + "layering", + "textural depth", + "transparency" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/126/metadata.json b/src/data/detailed/126/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..1c7eed3a890c4accfca11e906c4d36bf646a186f --- /dev/null +++ b/src/data/detailed/126/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "126", + "url": "https://www.csszengarden.com/126", + "css_url": "https://www.csszengarden.com/126/126.css", + "title": "C-Note", + "author": "Brian Williams", + "description": { + "summary": "A refined web design featuring a blend of minimalist layout with sophisticated graphical elements, including a prominent spiral-patterned portrait medallion and subtle gradient background", + "visual_style": "The design employs a clean, structured approach with elegant typography and fine line work, creating a professional yet artistic presentation", + "emotional_impact": "The cool color palette and balanced composition evoke a sense of calm sophistication and intellectual clarity", + "compositional_elements": "A strong horizontal organization with clear section headers, complemented by a distinctive visual element in the top-left that creates visual interest against the otherwise grid-based layout" + }, + "artistic_context": { + "style_influences": "Financial document aesthetics, modernist grid systems, and digital-age minimalism", + "visual_metaphors": "Spiraling patterns suggesting growth and enlightenment, structured text blocks representing order and clarity" + }, + "categories": [ + "minimalist", + "structured", + "elegant", + "grid-based", + "professional", + "technical" + ], + "visual_characteristics": [ + "fine-line spiral patterns", + "gradient backgrounds", + "hierarchical typography", + "portrait medallion", + "sectional organization", + "ample white space" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "contrast", + "unity" + ], + "visual_techniques": [ + "geometric patterning", + "typographic scale", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/127/metadata.json b/src/data/detailed/127/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9594afad385b9caadeeedc77ec0ed24b6a759d15 --- /dev/null +++ b/src/data/detailed/127/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "127", + "url": "https://www.csszengarden.com/127", + "css_url": "https://www.csszengarden.com/127/127.css", + "title": "Vivacity", + "author": "Soso", + "description": { + "summary": "A nostalgic web design featuring a blend of early 2000s aesthetic with floral motifs, colorful headers, and a distinctive column-based layout structure", + "visual_style": "The design employs a playful, somewhat dated web aesthetic with bright colors, gradient backgrounds, and decorative floral elements that contrast with organized content blocks", + "emotional_impact": "Creates a feeling of whimsical nostalgia while maintaining an educational tone through its structured information presentation", + "compositional_elements": "Organized into a multi-column layout with a dominant central content area, colorful section headers, and a right sidebar featuring vibrant menu items" + }, + "artistic_context": { + "style_influences": "Early web design aesthetics, Y2K-era digital graphics, organic-digital fusion", + "visual_metaphors": "Garden elements suggesting growth and nurturing of web design skills" + }, + "categories": [ + "retro-digital", + "instructional", + "ornamental", + "structured", + "gradient-rich", + "multi-column" + ], + "visual_characteristics": [ + "floral imagery", + "bright color blocks", + "gradient backgrounds", + "hierarchical headers", + "decorative typography", + "distinctive borders" + ], + "design_principles": { + "primary_principles": [ + "visual hierarchy", + "color contrast", + "repetition", + "alignment" + ], + "visual_techniques": [ + "color blocking", + "decorative framing", + "typographic emphasis" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/128/metadata.json b/src/data/detailed/128/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..e5a33483f8bcd89d774ec3179b7eea75ca13056b --- /dev/null +++ b/src/data/detailed/128/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "128", + "url": "https://www.csszengarden.com/128", + "css_url": "https://www.csszengarden.com/128/128.css", + "title": "Dragen", + "author": "Matthew Buchanan", + "description": { + "summary": "A web design showcase platform featuring a striking blue dragon mascot as its focal point, combining vibrant color blocks with a structured information layout", + "visual_style": "The design employs a bold color-blocking approach with a distinctive header featuring a 3D dragon illustration against a gradient blue background, transitioning to a multi-column layout below", + "emotional_impact": "The vibrant colors and playful dragon create an energetic, creative atmosphere while maintaining professionalism through structured content organization", + "compositional_elements": "The layout follows a clear three-section structure: a dramatic header with illustration, a navigation sidebar in vibrant color blocks, and a main content area with ample white space" + }, + "artistic_context": { + "style_influences": "Early 2000s web design aesthetics with 3D rendering techniques and color-blocked navigation elements", + "visual_metaphors": "The dragon represents creative power and mastery, while the zen reference suggests balance and discipline in design" + }, + "categories": [ + "color-blocked", + "sectional", + "illustrative", + "educational", + "structured", + "gradient" + ], + "visual_characteristics": [ + "3D illustration", + "color-coded navigation", + "multi-column layout", + "gradient backgrounds", + "high-contrast typography", + "white space utilization" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "color theory", + "visual flow" + ], + "visual_techniques": [ + "color-blocking", + "typographic contrast", + "spatial division" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/129/metadata.json b/src/data/detailed/129/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8c9ab974d09b9348cbef57ce6ee4e2bb8e690296 --- /dev/null +++ b/src/data/detailed/129/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "129", + "url": "https://www.csszengarden.com/129", + "css_url": "https://www.csszengarden.com/129/129.css", + "title": "Geocities 1996", + "author": "Bruce Lawson", + "description": { + "summary": "A deliberately nostalgic web design featuring a notebook-style layout with vibrant floral patterns framing cream-colored content. The aesthetic intentionally evokes early web design with bright colors, playful typography, and decorative elements.", + "visual_style": "The design embraces an intentionally retro aesthetic that mimics 1990s web pages, using high-contrast colors, animated-style graphics, and a vertical scrolling format bound by spiral notebook edges.", + "emotional_impact": "Creates a sense of playful nostalgia through deliberately unsophisticated design elements, evoking feelings of whimsy and DIY charm reminiscent of early personal web pages.", + "compositional_elements": "A central content area is framed by repeating floral patterns on a bright blue background, with colorful text blocks, decorative buttons, and various visual sections creating a densely packed vertical composition." + }, + "artistic_context": { + "style_influences": "Early web aesthetics, DIY digital culture, scrapbooking, folk art digital expression", + "visual_metaphors": "Digital garden, handcrafted notebook, personal expression space" + }, + "categories": [ + "retro-digital", + "maximalist", + "folk-digital", + "playful", + "handcrafted" + ], + "visual_characteristics": [ + "repeating-patterns", + "high-saturation", + "notebook-framing", + "multi-colored-text", + "decorative-borders", + "gradient-elements" + ], + "design_principles": { + "primary_principles": [ + "repetition", + "contrast", + "emphasis", + "pattern" + ], + "visual_techniques": [ + "framing", + "color-blocking", + "visual-layering" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/130/metadata.json b/src/data/detailed/130/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..e0a79bf7b6cfaee5a3b94cbd493280ecfdcf939e --- /dev/null +++ b/src/data/detailed/130/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "130", + "url": "https://www.csszengarden.com/130", + "css_url": "https://www.csszengarden.com/130/130.css", + "title": "Pseudo-Sahara", + "author": "John Barrick", + "description": { + "summary": "A serene, educational web design that blends natural landscapes with structured information, creating a calm yet instructional environment for learning CSS techniques", + "visual_style": "Zen-inspired minimalism with a balance of organic imagery and structured content, using a natural color palette to create a peaceful atmosphere", + "emotional_impact": "Contemplative and inviting, evoking a sense of calm learning through the combination of desert landscape imagery and organized, accessible information", + "compositional_elements": "Two-column layout with a subtle hierarchy, featuring a panoramic sand dune header that transitions into a structured content area below" + }, + "artistic_context": { + "style_influences": "Japanese zen gardens, minimalist web design, nature-inspired digital aesthetics", + "visual_metaphors": "Sand dunes as a path to knowledge, blue sky suggesting openness and possibility" + }, + "categories": [ + "minimalist", + "nature-inspired", + "educational", + "zen-aesthetic", + "two-column", + "gradient-based" + ], + "visual_characteristics": [ + "sand dune imagery", + "blue-to-beige gradient", + "horizontal navigation", + "typographic contrast", + "bordered sections", + "curved decorative elements" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "harmony" + ], + "visual_techniques": [ + "natural textures", + "color transition", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/131/metadata.json b/src/data/detailed/131/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8d2ca55e7aa5bde12b11623172812c9badaee08e --- /dev/null +++ b/src/data/detailed/131/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "131", + "url": "https://www.csszengarden.com/131", + "css_url": "https://www.csszengarden.com/131/131.css", + "title": "Type Thing", + "author": "Michal Mokrzycki", + "description": { + "summary": "A textured, multi-column web design that combines organic visual elements with structured information architecture, creating a blend of natural and digital aesthetics.", + "visual_style": "The design employs a juxtaposition of textured backgrounds against organized content blocks, with a naturalistic color palette dominated by earthy greens, browns, and accents of vibrant yellow.", + "emotional_impact": "Evokes a sense of calm contemplation through its organic textures and spacious layout while maintaining clarity through structured information hierarchy.", + "compositional_elements": "Utilizes a three-column layout with distinct color blocking to separate functional areas; the textured left panel creates visual interest while the central content maintains readability." + }, + "artistic_context": { + "style_influences": "Minimalist information architecture with Japanese zen aesthetic touches in the textural elements and asymmetrical balance", + "visual_metaphors": "Natural growth and structure through the contrast of organic textures against organized information" + }, + "categories": [ + "textural", + "minimalist", + "organic", + "grid-based", + "earthy", + "functional" + ], + "visual_characteristics": [ + "scratched-texture", + "multi-column layout", + "yellow accents", + "hierarchical typography", + "earthy color palette", + "asymmetrical balance" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "functionality" + ], + "visual_techniques": [ + "textural juxtaposition", + "color blocking", + "typographic scaling" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/132/metadata.json b/src/data/detailed/132/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9a0430a6d1dd5b87e4ab04f357f30bd3254a83f4 --- /dev/null +++ b/src/data/detailed/132/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "132", + "url": "https://www.csszengarden.com/132", + "css_url": "https://www.csszengarden.com/132/132.css", + "title": "Bonsai", + "author": "Martin Plazotta", + "description": { + "summary": "A nature-inspired web design featuring an organic tree branch motif with vibrant green watercolor leaves against a clean white background, complemented by a pale green sidebar containing organized textual content.", + "visual_style": "The design employs a minimalist yet organic aesthetic, combining hand-drawn black branch illustrations with translucent watercolor-style foliage to create a zen-like visual metaphor for digital growth.", + "emotional_impact": "The design evokes a sense of tranquility and harmony through its natural imagery and breathing space, while the structured content areas maintain clarity and professionalism.", + "compositional_elements": "The layout contrasts organic, flowing elements on the right with structured, hierarchical content in a sidebar format, creating a balanced tension between natural freedom and organized information." + }, + "artistic_context": { + "style_influences": "Japanese brush painting, minimalist web design, botanical illustration, watercolor techniques", + "visual_metaphors": "Growth, organic development, branching paths, natural harmony within structured environments" + }, + "categories": [ + "organic", + "minimalist", + "nature-inspired", + "hierarchical", + "asymmetrical", + "instructional" + ], + "visual_characteristics": [ + "watercolor foliage", + "calligraphic line work", + "green-white contrast", + "nested content blocks", + "bullet-point navigation", + "organic-geometric fusion" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "metaphor" + ], + "visual_techniques": [ + "organic illustration", + "modular content", + "directional flow" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/133/metadata.json b/src/data/detailed/133/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..12f7695bfb01ce965a5f19843d02d9bb3daffbb4 --- /dev/null +++ b/src/data/detailed/133/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "133", + "url": "https://www.csszengarden.com/133", + "css_url": "https://www.csszengarden.com/133/133.css", + "title": "Ordered Zen", + "author": "Steve Smith", + "description": { + "summary": "A structured web design showcasing a minimalist aesthetic with a zen-inspired approach to CSS demonstrations, featuring earthy tones and organized content blocks within a harmonious layout.", + "visual_style": "Clean, organized, and hierarchical design with subtle natural motifs and a restrained color palette that creates a calm, instructional atmosphere.", + "emotional_impact": "Creates a sense of tranquility and clarity through ample white space, consistent structural elements, and a subdued color scheme.", + "compositional_elements": "Three-column layout with clear content sections, decorative floral elements in the header, and consistent typographic styling throughout." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, minimalist web design, early 2000s instructional websites", + "visual_metaphors": "Garden as representation of growth and cultivation, natural elements suggesting organic development" + }, + "categories": [ + "minimalist", + "instructional", + "structured", + "nature-inspired", + "educational", + "grid-based" + ], + "visual_characteristics": [ + "beige-toned", + "hierarchical-layout", + "floral-motifs", + "subtle-textures", + "organized-typography", + "horizontal-elements" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "consistency", + "simplicity" + ], + "visual_techniques": [ + "visual grouping", + "textural contrast", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/134/metadata.json b/src/data/detailed/134/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..35827728c99b9ec3e0426d4b5edc6d6a3892008e --- /dev/null +++ b/src/data/detailed/134/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "134", + "url": "https://www.csszengarden.com/134", + "css_url": "https://www.csszengarden.com/134/134.css", + "title": "El Collar de Tomas", + "author": "Maria Stultz", + "description": { + "summary": "A thoughtfully structured web layout blending Eastern aesthetic influences with technical precision, using warm earth tones against a textured background to create a meditative yet instructional atmosphere.", + "visual_style": "The design employs a rich, earthy color palette with asymmetrical column structure, creating visual warmth while maintaining functional clarity through distinct content sections and hierarchical typography.", + "emotional_impact": "The warm color palette and nature-inspired textures evoke tranquility and contemplation, reinforced by the balanced composition that guides the viewer through information systematically.", + "compositional_elements": "A three-column layout with variable width sections creates visual rhythm, with the dominant central content area balanced by narrower navigation columns, all unified by consistent color treatments." + }, + "artistic_context": { + "style_influences": "Asian minimalism, arts and crafts movement, organic modernism", + "visual_metaphors": "Garden path, meditation space, instructional scroll" + }, + "categories": [ + "earthy", + "structured", + "minimalist", + "educational", + "zen-inspired", + "grid-based" + ], + "visual_characteristics": [ + "warm-toned", + "textured background", + "multi-column layout", + "hierarchical typography", + "organic color blocks", + "low-contrast accents" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "rhythm", + "unity" + ], + "visual_techniques": [ + "color blocking", + "textural contrast", + "asymmetrical balance" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/135/metadata.json b/src/data/detailed/135/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f178e3bb4a12ff8020ecacd69087eeae3c67655d --- /dev/null +++ b/src/data/detailed/135/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "135", + "url": "https://www.csszengarden.com/135", + "css_url": "https://www.csszengarden.com/135/135.css", + "title": "contemporary nouveau", + "author": "David Hellsing", + "description": { + "summary": "A sophisticated web design featuring a split-layout with a cream content area and vibrant orange sidebar, unified by flowing organic decorative elements and elegant typography.", + "visual_style": "The design employs a zen-inspired minimalism with organic decorative flourishes, creating a balance between structured information and artistic expression.", + "emotional_impact": "The contrast between warm earth tones and clean typography evokes a sense of thoughtful craftsmanship and creative inspiration.", + "compositional_elements": "A distinctive curved black divider separates the header from content, while the vertical split creates a strong directional flow and functional separation." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, early 2000s web design, minimalist typography, organic illustration", + "visual_metaphors": "Flowing curves suggesting a path or journey, circular elements evoking contemplation and completeness" + }, + "categories": [ + "minimalist", + "elegant", + "organic", + "structured", + "asymmetrical", + "warm-toned" + ], + "visual_characteristics": [ + "split-layout", + "flowing curves", + "decorative silhouettes", + "high-contrast typography", + "textured background", + "earth-tone palette" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "repetition" + ], + "visual_techniques": [ + "asymmetrical layout", + "decorative illustration", + "vertical rhythm" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/136/metadata.json b/src/data/detailed/136/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8a4dfdc3844840cd86915a5632ab7ffb785163dc --- /dev/null +++ b/src/data/detailed/136/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "136", + "url": "https://www.csszengarden.com/136", + "css_url": "https://www.csszengarden.com/136/136.css", + "title": "The Final Ending", + "author": "Ray Henry", + "description": { + "summary": "A dramatic dark-themed web design featuring a glowing jack-o'-lantern set against a black background with striking blood-red design elements and typography.", + "visual_style": "Gothic horror aesthetic with high contrast elements, featuring dramatic lighting effects and deliberate bloodstain-like visual motifs that create an immersive, unsettling atmosphere.", + "emotional_impact": "Evokes a sense of foreboding and mystery through the use of deep shadows, blood-red accents, and eerie imagery that creates tension and visual intrigue.", + "compositional_elements": "Asymmetrical layout with strong vertical content flow, punctuated by bold red headings and strategic placement of visual elements against the dark canvas." + }, + "artistic_context": { + "style_influences": "Horror film aesthetics, gothic design, grunge textures, Halloween iconography", + "visual_metaphors": "Blood drips representing creative flow, illuminated pumpkin suggesting enlightenment amidst darkness" + }, + "categories": [ + "gothic", + "high-contrast", + "dark-themed", + "atmospheric", + "horror-inspired", + "textural" + ], + "visual_characteristics": [ + "blood-drip effects", + "glowing jack-o'-lantern", + "red-on-black contrast", + "textured background", + "dramatic lighting", + "grunge aesthetics" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "emphasis", + "hierarchy", + "atmosphere" + ], + "visual_techniques": [ + "dramatic lighting", + "textural layering", + "color psychology" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/137/metadata.json b/src/data/detailed/137/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9059a1b02b057bf86026978ff540adcd7e76a507 --- /dev/null +++ b/src/data/detailed/137/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "137", + "url": "https://www.csszengarden.com/137", + "css_url": "https://www.csszengarden.com/137/137.css", + "title": "DJ Style", + "author": "Ramon Bispo", + "description": { + "summary": "A monochromatic blue web design featuring a turntable illustration and structured multi-column layout demonstrating CSS styling capabilities with clearly defined content sections and navigation elements.", + "visual_style": "The design employs a clean, structured grid layout with a distinctive aquatic blue monochromatic color scheme, creating a cohesive thematic presence across all elements.", + "emotional_impact": "The cool blue tones evoke a calm, meditative atmosphere that aligns with the 'zen' concept, while maintaining a technical, educational feel appropriate for a web design resource.", + "compositional_elements": "The page is organized into a header with logo, followed by multi-column content sections with defined headings and bordered containers, creating clear visual separation between functional areas." + }, + "artistic_context": { + "style_influences": "Early 2000s web design aesthetics with a blend of minimalist structure and decorative typographic elements", + "visual_metaphors": "Water/fluidity suggested by bubble elements and blue tones, zen garden represented through organized structure and contemplative space" + }, + "categories": [ + "monochromatic", + "grid-based", + "educational", + "web-centric", + "nostalgic", + "technical" + ], + "visual_characteristics": [ + "blue-gradient backgrounds", + "bordered content blocks", + "illustrative header", + "multi-column layout", + "bubble motifs", + "typographic contrast" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "repetition", + "unity", + "contrast" + ], + "visual_techniques": [ + "color blocking", + "modular layout", + "visual metaphor" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/138/metadata.json b/src/data/detailed/138/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..dd11ed2cc67c9364e20663f3ea941c8b485003ab --- /dev/null +++ b/src/data/detailed/138/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "138", + "url": "https://www.csszengarden.com/138", + "css_url": "https://www.csszengarden.com/138/138.css", + "title": "Cube Garden", + "author": "Masanori Kawachi", + "description": { + "summary": "A thoughtfully structured web design showcasing a blend of functional navigation and organic aesthetic elements, creating a harmonious balance between technical precision and natural inspiration.", + "visual_style": "The design employs a clean, minimalist approach with selective use of organic green accents against a predominantly white background, creating a serene and focused visual environment.", + "emotional_impact": "The gentle green color palette combined with elegant script headings evokes a sense of tranquility and organic growth, balancing the technical subject matter with a natural warmth.", + "compositional_elements": "A two-column layout clearly separates navigation from content, with distinct visual hierarchies established through color blocking, typography scale, and whitespace management." + }, + "artistic_context": { + "style_influences": "Zen-inspired minimalism, botanical aesthetics, digital modernism", + "visual_metaphors": "Garden as digital growth, green shoots as emerging technology, enlightenment path" + }, + "categories": [ + "minimalist", + "functional", + "organic", + "educational", + "structured", + "zen-inspired" + ], + "visual_characteristics": [ + "two-column layout", + "green accent colors", + "script typography", + "botanical iconography", + "white space utilization", + "hierarchical navigation" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "unity" + ], + "visual_techniques": [ + "color blocking", + "typographic variation", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/139/metadata.json b/src/data/detailed/139/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..99330b8cfe9214b6c4e18022e535901cb092bc2d --- /dev/null +++ b/src/data/detailed/139/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "139", + "url": "https://www.csszengarden.com/139", + "css_url": "https://www.csszengarden.com/139/139.css", + "title": "Neat & Tidy", + "author": "Oli Dale", + "description": { + "summary": "A striking web design featuring a dark, grungy aesthetic with bright yellow and red accents against a textured black background, incorporating the visual metaphor of a paintbrush to symbolize artistic design creation.", + "visual_style": "The design employs a dramatically textured, distressed approach with high contrast elements and an artistic, handcrafted feel that references traditional painting and zen philosophy through visual metaphor.", + "emotional_impact": "Creates an intense, almost rebellious atmosphere that balances creative energy with meditative philosophy, conveying both artistic freedom and disciplined craft.", + "compositional_elements": "Vertical scrolling layout with clear section divisions marked by large yellow headings, contrasted against the dark textured background with a prominent red paintbrush image serving as a visual anchor." + }, + "artistic_context": { + "style_influences": "Grunge aesthetics, eastern philosophical visual elements, traditional painting tools imagery, distressed textures", + "visual_metaphors": "Paintbrush representing creative control, textured edges symbolizing handcrafted approach, zen garden as ordered creativity" + }, + "categories": [ + "grunge", + "high-contrast", + "artistic", + "textural", + "eastern-influenced", + "industrial" + ], + "visual_characteristics": [ + "distressed-borders", + "textured-background", + "paintbrush-motif", + "yellow-red-black-palette", + "dramatic-typography", + "vertical-hierarchy" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "emphasis", + "rhythm", + "hierarchy" + ], + "visual_techniques": [ + "textural layering", + "typographic contrast", + "metaphorical imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/140/metadata.json b/src/data/detailed/140/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..4d18369400a49bb0a8904f071da992f73c2f5938 --- /dev/null +++ b/src/data/detailed/140/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "140", + "url": "https://www.csszengarden.com/140", + "css_url": "https://www.csszengarden.com/140/140.css", + "title": "The Hall", + "author": "Michael Simmons", + "description": { + "summary": "A contemplative web design featuring a hallway image with warm amber lighting that creates a sense of depth and perspective, complemented by a three-column layout with clean typographic hierarchy", + "visual_style": "Minimalist layout with zen-inspired aesthetics using a warm color palette and atmospheric imagery to create a sense of tranquil sophistication", + "emotional_impact": "The amber-gold lighting creates a meditative, warm atmosphere that evokes tranquility and intellectual focus", + "compositional_elements": "Three distinct vertical columns create clear information zones, with the central content area highlighted by a soft yellow background against cooler sidebar tones" + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetic, minimalist design, architectural photography", + "visual_metaphors": "Illuminated path, journey, enlightenment, clarity through simplicity" + }, + "categories": [ + "minimalist", + "atmospheric", + "architectural", + "zen-inspired", + "columnar", + "warm-toned" + ], + "visual_characteristics": [ + "golden-amber lighting", + "perspective depth", + "tri-column layout", + "typographic hierarchy", + "color blocking", + "atmospheric photography" + ], + "design_principles": { + "primary_principles": [ + "balance", + "contrast", + "hierarchy", + "unity" + ], + "visual_techniques": [ + "atmospheric perspective", + "color temperature", + "textural contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/141/metadata.json b/src/data/detailed/141/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..98138c7cacf0497580e64cd154d80f56897db272 --- /dev/null +++ b/src/data/detailed/141/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "141", + "url": "https://www.csszengarden.com/141", + "css_url": "https://www.csszengarden.com/141/141.css", + "title": "Golden Cut", + "author": "Petr Stanciek", + "description": { + "summary": "A serene, zen-inspired web design showcasing an elegant blend of soft colors and structured layout that embodies tranquility while maintaining functional clarity.", + "visual_style": "Minimalist yet warm approach featuring a botanical pattern background with clean typographic treatments and structured content areas.", + "emotional_impact": "Evokes calm contemplation through balanced composition, warm color palette, and thoughtful negative space.", + "compositional_elements": "Two-column layout with hierarchical text blocks, subtle decorative elements, and a prominent header that anchors the design." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, modernist web design, nature-inspired pattern work", + "visual_metaphors": "Garden as knowledge cultivation, path to enlightenment, organic growth" + }, + "categories": [ + "minimalist", + "nature-inspired", + "structured", + "warm-toned", + "elegant", + "zen-aesthetic" + ], + "visual_characteristics": [ + "floral-pattern-background", + "two-column-layout", + "color-accent-typography", + "hierarchical-headings", + "soft-color-palette", + "content-sectioning" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "hierarchy", + "contrast" + ], + "visual_techniques": [ + "pattern repetition", + "negative space", + "color blocking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/142/metadata.json b/src/data/detailed/142/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..89556c6a357980b7b4737dac27640a0cd0bbdbc1 --- /dev/null +++ b/src/data/detailed/142/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "142", + "url": "https://www.csszengarden.com/142", + "css_url": "https://www.csszengarden.com/142/142.css", + "title": "Invasion of the Body Switchers", + "author": "Andy Clarke", + "description": { + "summary": "A cinematic web design inspired by vintage film posters, featuring a dramatic central image with prominently displayed typography against a rich, gradient background", + "visual_style": "The design employs a theatrical aesthetic with a film noir quality, combining vintage imagery with modern web layout techniques", + "emotional_impact": "Creates an atmosphere of intrigue and nostalgia through dramatic color contrasts and the use of vintage visual elements", + "compositional_elements": "Organized with a central focal point anchored by the vintage image, surrounded by hierarchical text elements and geometric orange information blocks" + }, + "artistic_context": { + "style_influences": "Film noir, vintage movie posters, 1950s science fiction aesthetics, retro typography", + "visual_metaphors": "Theatrical presentation, cinematic experience, journey of discovery" + }, + "categories": [ + "vintage", + "cinematic", + "theatrical", + "retro", + "high-contrast", + "dramatic" + ], + "visual_characteristics": [ + "gradient-background", + "angular-geometry", + "vintage-imagery", + "typographic-hierarchy", + "color-blocking", + "textural-edges" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "emphasis", + "balance" + ], + "visual_techniques": [ + "layering", + "color-blocking", + "textural-framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/143/metadata.json b/src/data/detailed/143/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..3c8fb5526310073fbc276dc7c8ce7a790fdfb54e --- /dev/null +++ b/src/data/detailed/143/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "143", + "url": "https://www.csszengarden.com/143", + "css_url": "https://www.csszengarden.com/143/143.css", + "title": "Pixelisation", + "author": "Lim Yuan Qing", + "description": { + "summary": "A minimalist web design with a structured grid layout featuring a pixel art icon and clear typographic hierarchy", + "visual_style": "The design employs a monochromatic, clean aesthetic with structured content blocks and precise spatial organization", + "emotional_impact": "Creates a sense of order and clarity through generous white space and methodical arrangement of elements", + "compositional_elements": "Content is organized in numbered sections with clear headings, sidebar elements, and a consistent visual rhythm" + }, + "artistic_context": { + "style_influences": "Minimalist web design, pixel art aesthetics, modernist information design", + "visual_metaphors": "Digital garden as growth space, pixel blocks as building elements" + }, + "categories": [ + "minimalist", + "grid-based", + "monochromatic", + "structured", + "educational", + "technical" + ], + "visual_characteristics": [ + "pixel-art iconography", + "numbered sections", + "white space", + "typographic hierarchy", + "sidebar organization", + "geometric simplicity" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "clarity", + "consistency" + ], + "visual_techniques": [ + "grid layout", + "negative space", + "modular sections" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/144/metadata.json b/src/data/detailed/144/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..7b3a5ac31f9c770dc3f2cbd1245f133e13d5881d --- /dev/null +++ b/src/data/detailed/144/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "144", + "url": "https://www.csszengarden.com/144", + "css_url": "https://www.csszengarden.com/144/144.css", + "title": "Verdure", + "author": "Lim Yuan Qing", + "description": { + "summary": "A serene, nature-inspired web design that combines organic imagery with structured layout principles to demonstrate CSS capabilities while evoking a zen-like aesthetic.", + "visual_style": "The design employs a minimalist approach with natural elements, creating a harmonious balance between organic photography and structured information presentation.", + "emotional_impact": "The verdant imagery and soft color palette evoke tranquility and contemplation, reinforced by the spacious layout and gentle visual rhythm.", + "compositional_elements": "A well-defined two-column layout with a prominent nature header image, clear typographic hierarchy, and thoughtful spacing creates an organized yet organic flow." + }, + "artistic_context": { + "style_influences": "Japanese zen garden aesthetics, minimalist web design, organic naturalism", + "visual_metaphors": "Garden as growth and cultivation, path as learning journey, natural harmony as design ideal" + }, + "categories": [ + "minimalist", + "nature-inspired", + "structured", + "organic", + "two-column", + "instructional" + ], + "visual_characteristics": [ + "green-dominant palette", + "photographic header", + "asymmetrical balance", + "typographic contrast", + "subtle iconography", + "hierarchical spacing" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "harmony" + ], + "visual_techniques": [ + "natural imagery", + "dual-column structure", + "accent colors" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/146/metadata.json b/src/data/detailed/146/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d78482bb0b8d390f6db5abf8f04b0258be103974 --- /dev/null +++ b/src/data/detailed/146/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "146", + "url": "https://www.csszengarden.com/146", + "css_url": "https://www.csszengarden.com/146/146.css", + "title": "Urban", + "author": "Matt, Kim & Nicole", + "description": { + "summary": "A visually layered web design that blends architectural photography with watercolor washes and structured text content, creating a juxtaposition between organic artistic elements and organized information hierarchy.", + "visual_style": "The design employs a mixed-media aesthetic combining photographic elements with semi-transparent watercolor textures, vertical navigation, and a multi-column layout that creates visual depth.", + "emotional_impact": "The blend of urban architectural imagery with soft watercolor washes creates a contemplative atmosphere that balances structured precision with artistic fluidity.", + "compositional_elements": "A defined vertical navigation column against a translucent backdrop sits adjacent to a main content area, with large typography overlays and architectural imagery anchoring the composition." + }, + "artistic_context": { + "style_influences": "Watercolor illustration, architectural photography, mixed-media collage, digital grunge", + "visual_metaphors": "Urban renewal, structure versus fluidity, past and present coexistence" + }, + "categories": [ + "mixed-media", + "architectural", + "textural", + "asymmetrical", + "watercolor", + "grid-based" + ], + "visual_characteristics": [ + "translucent color washes", + "architectural photography", + "vertical navigation", + "typographic overlays", + "multi-column layout", + "textural backgrounds" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "layering" + ], + "visual_techniques": [ + "photographic integration", + "color blending", + "spatial zoning" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/147/metadata.json b/src/data/detailed/147/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..64769a5d3fa48424cb56494a402f1b0a158c33d8 --- /dev/null +++ b/src/data/detailed/147/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "147", + "url": "https://www.csszengarden.com/147", + "css_url": "https://www.csszengarden.com/147/147.css", + "title": "Attitude", + "author": "Stephane Moens", + "description": { + "summary": "A serene, minimalist web design featuring a harmonious blend of organic zen imagery with structured text layout, creating a peaceful digital experience focused on CSS design principles.", + "visual_style": "The design employs a contemplative aesthetic with soft, muted colors and selective imagery that evokes traditional Eastern zen philosophy while maintaining modern web design sensibilities.", + "emotional_impact": "The calm, meditative atmosphere created by the subdued color palette and graceful figurative elements invites reflection and focus, mirroring the zen philosophy it visually references.", + "compositional_elements": "Structured in a balanced three-column layout with clear hierarchical organization, using negative space effectively to create breathing room between content sections." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, minimalist design, natural form photography, earthy color theory", + "visual_metaphors": "Path to enlightenment, natural harmony, structural beauty, mindful practice" + }, + "categories": [ + "minimalist", + "zen-inspired", + "structured", + "earthy", + "elegant", + "instructional" + ], + "visual_characteristics": [ + "muted-palette", + "three-column-layout", + "figural-photography", + "natural-elements", + "transparent-layering", + "typographic-hierarchy" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "contrast", + "hierarchy" + ], + "visual_techniques": [ + "negative space", + "tonal gradation", + "compositional framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/149/metadata.json b/src/data/detailed/149/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..96121c00b2bbbe84c66dbf4eae68ad36725debcd --- /dev/null +++ b/src/data/detailed/149/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "149", + "url": "https://www.csszengarden.com/149", + "css_url": "https://www.csszengarden.com/149/149.css", + "title": "Uncultivated", + "author": "Mario Carboni", + "description": { + "summary": "A serene web design featuring a split-layout with a naturalistic header image of golden grasses against blue water, followed by a structured content area with muted earth tones.", + "visual_style": "The design employs a minimalist aesthetic with a nature-inspired header, using a calm earth-tone palette and structured grid layout that balances organic imagery with organized content.", + "emotional_impact": "Creates a peaceful, contemplative atmosphere through the tranquil natural imagery and balanced composition, reinforcing the 'zen' concept through visual harmony.", + "compositional_elements": "Utilizes a clear vertical column structure with distinct content zones, framed by natural imagery at top and bottom, with careful attention to typographic hierarchy and negative space." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Japanese zen aesthetics, nature photography, modern grid layouts", + "visual_metaphors": "Tranquility through natural elements, clarity through structured space, balance through compositional harmony" + }, + "categories": [ + "minimalist", + "nature-inspired", + "instructional", + "grid-based", + "earth-tone", + "functional" + ], + "visual_characteristics": [ + "two-column layout", + "natural header imagery", + "beige-blue color scheme", + "typographic hierarchy", + "textural contrast", + "negative space" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "harmony" + ], + "visual_techniques": [ + "photographic framing", + "color temperature contrast", + "structural grid" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/150/metadata.json b/src/data/detailed/150/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..69f0a583735bbba9c7bb120b79be37fc0535b460 --- /dev/null +++ b/src/data/detailed/150/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "150", + "url": "https://www.csszengarden.com/150", + "css_url": "https://www.csszengarden.com/150/150.css", + "title": "By The Pier", + "author": "Peter Ong", + "description": { + "summary": "A serene website design featuring a blurred marina scene as the backdrop, with illuminated text overlaid on a deep blue gradient interface creating a contemplative digital space.", + "visual_style": "The design employs a minimalist approach with a vertical column layout set against a dreamlike photographic background, using luminous typography that appears to float above the dark blue surface.", + "emotional_impact": "The deep blue color palette combined with the glowing orange lights in the background image evokes a peaceful, meditative atmosphere that suggests tranquility and depth.", + "compositional_elements": "A single-column content structure anchored by a glowing, transparent title at the top, with clearly defined sections flowing downward through the gradient blue interface." + }, + "artistic_context": { + "style_influences": "Digital minimalism, ambient photography, luminous typography", + "visual_metaphors": "Water reflection as digital clarity, illuminated path as knowledge journey" + }, + "categories": [ + "atmospheric", + "minimalist", + "gradient", + "photographic", + "luminous", + "vertical" + ], + "visual_characteristics": [ + "depth-of-field", + "light-reflection", + "blue-orange-contrast", + "transparent-typography", + "sectional-hierarchy" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "alignment", + "repetition" + ], + "visual_techniques": [ + "bokeh photography", + "luminous typography", + "gradient interface" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/151/metadata.json b/src/data/detailed/151/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..2671b6305c1823f50c3bf65853acabada41fc2cb --- /dev/null +++ b/src/data/detailed/151/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "151", + "url": "https://www.csszengarden.com/151", + "css_url": "https://www.csszengarden.com/151/151.css", + "title": "Contempo Finery", + "author": "Ro London", + "description": { + "summary": "A minimalist, elegant web design featuring a light color palette with ample white space, subtle leaf motifs, and structured typography that creates a sense of calm sophistication.", + "visual_style": "The design employs a clean, airy aesthetic with a delicate balance between structured content areas and organic decorative elements, creating a harmonious zen-like quality.", + "emotional_impact": "The composition evokes a sense of tranquility and clarity through its restrained use of color, graceful script typography, and subtle natural imagery.", + "compositional_elements": "Content is organized in a clear vertical flow with well-defined content blocks, complemented by decorative leaf illustrations and handwritten script that softens the structured layout." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, botanical illustration, calligraphic tradition", + "visual_metaphors": "Growth, natural harmony, enlightened simplicity, zen philosophy" + }, + "categories": [ + "minimalist", + "elegant", + "calligraphic", + "structured", + "zen-inspired", + "botanical" + ], + "visual_characteristics": [ + "ample-whitespace", + "subtle-illustrations", + "script-typography", + "grid-based-layout", + "muted-palette", + "leaf-motifs" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "white space", + "contrast" + ], + "visual_techniques": [ + "typographic contrast", + "organic accents", + "structured information" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/152/metadata.json b/src/data/detailed/152/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b8ce2bdfc20ea99b0cde10a474b0bbbf42e59ae8 --- /dev/null +++ b/src/data/detailed/152/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "152", + "url": "https://www.csszengarden.com/152", + "css_url": "https://www.csszengarden.com/152/152.css", + "title": "Subway Dream", + "author": "Pablo Caro", + "description": { + "summary": "A stylized web design showcasing CSS capabilities through an elegant purple and blue color scheme featuring an illustrated female figure in a graceful dance pose against an abstract grid background.", + "visual_style": "The design employs an artistic, illustrative approach with a deep purple background and flowing script typography that creates a sense of creative movement and elegance.", + "emotional_impact": "The rich color palette and flowing illustration evoke a sense of creativity, inspiration, and artistic expression, creating a meditative and enlightened atmosphere.", + "compositional_elements": "The layout combines vertical text columns with a prominent flowing illustration that guides the eye from top to bottom, using negative space to create rhythm between content blocks." + }, + "artistic_context": { + "style_influences": "Digital illustration, calligraphic typography, zen-inspired aesthetics, geometric blueprint patterns", + "visual_metaphors": "Dance as transformation, flowing movement as creative freedom, enlightenment through knowledge" + }, + "categories": [ + "artistic", + "illustrative", + "elegant", + "grid-based", + "monochromatic", + "calligraphic" + ], + "visual_characteristics": [ + "deep-purple background", + "flowing script typography", + "illustrated character", + "blueprint-like patterns", + "vertical text columns", + "gradient blue figure" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "unity" + ], + "visual_techniques": [ + "layering", + "figure-ground relationship", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/153/metadata.json b/src/data/detailed/153/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..2771fe27feba70f8432c299ce9c9334ed09bd392 --- /dev/null +++ b/src/data/detailed/153/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "153", + "url": "https://www.csszengarden.com/153", + "css_url": "https://www.csszengarden.com/153/153.css", + "title": "Moss", + "author": "Mani Sheriar", + "description": { + "summary": "A nature-inspired web design with a two-column layout featuring a dark green textured background on the left and a lighter green panel on the right, unified by tree imagery that creates an organic, meditative aesthetic.", + "visual_style": "The design employs a zen garden metaphor through natural textures, organic patterns, and calligraphic script elements that contrast with structured content areas.", + "emotional_impact": "The verdant color palette and organic textures evoke tranquility, growth and enlightenment, creating a contemplative atmosphere that balances technical content with natural beauty.", + "compositional_elements": "A clear asymmetrical layout divides content between a textured, information-dense left column and a lighter, more spacious navigation area on the right, connected by flowing decorative elements and tree imagery." + }, + "artistic_context": { + "style_influences": "Japanese garden aesthetics, minimalist naturalism, calligraphic art, textural watercolor techniques", + "visual_metaphors": "Zen garden as digital space, trees as growth and knowledge, path as journey of learning" + }, + "categories": [ + "organic", + "nature-inspired", + "asymmetrical", + "textural", + "calligraphic", + "minimalist" + ], + "visual_characteristics": [ + "gradient-green", + "tree-silhouette", + "textured-background", + "decorative-scripts", + "two-column-layout", + "watercolor-effects" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "asymmetrical balance", + "unity" + ], + "visual_techniques": [ + "textural layering", + "silhouetting", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/154/metadata.json b/src/data/detailed/154/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..3503ff608c396cfe2cd8a764c037f31c6310c97b --- /dev/null +++ b/src/data/detailed/154/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "154", + "url": "https://www.csszengarden.com/154", + "css_url": "https://www.csszengarden.com/154/154.css", + "title": "Butterfly Effect", + "author": "Kevin Linkous", + "description": { + "summary": "An elegant web design featuring organic floral imagery against a rich dark background, creating a contemplative digital garden experience with balanced columns of content and navigation.", + "visual_style": "The design employs natural elements and organic aesthetics combined with structured typography to create a zen-like digital environment that balances nature with technology.", + "emotional_impact": "The warm earth tones against deep burgundy evoke tranquility and wisdom, creating a meditative atmosphere reinforced by the natural floral imagery.", + "compositional_elements": "Three distinct vertical columns create clear hierarchy: decorative floral borders, main content area with parchment-like texture, and a sleek navigation panel with high contrast text." + }, + "artistic_context": { + "style_influences": "Japanese garden aesthetics, scroll-like layout, natural-digital fusion, organic minimalism", + "visual_metaphors": "Digital garden, path to enlightenment, natural growth, flowering knowledge" + }, + "categories": [ + "organic", + "eastern-inspired", + "nature-infused", + "textural", + "asymmetrical", + "column-based" + ], + "visual_characteristics": [ + "floral photography", + "layered composition", + "parchment texture", + "burgundy-beige contrast", + "ornamental borders", + "typographic hierarchy" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "rhythm", + "organic unity" + ], + "visual_techniques": [ + "asymmetrical framing", + "natural motif integration", + "textural juxtaposition" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/155/metadata.json b/src/data/detailed/155/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..9451da4b41279631e48ddc751eb824658a50e8ed --- /dev/null +++ b/src/data/detailed/155/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "155", + "url": "https://www.csszengarden.com/155", + "css_url": "https://www.csszengarden.com/155/155.css", + "title": "Butterfly Effect", + "author": "Alen Grakalic", + "description": { + "summary": "A dual-column web design featuring a bold, high-contrast layout with a vintage aesthetic. The left section presents content in framed panels with deep burgundy headers against white backgrounds, complemented by a monochrome architectural photograph, while the right displays a gold-toned navigation area.", + "visual_style": "The design employs a structured, panel-based layout with strong horizontal divisions, creating a rhythmic visual pattern. It combines strong typography with a dramatic black and white image to establish a sense of sophistication and historical reference.", + "emotional_impact": "The design evokes a sense of authority and educational purpose through its structured format and high contrast color scheme. The deep burgundy and gold against dark backgrounds creates a formal, almost academic atmosphere.", + "compositional_elements": "The layout uses a clear vertical split with white-spaced text panels on the left and a gold-highlighted navigation column on the right. Strong horizontal rules and repeating border elements create a unified visual structure throughout." + }, + "artistic_context": { + "style_influences": "Modernist grid systems, print publication design, academic journals, vintage notebook aesthetics", + "visual_metaphors": "Structure as authority, framing as organization, borders as containment" + }, + "categories": [ + "grid-based", + "high-contrast", + "structured", + "duotone", + "academic", + "vintage" + ], + "visual_characteristics": [ + "bordered panels", + "horizontal dividers", + "monochrome imagery", + "strong headers", + "dual-column layout", + "color-coded sections" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "alignment" + ], + "visual_techniques": [ + "framing", + "color blocking", + "typographic contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/156/metadata.json b/src/data/detailed/156/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..ffdc8246663afd9c29be8624654410d3e4d6c7b6 --- /dev/null +++ b/src/data/detailed/156/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "156", + "url": "https://www.csszengarden.com/156", + "css_url": "https://www.csszengarden.com/156/156.css", + "title": "Table Layout Assassination", + "author": "Marko Krsul & Marko Dugonjic", + "description": { + "summary": "A dramatic high-contrast web design featuring Japanese-inspired aesthetics with bold red and black colors, silhouette figure, and traditional Asian motifs including Mount Fuji and pagoda shapes.", + "visual_style": "The design employs stark minimalism with dramatic contrasts, using a silhouette figure against a monochromatic background punctuated by vivid red text elements and traditional Japanese visual symbols.", + "emotional_impact": "Creates a sense of tension and drama through the high-contrast color scheme and radiating lines, evoking both traditional Asian aesthetics and modern digital sensibilities.", + "compositional_elements": "Clear vertical column structure with strategic use of asymmetry, featuring a human silhouette anchoring the left side balanced against architectural elements and mountain imagery on the right." + }, + "artistic_context": { + "style_influences": "Japanese woodblock printing, propaganda poster aesthetics, minimalist design, rising sun motif", + "visual_metaphors": "Enlightenment pathway suggested by visual journey from silhouette to temple, duality represented through stark black/white contrast" + }, + "categories": [ + "minimalist", + "eastern-inspired", + "high-contrast", + "typographic", + "structured", + "dramatic" + ], + "visual_characteristics": [ + "radiating-lines", + "silhouette-figure", + "monochromatic-palette", + "red-accents", + "architectural-elements", + "layered-composition" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "unity" + ], + "visual_techniques": [ + "silhouetting", + "typographic-highlighting", + "structural-framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/157/metadata.json b/src/data/detailed/157/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..c42b5d32ce01244b7641c626abd366cb733824b1 --- /dev/null +++ b/src/data/detailed/157/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "157", + "url": "https://www.csszengarden.com/157", + "css_url": "https://www.csszengarden.com/157/157.css", + "title": "Bugs", + "author": "Zohar Arad", + "description": { + "summary": "A nature-inspired web design that uses insect imagery as decorative elements against a clean white background with salmon-colored content panels and green navigation sections.", + "visual_style": "The design employs realistic insect illustrations as organic contrast to the geometric layout structure, creating a harmonious blend of natural and digital aesthetics.", + "emotional_impact": "The warm color palette and natural imagery evoke a sense of calm contemplation, balanced with structured information presentation.", + "compositional_elements": "Three-column layout with strategic asymmetry - wide content area flanked by a narrower navigation column, with insect illustrations positioned as visual anchors throughout the composition." + }, + "artistic_context": { + "style_influences": "Japanese garden aesthetics, biological illustration, minimalist web design", + "visual_metaphors": "Insects as symbols of transformation and natural beauty, contrasting with digital structure" + }, + "categories": [ + "nature-inspired", + "minimalist", + "instructional", + "organic", + "structured", + "illustrative" + ], + "visual_characteristics": [ + "realistic insect illustrations", + "salmon-green color scheme", + "white negative space", + "hierarchical typography", + "clean columnar layout", + "decorative natural elements" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "visual hierarchy", + "rhythm" + ], + "visual_techniques": [ + "photographic elements", + "color blocking", + "decorative illustration" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/158/metadata.json b/src/data/detailed/158/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..5a232dbdda2654c57057d482b22d9ac7485f6a7e --- /dev/null +++ b/src/data/detailed/158/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "158", + "url": "https://www.csszengarden.com/158", + "css_url": "https://www.csszengarden.com/158/158.css", + "title": "a Simple Sunset", + "author": "Rob Soule", + "description": { + "summary": "A sophisticated web design template featuring a dramatic sunset backdrop against a dark content area, creating a strong visual contrast and contemplative atmosphere.", + "visual_style": "The design employs a zen-inspired aesthetic with elegant typography against dramatic natural imagery, balancing organic and structured elements.", + "emotional_impact": "The golden sunset imagery evokes tranquility and inspiration, while the dark content area creates focus and contemplation.", + "compositional_elements": "A clear two-part composition with a dramatic header zone and a content-rich body arranged in a columnar layout with careful typographic hierarchy." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Eastern aesthetic philosophy, nature photography integration", + "visual_metaphors": "Sunset as enlightenment, dark background as clarity through simplicity" + }, + "categories": [ + "minimalist", + "nature-inspired", + "elegant", + "high-contrast", + "contemplative", + "grid-based" + ], + "visual_characteristics": [ + "golden-hour photography", + "dark background", + "columnar layout", + "typographic hierarchy", + "negative space", + "serif-sans contrast" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "focal point" + ], + "visual_techniques": [ + "light-dark juxtaposition", + "atmospheric framing", + "modular content blocks" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/159/metadata.json b/src/data/detailed/159/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..6a74ecff598e272e77bb47e8f9660d2697692148 --- /dev/null +++ b/src/data/detailed/159/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "159", + "url": "https://www.csszengarden.com/159", + "css_url": "https://www.csszengarden.com/159/159.css", + "title": "Berry Flavour", + "author": "Maren Becker", + "description": { + "summary": "A soft, feminine web design with a pink color scheme featuring a central content area on a light patterned background. The layout combines structured navigation with delicate visual styling.", + "visual_style": "The design employs a minimalist approach with a romantic, ethereal quality created through soft pink watercolor effects and a gingham pattern background.", + "emotional_impact": "The gentle pink palette and airy composition evoke a sense of tranquility and harmony, aligned with the 'zen' concept referenced in the design.", + "compositional_elements": "A two-column layout with clearly defined navigation sections on the left and main content on the right, unified by consistent styling elements and accented with small decorative icons." + }, + "artistic_context": { + "style_influences": "Web 2.0 aesthetics, watercolor art techniques, Japanese minimalism", + "visual_metaphors": "Garden serenity, flowing water, gentle structure" + }, + "categories": [ + "minimalist", + "feminine", + "monochromatic", + "structured", + "soft-textured", + "grid-based" + ], + "visual_characteristics": [ + "pink-dominated", + "watercolor-effect", + "gingham-background", + "two-column-layout", + "circular-badge", + "decorative-icons" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "repetition", + "balance", + "contrast" + ], + "visual_techniques": [ + "textural overlay", + "color harmony", + "typographic structure" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/160/metadata.json b/src/data/detailed/160/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d3733bf2e1b939eda713435fd51c6e04dfdfa031 --- /dev/null +++ b/src/data/detailed/160/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "160", + "url": "https://www.csszengarden.com/160", + "css_url": "https://www.csszengarden.com/160/160.css", + "title": "Daruma", + "author": "Stuart Cruickshank", + "description": { + "summary": "A minimalist web design featuring traditional Japanese-inspired dolls as a header image, combined with a clean, structured layout that demonstrates elegant CSS styling principles.", + "visual_style": "The design employs a zen-inspired aesthetic with subtle gray backgrounds, clear typographic hierarchy, and decorative butterfly motifs that enhance the spiritual theme.", + "emotional_impact": "Creates a calm, meditative atmosphere through subdued colors, generous whitespace, and balanced composition that invites contemplation and learning.", + "compositional_elements": "Structured in horizontal content blocks with clear separation, featuring a prominent header image, organized text sections with colored headings, and subtle decorative elements." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, zen philosophy, traditional Eastern crafts", + "visual_metaphors": "Garden as learning environment, path to enlightenment, balance and harmony" + }, + "categories": [ + "minimalist", + "structured", + "educational", + "zen-inspired", + "grid-based", + "balanced" + ], + "visual_characteristics": [ + "muted-palette", + "content-blocks", + "ornamental-butterflies", + "traditional-imagery", + "clear-hierarchy", + "negative-space" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "white space", + "rhythm" + ], + "visual_techniques": [ + "content blocking", + "color contrast", + "structural alignment" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/161/metadata.json b/src/data/detailed/161/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..acebb9045f15f868a3e384fa33f9a32bfc7499f0 --- /dev/null +++ b/src/data/detailed/161/metadata.json @@ -0,0 +1,44 @@ +{ + "id": "161", + "url": "https://www.csszengarden.com/161", + "css_url": "https://www.csszengarden.com/161/161.css", + "title": "Zenfandel", + "author": "Nicholas Rougeux", + "description": { + "summary": "A sophisticated web design that blends natural elements with structured typography to create a harmonious educational interface. Wine imagery and grape visuals frame a well-organized content structure.", + "visual_style": "The design employs a natural-meets-digital aesthetic, using soft green grape imagery as a backdrop for structured typographic content, creating a meditative yet instructional atmosphere.", + "emotional_impact": "The composition evokes a sense of tranquility and wisdom through its earthy color palette and balanced spacing, suggesting a peaceful learning environment.", + "compositional_elements": "A three-column layout with vertical navigation on the left, main content in the center, and decorative wine bottle imagery on the right creates a balanced framework with clear visual hierarchy." + }, + "artistic_context": { + "style_influences": "Zen-inspired minimalism, traditional scroll-like layout, vineyard aesthetics, classic manuscript design", + "visual_metaphors": "Journey of learning, cultivation of knowledge, wine aging as skill development, organic growth of expertise" + }, + "categories": [ + "natural", + "minimalist", + "instructional", + "organic", + "structured" + ], + "visual_characteristics": [ + "earth-tone palette", + "translucent overlays", + "serif-sans contrast", + "vertical navigation", + "botanical imagery" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "contrast", + "unity" + ], + "visual_techniques": [ + "textural background", + "visual framing", + "sectional organization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/162/metadata.json b/src/data/detailed/162/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..c49caa4839820b919c32c570c6c6ceb90828c7c6 --- /dev/null +++ b/src/data/detailed/162/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "162", + "url": "https://www.csszengarden.com/162", + "css_url": "https://www.csszengarden.com/162/162.css", + "title": "Angelus", + "author": "Vladimir Lukic", + "description": { + "summary": "A medieval-inspired web design featuring Gothic architectural elements and illuminated manuscript aesthetics, blending historical visual language with structured layout patterns", + "visual_style": "The design employs a deliberate antiquarian aesthetic with parchment texture backgrounds, decorative borders, and architectural imagery to create a historical, scholarly atmosphere", + "emotional_impact": "Creates a reverent, contemplative mood through warm earthen tones, ornate decorative elements, and structured typography reminiscent of medieval manuscripts", + "compositional_elements": "Organized in a vertical scroll with a prominent header image, decorated drop caps, and bordered sections that guide the viewer through a hierarchical reading experience" + }, + "artistic_context": { + "style_influences": "Gothic architecture, illuminated manuscripts, medieval decorative arts, Arts and Crafts movement", + "visual_metaphors": "Architectural elements suggesting wisdom and tradition, ornamental borders representing containment and order" + }, + "categories": [ + "medieval-inspired", + "ornamental", + "architectural", + "manuscript-style", + "textural", + "historicist" + ], + "visual_characteristics": [ + "parchment texture", + "decorative drop caps", + "ornamental borders", + "gothic imagery", + "illuminated headings", + "botanical motifs" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "historical reference" + ], + "visual_techniques": [ + "textural layering", + "ornamental framing", + "decorative typography" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/164/metadata.json b/src/data/detailed/164/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..1b3678ffa6f63a93c632f53740f28e39f8d830d5 --- /dev/null +++ b/src/data/detailed/164/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "164", + "url": "https://www.csszengarden.com/164", + "css_url": "https://www.csszengarden.com/164/164.css", + "title": "Chien", + "author": "Alex Miller", + "description": { + "summary": "A vibrant web design showcasing a nostalgic aesthetic with an orange and gold color scheme, combined with playful sculptural elements and structured content sections", + "visual_style": "The design employs a retro-inspired approach with warm colors, structured layout panels, and decorative 3D figurine elements creating visual interest against a grid-based content organization", + "emotional_impact": "The warm color palette and humorous figurine create an inviting, approachable atmosphere that balances playfulness with organized information presentation", + "compositional_elements": "Distinguished by a two-column layout below a prominent header area, with clearly defined content sections using color blocking and consistent typographic hierarchy" + }, + "artistic_context": { + "style_influences": "Early 2000s web design, mid-century modern aesthetics, Japanese zen philosophy visual cues", + "visual_metaphors": "Growth and cultivation suggested by the garden theme, enlightenment represented through structured simplicity" + }, + "categories": [ + "retro", + "grid-based", + "warm-toned", + "structured", + "playful", + "instructional" + ], + "visual_characteristics": [ + "orange-gold gradient", + "section color-blocking", + "sculptural figurine", + "hierarchical typography", + "bordered panels", + "consistent header styling" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "repetition", + "alignment", + "hierarchy" + ], + "visual_techniques": [ + "color blocking", + "typographic scale", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/165/metadata.json b/src/data/detailed/165/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..f779356d3b3b90b6e6aef0e92c09f995a4548499 --- /dev/null +++ b/src/data/detailed/165/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "165", + "url": "https://www.csszengarden.com/165", + "css_url": "https://www.csszengarden.com/165/165.css", + "title": "Red Paper", + "author": "Rob Soule", + "description": { + "summary": "A vintage-inspired web design featuring an aged paper aesthetic with a structured, document-like layout that evokes traditional printed materials and technical documentation", + "visual_style": "The design employs a nostalgic approach with sepia tones, textured backgrounds, and decorative borders to create an artisanal, handcrafted digital experience", + "emotional_impact": "The warm, muted color palette and textured elements create a contemplative, educational atmosphere that suggests historical significance and craftsmanship", + "compositional_elements": "A clear columnar structure with a main content area and sidebar navigation, framed by a decorative header that mimics vintage product labeling" + }, + "artistic_context": { + "style_influences": "Vintage ephemera, antique document design, artisanal paper goods, traditional publishing aesthetics", + "visual_metaphors": "Garden as cultivation of craft, paper as foundation for creation, aged materials as representation of wisdom" + }, + "categories": [ + "vintage", + "minimalist", + "textured", + "traditional", + "grid-based", + "artisanal" + ], + "visual_characteristics": [ + "sepia-toned", + "textured backgrounds", + "decorative borders", + "subtle shadows", + "contrasting panels", + "typographic hierarchy" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "unity", + "rhythm" + ], + "visual_techniques": [ + "texture layering", + "framing", + "tonal variation" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/166/metadata.json b/src/data/detailed/166/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b83a04489ac43305d1ea5e2472ef9da206a1e2d4 --- /dev/null +++ b/src/data/detailed/166/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "166", + "url": "https://www.csszengarden.com/166", + "css_url": "https://www.csszengarden.com/166/166.css", + "title": "Obsequience", + "author": "Pierce Gleeson", + "description": { + "summary": "A sophisticated web design that balances organic natural imagery with structured grid-based layout, creating a harmonious blend of technical precision and organic beauty.", + "visual_style": "The design employs a minimalist yet elegant approach with natural photography contrasting against structured content blocks, using asymmetrical balance to create visual interest.", + "emotional_impact": "The juxtaposition of water droplets on leaves and vibrant floral elements against the structured layout evokes a sense of tranquility and ordered simplicity, reinforcing the 'zen' concept.", + "compositional_elements": "The layout uses clearly defined content blocks with varying widths and heights, creating a rhythmic visual flow while maintaining hierarchy through color and spacing." + }, + "artistic_context": { + "style_influences": "Japanese design principles of simplicity and asymmetry, modern web design grid systems, nature-inspired organic aesthetics", + "visual_metaphors": "Garden as structure, water droplets as clarity, natural elements representing organic growth within structured design" + }, + "categories": [ + "minimalist", + "organic", + "grid-based", + "asymmetrical", + "nature-inspired", + "technical" + ], + "visual_characteristics": [ + "contrast-driven", + "photographic-elements", + "modular-layout", + "textural-juxtaposition", + "earth-tones", + "typographic-hierarchy" + ], + "design_principles": { + "primary_principles": [ + "balance", + "contrast", + "hierarchy", + "unity" + ], + "visual_techniques": [ + "juxtaposition", + "negative space", + "modular grids" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/167/metadata.json b/src/data/detailed/167/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..fb035921038c227422577d6e8226356474c00562 --- /dev/null +++ b/src/data/detailed/167/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "167", + "url": "https://www.csszengarden.com/167", + "css_url": "https://www.csszengarden.com/167/167.css", + "title": "Hoops - Tournament Edition", + "author": "David Marshall Jr.", + "description": { + "summary": "A nostalgic web design featuring a wood-grain background with a centralized layout and Eastern-inspired aesthetics, combining playful teaching elements with structured navigation", + "visual_style": "The design employs a rustic, warm aesthetic with a textured wooden background, decorative ribbons, and chalkboard elements creating a blend of traditional and digital learning environments", + "emotional_impact": "The warm color palette and hand-drawn elements evoke a sense of approachability and craftsmanship, balancing educational formality with playful engagement", + "compositional_elements": "A vertically-oriented central content area is framed by rich brown borders, with clear section delineations marked by red circular icons and bold headings, while sidebar navigation panels are contained in distinct boxed areas" + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, traditional chalkboard instruction, early 2000s web design, analog material textures", + "visual_metaphors": "Garden as learning path, chalkboard as teaching tool, wooden texture as natural foundation" + }, + "categories": [ + "rustic", + "educational", + "textured", + "themed", + "traditional", + "hierarchical" + ], + "visual_characteristics": [ + "wood-grain texture", + "ribbon banner", + "chalkboard element", + "circular markers", + "boxed navigation", + "high-contrast headings" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "unity" + ], + "visual_techniques": [ + "textural layering", + "iconic markers", + "framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/168/metadata.json b/src/data/detailed/168/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..e3442fd3825e5dcdb08dd159d4089151b79a8c92 --- /dev/null +++ b/src/data/detailed/168/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "168", + "url": "https://www.csszengarden.com/168", + "css_url": "https://www.csszengarden.com/168/168.css", + "title": "Hengarden", + "author": "Mr. Khmerang", + "description": { + "summary": "A playful satirical web design featuring white chickens on a blue background with a two-column layout that combines illustrative elements with structured content sections", + "visual_style": "The design employs a whimsical, colorful approach with illustrated chickens and decorative section headers against a clean layout structure", + "emotional_impact": "Creates a lighthearted, humorous mood through bright colors, decorative typography, and illustrative elements", + "compositional_elements": "A clear visual hierarchy separates content into distinct sections with decorative headers, sidebar navigation, and prominent chicken imagery" + }, + "artistic_context": { + "style_influences": "Early web design aesthetics, illustrated children's books, educational materials", + "visual_metaphors": "Chickens as symbols of freedom and enlightenment, road imagery suggesting a journey" + }, + "categories": [ + "playful", + "illustrative", + "informational", + "whimsical", + "educational", + "web-based" + ], + "visual_characteristics": [ + "bright-colors", + "hierarchical-layout", + "decorative-typography", + "illustrated-elements", + "two-column-structure", + "ornamental-headers" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "alignment" + ], + "visual_techniques": [ + "illustrative imagery", + "color blocking", + "decorative typography" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/169/metadata.json b/src/data/detailed/169/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..cb6538f2018f368e04be8ec1a83fd5d42e884ab0 --- /dev/null +++ b/src/data/detailed/169/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "169", + "url": "https://www.csszengarden.com/169", + "css_url": "https://www.csszengarden.com/169/169.css", + "title": "Greece Remembrance", + "author": "Pierre-Leo Bourbonnais", + "description": { + "summary": "A richly ornate web design combining classical architectural elements with modern web styling. The page features a Greco-Roman aesthetic with elaborate stone column borders framing content presented in a scroll-like format.", + "visual_style": "The design employs dramatic contrast between structural elements and content areas, creating a theatrical presentation that references ancient classical architecture while serving modern web functionality.", + "emotional_impact": "The design evokes a sense of grandeur and historical significance, balancing formality with an invitation to explore. The warm terracotta and stone palette creates a contemplative, museum-like atmosphere.", + "compositional_elements": "A symmetrical layout features decorative stone columns as borders, with content organized in a central scrolling panel. A dramatic header with classical imagery and warm lighting anchors the top section." + }, + "artistic_context": { + "style_influences": "Neoclassical architecture, Greco-Roman relief sculpture, illuminated manuscripts, traditional scroll documents", + "visual_metaphors": "Ancient knowledge repository, temple of learning, digital papyrus" + }, + "categories": [ + "classical", + "ornate", + "architectural", + "theatrical", + "symmetrical", + "textural" + ], + "visual_characteristics": [ + "columned-borders", + "stone-textures", + "warm-toned", + "relief-carvings", + "scroll-layout", + "header-imagery" + ], + "design_principles": { + "primary_principles": [ + "symmetry", + "contrast", + "hierarchy", + "framing" + ], + "visual_techniques": [ + "textural juxtaposition", + "decorative borders", + "spatial compartmentalization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/170/metadata.json b/src/data/detailed/170/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8857561c7306495089a0395bab6d962f59a48422 --- /dev/null +++ b/src/data/detailed/170/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "170", + "url": "https://www.csszengarden.com/170", + "css_url": "https://www.csszengarden.com/170/170.css", + "title": "Love is in the Air", + "author": "Nele Goetz", + "description": { + "summary": "A serene web design featuring a calming blue gradient background with colorful heart icons and organized content sections, creating a gentle and instructional atmosphere.", + "visual_style": "The design employs a tranquil, structured layout with consistent visual elements and a harmonious color palette centered around blue tones and accent colors.", + "emotional_impact": "The design evokes a sense of peace and clarity through its open spacing, soft colors, and orderly presentation of information.", + "compositional_elements": "Heart-shaped icons serve as section markers, clearly defined content blocks, and a right-side navigation panel create a balanced and organized visual hierarchy." + }, + "artistic_context": { + "style_influences": "Minimalist web design with subtle Eastern philosophical aesthetics suggested by the 'Zen' theme and heart motifs.", + "visual_metaphors": "Hearts symbolizing passion and care, blue suggesting tranquility and wisdom, structured sections representing organized thinking." + }, + "categories": [ + "minimalist", + "gradient-based", + "instructional", + "sectioned", + "icon-driven", + "tranquil" + ], + "visual_characteristics": [ + "blue-gradient-background", + "colorful-heart-icons", + "two-column-layout", + "serif-display-typography", + "alternating-section-colors" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "repetition", + "contrast", + "alignment" + ], + "visual_techniques": [ + "color-blocking", + "icon-as-waypoints", + "gradient-transitions" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/171/metadata.json b/src/data/detailed/171/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b44a2237b2d0cb957abe17099e1e293bd0bc5bc3 --- /dev/null +++ b/src/data/detailed/171/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "171", + "url": "https://www.csszengarden.com/171", + "css_url": "https://www.csszengarden.com/171/171.css", + "title": "Shaolin Yokobue", + "author": "Javier Cabrera", + "description": { + "summary": "A visually striking design featuring an illustrated monk figure playing a flute against a clean white background, complemented by a vertically-oriented black textured panel that contains the main content.", + "visual_style": "The design employs Eastern-inspired minimalism with ink brush aesthetics, creating a stark contrast between the organic textured black content area and the surrounding white space.", + "emotional_impact": "The visual elements evoke tranquility and contemplative focus through the balanced composition and muted color palette.", + "compositional_elements": "The layout features a vertical scroll format with a central black brushstroke panel that contains text, flanked by delicate plant-like branch elements extending from the sides." + }, + "artistic_context": { + "style_influences": "Traditional East Asian ink painting, calligraphic brushwork, minimalist design philosophy", + "visual_metaphors": "Natural growth, meditation, balance, simplicity" + }, + "categories": [ + "minimalist", + "eastern-inspired", + "monochromatic", + "textural", + "vertical", + "ink-brush" + ], + "visual_characteristics": [ + "high-contrast", + "organic-texture", + "brush-strokes", + "vertical-composition", + "asymmetrical-balance", + "illustrated-figure" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "rhythm" + ], + "visual_techniques": [ + "textural variation", + "negative space", + "illustrative elements" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/172/metadata.json b/src/data/detailed/172/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d7e2d58856536b7353c8c73aa5f620351618b1f8 --- /dev/null +++ b/src/data/detailed/172/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "172", + "url": "https://www.csszengarden.com/172", + "css_url": "https://www.csszengarden.com/172/172.css", + "title": "Blackcomb*75", + "author": "Bryan Carichner", + "description": { + "summary": "A harmonious blend of natural photography and structured web layout that creates a serene, educational interface set against a dramatic mountain landscape backdrop", + "visual_style": "The design employs a juxtaposition of organic natural elements with organized information panels, creating a zen-like balance between structured content and expansive imagery", + "emotional_impact": "The snow-covered mountains evoke tranquility and perspective, reinforcing the metaphorical journey suggested by the layout's vertical flow", + "compositional_elements": "A vertically-oriented single column of content overlaid on a panoramic mountain background, with clearly defined sections marked by decorative maple leaf icons" + }, + "artistic_context": { + "style_influences": "Minimalist information design, nature photography, Eastern philosophical aesthetics", + "visual_metaphors": "Mountain journey as learning path, snow as purity and clarity, zen garden as ordered complexity" + }, + "categories": [ + "nature-integrated", + "minimalist", + "educational", + "structured", + "metaphorical", + "content-focused" + ], + "visual_characteristics": [ + "panoramic-background", + "vertical-scrolling", + "sectioned-content", + "natural-iconography", + "muted-color-palette", + "clear-typography" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "alignment" + ], + "visual_techniques": [ + "background integration", + "content compartmentalization", + "symbolic navigation" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/173/metadata.json b/src/data/detailed/173/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..532091c04d6f0e5530b933dba5b044f666e81fcb --- /dev/null +++ b/src/data/detailed/173/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "173", + "url": "https://www.csszengarden.com/173", + "css_url": "https://www.csszengarden.com/173/173.css", + "title": "Red Stars", + "author": "Shafiq Rizwan", + "description": { + "summary": "A deep red web design showcasing CSS Zen Garden with elegantly organized content sections and decorative star motifs against a textured background.", + "visual_style": "The design employs a rich burgundy color scheme with stark white typography and decorative star elements creating an elegant, sophisticated aesthetic.", + "emotional_impact": "The deep red background evokes a sense of warmth and sophistication, while the white star elements create a celestial, enlightened atmosphere.", + "compositional_elements": "Content is arranged in a vertical column with clearly defined sections marked by icons, maintaining consistent margins and a strong visual hierarchy." + }, + "artistic_context": { + "style_influences": "Minimalist typography, celestial imagery, classical web design structure", + "visual_metaphors": "Stars as enlightenment, brackets as structure and containment" + }, + "categories": [ + "minimalist", + "elegant", + "structured", + "monochromatic", + "typographic", + "celestial" + ], + "visual_characteristics": [ + "deep-red background", + "white typography", + "star motifs", + "sectional icons", + "vertical layout", + "subtle texture" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "repetition", + "alignment" + ], + "visual_techniques": [ + "typographic scale", + "negative space", + "symbolic imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/174/metadata.json b/src/data/detailed/174/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b476f4e17760f78ba5c7bb7065f27a931d16c209 --- /dev/null +++ b/src/data/detailed/174/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "174", + "url": "https://www.csszengarden.com/174", + "css_url": "https://www.csszengarden.com/174/174.css", + "title": "Simple", + "author": "Shawn Chin", + "description": { + "summary": "A minimalist educational web design featuring a structured layout with clearly defined content sections, combining muted gray backgrounds with vibrant orange accent elements for intuitive navigation.", + "visual_style": "Clean, structured design with a zen-inspired aesthetic that employs generous white space and clear typographic hierarchy to create a calm, focused learning environment.", + "emotional_impact": "Establishes a serene, contemplative atmosphere through balanced composition and restrained color usage, evoking feelings of clarity and mindfulness.", + "compositional_elements": "Organized in horizontal sections with a two-column layout that separates explanatory text from interactive elements, creating rhythmic visual flow." + }, + "artistic_context": { + "style_influences": "Minimalist web design, Japanese zen aesthetics, early 2000s educational platforms", + "visual_metaphors": "Garden as knowledge cultivation, path as learning journey, enlightenment as design mastery" + }, + "categories": [ + "minimalist", + "structured", + "educational", + "grid-based", + "zen-inspired", + "functional" + ], + "visual_characteristics": [ + "two-column layout", + "high-contrast navigation", + "sectioned content", + "limited color palette", + "hierarchical typography", + "negative space" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "contrast", + "simplicity" + ], + "visual_techniques": [ + "color blocking", + "typographic scale", + "spatial grouping" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/175/metadata.json b/src/data/detailed/175/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..4caf6234826677f5dbc12417a55a1f9765c0beef --- /dev/null +++ b/src/data/detailed/175/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "175", + "url": "https://www.csszengarden.com/175", + "css_url": "https://www.csszengarden.com/175/175.css", + "title": "Business Style", + "author": "Gunta Klavina", + "description": { + "summary": "A minimalist web design showcasing the principles of clean CSS styling with a balanced, structured layout that combines a serene aesthetic with functional organization.", + "visual_style": "The design employs a zen-inspired simplicity with ample white space, clear typographic hierarchy, and a calming color palette centered around teal accents against a soft background.", + "emotional_impact": "Creates a sense of tranquility and order through its balanced composition, breathing room between elements, and subtle color transitions.", + "compositional_elements": "Well-defined content sections with clear boundaries, a two-column layout that transitions to single-column structures, and consistent spacing patterns that guide the eye naturally through the content." + }, + "artistic_context": { + "style_influences": "Minimalism, modernist web design, Japanese zen aesthetics", + "visual_metaphors": "Garden as structure and growth, path to enlightenment, simplicity as beauty" + }, + "categories": [ + "minimalist", + "structured", + "functional", + "clean", + "zen-inspired", + "grid-based" + ], + "visual_characteristics": [ + "limited-color-palette", + "generous-whitespace", + "silhouette-imagery", + "controlled-typography", + "sectional-composition", + "teal-accents" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "simplicity", + "functionality" + ], + "visual_techniques": [ + "negative space", + "color contrast", + "structural rhythm" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/176/metadata.json b/src/data/detailed/176/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..430d3303b5648fcc311826e6ae552829666545c4 --- /dev/null +++ b/src/data/detailed/176/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "176", + "url": "https://www.csszengarden.com/176", + "css_url": "https://www.csszengarden.com/176/176.css", + "title": "Kelmscott", + "author": "Bronwen Hodgkinson", + "description": { + "summary": "An elaborate medieval-inspired web design featuring ornate floral borders and illuminated manuscript aesthetics with a stark black and white color scheme", + "visual_style": "The design employs medieval manuscript illumination techniques with intricate botanical patterns framing a structured text layout reminiscent of ancient codices", + "emotional_impact": "Creates a sense of historical reverence and craftsmanship through rich ornamentation and deliberate visual constraints", + "compositional_elements": "Structured with an elaborate decorative border enclosing a central column of content organized into distinct sections with decorative initials and woodcut-style illustrations" + }, + "artistic_context": { + "style_influences": "Medieval illuminated manuscripts, Gothic ornamentation, woodcut illustration, Arts and Crafts movement", + "visual_metaphors": "Garden as knowledge, flourishing botanical elements representing growth and cultivation of skill" + }, + "categories": [ + "ornamental", + "historical", + "monochromatic", + "decorative", + "manuscript-inspired", + "illustrative" + ], + "visual_characteristics": [ + "intricate-patterning", + "botanical-motifs", + "illuminated-capitals", + "woodcut-illustrations", + "high-contrast", + "bordered-layout" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "rhythm", + "hierarchy", + "ornament" + ], + "visual_techniques": [ + "decorative framing", + "illustrated elements", + "typographic variation" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/177/metadata.json b/src/data/detailed/177/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d7e2f71b38437c5337f0a292c2a9529548be6cc0 --- /dev/null +++ b/src/data/detailed/177/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "177", + "url": "https://www.csszengarden.com/177", + "css_url": "https://www.csszengarden.com/177/177.css", + "title": "Zen City Morning", + "author": "Ray Henry", + "description": { + "summary": "A visually striking web design that combines a tranquil color palette with a dynamic, jagged edge separator dividing content sections, evoking a digital landscape against a serene backdrop.", + "visual_style": "The design employs a traditional content layout with a modern aesthetic twist, using color gradients and silhouette elements to create a harmonious digital environment.", + "emotional_impact": "Creates a sense of calm orderliness contrasted with creative energy through the interplay of structured content blocks and organic visual elements.", + "compositional_elements": "Features a two-column asymmetrical layout with a distinctive jagged vertical divider that mimics a cityscape or mountain range, establishing visual rhythm and spatial organization." + }, + "artistic_context": { + "style_influences": "Digital minimalism, natural-digital fusion, environmental design, web modernism", + "visual_metaphors": "Digital landscape, zen garden, natural-technological harmony, enlightenment journey" + }, + "categories": [ + "minimalist", + "gradient", + "nature-inspired", + "structured", + "asymmetrical", + "duotone" + ], + "visual_characteristics": [ + "silhouette imagery", + "vertical rhythm", + "warm-cool contrast", + "geometric clouds", + "jagged divider line", + "color gradation" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "rhythm" + ], + "visual_techniques": [ + "color blocking", + "silhouetting", + "gradient transition" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/178/metadata.json b/src/data/detailed/178/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..945388ce7ab81b27dac7334d33147906ebcd69c7 --- /dev/null +++ b/src/data/detailed/178/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "178", + "url": "https://www.csszengarden.com/178", + "css_url": "https://www.csszengarden.com/178/178.css", + "title": "Pinups", + "author": "Emiliano Pennisi", + "description": { + "summary": "A warm, vintage-styled web design with strong retro aesthetics conveying a nostalgic digital garden theme through amber/orange gradients and mid-century illustration elements.", + "visual_style": "The design employs a nostalgic retro approach with vintage illustrations, warm color palette, and ornamental headers that evoke mid-20th century graphic design sensibilities.", + "emotional_impact": "The warm amber tones and vintage illustrations create a welcoming, nostalgic atmosphere that feels both educational and playful.", + "compositional_elements": "The layout uses a two-column structure with a navigation sidebar in earthy tones and content area in parchment-like beige, framed by decorative elements and vintage illustration accents." + }, + "artistic_context": { + "style_influences": "Mid-century commercial illustration, vintage poster art, retro web design, Art Deco decorative elements", + "visual_metaphors": "Garden as knowledge cultivation, path to enlightenment, vintage aesthetics as digital wisdom" + }, + "categories": [ + "retro", + "vintage", + "ornamental", + "illustration-based", + "warm-toned", + "nostalgic" + ], + "visual_characteristics": [ + "amber-orange gradient", + "decorative headers", + "vintage illustrations", + "two-column layout", + "ornate typographic elements", + "textured backgrounds" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "thematic consistency", + "nostalgic appeal" + ], + "visual_techniques": [ + "decorative framing", + "vintage illustration integration", + "textured gradients" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/179/metadata.json b/src/data/detailed/179/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b1a93a09f924be2f49538ddcc65186a9cda78528 --- /dev/null +++ b/src/data/detailed/179/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "179", + "url": "https://www.csszengarden.com/179", + "css_url": "https://www.csszengarden.com/179/179.css", + "title": "Vin Rouge", + "author": "Thorsten Bopp", + "description": { + "summary": "A sophisticated web design showcase featuring an elegant dark-themed layout with rich burgundy accents and a wine glass motif. The design demonstrates a zen-inspired aesthetic that balances minimalist principles with ornate flourishes.", + "visual_style": "The design employs a luxurious dark aesthetic with deep blacks and burgundy red tones, creating an atmosphere of refinement and sophistication. Decorative curved lines reminiscent of calligraphy add an organic, flowing quality to the structured layout.", + "emotional_impact": "The design evokes a sense of contemplative elegance through its dark color palette, carefully balanced negative space, and subtle organic decorative elements, creating a meditative yet sophisticated atmosphere.", + "compositional_elements": "A three-column layout creates clear hierarchical organization with a prominent central content area flanked by a striking wine glass image on the left and a navigation sidebar on the right. Decorative curved lines frame content sections, adding visual rhythm." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, calligraphic art, luxury branding aesthetics, wine culture visualization", + "visual_metaphors": "Flow and balance, organic growth, refinement, contemplation, craftsmanship" + }, + "categories": [ + "elegant", + "minimalist", + "dark-themed", + "organic", + "zen-inspired", + "structured" + ], + "visual_characteristics": [ + "burgundy-black palette", + "decorative flourishes", + "multi-column layout", + "negative space", + "calligraphic elements", + "photographic accent" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "balance", + "hierarchy", + "rhythm" + ], + "visual_techniques": [ + "framing", + "color harmony", + "visual metaphor" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/180/metadata.json b/src/data/detailed/180/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..709380fffe6ed8c592746f0fe9887c33f4379991 --- /dev/null +++ b/src/data/detailed/180/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "180", + "url": "https://www.csszengarden.com/180", + "css_url": "https://www.csszengarden.com/180/180.css", + "title": "Vertigo", + "author": "Antonio Cella", + "description": { + "summary": "A textured, organic web design with ancient manuscript aesthetics featuring a parchment-like background with asymmetrical text blocks and handwritten-style typography against stone textures.", + "visual_style": "The design combines natural earthen textures with calligraphic elements to create a contemplative, Zen-inspired aesthetic that feels both ancient and digital.", + "emotional_impact": "Evokes a sense of aged wisdom and meditative tranquility through warm earth tones, antique textures, and balanced asymmetry.", + "compositional_elements": "Features a two-column layout with decorative section dividers, handwritten-style headings, and a textured background creating visual depth." + }, + "artistic_context": { + "style_influences": "Japanese Zen aesthetics, ancient manuscript design, calligraphic traditions, stone garden imagery", + "visual_metaphors": "Path of enlightenment, weathered wisdom, organic growth, natural progression" + }, + "categories": [ + "textural", + "organic", + "calligraphic", + "antiqued", + "eastern-inspired", + "earthy" + ], + "visual_characteristics": [ + "parchment-texture", + "stone-background", + "brush-script-typography", + "asymmetrical-layout", + "earth-tone-palette", + "decorative-dividers" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "texture", + "asymmetry", + "hierarchy" + ], + "visual_techniques": [ + "layering", + "weathered-effects", + "calligraphic-styling" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/182/metadata.json b/src/data/detailed/182/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..901e5f69813a55687f275ec5c3829f10a14a0f85 --- /dev/null +++ b/src/data/detailed/182/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "182", + "url": "https://www.csszengarden.com/182", + "css_url": "https://www.csszengarden.com/182/182.css", + "title": "45 RPM", + "author": "Thomas Michaud", + "description": { + "summary": "A nostalgic web design featuring vinyl records and nature-inspired motifs, combining retro aesthetics with zen-like simplicity on a soft green background.", + "visual_style": "The design employs a vintage-inspired aesthetic with a blend of organic elements and structured content sections, creating a harmonious balance between playful nostalgia and organized information.", + "emotional_impact": "Evokes a sense of calm contemplation through the soft color palette and nature-inspired decorative elements, while vintage record imagery adds warm nostalgia.", + "compositional_elements": "Features a header with stacked vinyl records above a flowing vertical layout of content sections divided by colored heading bands with circular record-like accents." + }, + "artistic_context": { + "style_influences": "Mid-century graphic design, Japanese zen aesthetics, early 2000s web design, vinyl record culture", + "visual_metaphors": "Growth and interconnection through branching stem patterns, circular harmony through record imagery" + }, + "categories": [ + "retro", + "organic", + "nostalgic", + "structured", + "educational", + "harmonious" + ], + "visual_characteristics": [ + "pastel-green background", + "vinyl record motifs", + "botanical line illustrations", + "color-blocked sections", + "layered transparency", + "decorative typography" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "rhythm", + "contrast", + "thematic consistency" + ], + "visual_techniques": [ + "decorative borders", + "organic line patterns", + "nostalgic imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/183/metadata.json b/src/data/detailed/183/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..927a675c2a1dd7c3143a8b0fe062f79da6ae0541 --- /dev/null +++ b/src/data/detailed/183/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "183", + "url": "https://www.csszengarden.com/183", + "css_url": "https://www.csszengarden.com/183/183.css", + "title": "404 Not Found", + "author": null, + "description": { + "summary": "A minimalist web design embracing simplicity and clean typography in a traditional document-style layout, representing a zen-like approach to CSS demonstrations.", + "visual_style": "The design employs a clean, text-focused approach with minimal styling, utilizing traditional web document structure with clear hierarchical headings and bullet-point lists.", + "emotional_impact": "The design evokes a sense of calm order and clarity through its restrained use of styling and focus on readability, embodying the 'zen' philosophy mentioned in its title.", + "compositional_elements": "The composition follows a strict vertical flow with consistent margins, clear typographic hierarchy, and organized content blocks separated by distinct headings." + }, + "artistic_context": { + "style_influences": "Traditional academic documents, early web design aesthetics, minimalist typography", + "visual_metaphors": "Simplicity as enlightenment, structural harmony, uncluttered space as tranquility" + }, + "categories": [ + "minimalist", + "typography-focused", + "hierarchical", + "functional", + "document-style", + "text-centric" + ], + "visual_characteristics": [ + "black text on white background", + "list-based navigation", + "consistent margins", + "clear headings", + "hypertext formatting", + "vertical rhythm" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "clarity", + "simplicity", + "readability" + ], + "visual_techniques": [ + "typographic contrast", + "white space utilization", + "linear organization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/184/metadata.json b/src/data/detailed/184/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..baa6a8b6f20bb43e5425c4f1e6bb5028f3afe196 --- /dev/null +++ b/src/data/detailed/184/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "184", + "url": "https://www.csszengarden.com/184", + "css_url": "https://www.csszengarden.com/184/184.css", + "title": "Peace of Mind", + "author": "Carlos Varela", + "description": { + "summary": "A serene, minimalist web design that employs a garden metaphor through soft green hues, delicate botanical imagery, and ample white space to create a tranquil, meditative atmosphere.", + "visual_style": "The design embraces zen aesthetics with a light, airy composition, subtle organic elements, and a harmonious balance between text and negative space.", + "emotional_impact": "The soft color palette and balanced layout evoke feelings of calm, clarity, and contemplation, reinforced by the organic leaf motifs and ethereal imagery.", + "compositional_elements": "A single-column central content area is complemented by a right sidebar, with sectional headers marked by small leaf icons creating visual rhythm throughout." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, botanical illustration, meditation aesthetics", + "visual_metaphors": "Garden as knowledge growth, leaves as natural simplicity, white space as mental clarity" + }, + "categories": [ + "minimalist", + "organic", + "nature-inspired", + "zen", + "elegant", + "harmonious" + ], + "visual_characteristics": [ + "pastel-green accents", + "botanical elements", + "generous white space", + "vertical hierarchy", + "subtle iconography", + "translucent imagery" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "simplicity", + "rhythm" + ], + "visual_techniques": [ + "negative space", + "organic motifs", + "monochromatic palette" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/185/metadata.json b/src/data/detailed/185/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..0c5678b142694a10586c6d21dc74e1bb589d1cd7 --- /dev/null +++ b/src/data/detailed/185/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "185", + "url": "https://www.csszengarden.com/185", + "css_url": "https://www.csszengarden.com/185/185.css", + "title": "Manhattan Edition", + "author": "TheOm3ga", + "description": { + "summary": "A structured educational website with a distinctive urban skyline silhouette header against a gradient blue background, featuring high-contrast content panels on a black canvas.", + "visual_style": "The design employs a professional web layout with clear sectioning through white rounded-corner panels on a black background, creating strong visual separation between content areas.", + "emotional_impact": "The stark contrast between the light panels and dark background creates a serious, technical atmosphere, while the urban silhouette and stylized logo add creative elements to balance the academic nature.", + "compositional_elements": "The composition follows a vertical hierarchy with a distinctive header area featuring a city skyline silhouette and stylized logo, followed by well-defined content blocks and color-coded interactive elements." + }, + "artistic_context": { + "style_influences": "Early 2000s web design aesthetics with panel-based layouts, graffiti-inspired typography in the logo, and urban visual motifs.", + "visual_metaphors": "The city skyline silhouette represents urban sophistication and complexity, while the garden metaphor in the logo suggests cultivation of knowledge and skills." + }, + "categories": [ + "structured", + "high-contrast", + "panel-based", + "educational", + "urban-inspired", + "technical" + ], + "visual_characteristics": [ + "rounded-corner panels", + "city skyline silhouette", + "gradient blue header", + "color-coded buttons", + "sectioned content areas", + "stylized typography" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "organization", + "repetition" + ], + "visual_techniques": [ + "content compartmentalization", + "color-coding", + "silhouetting" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/186/metadata.json b/src/data/detailed/186/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..878cdc8e3377fc4b3994f1fa64ea423e21f4f1e5 --- /dev/null +++ b/src/data/detailed/186/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "186", + "url": "https://www.csszengarden.com/186", + "css_url": "https://www.csszengarden.com/186/186.css", + "title": "Floral Simplicity", + "author": "Mani Sheriar", + "description": { + "summary": "A serene, nature-inspired web design showcasing a two-column layout with soft floral imagery and structured content organization.", + "visual_style": "The design employs a delicate, organic aesthetic with a pale green background and pink floral imagery that creates a garden-like atmosphere while maintaining functional clarity.", + "emotional_impact": "The soft color palette and natural imagery evoke tranquility and mindfulness, aligning with the 'Zen Garden' concept while conveying an educational purpose.", + "compositional_elements": "A clear two-column structure divides the main content from the sidebar, with thoughtful spacing and hierarchical organization of text elements through varied typography sizes and weights." + }, + "artistic_context": { + "style_influences": "Japanese zen garden aesthetics, minimalist web design, natural botanical illustration", + "visual_metaphors": "Blooming flower representing growth and learning, garden pathway suggesting journey and exploration" + }, + "categories": [ + "nature-inspired", + "minimalist", + "educational", + "organic", + "structured", + "pastel" + ], + "visual_characteristics": [ + "floral-header", + "two-column-layout", + "soft-color-palette", + "subtle-gradients", + "hierarchical-typography", + "vertical-navigation" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "contrast", + "repetition" + ], + "visual_techniques": [ + "organic framing", + "typographic contrast", + "natural color harmony" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/187/metadata.json b/src/data/detailed/187/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..33f0ef5461fe6ad314ed9ad5d73ad6c80411ed8a --- /dev/null +++ b/src/data/detailed/187/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "187", + "url": "https://www.csszengarden.com/187", + "css_url": "https://www.csszengarden.com/187/187.css", + "title": "Wilderness", + "author": "Aadesh Mistry", + "description": { + "summary": "A richly textured web design featuring an organic, dark aesthetic with golden accents against a deep red-to-green gradient background framed by irregular torn-edge borders.", + "visual_style": "The design employs a nature-inspired, Eastern philosophical aesthetic with ornate heading treatments and a structured informational layout that evokes traditional scrolls or manuscripts.", + "emotional_impact": "Creates a contemplative, mystical atmosphere through deep colors, organic textures, and balanced composition suggesting wisdom and tradition.", + "compositional_elements": "Organized in vertical sections with clear headings marked by decorative sun-like icons, maintaining visual rhythm through consistent color and typographic treatment." + }, + "artistic_context": { + "style_influences": "Japanese/Eastern aesthetic traditions, manuscript design, organic naturalism, digital expressionism", + "visual_metaphors": "Garden path, enlightenment journey, natural growth, ancient wisdom" + }, + "categories": [ + "textural", + "organic", + "eastern-inspired", + "golden-accent", + "gradient", + "torn-edge" + ], + "visual_characteristics": [ + "textured-background", + "high-contrast-typography", + "decorative-icons", + "framed-content", + "golden-headings", + "vertical-hierarchy" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "balance" + ], + "visual_techniques": [ + "texture layering", + "color symbolism", + "framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/188/metadata.json b/src/data/detailed/188/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..e999332ad3e0358060e0f4ac6168d16dee751401 --- /dev/null +++ b/src/data/detailed/188/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "188", + "url": "https://www.csszengarden.com/188", + "css_url": "https://www.csszengarden.com/188/188.css", + "title": "Organica Creativa", + "author": "Eduardo Cesario", + "description": { + "summary": "A vibrant, playful web design showcasing a blended organic-digital aesthetic with circular motifs against a lime green background, featuring bright interactive elements and structured information hierarchy.", + "visual_style": "The design combines organic circular patterns with structured content zones, creating a nature-inspired digital environment that balances playfulness with functionality.", + "emotional_impact": "Energetic and refreshing, the bright color palette and circular organic elements evoke a sense of growth, creativity, and natural harmony within a digital context.", + "compositional_elements": "A central vertical content area is framed by decorative circular patterns that create depth and movement, while colorful accent elements guide the user through distinct functional zones." + }, + "artistic_context": { + "style_influences": "Digital zen gardens, organic-digital fusion, Y2K web aesthetics, nature-inspired digital design", + "visual_metaphors": "Garden as digital space, growing/organic technology, circular paths of enlightenment" + }, + "categories": [ + "organic-digital", + "vibrant", + "playful", + "structured", + "nature-inspired", + "interactive" + ], + "visual_characteristics": [ + "circular-patterns", + "bright-color-contrast", + "segmented-layout", + "typographic-hierarchy", + "decorative-navigation", + "organic-borders" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "balance" + ], + "visual_techniques": [ + "color-blocking", + "organic-patterning", + "spatial-zoning" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/190/metadata.json b/src/data/detailed/190/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..1fece89008e0137d314a1401f27588466a1d9196 --- /dev/null +++ b/src/data/detailed/190/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "190", + "url": "https://www.csszengarden.com/190", + "css_url": "https://www.csszengarden.com/190/190.css", + "title": "Lonely Flower", + "author": "Mitja Ribic", + "description": { + "summary": "A serene web design that combines natural imagery with structured content organization, creating a contemplative digital garden aesthetic.", + "visual_style": "The design employs a nature-inspired approach with a two-column layout featuring green and orange color blocks, delicate botanical elements, and systematic content organization.", + "emotional_impact": "Evokes a sense of tranquility and organic growth through its soft color palette, natural motifs, and spacious layout.", + "compositional_elements": "Clear vertical rhythm established through consistent heading treatments, color blocks, and natural dividers like grass silhouettes that separate content sections." + }, + "artistic_context": { + "style_influences": "Japanese zen garden aesthetics, minimalist web design, early 2000s CSS demonstration sites", + "visual_metaphors": "Garden as knowledge growth, path to enlightenment, blooming flower representing design potential" + }, + "categories": [ + "nature-inspired", + "minimalist", + "zen", + "educational", + "structured", + "two-column" + ], + "visual_characteristics": [ + "organic-motifs", + "color-blocking", + "hierarchical-typography", + "natural-dividers", + "light-gradient-backgrounds", + "illustrative-elements" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "rhythm", + "unity" + ], + "visual_techniques": [ + "color contrast", + "natural symbolism", + "negative space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/191/metadata.json b/src/data/detailed/191/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..bfe134e6296103fab6a5ae6039a00ee4bd9ffcfa --- /dev/null +++ b/src/data/detailed/191/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "191", + "url": "https://www.csszengarden.com/191", + "css_url": "https://www.csszengarden.com/191/191.css", + "title": "The Diary", + "author": "Alexander Shabuniewicz", + "description": { + "summary": "A book-like web layout design with a classical, elegant structure featuring a two-column format that mimics an open book or magazine spread. The design incorporates ornamental borders and decorative elements with thoughtfully placed images and well-structured typography.", + "visual_style": "The design embraces a traditional print aesthetic with digital sensibilities, utilizing decorative borders, serif typography, and a formal layout system that creates a scholarly, refined appearance.", + "emotional_impact": "Evokes feelings of academic credibility and timeless elegance through its structured layout, warm color tones, and classical design elements, creating an atmosphere of intellectual contemplation.", + "compositional_elements": "The symmetrical two-column layout creates balance, with clearly defined sections marked by headers, decorative dividers, and strategically placed images. The bordered framework contains the content with ornamental corner elements reinforcing the classical theme." + }, + "artistic_context": { + "style_influences": "Book design, manuscript layouts, classical typography, print journalism", + "visual_metaphors": "Garden of knowledge, scholarly journey, architectural structure" + }, + "categories": [ + "classical", + "editorial", + "structured", + "symmetrical", + "typographic", + "ornamental" + ], + "visual_characteristics": [ + "two-column layout", + "decorative borders", + "serif typography", + "hierarchical headings", + "ornamental dividers", + "paper-like background" + ], + "design_principles": { + "primary_principles": [ + "balance", + "hierarchy", + "rhythm", + "unity" + ], + "visual_techniques": [ + "framing", + "typographic contrast", + "white space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/192/metadata.json b/src/data/detailed/192/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..ff3d27fffb21abfad3d079fdd79d1ed1378ea67e --- /dev/null +++ b/src/data/detailed/192/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "192", + "url": "https://www.csszengarden.com/192", + "css_url": "https://www.csszengarden.com/192/192.css", + "title": "LuGoZee", + "author": "Viallon Pierre-Antoine", + "description": { + "summary": "A medieval-inspired web design featuring a parchment-like texture with ornate typography and decorative initials against a dark background, creating a scholarly, antiquated aesthetic.", + "visual_style": "The design employs a manuscript-like approach with aged texture, calligraphic elements, and a two-column layout that evokes historical documents and ancient scrolls.", + "emotional_impact": "Creates a sense of reverence and tradition through its aged appearance, warm sepia tones, and decorative elements that suggest wisdom and time-honored practices.", + "compositional_elements": "Structured with a main content area resembling aged parchment, contrasting with a darker navigation sidebar, framed by subtle decorative elements along the edges." + }, + "artistic_context": { + "style_influences": "Medieval manuscripts, illuminated texts, monastic scrolls, early bookmaking traditions", + "visual_metaphors": "Ancient wisdom, time-worn knowledge, scholarly tradition, artisanal craftsmanship" + }, + "categories": [ + "antiquarian", + "ornamental", + "textural", + "classical", + "manuscript-inspired", + "decorative" + ], + "visual_characteristics": [ + "aged-parchment texture", + "decorative drop caps", + "calligraphic elements", + "high-contrast typography", + "ornamental borders", + "sepia color palette" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "texture", + "historical reference" + ], + "visual_techniques": [ + "textural layering", + "typographic ornamentation", + "antiqued finish" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/193/metadata.json b/src/data/detailed/193/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..613c5c42e32934ad47df20821d47796f74a77ce2 --- /dev/null +++ b/src/data/detailed/193/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "193", + "url": "https://www.csszengarden.com/193", + "css_url": "https://www.csszengarden.com/193/193.css", + "title": "Leggo My Ego", + "author": "Jon Tan", + "description": { + "summary": "A nostalgic pixel-art inspired web design with a garden metaphor, blending retro aesthetic with organized information architecture", + "visual_style": "The design employs pixel art illustrations and ASCII-like typography to create a deliberately retro digital aesthetic with a zen garden motif", + "emotional_impact": "Evokes nostalgia for early web design while maintaining a calm, meditative atmosphere through its organized layout and earthy color palette", + "compositional_elements": "Features a header with pixel art landscape, central title treatment, and a structured grid layout with clear content sections and navigation elements" + }, + "artistic_context": { + "style_influences": "8-bit pixel art, ASCII typography, early web design patterns, Japanese zen gardens", + "visual_metaphors": "Digital landscape as garden, cultivation of code as meditation practice, pixels as building blocks" + }, + "categories": [ + "retro", + "pixel-art", + "minimalist", + "grid-based", + "instructional", + "decorative-typography" + ], + "visual_characteristics": [ + "pixel-based illustrations", + "monospaced typography", + "radiating background", + "earth-tone palette", + "hierarchical layout", + "decorative header" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "repetition", + "balance", + "nostalgia" + ], + "visual_techniques": [ + "pixel illustration", + "typographic contrast", + "grid organization" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/195/metadata.json b/src/data/detailed/195/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..dc079186c7f625d5486c96e6e2795341a8dbf67e --- /dev/null +++ b/src/data/detailed/195/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "195", + "url": "https://www.csszengarden.com/195", + "css_url": "https://www.csszengarden.com/195/195.css", + "title": "Dazzling Beauty", + "author": "Deny Sri Supriyono", + "description": { + "summary": "A serene web design featuring a vibrant orange lily against a soft, textured cream background, creating a harmonious balance between organic natural elements and structured content layout.", + "visual_style": "The design adopts a minimalist Zen-inspired aesthetic with ample white space, clean typography, and natural imagery that conveys tranquility and simplicity.", + "emotional_impact": "The visual elements evoke a sense of calm and contemplation, with the bright flower creating a focal point that symbolizes growth and enlightenment.", + "compositional_elements": "The layout follows a clear vertical structure with generous margins, hierarchical headings, and symbolic imagery that frames the content in a thoughtful, balanced arrangement." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, nature-inspired design, digital zen aesthetics", + "visual_metaphors": "Blooming flower representing growth and beauty, light background suggesting clarity and openness" + }, + "categories": [ + "minimalist", + "nature-inspired", + "zen", + "elegant", + "structured", + "harmonious" + ], + "visual_characteristics": [ + "orange-green accent colors", + "botanical imagery", + "textured background", + "clean typography", + "hierarchical layout", + "ample white space" + ], + "design_principles": { + "primary_principles": [ + "balance", + "contrast", + "hierarchy", + "simplicity" + ], + "visual_techniques": [ + "natural focal point", + "negative space", + "typographic structure" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/196/metadata.json b/src/data/detailed/196/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..047a21aa2b2c37d828c4188e990831157ddedd1a --- /dev/null +++ b/src/data/detailed/196/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "196", + "url": "https://www.csszengarden.com/196", + "css_url": "https://www.csszengarden.com/196/196.css", + "title": "Elegance in Simplicity", + "author": "Mani Sheriar", + "description": { + "summary": "A serene, minimalist web design blending organic elements with structured typography to create a calm, contemplative digital space.", + "visual_style": "The design employs a light, airy aesthetic with soft floral imagery and a carefully structured layout that balances white space with organized content blocks.", + "emotional_impact": "The gentle color palette and flowing typographic hierarchy evoke tranquility and clarity, reinforcing the zen-inspired theme of the design.", + "compositional_elements": "The composition features a centered header with floral background, followed by a two-column layout with main content on the left and a lighter sidebar menu on the right." + }, + "artistic_context": { + "style_influences": "Japanese minimalism, organic naturalism, and digital modernism blend together in the visual treatment.", + "visual_metaphors": "The flower imagery and soft light suggest growth, clarity, and enlightenment through simplicity." + }, + "categories": [ + "minimalist", + "organic", + "elegant", + "structured", + "light", + "zen-inspired" + ], + "visual_characteristics": [ + "soft-gradient", + "floral-motif", + "two-column-layout", + "hierarchical-typography", + "subtle-color-accents", + "generous-whitespace" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "simplicity", + "hierarchy" + ], + "visual_techniques": [ + "negative space utilization", + "color restraint", + "textural contrast" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/197/metadata.json b/src/data/detailed/197/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..86910ae1ed01ba4e0c5e925fe2cde08af9d0cc88 --- /dev/null +++ b/src/data/detailed/197/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "197", + "url": "https://www.csszengarden.com/197", + "css_url": "https://www.csszengarden.com/197/197.css", + "title": "Floral Touch", + "author": "Jadas Jimmy", + "description": { + "summary": "A harmonious blend of technical structure and organic aesthetics, featuring watercolor lotus illustrations contrasted with a clean, organized layout that demonstrates CSS capabilities", + "visual_style": "Minimalist yet expressive design combining illustrative elements with structured content presentation, creating a balanced visual narrative", + "emotional_impact": "Serene and contemplative, with a gentle color palette that evokes tranquility while maintaining clear information hierarchy", + "compositional_elements": "Centered header with delicate floral illustrations, organized content blocks with distinct sections marked by subtle diagonal pattern separators" + }, + "artistic_context": { + "style_influences": "Japanese zen garden aesthetics, minimalist web design, watercolor illustration technique", + "visual_metaphors": "Blooming lotus flowers representing enlightenment and beauty emerging from technical structure" + }, + "categories": [ + "minimalist", + "illustrative", + "structured", + "educational", + "zen-inspired", + "pastel" + ], + "visual_characteristics": [ + "watercolor illustrations", + "diagonal pattern separators", + "magenta accent color", + "hierarchical typography", + "white space utilization", + "two-column layout" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "rhythm" + ], + "visual_techniques": [ + "decorative header", + "structured content blocks", + "consistent section styling" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/199/metadata.json b/src/data/detailed/199/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..64eab2259514348fff06e62c77f5638cc4c82399 --- /dev/null +++ b/src/data/detailed/199/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "199", + "url": "https://www.csszengarden.com/199", + "css_url": "https://www.csszengarden.com/199/199.css", + "title": "Zen Army", + "author": "Carl Desmond", + "description": { + "summary": "A military-themed web design showcasing CSS capabilities through a unique visual metaphor of warfare, featuring tank imagery, distressed typography, and Soviet-inspired graphical elements.", + "visual_style": "The design adopts a deliberately vintage propaganda aesthetic with distressed textures, military motifs, and a structured hierarchical layout that reinforces the militant theme.", + "emotional_impact": "Creates a sense of bold determination and nostalgia through the weathered, gritty appearance and strong color contrasts that evoke military propaganda posters.", + "compositional_elements": "Organized into distinct sections marked by red star bullets, wooden crate imagery for sidebars, and a central tank graphic commanding attention at the top of the layout." + }, + "artistic_context": { + "style_influences": "Soviet propaganda art, military instruction manuals, vintage war posters, industrial design", + "visual_metaphors": "Digital warfare, structured discipline, organized resistance, technological revolution" + }, + "categories": [ + "vintage", + "propaganda", + "military-inspired", + "textured", + "thematic", + "structured" + ], + "visual_characteristics": [ + "distressed-typography", + "symbolic-imagery", + "earthy-palette", + "textural-contrast", + "hierarchical-layout", + "iconic-elements" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "thematic-consistency", + "rhythm" + ], + "visual_techniques": [ + "texture-layering", + "symbolic-repetition", + "color-blocking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/200/metadata.json b/src/data/detailed/200/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..2417099e1af2b4f2eef0c95a4d007a25610a14ea --- /dev/null +++ b/src/data/detailed/200/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "200", + "url": "https://www.csszengarden.com/200", + "css_url": "https://www.csszengarden.com/200/200.css", + "title": "Icicle Outback", + "author": "Timo Virtanen", + "description": { + "summary": "A serene, atmospheric web design featuring a gradient blue backdrop with zen-inspired imagery and structured content areas. The page employs a two-column layout with an asymmetric balance and thoughtful typographic hierarchy.", + "visual_style": "Minimalist yet evocative digital landscape that combines natural silhouettes with a calming blue color scheme, creating a meditative visual space that aligns with the zen philosophy referenced in the design.", + "emotional_impact": "The cool blue tones and subtle nature imagery evoke tranquility and contemplation, while the icicle-like elements at the top suggest clarity and purity of thought.", + "compositional_elements": "The design features a vertical flow with distinct content sections, utilizing a darker left column for primary content and a lighter right column for navigation and secondary elements, creating visual depth and dimension." + }, + "artistic_context": { + "style_influences": "Digital minimalism, Asian zen aesthetics, web 2.0 transparency effects, nature-inspired design", + "aesthetic_period": "Early 2000s web design with Japanese zen garden influence", + "visual_metaphors": "The journey of enlightenment through digital landscapes, water/ice as clarity, silhouettes as simplification" + }, + "categories": [ + "Minimalist digital", + "Zen-inspired web design", + "Atmospheric interface", + "Nature-digital fusion", + "Gradient composition" + ], + "visual_characteristics": [ + "Monochromatic blue gradient palette", + "Silhouetted natural elements", + "Textural contrast between smooth and rough edges", + "Two-column asymmetric layout", + "Vertical rhythm with horizontal section breaks" + ], + "design_principles": { + "primary_principles": [ + "Balance", + "Hierarchy", + "Contrast", + "Unity" + ], + "visual_techniques": [ + "Gradient transitions", + "Silhouetting", + "Textural juxtaposition" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/201/metadata.json b/src/data/detailed/201/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..62d4bc360f87f98310529ddc516536ee399e5142 --- /dev/null +++ b/src/data/detailed/201/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "201", + "url": "https://www.csszengarden.com/201", + "css_url": "https://www.csszengarden.com/201/201.css", + "title": "Lily Pond", + "author": "Rose Thorogood", + "description": { + "summary": "A contemplative web design incorporating zen-inspired elements with a vertical typographic arrangement, creating a balance between ethereal illustrations and structured information sections.", + "visual_style": "Eastern-influenced digital design that combines organic flowing elements with structured typographic layout, using color-blocked sections to create visual rhythm.", + "emotional_impact": "Serene yet invigorating atmosphere through the contrast of deep purples, blues and light accents, evoking a sense of enlightenment and creative potential.", + "compositional_elements": "Divided into vertical columns with color-coded sections that create distinct informational zones while lotus flower illustrations and fluid lines soften the structured layout." + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, Web 2.0 design principles, digital minimalism, art nouveau organic flourishes", + "aesthetic_period": "Early 2000s web design with contemporary eastern philosophical visual elements", + "visual_metaphors": "Garden path as journey to enlightenment, lotus flowers representing purity of design, flowing water suggesting adaptability" + }, + "categories": [ + "Zen-inspired digital design", + "Typographic vertical composition", + "Organic-geometric contrast", + "Color-blocked information architecture", + "Decorative instructional design" + ], + "visual_characteristics": [ + "Vertical typographic treatment with dramatic scaling", + "Fluid illustrated elements (lotus flowers, water shapes)", + "Tripartite color scheme (purple, blue, teal accents)", + "Layered transparent elements creating depth", + "Balanced asymmetry between text and white space" + ], + "design_principles": { + "primary_principles": [ + "Visual hierarchy", + "Color harmony", + "Contrast", + "Rhythm" + ], + "visual_techniques": [ + "Vertical text as visual anchor", + "Illustrative metaphors", + "Color blocking" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/202/metadata.json b/src/data/detailed/202/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..c5fdd545d9e032749ef07f95419878b139287ad3 --- /dev/null +++ b/src/data/detailed/202/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "202", + "url": "https://www.csszengarden.com/202", + "css_url": "https://www.csszengarden.com/202/202.css", + "title": "Retro Theater", + "author": "Eric Rog", + "description": { + "summary": "A dramatic, theater-inspired web design with a dark monochromatic palette, framed by architectural elements resembling a classical stage or cinema", + "visual_style": "Vintage theatrical aesthetic with art deco influences, presenting content within a grand proscenium-like frame that creates the illusion of viewing a stage from audience seating", + "emotional_impact": "Evokes nostalgia and gravitas through the use of dramatic framing, high contrast, and the suggestion of a darkened theater space", + "compositional_elements": "Vertically oriented layout with theatrical curtain-like borders, creating a central stage area where content is hierarchically organized in a columnar structure" + }, + "artistic_context": { + "style_influences": "Art deco, classic theater architecture, vintage cinema marquees, early web design aesthetics", + "aesthetic_period": "Blends early digital design with classical theatrical presentation motifs", + "visual_metaphors": "Theater/cinema as a portal to information, content as performance, audience as participant" + }, + "categories": [ + "Theatrical design", + "Monochromatic", + "Architectural framing", + "Vintage digital aesthetic", + "Vertical scrolling layout" + ], + "visual_characteristics": [ + "High contrast black and gray palette", + "Ornamental architectural framing elements", + "Dramatic diagonal light rays in header", + "Typographic grid system", + "Theater seating silhouette at bottom" + ], + "design_principles": { + "primary_principles": [ + "Framing", + "Contrast", + "Hierarchy", + "Rhythm" + ], + "visual_techniques": [ + "Architectural motifs", + "Spatial depth", + "Contextual theming" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/203/metadata.json b/src/data/detailed/203/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..ddbe45fec4c084db18e995399ae2494879565493 --- /dev/null +++ b/src/data/detailed/203/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "203", + "url": "https://www.csszengarden.com/203", + "css_url": "https://www.csszengarden.com/203/203.css", + "title": "Tiny Blue", + "author": "Timo Virtanen", + "description": { + "summary": "A serene web design featuring a water droplet motif with a monochromatic blue color scheme that evokes tranquility and depth. The layout employs a vertical single-column structure with clear hierarchical sections and sidebar navigation elements.", + "visual_style": "Minimalist and contemplative design approach with a focus on clarity and structure. The water imagery creates a metaphorical backdrop for the content while maintaining a professional, educational aesthetic.", + "emotional_impact": "The design conveys calm, wisdom, and thoughtfulness through its cool blue palette and rippling water imagery, creating a meditative atmosphere aligned with the theme of enlightenment.", + "compositional_elements": "Strong vertical organization with distinct content blocks, consistent margins, and a harmonious balance between text areas and negative space. The water droplet header serves as a focal point that draws the eye downward into the content." + }, + "artistic_context": { + "style_influences": "Digital minimalism, zen aesthetics, instructional design, and early web typography principles", + "aesthetic_period": "Contemporary digital design with influences from Eastern philosophical visual traditions", + "visual_metaphors": "Water as knowledge, ripples as impact, fluidity as learning, depth as wisdom" + }, + "categories": [ + "Monochromatic design", + "Instructional web layout", + "Metaphorical imagery", + "Minimalist typography", + "Vertical grid composition" + ], + "visual_characteristics": [ + "Cool blue color palette", + "Water ripple header imagery", + "Consistent text block rhythm", + "Clear sectional divisions", + "Subtle vertical navigation elements", + "Balanced negative space" + ], + "design_principles": { + "primary_principles": [ + "Hierarchy", + "Rhythm", + "Unity", + "Balance" + ], + "visual_techniques": [ + "Metaphorical imagery", + "Monochromatic color scheme", + "Grid-based layout" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/204/metadata.json b/src/data/detailed/204/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..aa682b90a6a9622fe01a1daf3849a8a414b7e7c3 --- /dev/null +++ b/src/data/detailed/204/metadata.json @@ -0,0 +1,45 @@ +{ + "id": "204", + "url": "https://www.csszengarden.com/204", + "css_url": "https://www.csszengarden.com/204/204.css", + "title": "CSS Zen Garden Top Level Styles", + "author": "William Duffy", + "description": { + "summary": "A richly textured, atmospheric web design featuring an organic aesthetic that blends natural floral imagery with dark, aged backgrounds to create a contemplative, zen-inspired digital space.", + "visual_style": "The design employs a sophisticated dark palette with illuminated organic elements, creating a mystical, introspective atmosphere reminiscent of traditional Eastern art merged with digital modernism.", + "emotional_impact": "The composition evokes tranquility and contemplation through its contrast of darkness and illuminated natural elements, suggesting enlightenment emerging from shadow.", + "compositional_elements": "A vertical scrolling layout divides content into distinct sections marked by delicate ornamental separators, with a prominent floral image anchoring the header and creating visual harmony with smaller botanical accents throughout." + }, + "artistic_context": { + "style_influences": "Japanese wabi-sabi aesthetics, traditional Asian scroll paintings, organic minimalism, and digital grunge techniques", + "aesthetic_period": "Contemporary digital design with references to traditional Eastern art philosophy and natural symbolism", + "visual_metaphors": "Enlightenment emerging from darkness, flowering knowledge, organic growth amid structure, weathered wisdom" + }, + "categories": [ + "Organic minimalism", + "Dark aesthetic", + "Eastern-inspired digital art", + "Textural contrast design", + "Contemplative web layout" + ], + "visual_characteristics": [ + "Aged parchment-like textured backgrounds", + "Glowing floral photography as focal elements", + "Elegant script typography contrasting with modern sans-serif", + "High contrast between dark backgrounds and illuminated elements", + "Ornate decorative dividers creating visual rhythm" + ], + "design_principles": { + "primary_principles": [ + "Contrast", + "Visual hierarchy", + "Texture", + "Balance" + ], + "visual_techniques": [ + "Dramatic lighting", + "Textural depth", + "Organic framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/205/metadata.json b/src/data/detailed/205/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b140beb4867133d811caff35d20e9d22e98bb689 --- /dev/null +++ b/src/data/detailed/205/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "205", + "url": "https://www.csszengarden.com/205", + "css_url": "https://www.csszengarden.com/205/205.css", + "title": "spring360", + "author": "Rene Hornig", + "description": { + "summary": "A minimalist web design showcasing clean typography and balanced white space with a two-column layout that emphasizes content readability through careful alignment and visual hierarchy.", + "visual_style": "The design employs a zen-inspired minimalism with subtle earthtones, creating a calm, uncluttered aesthetic that emphasizes typographic clarity and thoughtful spacing.", + "emotional_impact": "Evokes a sense of tranquility and order through its restrained color palette, generous white space, and balanced composition, creating a meditative visual experience.", + "compositional_elements": "A clear two-column structure with primary content in a wide left column and navigation/secondary elements in a narrower right sidebar, unified by consistent typography and spacing." + }, + "artistic_context": { + "style_influences": "Minimalism, Japanese design principles, digital modernism, functional typography", + "visual_metaphors": "Clarity through simplicity, breathing space, ordered pathways, natural balance" + }, + "categories": [ + "minimalist", + "structured", + "typography-focused", + "clean", + "functional", + "monochromatic" + ], + "visual_characteristics": [ + "two-column layout", + "hierarchical typography", + "muted color palette", + "generous white space", + "clear section delineation", + "subtle highlighting" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "unity", + "whitespace" + ], + "visual_techniques": [ + "typographic contrast", + "columnar organization", + "subtle color accents" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/206/metadata.json b/src/data/detailed/206/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..096656a094a291e37fb6819f82a174bc128683a6 --- /dev/null +++ b/src/data/detailed/206/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "206", + "url": "https://www.csszengarden.com/206", + "css_url": "https://www.csszengarden.com/206/206.css", + "title": "A Walk in the Garden", + "author": "Simon Van Hauwermeiren", + "description": { + "summary": "A nature-inspired web design showcasing CSS techniques through an organic metaphor of a garden boot in soil, balancing instructional content with earthy visual elements.", + "visual_style": "The design employs a minimalist approach with organic elements, using soft green panels against white space and natural imagery to create a harmonious, instructional environment.", + "emotional_impact": "The earthy palette and natural imagery evoke a sense of growth, learning, and organic development, creating a calm, meditative atmosphere.", + "compositional_elements": "The layout combines a clear vertical structure with horizontal green panels, using a boot-in-soil image as an anchor point and circular logo elements to break the grid pattern." + }, + "artistic_context": { + "style_influences": "Minimalist web design, organic naturalism, instructional design aesthetics", + "visual_metaphors": "Garden as education, soil as foundation for growth, boot as tool for cultivation" + }, + "categories": [ + "organic", + "instructional", + "minimalist", + "nature-inspired", + "hierarchical", + "green-focused" + ], + "visual_characteristics": [ + "earth-tones", + "gradient panels", + "circular elements", + "natural photography", + "white space", + "vertical rhythm" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "simplicity" + ], + "visual_techniques": [ + "photographic integration", + "panel grouping", + "icon usage" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/207/metadata.json b/src/data/detailed/207/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..75a77138b69290c309fabdc8eecc35c92b78f086 --- /dev/null +++ b/src/data/detailed/207/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "207", + "url": "https://www.csszengarden.com/207", + "css_url": "https://www.csszengarden.com/207/207.css", + "title": "Kyoto Forest", + "author": "John Politowski", + "description": { + "summary": "A zen-inspired web design that combines Eastern aesthetic elements with structured content presentation, using natural imagery and decorative flourishes to create a harmonious digital space.", + "visual_style": "The design blends natural elements with digital structure, using organic leaf borders contrasted with clearly defined content sections marked by decorative scrollwork headers.", + "emotional_impact": "Creates a serene, meditative atmosphere through the use of natural imagery, sky background, and traditional Eastern motifs, evoking tranquility and contemplation.", + "compositional_elements": "Features vertical leaf borders framing a central content area with hierarchical sections, enhanced by ornamental scroll patterns and a symbolic red parasol that anchors the top of the design." + }, + "artistic_context": { + "style_influences": "Japanese garden aesthetics, Eastern calligraphy, traditional scroll artwork, digital minimalism", + "visual_metaphors": "Garden as learning environment, path to enlightenment, natural growth mirroring skill development" + }, + "categories": [ + "eastern-inspired", + "nature-integrated", + "structured", + "ornamental", + "minimalist", + "educational" + ], + "visual_characteristics": [ + "bordered-layout", + "natural-framing", + "decorative-headers", + "hierarchical-sections", + "symbolic-imagery", + "balanced-asymmetry" + ], + "design_principles": { + "primary_principles": [ + "balance", + "harmony", + "contrast", + "rhythm" + ], + "visual_techniques": [ + "framing", + "layering", + "symbolic imagery" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/208/metadata.json b/src/data/detailed/208/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..1ccc0171210d0e2a5e519ce4b19fd359756f6d19 --- /dev/null +++ b/src/data/detailed/208/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "208", + "url": "https://www.csszengarden.com/208", + "css_url": "https://www.csszengarden.com/208/208.css", + "title": "Sakura", + "author": "Tatsuya Uchida", + "description": { + "summary": "A serene web design showcasing cherry blossom imagery integrated with a clean, structured layout that demonstrates CSS styling capabilities", + "visual_style": "The design employs a minimalist approach with delicate floral motifs creating a harmonious balance between technical functionality and natural beauty", + "emotional_impact": "The soft pink cherry blossoms against neutral backgrounds evoke tranquility and contemplation, reinforcing the 'Zen' concept", + "compositional_elements": "Structured in clear vertical sections with consistent spacing, combining content blocks with decorative floral elements along the right edges" + }, + "artistic_context": { + "style_influences": "Japanese aesthetic principles, minimalist web design, natural-digital fusion", + "visual_metaphors": "Blossoms as digital flourishing, path to enlightenment through structured beauty" + }, + "categories": [ + "minimal", + "nature-inspired", + "structured", + "elegant", + "functional", + "harmonious" + ], + "visual_characteristics": [ + "cherry-blossom motifs", + "subtle diagonal background pattern", + "magenta accent color", + "boxed content areas", + "consistent visual rhythm", + "transparent floral elements" + ], + "design_principles": { + "primary_principles": [ + "balance", + "contrast", + "repetition", + "hierarchy" + ], + "visual_techniques": [ + "color accent", + "natural imagery integration", + "consistent spacing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/209/metadata.json b/src/data/detailed/209/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..515d444228fb1cb6d8aca87317dee6da724be639 --- /dev/null +++ b/src/data/detailed/209/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "209", + "url": "https://www.csszengarden.com/209", + "css_url": "https://www.csszengarden.com/209/209.css", + "title": "css Zen Garden submission - 'CSS Co., Ltd.'", + "author": "Benjamin Klemm", + "description": { + "summary": "A structured web design featuring a three-column layout with an educational focus, combining an orange sidebar, gray main content area, and clean white header", + "visual_style": "Professional and organized with a consistent color scheme and thoughtful spacing, employing a structured grid system for content organization", + "emotional_impact": "Creates a sense of stability and reliability through balanced composition and earthy, warm tones contrasted with neutral backgrounds", + "compositional_elements": "Hierarchical information architecture with clearly defined sections, consistent heading treatments, and visual icons that provide navigational landmarks" + }, + "artistic_context": { + "style_influences": "Web 2.0 design principles with elements of institutional/educational design patterns", + "visual_metaphors": "Garden motif suggested by the floral-like icon elements and organic organization of content" + }, + "categories": [ + "grid-based", + "hierarchical", + "informational", + "educational", + "structured", + "modular" + ], + "visual_characteristics": [ + "tri-color palette", + "sidebar navigation", + "decorative icons", + "content blocks", + "high text-to-image ratio", + "sectional headings" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "alignment" + ], + "visual_techniques": [ + "color blocking", + "iconography", + "consistent spacing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/210/metadata.json b/src/data/detailed/210/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..7569dc16f3fb6bb865d0ac8035ecb0b15cea7806 --- /dev/null +++ b/src/data/detailed/210/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "210", + "url": "https://www.csszengarden.com/210", + "css_url": "https://www.csszengarden.com/210/210.css", + "title": "Oceanscape", + "author": "Justin Gray", + "description": { + "summary": "An immersive underwater-themed web design featuring a deep blue gradient background with tropical fish imagery and a structured content layout. The design creates a virtual marine environment through photographic elements and strategic color usage.", + "visual_style": "The design employs a literal ocean aesthetic with photorealistic underwater imagery framing a centralized content area. Deep blue backgrounds transition to lighter azure at the surface, creating depth and environmental context.", + "emotional_impact": "The aquatic imagery and cool blue color palette evoke a sense of calm exploration and depth, creating an immersive environment that reinforces the oceanic theme.", + "compositional_elements": "The layout combines natural elements (fish photography, water texture) with structured content blocks. A central white-text-on-blue column creates a reading path surrounded by decorative marine life elements." + }, + "artistic_context": { + "style_influences": "Nature photography, environmental design, digital aquarium aesthetics, web 2.0 documentary style", + "visual_metaphors": "Ocean as container of knowledge, depth as complexity, fish as navigation elements, surface/underwater division as interface boundary" + }, + "categories": [ + "immersive", + "thematic", + "photographic", + "environmental", + "nature-inspired", + "gradient-based" + ], + "visual_characteristics": [ + "underwater imagery", + "blue color dominance", + "photographic elements", + "vertical scrolling layout", + "environmental framing", + "contrasting typography" + ], + "design_principles": { + "primary_principles": [ + "thematic consistency", + "environmental immersion", + "content hierarchy", + "navigational clarity" + ], + "visual_techniques": [ + "photographic integration", + "color gradient depth", + "natural framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/211/metadata.json b/src/data/detailed/211/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..dcc2268198d224ad333d97e752c492e3742e8e9f --- /dev/null +++ b/src/data/detailed/211/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "211", + "url": "https://www.csszengarden.com/211", + "css_url": "https://www.csszengarden.com/211/211.css", + "title": "Orchid Beauty", + "author": "Kevin Addison", + "description": { + "summary": "An elegant web design featuring vibrant orchid imagery paired with sophisticated typography, creating a harmonious balance between organic natural forms and structured digital content.", + "visual_style": "The design employs a minimalist approach with strategic use of white space and natural imagery, juxtaposing vibrant floral elements against a clean, structured layout.", + "emotional_impact": "The combination of vivid orchid imagery and refined typography evokes a sense of tranquility and elegance, suggesting both natural beauty and thoughtful organization.", + "compositional_elements": "Content is arranged in a clear vertical hierarchy with visual breathing room between sections, each marked by small floral icons that add visual consistency throughout the page." + }, + "artistic_context": { + "style_influences": "Japanese-inspired minimalism, botanical illustration, digital modernism", + "visual_metaphors": "Growth, harmony, balance, natural refinement" + }, + "categories": [ + "minimal", + "elegant", + "nature-inspired", + "structured", + "harmonious", + "botanical" + ], + "visual_characteristics": [ + "vibrant-imagery", + "white-space", + "script-typography", + "vertical-rhythm", + "reflective-effects", + "section-markers" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "repetition" + ], + "visual_techniques": [ + "focal point", + "negative space", + "visual anchoring" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/212/metadata.json b/src/data/detailed/212/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..ec514fb81d203ce6b53d16660af96617c6492dba --- /dev/null +++ b/src/data/detailed/212/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "212", + "url": "https://www.csszengarden.com/212", + "css_url": "https://www.csszengarden.com/212/212.css", + "title": "Make 'em Proud!", + "author": "Michael McAghon and Scotty Reifsnyder", + "description": { + "summary": "A deliberately retro web design that evokes early 2000s aesthetics while organizing substantial content in a structured, hierarchical format", + "visual_style": "The design employs a vintage propaganda-inspired illustration style with muted colors and a clear columnar layout that separates navigation from content", + "emotional_impact": "Creates a nostalgic atmosphere with warm, sepia-toned rays and stylized illustrations that evoke a sense of community and shared purpose", + "compositional_elements": "Features a primary central content column bordered by a narrower navigation sidebar, with decorative headers, symbolic medallions, and clear sectioning" + }, + "artistic_context": { + "style_influences": "Mid-century poster design, early web aesthetics, propaganda art, vintage computing imagery", + "visual_metaphors": "Garden as learning environment, rays of light suggesting enlightenment, medallions representing achievement" + }, + "categories": [ + "retro", + "instructional", + "hierarchical", + "illustrative", + "columnar", + "vintage-inspired" + ], + "visual_characteristics": [ + "radial-sunburst-background", + "two-column-layout", + "sepia-color-palette", + "decorative-medallions", + "stylized-line-art", + "ribbon-banners" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "repetition", + "alignment" + ], + "visual_techniques": [ + "vintage illustration", + "symbolic iconography", + "structured typography" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/213/metadata.json b/src/data/detailed/213/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..b9af79a817f6eb5bb70b63bd93a965d76da5d7c1 --- /dev/null +++ b/src/data/detailed/213/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "213", + "url": "https://www.csszengarden.com/213", + "css_url": "https://www.csszengarden.com/213/213.css", + "title": "Under the Sea", + "author": "Eric Stoltz", + "description": { + "summary": "A vintage-inspired web design featuring a tall, scrolling layout with scientific illustrations of marine creatures against a parchment-like background, creating a cabinet of curiosities aesthetic.", + "visual_style": "The design employs a Victorian naturalist aesthetic with detailed scientific illustrations, ornate decorative elements, and aged paper textures creating a museum-like presentation.", + "emotional_impact": "The worn parchment textures, detailed scientific illustrations, and ornamental flourishes evoke a sense of historical discovery, academic curiosity, and nostalgic wonder.", + "compositional_elements": "A vertical scroll layout with a central parchment column containing text blocks, flanked by scientific illustrations of marine creatures strategically placed along the edges to create visual interest." + }, + "artistic_context": { + "style_influences": "Victorian scientific illustration, 19th century naturalist journals, cabinet of curiosities displays, antique manuscript design", + "visual_metaphors": "Ocean exploration, scholarly archive, scientific discovery, natural history collection" + }, + "categories": [ + "vintage", + "naturalist", + "ornamental", + "illustrative", + "textured", + "narrative" + ], + "visual_characteristics": [ + "scientific-illustrations", + "aged-parchment", + "decorative-flourishes", + "vertical-scrolling", + "maritime-elements", + "sepia-tones" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "rhythm", + "unity" + ], + "visual_techniques": [ + "textural layering", + "decorative framing", + "visual storytelling" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/214/metadata.json b/src/data/detailed/214/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..659069f2958978dedd7083554046fcb66b29a7bd --- /dev/null +++ b/src/data/detailed/214/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "214", + "url": "https://www.csszengarden.com/214", + "css_url": "https://www.csszengarden.com/214/214.css", + "title": "Verde Moderna", + "author": "Dave Shea", + "description": { + "summary": "A serene web design featuring a zen garden theme with a harmonious blend of natural imagery and structured layout", + "visual_style": "Clean, minimalist design with soft natural background imagery and clear typographic hierarchy", + "emotional_impact": "Evokes tranquility and balance through the use of calm teal-green color palette and spacious layout", + "compositional_elements": "Header with soft-focus nature background transitioning to structured content columns with alternating background tones" + }, + "artistic_context": { + "style_influences": "Japanese zen aesthetics, minimalist web design, nature-inspired digital art", + "visual_metaphors": "Garden as structure, path as journey, circular emblem as wholeness" + }, + "categories": [ + "minimalist", + "nature-inspired", + "structured", + "harmonious", + "zen-aesthetic", + "responsive" + ], + "visual_characteristics": [ + "blurred-background", + "column-layout", + "color-blocking", + "circular-iconography", + "typographic-hierarchy", + "alternating-sections" + ], + "design_principles": { + "primary_principles": [ + "balance", + "rhythm", + "hierarchy", + "harmony" + ], + "visual_techniques": [ + "contrast", + "framing", + "atmospheric perspective" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/215/metadata.json b/src/data/detailed/215/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..dfab1f7a5543f4b203fbabf0d6392d07f4fdccdb --- /dev/null +++ b/src/data/detailed/215/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "215", + "url": "https://www.csszengarden.com/215", + "css_url": "https://www.csszengarden.com/215/215.css", + "title": "A Robot Named Jimmy", + "author": "meltmedia", + "description": { + "summary": "A clean, structured web design with playful illustrative elements, featuring a central blue figure with raised arms and colorful hand icons in a circular arrangement below.", + "visual_style": "Modern, approachable design combining flat illustration with organized content sections, using a limited color palette dominated by blues and coral-red accents.", + "emotional_impact": "Creates an inviting, friendly atmosphere through cheerful illustrations and open composition, suggesting collaboration and creativity.", + "compositional_elements": "Vertically stacked content sections with clear horizontal demarcations, strong header area featuring the central figure, and balanced secondary illustrations supporting textual content." + }, + "artistic_context": { + "style_influences": "Flat design, minimalist illustration, web-centric information architecture", + "visual_metaphors": "Raised arms suggesting celebration or achievement, hands reaching inward symbolizing collaboration and community" + }, + "categories": [ + "minimalist", + "illustrative", + "structured", + "educational", + "web-centric", + "sectioned" + ], + "visual_characteristics": [ + "flat-illustration", + "color-blocking", + "spatial-hierarchy", + "geometric-icons", + "horizontal-divisions", + "limited-palette" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "repetition", + "contrast" + ], + "visual_techniques": [ + "sectioning", + "color-coding", + "illustrative-icons" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/216/metadata.json b/src/data/detailed/216/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..268cfadbea54b5448a0a918f592c0ec7d5742413 --- /dev/null +++ b/src/data/detailed/216/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "216", + "url": "https://www.csszengarden.com/216", + "css_url": "https://www.csszengarden.com/216/216.css", + "title": "Fountain Kiss", + "author": "Jeremy Carlson", + "description": { + "summary": "A luxurious, elegant web design showcasing a rich gold and burgundy color scheme with a circular focal area and vertical navigation elements", + "visual_style": "The design combines Eastern-inspired ornamental elements with a formal layout structure, creating a sophisticated, artisanal aesthetic with contrasting burgundy panels against a warm golden background", + "emotional_impact": "The warm golden tones and deep burgundy create a sense of opulence and wisdom, evoking a meditative, contemplative atmosphere", + "compositional_elements": "The layout uses circular focal points, vertical navigation panels, and alternating color blocks to create rhythm and visual flow between content sections" + }, + "artistic_context": { + "style_influences": "Eastern philosophical aesthetics, Art Deco decorative elements, contemporary digital minimalism", + "visual_metaphors": "Enlightenment through visual harmony, wisdom through structured beauty, balance through contrasting elements" + }, + "categories": [ + "elegant", + "ornamental", + "structured", + "warm-toned", + "hierarchical", + "contrast-driven" + ], + "visual_characteristics": [ + "circular-framing", + "gold-burgundy-palette", + "vertical-navigation", + "decorative-dividers", + "sectional-contrast", + "luminous-background" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "balance", + "rhythm" + ], + "visual_techniques": [ + "framing", + "color blocking", + "ornamental detailing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/217/metadata.json b/src/data/detailed/217/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8be6a3df280aad0ef21c82c7e37013d0c6d76205 --- /dev/null +++ b/src/data/detailed/217/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "217", + "url": "https://www.csszengarden.com/217", + "css_url": "https://www.csszengarden.com/217/217.css", + "title": "Screen Filler", + "author": "Elliot Jay Stocks", + "description": { + "summary": "A clean, structured web design showcasing modern CSS principles with a refreshing color palette of turquoise, white, yellow, and red accents", + "visual_style": "Minimalist and modular layout with distinct content blocks and clear typography hierarchy", + "emotional_impact": "Conveys a sense of clarity, organization, and accessibility through its open layout and soothing color scheme", + "compositional_elements": "Utilizes a grid-based structure with clear content zones, featuring strong vertical columns and horizontal sections" + }, + "artistic_context": { + "style_influences": "Modern web design, Swiss/International style typography, digital minimalism", + "visual_metaphors": "Zen garden - balance, harmony, and structured simplicity" + }, + "categories": [ + "minimalist", + "grid-based", + "educational", + "color-blocked", + "typographic", + "digital-modern" + ], + "visual_characteristics": [ + "color blocking", + "negative space", + "modular layout", + "typographic hierarchy", + "turquoise-dominant palette", + "flat design" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "balance", + "modularity" + ], + "visual_techniques": [ + "color blocking", + "white space utilization", + "grid structure" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/218/metadata.json b/src/data/detailed/218/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..8b69431358f0d210f44fa76b1e9b43360e6a6529 --- /dev/null +++ b/src/data/detailed/218/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "218", + "url": "https://www.csszengarden.com/218", + "css_url": "https://www.csszengarden.com/218/218.css", + "title": "Apothecary", + "author": "Trent Walton", + "description": { + "summary": "A minimalist, vintage-inspired web design with a hierarchical layout that combines retro aesthetics with modern sensibilities", + "visual_style": "The design employs vintage apothecary and medicine label aesthetics with clean typography and strategic use of accent colors", + "emotional_impact": "Creates a calming, scholarly atmosphere through its restrained color palette and structured layout", + "compositional_elements": "Strong vertical organization with clear section demarcation through horizontal rules and typographic contrast" + }, + "artistic_context": { + "style_influences": "Vintage pharmaceutical labels, Victorian broadsheets, minimalist editorial design", + "visual_metaphors": "Bottle illustration suggests essence or distillation of knowledge" + }, + "categories": [ + "minimalist", + "vintage-inspired", + "typographic", + "structured", + "editorial", + "hierarchical" + ], + "visual_characteristics": [ + "horizontal-dividers", + "limited-color-palette", + "serif-typography", + "geometric-accents", + "negative-space", + "illustrative-elements" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "contrast", + "rhythm", + "balance" + ], + "visual_techniques": [ + "typographic scaling", + "spatial sectioning", + "geometric framing" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/219/metadata.json b/src/data/detailed/219/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..d363215b1b4b4093980abcb7a489a21cc9b8accd --- /dev/null +++ b/src/data/detailed/219/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "219", + "url": "https://www.csszengarden.com/219", + "css_url": "https://www.csszengarden.com/219/219.css", + "title": "Steel", + "author": "Steffen Knoeller", + "description": { + "summary": "A striking high-contrast website design featuring an immersive three-dimensional architectural space with floating information panels arranged in a virtual gallery format", + "visual_style": "The design employs dramatic noir aesthetics with stark black backgrounds and bright white typography creating an ultra-modern digital environment with theatrical lighting effects", + "emotional_impact": "Creates an atmosphere of sophistication and technological prowess through its dramatic contrast and spatial depth, evoking both intrigue and digital innovation", + "compositional_elements": "Floating rectangular panels are strategically positioned within a 3D architectural space, creating depth through perspective and dimensional layering" + }, + "artistic_context": { + "style_influences": "Digital minimalism, architectural visualization, cinematic noir, virtual gallery spaces", + "visual_metaphors": "Digital cathedral, information architecture, virtual exhibition space" + }, + "categories": [ + "high-contrast", + "minimalist", + "architectural", + "dramatic", + "immersive", + "grid-based" + ], + "visual_characteristics": [ + "3D perspective", + "floating panels", + "monochromatic palette", + "stark typography", + "spatial depth", + "theatrical lighting" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "spatial organization", + "perspective" + ], + "visual_techniques": [ + "dimensional layering", + "typographic emphasis", + "simulated space" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/220/metadata.json b/src/data/detailed/220/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..ae8b4ceef255fbda99396734c7ca8bf26c210806 --- /dev/null +++ b/src/data/detailed/220/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "220", + "url": "https://www.csszengarden.com/220", + "css_url": "https://www.csszengarden.com/220/220.css", + "title": "Garments", + "author": "Dan Mall, http://www.danielmall.com/", + "description": { + "summary": "A minimalist, elegant web design demonstrating modern CSS principles with a clean layout and thoughtful typography hierarchy", + "visual_style": "The design employs a restrained, zen-inspired aesthetic with ample white space and subtle design elements that emphasize clarity and readability", + "emotional_impact": "Creates a calm, instructional atmosphere that balances professional authority with approachable simplicity", + "compositional_elements": "Centered content blocks with carefully measured margins create a rhythmic flow down the page, punctuated by subtle navigation elements and icons" + }, + "artistic_context": { + "style_influences": "Swiss/International Style typography, digital minimalism, Japanese zen aesthetics", + "visual_metaphors": "Garden as organized simplicity, garments as customizable layers, zen as mindful focus" + }, + "categories": [ + "minimalist", + "typographic", + "grid-based", + "instructional", + "zen-inspired", + "functional" + ], + "visual_characteristics": [ + "generous-whitespace", + "muted-palette", + "hierarchical-typography", + "subtle-iconography", + "centered-layout", + "understated-navigation" + ], + "design_principles": { + "primary_principles": [ + "hierarchy", + "balance", + "simplicity", + "clarity" + ], + "visual_techniques": [ + "negative space", + "typographic contrast", + "modular layout" + ] + } +} \ No newline at end of file diff --git a/src/data/detailed/221/metadata.json b/src/data/detailed/221/metadata.json new file mode 100644 index 0000000000000000000000000000000000000000..1f71161cb393e26137c1f5cf5aa56c6eac830c92 --- /dev/null +++ b/src/data/detailed/221/metadata.json @@ -0,0 +1,46 @@ +{ + "id": "221", + "url": "https://www.csszengarden.com/221", + "css_url": "https://www.csszengarden.com/221/221.css", + "title": "Mid Century Modern", + "author": "Andrew Lohman", + "description": { + "summary": "A bold, modular web design with a vibrant color-blocked layout using geometric shapes and minimal iconography to create clear visual organization", + "visual_style": "The design employs a striking modular grid system with clearly defined color blocks in turquoise, coral orange, deep navy, and orchid purple, creating a contemporary digital aesthetic", + "emotional_impact": "The controlled contrast between vibrant colors and precise geometric elements creates a sense of energetic professionalism and digital sophistication", + "compositional_elements": "The layout follows a vertical columnar structure with horizontal bands, using white circular icons with simple line art to create visual anchors across color blocks" + }, + "artistic_context": { + "style_influences": "Swiss/International style, Bauhaus geometry, Digital minimalism, Material design", + "visual_metaphors": "Building blocks, digital components, pathways, structured journey" + }, + "categories": [ + "modular", + "geometric", + "color-block", + "minimalist", + "grid-based", + "digital" + ], + "visual_characteristics": [ + "circular iconography", + "vertical columns", + "bold color fields", + "thin line elements", + "structured whitespace", + "typographic contrast" + ], + "design_principles": { + "primary_principles": [ + "contrast", + "hierarchy", + "rhythm", + "balance" + ], + "visual_techniques": [ + "color blocking", + "geometric simplification", + "modular scaling" + ] + } +} \ No newline at end of file