Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gamestart #92

Merged
merged 5 commits into from Apr 18, 2019
Merged

Gamestart #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0b523d8
Merge branch 'master' of https://github.com/devonhackley/ticTacQuiz i…
devonhackley Apr 18, 2019
1d5ba0d
removed uneeded button
devonhackley Apr 18, 2019
f4bf076
Merge branch 'master' of https://github.com/devonhackley/ticTacQuiz i…
devonhackley Apr 18, 2019
838d0d8
removed uneeded button
devonhackley Apr 18, 2019
2bcc3ea
changed to class, so we can use in other forms
devonhackley Apr 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 18 additions & 28 deletions css/style.css
View file
Open in desktop
@@ -1,6 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
@import url('https://fonts.googleapis.com/css?family=Galindo');
@import url('https://fonts.googleapis.com/css?family=Heebo:900');
@import url('https://fonts.googleapis.com/css?family=Heebo:700');


.profilePic {
Expand Down Expand Up @@ -80,7 +80,7 @@ main {
height: 300px;
margin: 30px auto 0px;
box-shadow: 0 10px 20px 0 rgba(39, 38, 38,2);
transition: 0.6s;
transition: 3s;
}
#game-menu form {
width: 100%;
Expand All @@ -98,6 +98,7 @@ main {

#game-menu form button:hover{
background: #00FF00;
opacity: 0.9;
color: rgb(50, 10, 51);
}
#game-menu form button:active {
Expand Down Expand Up @@ -138,8 +139,8 @@ form button:focus{
background: magenta;
}

/******************* GameStart CSS *****************/
#game-start {
/******************* Form CSS *****************/
.form-container {
width: 50%;
height: 610px;
background: #fff;
Expand All @@ -149,7 +150,7 @@ form button:focus{
transition: 0.6s;
font-family: 'Heebo', sans-serif;
}
#game-start h2 {
.form-container h2 {
height: 40px;
background-color: #ddd;
padding-left: 30px;
Expand All @@ -159,34 +160,35 @@ form button:focus{
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#gameStartForm {
width: 65%;
.gameForm {
width: 100%;
margin-left: 50px;
margin-top: 15px;
font-size: 22px;
letter-spacing: 2px;
}

#gameStartForm label {
.gameForm label {
margin-bottom: 10px;
}
#gameStartForm input {
.gameForm input {
margin-left: 2px;
margin-bottom: 10px;
width: 425px;
height: 20px;
}
#gameStartForm select {
width: 270px;
.gameForm select {
width: 425px;
font-family: 'Heebo', sans-serif;
font-size: 16px;
margin-right: 30px;
cursor: pointer;
}
#gameStartForm select:focus {
.gameForm select:focus {
text-decoration: none;
outline: none;
}
#gameStartForm input[type="radio"] {
.gameForm input[type="radio"] {
position: relative;
cursor: pointer;
font-size: 22px;
Expand All @@ -201,22 +203,9 @@ form button:focus{
margin-right: 18px;
/* font-size: 18px; */
}
#create-quiz-btn {
width: 130px;
height: 40px;
font-size: 16px;
border-radius: 4px;
font-family: 'Heebo', sans-serif;
background: #85797d;
color: #fff;
}
#create-quiz-btn:active {
background-color: rgb(29, 26, 27);
box-shadow: 0 5px #666;
transform: translateY(4px);
}
#button-container button {
margin-top: 10px;
margin-top: 20px;
margin-left: 60%;
width: 180px;
height: 50px;
border-radius: 6px;
Expand All @@ -236,6 +225,7 @@ form button:focus{

#button-container button:hover {
background: rgb(149, 0, 32);
opacity: 0.9;
color:#fff;
}
#button-container button:active {
Expand Down
5 changes: 2 additions & 3 deletions gamestart.html
View file
Open in desktop
Expand Up @@ -18,9 +18,9 @@
<a href="leaderboard.html">Leaderboard</a>
</nav>
</header>
<div id="game-start">
<div id="game-start" class="form-container">
<h2>Game Info</h2>
<form id="gameStartForm" action="play.html">
<form id="gameStartForm" class="gameForm" action="play.html">
<label for="playerOneName">Player 1 Name:</label>
<br>
<input type="text" name="playerOne" required>
Expand Down Expand Up @@ -49,7 +49,6 @@ <h2>Game Info</h2>
<label for="quizSelection">Select your Quiz:</label>
<br>
<select id="questionsSelection"></select>
<button id="create-quiz-btn" onclick="location.href='./createquiz.html'" id="quizCreateBtn">Create Quiz</button>
<div id="button-container">
<button id="gameStartFormButton" value="Start Game"> Start Game</button>
</div>
Expand Down