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

Another website update

This commit is contained in:
Ebsku 2023-05-09 19:42:23 +03:00
parent 1abfcf3018
commit 10fdb7c1df
38 changed files with 589 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
E-Cafe Website/Images/worldmap.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 111 KiB

24
E-Cafe Website/Scripts/flagle.js
View File

@ -1,24 +0,0 @@
async function getFlag() {
const getFlag = await fetch('https://flagcdn.com/en/codes.json')
const flag = await getFlag.json();
var inputField = document.getElementById("guessInput").value.toLowerCase();
document.getElementsByClassName("gamedle-section").innerHTML = guessInput;
if (inputField != flag.us.toLowerCase()) {
document.getElementById("guessInput").value=null;
window.alert("Wrong country!");
}
else {
document.getElementById("guessInput").value=null;
window.alert("Correct!")
}
}

75
E-Cafe Website/about.html
View File

@ -1,75 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>About | E-Cafe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li class="logo"><a href="index.html"></a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
<ul class="mobile">
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<h1 class="title">
About
</h1>
<section class="description">
<h1>Made by</h1>
<div class="list">
<figure class="features">
<img src="https://crafatar.com/avatars/e670d4ab-a396-4c0d-bd6d-0fb8742e0a83" alt="Minecraft head of Ebsku">
<figcaption>Ebsku</figcaption>
</figure>
<figure class="features">
<img src="https://crafatar.com/avatars/e39e3289-dbd4-420c-8197-5b5141c4837f" alt="Minecraft head of Jorvents">
<figcaption>Jorvents</figcaption>
</figure>
<figure class="features">
<img src="https://crafatar.com/avatars/f000e1fc-72d0-48fb-b583-bb6bfaa20c31" alt="Minecraft head of yesyes">
<figcaption>yesyes</figcaption>
</figure>
<figure class="features">
<img src="https://crafatar.com/avatars/95bd1dbc-360e-46ed-ae1a-53f6440271d1" alt="Minecraft head of RobinOfGaming">
<figcaption>RobinOfGaming</figcaption>
</figure>
<figure class="features">
<img src="https://crafatar.com/avatars/ef158c9d-2bd0-4890-8c3a-985c2c27906f" 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" alt="Minecraft head of zani">
<figcaption>zani</figcaption>
</figure>
<figure class="features">
<img src="https://crafatar.com/avatars/1b2a3b7c-31a8-4b45-8908-c6d63cc27b64" alt="Minecraft head of coradoune">
<figcaption>coradoune</figcaption>
</figure>
<figure class="features">
<img src="https://crafatar.com/avatars/fc3b8cc7-ab15-4690-a497-d1c900debfb0" alt="Minecraft head of Raspberry">
<figcaption>Raspberry</figcaption>
</figure>
<figure class="features">
<img src="https://crafatar.com/avatars/9956d7bf-8aa7-4cad-bc8d-40c77f84be63" alt="Minecraft head of OkuBlock">
<figcaption>OkuBlock</figcaption>
</figure>
</div>
</section>
<footer>
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
</footer>
</body>
</html>

54
E-Cafe Website/flagle.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flagle | E-Cafe</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="gamedlestyles.css">
<script src="Scripts/flagle.js">
</script>
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li><a href="games.html">More Games</a></li>
<li><a href="index.html">E-Cafe</a></li>
</ul>
<ul class="mobile">
<li><a href="games.html">More Games</a></li>
<li><a href="index.html">E-Cafe</a></li>
</ul>
</nav>
</header>
<h1 class="title">
Flagle
<div id="underline">
</div>
</h1>
<section class="description">
<figure id="flag">
<img src="https://flagcdn.com/us.svg" alt="Flag of a random country">
</figure>
<!--Guess 1-->
<div class="gamedle-section">
</div>
<!--Guess 2-->
<div class="gamedle-section">
</div>
<!--Guess 3-->
<div class="gamedle-section">
</div>
<!--Guess 4-->
<div class="gamedle-section">
</div>
<!--Guess 5-->
<div class="gamedle-section">
</div>
</section>
<button type="button" onclick="getFlag()">Guess</button>
<input id="guessInput" type="text">
</body>
</html>

46
E-Cafe Website/games.html
View File

