Website_Jogo_da_Memoria_com_HTML_CSS_JavaScript/style.css at main · lucasgoncolm2003/Website_Jogo_da_Memoria_com_HTML_CSS_JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
body{
		background-image: url("images/thumb.gif");
		background-size: 110%;
		height: 100%;
		width: 100%;
		color: #fff;
		text-align:  center;
	}
	.wrapper{
		background-size: 100% 100%;
    	float: center;
    	height: 100vh;
    	margin: 20px 300px;
    	background-image: url(images/fundo_preto.jpg);
    	-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
	}
	h1, h2{
		margin: 20px;
		font-family: "Times New Roman", Times, serif;
		font-weight: 100;
		font-size: 2.6em;
	}
	#seconds,#tens{
		font-size: 2em;
	}
	button{
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-khtml-border-radius: 5px;
		background: #82d2e5;
		color: #fff;
		border: solid 1px #fff;
		text-decoration: none;
		cursor: pointer;
		font-size: 1.2em;
		padding: 18px 10px;
		width: 180px;
		margin: 10px;
		outline: none;
	}
	button:hover{
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition:  all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
		background: #fff;
		border: solid 1px #fff;
		color: #82d2e5;
	}
	#botao{
		color: #fff;
		border-radius: 5px;
		background-color: #000;
		font-size: 24px;
		font-family: "Times New Roman", Times, serif;
	}
	#container{
		width: 630px;
		margin: 10px auto;
	}
	#container:after{
		content: "";
		display: table;
		clear: both;
	}
	[data-view="card"]{
		transform: rotateY(180deg);
		width: 100px;
		height: 140px;
		border: solid 1px #d3cece;
		border-radius: 5px;
		float: left;
		margin: 10px;
		cursor: pointer;
		background: linear-gradiente(135deg, #f3f3f3 22px, #fff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px), linear-gradient(225deg, #f3f3f3 22px, #fff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px) 0 64px;
		background-color: #f3f3f3;
		background-size: 64px 128px;
	}
	.flipped{
		transition: 0.6s;
		transform-style: preserve-3d;
		position: relative;
		transform: rotateY(0deg);
	}
	.reverse{
		transition: 0.6s;
		transform-style: preserve-3d;
		position: relative;
		transform: rotateY(180deg);
	}
	.correct{
		opacity: 0.5;
		cursor: default;
		transform-style:  preserve-3d;
		position: relative;
		transform: rotateY(0deg);
	}
	.correct[data-item="queen"], .flipped[data-item="queen"]{
		background:url(images/queen.png) left center no-repeat #fff;
		background-size: contain;
	}
		.correct[data-item="king"], .flipped[data-item="king"]{
		background:url(images/king.png) left center no-repeat #fff;
		background-size: contain;
	}
		.correct[data-item="jack"], .flipped[data-item="jack"]{
		background:url(images/jack.jpg) left center no-repeat #fff;
		background-size: contain;
	}
		.correct[data-item="ace"], .flipped[data-item="ace"]{
		background:url(images/ace.png) left center no-repeat #fff;
		background-size: contain;
	}
		.correct[data-item="joker"], .flipped[data-item="joker"]{
		background:url(images/joker.png) left center no-repeat #fff;
		background-size: contain;
	}