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

Merge branch 'adding-css' into 'master' 

Adding css

See merge request !1
parents 7cb032ac e2a65b8c
No related branches found
No related tags found
1 merge request!1Adding css
Hide whitespace changes
Inline Side-by-side
src/css/style.css 0 → 100644
+ 760
− 0
View file @ c0f2e85d
@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);
}
src/img/header.jpg deleted 100644 → 0
+ 0
− 0
View file @ 7cb032ac
src/img/header.jpg

97 KiB

src/img/product-preview.jpg deleted 100644 → 0
+ 0
− 0
View file @ 7cb032ac
src/img/product-preview.jpg

36.7 KiB

src/img/screen-design.jpg 0 → 100644
+ 0
− 0
View file @ c0f2e85d
src/img/screen-design.jpg

90.9 KiB

src/index.html
+ 227
− 227
View file @ c0f2e85d
......@@ -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>
&nbsp;&nbsp;
<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">&#x1F558;</div>
<h3>Automatic timetables</h3>
<p>
Generate your automatic timetables based on priorities and depencies of your tasks
</p>
</td>
<td>
<div class="icon">&#x1F60C;</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">&#127993;</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">&#x1F46A;</div>
<h3>Teambased</h3>
<p>
Seperate task within your teams based on the profession and
difficulty.
</p>
</td>
<td>
<div class="icon">&#x1F4C8;</div>
<h3>Analyze your productivity</h3>
<p>
Find your weaknesses and the most timeconsuming tasks
by analyzing graphs.
</p>
</td>
<td>
<div class="icon">&#x1F3CB;</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 &amp; 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 &amp; 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>
&copy; <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>
&copy; <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
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