Skip to content

Commit 89c5e69

Browse files
Matthew HubertyMatthew Huberty
Matthew Huberty
authored and
Matthew Huberty
committed
Uploading repo
0 parents  commit 89c5e69

File tree

5 files changed

+518
-0
lines changed

5 files changed

+518
-0
lines changed

‎README.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
A Pen created at CodePen.io. You can find this one at https://codepen.io/mtHuberty/pen/wPyQaL.
2+
3+

‎css/style.css

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
body {
2+
background: indigo;
3+
}
4+
5+
.container {
6+
padding: 100px 0;
7+
}
8+
9+
.row {
10+
text-align: center;
11+
}
12+
13+
.col-sm-12 {
14+
text-align: center;
15+
}
16+
17+
.square {
18+
font-family: Walter Turncoat;
19+
color: white;
20+
height: 150px;
21+
width: 150px;
22+
background: seagreen;
23+
box-sizing: border-box;
24+
float: left;
25+
border: 2px dashed white;
26+
font-size: 90px;
27+
cursor: pointer;
28+
user-select: none;
29+
transition: background 0.3s;
30+
}
31+
32+
.highlight:hover {
33+
transition: background 0.2s;
34+
background: orange;
35+
}
36+
37+
.fancy {
38+
font-family: Walter Turncoat;
39+
}
40+
41+
.arrow {
42+
cursor: auto;
43+
}
44+
45+
.choice {
46+
font-size: 20px;
47+
transition: font-size 0.4s, border 0.4s, margin 0.4s, width 0.4s;
48+
position: relative;
49+
padding: 18px 0px;
50+
margin: 50px 20px;
51+
user-select: none;
52+
cursor: pointer;
53+
height: 80px;
54+
width: 150px;
55+
}
56+
57+
.tipText {
58+
opacity: 0;
59+
transition: opacity 1.3s;
60+
top: 125%;
61+
left: 30%;
62+
margin-left: -60px;
63+
font-size: 16px;
64+
font-weight: 700;
65+
font-family: arial;
66+
visibility: hidden;
67+
width: 120px;
68+
background: orange;
69+
color: black;
70+
text-align: center;
71+
padding: 5px 0;
72+
border-radius: 6px;
73+
position: absolute;
74+
z-index: 4;
75+
}
76+
77+
.tipText::after {
78+
content: "";
79+
position: absolute;
80+
bottom: 100%;
81+
left: 50%;
82+
margin-left: -5px;
83+
border-width: 10px;
84+
border-style: solid;
85+
border-color: transparent transparent orange transparent;
86+
}
87+
88+
#chooseX:hover .tipText {
89+
visibility: visible;
90+
opacity: 1;
91+
}
92+
93+
#startTitle {
94+
font-size: 55px;
95+
}
96+
97+
#startModalBG {
98+
height: 100%;
99+
width: 100%;
100+
position: fixed;
101+
background: seagreen; /* For browsers that do not support gradients */
102+
background: -webkit-linear-gradient(left top, seagreen, mediumseagreen); /* For Safari 5.1 to 6.0 */
103+
background: -o-linear-gradient(bottom right, seagreen, mediumseagreen); /* For Opera 11.1 to 12.0 */
104+
background: -moz-linear-gradient(bottom right, seagreen, mediumseagreen); /* For Firefox 3.6 to 15 */
105+
background: linear-gradient(to bottom right, seagreen, mediumseagreen); /* Standard syntax */
106+
}
107+
108+
#modalContent {
109+
margin: 100px auto;
110+
width: 600px;
111+
height: 320px;
112+
padding: 40px;
113+
border: 3px dashed #FFF;
114+
border-radius: 3%;
115+
background: indigo;
116+
color: white;
117+
text-align: center;
118+
white-space: nowrap;
119+
overflow: hidden;
120+
}
121+
122+
#endWinner {
123+
font-size: 50px;
124+
padding: 14px 0;
125+
}
126+
127+
#endModalBG {
128+
height: 100%;
129+
width: 100%;
130+
position: fixed;
131+
background: rgba(0,0,0,0.5);
132+
display: none;
133+
z-index: 2;
134+
}
135+
136+
#endModalContent {
137+
margin: 100px auto;
138+
width: 600px;
139+
height:280px;
140+
padding: 30px;
141+
border: 1px solid #FFF;
142+
background: rgba(0,0,0,0.6);
143+
color: white;
144+
text-align: center;
145+
white-space: nowrap;
146+
overflow: hidden;
147+
opacity: 0;
148+
transition: opacity 1s;
149+
}
150+
151+
#chooseX:hover, #chooseO:hover, #newGame:hover {
152+
transition: font-size 0.4s, border 0.4s, margin 0.4s, width 0.4s;
153+
font-size: 26px;
154+
border: 2px dashed white;
155+
border-radius: 6%;
156+
margin: 50px 20px;
157+
width: 200px;
158+
}
159+
160+
#newGame:hover {
161+
transition: background-color 0.4s, font-size 0.4s, border 0.4s, margin 0.4s, width 0.4s;
162+
font-size: 26px;
163+
border: 2px dashed white;
164+
margin: 50px 20px;
165+
width: 220px;
166+
background-color: indigo;
167+
}
168+
169+
170+
171+
#board {
172+
position: fixed;
173+
height: 450px;
174+
width: 450px;
175+
position: auto;
176+
visibility: hidden;
177+
left: 50%;
178+
transform: translate(-50%, 0);
179+
white-space: nowrap;
180+
box-sizing: border-box;
181+
z-index: 1;
182+
}
183+

