Skip to content

Instantly share code, notes, and snippets.

@WaffleGnome

WaffleGnome/GBA.html

Last active December 20, 2015 14:39
Show Gist options
  • Save WaffleGnome/6148105 to your computer and use it in GitHub Desktop.
Save WaffleGnome/6148105 to your computer and use it in GitHub Desktop.
Download ZIP
CSS gameboy - Just practicing some css. A CodePen by Waffle.
Raw
GBA.html
<!--made by waffle aka kescoe -->
<html>
<body>
<div id="base-shape">
<p id = "power"> POWER</p>
<div id = "power-light"></div>
<div id="screen">
<h3>GAMEBOY</h3>
<p>c<b style="color:purple">o</b><b style="color:green">l</b><b style="color:yellow">o</b><b style="color:#4e6fc9">r</b></p>
<div id="inner-screen"></div>
</div>
<div id ="nin">Nintendo</div>
<div id="Bottom-buttons">
<div id="select"><p>SELECT</p></div>
<div id="start"><p>START</p></div>
</div>
<div id="AB-buttons">
<div id="A">A</div>
<div id="B">B</div>
</div>
<div id="keypad">
<div id = "up"></div>
<div id = "down"></div>
<div id = "left"></div>
<div id = "right"></div>
<div id = "center"></div>
</div>
<div id="speaker">
<p>........</p><br/>
<p>........</p><br/>
<p>........</p><br/>
<p>........</p><br/>
<p>........</p><br/>
<p>........</p><br/>
</div>
</div>
</body>
</html>
Raw
script.js
// The buttons now have a hover effect //
Raw
style.css
#power{
z-index:100;
position:absolute;
line-height:40px;
margin-top:80px;
margin-left:25px;
font-size:8px;
font-weight:bold;
color:rgba(64, 63, 63, 0.60);
}
#power-light{
/*animation*/
-webkit-animation:blink 1s infinite alternate;
-moz-animation:blink 1s infinite alternate;
-ms-animation:blink 1s infinite alternate;
-o-animation:blink 1s infinite alternate;
animation:blink 1s infinite alternate;
position:absolute;
height:5px;
width:5px;
z-index:100;
/*border-radius*/
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
background-color:red;
margin-left:40px;
margin-top:85px;
}
@keyframes blink{
from {background:red;}
to {background:black;}
}
@-webkit-keyframes blink /* Safari and Chrome */
{
from {background: red;}
to {background: black;}
}
h3{
color:white;
position:absolute;
margin-top:190px;
margin-left:45px;
opacity:0.5;
}
p{
position:absolute;
color:red;
font:bold 20px Verdana;
margin-left:145px;
margin-top:185px;
}
#base-shape{
position:absolute;
background-color:green;
height:485px;
width:287px;
/*border-radius*/
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border-bottom-right-radius:80px 36px;
border-bottom-left-radius:80px 36px;
border-top:3px solid rgba(8, 227, 8, 0.75);
border-bottom:4px solid rgba(2, 93, 2, 0.78);
}
#screen{
position:absolute;
margin-left:20px;
margin-top:15px;
height:225px;
width:250px;
background-color:#212621;
/*border-radius*/
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border-bottom-right-radius:40px 18px;
border-bottom-left-radius:40px 18px;
border-top:3px solid rgba(0, 0, 0, 0.67);
border-bottom:2px solid rgba(25, 230, 25, 0.90);
}
#inner-screen{
position:absolute;
margin-left:43px;
margin-top:25px;
height:150px;
width:160px;
background-color:#363e36;
/*border-radius*/
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border:3px solid rgba(0, 0, 0, 0.67);
}
#select{
background-color:#212621;
height:12px;
width:25px;
/*border-radius*/
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
position:absolute;
margin-top:397px;
margin-left:110px;
border-bottom:4px solid rgba(2, 93, 2, 0.78);
}
#select p{
position:absolute;
line-height:40px;
margin-top:5px;
margin-left:-5px;
font-size:9px;
font-weight:bold;
color:rgba(64, 63, 63, 0.83);
}
#start{
background-color:#212621;
text-align:center;
line-height:40px;
font-size:9px;
font-weight:bold;
color:rgba(64, 63, 63, 0.83);
height:12px;
width:25px;
/*border-radius*/
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
position:absolute;
margin-top:397px;
margin-left:150px;
border-bottom:4px solid rgba(2, 93, 2, 0.78);
}
#start p{
position:absolute;
line-height:40px;
margin-top:5px;
margin-left:1px;
font-size:9px;
font-weight:bold;
color:rgba(64, 63, 63, 0.83);
}
#B{
height:35px;
width:35px;
text-align:center;
line-height:35px;
font-size:20px;
font-family:Verdana;
font-weight:bold;
color:rgba(64, 63, 63, 0.83);
background-color:#212621;
/*border-radius*/
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
position:absolute;
margin-top:312px;
margin-left:176px;
border-bottom:4px solid rgba(2, 93, 2, 0.78);
}
#A{
text-align:center;
line-height:35px;
font-size:20px;
font-weight:bold;
font-family:Verdana;
color:rgba(64, 63, 63, 0.83);
height:35px;
width:35px;
background-color:#212621;
/*border-radius*/
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
position:absolute;
margin-top:295px;
margin-left:230px;
border-bottom:4px solid rgba(2, 93, 2, 0.78);
}
#speaker{
position:absolute;
margin-left:65px;
margin-top:200px;
line-height:10px;
opacity:0.7;
}
#speaker p{
color:black;
}
#nin{
font:bold 12px Verdana;
color: rgba(2, 93, 2, 0.78);
margin-top:255px;
margin-left: 110px;
position:absolute;
border:solid 2px rgba(2, 93, 2, 0.58);
border-radius:20px;
padding:2px;
}
#left{
height: 25px;
width:25px;
position:absolute;
background-color: #212621;
margin-top:310px;
margin-left:25px;
}
#right{
height: 25px;
width:25px;
position:absolute;
background-color:#212621;
margin-top:310px;
margin-left:75px;
border-bottom:7px solid rgba(2, 93, 2, 0.78);
}
#up{
height: 25px;
width:25px;
position:absolute;
background-color:#212621;
margin-top:285px;
margin-left:50px;
border-right:6px solid rgba(2, 93, 2, 0.78);
}
#down{
height: 25px;
width:25px;
position:absolute;
background-color:#212621;
margin-top:335px;
margin-left:50px;
border-right:7px solid rgba(2, 93, 2, 0.78);
}
#center{
height: 25px;
width:25px;
position:absolute;
background-color:#212621;
margin-top:310px;
margin-left:50px;
}
#A:hover{
margin-top:296px;
height:33px;
width:33px;
}
#B:hover{
margin-top:313px;
height:33px;
width:33px;
}
#start:hover{
height:11px;
width:24px;
margin-top:398px;
}
#select:hover{
height:11px;
width:24px;
margin-top:398px;
}
#right:hover{
height: 24px;
width:24px;
margin-top:311px;
}
#left:hover{
height: 24px;
width:24px;
margin-left:26px;
margin-top:311px;
}
#up:hover{
height: 25px;
width:24px;
margin-top:287px;
}
#down:hover{
height: 24px;
width:24px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment