feat: Kompetenzen zu Services-Seite hinzugefügt.

This commit is contained in:
muli 2023-05-16 16:36:18 +02:00
parent 1475c5cb0c
commit 70725294cb
2 changed files with 135 additions and 4 deletions

View File

@ -557,6 +557,10 @@ h1 {
line-height: 1.3em; line-height: 1.3em;
} }
h1.big_heading {
font-size: 7.5rem;
}
h2 { h2 {
font-family: 'Noto Serif'; font-family: 'Noto Serif';
font-size: 2rem; font-size: 2rem;
@ -930,10 +934,8 @@ hr.-even {
grid-template-columns: 3fr 1fr; grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-areas: "cards heading"; grid-template-areas: "cards heading";
/*
row-gap: 1.5rem; margin-bottom: 3rem;
column-gap: 1.5rem;
*/
} }
.services_box h1 { .services_box h1 {
@ -972,6 +974,11 @@ hr.-even {
height: 8rem; height: 8rem;
} }
.services_card__text_box {
font-size: 1.25rem;
line-height: 1.5em;
}
.services_card__text_box h2 { .services_card__text_box h2 {
font-family: "Lato"; font-family: "Lato";
font-size: 1.5rem; font-size: 1.5rem;
@ -980,6 +987,46 @@ hr.-even {
} }
/* services_cards - end */ /* services_cards - end */
/* bubble_gird - start */
.bubble_grid {
margin: 0 1.5rem 0 1.5rem;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 10rem);
}
.bubble_grid__bubble {
align-self: center;
background-color: var(--wtf-nearly-white);
width: 8rem;
height: 8rem;
border-radius: 50%;
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
}
.bubble_grid__bubble img {
max-width: 5rem;
max-height: 5rem;
}
.bubble_grid__card {
grid-column: 1 / span 3;
grid-row: 2 / span 3;
font-size: 1.25rem;
line-height: 1.5em;
background-color: var(--wtf-nearly-white);
padding: 3rem;
margin: 1.5rem
}
/* bubble_gird - end */
.content__box p, .content__box li { .content__box p, .content__box li {
hyphens: auto; hyphens: auto;
} }

View File

@ -55,5 +55,89 @@
</div> </div>
</div> </div>
<div class="content__box">
<div class="content__inner_box">
<h1 class="big_heading">Kompetenzen</h1>
</div>
</div>
<section class="content">
<div class="content__box">
<div class="bubble_grid">
<div class="bubble_grid__bubble">
<img src="/images/logos/Python_logo_and_wordmark.svg" alt="Logo of the Python programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/ISO_C++_Logo.svg'|asseturl }}" alt="Logo of the C++ programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Tux.svg'|asseturl }}" alt="Tux the penguin mascott of Linux">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Unofficial_JavaScript_logo_2.svg'|asseturl }}" alt="Logo of the JavaScript programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/PHP-logo.svg'|asseturl }}" alt="Logo of the PHP programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/C_Programming_Language.svg'|asseturl }}" alt="Logo of the C programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Ansible_logo.svg'|asseturl }}" alt="Logo of the Ansible project">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Postgresql_elephant.svg'|asseturl }}" alt="Logo of the Postgres database">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Java-Logo.svg'|asseturl }}" alt="Logo of the Java programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Rust_programming_language_black_logo.svg'|asseturl }}" alt="Logo of the Rust programming language">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/CSS3_logo_and_wordmark.svg'|asseturl }}" alt="Logo of CSS3">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Debian-OpenLogo.svg'|asseturl }}" alt="Logo of the Debian operating system">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/MySQL_textlogo.svg'|asseturl }}" alt="Logo of the MySQL database">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/Vue.js_Logo_2.svg'|asseturl }}" alt="Logo of the Vue.js framework">
</div>
<div class="bubble_grid__bubble">
<img src="{{ '/images/logos/LaTeX_logo.svg'|asseturl }}" alt="Logo of the LaTeX typesetting language">
</div>
<div class="bubble_grid__card">
<ul>
<li>Agiles Projektmanagement</li>
<li>Barrierefreiheit</li>
<li>Operations</li>
<li>Software-Audits</li>
<li>Softwareentwicklung</li>
<li>Projektmanagement</li>
<li>User Experience</li>
<li>Übersetzung & Internationalisierung (i18n/l10n)</li>
</ul>
</div>
</div>
</div>
</section> </section>
{% endblock %} {% endblock %}