Elatteria
/
Elatteria-Website
mirror of https://github.com/Elatteria/Elatteria-Website.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improvements and updated pages

This commit is contained in:
Ebsku 2023-06-19 00:29:39 +03:00
parent e520f61295
commit c2fc696da4
22 changed files with 300 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/Images/Background2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 282 B

BIN
src/Images/Duck.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB

BIN
src/Images/E-Cafe.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
src/Images/Profiles/Ebsku.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/Images/Profiles/Jorvents.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
src/Images/backgroundVertical.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 414 KiB

BIN
src/Images/backgroundVertical.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
src/Images/backround.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 193 KiB

BIN
src/Images/backround.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
src/Images/backroundMobile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
src/Images/discord.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 279 KiB

BIN
src/Images/github.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

3
src/Scripts/copy.js Normal file
View File

@ -0,0 +1,3 @@
function copy(content) {
navigator.clipboard.writeText(content);
}

2
src/Scripts/scroll.js
View File

@ -1,3 +1,3 @@
function scrollDown(positionX, positionY) { function scrollDown(positionX, positionY) {
window.scrollTo(positionX, positionY); window.scrollTo(positionX, positionY);
} }

124
src/about.html
View File

@ -1,48 +1,82 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>About | Elatteria</title> <title>About | Elatteria</title>
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<!-- Open Graph Meta Tags --> <!-- Open Graph Meta Tags -->
<meta property="og:url" content="https://www.elatteria.com/about"> <meta property="og:url" content="https://www.elatteria.com/about" />
<meta property="og:type" content="website"> <meta property="og:type" content="website" />
<meta property="og:title" content="About | Elatteria"> <meta property="og:title" content="About | Elatteria" />
<meta property="og:description" content="About us"> <meta property="og:description" content="About us" />
<meta property="og:image" content="https://www.elatteria.com/Images/logo.png"> <meta
<!-- Twitter Meta Tags --> property="og:image"
<meta name="twitter:card" content="summary_large_image"> content="https://www.elatteria.com/Images/logo.png"
<meta property="twitter:domain" content="elatteria.com"> />
<meta property="twitter:url" content="https://www.elatteria.com/about"> <!-- Twitter Meta Tags -->
<meta name="twitter:title" content="About | Elatteria"> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="About us"> <meta property="twitter:domain" content="elatteria.com" />
<meta name="twitter:image" content="https://www.elatteria.com/Images/logo.png"> <meta property="twitter:url" content="https://www.elatteria.com/about" />
</head> <meta name="twitter:title" content="About | Elatteria" />
<body> <meta name="twitter:description" content="About us" />
<header> <meta
<nav> name="twitter:image"
<ul class="desktop"> content="https://www.elatteria.com/Images/logo.png"
<li class="logo"><a href="/">Logo of Elatteria</a></li> />
<li><a href="/projects">Projects</a></li> </head>
<li><a href="/links">Links</a></li> <body>
<li><a href="/about">About</a></li> <header>
</ul> <nav>
<ul class="mobile"> <ul class="desktop">
<li class="logo"><a href="/">Home</a></li> <li class="logo"><a href="/">Logo of Elatteria</a></li>
<li><a href="/projects">Projects</a></li> <li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li> <li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li> <li class="active"><a href="/about">About</a></li>
</ul> </ul>
</nav> <ul class="mobile">
</header> <li class="logo"><a href="/">Home</a></li>
<h1 class="title">About</h1> <li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<div class="description"> <li class="active"><a href="/about">About</a></li>
venenatis a condimentum vitae sapien </ul>
pellentesque habitant morbi tristique </nav>
senectus et netus et malesuada fames ac </header>
turpis egestas sed tempus urna et pharetra <h1 class="title underline">About</h1>
pharetra massa massa ultricies mi quis
hendrerit <section class="description">
</div> Elatteria is a small group first started by Ebsku (<a
</body> class="link"
rel="noopener noreferrer"
target="_blank"
href="https://github.com/Ebsku"
>https://github.com/Ebsku</a
>) and Jorvents (<a
class="link"
rel="noopener noreferrer"
target="_blank"
href="https://github.com/Jorvents"
>https://github.com/Jorvents</a
>). Together we make projects like the E-Cafe Minecraft server.<br />
<br />
We started Elatteria because we wanted to have a name for our group. Our
goal is to make entartaining projects for everyone.
<div class="spacer" />
<h3 class="underline">Members</h3>
<div class="list">
<figure class="features">
<img src="Images/Profiles/Ebsku.jpg" alt="Profile picture of Ebsku" />
<figcaption>Ebsku</figcaption>
</figure>
<figure class="features">
<img
src="Images/Profiles/Jorvents.jpg"
alt="Profile picture of Ebsku"
/>
<figcaption>Jorvents</figcaption>
</figure>
</div>
</section>
</body>
</html> </html>

30
src/ecafe/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>E-Cafe | Elatteria</title>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li class="logo"><a href="/">Logo of Elatteria</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
</ul>
<ul class="mobile">
<li class="logo"><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<h1 class="title underline">E-Cafe</h1>
<div class="description">
E-Cafe is our Minecraft server featuring multiple gamemodes. <br />
<button><a href="/ecafe/playnow">Play now!</a></button>
</div>
</body>
</html>

