diff options
-rw-r--r-- | static/styles.css | 112 | ||||
-rw-r--r-- | template/consortium.html.j2 | 224 |
2 files changed, 262 insertions, 74 deletions
diff --git a/static/styles.css b/static/styles.css index fcff74fd..12d702c6 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,3 +1,4 @@ + .lang-slector { float: right; padding-top: 2mm; @@ -275,4 +276,113 @@ ul.timeline > li:before { line-height: 1.5rem; height: 4.5rem; min-height: 4.5rem; -}
\ No newline at end of file +} + + +.consortium h4 { + color: #555; + text-align: left; + text-transform: uppercase; + font-weight: bold; + position: relative; + margin: 30px 0 60px; + padding: 5px; +} + +.consortium h4::after { + content: ""; + width: 170px; + position: absolute; + text-align: left; + height: 13%; + bottom: 0; + left: 0.2em; + background: rgba(170, 57, 57, 0.3); + z-index: -1; +} + +.announce .col-center { + margin: 0 auto; + float: none !important; +} + +.announce .carousel { + padding: 0 70px; +} + +.announce .carousel .carousel-item { + color: #999; + font-size: 14px; + text-align: center; + overflow: hidden; + min-height: 290px; +} + +.announce .carousel .carousel-item .img-box { + width: 135px; + height: 135px; + margin: 0 auto; + padding: 5px; + border: 1px solid #ddd; + border-radius: 50%; +} + +.announce .carousel .img-box img { + width: 100%; + height: 100%; + display: block; + border-radius: 50%; +} + +.announce .carousel .testimonial { + padding: 30px 0 10px; +} + +.announce .carousel .overview { + font-style: italic; +} + +.announce .carousel .overview b { + text-transform: uppercase; + color: rgba(170, 57, 57, 0.3); +} + +.announce .carousel-control-prev, .announce .carousel-control-next { + width: 40px; + height: 40px; + margin-top: -20px; + top: 50%; + background: none; +} + +.announce .carousel-control-prev i, .announce .carousel-control-next i { + font-size: 68px; + line-height: 42px; + position: absolute; + display: inline-block; + color: rgba(0, 0, 0, 0.8); + text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000; +} + +.announce .carousel-indicators { + bottom: -40px; +} + +.announce .carousel-indicators button, .announce .carousel-indicators button.active { + width: 12px; + height: 12px; + margin: 1px 3px; + border-radius: 50%; + border: none; +} + +.announce .carousel-indicators button { + background: #999; + border-color: transparent; + box-shadow: inset 0 2px 1px rgba(0,0,0,0.2); +} + +.announce .carousel-indicators button.active { + background: #555; + box-shadow: inset 0 2px 1px rgba(0,0,0,0.2); +} diff --git a/template/consortium.html.j2 b/template/consortium.html.j2 index 58706d74..56e34ab9 100644 --- a/template/consortium.html.j2 +++ b/template/consortium.html.j2 @@ -2,83 +2,160 @@ {% block body_content %} <main id="maincontent"> - <div class="container"> + <div class="container consortium"> <!--Section: Content--> <section class="section-consortium dark-grey-text"> - {# <div class="justify-content-md-left"> #} - <!-- Section heading --> - <h4 class="font-weight-bold pb-2 mb-4">{{ _("Consortium")}}</h4> - <!-- Section description --> + <div class="container-xl"> - <!-- Section heading --> - <h4 class="font-weight-bold pb-2 mb-4">{{ _("Project")}}</h4> - <div class="row"> - <div class="col col-md-auto"></div> + <h4 class="font-weight-bold pb-2 mb-4">{{ _("Events")}}</h4> + <div class="announce"> + <div class="row"> + <div class="col col-md-2 col-md-auto"></div> + <div class="col-md-8"> - <div class="col-md-11"> - <p class="text-muted w-responsive mx-auto mb-3"> - {% trans %} - The TALER project is an initiative of Horizon Europe (Pilots for the Next Generation Internet) with the - aim of bringing the GNU Taler to market across Europe. - <br> - To make the GNU Taler accessible to European citizens, we need a commercially viable use of the GNU Taler - technology. We will achieve this through the four key project objectives. - {% endtrans %} - </p> + <div id="AnnouncCarousel" class="carousel slide" data-bs-ride="carousel"> + + <!-- Carousel indicators --> + <div class="carousel-indicators"> + <button data-bs-target="#AnnouncCarousel" data-bs-slide-to="0" class="active" aria-current="true" + aria-label="Slide 1"></button> + <button type="button" data-bs-target="#AnnouncCarousel" data-bs-slide-to="1" + aria-label="Slide 2"></button> + <button type="button" data-bs-target="#AnnouncCarousel" data-bs-slide-to="2" + aria-label="Slide 3"></button> + <button type="button" data-bs-target="#AnnouncCarousel" data-bs-slide-to="3" + aria-label="Slide 4"></button> + </div> + + + <!-- Wrapper for carousel items --> + <div class="carousel-inner"> + <div class="carousel-item active" data-bs-interval="2000"> + <div class="img-box"><img src="{{ url('images/7-efficient.svg') }}" alt=""></div> + <p class="testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, + varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. + Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p> + <p class="overview"><b>Paula Taler</b>, Professor</p> + </div> + <div class="carousel-item" data-bs-interval="2000"> + <div class="img-box"><img src="{{ url('images/taler-arch-full.svg') }}" alt=""></div> + <p class="testimonial">Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi + suscipit tincidunt. Utmtc tempus dictum risus. Pellentesque viverra sagittis quam at mattis. + Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.</p> + <p class="overview"><b>Antonio Twint</b>, Web Developer</p> + </div> + <div class="carousel-item" data-bs-interval="2000"> + <div class="img-box"><img src="{{ url('images/6-usable.svg') }}" alt=""></div> + <p class="testimonial">Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. + Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus + risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget rutrum.</p> + <p class="overview"><b>Michael Coin</b>, CEO</p> + </div> - <div class="accordion" id="accordionObjectives"> - {% for objective in conf['objectives'] %} - <div class="accordion-item"> - <h2 class="accordion-header" id="heading_{{ loop.index }}"> - <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" - data-bs-target="#collapse_{{ loop.index }}" aria-expanded="false" - aria-controls="collapse_{{ loop.index }}"> - Objective {{ loop.index }}: {{ objective.title }} - </button> - </h2> - <div id="collapse_{{ loop.index }}" class="accordion-collapse collapse" - aria-labelledby="heading_{{ loop.index }}" data-bs-parent="#accordionObjectives"> - <div class="accordion-body text-muted w-responsive"> - {{ objective.text }} + <div class="carousel-item" data-bs-interval="2000"> + <div class="img-box"><img src="{{ url('images/8-fault-tolerant.svg') }}" alt=""></div> + <p class="testimonial">Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. + Etiam + faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus + risus, + volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget rutrum.</p> + <p class="overview"><b>Michael Pay</b>, Seo Analyst</p> </div> </div> + + {# <!-- Carousel controls --> + <a class="carousel-control-prev" href="#AnnouncCarousel" data-slide="prev"> + <i class="fab fa-angle-left"></i> + </a> + <a class="carousel-control-next" href="#AnnouncCarousel" data-slide="next"> + <i class="fab fa-angle-right"></i> + </a> #} </div> - {% endfor %} </div> - <div class="col col-md-auto"></div> - <p class="text-muted w-responsive mx-auto"><br></p> - + <div class="col col-md-2 col-md-auto"></div> </div> + </div> + </div> - <!-- Section heading --> - <h4 class="font-weight-bold pb-2 mb-4">{{ _("Partners")}}</h4> - - <div class="row mb-4"> - <div class="col col-md-auto"></div> - - <div class="col-md-11"> - <p class="text-muted w-responsive mx-auto mb-3"> - {% trans %} - TALER consortium consists of 11 partners from 8 European countries (the Netherlands, Belgium, France, - Germany, Greece, Hungary, Luxembourg and Switzerland). - {% endtrans %} - </p> - <p class="text-muted w-responsive mx-auto mb-3"> - {% trans %} - The consortium is diverse in terms of types of institutions, including research (TUE) and applied - science - universities (BFH), small for-profit (CBG, TSYS, VV) and non-profit (PS) companies, cooperative banks - (GLS, MAG), a foundation (NLnet) and grassroots movements (ESEN, HODI). - {% endtrans %} - </p> + <h4 class="font-weight-bold pb-2 mb-4">{{ _("Deliverables")}}</h4> + + + <!-- Section heading --> + <h4 class="font-weight-bold pb-2 mb-4">{{ _("Project")}}</h4> + <div class="row"> + <div class="col col-md-auto"></div> + + <div class="col-md-11"> + <p class="text-muted w-responsive mx-auto mb-3"> + {% trans %} + The TALER project is an initiative of Horizon Europe (Pilots for the Next Generation Internet) + with the + aim of bringing the GNU Taler to market across Europe. + <br> + To make the GNU Taler accessible to European citizens, we need a commercially viable use of + the GNU Taler + technology. We will achieve this through the four key project objectives. + {% endtrans %} + </p> + + <div class="accordion" id="accordionObjectives"> + {% for objective in conf['objectives'] %} + <div class="accordion-item"> + <h2 class="accordion-header" id="heading_{{ loop.index }}"> + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" + data-bs-target="#collapse_{{ loop.index }}" aria-expanded="false" + aria-controls="collapse_{{ loop.index }}"> + Objective {{ loop.index }}: {{ objective.title }} + </button> + </h2> + <div id="collapse_{{ loop.index }}" class="accordion-collapse collapse" + aria-labelledby="heading_{{ loop.index }}" data-bs-parent="#accordionObjectives"> + <div class="accordion-body text-muted w-responsive"> + {{ objective.text }} + </div> + </div> </div> - <div class="col col-md-auto"></div> + {% endfor %} </div> + <div class="col col-md-auto"></div> + <p class="text-muted w-responsive mx-auto"><br></p> + + </div> + + + <!-- Section heading --> + <h4 class="font-weight-bold pb-2 mb-4">{{ _("Partners")}}</h4> + + <div class="row mb-4"> + <div class="col col-md-auto"></div> + + <div class="col-md-11"> + <p class="text-muted w-responsive mx-auto mb-3"> + {% trans %} + TALER consortium consists of 11 partners from 8 European countries (the Netherlands, + Belgium, France, + Germany, Greece, Hungary, Luxembourg and Switzerland). + {% endtrans %} + </p> + <p class="text-muted w-responsive mx-auto mb-3"> + {% trans %} + The consortium is diverse in terms of types of institutions, including research (TUE) and + applied + science + universities (BFH), small for-profit (CBG, TSYS, VV) and non-profit (PS) companies, + cooperative banks + (GLS, MAG), a foundation (NLnet) and grassroots movements (ESEN, HODI). + {% endtrans %} + </p> + + </div> + <div class="col col-md-auto"></div> + </div> </section> @@ -95,25 +172,26 @@ <div class="col"> <div class="card border-0 h-100"> <a href="{{ partner.url }}" target="_blank" rel="noopener noreferrer"> - <img src="{{ url(partner.logo ) }}" height="180" class="card-header rounded-circle z-depth-3" - alt="{{ partner.id + ' avatar'}}"> + <img src="{{ url(partner.logo) }}" height="180" class="card-header rounded-circle z-depth-3" + alt="{{ partner.id + ' avatar'}}"> </a> - <div class="card-note grey-text text-muted mt-3">The team of {{ partner.name }} is represented by </div> - <div class="card-body h-100"> - <h5 class="card-title font-weight-bold grey-text">{{ partner.contact }} </h5> - <p class="card-text grey-text text-muted word-wrap"> {{ partner.role }} </p> - </div> - <div class="card-footer"> - <small class="text-body-secondary dark-grey-text text-muted word-wrap"><i> {{ partner.statement }} </i></small> + <div class="card-note grey-text text-muted mt-3">The team of {{ partner.name }} is represented by </div> + <div class="card-body h-100"> + <h5 class="card-title font-weight-bold grey-text">{{ partner.contact }} </h5> + <p class="card-text grey-text text-muted word-wrap"> {{ partner.role }} </p> + </div> + <div class="card-footer"> + <small class="text-body-secondary dark-grey-text text-muted word-wrap"><i> {{ partner.statement }} + </i></small> + </div> </div> </div> - </div> - {% endfor %} + {% endfor %} + </div> </div> - </div> - </section> - <!--Section: Content--> + </section> + <!--Section: Content--> </div> </main> |