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 class="row py-5 text-center mx-auto">
    <h2 class="display-4 text-primary text-center mx-auto">{{ _('Learn more') }}</h2>
    <p class="text-center">
      {{ _('Are you interested in learning more about Onion Services?') }}
      {{ _('The Onion Services Ecosystem documentation is directed to everyone: from those who wants to understand and use the technology to the ones interested with advanced topics such as the current research.') }}
    </p>
    <a class="btn btn-lg btn-outline-primary mx-auto my-3" href="https://onionservices.torproject.org">
          {{ _('Check our extensive documentation') }}<i class="ml-3 pt-2 fas fa-arrow-right"></i>
    </a>
  </div>
  </div>
    <div class="row py-5 text-center mx-auto">
    <h2 class="display-4 text-primary text-center mx-auto my-3">{{ _('Talk') }}</h2>
    <p class="text-center">
      {{ _('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>