Skip to content

Commit ecafcc4

Browse files
ananyagauthamzz
ananya
authored and
gauthamzz
committed
added game card (#337)
* Update index.html * Create game-style.css * Create game.json * Create game.js * Update game-style.css * Update index.html * Update game.json * Update index.html * Update index.html * Update game.json * Create game * Delete game * Create demo * Add files via upload * Update game.json * Update index.html * Delete demo * Update game.json * Update game.json * Add files via upload * Update game.json * Update index.html * Update index.html * Update game.json * Update index.html
1 parent 0a68783 commit ecafcc4

File tree

7 files changed

+178
-4
lines changed

7 files changed

+178
-4
lines changed

‎css/game-style.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.game .card .front{
2+
color:#222;
3+
}
4+
5+
.game .card .front .game{
6+
background: #cb2d3e; /* fallback for old browsers */
7+
background: -webkit-linear-gradient(45deg, #ef473a, #cb2d3e); /* Chrome 10-25, Safari 5.1-6 */
8+
background: linear-gradient(45deg, #ef473a, #cb2d3e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
9+
border: 1px solid rgb(85, 23, 0);
10+
padding:5px 0;
11+
height:80%;
12+
/* border-radius:3px; */
13+
color:white;
14+
font-family: 'Lato';
15+
}
16+
17+
.game .card-underline{
18+
margin:0;
19+
}
20+
21+
.about-game{
22+
font-size:15px;
23+
24+
}
25+
26+
.game-gamename{
27+
text-transform: uppercase;
28+
font-size:14.5px;
29+
text-align: center;
30+
font-weight:700;
31+
margin-bottom:0;
32+
padding:5px 0;
33+
34+
}
35+
36+
.game-url{
37+
text-transform: uppercase;
38+
font-size:14.5px;
39+
text-align: center;
40+
font-weight:700;
41+
margin-bottom:0;
42+
padding:5px 0;
43+
44+
}
45+
46+
47+
.game .card .front .game .game-by{
48+
font-size:12px;
49+
font-weight:700;
50+
letter-spacing: 1px;
51+
text-transform: uppercase;
52+
padding:3px 0;
53+
margin-bottom: 0;
54+
margin-top:5px;
55+
56+
}
57+
58+
.game .card .front .game .game-name{
59+
font-size:14px;
60+
width:100%;
61+
padding:10px;
62+
text-transform: capitalize;
63+
font-weight:700;
64+
margin-bottom: 0;
65+
66+
}
67+
68+
69+
.game .card .back{
70+
padding:3px;
71+
}
72+
73+
.game .card .back .card-underline{
74+
margin-bottom:5px;
75+
}
76+
77+
.game .social i{
78+
color:white
79+
}
80+
.game .social{
81+
background:white
82+
}

‎game/brick.png

5.2 KB
Loading

‎game/memory.jpeg

13.4 KB
Loading

‎game/tic.jpg

22.1 KB
Loading

‎index.html

+49-4
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<link rel="stylesheet" href="css/simple-line-icons.css">
3636
<link rel="stylesheet" href="css/style.css">
3737
<link href="style1.css" media="all" rel="stylesheet" />
38-
38+
<link rel="stylesheet" href="css/game-style.css">
3939
<link rel="stylesheet" href="css/projects-style.css">
4040
<link rel="stylesheet" href="css/issues-style.css">
4141
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -70,11 +70,11 @@
7070
</style>
7171
<style type="text/css">
7272
@media screen and (max-width: 300px) {
73-
div.mentors, div.contestants, div.projects{margin-left: 14vh;}
73+
div.mentors, div.contestants, div.projects, div.game{margin-left: 14vh;}
7474
h1#center-mentor{margin-left: 5vh;}
7575
h1#center-participant{margin-left: 1vh;}
7676
h1#center-project{margin-left: 5vh;}
77-
77+
h1#center-game{margin-left: 5vh;}
7878
}
7979
.preloader img{
8080

@@ -132,6 +132,10 @@
132132
<li class="nav-item">
133133
<a class="nav-link js-scroll-trigger" href="#works">Projects</a>
134134
</li>
135+
136+
<li class="nav-item">
137+
<a class="nav-link js-scroll-trigger" href="#fun">Games</a>
138+
</li>
135139
<li class="nav-item">
136140
<a class="nav-link js-scroll-trigger" id="trailer" href="#trailer">Trailer</a>
137141
</li>
@@ -346,6 +350,47 @@ <h1 id="center-project">Projects</h1>
346350
</div>
347351
</div>
348352
</section>
353+
354+
<section id="fun" class="bg-light">
355+
<div class="container">
356+
<div class="row">
357+
<div class="game" id="game">
358+
<div class="heading">
359+
<h1 id="center-game">Participant's Games</h1>
360+
</div>
361+
<div class="card" v-for="game in alphaSort(game)" onclick="this.classList.toggle('flipped')">
362+
<div class="front">
363+
364+
<div class="image">
365+
<img v-bind:src="game.imageurl">
366+
</div>
367+
<div class="name">
368+
<div class="triangle-left"></div>
369+
<div class="triangle-right"></div>
370+
{{ game.gamename }}</div>
371+
</div>
372+
<div class="back">
373+
<!-- <div id="snow"></div> -->
374+
<div class="about">
375+
<div id="snow"></div>
376+
<p class="game-name">CREATED BY</p>
377+
<p class="game-name">{{ game.developer }}</p>
378+
</div>
379+
<div class="social">
380+
<div class="triangle-left"></div>
381+
<div class="triangle-right"></div>
382+
<a v-bind:href="game.github" target="_blank">
383+
<i class="fa fa-cubes" aria-hidden="true"></i>
384+
</a>
385+
</div>
386+
</div>
387+
</div>
388+
389+
</div>
390+
</div>
391+
</div>
392+
</section>
393+
349394

350395

351396

@@ -1130,6 +1175,6 @@ <h4 class="contact_head">Mubaris NK</h4>
11301175
<script src="countDown.js"></script>
11311176
<script src="js/apicall.js"></script>
11321177
<script src="js/popup.js"></script>
1133-
1178+
<script src="js/game.js"></script>
11341179
</body>
11351180
</html>

‎js/game.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const app3=new Vue({
2+
el : '#game',
3+
data : {
4+
game : []
5+
},
6+
created() {
7+
fetch('https://ananya-agrawal.github.io/OpenCode-Collaborative/json/game.json')
8+
.then(response => response.json() )
9+
.then(json => {
10+
this.game = json.game
11+
})
12+
},
13+
methods: {
14+
alphaSort: function (arr) {
15+
return arr.sort(function (a, b) {
16+
var keyA = a.name,
17+
keyB = b.name;
18+
19+
if (keyA < keyB) return -1;
20+
if (keyA > keyB) return 1;
21+
return 0;
22+
});
23+
}
24+
}
25+
});

‎json/game.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"game" : [
3+
{
4+
"developer" : "Ananya Agrawal",
5+
"imageurl": "game/brick.png",
6+
"gamename" : "Break-The-Brick",
7+
"github" : "https://ananya-agrawal.github.io/break-the-brick-game/"
8+
},
9+
{
10+
"developer" : "AK-007",
11+
"imageurl": "game/tic.jpg",
12+
"gamename" : "tic-tac-toe",
13+
"github" : "https://ak-007.github.io/Tic-Tac-Toe/"
14+
},
15+
{
16+
"developer" : "Aditi Aggarwal",
17+
"imageurl": "game/memory.jpeg",
18+
"gamename" : "memory-game",
19+
"github" : "https://adiagg2000.github.io/memory_game/memory.html"
20+
}
21+
]
22+
}

0 commit comments

Comments
 (0)