Mobile scaling
This commit is contained in:
Ebsku
parent
e30705d1d3
commit
51478d74c7
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -7,11 +7,17 @@
|
|||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<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>Links</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>
|
||||
|
|
@ -21,15 +27,47 @@
|
|||
</h1>
|
||||
<section class="description">
|
||||
<h1>Made by</h1>
|
||||
<div class="list">
|
||||
<figure class="features">
|
||||
<img src="Images/Duck.png" alt="Profile picture of Ebsku">
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -11,17 +11,23 @@
|
|||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<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>Links</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">
|
||||
Countryle
|
||||
Flagle
|
||||
</h1>
|
||||
<div class="gamedle-section">
|
||||
1
|
||||
|
|
|
|||
|
|
@ -13,11 +13,17 @@
|
|||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<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>Links</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>
|
||||
|
|
@ -25,14 +31,14 @@
|
|||
<h1 class="title">
|
||||
Games
|
||||
</h1>
|
||||
<button>
|
||||
<a href="flagle.html">
|
||||
Flagle
|
||||
</a>
|
||||
</button>
|
||||
<button>
|
||||
Speechle
|
||||
</button>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,17 @@
|
|||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<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>Links</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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<!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>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
h1.title{
|
||||
.title{
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section.description {
|
||||
.description {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
|
@ -19,24 +19,24 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
header {
|
||||
background-color: rgb(42, 42, 42);
|
||||
background-image: url("Images/TopBarNight.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
background-position: top;
|
||||
padding: 2%;
|
||||
text-align: center;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
header .logo a{
|
||||
margin: 1%;
|
||||
background-image: url("Images/E-CafeIcon.png");
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background-size: 100%;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
text-indent: -999999999999999999999999999999px;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -48,7 +48,7 @@ ul {
|
|||
li {
|
||||
display: inline-block;
|
||||
margin: 0 7% 0 0;
|
||||
font-size: 40px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -69,24 +69,18 @@ a:hover {
|
|||
color: blue;
|
||||
}
|
||||
|
||||
iframe.discord {
|
||||
margin-top: 20%;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin-bottom: 0%;
|
||||
}
|
||||
|
||||
.features img {
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: gray 0 0 20px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.features {
|
||||
color: white;
|
||||
padding: 2%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -101,3 +95,43 @@ footer {
|
|||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.mobile {
|
||||
display: none;
|
||||
font-size: 28px;
|
||||
transform: scale(0.5, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.features {
|
||||
transform: scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
.discord {
|
||||
transform: scale(0.6, 0.6);
|
||||
}
|
||||
|
||||
header .mobile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
header .desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.discord {
|
||||
margin: 5%;
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
Loading…
Reference in New Issue