<div class="layout-container">
<div class="layout-4col">
<p><img alt="A solid, stable CMS built on PHP" src="https://www.textpattern.com/assets/img/com/index-feature-foundations.jpg" srcset="https://www.textpattern.com/assets/img/com/index-feature-foundations@2x.jpg 2x, https://www.textpattern.com/assets/img/com/index-feature-foundations.jpg 1x" width="200" height="200"></p>
<h3>Built on solid foundations</h3>
<p>Textpattern CMS is completely free, open source software and it's built upon proven web technologies too. Furthermore, it doesn’t muddy your HTML with additional code dependencies or script libraries.</p>
</div>
<div class="layout-4col">
<p><img alt="A CMS with XML-like template tags" src="https://www.textpattern.com/assets/img/com/index-feature-tags.jpg" srcset="https://www.textpattern.com/assets/img/com/index-feature-tags@2x.jpg 2x, https://www.textpattern.com/assets/img/com/index-feature-tags.jpg 1x" width="200" height="200"></p>
<h3>Flexible tag-based templates</h3>
<p>Your designs—your code. Textpattern has a powerful tag-based template language that’s easy to learn and provides a wealth of ways to structure a website and manipulate content.</p>
</div>
<div class="layout-4col">
<p><img alt="Textpattern CMS is fast, lean, secure and extendable" src="https://www.textpattern.com/assets/img/com/index-feature-speed.jpg" srcset="https://www.textpattern.com/assets/img/com/index-feature-speed@2x.jpg 2x, https://www.textpattern.com/assets/img/com/index-feature-speed.jpg 1x" width="200" height="200"></p>
<h3>Fast, lean, secure and extendable</h3>
<p>We purposefully keep the core of the CMS lean and responsive. However the system is fully extendable via plugins, of which there are hundreds available via our community of plugin authors.</p>
</div>
<div class="layout-4col">
<p><img alt="A CMS with a simple user interface" src="https://www.textpattern.com/assets/img/com/index-feature-interface.jpg" srcset="https://www.textpattern.com/assets/img/com/index-feature-interface@2x.jpg 2x, https://www.textpattern.com/assets/img/com/index-feature-interface.jpg 1x" width="200" height="200"></p>
<h3>Simple, elegant user interface</h3>
<p>Our design philosophy extends to the Textpattern core user interface too. We try to avoid needless clutter within the administration panels and we strive to make the interface fully accessible for all users.</p>
</div>
</div>
This panel will look familiar to most Textpattern users. Hover this paragraph to see its nodes:
Built on solid foundations
Textpattern CMS is completely free, open source software and it's built upon proven web technologies too. Furthermore, it doesn’t muddy your HTML with additional code dependencies or script libraries.
Flexible tag-based templates
Your designs—your code. Textpattern has a powerful tag-based template language that’s easy to learn and provides a wealth of ways to structure a website and manipulate content.
Fast, lean, secure and extendable
We purposefully keep the core of the CMS lean and responsive. However the system is fully extendable via plugins, of which there are hundreds available via our community of plugin authors.
Simple, elegant user interface
Our design philosophy extends to the Textpattern core user interface too. We try to avoid needless clutter within the administration panels and we strive to make the interface fully accessible for all users.
Test your XPath skills by extracting some nodes, for example:
- all images;
- the second image of each row;
- the text of the paragraph following the picture of the car, and so on.
Post your solutions and new challenges in the comments section.
Here is the panels HTML code:
<div class="layout-container">
<div class="layout-4col">
<p><img alt="A solid, stable CMS built on PHP" src="https://www.textpattern.com/assets/img/com/index-feature-foundations.jpg" srcset="https://www.textpattern.com/assets/img/com/index-feature-foundations@2x.jpg 2x, https://www.textpattern.com/assets/img/com/index-feature-foundations.jpg 1x" width="200" height="200"></p>
<h3>Built on solid foundations</h3>
<p>Textpattern CMS is completely free, open source software and it's built upon proven web technologies too. Furthermore, it doesn’t muddy your HTML with additional code dependencies or script libraries.</p>
</div>
<div class="layout-4col">
<p><img alt="A CMS with XML-like template tags" src="https://www.textpattern.com/assets/img/com/index-feature-tags.jpg" srcset="https://www.textpattern.com/assets/img/com/index-feature-tags@2x.jpg 2x, https://www.textpattern.com/assets/img/com/index-feature-tags.jpg 1x" width="200" height="200"></p>
<h3>Flexible tag-based templates</h3>
<p>Your designs—your code. Textpattern has a powerful tag-based template language that’s easy to learn and provides a wealth of ways to structure a website and manipulate content.</p>
</div>
<div class="layout-4col">
<p><img alt="Textpattern CMS is fast, lean, secure and extendable" src="https://www.textpattern.com/assets/img/com/index-feature-speed.jpg" srcset="https://www.textpattern.com/assets/img/com/index-feature-speed@2x.jpg 2x, https://www.textpattern.com/assets/img/com/index-feature-speed.jpg 1x" width="200" height="200"></p>
<h3>Fast, lean, secure and extendable</h3>
<p>We purposefully keep the core of the CMS lean and responsive. However the system is fully extendable via plugins, of which there are hundreds available via our community of plugin authors.</p>
</div>
<div class="layout-4col">
<p><img alt="A CMS with a simple user interface" src="https://www.textpattern.com/assets/img/com/index-feature-interface.jpg" srcset="https://www.textpattern.com/assets/img/com/index-feature-interface@2x.jpg 2x, https://www.textpattern.com/assets/img/com/index-feature-interface.jpg 1x" width="200" height="200"></p>
<h3>Simple, elegant user interface</h3>
<p>Our design philosophy extends to the Textpattern core user interface too. We try to avoid needless clutter within the administration panels and we strive to make the interface fully accessible for all users.</p>
</div>
</div>