Mobile scaling
This commit is contained in:
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>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul class="desktop">
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="games.html">Games</a></li>
|
<li><a href="games.html">Games</a></li>
|
||||||
<li class="logo"><a href="index.html"></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>
|
<li><a href="about.html">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -21,15 +27,47 @@
|
||||||
</h1>
|
</h1>
|
||||||
<section class="description">
|
<section class="description">
|
||||||
<h1>Made by</h1>
|
<h1>Made by</h1>
|
||||||
<figure class="features">
|
<div class="list">
|
||||||
<img src="Images/Duck.png" alt="Profile picture of Ebsku">
|
<figure class="features">
|
||||||
<figcaption>Ebsku</figcaption>
|
<img src="https://crafatar.com/avatars/e670d4ab-a396-4c0d-bd6d-0fb8742e0a83" alt="Minecraft head of Ebsku">
|
||||||
</figure>
|
<figcaption>Ebsku</figcaption>
|
||||||
</section>
|
</figure>
|
||||||
<iframe
|
<figure class="features">
|
||||||
class="discord"
|
<img src="https://crafatar.com/avatars/e39e3289-dbd4-420c-8197-5b5141c4837f" alt="Minecraft head of Jorvents">
|
||||||
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">
|
<figcaption>Jorvents</figcaption>
|
||||||
</iframe>
|
</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>
|
<footer>
|
||||||
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
|
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -11,17 +11,23 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul class="desktop">
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="games.html">Games</a></li>
|
<li><a href="games.html">Games</a></li>
|
||||||
<li class="logo"><a href="index.html"></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>
|
<li><a href="about.html">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<h1 class="title">
|
<h1 class="title">
|
||||||
Countryle
|
Flagle
|
||||||
</h1>
|
</h1>
|
||||||
<div class="gamedle-section">
|
<div class="gamedle-section">
|
||||||
1
|
1
|
||||||
|
|
|
@ -13,11 +13,17 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul class="desktop">
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="games.html">Games</a></li>
|
<li><a href="games.html">Games</a></li>
|
||||||
<li class="logo"><a href="index.html"></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>
|
<li><a href="about.html">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
@ -25,14 +31,14 @@
|
||||||
<h1 class="title">
|
<h1 class="title">
|
||||||
Games
|
Games
|
||||||
</h1>
|
</h1>
|
||||||
<button>
|
<section class="description">
|
||||||
<a href="flagle.html">
|
<div class="list">
|
||||||
Flagle
|
<figure class="features">
|
||||||
</a>
|
<a href="flagle.html"><img src="Images/Flagle.png" alt="Flagle logo"></a>
|
||||||
</button>
|
<figcaption>Flagle</figcaption>
|
||||||
<button>
|
</figure>
|
||||||
Speechle
|
</div>
|
||||||
</button>
|
</section>
|
||||||
<footer>
|
<footer>
|
||||||
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
|
<a href="https://discord.gg/UwcQBWF6vF" target="_blank" rel="noopener noreferrer">Discord</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -7,11 +7,17 @@
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul class="desktop">
|
||||||
<li><a href="index.html">Home</a></li>
|
<li><a href="index.html">Home</a></li>
|
||||||
<li><a href="games.html">Games</a></li>
|
<li><a href="games.html">Games</a></li>
|
||||||
<li class="logo"><a href="index.html"></a></li>
|
<li class="logo"><a href="index.html">E-Cafe</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>
|
<li><a href="about.html">About</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</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;
|
font-size: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
section.description {
|
.description {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
|
@ -19,24 +19,24 @@ body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
background-color: rgb(42, 42, 42);
|
|
||||||
background-image: url("Images/TopBarNight.png");
|
background-image: url("Images/TopBarNight.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
background-position: center;
|
background-position: top;
|
||||||
padding: 2%;
|
padding: 2%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .logo a{
|
header .logo a{
|
||||||
margin: 1%;
|
|
||||||
background-image: url("Images/E-CafeIcon.png");
|
background-image: url("Images/E-CafeIcon.png");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
height: 200px;
|
height: 150px;
|
||||||
width: 200px;
|
width: 150px;
|
||||||
|
text-indent: -999999999999999999999999999999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
@ -48,7 +48,7 @@ ul {
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0 7% 0 0;
|
margin: 0 7% 0 0;
|
||||||
font-size: 40px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
@ -69,24 +69,18 @@ a:hover {
|
||||||
color: blue;
|
color: blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
iframe.discord {
|
|
||||||
margin-top: 20%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: left;
|
|
||||||
margin-bottom: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features img {
|
.features img {
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: gray 0 0 20px;
|
box-shadow: gray 0 0 20px;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.features {
|
.features {
|
||||||
color: white;
|
color: white;
|
||||||
padding: 2%;
|
padding: 2%;
|
||||||
display: flex;
|
display: inline-block;
|
||||||
flex-direction: row;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -100,4 +94,44 @@ footer {
|
||||||
bottom:0;
|
bottom:0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1;
|
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