Scribd
Upload
405 views4 pages

Game Interface Style Guide

Uploaded by

muhammad.19683
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
405 views4 pages

Game Interface Style Guide

Uploaded by

muhammad.19683
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

/* style.

css */
body {
font-family: 'Arial', sans-serif;
margin: 0;
background-color: #f8f8f8;
color: #333;
line-height: 1.6;
}

header {
background-color: #2c3e50;
color: white;
padding: 30px 20px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

main {
padding: 30px;
}

#game-list h2 {
margin-top: 0;
color: #34495e;
margin-bottom: 20px;
text-align: center;
}

.game-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-bottom: 30px;
}

.game-card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s ease-in-out;
}

.game-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.game-card img {
display: block;
width: 100%;
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.game-card-content {
padding: 20px;
text-align: center;
}

.game-card h3 {
margin-top: 0;
margin-bottom: 10px;
color: #34495e;
}

.game-card p {
font-size: 0.95em;
color: #777;
margin-bottom: 15px;
}

.play-button {
background-color: #3498db;
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.2s ease-in-out;
}

.play-button:hover {
background-color: #2980b9;
}

#game-area {
text-align: center;
padding: 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#game-area h2 {
color: #34495e;
margin-bottom: 20px;
}

#game-canvas-container {
margin: 20px auto;
}

#back-to-menu {
background-color: #7f8c8d;
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
margin-top: 30px;
transition: background-color 0.2s ease-in-out;
}

#back-to-menu:hover {
background-color: #616a6b;
}

.hidden {
display: none;
}

footer {
text-align: center;
padding: 20px;
background-color: #2c3e50;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}

/* Clicker Game Styles */


.clicker-container {
display: flex;
flex-direction: column;
align-items: center;
}

.click-button {
background-color: #27ae60;
color: white;
border: none;
padding: 15px 30px;
border-radius: 10px;
cursor: pointer;
font-size: 1.2em;
margin-top: 20px;
transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.click-button:hover {
background-color: #219653;
}

.click-button:active {
transform: scale(0.95);
}

/* Color Guessing Game Styles */


.color-guess-container {
display: flex;
flex-direction: column;
align-items: center;
}

.color-display {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #ccc;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.color-guess-container input[type="text"] {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1em;
text-align: center;
}

.color-guess-container button {
background-color: #f39c12;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.2s ease-in-out;
}

.color-guess-container button:hover {
background-color: #e68a00;
}

.color-guess-container p {
margin-top: 15px;
font-weight: bold;
color: #555;
}

You might also like