{% extends "base/base.html" %}
{% block title %}Local Ground{% endblock %} 
{% block h1 %}{% endblock %}
{% block content %} 
    <div class="container-center article flex">
        <!-- TODO: Get rid of inline styles -->
        <div class="welcome-box">
            <h2 style="font-family: Amatica SC; font-weight:700; text-align:center;margin-top: 40px; margin-bottom: 20px;font-size: 40px; text-shadow: 0.5px 0.5px black">Local Ground helps you tell the story of Your World</h2>
            <div style="text-align:center;margin-bottom:100px;display:flex;margin:10px 40px 40px;font-size: 14px;">
                <div style="margin:20px;flex:1;">
                    <img src="/static/redesign/assets/map-icon.png" style="width:100px;margin:20px auto;display:block;">
                    <span style="font-weight:600;display:block;padding-bottom:4px;">Story Maps</span>
                    <span>Create story maps that take your visitor on a journey through your data</span>
                </div>
                <div style="margin:20px;flex:1;">
                    <img src="/static/redesign/assets/pin-icon.png" style="width:100px;margin:20px auto;display:block;">
                    <span style="font-weight:600;display:block;padding-bottom:4px;">Data Visualization</span>
                    <span>Visualize your spatial data</span>
                </div>
                <div style="margin:20px;flex:1;">
                    <img src="/static/redesign/assets//pen-icon.png" style="width:100px;margin:20px auto;display:block;">
                    <span style="font-weight:600;display:block;padding-bottom:4px;">Hand Drawn Maps</span>
                    <span>Print your map, draw on it with a colored pen, and upload it to automatically overlay your hand drawings on your map</span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}