diff --git a/src/index.html b/src/index.html
index 88d2901baacb012aed6f91604aab617d01753362..de503f68b2eef33d3d1fbb04f4113212844ae790 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,256 +15,232 @@
<title>ryoko | plan your projects like a journey</title>
</head>
-<body bgcolor="#f3f3f3">
+<body>
<div class="page-container">
<header>
- <font face="monospace">
- <table width="100%" bgcolor="lightgray">
+ <table>
+ <tr>
+ <td>
+ <a href="index.html">
+ <img src="img/logo.svg" alt="Logo" width="100" height="35">
+ </a>
+ </td>
+ <th>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="index.html#team">Team</a>
+ <a href="index.html#contact">Contact</a>
+ </nav>
+ </th>
+ </table>
+ </header>
+ <main>
+ <section class="hero-section">
+ <img src="img/header.jpg" alt="Header">
+ <h1>ryoko</h1>
+ <h2>Plan your projects like a journey!</h2>
+ <p>
+ Are you feeling lost with your tasks? Maximize your productivity now with ryoko.
+ <a href="#intro">Get started</a>
+ </p>
+ </section>
+ <section class="intro-section" id="intro">
+ <table>
<tr>
<td>
- <a href="index.html">
- <img src="img/logo.svg" alt="Logo" width="100" height="35">
- </a>
+ <img src="img/product-preview.jpg" alt="Product preview" width="400" height="376">
+ </td>
+ <td>
+ <h2>Collaboration made easy with ryoko!</h2>
+ <p>
+ Do you want to boost your productivity and agility of your
+ development? <br>
+ With ryoko you are able to effectively plan your tasks
+ and manage your projects. It is build with developers in mind and
+ facilitates effective collaboration.
+ </p>
</td>
- <th width="100%" align="right">
- <nav>
- <a href="index.html">Home</a>
- <a href="index.html#team">Team</a>
- <a href="index.html#contact">Contact</a>
-
- </nav>
- </th>
</tr>
</table>
- <hr>
- </font>
- </header>
- <main>
- <font face="sans-serif">
- <section class="hero-section">
- <img src="img/header.jpg" alt="Header" width="100%">
- <br>
- <br>
- <h1 align="center">ryoko</h1>
- <h2 align="center">Plan your projects like a journey!</h2>
- <p align="center">
- Are you feeling lost with your tasks? Maximize your productivity now with ryoko.
- <br>
- <br>
- <a href="#intro">Get started</a>
- </p>
- </section>
- <br><br><br><br>
- <section class="intro-section" id="intro">
+ </section>
+ <section class="feature-section">
+ <h2>Revolutionize your productivity</h2>
+ <table>
+ <tr>
+ <td>
+ <h3>Automatic timetables</h3>
+ <p>
+ Generate your automatic timetables based on priorities and depencies of your tasks
+ </p>
+ </td>
+ <td>
+ <h3>Keep track of your breaks</h3>
+ <p>
+ Ryoko plans your breaks automatically to prevent you from
+ getting lost in work.
+ </p>
+ </td>
+ <td>
+ <h3>Stay focused</h3>
+ <p>
+ Using the pomodoro technique, Ryoko helps you focus on
+ your tasks without being distracted.
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <h3>Teambased</h3>
+ <p>
+ Seperate task within your teams based on the profession and
+ difficulty.
+ </p>
+ </td>
+ <td>
+ <h3>Analyze your productivity</h3>
+ <p>
+ Find your weaknesses and the most timeconsuming tasks
+ by analyzing graphs.
+ </p>
+ </td>
+ <td>
+ <h3>Reach your goals</h3>
+ <p>
+ Use your time more effectively with ryoko.
+ </p>
+ </td>
+ </tr>
+ </table>
+ </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>
+ </section>
+ <section class="contact-form" id="contact">
+ <h2>Get in touch</h2>
+ <p>
+ Do you still have a question? Just contact us directly and we will be glad
+ to help you resolve the issue.
+ </p>
+ <form action="mailto:dplanoetscher@unibz.it" method="POST">
<table>
<tr>
<td>
- <img src="img/product-preview.jpg" alt="Product preview" width="400" height="376">
- </td>
- <td cellpadding="50px">
- <h2>Collaboration made easy with ryoko!</h2>
- <p>
- Do you want to boost your productivity and agility of your
- development? <br>
- With ryoko you are able to effectively plan your tasks
- and manage your projects. It is build with developers in mind and
- facilitates effective collaboration.
- </p>
- </td>
- </tr>
- </table>
- </section>
- <br><br><br><br>
- <section class="feature-section">
- <h2 align="center">Revolutionize your productivity</h2>
- <table border="1" cellspacing="0" cellpadding="20px" valign="top">
- <tr>
- <td>
- <div class="icon">🕘</div>
- <h3>Automatic timetables</h3>
- <p>
- Generate your automatic timetables based on priorities and depencies of your tasks
- </p>
- </td>
- <td>
- <div class="icon">😌</div>
- <h3>Keep track of your breaks</h3>
- <p>
- Ryoko plans your breaks automatically to prevent you from
- getting lost in work.
- </p>
+
+ <label for="firstname">Firstname</label> <br>
+ <input type="text" required name="firstname" id="firstname">
</td>
<td>
- <div class="icon">🏹</div>
- <h3>Stay focused</h3>
- <p>
- Using the pomodoro technique, Ryoko helps you focus on
- your tasks without being distracted.
- </p>
+ <label for="lastname">Lastname</label> <br>
+ <input type="text" required name="lastname" id="lastname">
</td>
</tr>
<tr>
<td>
- <div class="icon">👪</div>
- <h3>Teambased</h3>
- <p>
- Seperate task within your teams based on the profession and
- difficulty.
- </p>
- </td>
- <td>
- <div class="icon">📈</div>
- <h3>Analyze your productivity</h3>
- <p>
- Find your weaknesses and the most timeconsuming tasks
- by analyzing graphs.
- </p>
- </td>
- <td>
- <div class="icon">🏋</div>
- <h3>Reach your goals</h3>
- <p>
- Use your time more effectively with ryoko.
- </p>
- </td>
- </tr>
- </table>
- </section>
- <br><br><br><br>
- <section class="team-section" id="team">
- <h2 align="center">Our Team</h2>
- <p align="center">
- People are what makes a project great, and here are the people that make us
- great.
- </p><br><br>
- <table width="100%" cellpadding="10">
- <tr>
- <td rowspan="3" align="center" valign="top">
- <img src="img/daniel-planoetscher.jpg" width="200" height="200"
- alt="Daniel Planötscher"></img>
+ <label for="email">Email</label> <br>
+ <input type="email" required name="email" id="email">
</td>
- <th align="left">Daniel Planötscher</th>
- </tr>
- <tr>
- <th align="left">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.
+ <label for="subject">Subject</label> <br>
+ <input type="text" required name="subject" id="subject">
</td>
</tr>
<tr>
- <td colspan="3" height="50" valign="middle">
- <hr>
+ <td colspan="2">
+ <label for="message">Message</label> <br>
+ <textarea name="message" required id="message" cols="48" rows="10"></textarea>
</td>
</tr>
- <tr>
- <td rowspan="3" align="center" valign="top">
- <img src="img/roland-bernard.jpg" width="200" height="200" alt="Roland Bernard"></img>
- </td>
- <th align="left">Roland Bernard</th>
- </tr>
- <tr>
- <th align="left">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.
+ <input type="submit" value="Send">
</td>
</tr>
</table>
- </section>
- <br><br><br><br>
- <section class="contact-form" id="contact">
- <h2>Get in touch</h2>
- <p>
- Do you still have a question? Just contact us directly and we will be glad
- to help you resolve the issue.
- </p>
- <form action="mailto:dplanoetscher@unibz.it" method="POST">
- <table>
- <tr>
- <td>
-
- <label for="firstname">Firstname</label> <br>
- <input type="text" required name="firstname" id="firstname">
- </td>
- <td>
- <label for="lastname">Lastname</label> <br>
- <input type="text" required name="lastname" id="lastname">
- </td>
- </tr>
- <tr>
- <td>
- <label for="email">Email</label> <br>
- <input type="email" required name="email" id="email">
- </td>
- <td>
- <label for="subject">Subject</label> <br>
- <input type="text" required name="subject" id="subject">
- </td>
- </tr>
- <tr>
- <td colspan="2">
- <label for="message">Message</label> <br>
- <textarea name="message" required id="message" cols="48" rows="10"></textarea>
- </td>
- </tr>
- <tr>
- <td>
- <input type="submit" value="Send">
- </td>
- </tr>
- </table>
- </form>
- </section>
- </font>
+ </form>
+ </section>
</main>
<footer>
- <font face="sans-serif">
- <br><br><br><br><br><br>
- <table width="100%" valign="top" cellpadding="10">
- <tr>
- <td align="center">
- <div>
- <img src="img/logo.svg" alt="Logo" width="70" height="24"> <br>
- <div>
- © <a href="index.html">ryoko</a>, 2021 <br>
- All rights reserved.
- </div>
- </div>
- </td>
- <td>
+ <table>
+ <tr>
+ <td>
+ <div>
+ <img src="img/logo.svg" alt="Logo" width="70" height="24"> <br>
<div>
- <h3>Find out more!</h3>
- <ul>
- <li>
- <a href="index.html">Home</a>
- </li>
- <li>
- <a href="index.html#team">Team</a>
- </li>
- <li>
- <a href="index.html#contact">Contact</a>
- </li>
- </ul>
+ © <a href="index.html">ryoko</a>, 2021 <br>
+ All rights reserved.
</div>
- </td>
- </tr>
- </table>
- </font>
+ </div>
+ </td>
+ <td>
+ <div>
+ <h3>Find out more!</h3>
+ <ul>
+ <li>
+ <a href="index.html">Home</a>
+ </li>
+ <li>
+ <a href="index.html#team">Team</a>
+ </li>
+ <li>
+ <a href="index.html#contact">Contact</a>
+ </li>
+ </ul>
+ </div>
+ </td>
+ </tr>
+ </table>
</footer>
</div>
</body>
-</html>
\ No newline at end of file
+</html>