changing main menu theme
This commit is contained in:
Kybo09
parent
16da9da3c3
commit
5ad7a78f06
5 changed files with 78 additions and 27 deletions
17
index.html
17
index.html
|
|
@ -8,21 +8,20 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>KyFlo Snake</h1>
|
<h1 class="linear-wipe">KyFlo Snake</h1>
|
||||||
<div class="row menu">
|
<div class="row" id="menu">
|
||||||
<div class="col s6 offset-s3">
|
<div class="col s6 offset-s3">
|
||||||
<div class="col s10 offset-s1 input-field">
|
<div class="col s10 offset-s1" style="padding: 0">
|
||||||
<input type="text" id="nickname">
|
<input type="text" id="nickname" placeholder="Choose a nickname :">
|
||||||
<label for="nickname">Nickname :</label>
|
|
||||||
</div>
|
</div>
|
||||||
<button class="col s8 offset-s2">Level 1</button>
|
<button class="col s8 offset-s2">Level 1</button>
|
||||||
<button class="col s8 offset-s2">Level 2</button>
|
<button class="col s8 offset-s2">Level 2</button>
|
||||||
<button class="col s8 offset-s2">Level 3</button>
|
<button class="col s8 offset-s2">Level 3</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<canvas id="canvas"></canvas>
|
<canvas></canvas>
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
||||||
<script type="module" src="sources/js/index.js"></script>
|
<script type="module" src="sources/js/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,14 +1,18 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||||
|
|
||||||
|
html{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body{
|
body{
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-image: url("../images/yargon-kerman-webp-net-gifmaker-39.gif");
|
background-image: url("../images/51d84548-b50c-4f95-8e9e-d56c646d3ac4.gif");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1{
|
h1{
|
||||||
|
|
@ -16,29 +20,77 @@ h1{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: yellow;
|
color: yellow;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding-top: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu>div{
|
#menu{
|
||||||
background-color: black;
|
margin: 0;
|
||||||
|
margin-top: 150px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu button{
|
#menu>div{
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
padding: 50px;
|
||||||
|
border: 1px solid rgb(0, 255, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu button{
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: transparent;
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
border: 3px double #FF4294;
|
border: 3px double #FF4294;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 10px;
|
padding: 15px;
|
||||||
font-size: 20px;
|
text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
|
||||||
color: #FF4294;
|
color: black;
|
||||||
|
font-weight: 900;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 25px;
|
||||||
|
border-left: none;
|
||||||
|
border-bottom: none;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#canvas {
|
#menu button:hover{
|
||||||
height: 100%;
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
width: 100%;
|
}
|
||||||
right: 0;
|
|
||||||
top: 0;
|
.linear-wipe {
|
||||||
position: fixed;
|
background: linear-gradient(to right, rgb(255, 136, 0) 20%, #FF0 40%, #FF0 45%, rgb(255, 136, 0) 80%);
|
||||||
background: white;
|
background-size: 200% auto;
|
||||||
}
|
|
||||||
|
background-clip: text;
|
||||||
|
text-fill-color: transparent;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
|
||||||
|
animation: shine 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shine {
|
||||||
|
to {
|
||||||
|
background-position: 200% center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu input{
|
||||||
|
border: 3px double rgb(0, 255, 200);
|
||||||
|
color: rgb(0, 255, 200);
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
font-size: 35px;
|
||||||
|
padding: 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
::-webkit-input-placeholder, ::placeholder { /* Edge */
|
||||||
|
color: rgb(0, 255, 200);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
BIN
sources/images/51d84548-b50c-4f95-8e9e-d56c646d3ac4.gif
Normal file
BIN
sources/images/51d84548-b50c-4f95-8e9e-d56c646d3ac4.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
BIN
sources/images/5dc350fb8ef7a2c3dbdb1e3d4bc44083.gif
Normal file
BIN
sources/images/5dc350fb8ef7a2c3dbdb1e3d4bc44083.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
BIN
sources/sound/main.mp3
Normal file
BIN
sources/sound/main.mp3
Normal file
Binary file not shown.
Reference in a new issue