118
src/ecafe/playnow.html Normal file
View File

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Play now! | Elatteria</title>
<link rel="stylesheet" href="../styles.css" />
<script src="../Scripts/copy.js"></script>
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li class="logo"><a href="/">Logo of Elatteria</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
</ul>
<ul class="mobile">
<li class="logo"><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<h1 class="title underline">Play now!</h1>
<div class="description">
<figure class="container" onclick="copy('mc.elatteria.com')">
<img
src="../Images/Screenshots/ip.png"
alt="Add E-Cafe Minecraft server"
class="copyable"
id="copyable"
/>
<div class="middle">Click here to copy</div>
</figure>
<figcaption class="description">
1. Go to Multiplayer <br />
2. Click add server <br />
3. Type "mc.elatteria.com" in the "Server Adress" field
</figcaption>
<img
src="../Images/Screenshots/serveradded.png"
alt="E-Cafe Minecraft server added"
/>
</div>
<div class="spacer" />
<section class="description">
<h1>Server made by</h1>
<div class="list">
<figure class="features">
<img
src="https://crafatar.com/avatars/e670d4ab-a396-4c0d-bd6d-0fb8742e0a83?helm=true"
alt="Minecraft head of Ebsku"
/>
<figcaption>Ebsku</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/e39e3289dbd4420c81975b5141c4837f?helm=true"
alt="Minecraft head of Jorvents"
/>
<figcaption>Jorvents</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/f000e1fc-72d0-48fb-b583-bb6bfaa20c31?helm=true"
alt="Minecraft head of yesyes"
/>
<figcaption>yesyes</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/95bd1dbc-360e-46ed-ae1a-53f6440271d1?helm=true"
alt="Minecraft head of RobinOfGaming"
/>
<figcaption>RobinOfGaming</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/ef158c9d-2bd0-4890-8c3a-985c2c27906f?helm=true"
alt="Minecraft head of GhdEst"
/>
<figcaption>GhdEst</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/b9decfb0-a3d2-45a1-ab64-5dc2e46481b1?helm=true"
alt="Minecraft head of zani"
/>
<figcaption>zani</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/1b2a3b7c-31a8-4b45-8908-c6d63cc27b64?helm=true"
alt="Minecraft head of coradoune"
/>
<figcaption>coradoune</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/fc3b8cc7-ab15-4690-a497-d1c900debfb0?helm=true"
alt="Minecraft head of Raspberry"
/>
<figcaption>Raspberry</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/9956d7bf-8aa7-4cad-bc8d-40c77f84be63?helm=true"
alt="Minecraft head of OkuBlock"
/>
<figcaption>OkuBlock</figcaption>
</figure>
</div>
</section>
</body>
</html>

31
src/index.html
View File

@ -36,31 +36,14 @@
</nav> </nav>
</header> </header>
<h1 class="title underline">Elatteria</h1> <h1 class="title underline">Elatteria</h1>
<div class="description"> <section class="description">
Welcome to E-Cafe!<br/> Elatteria is a small group of people<br>
We're a small community on Discord.<br /> that are interested in programming<br>
<button type="button" onclick="scrollDown(0, 10000)"> and creating different projects<br>
Learn More <button type="button">
<a href="/about">About us</a>
</button> </button>
</div> </section>
<div style="margin-top: 1500px"></div>
<div class="description">
<figure class="screenshots">
<img
src="Images/Screenshots/MinecraftBedwarsLobby.png"
alt="Screenshot from E-Cafe Minecraft server"
/>
<br>
</figure>
<div class="spacer"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim medicorum scientiam non ipsius artis, sed bonae valetudinis causa probamus,
et gubernatoris ars, quia bene navigandi rationem habet, utilitate, non arte laudatur,
sic sapientia, quae ars vivendi.<br>
</div>
</body> </body>
<script src="Scripts/scroll.js"></script> <script src="Scripts/scroll.js"></script>
</html> </html>

6
src/links.html
View File

@ -10,13 +10,13 @@
<ul class="desktop"> <ul class="desktop">
<li class="logo"><a href="/">Logo of Elatteria</a></li> <li class="logo"><a href="/">Logo of Elatteria</a></li>
<li><a href="/projects">Projects</a></li> <li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li> <li class="active"><a href="/links">Links</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
</ul> </ul>
<ul class="mobile"> <ul class="mobile">
<li class="logo"><a href="/">Home</a></li> <li class="logo"><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li> <li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li> <li class="active"><a href="/links">Links</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
</ul> </ul>
</nav> </nav>
@ -37,7 +37,7 @@
</figure> </figure>
<figure class="features"> <figure class="features">
<a <a
href="playnow.html" href="ecafe/playnow.html"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
><img ><img

113
src/playnow.html
View File

