diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..aee51fd73726a7ee72329880bb06c7d0ce44907d
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,760 @@
+@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;
+ --accent: #7DEFFF;
+ --linear-gradient: linear-gradient(to bottom, var(--secondary), var(--primary));
+ --radial-gradient: radial-gradient(100% 115% at 0% 0%, var(--primary) 0%, var(--secondary) 100%);
+ --weight-light: 300;
+ --weight-regular: 400;
+ --weight-medium: 500;
+ --weight-semi-bold: 600;
+ --weight-bold: 700;
+ --body-color: #4B4B4B;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+a {
+ font-weight: var(--weight-bold);
+ color: var(--primary);
+ transition: 300ms ease;
+ text-decoration: none;
+}
+
+a:hover {
+ color: rgba(172, 66, 255, 0.5);
+}
+
+section {
+ margin-bottom: 70px;
+}
+
+.content-container {
+ max-width: 1280px;
+ width: 100%;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+body {
+ font-family: 'Poppins', sans-serif;
+ background-color: #f9f9f9;
+ position: relative;
+ color: var(--body-color);
+ background: linear-gradient(to left, #e2e2e2 0%, #e6e6e6 100%);
+}
+
+.page-container {
+ max-width: 1440px;
+ margin: 0 auto;
+ background: rgba(255, 255, 255, 0.4);
+ backdrop-filter: blur(30px);
+}
+
+h1 {
+ font-size: 2rem;
+ font-weight: var(--weight-bold);
+ margin-bottom: 20px;
+}
+
+h2 {
+ font-size: 1.75rem;
+ font-weight: var(--weight-bold);
+ margin-bottom: 1rem;
+}
+
+h2.left {
+ text-align: left;
+ max-width: none;
+}
+
+h3 {
+ font-size: 1.25rem;
+ font-weight: var(--weight-bold);
+ margin-bottom: 0.75rem;
+}
+
+h4 {
+ font-size: 1rem;
+ font-weight: var(--weight-semi-bold);
+ margin-bottom: 0.75rem;
+}
+
+@media screen and (min-width: 960px) {
+ h1 {
+ font-size: 3rem;
+ margin-bottom: 30px;
+ }
+
+ h2 {
+ font-size: 2.25rem;
+ margin: 0 auto 2rem auto;
+ max-width: 560px;
+ text-align: center;
+ }
+
+ h3 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ }
+
+ h4 {
+ font-size: 1.25rem;
+ margin-bottom: 1rem;
+ }
+}
+
+.intro-section .text-container {
+ padding-right: 10%;
+ margin-bottom: 50px;
+}
+
+.intro-section .preview-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba(255, 255, 255, .5);
+ border-radius: 25px;
+ padding: 40px;
+}
+
+
+
+@keyframes move-up {
+ 5%,
+ 35% {
+ transform: translateY(0);
+ box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05);
+ }
+
+ 10%,
+ 30% {
+ transform: translateY(-10px);
+ box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15);
+ }
+}
+
+.project {
+ border-radius: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 20px 24px 10px 24px;
+ text-align: center;
+ background: radial-gradient(100% 100% at 4.43% 0.11%, rgba(255, 255, 255, 0.8) 0%, rgba(252, 249, 255, 0.8) 100%);
+ box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.05);
+ animation: move-up 9s ease-in infinite;
+ position: relative;
+}
+
+.intro-section .project-overview {
+ display: grid;
+ grid-gap: 20px;
+ grid-template-areas:
+ 'small-1 large'
+ 'small-2 large';
+}
+
+.small-1 {
+ grid-area: small-1;
+}
+
+.small-2 {
+ grid-area: small-2;
+ animation-delay: 3s;
+
+}
+
+.large {
+ grid-area: large;
+ animation-delay: 6s;
+}
+
+.project .tag {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-weight: var(--weight-bold);
+ font-size: 12px;
+ padding: 3px 10px;
+ background: radial-gradient(100% 1892.25% at 0% 0%, #AC42FF 0%, #8A24DA 100%);
+ color: #fff;
+ border-radius: 5px;
+}
+
+.tag .icon {
+ font-size: 13px;
+ margin-right: 4px;
+ line-height: 1;
+}
+
+.project .tag.red {
+ background: radial-gradient(100% 1892.25% at 0% 0%, #F15154 0%, #DA2E31 100%);
+}
+
+.project .title {
+ margin-top: 10px;
+ line-height: 1.4;
+ font-size: 12px;
+ font-weight: var(--weight-bold);
+}
+
+.project svg {
+ width: 70px;
+ height: 70px;
+}
+
+.project .graph {
+ position: relative;
+ height: 70px;
+}
+
+.project .percent {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ line-height: 1;
+ font-weight: var(--weight-bold);
+ font-size: 14px;
+}
+
+.project .info {
+ font-size: 12px;
+ margin-top: 16px;
+ line-height: 1.8;
+}
+
+.project path {
+ width: 70px;
+ height: 70px;
+ stroke-width: 8;
+ stroke-linecap: round;
+ stroke: url(#gradient);
+ fill: none;
+}
+
+.project circle {
+ fill: none;
+ stroke: #dcdcdc;
+ stroke-width: 8;
+}
+
+@media screen and (min-width: 890px) {
+ .intro-section .intro-container {
+ display: flex;
+ align-items: center;
+ }
+
+ .intro-section .intro-container .text-container {
+ flex-grow: 1;
+ }
+
+ .intro-section .text-container {
+ margin-bottom: 0;
+ }
+
+ section {
+ margin-bottom: 180px;
+ }
+
+ .intro-section .preview-container {
+ padding: 110px;
+ }
+
+ .project-overview .project-small {
+ width: 150px;
+ height: 150px;
+ }
+
+ .project-overview .project-large {
+ width: 150px;
+ height: 330px;
+ }
+
+ .intro-section .project-overview {
+ grid-gap: 30px;
+ }
+}
+
+.feature-section .feature-container {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ justify-content: center;
+ margin: 5rem auto;
+}
+
+.feature-section .feature-list {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: start;
+ justify-content: center;
+ margin-top: 10px;
+}
+
+.feature-section .feature-item {
+ flex: 1 1 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding: 20px;
+ width: 100%
+}
+
+.feature-section .feature-icon {
+ background: var(--radial-gradient);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ font-size: 5rem;
+}
+
+.feature-section .feature-title {
+ 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-list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+.team-section .team-member {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: center;
+ text-align: left;
+ margin: 3rem 0;
+}
+
+.team-section .team-member-title {
+ font-size: 14px;
+ font-weight: var(--weight-bold);
+ display: inline-block;
+ padding: 2px 10px;
+ text-transform: uppercase;
+ background: radial-gradient(100% 1892.25% at 0% 0%, #AC42FF 0%, #8A24DA 100%);
+ letter-spacing: 0.5px;
+ margin-bottom: 10px;
+ color: #fff;
+ border-radius: 5px;
+}
+
+.team-section .team-member-image {
+ margin-right: 3rem;
+ border-radius: 50%;
+}
+
+@media screen and (max-width: 750px) {
+ .team-section .team-member-image {
+ margin-right: 0;
+ margin-bottom: 3rem;
+ }
+
+ .team-section .team-member {
+ flex-direction: column;
+ }
+}
+
+@media screen and (min-width: 960px) {
+ .team-section .team-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: 5rem auto;
+ text-align: center;
+ }
+
+ .feature-section .feature-container {
+ align-items: center;
+ }
+}
+
+.contact-section .contact-container {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+}
+
+.contact-section .contact-form {
+ margin-top: 2rem;
+ display: flex;
+ width: 100%;
+ flex-wrap: wrap;
+ max-width: 960px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.contact-section .submit-button {
+ appearance: none;
+ border: none;
+ margin: 0.5rem;
+}
+
+@media screen and (max-width: 600px) {
+ .contact-section .contact-form-input {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .contact-section .contact-fields {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+}
+
+footer .footer-container {
+ padding: 100px 0;
+}
+
+footer .footer-copyright {
+ flex: 1 1 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+footer .logo {
+ margin-bottom: 10px;
+}
+
+
+footer .footer-nav {
+ flex: 1 1 100%;
+ display: flex;
+ justify-content: center;
+ margin-top: 30px;
+}
+
+footer .footer-nav a {
+ padding: 5px 10px;
+}
+
+.button {
+ padding: 14px 50px;
+ font-size: 18px;
+ font-weight: var(--weight-bold);
+ background: radial-gradient(60% 100% at 50% 0%, #D298FF 0.01%, var(--primary) 100%);
+ box-shadow: 0px 5px 15px rgba(172, 66, 255, 0.25);
+ border-radius: 25px;
+ display: inline-block;
+ color: #fff;
+ transition: 300ms ease;
+}
+
+.button:hover {
+ box-shadow: 0px 10px 25px rgba(172, 66, 255, 0.35);
+ cursor: pointer;
+ color: #fff;
+ transform: translateY(-5%);
+}
+
+.button:active {
+ transform: scale(0.9);
+}
+
+section.darker {
+ padding: 30px 0;
+ color: #f1f1f1;
+ background: linear-gradient(180deg, #2E313B 0.01%, #0C0E18 100%);
+}
+
+@media screen and (min-width: 960px) {
+ section.darker {
+ margin: 0 75px;
+ padding: 75px 0;
+ border-radius: 25px;
+ }
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+header {
+ display: flex;
+ align-items: center;
+ padding: 20px;
+}
+
+nav a {
+ color: var(--body-color);
+ font-weight: var(--weight-bold);
+ margin-left: 40px;
+ display: none;
+}
+
+.hero-section {
+ position: relative;
+}
+
+.hero-section .text-container {
+ position: relative;
+ z-index: 2;
+ padding-bottom: 30px;
+ font-size: 18px;
+}
+
+.hero-section .button-container {
+ margin-top: 40px;
+}
+
+.hero-section .hero-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.hero-section .preview-container {
+ width: 50%;
+ display: flex;
+ justify-content: center;
+ margin: 20px 0;
+ padding: 30px 0;
+ border-top-right-radius: 25px;
+ border-bottom-right-radius: 25px;
+ background: var(--linear-gradient);
+}
+
+.hero-section .preview-phone {
+ transform: translate(50%, 0%);
+ width: 75vw;
+}
+
+.preview-phone .inner {
+ padding-bottom: 177.77777777778%;
+ background: url('../img/screen-design.jpg');
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ background-position: top left;
+ width: 100%;
+ border: 7px solid #303030;
+ border-radius: 25px;
+ box-shadow: 0 0 40px rgba(0, 0, 0, .15);
+}
+
+.preview-phone .inner:before {
+ content: ' ';
+ position: absolute;
+ width: 25%;
+ height: 20px;
+ background: #303030;
+ left: 50%;
+ top: 2px;
+ border-radius: 5px;
+ transform: translateX(-50%);
+}
+
+
+@media screen and (min-width: 500px) {
+ .hero-section .preview-container {
+ right: 0;
+ height: 100%;
+ width: 40%;
+ top: 0;
+ border-bottom-left-radius: 50px;
+ position: absolute;
+ margin: 0;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ header {
+ padding-top: 80px;
+ }
+
+ .hero-section .preview-phone {
+ left: 0;
+ top: 50%;
+ transform: translate(-20%, -50%);
+ position: absolute;
+ width: 200px;
+ }
+
+ .hero-section .text-container {
+ width: 50%;
+ }
+}
+
+@media screen and (min-width: 860px) {
+ nav a {
+ display: inline-block;
+ }
+
+
+ .hero-section .hero-container {
+ height: calc(100vh - 0.5rem);
+ }
+
+
+ .hero-section .preview-phone {
+ left: 0;
+ transform: translate(-30%, -50%);
+ top: 50%;
+ width: 300px;
+ }
+
+ .hero-section .preview-phone .inner {
+ border-width: 10px;
+ }
+
+ .hero-section .text-container {
+ width: 30%;
+ padding-bottom: 160px;
+ }
+}
+
+@media screen and (min-width: 1480px) {
+ header {
+ padding-top: 80px;
+ padding-left: 90px;
+ }
+
+ body {
+ padding: 5rem 0;
+ }
+
+ .hero-section .preview-container {
+ width: 45%;
+ }
+
+
+ .hero-section .hero-container {
+ height: calc(100vh - 6rem);
+ }
+}
+
+.background-container {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0;
+ top: 0;
+ z-index: -1;
+ overflow: hidden;
+}
+
+.background-container .bubble {
+ width: 400px;
+ height: 400px;
+ position: absolute;
+ filter: blur(200px);
+ opacity: 0.75;
+}
+
+@media screen and (min-width: 1480px) {
+ .background-container .bubble {
+ width: 500px;
+ height: 500px;
+ filter: blur(200px);
+ }
+}
+
+.bubble.secondary {
+ background: var(--secondary);
+}
+
+.bubble.primary {
+ background: var(--primary);
+}
+
+.bubble.accent {
+ background: var(--accent);
+}
+
+.contact-field {
+ position: relative;
+ margin: 20px 0 30px 0;
+ padding: 0 5px;
+ width: 100%;
+}
+
+@media screen and (min-width: 640px) {
+ .contact-field {
+ width: 50%;
+ }
+}
+
+.contact-field:before {
+ content: ' ';
+ position: absolute;
+ left: 5px;
+ top: 10px;
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 15px;
+ filter: blur(10px);
+}
+
+.contact-field.textarea {
+ width: 100%;
+}
+
+.contact-form .button-container {
+ display: flex;
+ width: 100%;
+ justify-content: flex-end;
+}
+
+label {
+ font-size: 16px;
+ position: absolute;
+ left: 20px;
+ font-weight: var(--weight-bold);
+ z-index: 20;
+ transform: translateY(-50%);
+
+}
+
+textarea {
+ resize: none;
+}
+
+input,
+textarea {
+ width: 100%;
+ font-size: 16px;
+ border: none;
+ padding: 20px;
+ outline: none;
+ border-radius: 15px;
+ position: relative;
+ display: block;
+ border-radius: 15px;
+ color: #fff;
+ font-weight: var(--weight-regular);
+ font-family: 'Poppins', sans-serif;
+ background: rgba(255, 255, 255, 0.1);
+}
diff --git a/src/img/header.jpg b/src/img/header.jpg
deleted file mode 100644
index dfbb4c15bde8e70d02df2dc4b5252702d67b868a..0000000000000000000000000000000000000000
Binary files a/src/img/header.jpg and /dev/null differ
diff --git a/src/img/product-preview.jpg b/src/img/product-preview.jpg
deleted file mode 100644
index 7e638949f22aab280fe092b95a0fa8c2be4c8eb4..0000000000000000000000000000000000000000
Binary files a/src/img/product-preview.jpg and /dev/null differ
diff --git a/src/img/screen-design.jpg b/src/img/screen-design.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..918b3d9569cd9f63001cf2dd32b0c35280deefa4
Binary files /dev/null and b/src/img/screen-design.jpg differ
diff --git a/src/index.html b/src/index.html
index 4dc943b6e172686c3a3b9cea3e770e968a51f101..ec8a417599931230076bf79c3196431c625ca4fb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,56 +11,47 @@
<meta property="og:image" content="img/header.jpg">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="css/style.css">
<title>ryoko | plan your projects like a journey</title>
</head>
-<body bgcolor="#f3f3f3">
- <header>
- <font face="monospace">
- <table width="100%" bgcolor="lightgray">
- <tr>
- <td>
+<body>
+ <div class="page-container">
+ <main>
+ <section class="hero-section" id="hero">
+ <div class="hero-container">
+ <header>
<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>
-
+ <a href="#hero">Home</a>
+ <a href="#team">Team</a>
+ <a href="#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>
+ </header>
+ <div class="preview-container">
+ <div class="preview-phone">
+ <div class="inner">
+ </div>
+ </div>
+ </div>
+ <div class="content-container">
+ <div class="text-container">
+ <h1>ryoko</h1>
+ <p>Are you feeling lost with your tasks? Maximize your productivity now with ryoko.</p>
+ <div class="button-container">
+ <a href="#intro" class="button">Get started</a>
+ </div>
+ </div>
+ </div>
+ </div>
</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>
+ <div class="content-container">
+ <div class="intro-container">
+ <div class="text-container">
+ <h2 class="left">Plan your projects like a journey!</h2>
<p>
Do you want to boost your productivity and agility of your
development? <br>
@@ -68,200 +59,209 @@
and manage your projects. It is build with developers in mind and
facilitates effective collaboration.
</p>
- </td>
- </tr>
- </table>
+ </div>
+ <div class="preview-container">
+ <div class="project-overview">
+ <div class="project project-small small-1">
+ <span class="tag">
+ <span class="icon material-icons">
+ work
+ </span>
+ Open
+ </span>
+ <div class="graph">
+ <svg>
+ <circle cx="35" cy="35" r="30" />
+ <path d=" M 35 5 A 30 30 0 1 1 20 9" />
+ <defs>
+ <linearGradient xmlns="http://www.w3.org/2000/svg" id="gradient"
+ x1="37.0361" y1="73.1719" x2="36.5" y2="0.500001"
+ gradientUnits="userSpaceOnUse">
+ <stop stop-color="#AC42FF" />
+ <stop offset="1" stop-color="#F15154" />
+ </linearGradient>
+ </defs>
+ </svg>
+ <div class="percent">95%</div>
+ </div>
+ <div class="title">Website relaunch</div>
+ </div>
+ <div class="project project-small small-2">
+ <span class="tag red">
+ <span class="material-icons icon">
+ watch_later
+ </span>
+ Suspended
+ </span>
+ <div class="graph">
+ <svg>
+ <circle cx="35" cy="35" r="30" />
+ <path d=" M 36 5 A 30 30 0 0 1 41 64" />
+ </svg>
+ <div class="percent">47%</div>
+ </div>
+ <div class="title">Shopping List App</div>
+ </div>
+ <div class="project project-large large">
+ <span class="tag">
+ <span class="icon material-icons">
+ work
+ </span>
+ Open
+ </span>
+ <div class="graph">
+ <svg>
+ <circle cx="35" cy="35" r="30" />
+ <path d=" M 35 5 A 30 30 0 1 1 5 35" />
+ </svg>
+ <div class="percent">75%</div>
+ </div>
+ <div class="info">
+ <div class="title">Recipe Finder</div>
+ 30h / 40h
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</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>
- <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>
+ <div class="content-container feature-container">
+ <h2>Revolutionize your productivity</h2>
+ <div class="feature-list">
+ <div class="feature-item">
+ <span class="feature-icon material-icons">query_stats</span>
+ <h3 class="feature-title">Analyze your productivity</h3>
+ <div class="feature-description">
+ Find your <strong>weaknesses and strengths</strong> by analyzing graphs
+ </div>
+ </div>
+ <div class="feature-item">
+ <span class="feature-icon material-icons">event</span>
+ <h3 class="feature-title">Automatic timetables</h3>
+ <div class="feature-description">
+ Generate your automatic timetables based on <strong>priorities and depencies</strong> of
+ your tasks
+ </div>
+ </div>
+ <div class="feature-item">
+ <span class="feature-icon material-icons">group</span>
+ <h3 class="feature-title">Teambased</h3>
+ <div class="feature-description">
+ Distribute task within your Teams based on <strong>profession and difficulty</strong>
+ </div>
+ </div>
+ </div>
+ </div>
</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">
- <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>
- <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 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">
+ <div class="team-member-title">Web Developer</div>
+ <h3 class="team-member-name">Daniel PlanĂśtscher</h3>
+ <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>
- </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 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">
+ <h4 class="team-member-title">Software Engineer</h4>
+ <h3 class="team-member-name">Roland Bernard</h3>
+ <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-section darker" id="contact">
+ <div class="content-container contact-container">
+ <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 class="contact-form" action="mailto:dplanoetscher@unibz.it" method="GET">
+ <div class="contact-field">
+ <label for="firstname">Firstname</label>
+ <input type="text" required name="firstname" id="firstname">
+ </div>
+ <div class="contact-field">
+ <label for="lastname">Lastname</label>
+ <input type="text" required name="lastname" id="lastname">
+ </div>
+ <div class="contact-field">
+ <label for="email">Email</label>
+ <input type="email" required name="email" id="email">
</div>
- </td>
- </tr>
- </table>
- </font>
- </footer>
+ <div class="contact-field">
+ <label for="subject">Subject</label>
+ <input type="text" required name="subject" id="subject">
+ </div>
+ <div class="contact-field textarea">
+ <label for="message">Message</label>
+ <textarea name="message" required id="message" cols="48" rows="13"></textarea>
+ </div>
+ <div class="button-container">
+ <button class="button submit-button" type="submit">Send</button>
+ </div>
+ </form>
+ </div>
+ </section>
+ </main>
+ <footer>
+ <div class="content-container footer-container">
+ <div class="footer-copyright">
+ <img src="img/logo.svg" class="logo" alt="Logo" width="70" height="24">
+ <p>
+ © <a href="index.html">ryoko</a>, 2021
+ </p>
+ <p>
+ All rights reserved.
+ </p>
+ </div>
+ <div class="footer-nav">
+ <a href="#hero">Home</a>
+ <a href="#team">Team</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+ </footer>
+ </div>
+ <div class="background-container">
+ <div class="bubble secondary" style="top: 0; right: 0;"></div>
+ <div class="bubble primary" style="top: 20%; left: 0;"></div>
+ <div class="bubble accent" style="top: 32%; right: 5%;"></div>
+ <div class="bubble primary" style="top: 50%; right: 20%;"></div>
+ <div class="bubble secondary" style="top: 65%; left: -15%;"></div>
+ <div class="bubble accent" style="bottom: 5%; left: 10;"></div>
+ <div class="bubble primary" style="bottom: 0%; right: 0%;"></div>
+ </div>
</body>
</html>
\ No newline at end of file