Commit a0c0a1a0 authored by Hueser, Christian (FWCC) - 138593's avatar Hueser, Christian (FWCC) - 138593 Committed by Huste, Tobias (FWCC) - 111645

Draft: Hook additional service page into services offered

    * Additional button that points to descriptions of the Helmholtz GitLab
    service.
    * Add some css to layout button next to the other services buttons on
    different devices.
    * Add some css to layout service page.
    * Add some dummy text to see how it looks like if text is included.
parent 3060f073
......@@ -12,16 +12,19 @@
</div>
<div class="services-title-buttons">
<a href="{{ 'services/training' | relative_url }}" class="btn btn-success btn-lg">
<a href="{{ 'services/training' | relative_url }}" class="btn btn-success btn-lg service-button">
<i class="fas fa-university"></i> Education &amp; Training
</a>
<a href="{{ 'services#technology' | relative_url }}" class="btn btn-success btn-lg">
<a href="{{ 'services#technology' | relative_url }}" class="btn btn-success btn-lg service-button">
<i class="fas fa-laptop-code"></i> Technology
</a>
<a href="{{ 'services/consulting' | relative_url }}" class="btn btn-success btn-lg">
<a href="{{ 'services/consulting' | relative_url }}" class="btn btn-success btn-lg service-button">
<i class="fas fa-chart-line"></i> Consulting
</a>
<a href="{{ 'services#community' | relative_url }}" class="btn btn-success btn-lg">
<a href="{{ 'services#community' | relative_url }}" class="btn btn-success btn-lg service-button">
<i class="fas fa-users"></i> Communities
</a>
<a href="{{ 'services#helmholtzgitlab' | relative_url }}" class="btn btn-success btn-lg service-button">
<i class="fas fa-code-branch"></i> Helmholtz GitLab
</a>
</div>
......@@ -106,6 +106,28 @@
</div>
</div>
</div>
<div class="alert alert-secondary" id="helmholtzgitlab">
<div class="services-grid">
<div class="text">
<h2>Helmholtz GitLab</h2>
<p>
HIFIS Software offers a
<a href="https://gitlab.hzdr.de/">Helmholtz-wide GitLab service</a>
that is free-of-charge and available to all people affiliated with
the Helmholtz Association and its partners.
<a href="{{ 'services/helmholtzgitlab' | relative_url }}"><strong>More...</strong></a>
</p>
<h4>Talk to us</h4>
{% include contact_us/mini.html %}
{% include helpdesk/mini.html %}
</div>
<img
src="{{ site.directory.images | relative_url }}adi-goldstein-mDinBvq1Sfg-unsplash.jpg"
class="hide-on-mobile"
alt="Symbolic image for Helmholtz GitLab Services."
>
</div>
</div>
</article>
</section>
</main>
......
---
---
@import "boilerplate/breakpoints";
.image-block {
display: flex;
padding: 1rem 0;
align-items: center;
div {
flex: 3 0 0;
}
.help-image {
padding: 1rem 2rem;
flex: 1 0 0;
max-width: 14rem; // needed for Chrome on large screens
min-height: 5rem; // needed for Firefox on small screens
&.right {
@include medium-is-tablet-plus {
order: 1
}
}
}
@include medium-is-phone {
flex-direction: column;
}
}
.image-attrib {
font-size: 0.8rem;
text-align: right;
}
......@@ -10,15 +10,38 @@
}
.services-title-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
display: grid;
grid-template-columns: repeat(4, 1fr);
.service-button {
grid-column: span 2;
}
.service-button:nth-last-child(1):nth-child(odd) {
grid-column: 2 / span 2;
}
@include medium-is-tablet {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(8, 1fr);
.service-button {
grid-column: span 2;
}
.service-button:nth-last-child(1):nth-child(odd) {
grid-column: 4 / span 2;
}
}
@include medium-is-phone {
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(4, 1fr);
.service-button {
grid-column: span 2;
}
.service-button:nth-last-child(1):nth-child(odd) {
grid-column: 2 / span 2;
}
}
a {
......
---
title: Helmholtz GitLab
title_image: adi-goldstein-mDinBvq1Sfg-unsplash_shrinked.jpg
layout: services/default
author: none
additional_css:
- services/gitlab-help-images.css
excerpt: >-
HIFIS Software offers a Helmholtz-wide GitLab service
that is free-of-charge and available to all people affiliated with
the Helmholtz Association and its partners.
---
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
</p>
<h1>Features of Helmholtz GitLab Service</h1>
<div class="image-block">
<img
class="help-image left"
alt="A software developer working with version control."
src="{{ site.directory.images | relative_url }}/services/undraw_version_control_9bpv.svg"
/>
<div>
<h3>Version Control with Git</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
</p>
</div>
</div>
<div class="image-block">
<img
class="help-image right"
alt="A software developer working with GitLab."
src="{{ site.directory.images | relative_url }}/services/undraw_developer_activity_bv83.svg"
/>
<div>
<h3>Project Management with GitLab</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
</p>
</div>
</div>
<div class="image-block">
<img
class="help-image left"
alt="A software developer monitoring some systems executing automated tasks."
src="{{ site.directory.images | relative_url }}/services/undraw_programming_2svr.svg"
/>
<div>
<h3>GitLab Continuous Integration</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
</p>
</div>
</div>
<div class="image-block">
<img
class="help-image right"
alt="A container ship carrying some containers."
src="{{ site.directory.images | relative_url }}/services/undraw_Container_ship_ok1c.svg"
/>
<div>
<h3>GitLab Container Registry</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
</p>
</div>
</div>
<div class="image-block">
<img
class="help-image left"
alt="A software developer with a pile of packages."
src="{{ site.directory.images | relative_url }}/services/undraw_deliveries_131a.svg"
/>
<div>
<h3>GitLab Package Registry</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
</p>
</div>
</div>
<div class="image-block">
<img
class="help-image right"
alt="A software developer with a bookshelf with some books."
src="{{ site.directory.images | relative_url }}/services/undraw_Bookshelves_re_lxoy.svg"
/>
<div>
<h3>GitLab Pages</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
</p>
</div>
</div>
<div class="image-block">
<img
class="help-image left"
alt="A helpdesk agent at his/her desk."
src="{{ site.directory.images | relative_url }}/services/undraw_feeling_proud_qne1.svg"
/>
<div>
<h3>HIFIS Helpdesk</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
{% include contact_us/mini.html %}
{% include helpdesk/mini.html %}
</p>
</div>
</div>
<div class="image-attrib">Images by Katerina Limpitsouni via <a href="https://undraw.co/">undraw.co</a></div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment