youthweb-styleguide

Über uns 

<!DOCTYPE html>
<html lang="de">

<head>
    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Über uns - Youthweb Styleguide</title>
    <!-- Include the CSS -->
    <link href="../../dist/toolkit.min.css" rel="stylesheet">
    <meta name="theme-color" content="#1c60a1">
</head>

<body>
    <script type="text/javascript">
        app_settings = {
            // Profildaten zum eingeloggten User
            // TODO: Refactoring profile-settings
            profile: null,
            urls: {
                // Wegen eines Bugs in Fractal wird z.B. `_config.project.baseUrl` statt `baseUrl` verwendet
                // @see https://github.com/frctl/fractal/issues/1042
                'root': 'https://styleguide.youthweb.net/components/preview',
                'baseUrl': 'http://localhost:8000',
                'communityJsonHost': 'http://localhost:8000',
                'imagesUploadUrl': 'http://localhost:8000/imageUpload',
            },
            'loaderUIDelay': 1000, //Asynchrone Funktionen fühlen sich flüssiger an, wenn es aufgrund eines künstlichen Delays nicht flackert
            'redirectDelay': 3000, //Bei Redirects sollten die Nutzer die Möglichkeit haben, den Bestätigungstext zu sehen
            'locale': window.navigator.userLanguage || window.navigator.language, // z.B. 'de' oder 'de_DE'
        };
    </script>
    <div id="app">
        <div class="text-white welcome" style="background-color:#19579c">
            <div class="container container-fill-height pt-5 pb-5">
                <div class="container-content-middle">
                    <div class="row youthweb-intro text-center">

                        <div class="col-12 mb-5">
                            <a href="https://styleguide.youthweb.net/components/preview/timeline">
                                <img src="../../dist/img/logo-30.png" alt="Youthweb" />
                            </a>
                        </div>
                        <div class="col-12">
                            <p>youthweb.net ist ein weltweites soziales Netzwerk für junge Christen.<br />Für Jugend-, Teeniegruppen und Hauskreise gibt es besondere Möglichkeiten, um sich auszutauschen.</p>
                        </div>
                    </div>
                    <div class="row mt-5 mb-5 text-center">
                        <div class="col-12 mb-4">
                            <h1>Über uns</h1>
                        </div>
                    </div>

                    <div class="mb-5">
                        <div class="row">
                            <div class="card-columns mx-auto">
                                <div class="card card-profile  ">
                                    <div class="card-header" style=""></div>
                                    <div class="card-body text-xs-center">
                                        <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=Torsten&size=100">
                                        <h5 class="card-title">Torsten</h5>
                                        <p class="mb-4">Ut dicit errem, dignissim ius, nihil legimus mea te</p>
                                        <div class="mb-4">
                                            <p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>
                                            <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>
                                            <p>Ut dicit errem dignissim ius, nihil legimus mea te. Duo cu cibo vidit epicurei. Usu at dicam vivendo, ex patrioque gloriatur ius. Tempor iudicabit te ius, te nam idque definitionem.</p>
                                            <p>Mea nihil concludaturque ad. Ex pro ornatus deleniti, sit in eirmod patrioque. Et meis mucius per. Velit cetero facilisis ex cum, no aliquam iudicabit est, no philosophia signiferumque conclusionemque his.</p>
                                        </div>
                                        <a class="btn btn-outline-primary-brand-yellow btn-sm" href="https://youthweb.net">
                                            <i class="fas fa-user"></i> Profil
                                        </a>
                                    </div>
                                </div>
                                <div class="card card-profile  ">
                                    <div class="card-header" style=""></div>
                                    <div class="card-body text-xs-center">
                                        <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=John+Doe&size=100">
                                        <h5 class="card-title">Felix</h5>
                                        <p class="mb-4">Ut dicit errem, dignissim ius, nihil legimus mea te</p>
                                        <div class="mb-4">
                                            <p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>
                                            <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>
                                            <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>
                                            <p>Ut dicit errem dignissim ius, nihil legimus mea te. Duo cu cibo vidit epicurei. Usu at dicam vivendo, ex patrioque gloriatur ius. Tempor iudicabit te ius, te nam idque definitionem.</p>
                                            <p>Mea nihil concludaturque ad. Ex pro ornatus deleniti, sit in eirmod patrioque. Et meis mucius per. Velit cetero facilisis ex cum, no aliquam iudicabit est, no philosophia signiferumque conclusionemque his.</p>
                                        </div>
                                        <a class="btn btn-outline-primary-brand-yellow btn-sm" href="https://youthweb.net">
                                            <i class="fas fa-user"></i> Profil
                                        </a>
                                    </div>
                                </div>
                                <div class="card card-profile  ">
                                    <div class="card-header" style=""></div>
                                    <div class="card-body text-xs-center">
                                        <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=Katja&size=100">
                                        <h5 class="card-title">Katja</h5>
                                        <p>23 Jahre alt</p>
                                        <p class="mb-4">Ut dicit errem, dignissim ius, nihil legimus mea te</p>
                                        <div class="mb-4">
                                            <p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>
                                            <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>
                                        </div>
                                        <a class="btn btn-outline-primary-brand-yellow btn-sm" href="https://youthweb.net">
                                            <i class="fas fa-user"></i> Profil
                                        </a>
                                    </div>
                                </div>
                                <div class="card card-profile  ">
                                    <div class="card-header" style=""></div>
                                    <div class="card-body text-xs-center">
                                        <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=Tom&size=100">
                                        <h5 class="card-title">Tom</h5>
                                        <p>24 Jahre alt</p>
                                        <p class="mb-4">Ut dicit errem, dignissim ius, nihil legimus mea te</p>
                                        <div class="mb-4">
                                            <p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>
                                            <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>
                                            <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>
                                        </div>
                                        <a class="btn btn-outline-primary-brand-yellow btn-sm" href="https://youthweb.net">
                                            <i class="fas fa-user"></i> Profil
                                        </a>
                                    </div>
                                </div>
                                <div class="card card-profile  ">
                                    <div class="card-header" style=""></div>
                                    <div class="card-body text-xs-center">
                                        <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=Silke&size=100">
                                        <h5 class="card-title">Silke</h5>
                                        <p>28 Jahre alt</p>
                                        <p class="mb-4">Ut dicit errem, dignissim ius, nihil legimus mea te</p>
                                        <div class="mb-4">
                                            <p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>
                                            <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>
                                            <p>Ut dicit errem dignissim ius, nihil legimus mea te. Duo cu cibo vidit epicurei. Usu at dicam vivendo, ex patrioque gloriatur ius. Tempor iudicabit te ius, te nam idque definitionem.</p>
                                            <p>Mea nihil concludaturque ad. Ex pro ornatus deleniti, sit in eirmod patrioque. Et meis mucius per. Velit cetero facilisis ex cum, no aliquam iudicabit est, no philosophia signiferumque conclusionemque his.</p>
                                        </div>
                                        <a class="btn btn-outline-primary-brand-yellow btn-sm" href="https://youthweb.net">
                                            <i class="fas fa-user"></i> Profil
                                        </a>
                                    </div>
                                </div>
                                <div class="card card-profile  ">
                                    <div class="card-header" style=""></div>
                                    <div class="card-body text-xs-center">
                                        <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=Max&size=100">
                                        <h5 class="card-title">Max</h5>
                                        <p>21 Jahre alt</p>
                                        <p class="mb-4">Ut dicit errem, dignissim ius, nihil legimus mea te</p>
                                        <div class="mb-4"></div>
                                        <a class="btn btn-outline-primary-brand-yellow btn-sm" href="https://youthweb.net">
                                            <i class="fas fa-user"></i> Profil
                                        </a>
                                    </div>
                                </div>
                                <div class="card card-profile  ">
                                    <div class="card-header" style=""></div>
                                    <div class="card-body text-xs-center">
                                        <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=Sophia&size=100">
                                        <h5 class="card-title">Sophia</h5>
                                        <p>Ein Jahr alt</p>
                                        <p class="mb-4">Ut dicit errem, dignissim ius, nihil legimus mea te</p>
                                        <div class="mb-4"></div>
                                        <a class="btn btn-outline-primary-brand-yellow btn-sm" href="https://youthweb.net">
                                            <i class="fas fa-user"></i> Profil
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <nav class="navbar navbar-expand-lg fixed-bottom navbar-dark bg-secondary app-navbar navbar-toggle-on-scroll" id="">
            <a class="navbar-brand" href="https://styleguide.youthweb.net/components/preview/timeline"><img src="../../dist/img/logo-16.png" alt="Youthweb" /></a>
            <button class="navbar-toggler navbar-toggler-right d-lg-none" type="button" data-toggle="collapse" data-target="#navbarFooter" aria-controls="navbarFooter" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse navbar-collapse-on-scrolldown" id="navbarFooter">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <!-- class.="active" -->
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
                    </li>
                </ul>
                <div class="dropdown-divider"></div>

                <div class="d-lg-none d-xl-none">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                                Facebook
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                                Instagram
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                                Twitter
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                                Pinterest
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                                Shop
                            </a>
                        </li>
                    </ul>
                </div>

                <ul class="nav navbar-nav float-right mr-0 d-none d-lg-flex">
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                            <i class="fab fa-pinterest-p"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                            <i class="fas fa-shopping-basket"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <script src="../../dist/toolkit.min.js"></script>
</body>