@ -1,46 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Games | E-Cafe</title>
<link rel="stylesheet" href="styles.css">
<style>
button {
margin: 2%;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li class="logo"><a href="index.html"></a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
<ul class="mobile">
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<h1 class="title">
Games
</h1>
<section class="description">
<div class="list">
<figure class="features">
<a href="flagle.html"><img src="Images/Flagle.png" alt="Flagle logo"></a>
<figcaption>Flagle</figcaption>
</figure>
</div>
</section>
<footer>
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
</footer>
</body>
</html>

47
E-Cafe Website/index.html
View File

@ -1,47 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | E-Cafe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li class="logo"><a href="index.html">E-Cafe</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
<ul class="mobile">
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<h1 class="title">
E-Cafe
</h1>
<section class="description">
<strong>Welcome to E-Cafe!</strong><br>
We're a small Minecraft based community in Discord.<br>
<button type="button" onclick="scrollDown(0, 10000)">Learn More</button>
<div style="margin-top: 500px;"></div>
<figure class="screenshots">
<img src="Images/Screenshots/MinecraftBedwarsLobby.png" alt="Screenshot from E-Cafe Minecraft server">
<figcaption>Screenshot from E-Cafe Minecraft Server. </figcaption>
</figure>
<div style="margin-top: 50px;"></div>
a<br>
aaaa
</section>
<footer>
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
</footer>
</body>
<script src="Scripts/scroll.js">
</script>
</html>

48
E-Cafe Website/links.html
View File

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Links | E-Cafe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li class="logo"><a href="index.html"></a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
<ul class="mobile">
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<h1 class="title">
Links
</h1>
<section class="description">
<div class="list">
<figure class="features">
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer"><img src="Images/discord.png" alt="E-Cafe Discord server invite link"></a>
<figcaption>Discord</figcaption>
</figure>
<figure class="features">
<a href="playnow.html" target="_blank" rel="noopener noreferrer"><img src="Images/minecraft.png" alt="E-Cafe Minecraft server play now link"></a>
<figcaption>Play now</figcaption>
</figure>
</div>
</section>
<iframe
class="discord"
src="https://discord.com/widget?id=1003699887239610480&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
</iframe>
<footer>
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
</footer>
</body>
</html>

0
E-Cafe Website/playnow.html
View File

BIN
Elatteria-Website/Images/Background2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 282 B

0
E-Cafe Website/Images/Duck.png → Elatteria-Website/Images/Duck.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.7 MiB

0
E-Cafe Website/Images/E-Cafe.png → Elatteria-Website/Images/E-Cafe.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

0
E-Cafe Website/Images/E-CafeIcon.png → Elatteria-Website/Images/E-CafeIcon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

0
E-Cafe Website/Images/Flagle.png → Elatteria-Website/Images/Flagle.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

0
E-Cafe Website/Images/Screenshots/MinecraftBedwarsLobby.png → Elatteria-Website/Images/Screenshots/MinecraftBedwarsLobby.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
Elatteria-Website/Images/Screenshots/addserver.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
Elatteria-Website/Images/Screenshots/ip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
Elatteria-Website/Images/Screenshots/serveradded.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

0
E-Cafe Website/Images/TopBarDay.png → Elatteria-Website/Images/TopBarDay.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

0
E-Cafe Website/Images/TopBarNight.png → Elatteria-Website/Images/TopBarNight.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Elatteria-Website/Images/backgroundVertical.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
Elatteria-Website/Images/backround.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
Elatteria-Website/Images/backroundMobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

0
E-Cafe Website/Images/discord.png → Elatteria-Website/Images/discord.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
Elatteria-Website/Images/github.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
Elatteria-Website/Images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
Elatteria-Website/Images/logo.png~ Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

0
E-Cafe Website/Images/minecraft.png → Elatteria-Website/Images/minecraft.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

138
Elatteria-Website/Scripts/flagle.js Normal file
View File

@ -0,0 +1,138 @@
/*async function getFlag() {
const getFlag = await fetch('https://flagcdn.com/en/codes.json')
const flag = await getFlag.json();
var inputField = document.getElementById("guessInput").value.toLowerCase();
document.getElementsByClassName("gamedle-section").innerHTML = guessInput;
if (inputField != flag.us.toLowerCase()) {
document.getElementById("guessInput").value=null;
window.alert("Wrong country!");
}
else {
document.getElementById("guessInput").value=null;
window.alert("Correct!")
}
}*/
// API endpoint for getting the list of countries and codes
const COUNTRY_ENDPOINT =
"https://cors-anywhere.herokuapp.com/https://www.flagcdn.com/en/codes.json";
// Flag image element
const flagElement = document.getElementById("flag");
// Input element
const inputElement = document.getElementById("guessInput");
inputElement.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
handleGuess();
}
});
// Button element
const buttonElement = document.getElementsByTagName("button")[0];
// Div elements to display the guesses
const guessElements = document.getElementsByClassName("gamedle-section");
const guessButton = document.querySelector("button");
guessButton.addEventListener("click", handleGuess);
// Array to store the list of countries
let countries = [];
// Array to store the already guessed countries
let guessedCountries = [];
// Function to fetch the list of countries and codes
async function getCountries() {
// Make an HTTP GET request to the country endpoint
const response = await fetch(COUNTRY_ENDPOINT, {
method: "GET",
headers: {
Accept: "application/json",
},
});
// Get the data as a JSON object
const data = await response.json().then((data) => console.log(data));
// Store the list of countries
countries = data;
}
// Function to show a random flag
function showFlag() {
if (countries.length === 0) {
return;
}
// Generate a random index
const index = Math.floor(Math.random() * countries.length);
// Get the flag image URL and country name
const flagUrl = `https://www.flagcdn.com/${
Object.keys(countries[index])[0]
}.svg`;
const countryName = countries[index].name;
// Set the src attribute of the flag image element to the flag image URL
flagElement.src = flagUrl;
console.log(flagUrl);
// Set the alt attribute of the flag image element to the country name
flagElement.alt = countries[index][Object.keys(countries[index])[0]];
}
// Function to validate the entered country name
function validateCountry(guess) {
// Iterate through the array of countries
for (const country of countries) {
// If the entered country name matches the name of the current country, return true
if (guess.toLowerCase() === country.name.toLowerCase()) {
return true;
}
}
// If the entered country name is not found in the array, return false
return false;
}
// Function to handle the guess
async function handleGuess() {
// Get the entered country name
const guess = inputElement.value;
// Validate the entered country name
if (!validateCountry(guess)) {
// If the entered country name is not valid, display an error message
alert("Please enter a valid country name.");
return;
}
// Add the entered country name to the list of already guessed countries
guessedCountries.push(guess);
// Create a new div element to display the guess
const guessElement = document.createElement("div");
// Set the text of the div element to the entered country name
guessElement.textContent = guess;
// Append the div element to the div element that displays the guesses
guessElements[guessedCountries.length - 1].appendChild(guessElement);
}
window.onload = function () {
getCountries();
showFlag();
};

0
E-Cafe Website/Scripts/scroll.js → Elatteria-Website/Scripts/scroll.js
View File

52
Elatteria-Website/about.html Normal file
View File

@ -0,0 +1,52 @@
<!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="/"></a></li>
<li><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>
<ul class="mobile">
<li class="logo"><a href="/"></a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
</header>
<h1 class="title">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>
</html>

BIN
Elatteria-Website/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

41
Elatteria-Website/flagle.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flagle | Elatteria</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="gamedlestyles.css" />
<script src="Scripts/flagle.js"></script>
</head>
<body>
<header></header>
<h1 class="title">
<span class="underline">Flagle</span>
</h1>
<section class="description">
<figure id="flag">
<img src="" alt="Flag of a random country" />
</figure>
<!--Guess 1-->
<div class="gamedle-section"></div>
<!--Guess 2-->
<div class="gamedle-section"></div>
<!--Guess 3-->
<div class="gamedle-section"></div>
<!--Guess 4-->
<div class="gamedle-section"></div>
<!--Guess 5-->
<div class="gamedle-section"></div>
<button type="button">Guess</button>
<input
id="guessInput"
type="text"
placeholder="Type your guess here..."
/>
</section>
<section class="footer">
Made by Elatteria •
<a href="projects.html">More projects from us</a>
</section>
</body>
</html>

19
E-Cafe Website/gamedlestyles.css → Elatteria-Website/gamedlestyles.css
View File

