Skip to content
Snippets Groups Projects
Commit 50369358 authored by Planoetscher Daniel (Student Com20)'s avatar Planoetscher Daniel (Student Com20)
Browse files

background and page-container styling

parent 021b29ad
No related branches found
No related tags found
1 merge request!1Adding css
Hide whitespace changes
Inline Side-by-side
src/css/style.css
+ 15
− 2
View file @ 50369358
@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/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'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
:root { :root {
--primary: #AC42FF; --primary: #AC42FF;
--secondary: #F15154; --secondary: #F15154;
...@@ -13,15 +14,27 @@ ...@@ -13,15 +14,27 @@
} }
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
font-family: 'Poppins', sans-serif; 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; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
\ No newline at end of file
src/img/background.svg 0 → 100644
+ 28
− 0
View file @ 50369358
<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>
src/index.html
+ 221
− 219
View file @ 50369358
...@@ -16,253 +16,255 @@ ...@@ -16,253 +16,255 @@
</head> </head>
<body bgcolor="#f3f3f3"> <body bgcolor="#f3f3f3">
<header> <div class="page-container">
<font face="monospace"> <header>
<table width="100%" bgcolor="lightgray"> <font face="monospace">
<tr> <table width="100%" bgcolor="lightgray">
<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>
&nbsp;&nbsp;
</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">&#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> <tr>
<td> <td>
<div class="icon">&#x1F46A;</div> <a href="index.html">
<h3>Teambased</h3> <img src="img/logo.svg" alt="Logo" width="100" height="35">
<p> </a>
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> </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;
</nav>
</th>
</tr> </tr>
</table> </table>
</section> <hr>
<br><br><br><br> </font>
<section class="team-section" id="team"> </header>
<h2 align="center">Our Team</h2> <main>
<p align="center"> <font face="sans-serif">
People are what makes a project great, and here are the people that make us <section class="hero-section">
great. <img src="img/header.jpg" alt="Header" width="100%">
</p><br><br> <br>
<table width="100%" cellpadding="10"> <br>
<tr> <h1 align="center">ryoko</h1>
<td rowspan="3" align="center" valign="top"> <h2 align="center">Plan your projects like a journey!</h2>
<img src="img/daniel-planoetscher.jpg" width="200" height="200" <p align="center">
alt="Daniel Planötscher"></img> Are you feeling lost with your tasks? Maximize your productivity now with ryoko.
</td> <br>
<th align="left">Daniel Planötscher</th> <br>
</tr> <a href="#intro">Get started</a>
<tr> </p>
<th align="left">Co-founder &amp; Lead Web Developer</th> </section>
</tr> <br><br><br><br>
<tr> <section class="intro-section" id="intro">
<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> <table>
<tr> <tr>
<td> <td>
<img src="img/product-preview.jpg" alt="Product preview" width="400" height="376">
<label for="firstname">Firstname</label> <br> </td>
<input type="text" required name="firstname" id="firstname"> <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">&#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>
<td> <td>
<label for="lastname">Lastname</label> <br> <div class="icon">&#127993;</div>
<input type="text" required name="lastname" id="lastname"> <h3>Stay focused</h3>
<p>
Using the pomodoro technique, Ryoko helps you focus on
your tasks without being distracted.
</p>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<label for="email">Email</label> <br> <div class="icon">&#x1F46A;</div>
<input type="email" required name="email" id="email"> <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>
<td> <td>
<label for="subject">Subject</label> <br> <div class="icon">&#x1F3CB;</div>
<input type="text" required name="subject" id="subject"> <h3>Reach your goals</h3>
<p>
Use your time more effectively with ryoko.
</p>
</td> </td>
</tr> </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> <tr>
<td colspan="2"> <td rowspan="3" align="center" valign="top">
<label for="message">Message</label> <br> <img src="img/daniel-planoetscher.jpg" width="200" height="200"
<textarea name="message" required id="message" cols="48" rows="10"></textarea> alt="Daniel Planötscher"></img>
</td> </td>
<th align="left">Daniel Planötscher</th>
</tr>
<tr>
<th align="left">Co-founder &amp; Lead Web Developer</th>
</tr> </tr>
<tr> <tr>
<td> <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 &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> </td>
</tr> </tr>
</table> </table>
</form> </section>
</section> <br><br><br><br>
</font> <section class="contact-form" id="contact">
</main> <h2>Get in touch</h2>
<footer> <p>
<font face="sans-serif"> Do you still have a question? Just contact us directly and we will be glad
<br><br><br><br><br><br> to help you resolve the issue.
<table width="100%" valign="top" cellpadding="10"> </p>
<tr> <form action="mailto:dplanoetscher@unibz.it" method="POST">
<td align="center"> <table>
<div> <tr>
<img src="img/logo.svg" alt="Logo" width="70" height="24"> <br> <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> <div>
&copy; <a href="index.html">ryoko</a>, 2021 <br> <img src="img/logo.svg" alt="Logo" width="70" height="24"> <br>
All rights reserved. <div>
&copy; <a href="index.html">ryoko</a>, 2021 <br>
All rights reserved.
</div>
</div> </div>
</div> </td>
</td> <td>
<td> <div>
<div> <h3>Find out more!</h3>
<h3>Find out more!</h3> <ul>
<ul> <li>
<li> <a href="index.html">Home</a>
<a href="index.html">Home</a> </li>
</li> <li>
<li> <a href="index.html#team">Team</a>
<a href="index.html#team">Team</a> </li>
</li> <li>
<li> <a href="index.html#contact">Contact</a>
<a href="index.html#contact">Contact</a> </li>
</li> </ul>
</ul> </div>
</div> </td>
</td> </tr>
</tr> </table>
</table> </font>
</font> </footer>
</footer> </div>
</body> </body>
</html> </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