Skip to content

Instantly share code, notes, and snippets.

@rachsmithcodes

rachsmithcodes/funtendo.markdown

Created September 7, 2017 04:14
Show Gist options
  • Save rachsmithcodes/cad9861ae64ee44190d0b05acb5a17e1 to your computer and use it in GitHub Desktop.
Save rachsmithcodes/cad9861ae64ee44190d0b05acb5a17e1 to your computer and use it in GitHub Desktop.
Download ZIP
Funtendo
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<title>UP UP DOWN DOWN LEFT RIGHT LEFT RIGHT B A START</title>
</head>
<body>
<div class="controller-cord"></div>
<div class="controller-outer-box">
<div class="controller-cord-connection"></div>
<div class="controller-inner-box">
<div class="left-inner-box">
<div class="up-down-outer-box">
</div>
<div class="left-right-outer-box">
</div>
<div class="up-down-inner-shadow">
</div>
<div class="left-right-inner-shadow">
</div>
<div class="up-down-inner-box">
<div class="up-arrow"></div>
<div class="down-arrow"></div>
</div>
<div class="left-right-inner-box">
<div class="left-arrow"></div>
<div class="center-circle"></div>
<div class="right-arrow"></div>
</div>
</div>
<div class="center-inner-box">
<div class="center-decorative-box" id="one">
</div><br />
<div class="center-decorative-box" id="two">
</div><br />
<div class="center-decorative-box" id="three">
<div class="select-start-text">SELECT START</div>
</div>
<div class="center-button-box">
<div class="center-button-box-inner-border">
<div class="left-button"></div>
<div class="right-button"></div>
</div>
</div><br />
<div class="center-decorative-box" id="four">
</div>
</div>
<div class="right-inner-box">
<div class="system-text">Funtendo</div><br />
<div class="b-a-buttons-container">
<div class="b-button-container">
<div class="b-button-outer-box">
<div class="b-button">
</div>
</div>
<div class="b-button-text">B</div>
</div>
<div class="a-button-container">
<div class="a-button-outer-box">
<div class="a-button">
</div>
</div>
<div class="a-button-text">A</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
body {
background: #5eaec5;
font-family: 'Press Start 2P', cursive;
}
.controller-cord {
position: fixed;
background: black;
top: -5%;
left: 37%;
width: 1vw;
height: 55%;
}
.controller-cord-connection {
background: #bdbdbd;
position: fixed;
left: 11.25vw;
width: 2vw;
height: 1vw;
border-left: 0.001vw solid #8D8C8A;
border-right: 0.001vw solid #8D8C8A;
border-bottom: 0.001vw solid #8D8C8A;
border-bottom-right-radius: 0.25vw;
border-bottom-left-radius: 0.25vw;
}
.controller-outer-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #D0CFCB;
width: 50vw;
height: 20vw;
border-radius: 0.25vw;
box-shadow: 0vw 0vw 0.05vw 0.05vw #2C2823;
}
.controller-inner-box {
background: #36312C;
position: relative;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
width: 48vw;
height: 16vw;
border-radius: 0.25vw;
}
.left-inner-box {
position: fixed;
width: 16vw;
height: 16vw;
}
.center-inner-box {
position: fixed;
left: 16vw;
width: 12vw;
height: 16vw;
}
.right-inner-box {
position: fixed;
left: 30vw;
width: 18vw;
height: 16vw;
}
.center-decorative-box {
position: fixed;
background: #A3A2A0;
width: 14vw;
height: 2vw;
}
.center-button-box {
position: fixed;
background: #A3A2A0;
width: 14vw;
height: 4vw;
top: 9vw;
border-radius: 0.25vw;
}
#one {
border-bottom-right-radius: 0.25vw;
border-bottom-left-radius: 0.25vw;
}
#two {
top: 3vw;
border-radius: 0.25vw;
}
#three {
top: 6vw;
border-radius: 0.25vw;
}
#four {
top: 14vw;
border-top-right-radius: 0.25vw;
border-top-left-radius: 0.25vw;
}
.select-start-text {
position: relative;
top: 50%;
left: 57%;
transform: translate(-50%, -50%);
font-size: 1vw;
color: red;
}
.center-button-box-inner-border {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 13.25vw;
height: 3.25vw;
border: 0.001vw solid #8D8C8A;
border-radius: 0.25vw;
}
.left-button {
background: #2C2823;
position: fixed;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
width: 4.5vw;
height: 1.5vw;
border-radius: 0.25vw;
box-shadow: 0vw -0.15vw 0vw 0.2vw black;
}
.right-button {
background: #2C2823;
position: fixed;
top: 50%;
left: 75%;
transform: translate(-50%, -50%);
width: 4.5vw;
height: 1.5vw;
border-radius: 0.25vw;
box-shadow: 0vw -0.15vw 0vw 0.2vw black;
}
.up-down-outer-box {
position: fixed;
top: 58%;
left: 8vw;
transform: translate(-50%, -50%);
background: #D0CFCB;
width: 4vw;
height: 11vw;
border-radius: 0.4vw;
}
.left-right-outer-box {
position: fixed;
top: 58%;
left: 8vw;
transform: translate(-50%, -50%);
background: #D0CFCB;
width: 11vw;
height: 4vw;
border-radius: 0.4vw;
}
.up-down-inner-shadow {
position: fixed;
top: 58%;
left: 8vw;
transform: translate(-50%, -50%);
background: black;
width: 3.5vw;
height: 10.5vw;
border-radius: 0.4vw;
}
.left-right-inner-shadow {
position: fixed;
top: 58%;
left: 8vw;
transform: translate(-50%, -50%);
background: black;
width: 10.5vw;
height: 3.5vw;
border-radius: 0.4vw;
}
.up-down-inner-box {
position: fixed;
top: 58%;
left: 8vw;
transform: translate(-50%, -50%);
background: #2C2823;
width: 3vw;
height: 10vw;
border-radius: 0.25vw;
}
.left-right-inner-box {
position: fixed;
top: 58%;
left: 8vw;
transform: translate(-50%, -50%);
background: #2C2823;
width: 10vw;
height: 3vw;
border-radius: 0.25vw;
}
.left-arrow {
position: fixed;
top: 1.5vw;
left: 1.5vw;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-top: 1vw solid transparent;
border-bottom: 1vw solid transparent;
border-right: 2.5vw solid #363330;
}
.center-circle {
background: #363330;
border-radius: 2.5vw;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2.75vw;
height: 2.75vw;
}
.right-arrow {
position: fixed;
top: 1.5vw;
left: 8.5vw;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-top: 1vw solid transparent;
border-bottom: 1vw solid transparent;
border-left: 2.5vw solid #363330;
}
.up-arrow {
position: fixed;
top: 1.5vw;
left: 1.5vw;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 1vw solid transparent;
border-right: 1vw solid transparent;
border-bottom: 2.5vw solid #363330;
}
.down-arrow {
position: fixed;
top: 8.5vw;
left: 1.5vw;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 1vw solid transparent;
border-right: 1vw solid transparent;
border-top: 2.5vw solid #363330;
}
.system-text {
position: relative;
top: 3.5vw;
left: 13vw;
transform: translate(-50%, -50%);
font-size: 1.2vw;
color: red;
}
.b-a-buttons-container {
position: fixed;
top: 12.25vw;
left: 38.5vw;
transform: translate(-50%, -50%);
width: 10vw;
height: 6.5vw;
}
.b-button-container {
position: fixed;
top: 3vw;
left: 2vw;
transform: translate(-50%, -50%);
width: 4.5vw;
height: 7vw;
}
.b-button-outer-box {
background: #D0CFCB;
position: fixed;
top: 2.5vw;
left: 2.5vw;
transform: translate(-50%, -50%);
width: 5vw;
height: 5vw;
border-radius: 0.5vw;
}
.b-button {
background: red;
position: fixed;
top: 2.5vw;
left: 2.5vw;
transform: translate(-50%, -50%);
width: 4vw;
height: 4vw;
border-radius: 4vw;
box-shadow: -0.05vw -0.15vw 0vw 0.05vw black;
}
.b-button-text {
position: fixed;
top: 6.25vw;
left: 4.5vw;
transform: translate(-50%, -50%);
text-align: right;
color: red;
font-size: 1.25vw;
}
.a-button-container {
position: fixed;
top: 3vw;
left: 8vw;
transform: translate(-50%, -50%);
width: 4.5vw;
height: 7vw;
text-align: right;
color: red;
}
.a-button-outer-box {
background: #D0CFCB;
position: fixed;
top: 2.5vw;
left: 2.5vw;
transform: translate(-50%, -50%);
width: 5vw;
height: 5vw;
border-radius: 0.5vw;
}
.a-button {
background: red;
position: fixed;
top: 2.5vw;
left: 2.5vw;
transform: translate(-50%, -50%);
width: 4vw;
height: 4vw;
border-radius: 4vw;
box-shadow: -0.05vw -0.15vw 0vw 0.05vw black;
}
.a-button-text {
position: fixed;
top: 6.25vw;
left: 4.5vw;
transform: translate(-50%, -50%);
text-align: right;
color: red;
font-size: 1.25vw;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment