Improvements and updated pages
Before Width: | Height: | Size: 282 B |
Before Width: | Height: | Size: 1.7 MiB |
Before Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 36 KiB |
After Width: | Height: | Size: 136 KiB |
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 414 KiB |
After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 193 KiB |
After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 279 KiB |
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 7.9 KiB |
|
@ -0,0 +1,3 @@
|
||||||
|
function copy(content) {
|
||||||
|
navigator.clipboard.writeText(content);
|
||||||
|
}
|
|
@ -1,3 +1,3 @@
|
||||||
function scrollDown(positionX, positionY) {
|
function scrollDown(positionX, positionY) {
|
||||||
window.scrollTo(positionX, positionY);
|
window.scrollTo(positionX, positionY);
|
||||||
}
|
}
|
||||||
|
|
122
src/about.html
|
@ -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>
|
||||||
|
<li class="active"><a href="/about">About</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<h1 class="title underline">About</h1>
|
||||||
|
|
||||||
<div class="description">
|
<section class="description">
|
||||||
venenatis a condimentum vitae sapien
|
Elatteria is a small group first started by Ebsku (<a
|
||||||
pellentesque habitant morbi tristique
|
class="link"
|
||||||
senectus et netus et malesuada fames ac
|
rel="noopener noreferrer"
|
||||||
turpis egestas sed tempus urna et pharetra
|
target="_blank"
|
||||||
pharetra massa massa ultricies mi quis
|
href="https://github.com/Ebsku"
|
||||||
hendrerit
|
>https://github.com/Ebsku</a
|
||||||
</div>
|
>) and Jorvents (<a
|
||||||
</body>
|
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>
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
@ -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>
|
|
|
@ -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
|
||||||
|
|
|
@ -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-color: #4fa57a;
|
||||||
background-position: top;
|
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 {
|
||||||
|
|