</html>
 
{% extends 'landing-page/layouts/public.html.twig' %}
{% set active_page = 'landing-page/ueber-uns' %}

{% block title %}{{ 'Über uns'|trans }}{{ parent() }}{% endblock %}

{% block content %}
            <div class="row mt-5 mb-5 text-center">
              <div class="col-12 mb-4"><h1>{{ 'Über uns'|trans }}</h1></div>
            </div>

            <div class="mb-5">
              <div class="row">
                <div class="card-columns mx-auto">
{% for member in members %}
                    <div class="card card-profile  ">
                        <div class="card-header" style=""></div>
                        <div class="card-body text-xs-center">
                            <img class="card-profile-img" src="{{ member.picture_url }}">
                            <h5 class="card-title">{{ member.username }}</h5>
{% if member.age %}
                            <p>{{ 'Ein Jahr alt|%count% Jahre alt'|trans({'%count%': member.age}) }}</p>
{% endif %}
                            <p class="mb-4">{{ member.sections }}</p>
                            <div class="mb-4">{{ member.description|raw }}</div>
                            <a class="btn btn-outline-primary-brand-yellow btn-sm" href="{{ member.profile_url }}">
                                <i class="fas fa-user"></i> {{ 'Profil'|trans }}
                            </a>
                        </div>
                    </div>
{% endfor %}
                </div>
              </div>
            </div>
{% endblock %}
 