@ -3,13 +3,6 @@ body {
background-image: none; background-image: none;
} }
#underline {
height: 3px;
background-color: white;
transform: scale(0.1, 1);
margin-top: 2px;
}
.gamedle-section { .gamedle-section {
background: rgba(66, 62, 62, 0.5); background: rgba(66, 62, 62, 0.5);
@ -63,21 +56,17 @@ button:hover {
background-color: rgb(90, 83, 83); background-color: rgb(90, 83, 83);
} }
@media screen and (max-width: 715px) { @media screen and (max-width: 1100px) {
#flag { #flag {
transform: scale(0.8, 0.8); transform: scale(0.8, 0.8);
} }
.gamedle-section { .gamedle-section {
margin-left: 70px; margin-left: 100px;
margin-right: 70px; margin-right: 100px;
} }
input { input {
width: 200px; width: 300px;
}
#underline {
transform: scale(0.3, 1);
} }
} }

56
Elatteria-Website/index.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home | Elatteria</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li class="logo"><a href="/"></a></li>
<li><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>
<ul class="mobile">
<li class="logo"><a href="/"></a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
</header>
<h1 class="title">E-Cafe</h1>
<div class="description">
<strong>Welcome to E-Cafe!<br/>
We're a small community on Discord.<br />
<button type="button" onclick="scrollDown(0, 10000)">
Learn More
</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"
/>
</figure>
</div>
<div class="description"</div>
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>
<button onclick="location.href='/about';">About Elatteria</button>
</body>
<script src="Scripts/scroll.js"></script>
</html>

67
Elatteria-Website/links.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Links | Elatteria</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li class="logo"><a href="/"></a></li>
<li><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>
<ul class="mobile">
<li class="logo"><a href="/"></a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
</header>
<h1 class="title">Links</h1>
<section class="description">
<div class="list">
<figure class="features">
<a
href="https://discord.gg/UwcQBWF6vF"
target="_blank"
rel="noopener noreferrer"
><img
src="Images/discord.png"
alt="E-Cafe Discord server invite link"
/></a>
<figcaption>Discord</figcaption>
</figure>
<figure class="features">
<a
href="playnow.html"
target="_blank"
rel="noopener noreferrer"
><img
src="Images/minecraft.png"
alt="E-Cafe Minecraft server play now link"
/></a>
<figcaption>Play now</figcaption>
</figure>
<figure class="features">
<a
href="https://github.com/Elatteria"
target="_blank"
rel="noopener noreferrer"
><img
src="Images/github.png"
alt="Elatteria GitHub link"
/></a>
<figcaption>GitHub</figcaption>
</figure>
</div>
</section>
</body>
</html>

117
Elatteria-Website/playnow.html Normal file
View File

@ -0,0 +1,117 @@
<!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="/"></a></li>
<li><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>
<ul class="mobile">
<li class="logo"><a href="/"></a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
</header>
<h1 class="title">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"
alt="Minecraft head of Ebsku"
/>
<figcaption>Ebsku</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/e39e3289-dbd4-420c-8197-5b5141c4837f"
alt="Minecraft head of Jorvents"
/>
<figcaption>Jorvents</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/f000e1fc-72d0-48fb-b583-bb6bfaa20c31"
alt="Minecraft head of yesyes"
/>
<figcaption>yesyes</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/95bd1dbc-360e-46ed-ae1a-53f6440271d1"
alt="Minecraft head of RobinOfGaming"
/>
<figcaption>RobinOfGaming</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/ef158c9d-2bd0-4890-8c3a-985c2c27906f"
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"
alt="Minecraft head of zani"
/>
<figcaption>zani</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/1b2a3b7c-31a8-4b45-8908-c6d63cc27b64"
alt="Minecraft head of coradoune"
/>
<figcaption>coradoune</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/fc3b8cc7-ab15-4690-a497-d1c900debfb0"
alt="Minecraft head of Raspberry"
/>
<figcaption>Raspberry</figcaption>
</figure>
<figure class="features">
<img
src="https://crafatar.com/avatars/9956d7bf-8aa7-4cad-bc8d-40c77f84be63"
alt="Minecraft head of OkuBlock"
/>
<figcaption>OkuBlock</figcaption>
</figure>
</div>
</section>
</body>
</html>

