Skip to content
This repository was archived by the owner on Jul 14, 2021. It is now read-only.

Commit b6039e7

Browse files
author
githubteacher
committed
Create README.md and Octocat game
0 parents  commit b6039e7

File tree

7 files changed

+495
-0
lines changed

7 files changed

+495
-0
lines changed

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 The GitHub Training Team
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Octocat Game
2+
Test your memory.
3+
4+
All the images from https://octodex.github.com/.
5+
6+
This was originally a Pen created at CodePen.io. You can find this one at https://codepen.io/JasonEtco/pen/yobKqg.

‎css/style.css‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
@import url('https://fonts.googleapis.com/css?family=Courgette');
2+
body {
3+
margin: 0 auto;
4+
font-family: 'Courgette', cursive;
5+
}
6+
7+
.head {
8+
width: 100%;
9+
text-align: center;
10+
margin-top: 25px;
11+
font-size: 30px;
12+
}
13+
14+
.head .time {
15+
float: left;
16+
width: 200px;
17+
text-weight: 650;
18+
}
19+
20+
.head .start {
21+
display: inline-block;
22+
margin: 0 auto;
23+
margin-top: -20px;
24+
background: #7b7c7d;
25+
background-image: linear-gradient(to bottom, #7b7c7d, #242424);
26+
border-radius: 10px;
27+
color: #ffffff;
28+
font-size: 22px;
29+
padding: 20px 20px 20px 20px;
30+
text-decoration: none;
31+
text-weight: 600;
32+
cursor: pointer;
33+
}
34+
35+
.head .move {
36+
float: right;
37+
width: 200px;
38+
text-weight: 650;
39+
}
40+
41+
.room .card {
42+
display: inline-flex;
43+
width: 145px;
44+
height: 145px;
45+
position: relative;
46+
margin: 5px;
47+
transition: .40s;
48+
-webkit-transform-style: preserve-3d;
49+
}
50+
.room .card .face {
51+
width: 100%;
52+
height: 100%;
53+
position: absolute;
54+
-webkit-backface-visibility: hidden;
55+
z-index: 2;
56+
}
57+
.room .card .front {
58+
position: absolute;
59+
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/profile/profile-512.jpg);
60+
background-repeat: no-repeat;
61+
background-size: 100%;
62+
z-index: 1;
63+
}
64+
.room .card .back {
65+
transform: rotateY(-180deg);
66+
position: absolute;
67+
background-repeat: no-repeat;
68+
background-size: 100%;
69+
}
70+
71+
.flip, .fliped {
72+
transform: rotateY(180deg);
73+
transition: .40s;
74+
}
75+
76+
.board {
77+
position: relative;
78+
width: 400px;
79+
top: -425px;
80+
height: 300px;
81+
border: 15px inset teal;
82+
border-radius: 20px;
83+
margin: 0 auto;
84+
text-align: center;
85+
background: #fff;
86+
color: #4d4ba3;
87+
box-shadow: 0px 0px 50px 0px rgba(50, 50, 50, 0.82);
88+
}
89+
90+
.board .greet {
91+
font-size: 45px;
92+
margin: 10px;
93+
font-weight: 700;
94+
}
95+
96+
.board .scr {
97+
font-size: 27px;
98+
margin: 10px;
99+
font-weight: 500;
100+
}
101+
102+
.board .scr_time {
103+
display: inline-flex;
104+
font-size: 27px;
105+
margin: 10px;
106+
font-weight: 600;
107+
}
108+
109+
.board .scr_move {
110+
display: inline-flex;
111+
font-size: 27px;
112+
margin: 10px;
113+
font-weight: 600;
114+
}
115+
116+
.board .again {
117+
display: block;
118+
margin: 0 auto;
119+
margin-top: 10px;
120+
background: #2cbda5;
121+
background-image: linear-gradient(to bottom, #2cbda5, #123e59);
122+
border-radius: 15px;
123+
font-family: Arial;
124+
color: #ffffff;
125+
font-size: 25px;
126+
padding: 10px 20px 10px 20px;
127+
text-decoration: none;
128+
}
129+
130+
.board .again:hover {
131+
background: #38c5de;
132+
background-image: linear-gradient(to bottom, #38c5de, #325063);
133+
text-decoration: none;
134+
}
135+
136+
.me {
137+
font-size: 20px;
138+
margin-top: 20px;
139+
font-weight: 600;
140+
}
141+
142+
143+
@media only screen and (max-width: 890px) {
144+
.room .card {
145+
width: 95px;
146+
height: 95px;
147+
}
148+
149+
.board {
150+
top: -385px;
151+
}
152+
}
153+
@media only screen and (max-width: 690px) {
154+
.room .card {
155+
width: 65px;
156+
height: 65px;
157+
}
158+
159+
.board {
160+
width: 300px;
161+
top: -325px;
162+
}
163+
}
164+
@media only screen and (max-width: 400px) {
165+
.room .card {
166+
width: 40px;
167+
height: 40px;
168+
}
169+
170+
.board {
171+
width: 300px;
172+
top: -125px;
173+
}
174+
}
175+
176+
@media only screen and (max-width: 290px){
177+
.room .card {
178+
width: 25px;
179+
height: 25px;
180+
}
181+
182+
.board {
183+
width: 300px;
184+
top: -90px;
185+
}
186+
}
187+

‎index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Octocat Memory Game</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
10+
11+
<link rel="stylesheet" href="css/style.css">
12+
13+
14+
</head>
15+
16+
<body>
17+
18+
19+
<div class='head'>
20+
<div class='time'>Time: <span class="min">00</span>:<span class="sec">00</span></div>
21+
<div class='start'>Start Game</div>
22+
<div class='move'>Moves: <span class="c_move">0</span></div>
23+
</div>
24+
<br>
25+
<br>
26+
<div class="room" align="center"></div>
27+
<div class=board>
28+
<p class="greet">Voila</p>
29+
<p class="scr">Your Score</p>
30+
<p class='scr_time'>Time : <span class='scr_min'>00</span>:<span class='scr_sec'>00</span> </p>
31+
<p class = 'scr_move'>Moves :<span class='scr_moves'> 00</span></p>
32+
<button type="button" class='again'> Again </button>
33+
<p class="me">Developed by Mayur Birle</p>
34+
</div>
35+
<br><br>
36+
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
37+
38+
39+
40+
<script src="js/index.js"></script>
41+
42+
43+
44+
45+
</body>
46+
47+
</html>

0 commit comments

Comments
 (0)