{
  "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" }
            ]
          }
        ]
      }
    ]
  }
}