50
Elatteria-Website/projects.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Projects | Elatteria</title>
<link rel="stylesheet" href="styles.css" />
<style>
button {
margin: 2%;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="desktop">
<li class="logo"><a href="/"></a></li>
<li><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>
<ul class="mobile">
<li class="logo"><a href="/"></a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/links">Links</a></li>
<li><a href="/about">About</a></li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
</header>
<h1 class="title">Projects</h1>
<section class="description">
<div class="list">
<figure class="features">
<a
href="playnow.html"
target="_blank"
rel="noopener noreferrer"
><img
src="Images/minecraft.png"
alt="E-Cafe Minecraft server play now link"
/></a>
<figcaption>Minecraft Server</figcaption>
</figure>
</div>
</section>
</body>
</html>

120
E-Cafe Website/styles.css → Elatteria-Website/styles.css
View File

@ -1,8 +1,10 @@
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
.title{ .title {
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
} }
@ -11,10 +13,12 @@ html {
text-align: center; text-align: center;
font-size: 25px; font-size: 25px;
margin-bottom: 200px; margin-bottom: 200px;
margin-left: 10%;
margin-right: 10%;
} }
body { body {
background-image: url("Images/E-Cafe.png"); background-image: url("Images/backround.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
@ -24,25 +28,25 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
header { header {
background-image: url("Images/TopBarNight.png"); background-color: rgb(32, 36, 59);
background-repeat: no-repeat;
background-size: 100%;
background-position: top; background-position: top;
padding: 2%; padding: 5px;
text-align: center; text-align: center;
justify-content: left;
top: 0px; top: 0px;
} }
header .logo a{ header .logo a {
background-image: url("Images/E-CafeIcon.png"); display: flex;
background-image: url("Images/logo.png");
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block;
position: relative;
background-size: 100%; background-size: 100%;
height: 100px; height: 100px;
width: 100px; width: 100px;
text-indent: -999999999999999999999999999999px; text-indent: -9999999999999999;
} }
ul { ul {
@ -52,23 +56,30 @@ ul {
} }
li { li {
display: inline-block; display: flex;
margin: 0 7% 0 0; margin: 10px 10px 0px 0px;
font-size: 30px; font-size: 30px;
margin: 2%;
justify-content: center;
} }
button { button {
background: rgb(195, 195, 20); background: rgb(42, 50, 127);
color: white; color: white;
transform: scale(3, 3); transform: scale(4, 4);
margin: 7%; margin: 7%;
border: none;
border-radius: 5px;
text-align: center; text-align: center;
border-radius: 10px; justify-content: center;
box-shadow: gray 0 0 1px; padding: 3px;
} }
button:hover { button:hover {
background-color: rgb(255, 255, 0); background: rgb(146, 199, 249);
padding: 10px;
border-radius: 8px;
transition: 200ms;
} }
a { a {
@ -77,7 +88,10 @@ a {
} }
a:hover { a:hover {
color: blue; border-radius: 15%;
background: rgb(82, 109, 160);
padding: 20px;
transition: 250ms;
} }
.features img { .features img {
@ -88,7 +102,6 @@ a:hover {
height: 300px; height: 300px;
} }
.features { .features {
color: white; color: white;
padding: 2%; padding: 2%;
@ -96,50 +109,45 @@ a:hover {
text-align: center; text-align: center;
} }
.screenshots img{ .screenshots img {
border-radius: 40px; border-radius: 40px;
width: 480px; width: 480px;
height: 270px; height: 270px;
transform: scale(2, 2);
} }
.screenshots{ .screenshots {
color: white; color: white;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
margin: 2%; margin: 2%;
} }
footer {
background-color: rgb(42, 42, 42);
text-align: center;
padding: 20px 20px;
color: gray;
margin-top: -50px;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
}
.mobile { .mobile {
display: none; display: none;
font-size: 28px; text-align: left;
transform: scale(0.5, 0.5); overflow-x: scroll;
text-align: center;
} }
@media screen and (max-width: 715px) { .mobile a .logo {
width: 50px;
height: 50px;
}
.mobile li {
font-size: 50px;
}
@media screen and (max-width: 1100px) {
.features { .features {
transform: scale(0.7, 0.7); display: inline-grid;
transform: scale(1.8, 1.8);
margin: 18%;
justify-content: center;
} }
.screenshots { .screenshots {
transform: scale(0.7, 0.7); flex-direction: column;
}
.discord {
transform: scale(0.6, 0.6);
} }
header .mobile { header .mobile {
@ -151,20 +159,18 @@ footer {
display: none; display: none;
} }
.logo { .screenshots img {
width: 100px; transform: scale(1.5, 1.5);
height: 100px;
} }
#flag { body {
transform: scale(0.15, 0.15); background-image: url("Images/backgroundVertical.png");
} background-attachment: scroll;
}
} }
.discord { .underline {
margin: 5%; text-decoration: underline;
position: relative; color: white;
bottom: 0px;
left: 0px;
right: 0px;
} }