diff --git a/src/css/style.css b/src/css/style.css
index 2804c20d2b80893e2eb4f6f1458a9aa0d9aa1efc..94da1aba07465f5c55509da42362b51d7722e636 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
:root {
--primary: #AC42FF;
--secondary: #F15154;
@@ -13,15 +14,27 @@
}
html {
- scroll-behavior: smooth;
+ scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
+ background-image: url('../img/background.svg');
+ background-size: 250vw;
+ background-position: center;
+ background-repeat: repeat;
+}
+
+.page-container {
+ width: 100%;
+ max-width: 1240px;
+ margin: 0 auto;
+ background: rgba(255, 255, 255, 0.25);
+ backdrop-filter: blur(10px);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-}
+}
\ No newline at end of file
diff --git a/src/img/background.svg b/src/img/background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4b2401a797c1efb06370147ce626042f484d733a
--- /dev/null
+++ b/src/img/background.svg
@@ -0,0 +1,28 @@
+<svg width="3202" height="3055" viewBox="0 0 3202 3055" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f)">
+<circle cx="933.5" cy="1739.5" r="333.5" fill="#AC42FF" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter1_f)">
+<circle cx="2215" cy="878" r="278" fill="#F15154"/>
+</g>
+<g filter="url(#filter2_f)">
+<circle cx="2324" cy="2177" r="278" fill="#7DEFFF"/>
+</g>
+<defs>
+<filter id="filter0_f" x="0" y="806" width="1867" height="1867" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter1_f" x="1337" y="0" width="1756" height="1756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter2_f" x="1446" y="1299" width="1756" height="1756" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="300" result="effect1_foregroundBlur"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/index.html b/src/index.html
index 125a6c2da4a9c80f9274697281d9e5f505269146..88d2901baacb012aed6f91604aab617d01753362 100644
--- a/src/index.html
+++ b/src/index.html
@@ -16,253 +16,255 @@
</head>
<body bgcolor="#f3f3f3">
- <header>
- <font face="monospace">
- <table width="100%" bgcolor="lightgray">
- <tr>
- <td>
- <a href="index.html">
- <img src="img/logo.svg" alt="Logo" width="100" height="35">
- </a>
- </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">
- <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>
- </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>
- </td>
- </tr>
+ <div class="page-container">
+ <header>
+ <font face="monospace">
+ <table width="100%" bgcolor="lightgray">
<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>
+ <a href="index.html">
+ <img src="img/logo.svg" alt="Logo" width="100" height="35">
+ </a>
</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>
- </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>
- </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.
- </td>
- </tr>
- <tr>
- <td colspan="3" height="50" valign="middle">
- <hr>
- </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.
- </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">
+ <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">
<table>
<tr>
<td>
-
- <label for="firstname">Firstname</label> <br>
- <input type="text" required name="firstname" id="firstname">
+ <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>
</td>
<td>
- <label for="lastname">Lastname</label> <br>
- <input type="text" required name="lastname" id="lastname">
+ <div class="icon">🏹</div>
+ <h3>Stay focused</h3>
+ <p>
+ Using the pomodoro technique, Ryoko helps you focus on
+ your tasks without being distracted.
+ </p>
</td>
</tr>
<tr>
<td>
- <label for="email">Email</label> <br>
- <input type="email" required name="email" id="email">
+ <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>
- <label for="subject">Subject</label> <br>
- <input type="text" required name="subject" id="subject">
+ <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 colspan="2">
- <label for="message">Message</label> <br>
- <textarea name="message" required id="message" cols="48" rows="10"></textarea>
+ <td rowspan="3" align="center" valign="top">
+ <img src="img/daniel-planoetscher.jpg" width="200" height="200"
+ alt="Daniel Planötscher"></img>
</td>
+ <th align="left">Daniel Planötscher</th>
+ </tr>
+ <tr>
+ <th align="left">Co-founder & Lead Web Developer</th>
</tr>
<tr>
<td>
- <input type="submit" value="Send">
+ 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" height="50" valign="middle">
+ <hr>
+ </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.
</td>
</tr>
</table>
- </form>
- </section>
- </font>
- </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>
+ </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>
+ </main>
+ <footer>
+ <font face="sans-serif">
+ <br><br><br><br><br><br>
+ <table width="100%" valign="top" cellpadding="10">
+ <tr>
+ <td align="center">
<div>
- © <a href="index.html">ryoko</a>, 2021 <br>
- All rights reserved.
+ <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>
- </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>
- </font>
- </footer>
+ </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>
+ </font>
+ </footer>
+ </div>
</body>
</html>
\ No newline at end of file