From daf1de65200ee01296c50828923c725ae3d4c2d6 Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Mon, 5 Apr 2021 18:19:24 +0200
Subject: [PATCH] Reworked the team section
---
src/css/style.css | 64 ++++++++++++++++++++++++++++++-
src/index.html | 96 +++++++++++++++++++++--------------------------
2 files changed, 105 insertions(+), 55 deletions(-)
diff --git a/src/css/style.css b/src/css/style.css
index b6f5bca..fb469da 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -32,6 +32,7 @@ body {
background-position: center;
background-color: #f9f9f9;
background-repeat: repeat;
+ background-attachment: fixed;
color: var(--body-color);
}
@@ -58,6 +59,13 @@ h2 {
h3 {
font-size: 1.5rem;
font-weight: var(--weight-semi-bold);
+ margin-bottom: 1rem;
+}
+
+h4 {
+ font-size: 1.25rem;
+ font-weight: var(--weight-semi-bold);
+ margin-bottom: 1rem;
}
.intro-section .intro-container {
@@ -83,6 +91,7 @@ h3 {
flex-direction: row;
flex-wrap: nowrap;
align-items: start;
+ justify-content: center;
}
.feature-section .feature-item {
@@ -103,18 +112,71 @@ h3 {
}
.feature-section .feature-title {
- padding: 1rem 0;
+ margin: 1rem 0;
}
@media screen and (max-width: 750px) {
.feature-section .feature-list {
flex-direction: column;
+ align-items: center;
}
.feature-section .feature-item {
padding: 1.5rem 0;
}
}
+.team-section .team-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 5rem auto;
+ text-align: center;
+}
+
+.team-section .team-list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.team-section .team-member {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: center;
+ margin: 3rem 0;
+}
+
+.team-section .team-member-image {
+ margin-right: 3rem;
+ border-radius: 50%;
+}
+
+.team-section .team-member-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: left;
+ text-align: left;
+}
+
+@media screen and (max-width: 750px) {
+ .team-section .team-member-image {
+ margin-right: 0;
+ margin-bottom: 3rem;
+ }
+ .team-section .team-member {
+ flex-direction: column;
+ }
+ .team-section .team-member-info {
+ align-items: center;
+ text-align: center;
+ }
+}
+
a {
text-decoration: none;
transition: box-shadow 300ms ease;
diff --git a/src/index.html b/src/index.html
index 1c0d7db..9d153ee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,9 +25,9 @@
<img src="img/logo.svg" alt="Logo" width="100" height="35">
</a>
<nav>
- <a href="index.html">Home</a>
- <a href="index.html#team">Team</a>
- <a href="index.html#contact">Contact</a>
+ <a href="#">Home</a>
+ <a href="#team">Team</a>
+ <a href="#contact">Contact</a>
</nav>
</header>
<div class="content-container">
@@ -88,57 +88,45 @@
</div>
</section>
<section class="team-section" id="team">
- <h2>Our Team</h2>
- <p>
- People are what makes a project great, and here are the people that make us
- great.
- </p>
- <table>
- <tr>
- <td rowspan="3">
- <img src="img/daniel-planoetscher.jpg" width="200" height="200"
- alt="Daniel Planötscher"></img>
- </td>
- <th>Daniel Planötscher</th>
- </tr>
- <tr>
- <th>Co-founder & Lead Web Developer</th>
- </tr>
- <tr>
- <td>
- Besides studying Computer Science, Daniel also enjoys taking photos and
- designing user interfaces for hobby projects, which is why he focuses on
- the FrontEnd of ryoko. Furthermore, he brings significant industry
- experience working as a web developer using state of the art tools and
- programming techniques. He is involved in the creation of modern
- websites for dozens of clients with advanced requirements.
- </td>
- </tr>
- <tr>
- <td colspan="3">
- <hr>
- </td>
- </tr>
- <tr>
- <td rowspan="3">
- <img src="img/roland-bernard.jpg" width="200" height="200" alt="Roland Bernard"></img>
- </td>
- <th>Roland Bernard</th>
- </tr>
- <tr>
- <th>Co-founder & Lead Software Engineer</th>
- </tr>
- <tr>
- <td>
- Studying Computer Science and participating in Competitive Programming
- Competitions, Roland constitutes a integral part of our development team
- at ryoko. Like all members of our team he also has experience in the
- industry, mainly working on business management systems and software for
- the financial sector. He is also experienced in the implementation of
- development tools and infrastructure components.
- </td>
- </tr>
- </table>
+ <div class="content-container team-container">
+ <h2>Our Team</h2>
+ <p>
+ People are what makes a project great, and here are the people that make us
+ great.
+ </p>
+ <div class="team-list">
+ <div class="team-member">
+ <img class="team-member-image" src="img/daniel-planoetscher.jpg" width="200" height="200" alt="Daniel Planötscher" />
+ <div class="team-member-info">
+ <h3 class="team-member-name">Daniel Planötscher</h3>
+ <h4 class="team-member-title">Co-founder & Lead Web Developer</h4>
+ <div class="team-member-description">
+ Besides studying Computer Science, Daniel also enjoys taking photos and
+ designing user interfaces for hobby projects, which is why he focuses on
+ the FrontEnd of ryoko. Furthermore, he brings significant industry
+ experience working as a web developer using state of the art tools and
+ programming techniques. He is involved in the creation of modern
+ websites for dozens of clients with advanced requirements.
+ </div>
+ </div>
+ </div>
+ <div class="team-member">
+ <img class="team-member-image" src="img/roland-bernard.jpg" width="200" height="200" alt="Roland Bernard" />
+ <div class="team-member-info">
+ <h3 class="team-member-name">Roland Bernard</h3>
+ <h4 class="team-member-title">Co-founder & Lead Software Engineer</h4>
+ <div class="team-member-description">
+ Studying Computer Science and participating in Competitive Programming
+ Competitions, Roland constitutes a integral part of our development team
+ at ryoko. Like all members of our team he also has experience in the
+ industry, mainly working on business management systems and software for
+ the financial sector. He is also experienced in the implementation of
+ development tools and infrastructure components.
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</section>
<section class="contact-form" id="contact">
<h2>Get in touch</h2>
--
GitLab