Skip to content

Instantly share code, notes, and snippets.

@rayinla
Created November 29, 2018 16:37
Show Gist options
  • Save rayinla/6d10ce87bb46f388f9aece597ce34a12 to your computer and use it in GitHub Desktop.
Save rayinla/6d10ce87bb46f388f9aece597ce34a12 to your computer and use it in GitHub Desktop.
body {
font-family: "Rubik Mono One", sans-serif;
}
h1 {
position: absolute;
left: 40%;
}
.sandbox {
margin-top: 10px;
position: relative;
left: 40%;
padding: 10px;
border: 1px solid #e3dedb;
border-radius: 4px;
width: 350px;
overflow: hidden;
-webkit-box-shadow: 3px 2px 5px -3px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 2px 5px -3px rgba(0, 0, 0, 0.75);
box-shadow: 3px 2px 5px -3px rgba(0, 0, 0, 0.75);
background: rgb(255, 255, 255); /* Old browsers */
background: -moz-linear-gradient(
top,
rgba(255, 255, 255, 1) 0%,
rgba(241, 241, 241, 1) 50%,
rgba(225, 225, 225, 1) 51%,
rgba(246, 246, 246, 1) 100%
); /* FF3.6-15 */
background: -webkit-linear-gradient(
top,
rgba(255, 255, 255, 1) 0%,
rgba(241, 241, 241, 1) 50%,
rgba(225, 225, 225, 1) 51%,
rgba(246, 246, 246, 1) 100%
); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1) 0%,
rgba(241, 241, 241, 1) 50%,
rgba(225, 225, 225, 1) 51%,
rgba(246, 246, 246, 1) 100%
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#ffffff",
endColorstr="#f6f6f6",
GradientType=0
); /* IE6-9 */
}
.score-brd {
width: 100px;
height: 50px;
border: 1px solid #000;
margin-bottom: 20px;
position: relative;
left: 0px;
text-align: center;
background-color: #000;
color: red;
}
.score {
font-size: 28px;
margin-top: 10px;
}
.hole {
width: 100px;
height: 100px;
border: 1px solid #e3dedb;
border-radius: 100px;
margin-top: 8px;
margin-left: 10px;
margin-bottom: 10px;
overflow: hidden;
background: rgba(0, 0, 0, 1);
background: -moz-linear-gradient(
left,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 100%
);
background: -webkit-gradient(
left top,
right top,
color-stop(0%, rgba(0, 0, 0, 1)),
color-stop(100%, rgba(0, 0, 0, 0.85))
);
background: -webkit-linear-gradient(
left,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 100%
);
background: -o-linear-gradient(
left,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 100%
);
background: -ms-linear-gradient(
left,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 100%
);
background: linear-gradient(
to right,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 0.85) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#000000",
endColorstr="#000000",
GradientType=1
);
}
.row {
display: flex;
flex-direction: row;
}
.frmp-hd {
height: 150px;
position: relative;
top: -20px;
left: 300px;
}
.frmp-hd:hover {
cursor: pointer;
}
.wobble {
animation: wobble 4s infinite;
}
.wobbler {
animation: wobble 2s infinite;
}
@keyframes wobble {
0%,
100% {
left: 0%;
}
50% {
left: 60%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment