Simple Tree List Display

INFORMATION & CODE

Tree List

What the Code Does

The provided code creates a styled, hierarchical "tree" or nested list displayed inside a retro-themed container. Specifically, the content outlines a menu of kebabs (broken down by types like Donor, Shish, and Kofti, along with their respective meat or vegetarian options) and a separate list of available sauces. Visually, the page centers this information inside a rounded, bordered card that uses retro, pixel-style arcade fonts ("Press Start 2P" and "VT323") and an aesthetic that applies a full grayscale filter to the wrapper box.

How It Works

The functionality is divided into two parts: structural markup (HTML) and visual styling (CSS).

The HTML uses a main heading (<h1>) followed by a wrapper <div> .Inside the wrapper, unordered lists (<ul>) and list items (<li>) are heavily nested to create the tree-like relationship. For example, "Chicken," "Lamb," and "pork" are nested inside lists belonging to specific kebab categories, which in turn belong to the main "Kebabs" category. Custom classes like .bold, .normal, .bullet, and .circle are applied directly to these lists and items to control their typography and marker styles.

The CSS provides the layout and thematic design. It uses a CSS reset for box-sizing and applies a retro font family globally. The body uses Flexbox to perfectly center the content on the screen. The .wrapper class defines the size, background color (#ffffef), dark red border, rounded corners, drop shadow, and a filter: grayscale(100%) property that strips color from the container. Finally, utility classes in the CSS target specific weights, colors, and list-style types to differentiate parent categories (bold, dark red) from sub-items (normal weight, gray).

How to Use The Code

To use and view this code, you need to combine the HTML and CSS into a standard web document and open it in any web browser.

Create a new file named index.html.
Paste the HTML code into it (ensure you wrap it in standard HTML boilerplate tags like <html>, <head>, and <body>, keeping the provided HTML structure inside the body).
Create a <style> block inside the <head> section of your HTML file, or save the CSS code into a separate file named style.css and link it using <link rel="stylesheet" href="style.css">
Double-click the index.html file to open it in your browser.

You can easily customize the content by editing the text inside the <li> tags to change the menu items, or modify the CSS properties—such as changing the .wrapper background color or removing the grayscale filter—to alter the aesthetic to your liking.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UFT-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Tree List Display</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <h1>Tree List</h1>
    <div class="wrapper">
      <ul>
        <li class="bold">Kebabs:
          <ul>
            <li class="bold">Donor:
              <ul class="normal">
                <li>Chicken</li>
                <li>Lamb</li>
                <li>pork</li>
              </ul>
            </li>
          </ul>
          <ul>
            <li class="bold">Shish:
              <ul class="normal">
                <li>Chicken</li>
                <li>Lamb</li>
                <li>pork</li>
                <li>Vegitarian</li>
              </ul>
            </ul>
            <ul>
              <li class="bold">Kofti:
                <ul class="normal">
                  <li>Chicken</li>
                  <li>Lamb</li>
                  <li>pork                  
                </ul>
              </li>
            </ul>
          </li>
        </ul>

      
        <ul class="bullet">
          <li class="bold">Sauces:
            <ul class="circle normal">
              <li>Chilli</li>
              <li>Garlic</li>
              <li>Mint & Yoghurt</li>
              <li>Mayo</li>
              <li>Tomato ketchup</li>
              <li>Burger Sauce</li>
            </ul>
          </li>
        </ul>
      </ul>
    </div>
  </body>
</html>

CSS


                * {
  box-sizing: border-box;
  font-family: "Press Start 2P", VT323, cursive;
}

body {
  height: 98.5vh;
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  font-size: 16px;
  line-height: 1.5;
}
                  
.wrapper {
  width: 380px;
  padding: 10px;
  margin: auto;
  background-color: #ffffef;
  border: 3px solid #a00000;
  border-radius: 20px;
  line-height: 1.15;
  box-shadow: 2px 2px 10px #555;
}

h1 {
  text-align: center;
}

ul, li {
  font-family: "VT323", cursive;
  font-size: 22px;
  color: var(--color-dark);
}
      
.bold {
  color: #a00000;
  font-weight: 900;
}
      
.normal {
  color:#555555;
  font-weight: 300;
}
      
.bullet {
  list-style-type: disc;
}
      
.circle {
  list-style-type: circle;
}

MENU

INFORMATION & CODE

Tree List

What the Code Does

How It Works

How to Use The Code

HTML

CSS

PREVIEW

Tree List