This commit is contained in:
Boof 2022-11-14 13:52:51 +01:00 committed by GitHub
parent f08446bfc5
commit e257d645a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 68 additions and 14 deletions

View File

@ -6,7 +6,13 @@
<title>Bad website</title> <title>Bad website</title>
<link rel="stylesheet" href="style.css" Type="text/css" media="all"> <link rel="stylesheet" href="style.css" Type="text/css" media="all">
<script src="index.js"></script> <script src="index.js"></script>
<div id="grad"> <div id="app">
<transition v-on:enter="enter" v-bind:css="false" appear>
<div class="butter-cheese-eggs" v-show="true">
<div v-for="(block, index) in grid" @click="select(index)">
<block :figure.sync="block.figure" />
</div>
</div>
<img onclick="window.location.href='http://gg.gg/b0gamead2'" class="alignnone size-full wp-image-1303" class="floatRight" src="/files/img/qm5solke 2.png" alt="" width="318.75" height="468.75" id="hp"/></div> <img onclick="window.location.href='http://gg.gg/b0gamead2'" class="alignnone size-full wp-image-1303" class="floatRight" src="/files/img/qm5solke 2.png" alt="" width="318.75" height="468.75" id="hp"/></div>
<p>On this website i host games and other stuff.</p> <p>On this website i host games and other stuff.</p>
<h1 style="font-size:2vw">Contact:</h1> <h1 style="font-size:2vw">Contact:</h1>
@ -19,4 +25,3 @@
<p><a href="http://boofv2.c1.biz/">Donate</a></p> <p><a href="http://boofv2.c1.biz/">Donate</a></p>
<p><a href="/Games/">Games</a></p> <p><a href="/Games/">Games</a></p>
<p><a href="/tools/">Tools</a></p> <p><a href="/tools/">Tools</a></p>
</div>

View File

@ -14,3 +14,52 @@
height: 200px; height: 200px;
background-image: linear-gradient(cyan, blue); background-image: linear-gradient(cyan, blue);
} }
@import url("https://fonts.googleapis.com/css?family=Permanent+Marker");
* {
box-sizing: border-box;
}
#app {
display: flex;
overflow: hidden;
position: relative;
width: 100vw;
height: 100vh;
background-image: linear-gradient(blue, cyan);
}
.butter-cheese-eggs {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
}
.butter-cheese-eggs > div {
flex: 0 0 auto;
width: 100px;
height: 100px;
}
.butter-cheese-eggs > div .block {
cursor: pointer;
display: table-cell;
width: 100px;
height: 100px;
font: bold 50px/0 "Comic Sans MS", sans-serif;
vertical-align: middle;
text-align: center;
}
.butter-cheese-eggs > div:nth-child(1), .butter-cheese-eggs > div:nth-child(2), .butter-cheese-eggs > div:nth-child(3), .butter-cheese-eggs > div:nth-child(4), .butter-cheese-eggs > div:nth-child(5), .butter-cheese-eggs > div:nth-child(6) {
border-bottom: 3px solid #fff;
}
.butter-cheese-eggs > div:nth-child(2), .butter-cheese-eggs > div:nth-child(5), .butter-cheese-eggs > div:nth-child(8) {
border-left: 3px solid #fff;
border-right: 3px solid #fff;
}
.butter-cheese-eggs span {
display: block;
}