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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 282 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 414 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 193 KiB

BIN
src/Images/backround.png~ Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 279 KiB

Binary file not shown.

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);
}

View File

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

View File

@ -1,48 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>About | Elatteria</title>
<link rel="stylesheet" href="styles.css" />
<!-- Open Graph Meta Tags -->
<meta property="og:url" content="https://www.elatteria.com/about">
<meta property="og:type" content="website">
<meta property="og:title" content="About | Elatteria">
<meta property="og:description" content="About us">
<meta property="og:image" content="https://www.elatteria.com/Images/logo.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="elatteria.com">
<meta property="twitter:url" content="https://www.elatteria.com/about">
<meta name="twitter:title" content="About | Elatteria">
<meta name="twitter:description" content="About us">
<meta name="twitter:image" content="https://www.elatteria.com/Images/logo.png">
</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">About</h1>
<head>
<title>About | Elatteria</title>
<link rel="stylesheet" href="styles.css" />
<!-- Open Graph Meta Tags -->
<meta property="og:url" content="https://www.elatteria.com/about" />
<meta property="og:type" content="website" />
<meta property="og:title" content="About | Elatteria" />
<meta property="og:description" content="About us" />
<meta
property="og:image"
content="https://www.elatteria.com/Images/logo.png"
/>
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="elatteria.com" />
<meta property="twitter:url" content="https://www.elatteria.com/about" />
<meta name="twitter:title" content="About | Elatteria" />
<meta name="twitter:description" content="About us" />
<meta
name="twitter:image"
content="https://www.elatteria.com/Images/logo.png"
/>
</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 class="active"><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 class="active"><a href="/about">About</a></li>
</ul>
</nav>
</header>
<h1 class="title underline">About</h1>
<div class="description">
venenatis a condimentum vitae sapien
pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac
turpis egestas sed tempus urna et pharetra
pharetra massa massa ultricies mi quis
hendrerit
</div>
</body>
<section class="description">
Elatteria is a small group first started by Ebsku (<a
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>

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>

View File

@ -36,31 +36,14 @@
</nav>
</header>
<h1 class="title underline">Elatteria</h1>
<div class="description">
Welcome to E-Cafe!<br/>
We're a small community on Discord.<br />
<button type="button" onclick="scrollDown(0, 10000)">
Learn More
<section class="description">
Elatteria is a small group of people<br>
that are interested in programming<br>
and creating different projects<br>
<button type="button">
<a href="/about">About us</a>
</button>
</div>
<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>
</section>
</body>
<script src="Scripts/scroll.js"></script>
</html>

View File

@ -10,13 +10,13 @@
<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 class="active"><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 class="active"><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
@ -37,7 +37,7 @@
</figure>
<figure class="features">
<a
href="playnow.html"
href="ecafe/playnow.html"
target="_blank"
rel="noopener noreferrer"
><img

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>

View File

@ -14,13 +14,13 @@
<nav>
<ul class="desktop">
<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="/about">About</a></li>
</ul>
<ul class="mobile">
<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="/about">About</a></li>
</ul>
@ -31,7 +31,7 @@
<div class="list">
<figure class="features">
<a
href="playnow.html"
href="/ecafe"
target="_blank"
rel="noopener noreferrer"
><img

View File

@ -21,6 +21,21 @@ html {
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 {
background-image: url("Images/backround.png");
background-repeat: no-repeat;
@ -35,11 +50,14 @@ body {
header {
background-color: #60a37c;
margin: 0 auto;
background-color: #4fa57a;
background-position: top;
text-align: center;
top: 0px;
height: 80px;
width: 99%;
margin-top: 0.5%;
border-radius: 30px;
}
header .logo a {
@ -66,8 +84,12 @@ li {
float: left;
}
.active {
font-weight: 700;
}
button {
background: rgb(42, 50, 127);
background: #4fa57a;
color: white;
transform: scale(4, 4);
margin: 7%;
@ -90,13 +112,30 @@ a {
color: white;
}
.link {
color: lightskyblue;
}
a:hover {
font: roboto;
font-family: "Roboto";
font-weight: 700;
}
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 {
@ -130,12 +169,14 @@ a img:hover {
.mobile {
display: none;
text-align: left;
text-align: center;
overflow-x: scroll;
}
.mobile li {
font-size: 30px;
top: 50%;
bottom: 50%;
}
@media screen and (max-width: 1100px) {
@ -152,6 +193,13 @@ a img:hover {
header .mobile {
display: flex;
flex-direction: row;
align-items: center;
}
header .mobile .logo a {
width: 225px;
height: 75px;
}
header .desktop {