Shortcode [bold]

Para poner negritas en bloques que no lo permiten por defecto. Envolver el texto que queramos en [bold]…[/bold] y se sustituirá por …

<div class="toggle_item">
<div class="title">
<p>[bold]Esto es bold[/bold] Esto no lo es</p>
</div>
</div>

document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('.toggle_item .title').forEach(function (title) {

        let html = title.innerHTML;

        html = html.replace(
            /\[bold\](.*?)\[\/bold\]/g,
            '<strong style="margin-right:10px;">$1</strong>'
        );

        title.innerHTML = html;

    });

});

---

8 columnas display grid

<div class="contenedor">
<div class="1"><p>1</p></div>
<div class="2"><p>2</p></div>
<div class="3"><p>3</p></div>
<div class="4"><p>4</p></div>
<div class="5"><p>5</p></div>
<div class="6"><p>6</p></div>
<div class="7"><p>7</p></div>
<div class="8"><p>8</p></div>
</div>

.contenedor{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  align-items: center;
}

p{
text-align:center;
font-family: Lato, "Microsoft Yahei", sans-serif;
}

.contenedor div{
border: 2px solid grey;
}

---

1

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "main nav"
    "foot  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 1fr 150px;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

<?php

echo "Este código PHP solo se muestra como ejemplo.";

?>

Playground 2

<div class="card">Contenido HTML</div>

.card { padding: 20px; background: #eee; }

console.log("JavaScript ejecutado");

<?php echo "Este código solo se muestra"; ?>