{
  "members": [
    {
      "username": "Torsten",
      "age": "",
      "profile_url": "https://youthweb.net",
      "picture_url": "https://eu.ui-avatars.com/api/?name=Torsten&size=100",
      "sections": "Ut dicit errem, dignissim ius, nihil legimus mea te",
      "description": "<p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>                    <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>                    <p>Ut dicit errem dignissim ius, nihil legimus mea te. Duo cu cibo vidit epicurei. Usu at dicam vivendo, ex patrioque gloriatur ius. Tempor iudicabit te ius, te nam idque definitionem.</p>                    <p>Mea nihil concludaturque ad. Ex pro ornatus deleniti, sit in eirmod patrioque. Et meis mucius per. Velit cetero facilisis ex cum, no aliquam iudicabit est, no philosophia signiferumque conclusionemque his.</p>"
    },
    {
      "username": "Felix",
      "age": "",
      "profile_url": "https://youthweb.net",
      "picture_url": "https://eu.ui-avatars.com/api/?name=John+Doe&size=100",
      "sections": "Ut dicit errem, dignissim ius, nihil legimus mea te",
      "description": "<p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>                    <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>                    <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>                    <p>Ut dicit errem dignissim ius, nihil legimus mea te. Duo cu cibo vidit epicurei. Usu at dicam vivendo, ex patrioque gloriatur ius. Tempor iudicabit te ius, te nam idque definitionem.</p>                    <p>Mea nihil concludaturque ad. Ex pro ornatus deleniti, sit in eirmod patrioque. Et meis mucius per. Velit cetero facilisis ex cum, no aliquam iudicabit est, no philosophia signiferumque conclusionemque his.</p>"
    },
    {
      "username": "Katja",
      "age": "23",
      "profile_url": "https://youthweb.net",
      "picture_url": "https://eu.ui-avatars.com/api/?name=Katja&size=100",
      "sections": "Ut dicit errem, dignissim ius, nihil legimus mea te",
      "description": "<p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>                    <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>"
    },
    {
      "username": "Tom",
      "age": "24",
      "profile_url": "https://youthweb.net",
      "picture_url": "https://eu.ui-avatars.com/api/?name=Tom&size=100",
      "sections": "Ut dicit errem, dignissim ius, nihil legimus mea te",
      "description": "<p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>                    <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>                    <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>"
    },
    {
      "username": "Silke",
      "age": "28",
      "profile_url": "https://youthweb.net",
      "picture_url": "https://eu.ui-avatars.com/api/?name=Silke&size=100",
      "sections": "Ut dicit errem, dignissim ius, nihil legimus mea te",
      "description": "<p><b>Ut dicit errem dignissim ius, nihil legimus mea te</b></p>                    <p>Lorem ipsum dolor sit amet, ius assum electram in, et explicari mediocritatem vel, esse cotidieque an vis. Nemore aliquam vocibus duo ad, hinc graeci nusquam sed no. Eum no delectus ocurreret, habemus mnesarchum contentiones cum te, mundi abhorreant qui in. Etiam albucius eum at, sit id rebum porro option, ne usu choro ubique. Ut nam fabulas ponderum assentior.</p>                    <p>Ut dicit errem dignissim ius, nihil legimus mea te. Duo cu cibo vidit epicurei. Usu at dicam vivendo, ex patrioque gloriatur ius. Tempor iudicabit te ius, te nam idque definitionem.</p>                    <p>Mea nihil concludaturque ad. Ex pro ornatus deleniti, sit in eirmod patrioque. Et meis mucius per. Velit cetero facilisis ex cum, no aliquam iudicabit est, no philosophia signiferumque conclusionemque his.</p>"
    },
    {
      "username": "Max",
      "age": "21",
      "profile_url": "https://youthweb.net",
      "picture_url": "https://eu.ui-avatars.com/api/?name=Max&size=100",
      "sections": "Ut dicit errem, dignissim ius, nihil legimus mea te",
      "description": ""
    },
    {
      "username": "Sophia",
      "age": "1",
      "profile_url": "https://youthweb.net",
      "picture_url": "https://eu.ui-avatars.com/api/?name=Sophia&size=100",
      "sections": "Ut dicit errem, dignissim ius, nihil legimus mea te",
      "description": ""
    }
  ]
}

No notes defined.