68 lines
3.2 KiB
JSON
Executable File
68 lines
3.2 KiB
JSON
Executable File
{
|
|
"head": {
|
|
"title": "Examplary",
|
|
"styles": "body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: red; text-align: center; }\n.container { width: 80%; margin: 20px auto; padding: 20px; background: green; border-radius: 10px; box-shadow: 0 128px 512px rgba(100,100,200,50); }\n.nav-list { list-style-type: none; padding: 0; text-align: left; width: fit-content; margin: 0 auto 20px 0; }\n.nav-list li { padding: 5px 0; font-size: 18px; }\n.card { width: 60%; margin: 20px auto; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 128px 1024px rgba(200,50,100,40); }\n.card-body { padding: 20px; }\n.card-title { font-size: 24px; font-weight: bold; }\n.bg-card-gradient { background: linear-gradient(45deg, green, purple); color: white; padding: 30px; }\n.bg-holder { height: 150px; background: url('https://via.placeholder.com/150') no-repeat center center; background-size: cover; border-radius: 10px; }\n.button { display: inline-block; padding: 10px 20px; background: green; color: white; text-decoration: none; border-radius: 5px; margin-top: 10px; }"
|
|
},
|
|
"body": {
|
|
"content": [
|
|
{
|
|
"element": "div",
|
|
"attributes": { "class": "container" },
|
|
"content": [
|
|
{ "element": "h1", "value": "Examplary Website." },
|
|
{ "element": "p", "value": "Facharbeitswebsite" },
|
|
{
|
|
"element": "ul",
|
|
"attributes": { "class": "nav-list" },
|
|
"content": [
|
|
{ "element": "li", "value": "Basic" },
|
|
{ "element": "li", "value": "Elements" }
|
|
]
|
|
},
|
|
{ "element": "hr" },
|
|
{
|
|
"element": "div",
|
|
"attributes": { "class": "col-md-5 text-center bg-card-gradient" },
|
|
"content": [
|
|
{
|
|
"element": "div",
|
|
"attributes": { "class": "card-body" },
|
|
"content": [
|
|
{
|
|
"element": "div",
|
|
"attributes": { "class": "card-body" },
|
|
"content": [
|
|
{
|
|
"element": "div",
|
|
"attributes": { "class": "nav-list" },
|
|
"content": [
|
|
{ "element": "h2", "attributes": { "class": "card-title" }, "value": "Special Card Section" },
|
|
{ "element": "p", "value": "This card has a gradient background and an image holder." },
|
|
{
|
|
"element": "a",
|
|
"attributes": { "href": "output2.html", "class": "button" },
|
|
"value": "Learn Less"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{ "element": "hr" },
|
|
{ "element": "h2", "value": "This isn`t a card." },
|
|
{ "element": "p", "value": "Here couldn`t be a card text." },
|
|
{
|
|
"element": "footer",
|
|
"content": [
|
|
{ "element": "p", "value": "Schlechte Facharbeit" }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|