Untitled

<!DOCTYPE html>
<html>
<head>
<title>Sales Funnel Types</title>
<style>
body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f0f0; /* Light gray background */
}

.mindmap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.node {
  padding: 10px 20px;
  border-radius: 8px;
  background: #fff; /* White nodes */
  margin: 10px 0;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Subtle shadow */
  position: relative; /* For positioning lines */
}

.node::before { /* Connector lines */
  content: "";
  position: absolute;
  top: 50%;
  left: -50px; /* Adjust as needed */
  width: 50px;
  height: 2px;
  background: #808080; /* Gray lines */
}

.node.main {
  background: #e0f2f7; /* Light blue for main node */
  font-weight: bold;
}

.branch {
  display: flex;
  margin-top: 20px; /* Space between branches */
}

.branch > .node { /* Target immediate children of branch */
    margin: 10px;
}

/* Remove line from main node */
.node.main::before {
    display: none;
}

/* Adjust line angle for different branches */
.branch:nth-child(1) .node::before {
    transform: rotate(45deg);
}
.branch:nth-child(2) .node::before {
    transform: rotate(20deg);
}
.branch:nth-child(3) .node::before {
    transform: rotate(-20deg);
}

.branch:nth-child(4) .node::before {
    transform: rotate(-45deg);
}
.branch:nth-child(5) .node::before {
    transform: rotate(-70deg);
}

</style>
</head>
<body>

<div class="mindmap">
  <div class="node main">Funnels</div>

    <div class="branch">
        <div class="node">Tripewire Funnel</div>
        <div class="node">Simple Affiliate Funnel</div>
        <div class="node">Webinar Funnel</div>
    </div>

    <div class="branch">
        <div class="node">VSL Funnel</div>
        <div class="node">Secret Direct Funnel</div>
    </div>
</div>

</body>
</html>
Editor is loading...