maverick/Invention-Dice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

merge into: maverick:dev
Branches Tags
maverick:master
maverick:dev
...
pull from: maverick:master
Branches Tags
maverick:master
maverick:dev
Sign in to create a new pull request.

4 commits
dev ... master

Author SHA1 Message Date
Omar Najjar
8093c928ea
Update style.css 2025-07-11 12:49:02 +10:00
Omar Najjar
3c08701abb
Update style.sass 2025-07-11 12:47:51 +10:00
Omar Najjar
b3937f1dbd
updated index.html to make it more mobile responsive 2021-11-13 18:56:06 +11:00
Omar Najjar
07a3b5de97
updates styles to make them more mobile responsive 2021-11-13 18:55:24 +11:00
3 changed files with 24 additions and 11 deletions
Show stats Expand all files Collapse all files

23
index.html
View file

@ -7,17 +7,30 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
</head>
<body style="height: 214px; width: 900px; box-sizing: border-box; display: flex; align-items: center; justify-content: right; margin: 1em 5em; padding: 1em;" data-pen-title="Dice">
<body style="max-width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: left; margin: 1em 5em; padding: 1em; " data-pen-title="Dice">
<!-- partial:index.partial.html -->
<h1 class="header">Invention Game</h1>
<!-- Shows a question mark whilst loading--><img src="https://bit.ly/dice-unknown" id="dice"/><img src="https://bit.ly/dice-unknown" id="dice2"/><img src="https://bit.ly/dice-unknown" id="dice3"/><img src="https://bit.ly/dice-unknown" id="dice4"/><img src="https://bit.ly/dice-unknown" id="dice5"/><img src="https://bit.ly/dice-unknown" id="dice6"/>
<!-- When you click the div, it executes rollThatDice()-->
<div onclick="rollThatDice()">Roll That Dice</div>
<!-- <h1 class="header">Invention Game</h1> -->
<!-- Shows a question mark whilst loading-->
<div>
<img src="https://bit.ly/dice-unknown" id="dice"/>
<img src="https://bit.ly/dice-unknown" id="dice2"/>
<img src="https://bit.ly/dice-unknown" id="dice3"/>
<img src="https://bit.ly/dice-unknown" id="dice4"/>
<img src="https://bit.ly/dice-unknown" id="dice5"/>
<img src="https://bit.ly/dice-unknown" id="dice6"/>
</div>
<!-- When you click the div, it executes rollThatDice()-->
<button onclick="rollThatDice()">Roll That Dice</button>
<!-- A link to the roll sound you hear-->
<audio src="https://bit.ly/dice-sound" id="audio"></audio>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>

2
src/style.sass
View file

@ -4,7 +4,7 @@ body
width: 100vw
height: 100vh
font-family: 'Indie Flower', sans-serif
background-color: #303030
background-color: #4f2cce
color: #fff
display: flex
justify-content: center

10
style.css
View file

@ -1,7 +1,7 @@
@import url("https://fonts.googleapis.com/css?family=Indie+Flower");
body {
font-family: "Indie Flower", sans-serif;
background-color: #303030;
background-color: #4f2cce;
color: #fff;
display: -webkit-box;
display: flex;
@ -53,19 +53,19 @@ h1 {
}
div {
button {
font-size: 16px;
color: #fff;
background-color: #01944C;
height: auto;
border: none;
padding: 1px 80px;
padding: 10px 40px;
border-radius: 50px;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
=}
div:hover {
}
button:hover {
background-color: #fff;
color: #303030;
}