‎index.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Tic-Tac-Toe</title>
6+
7+
8+
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
9+
10+
<link rel="stylesheet" href="css/style.css">
11+
12+
13+
</head>
14+
15+
<body>
16+
<html lang="en">
17+
<head>
18+
<link href="https://fonts.googleapis.com/css?family=Walter+Turncoat" rel="stylesheet">
19+
<meta charset="UTF-8">
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
22+
<title>Document</title>
23+
</head>
24+
<body>
25+
<div id="startModalBG">
26+
<div id="modalContent">
27+
<h2 id="startTitle" class="fancy">Tic Tac Toe!</h2>
28+
<div id="chooseX" class="choice d-inline-block fancy">Play as X
29+
<span class="tipText">You go first!</span></div>
30+
<div id="chooseO" class="choice d-inline-block fancy">Play as O</div>
31+
</div>
32+
</div>
33+
<div id="endModalBG">
34+
<div id="endModalContent">
35+
<h2 id="endWinner" class="fancy"></h2>
36+
<h4 id="endBanner"></h4>
37+
<div id="newGame" class="choice d-inline-block">New Game</div>
38+
</div>
39+
</div>
40+
<div class="container">
41+
<div class="row">
42+
<div class="col-sm-12">
43+
<div id="board">
44+
<div id="topRow" class="myRow">
45+
<div id="1" class="square highlight" onclick="pClick(event)"></div>
46+
<div id="2" class="square highlight" onclick="pClick(event)"></div>
47+
<div id="3" class="square highlight" onclick="pClick(event)"></div>
48+
</div>
49+
<div id="midRow" class="myRow">
50+
<div id="4" class="square highlight" onclick="pClick(event)"></div>
51+
<div id="5" class="square highlight" onclick="pClick(event)"></div>
52+
<div id="6" class="square highlight" onclick="pClick(event)"></div>
53+
</div>
54+
<div id="botRow" class="myRow">
55+
<div id="7" class="square highlight" onclick="pClick(event)"></div>
56+
<div id="8" class="square highlight" onclick="pClick(event)"></div>
57+
<div id="9" class="square highlight" onclick="pClick(event)"></div>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
64+
65+
66+
</body>
67+
</html>
68+
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
69+
70+
<script src="js/index.js"></script>
71+
72+
</body>
73+
</html>

0 commit comments

Comments
 (0)