Skip to content
Snippets Groups Projects
Commit daf1de65 authored by Bernard Roland (Student Com20)'s avatar Bernard Roland (Student Com20)
Browse files

Reworked the team section

parent 21f2abf6
No related branches found
No related tags found
1 merge request!1Adding css
Hide whitespace changes
Inline Side-by-side
src/css/style.css
+ 63
− 1
View file @ daf1de65
...@@ -32,6 +32,7 @@ body { ...@@ -32,6 +32,7 @@ body {
background-position: center; background-position: center;
background-color: #f9f9f9; background-color: #f9f9f9;
background-repeat: repeat; background-repeat: repeat;
background-attachment: fixed;
color: var(--body-color); color: var(--body-color);
} }
...@@ -58,6 +59,13 @@ h2 { ...@@ -58,6 +59,13 @@ h2 {
h3 { h3 {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: var(--weight-semi-bold); 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 { .intro-section .intro-container {
...@@ -83,6 +91,7 @@ h3 { ...@@ -83,6 +91,7 @@ h3 {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: start; align-items: start;
justify-content: center;
} }
.feature-section .feature-item { .feature-section .feature-item {
...@@ -103,18 +112,71 @@ h3 { ...@@ -103,18 +112,71 @@ h3 {
} }
.feature-section .feature-title { .feature-section .feature-title {
padding: 1rem 0; margin: 1rem 0;
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
.feature-section .feature-list { .feature-section .feature-list {
flex-direction: column; flex-direction: column;
align-items: center;
} }
.feature-section .feature-item { .feature-section .feature-item {
padding: 1.5rem 0; 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 { a {
text-decoration: none; text-decoration: none;
transition: box-shadow 300ms ease; transition: box-shadow 300ms ease;
......
src/index.html
+ 42
− 54
View file @ daf1de65
...@@ -25,9 +25,9 @@ ...@@ -25,9 +25,9 @@
<img src="img/logo.svg" alt="Logo" width="100" height="35"> <img src="img/logo.svg" alt="Logo" width="100" height="35">
</a> </a>
<nav> <nav>
<a href="index.html">Home</a> <a href="#">Home</a>
<a href="index.html#team">Team</a> <a href="#team">Team</a>
<a href="index.html#contact">Contact</a> <a href="#contact">Contact</a>
</nav> </nav>
</header> </header>
<div class="content-container"> <div class="content-container">
...@@ -88,57 +88,45 @@ ...@@ -88,57 +88,45 @@
</div> </div>
</section> </section>
<section class="team-section" id="team"> <section class="team-section" id="team">
<h2>Our Team</h2> <div class="content-container team-container">
<p> <h2>Our Team</h2>
People are what makes a project great, and here are the people that make us <p>
great. People are what makes a project great, and here are the people that make us
</p> great.
<table> </p>
<tr> <div class="team-list">
<td rowspan="3"> <div class="team-member">
<img src="img/daniel-planoetscher.jpg" width="200" height="200" <img class="team-member-image" src="img/daniel-planoetscher.jpg" width="200" height="200" alt="Daniel Planötscher" />
alt="Daniel Planötscher"></img> <div class="team-member-info">
</td> <h3 class="team-member-name">Daniel Planötscher</h3>
<th>Daniel Planötscher</th> <h4 class="team-member-title">Co-founder &amp; Lead Web Developer</h4>
</tr> <div class="team-member-description">
<tr> Besides studying Computer Science, Daniel also enjoys taking photos and
<th>Co-founder &amp; Lead Web Developer</th> designing user interfaces for hobby projects, which is why he focuses on
</tr> the FrontEnd of ryoko. Furthermore, he brings significant industry
<tr> experience working as a web developer using state of the art tools and
<td> programming techniques. He is involved in the creation of modern
Besides studying Computer Science, Daniel also enjoys taking photos and websites for dozens of clients with advanced requirements.
designing user interfaces for hobby projects, which is why he focuses on </div>
the FrontEnd of ryoko. Furthermore, he brings significant industry </div>
experience working as a web developer using state of the art tools and </div>
programming techniques. He is involved in the creation of modern <div class="team-member">
websites for dozens of clients with advanced requirements. <img class="team-member-image" src="img/roland-bernard.jpg" width="200" height="200" alt="Roland Bernard" />
</td> <div class="team-member-info">
</tr> <h3 class="team-member-name">Roland Bernard</h3>
<tr> <h4 class="team-member-title">Co-founder &amp; Lead Software Engineer</h4>
<td colspan="3"> <div class="team-member-description">
<hr> Studying Computer Science and participating in Competitive Programming
</td> Competitions, Roland constitutes a integral part of our development team
</tr> at ryoko. Like all members of our team he also has experience in the
<tr> industry, mainly working on business management systems and software for
<td rowspan="3"> the financial sector. He is also experienced in the implementation of
<img src="img/roland-bernard.jpg" width="200" height="200" alt="Roland Bernard"></img> development tools and infrastructure components.
</td> </div>
<th>Roland Bernard</th> </div>
</tr> </div>
<tr> </div>
<th>Co-founder &amp; Lead Software Engineer</th> </div>
</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>
</section> </section>
<section class="contact-form" id="contact"> <section class="contact-form" id="contact">
<h2>Get in touch</h2> <h2>Get in touch</h2>
......
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