community/templates/onion-services.html

<div class="container py-5">
  <div class="row py-5">
    <div class="col-lg-7">
      {{ this.body }}
    </div>
    <div class="col-lg-5">
      <img src="{{ ('/static/images/home/png/'+ this.path + '.png')|url }}" class="img-fluid" alt="{{ this.section }}" />
    </div>
  </div>
  <div class="row">
    {% for child in this.children|sort(attribute='key') %}
      <div class="col-sm-6 col-md-6 col-sm-12 col-xl-6 py-3">
        <div class="card h-100">
          <div class="card-body">
            <div class="card-body">
              <h4 class="card-title text-primary">
                <a href="{{ child.path|url(alt=this.alt) }}">{{ child.title }}</a>
              </h4>
              <p class="card-text">{{ child.subtitle }}</p>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="row py-5 text-center mx-auto">
    <h2 class="display-4 text-primary text-center mx-auto">{{ _('Onionize any website') }}</h2>
    <p class="text-center">
      {{ _('There\'s a toolkit that lets you take any existing website and host it as an onionsite too. You would do this because onionsites are more secure than just regular sites. There is an installation guide for how to use this toolkit to onionize your site.') }}
    </p>
    <a class="btn btn-lg btn-outline-primary mx-auto my-3" href="https://onionservices.torproject.org/apps/web/onionspray">
          {{ _('Check out the code') }}<i class="ml-3 pt-2 fas fa-arrow-right"></i>
    </a>
  </div>
  <div id="featured-onions" class="row py-5 text-center mx-auto">
    <h2 class="display-4 text-primary text-center mx-auto">{{ _('Featured onionsites') }}</h2>
  </div>
  <div class="row mx-auto">
    {% for id, item in bag('onions').items() %}
      <div class="col-4">
        <div class="card h-50 border-0">
          {% if id=='tor' %}
            <img class="card-img-top h-100 w-25 mx-auto d-block" src="{{ item.image|asseturl }}">
          {% else %}
            <img class="card-img-top mx-auto d-block" src="{{ item.image|asseturl }}">
          {% endif %}
          <div class="card-body">
            <p class="card-text text-primary text-center"><a href="{{ item.link }}">{{ item.link }}</a></p>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="row py-5 text-center mx-auto">
    <h2 class="display-4 text-primary text-center mx-auto">{{ _('Tools') }}</h2>
  </div>
  <div class="row mx-auto d-flex flex-wrap align-items-center">
    {% for id, item in bag('onion-tools').items() %}
    {% if item.active == "True" %}
      <div class="col-4">
        <div class="card h-50 border-0">
          <a href="{{ item.link }}"><img class="card-img-top h-100 w-50 mx-auto d-block" src="{{ item.image|asseturl }}"></a>
          <div class="card-body">
            <p class="card-text text-primary text-center"><a href="{{ item.link }}">{{ item.label }}</a></p>
          </div>
        </div>
      </div>
      {% endif %}
    {% endfor %}
  </div>
    <div class="row py-5 text-center mx-auto">
    <h2 class="display-4 text-primary text-center mx-auto my-3">{{ _('Learn More') }}</h2>
    <p class="text-center">
      {{ _('Are you interested in learning more about onion services? Join our forum to speak with other onion service operators. Alternatively, you can subscribe to the')}} <a href="https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-onions" target="_blank">{{ _('tor-onions') }}</a> {{ _('mailing list.') }}
    </p>
    <a class="btn btn-lg btn-outline-primary mx-auto my-3" href="https://forum.torproject.org/c/support/onion-services/">
          {{ _('Tor forum') }}<i class="ml-3 pt-2 fas fa-arrow-right"></i>
    </a>
  </div>
</div>