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>
|
||||
<body>
|
||||
<h1>KyFlo Snake</h1>
|
||||
<div class="row menu">
|
||||
<h1 class="linear-wipe">KyFlo Snake</h1>
|
||||
<div class="row" id="menu">
|
||||
<div class="col s6 offset-s3">
|
||||
<div class="col s10 offset-s1 input-field">
|
||||
<input type="text" id="nickname">
|
||||
<label for="nickname">Nickname :</label>
|
||||
<div class="col s10 offset-s1" style="padding: 0">
|
||||
<input type="text" id="nickname" placeholder="Choose a nickname :">
|
||||
</div>
|
||||
<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 3</button>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
<canvas></canvas>
|
||||
|
||||
<script type="module" src="sources/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +1,18 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||
|
||||
html{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 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-size: cover;
|
||||
backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
h1{
|
||||
|
|
@ -16,29 +20,77 @@ h1{
|
|||
text-align: center;
|
||||
color: yellow;
|
||||
margin: 0;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
.menu>div{
|
||||
background-color: black;
|
||||
#menu{
|
||||
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;
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 3px double #FF4294;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
font-size: 20px;
|
||||
color: #FF4294;
|
||||
padding: 15px;
|
||||
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: black;
|
||||
font-weight: 900;
|
||||
border-radius: 10px;
|
||||
font-size: 25px;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
transition-duration: 0.5s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
background: white;
|
||||
#menu button:hover{
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.linear-wipe {
|
||||
background: linear-gradient(to right, rgb(255, 136, 0) 20%, #FF0 40%, #FF0 45%, rgb(255, 136, 0) 80%);
|
||||
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