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

21
index.html
View file

@ -7,17 +7,30 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
</head> </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 --> <!-- partial:index.partial.html -->
<h1 class="header">Invention Game</h1> <!-- <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"/> <!-- 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()--> <!-- When you click the div, it executes rollThatDice()-->
<div onclick="rollThatDice()">Roll That Dice</div> <button onclick="rollThatDice()">Roll That Dice</button>
<!-- A link to the roll sound you hear--> <!-- A link to the roll sound you hear-->
<audio src="https://bit.ly/dice-sound" id="audio"></audio> <audio src="https://bit.ly/dice-sound" id="audio"></audio>
<!-- partial --> <!-- partial -->
<script src="./script.js"></script> <script src="./script.js"></script>
</body> </body>
</html> </html>

2
src/style.sass
View file

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

10
style.css
View file

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