Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
Run
<!doctype html> <title>Example</title> <style> .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; align-items: stretch; } .grid > article { border: 1px solid #ccc; box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3); } .grid > article img { max-width: 100%; } .text { padding: 0 20px 20px; } .text > button { background: gray; border: 0; color: white; padding: 10px; width: 100%; } </style> <main class="grid"> <article> <img src="/pix/samples/23m.jpg" alt="Sample photo"> <div class="text"> <h3>Seamlessly visualize quality</h3> <p>Collaboratively administrate empowered markets via plug-and-play networks.</p> <button>Here's why</button> </div> </article> <article> <img src="/pix/samples/24m.jpg" alt="Sample photo"> <div class="text"> <h3>Completely Synergize</h3> <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p> <button>Here's how</button> </div> </article> <article> <img src="/pix/samples/22l.jpg" alt="Sample photo"> <div class="text"> <h3>Dynamically Procrastinate</h3> <p>Completely synergize resource taxing relationships via premier niche markets.</p> <button>Read more</button> </div> </article> <article> <img src="/pix/samples/15l.jpg" alt="Sample photo"> <div class="text"> <h3>Best in class</h3> <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p> <button>Just do it...</button> </div> </article> <article> <img src="/pix/samples/25m.jpg" alt="Sample photo"> <div class="text"> <h3>Dynamically innovate supply chains</h3> <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p> <button>Here's why</button> </div> </article> <article> <img src="/pix/samples/16l.jpg" alt="Sample photo"> <div class="text"> <h3>Sanity check</h3> <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p> <button>Stop here</button> </div> </article> </main>
Preview