ag_kommunikation
/
webseite
6
4
Fork 5
Code Issues 16 Pull Requests 1 Projects Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
assets/css/style.css
View File

@ -557,6 +557,10 @@ h1 {
line-height: 1.3em;
}
h1.big_heading {
font-size: 7.5rem;
}
h2 {
font-family: 'Noto Serif';
font-size: 2rem;
@ -930,10 +934,8 @@ hr.-even {
grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: "cards heading";
/*
row-gap: 1.5rem;
column-gap: 1.5rem;
*/
margin-bottom: 3rem;
}
.services_box h1 {
@ -972,6 +974,11 @@ hr.-even {
height: 8rem;
}
.services_card__text_box {
font-size: 1.25rem;
line-height: 1.5em;
}
.services_card__text_box h2 {
font-family: "Lato";
font-size: 1.5rem;
@ -980,6 +987,46 @@ hr.-even {
}
/* 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 {
hyphens: auto;
}

84
templates/about_page.html
View File

@ -55,5 +55,89 @@
</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>
{% endblock %}