mirror of
https://github.com/erkkiai/website.git
synced 2024-11-24 22:41:32 +00:00
Design Improvements
This commit is contained in:
Christer Warén
parent
8255b052af
commit
9d4e776a17
65
index.html
65
index.html
@ -29,6 +29,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
font-family: "Roboto Medium", sans-serif;
|
font-family: "Roboto Medium", sans-serif;
|
||||||
@ -59,8 +60,8 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
padding-top: 10vh;
|
||||||
overflow-y: auto;
|
padding-bottom: 10vh;
|
||||||
}
|
}
|
||||||
header, header .branding, .contact div {
|
header, header .branding, .contact div {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -79,6 +80,7 @@
|
|||||||
font-size: 7.5rem;
|
font-size: 7.5rem;
|
||||||
margin-bottom: -2rem;
|
margin-bottom: -2rem;
|
||||||
margin-left: -0.2rem;
|
margin-left: -0.2rem;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
header .slogan {
|
header .slogan {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
@ -86,7 +88,6 @@
|
|||||||
header .credits {
|
header .credits {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
header .credits .powered-by {
|
header .credits .powered-by {
|
||||||
@ -104,23 +105,19 @@
|
|||||||
section#contact .people:nth-child(1) {
|
section#contact .people:nth-child(1) {
|
||||||
margin-right: 5vh;
|
margin-right: 5vh;
|
||||||
}
|
}
|
||||||
section#personalization h2, section#looking h2 {
|
section#personalize h2, section#looking h2 {
|
||||||
margin-top: 2vh;
|
margin-top: 2vh;
|
||||||
}
|
}
|
||||||
section#features h2 {
|
section#features h2, section#contact h2 {
|
||||||
margin-bottom: 5vh;
|
margin-bottom: 5vh;
|
||||||
}
|
}
|
||||||
section#contact h2 {
|
|
||||||
margin-bottom: 2vh;
|
|
||||||
}
|
|
||||||
section#contact .links {
|
section#contact .links {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
section#personalization img, section#looking img, section#contact img {
|
section#personalize img, section#looking img, section#contact img {
|
||||||
border-radius: 5vh;
|
border-radius: 5vh;
|
||||||
height: 25vh;
|
height: 25vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
section#contact img {
|
section#contact img {
|
||||||
margin-bottom: 2vh;
|
margin-bottom: 2vh;
|
||||||
}
|
}
|
||||||
@ -132,7 +129,6 @@
|
|||||||
.list {
|
.list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
.list i {
|
.list i {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
@ -141,10 +137,8 @@
|
|||||||
.list .feature {
|
.list .feature {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
|
||||||
margin-left: 5vh;
|
margin-left: 5vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list .feature:nth-child(1) {
|
.list .feature:nth-child(1) {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -152,13 +146,13 @@
|
|||||||
@media (orientation: portrait) {
|
@media (orientation: portrait) {
|
||||||
header .box {
|
header .box {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
header .name {
|
header .name {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
margin-bottom: -0.5rem;
|
margin-bottom: -0.5rem;
|
||||||
margin-left: -0.2rem;
|
margin-left: -0.2rem;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
header .slogan {
|
header .slogan {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
@ -166,12 +160,26 @@
|
|||||||
header .credits {
|
header .credits {
|
||||||
margin-top: 3vh;
|
margin-top: 3vh;
|
||||||
}
|
}
|
||||||
.contact .persons {
|
section#contact .peoples {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
section#contact .people:nth-child(1) {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
}
|
||||||
.arrow {
|
.arrow {
|
||||||
margin-top: 6vh;
|
margin-top: 6vh;
|
||||||
}
|
}
|
||||||
|
.list {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.list .feature {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 5vh;
|
||||||
|
}
|
||||||
|
.list .feature:nth-child(1) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -188,7 +196,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="website">
|
<div class="website">
|
||||||
<header>
|
<header id="intro">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<img class="logo" src="assets/images/logo.svg" alt="ErkkiAI™">
|
<img class="logo" src="assets/images/logo.svg" alt="ErkkiAI™">
|
||||||
<div class="branding">
|
<div class="branding">
|
||||||
@ -196,16 +204,17 @@
|
|||||||
<span class="slogan">Energy efficiency for your property</span>
|
<span class="slogan">Energy efficiency for your property</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--<div class="credits">
|
<div class="credits">
|
||||||
<a href="https://erkkiai.com">©2024 <span title="Christer Warén & Tomi Jokinen">ErkkiAI™</span></a>
|
<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>
|
<a class="powered-by" href="https://waren.io">Powered by Warén Group</a>
|
||||||
</div>
|
</div>
|
||||||
<i class="arrow fa-solid fa-chevron-down"></i>-->
|
<a class="arrow" href="#personalize" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section id="personalization">
|
<section id="personalize">
|
||||||
<img src="assets/images/42qj-q2us-avtm-xm94.webp" alt="Customized Erkki (Generated by Microsoft Designer)">
|
<img src="assets/images/42qj-q2us-avtm-xm94.webp" alt="Customized Erkki (Generated by Microsoft Designer)">
|
||||||
<h2>Personalize your Erkki!</h2>
|
<h2>Personalize your Erkki!</h2>
|
||||||
|
<a class="arrow" href="#features" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
|
||||||
</section>
|
</section>
|
||||||
<section id="features">
|
<section id="features">
|
||||||
<h2>Features</h2>
|
<h2>Features</h2>
|
||||||
@ -226,10 +235,12 @@
|
|||||||
<span class="description">Improve AI with answers!</span>
|
<span class="description">Improve AI with answers!</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<a class="arrow" href="#looking" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
|
||||||
</section>
|
</section>
|
||||||
<section id="looking">
|
<section id="looking">
|
||||||
<img src="assets/images/e2p7-nbv5-n8y8-getn.jpg" alt="Together Stronger (Generated by Microsoft Designer)">
|
<img src="assets/images/e2p7-nbv5-n8y8-getn.jpg" alt="Together Stronger (Generated by Microsoft Designer)">
|
||||||
<h2>We're looking for funding!</h2>
|
<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>
|
||||||
<section id="contact">
|
<section id="contact">
|
||||||
<h2>Let's improve your property together!</h2>
|
<h2>Let's improve your property together!</h2>
|
||||||
@ -237,17 +248,25 @@
|
|||||||
<div class="people">
|
<div class="people">
|
||||||
<img src="assets/images/people/cwchristerw.png" alt="Christer Warén">
|
<img src="assets/images/people/cwchristerw.png" alt="Christer Warén">
|
||||||
<span class="name">Christer Warén</span>
|
<span class="name">Christer Warén</span>
|
||||||
<span class="number">+358458420860</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 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>
|
||||||
|
|
||||||
<div class="people">
|
<div class="people">
|
||||||
<img src="assets/images/people/psyko85.png" alt="Tomi Jokinen">
|
<img src="assets/images/people/psyko85.png" alt="Tomi Jokinen">
|
||||||
<span class="name">Tomi Jokinen</span>
|
<span class="name">Tomi Jokinen</span>
|
||||||
<span class="number">+358 40 068 2462</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 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>
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="arrow" href="#intro" rel="nofollow"><i class="fa-solid fa-chevron-down"></i></a>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user