Snake And Ladders Game By Using HTML,CSS And JavaScript:
HTML:
______________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Snap And Ladders</title>
</head>
<body>
<div class="container1" style="">
<audio id="sound" preload="auto">
<source src="song.mp3" type="audio/mp3">
</audio>
<div class="login">
<div class="start" style="display:">
<img src="logo.png" height="200px" width="490px" id="snake" />
<div class="frm">
<input type="text" placeholder="First User Name...." class="txt" id="firstPlayerName" />
<input type="text" placeholder="Second User Name...." class="txt" id="secondPlayerName" />
<button id="btn">Start</button>
</div>
</div>
<div class="end" style="display: none">
<img src="emoji_emoticon_sticker_man_gentleman_award_win-512.png" height="300px" width="490px" id="man" />
<h1 id="winner">Winner is <span id="winnerName"></span></h1>
</div>
</div>
</div>
<div class="game">
<div class="playerOne">
<div class="playerOneProfile">
<img src="user.png" height="150px" width="150px" id="user1" />
<h2 id="name2">User</h2>
<h2 id="name1WinningRatio">Winning Ratio :<span id="playerOneScore">0</span>%</h2>
</div>
<div class="dice">
<div class="dot1">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dot2">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dot3">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
<div class="game-container">
<img src="snap.png" height="200px" width="100px" id='pic1' />
<img src="snap.png" height="250px" width="100px" id='pic2' />
<img src="snap.png" height="300px" width="100px" id='pic3' />
<img src="ladder.jpg" height="200px" width="60px" id='pic4' />
<img src="ladder.jpg" height="250px" width="60px" id='pic5' />
<img src="ladder.jpg" height="100px" width="60px" id='pic6' />
<img src="snap.png" height="250px" width="100px" id='pic7' />
<img src="ladder.jpg" height="120px" width="60px" id='pic8' />
<img src="snap.png" height="100px" width="60px" id='pic9' />
<div class="rowOne">
<div class="one">
<div>1<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>2<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>3<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>4<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>5<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>6<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>7<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>8<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>9<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>10<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowTwo">
<div class="one">
<div>11<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>12<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>13<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>14<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>15<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>16<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>17<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>18<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>19<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>20<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowThree">
<div class="one">
<div>21<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>22<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>23<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>24<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>25<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>26<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>27<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>28<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>29<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>30<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowFour">
<div class="one">
<div>31<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>32<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>33<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>34<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>35<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>36<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>37<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>38<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>39<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>40<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowFive">
<div class="one">
<div>41<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>42<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>43<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>44<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>45<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>46<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>47<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>48<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>49<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>50<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowSix">
<div class="one">
<div>51<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>52<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>53<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>54<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>55<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>56<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>57<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>58<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>59<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>60<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowSeven">
<div class="one">
<div>61<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>62<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>63<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>64<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>65<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>66<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>67<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>68<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>69<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>70<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowEight">
<div class="one">
<div>71<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>72<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>73<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>74<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>75<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>76<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>77<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>78<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>79<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>80<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowNine">
<div class="one">
<div>81<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>82<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>83<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>84<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>85<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>86<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>87<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>88<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>89<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>90<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
<div class="rowTen">
<div class="one">
<div>91<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="two">
<div>92<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="three">
<div>93<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="four">
<div>94<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="five">
<div>95<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="six">
<div>96<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="seven">
<div>97<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="eight">
<div>98<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="nine">
<div>99<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
<div class="ten">
<div>100<div class="oneRed"></div>
<div class="oneGreen"></div>
</div>
</div>
</div>
</div>
<div class="playerTwo">
<div class="playerOneProfile">
<img src="user.png" height="150px" width="150px" id="user1" />
<h2 id="name1"></h2>
<h2 id="name1WinningRatio">Winning Ratio :<span id="playerTwoScore">0</span>%</h2>
</div>
<div class="dice2">
<div class="dot1">
<div class="dots"></div>
<div class="dots"></div>
</div>
<div class="dot2">
<div class="dots"></div>
<div class="dots"></div>
</div>
<div class="dot3">
<div class="dots"></div>
<div class="dots"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var score = 0;
var tern = 2;
var playerOneTotalScore = 0;
var playerTwoTotalScore = 0;
var firstPlayerName = '';
var secondPlayerName = '';
$('#btn').click(function() {
const rollSound = new Audio("./song.mp3");
rollSound.play();
$('.container1').hide();
firstPlayerName = $('#firstPlayerName').val();
secondPlayerName = $('#secondPlayerName').val();
$('#name1').text(firstPlayerName.toUpperCase());
$('#name2').text(secondPlayerName.toUpperCase());
});
$('.dice2').click(function() {
if (tern % 2 == 0) {
var num = Math.ceil(Math.random() * 6);
score = num;
playerOneTotalScore += score;
tern++;
}
$('.dots').hide();
for (var i = 0; i < num; i++) {
$('.dots').eq(i).show();
}
$('.dice2').css({
borderColor: 'black',
boxShadow: 'black 1px 2px 20px 10px',
});
$('.dice').css({
borderColor: 'red',
boxShadow: 'red 1px 1px 20px 9px',
});
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
console.log(playerOneTotalScore);
if (playerOneTotalScore == 8) {
playerOneTotalScore += 20;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
if (playerOneTotalScore == 13) {
playerOneTotalScore += 40;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
if (playerOneTotalScore == 55) {
playerOneTotalScore += 30;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
if (playerOneTotalScore == 49) {
playerOneTotalScore += 20;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
if (playerOneTotalScore == 41) {
playerOneTotalScore -= 9;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
if (playerOneTotalScore == 44) {
playerOneTotalScore -= 29;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
if (playerOneTotalScore == 66) {
playerOneTotalScore -= 18;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
if (playerOneTotalScore == 92) {
playerOneTotalScore -= 18;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
if (playerOneTotalScore == 98) {
playerOneTotalScore -= 18;
$('.oneGreen').css({
background: 'none',
});
$('.oneGreen').eq((playerOneTotalScore - 1)).css({
background: 'green',
});
}
$('#playerTwoScore').text(playerOneTotalScore);
if (playerOneTotalScore >= 100) {
$('.container1').show();
$('.start').hide();
$('.end').show();
$('#winnerName').text(firstPlayerName.toUpperCase());
}
})
//dice1
$('.dice').click(function() {
if (tern % 2 != 0) {
var num = Math.ceil(Math.random() * 6);
score = num;
playerTwoTotalScore += score;
tern++;
}
$('.dot').hide();
for (var i = 0; i < num; i++) {
$('.dot').eq(i).show();
}
$('.dice').css({
borderColor: 'black',
boxShadow: 'black 1px 2px 20px 10px',
});
$('.dice2').css({
borderColor: 'green',
boxShadow: 'green 1px 1px 20px 9px',
});
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
console.log(playerTwoTotalScore);
if (playerTwoTotalScore == 8) {
playerTwoTotalScore += 20;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
if (playerTwoTotalScore == 13) {
playerTwoTotalScore += 40;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
if (playerTwoTotalScore == 55) {
playerTwoTotalScore += 30;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
if (playerTwoTotalScore == 49) {
playerTwoTotalScore += 20;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
if (playerTwoTotalScore == 41) {
playerTwoTotalScore -= 9;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
if (playerTwoTotalScore == 44) {
playerTwoTotalScore -= 29;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
if (playerTwoTotalScore == 66) {
playerTwoTotalScore -= 18;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
if (playerTwoTotalScore == 92) {
playerTwoTotalScore -= 18;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
if (playerTwoTotalScore == 98) {
playerTwoTotalScore -= 18;
$('.oneRed').css({
background: 'none',
});
$('.oneRed').eq((playerTwoTotalScore - 1)).css({
background: 'red',
});
}
$('#playerOneScore').text(playerTwoTotalScore);
if (playerTwoTotalScore >= 100) {
$('.container1').show();
$('.start').hide();
$('.end').show();
$('#winnerName').text(secondPlayerName.toUpperCase());
}
})
});
</script>
</body></html>
CSS:
______________________________________________________
body{
margin: 0px;
padding: 0px;
color: rgb(22,22,22);
font-family: lato;
color: rgba(20,20,20,0.5);
background-color: #8F3767;
}
.game{
z-index: 12;
}
.container1{
position: absolute;
z-index: 15;
width: 100%;
height: 100%;
background-color: rgba(1,1,1,0.9);
}
.login{
margin: 55px auto;
height: 500px;
width:800px;
background-color: white;
border-style: none;
border-radius: 10px;
}
#name1WinningRatio{
font-size: 15px;
text-align: center;
}
#snake{
margin: 10px 0px 0px 140px;
}
.txt{
height:20px ;
width:240px;
padding: 10px 20px 10px 10px;
display: flex;
margin-top: 7px;
border-style: solid;
border-radius: 7px;
border-color: #83AE29;
outline: none;
}
#btn{
margin-top: 7px;
padding: 12px 30px 12px 30px;
font-family: lato;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
border-radius: 10px;
border-style: none;
margin-left: 80px;
background-color:#8F3767;
color: white;
outline: none;
}
#btn:hover{
background-color:#83AE29 ;
}
.frm{
margin-left: 260px;
margin-top: 30px;
}
::placeholder{
color: black;
font-family: lato;
}
#name1{
text-align: center;
margin-top: 4px;
color: #8F3767;
font-family: lato;
}
#man{
margin-left: 140px;
margin-top: 30px;
}
#winner{
text-align: center;
color: #8F3767;
font-family: sans-serif;
font-weight: bold;
}
#name2{
text-align: center;
margin-top: 4px;
color: #8F3767;
font-family: lato;
}
.playerOne{
position: absolute;
height: 610px;
width: 330px;
}
.playerTwo{
position: absolute;
top:0px;
left: 945px;
height: 610px;
width: 335px;
}
.game-container{
margin: 0px auto;
height: 598px;
width: 586px;
z-index: 1;
background-color: #8F3767;
}
.dice{
height: 100px;
width:100px;
background-color: white;
position: absolute;
top: 400px;
left: 120px;
border-radius: 20px;
border-style: solid;
border-width: 5px;
border-color: rgba(20,20,20,0.8);
outline: none;
box-shadow: 1px 1px 20px 9px #000000f0;
}
.dice2{
height: 100px;
width:100px;
background-color: white;
position: absolute;
top: 400px;
left: 120px;
border-radius: 20px;
border-style: solid;
border-width: 5px;
border-color: rgba(20,20,20,0.8);
outline: none;
box-shadow: 1px 1px 20px 9px #000000f0;
}
.dots{
height: 15px;
width: 15px;
margin-left: 22px;
background: black;
display: inline-block;
border-radius: 20px;
}
.dot{
height: 15px;
width: 15px;
margin-left: 22px;
background: black;
display: inline-block;
border-radius: 20px;
}
.dot1{
position: absolute;
margin-top: 70px;
}
.dot2{
position: absolute;
margin-top: 42px;
}
.dot3{
position: absolute;
margin-top: 14px;
}
.playerOneProfile{
height:250px;
width: 250px;
background-color: white;
position: absolute;
margin: 100px 0px 0px 50px;
border-style: none;
border-radius: 10px;
box-shadow: 1px 1px 20px 2px #06060669;
}
#pic1{
position: absolute;
margin: 14px 0px 0px 83px;
z-index: 2;
}
#user1{
margin-left: 45px;
color: blue;
}
#pic2{
position: absolute;
margin: 174px 0px 0px 313px;
z-index: 2;
}
#pic3{
position: absolute;
margin: 270px 0px 0px 178px;
z-index: 2;
transform: rotate(-180);
}
#pic4{
position: absolute;
margin: 100px 0px 0px 220px;
z-index: 2;
transform: rotate(-180);
}
#pic5{
position: absolute;
margin: 270px 0px 0px 110px;
z-index: 2;
transform: rotate(-180);
}
#pic6{
position: absolute;
margin: 470px 0px 0px 400px;
z-index: 2;
}
#pic7{
position: absolute;
margin: 0px 0px 0px 430px;
z-index: 2;
}
#pic8{
position: absolute;
margin: 230px 0px 0px 450px;
z-index: 2;
}
#pic9{
position: absolute;
margin: 320px 0px 0px 20px;
z-index: 2;
}
.rowOne{
position: absolute;
margin-top: 543px;
}
.rowTwo{
position: absolute;
margin-top: 486px;
}
.rowThree{
position: absolute;
margin-top: 429px;
}
.rowFour{
position: absolute;
margin-top: 372px;
}
.rowFive{
position: absolute;
margin-top: 315px;
}
.rowSix{
position: absolute;
margin-top: 258px;
}
.rowSeven{
position: absolute;
margin-top: 201px;
}
.rowEight{
position: absolute;
margin-top: 143px;
}
.rowNine{
position: absolute;
margin-top: 85px;
}
.rowTen{
position: absolute;
margin-top: 27px;
}
.one{
display: inline-block;
height: 55px;
width: 55px;
background-color: #8DCA4A;
}
.two{
display: inline-block;
height: 55px;
width: 55px;
background-color: #EBFAE2;
}
.three{
display: inline-block;
height: 55px;
width: 55px;
background-color: #8DCA4A;
}
.four{
display: inline-block;
height: 55px;
width: 55px;
background-color: #EBFAE2;
}
.five{
display: inline-block;
height: 55px;
width: 55px;
background-color: #8DCA4A;
}
.six{
display: inline-block;
height: 55px;
width: 55px;
background-color: #EBFAE2;
}
.seven{
display: inline-block;
height: 55px;
width: 55px;
background-color: #8DCA4A;
}
.eight{
display: inline-block;
height: 55px;
width: 55px;
background-color: #EBFAE2;
}
.nine{
display: inline-block;
height: 55px;
width: 55px;
background-color: #8DCA4A;
}
.ten{
display: inline-block;
height: 55px;
width: 55px;
background-color: #EBFAE2;
}
.oneRed{
height: 16px;
width: 16px;
border-style: none;
border-radius: 30px;
background:none;
margin-left: 15px;
z-index: 16;
}
.oneGreen{
height: 16px;
width: 16px;
border-style: none;
border-radius: 30px;
background:none;
margin-top: 2px;
margin-left: 15px;
z-index: 16;
}
@font-face{
font-family:"lato";
src:'Lato-Regular.ttf';
}
1 Comments
Please provide a GitHub source code link
ReplyDelete