<!DOCTYPE html>
<html>
<head>
<title>ErkkiAI™</title>
<meta charset="UTF-8">
<meta name="robots" content="noodp,noarchive">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
* {
box-sizing: border-box;
}
@font-face {
font-family: "Orbitron Bold";
src: url("assets/fonts/orbitron-bold.otf");
}
@font-face {
font-family: "Noto Sans Bold";
src: url("assets/fonts/notosans-bold.ttf");
}
html, body {
width: 100%;
height: 100%;
}
body {
display: flex;
flex-direction: column;
background-image: linear-gradient(#0049c8, #00bef9);
margin: 0;
width: 100vw;
height: 100vh;
text-align: center;
}
* {
font-family: "Roboto Medium", sans-serif;
}
*, *:active, *:focus, *:hover, *:visited, *:link {
color: #ffffff;
text-decoration: none;
}
.emoji *, .emoji *:active, .emoji *:focus, .emoji *:hover, .emoji *:visited, .emoji *:link {
font-family: initial;
}
h1, h2, h3 {
font-family: "Orbitron Bold", sans-serif;
margin-top: 0;
margin-bottom: 0;
}
.website {
overflow: hidden;
overflow-y: auto;
}
main {
font-size: 1.5rem;
}
header, section {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 10vh;
padding-bottom: 10vh;
}
header, header .branding, .contact div {
display: flex;
flex-direction: column;
}
header .box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
header .logo {
max-height: 75vmin;
}
header .name {
font-size: 7.5rem;
margin-bottom: -2rem;
margin-left: -0.2rem;
text-align: left;
}
header .slogan {
font-size: 3rem;
}
header .credits {
display: flex;
flex-direction: column;
font-size: 1.5rem;
}
header .credits .powered-by {
margin-top: 0.25em;
font-size: 1rem;
}
section#contact .peoples {
display: flex;
flex-direction: row;
}
section#contact .people {
display: flex;
flex-direction: column;
}
section#contact .people:nth-child(1) {
margin-right: 5vh;
}
section#personalize h2, section#looking h2 {
margin-top: 2vh;
}
section#features h2, section#contact h2 {
margin-bottom: 5vh;
}
section#contact .links {
font-size: 2rem;
}
section#personalize img, section#looking img, section#contact img {
border-radius: 5vh;
height: 25vh;
}
section#contact img {
margin-bottom: 2vh;
}
.arrow {
margin-top: 3vh;
font-size: 3rem;
opacity: 75%;
}
.list {
display: flex;
flex-direction: row;
}
.list i {
font-size: 5rem;
margin-bottom: 2vh;
}
.list .feature {
display: flex;
flex-direction: column;
margin-left: 5vh;
}
.list .feature:nth-child(1) {
margin-left: 0;
}
@media (orientation: portrait) {
header .box {
flex-direction: column;
justify-content: center;
}
header .name {
font-size: 3rem;
margin-bottom: -0.5rem;
margin-left: -0.2rem;
text-align: center;
}
header .slogan {
font-size: 1.5rem;
}
header .credits {
margin-top: 3vh;
}
section#contact .peoples {
flex-direction: column;
}
section#contact .people:nth-child(1) {
margin-right: 0;
margin-bottom: 5vh;
}
.arrow {
margin-top: 6vh;
}
.list {
flex-direction: column;
}
.list .feature {
margin-left: 0;
margin-top: 5vh;
}
.list .feature:nth-child(1) {
margin-top: 0;
}
}
</style>
<!-- Link: Preconnect & DNS Prefetch & Preload -->
<link rel="preconnect" href="//cdn.waren.io">
<link rel="dns-prefetch" href="//cdn.waren.io">
<link rel="preload" as="font" type="font/woff2" href="https://cdn.waren.io/frameworks/font-awesome/6.6.0/webfonts/fa-solid-900.woff2" crossorigin="anonymous">
<link rel="preload" as="style" href="https://cdn.waren.io/frameworks/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.waren.io/frameworks/font-awesome/6.6.0/css/all.min.css" media="screen, print" crossorigin="anonymous">
</head>
<body>
<div class="website">
<header id="intro">
<div class="box">
<img class="logo" src="assets/images/logo.svg" alt="ErkkiAI™">
<div class="branding">
<h1 class="name">ErkkiAI™</h1>
<span class="slogan">Energy efficiency for your property</span>
</div>
</div>
<div class="credits">
<a href="https://erkkiai.com">©2024 <span title="Christer Warén & Tomi Jokinen">ErkkiAI™</span></a>
<a class="powered-by" href="https://waren.io">Powered by Warén Group</a>
</div>
<a class="arrow" href="#personalize" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
</header>
<main>
<section id="personalize">
<img src="assets/images/42qj-q2us-avtm-xm94.webp" alt="Customized Erkki (Generated by Microsoft Designer)">
<h2>Personalize your Erkki!</h2>
<a class="arrow" href="#features" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
</section>
<section id="features">
<h2>Features</h2>
<div class="list">
<div class="feature">
<i class="fa-solid fa-comments"></i>
<span class="name">Conversations</span>
<span class="description">Manage property with ease!</span>
</div>
<div class="feature">
<i class="fa-solid fa-gavel"></i>
<span class="name">Decisions</span>
<span class="description">Make decisions with AI suggestions!</span>
</div>
<div class="feature">
<i class="fa-regular fa-circle-question"></i>
<span class="name">Questions</span>
<span class="description">Improve AI with answers!</span>
</div>
</div>
<a class="arrow" href="#looking" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
</section>
<section id="looking">
<img src="assets/images/e2p7-nbv5-n8y8-getn.jpg" alt="Together Stronger (Generated by Microsoft Designer)">
<h2>We're looking for funding!</h2>
<a class="arrow" href="#contact" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
</section>
<section id="contact">
<h2>Let's improve your property together!</h2>
<div class="peoples">
<div class="people">
<img src="assets/images/people/cwchristerw.png" alt="Christer Warén">
<span class="name">Christer Warén</span>
<span class="number">+358 45 842 0860</span>
<div class="links">
<a href="https://christerwaren.fi"><i class="fa-solid fa-globe"></i></a>
<a href="https://linkedin.com/in/cwchristerw"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/cwchristerw"><i class="fa-brands fa-github"></i></a>
</div>
</div>
<div class="people">
<img src="assets/images/people/psyko85.png" alt="Tomi Jokinen">
<span class="name">Tomi Jokinen</span>
<span class="number">+358 40 068 2462</span>
<div class="links">
<a href="https://erkkiai.com"><i class="fa-solid fa-globe"></i></a>
<a href="https://linkedin.com/in/tomi-jokinen-a10a8739"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/psyko85"><i class="fa-brands fa-github"></i></a>
</div>
</div>
</div>
<a class="arrow" href="#intro" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
</section>
</main>
</div>
</body>
</html>