Add DropTheNumber

DropTheNumbers/README.md

@@ -0,0 +1,7 @@
+Drop The Numbers Game
+by Michal & Gila (@gilakassab)
+
+Drop The Numbers Game
+Collect points by merging number cubes!
+2 cubes that connect become a cube with a higher number, and the higher the number, the higher the points!
+Play as far as you can without reaching the top of the board, because when you get there, you'll lose!

DropTheNumbers/css/game.css

@@ -0,0 +1,221 @@
+* {
+  font-weight: bold;
+  font-family: 'Assistant ExtraLight';
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: 'Assistant ExtraLight';
+  src: url('../font/Assistant\ Extra\ Light.woff') format('woff');
+}
+
+
+body {
+  background-image: url("../images/pic1111.jpg");
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 105%;
+  max-width: unset;
+  position: relative;
+}
+
+html {
+  size: 100%;
+  height: 100%;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  background-color: white;
+  border-radius: 5px;
+  width: 385px;
+  height: 559px;
+  top: 35%;
+  margin-right: 40%;
+  color: #8a8cdb
+}
+
+.grid-item {
+  position: relative;
+  text-align: center;
+  background-color: #070975;
+  border: ridge #070975;
+  border-radius: 10px;
+  font-size: 40px;
+  font-weight: bold;
+  font-family: monospace;
+  width: 80px;
+  height: 80px;
+  color: white;
+}
+
+
+.start-btn {
+  position: absolute;
+  width: 120px;
+  height: 60px;
+  color: #070975;
+  font-size: medium;
+  font-family: fantasy;
+  border: #070975 ridge;
+  justify-content: center;
+  text-align: center;
+  background-color: white;
+}
+
+#start-btn {
+  margin-right: 15%;
+  top: 36%;
+
+  width: 126px;
+  height: 66px;
+}
+
+#stage1 {
+  text-align: start;
+  margin-right: 15%;
+  top: 23%;
+}
+
+#stage2 {
+  text-align: start;
+  margin-right: 20%;
+  top: 23%;
+
+}
+
+#stage3 {
+  text-align: start;
+  margin-right: 25%;
+  top: 23%;
+}
+
+h4 {
+  color: #070975;
+  background-color: white;
+  position: absolute;
+  margin-right: 15%;
+  top: 13%;
+  font-size: 20px;
+}
+
+#score {
+
+  justify-content: center;
+  text-align: center;
+  margin-right: 15%;
+  top: 49%;
+}
+
+#maxScore {
+
+  text-align: center;
+  margin-right: 15%;
+  top: 62%;
+}
+
+#new-game {
+  margin-right: 15%;
+  top: 75%;
+  width: 126px;
+  height: 66px;
+}
+
+.start-btn:hover {
+  background-color: #070975;
+  color: white;
+}
+
+h3 {
+  font-size: 35px;
+  top: 5%;
+  margin-right: 75%;
+  color: white;
+  position: relative;
+
+}
+
+h3 {
+  animation-name: rotate;
+  animation-duration: 0.7s;
+  animation-direction: alternate;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+    color: white;
+  }
+
+  100% {
+    transform: rotate(360deg);
+    color: #070975;
+  }
+}
+
+#audio {
+  font-size: 40px;
+  color: white;
+  position: absolute;
+  top:123%;
+  left: 2%;
+  border: none;
+  background-color: rgb(107, 143, 193);
+}
+
+#sendHome {
+  position: absolute;
+  top: 0;
+  left: 1%;
+  width: 80px;
+  height: 60px;
+  font-size: 50px;
+  border: none;
+  background-color: #070975
+}
+
+.gameOver {
+  text-align: center;
+  font-size: 20px;
+}
+
+.gameOver:hover {
+  animation-name: rotate;
+  animation-duration: 0.7s;
+  animation-direction: alternate;
+}
+
+#instructions {
+  position: absolute;
+  width: 50;
+  height: 300;
+  top: 23%;
+  left: 8%;
+  background-color: rgba(53, 50, 56, 0.2);
+  color: white;
+}
+
+
+#instructions h2 {
+  text-align: left;
+  font-size: 30px;
+}
+
+
+#instructions p {
+  font-size: 20px;
+  text-align: left;
+}
+
+h1 {
+  color: white;
+  text-align: center;
+  top: 2%;
+  left: 40%;
+}
+
+.gameOver {
+  font-size: 60px;
+  text-align: center
+}

DropTheNumbers/css/home.css

@@ -0,0 +1,99 @@
+body {
+    background-image: url("..//images/pic11.jpg");
+
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-size: 105%;
+    max-width: unset;
+    position: relative;
+}
+
+.header {
+    width: 100%;
+    float: left;
+    font-size: 50px;
+    color: #fffdfd;
+    text-transform: uppercase;
+    text-align: center;
+    font-weight: bold;
+    font-family: Roboto;
+}
+
+.pics1 {
+
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr;
+    justify-items: space-between;
+    grid-gap: 15%;
+    flex-wrap: wrap;
+    padding: 100px 25% 100px 25%;
+
+}
+
+.pics {
+    border: black solid 1mm;
+    border-radius: 10%;
+    height: 200px;
+    width: 300px;
+}
+
+h1 {
+    margin: 0px;
+}
+
+h2 {
+    text-align: center;
+}
+
+p {
+    font-size: 14px;
+    font-weight: 100;
+    line-height: 20px;
+    letter-spacing: 0.5px;
+    margin: 20px 0 30px;
+}
+
+span {
+    font-size: 12px;
+}
+
+a {
+    color: blue;
+    font-size: 12px;
+    text-decoration: none;
+    margin: 15px 0;
+    cursor: pointer;
+}
+
+button {
+    border-radius: 20px;
+    border: 1px solid #FF4B2B;
+    background-color: #FF4B2B;
+    color: #FFFFFF;
+    font-size: 12px;
+    font-weight: bold;
+    padding: 12px 45px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    transition: transform 80ms ease-in;
+}
+
+#exit {
+    position: absolute;
+    top: 2%;
+    right: 1%;
+    width: 40px;
+    height: 60px;
+    border: none;
+    background-color: white;
+}
+
+#x-pic {
+    position: absolute;
+    top: 2%;
+    right: 2%;
+    width: 60px;
+    height: 60px;
+    border: none;
+}