ajax/games
1
0
Fork 0
mirror of https://github.com/hexahigh/games.git synced 2025-12-11 20:15:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

css is hard :(

Browse Source
This commit is contained in:
Boof 2022-10-21 13:10:54 +02:00 committed by GitHub
parent 02e56ffff2
commit 6034c7414d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
style.css
View File

@ -1,87 +0,0 @@
@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;
}
.win {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-10deg);
transform-origin: 50% 50%;
transform-origin: center;
width: 300px;
height: 300px;
margin-top: -60px;
margin-left: -20px;
padding-top: 140px;
font-family: "Permanent Marker", cursive;
text-align: center;
}
.win h2 {
display: block;
margin: 0 0 10px;
font-size: 100px;
text-shadow: 0px 0px 50px white;
text-align: center;
}
.win button {
cursor: pointer;
transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
outline: none;
display: inline-block;
padding: 15px;
background-color: darkred;
border: none;
border-radius: 10px;
font-family: "Permanent Marker", cursive;
font-size: 20px;
color: white;
}
.win button:hover {
transform: scale(1.1);
}