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

Styling #11

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Styling #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac2f420
styling complete...........
joseph-padfield Aug 15, 2024
036d07e
style tweaks
joseph-padfield Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 54 additions & 47 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Film Quote Game</title>
<title>Quote It</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
Expand All @@ -12,55 +12,62 @@
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
</head>
<body>
<header>
<h1 class="appTitle">Film Quote Game</h1>
</header>
<main>
<div class="topContainer">
<div class="timer">
<div class="timerDisplay"></div>
<meter value="" min="0" max="30" low=10 high=20 optimum="30" class="timerProgress"></meter>
</div>
<div class="gameButtons">
<div class="instructionsButton">Instructions</div>
<div class="modalContainer">
<div class="instructions">
<p>You have 30 seconds to prove you know your Rhett Butler from your Jack Torrence.</p>
<p>Once you hit start/play/other the quiz will run through famous movie quotes.</p>
<p>Each quote will have three possible films to select, and it’s down to you to choose the right one.</p>
<p>Once you click on an answer, there is no going back so make sure you’re happy with your choice.</p>
<p>Each correct answer gets a point, each wrong answer, well, better luck next time.</p>
<p>Keep going until the timer runs out, or the questions run out (NOT BLOODY LIKELY!)</p>
<p>With that all said and done, you’ve gotta ask yourself a question: “Do I feel lucky?”….Well, do ya, punk?</p>
<button class="closeButton">Close</button>
<div class="backgroundImageContainer">
<div class="backgroundImageFilter">
<header>
<h1 class="appTitle">Quote It!</h1>
</header>
<main>
<div class="topContainer">
<div class="timer">
<div class="timerDisplay"></div>
<meter value="" min="0" max="30" low=10 high=20 optimum="30" class="timerProgress"></meter>
</div>
<div class="gameButtons">
<div class="instructionsButton">Instructions</div>
<div class="modalContainer">
<div class="instructions">
<p>You have <span>30 seconds</span> to prove you know your Rhett Butler from your Jack
Torrence.</p>
<p>Once you hit <span>play</span> the quiz will run through famous movie quotes.</p>
<p>Each quote will have <span>three possible films</span> to select, and it’s down to
you to choose the right one.<br>(Once you click on an answer, there is no going
back!)</p>
<p>If you need a clue, the <span>hint</span> button will give you the <span>release
year</span> of the film.</p>
<p>With that all said and done, you’ve gotta ask yourself a question: <br><span>“Do I
feel lucky?”….Well, do ya, punk?"</span></p>
<button class="closeButton">Close</button>
</div>
</div>
<div class="play">Play</div>
</div>
<div class="scoreSection">
<p class="scoreLabel">Score:</p>
<div class="scoreBox"></div>
</div>
</div>
<div class="play">Play</div>
</div>
<div class="scoreSection">
<p class="scoreLabel">Score:</p>
<div class="scoreBox"></div>
</div>
</div>
<section class="gameScreen">
<div class="quoteContainer">
</div>
<div class="titleContainer">
</div>
<div class="hintContainer">
</div>
<dialog class="gameOverModal">
<div class="modalStyle">
<div class="modalContents">
<h2>GAME OVER!</h2>
<p class="score_intro">Your score: <span class="score"></span></p>
<form method="dialog">
<button class="btn reset">Reset</button>
</form>
<div class="gameScreen">
<div class="quoteContainer">
</div>
<div class="titleContainer">
</div>
<div class="hintContainer">
</div>
<dialog class="gameOverModal">
<div class="modalStyle">
<div class="modalContents">
<h2>GAME OVER!</h2>
<p class="score_intro">Your score: <span class="score"></span></p>
<form method="dialog">
<button class="btn reset">Reset</button>
</form>
</div>
</div>
</dialog>
</div>
</dialog>
</section>
</main>
</main>
</div>
</div>
</body>
</html>
Loading