@ -1,113 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Play now! | Elatteria</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li class="logo"><a href="/">Logo of Elatteria</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
</ul>
<ul class="mobile">
<li class="logo"><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<h1 class="title underline">Play now!</h1>
<div class="description">
<figure>
<img src="Images/Screenshots/ip.png" alt="Add E-Cafe Minecraft server">
<div>Click here to copy</div>
<img/>
</figure>
<figcaption class="description">
1. Go to Multiplayer <br>
2. Click add server <br>
3. Type "mc.elatteria.com" in the "Server Adress" field
</figcaption>
<img src="Images/Screenshots/serveradded.png" alt="E-Cafe Minecraft server added">
</div>
<div style="margin-top: 200px"/>
<section class="description">
<h1>Server made by</h1>
<div class="list">
<figure class="features">
<img
src="https://crafatar.com/avatars/e670d4ab-a396-4c0d-bd6d-0fb8742e0a83?helm=true"
alt="Minecraft head of Ebsku"
/>
<figcaption>Ebsku</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/e39e3289dbd4420c81975b5141c4837f?helm=true"
alt="Minecraft head of Jorvents"
/>
<figcaption>Jorvents</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/f000e1fc-72d0-48fb-b583-bb6bfaa20c31?helm=true"
alt="Minecraft head of yesyes"
/>
<figcaption>yesyes</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/95bd1dbc-360e-46ed-ae1a-53f6440271d1?helm=true"
alt="Minecraft head of RobinOfGaming"
/>
<figcaption>RobinOfGaming</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/ef158c9d-2bd0-4890-8c3a-985c2c27906f?helm=true"
alt="Minecraft head of GhdEst"
/>
<figcaption>GhdEst</figcaption>
</figure>
</div>
<div class="list">
<figure class="features">
<img
src="https://crafatar.com/avatars/b9decfb0-a3d2-45a1-ab64-5dc2e46481b1?helm=true"
alt="Minecraft head of zani"
/>
<figcaption>zani</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/1b2a3b7c-31a8-4b45-8908-c6d63cc27b64?helm=true"
alt="Minecraft head of coradoune"
/>
<figcaption>coradoune</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/fc3b8cc7-ab15-4690-a497-d1c900debfb0?helm=true"
alt="Minecraft head of Raspberry"
/>
<figcaption>Raspberry</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/9956d7bf-8aa7-4cad-bc8d-40c77f84be63?helm=true"
alt="Minecraft head of OkuBlock"
/>
<figcaption>OkuBlock</figcaption>
</figure>
</div>
</section>
</body>
</html>

6
src/projects.html
View File

@ -14,13 +14,13 @@
<nav> <nav>
<ul class="desktop"> <ul class="desktop">
<li class="logo"><a href="/">Logo of Elatteria</a></li> <li class="logo"><a href="/">Logo of Elatteria</a></li>
<li><a href="/projects">Projects</a></li> <li class="active"><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li> <li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
</ul> </ul>
<ul class="mobile"> <ul class="mobile">
<li class="logo"><a href="/">Home</a></li> <li class="logo"><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li> <li class="active"><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li> <li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
</ul> </ul>
@ -31,7 +31,7 @@
<div class="list"> <div class="list">
<figure class="features"> <figure class="features">
<a <a
href="playnow.html" href="/ecafe"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
><img ><img

64
src/styles.css
View File

@ -21,6 +21,21 @@ html {
margin-top: 500px; margin-top: 500px;
} }
.middle {
transition: 100ms ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container {
position: relative;
}
body { body {
background-image: url("Images/backround.png"); background-image: url("Images/backround.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -35,11 +50,14 @@ body {
header { header {
background-color: #60a37c; margin: 0 auto;
background-position: top; background-color: #4fa57a;
background-position: top;
text-align: center; text-align: center;
top: 0px;
height: 80px; height: 80px;
width: 99%;
margin-top: 0.5%;
border-radius: 30px;
} }
header .logo a { header .logo a {
@ -66,8 +84,12 @@ li {
float: left; float: left;
} }
.active {
font-weight: 700;
}
button { button {
background: rgb(42, 50, 127); background: #4fa57a;
color: white; color: white;
transform: scale(4, 4); transform: scale(4, 4);
margin: 7%; margin: 7%;
@ -90,13 +112,30 @@ a {
color: white; color: white;
} }
.link {
color: lightskyblue;
}
a:hover { a:hover {
font: roboto; font-weight: 700;
font-family: "Roboto";
} }
a img:hover { a img:hover {
border: 2px solid white; border: 3px solid white;
}
img {
border-radius: 10px;
border: 1px solid white;
backface-visibility: hidden;
}
.copyable:hover {
opacity: 0.85;
}
.container:hover .middle {
opacity: 1;
} }
.features img { .features img {
@ -130,12 +169,14 @@ a img:hover {
.mobile { .mobile {
display: none; display: none;
text-align: left; text-align: center;
overflow-x: scroll; overflow-x: scroll;
} }
.mobile li { .mobile li {
font-size: 30px; font-size: 30px;
top: 50%;
bottom: 50%;
} }
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
@ -152,6 +193,13 @@ a img:hover {
header .mobile { header .mobile {
display: flex; display: flex;
flex-direction: row;
align-items: center;
}
header .mobile .logo a {
width: 225px;
height: 75px;
} }
header .desktop { header .desktop {