Skip to content

Commit a1f7c95

Browse files
solygambassolygambas
committed
add memory cards styling
1 parent a2e3aac commit a1f7c95

File tree

4 files changed

+282
-1
lines changed

4 files changed

+282
-1
lines changed

‎72-memory cards/index.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Memory Cards</title>
14+
</head>
15+
<body>
16+
<button class="clear btn" id="clear">
17+
<i class="fas fa-trash"></i> Clear Cards
18+
</button>
19+
<h1>
20+
Memory Cards
21+
<button id="show" class="btn">
22+
<i class="fas fa-plus"></i> Add New Card
23+
</button>
24+
</h1>
25+
<div id="cards-container" class="cards">
26+
<!-- <div class="card active">
27+
<div class="inner-card">
28+
<div class="inner-card-front">
29+
<p>What is PHP?</p>
30+
</div>
31+
<div class="inner-card-back">
32+
<p>A programming language</p>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<div class="card">
38+
<div class="inner-card">
39+
<div class="inner-card-front">
40+
<p>What is PHP?</p>
41+
</div>
42+
<div class="inner-card-back">
43+
<p>A programming language</p>
44+
</div>
45+
</div>
46+
</div> -->
47+
</div>
48+
<div class="navigation">
49+
<button id="prev" class="nav-button">
50+
<i class="fas fa-arrow-left"></i>
51+
</button>
52+
<p id="current"></p>
53+
<button id="next" class="nav-button">
54+
<i class="fas fa-arrow-right"></i>
55+
</button>
56+
</div>
57+
<div id="add-container" class="add-container">
58+
<h1>
59+
Add New Card
60+
<button id="hide" class="btn btn-small btn-ghost">
61+
<i class="fas fa-times"></i>
62+
</button>
63+
</h1>
64+
<div class="form-group">
65+
<label for="question">Question</label>
66+
<textarea id="question" placeholder="Enter Question..."></textarea>
67+
</div>
68+
69+
<div class="form-group">
70+
<label for="answer">Answer</label>
71+
<textarea id="answer" placeholder="Enter Answer..."></textarea>
72+
</div>
73+
74+
<button id="add-card" class="btn">
75+
<i class="fas fa-plus"></i> Add Card
76+
</button>
77+
</div>
78+
<script src="script.js"></script>
79+
</body>
80+
</html>

‎72-memory cards/script.js

Whitespace-only changes.

‎72-memory cards/style.css

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
2+
3+
:root {
4+
--background-color: #b8c6db;
5+
--secondary-background-color: #f5f7fa;
6+
--light-color: #fff;
7+
--border-color: #aaa;
8+
}
9+
10+
* {
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
background-color: var(--background-color);
16+
background-image: linear-gradient(315deg, var(--background-color) 0%, var(--secondary-background-color) 100%);
17+
font-family: "Poppins", sans-serif;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
justify-content: center;
22+
height: 100vh;
23+
overflow: hidden;
24+
margin: 0;
25+
}
26+
27+
h1 button {
28+
position: absolute;
29+
top: 0;
30+
right: 2rem;
31+
z-index: 2;
32+
}
33+
34+
.btn {
35+
background-color: var(--background-color);
36+
border: 1px solid var(--border-color);
37+
border-radius: 0.625rem;
38+
font-size: 0.875rem;
39+
margin-top: 1.25rem;
40+
padding: 0.5rem 1rem;
41+
}
42+
43+
.btn-small {
44+
font-size: 0.75rem;
45+
padding: 0.25rem 0.5rem;
46+
}
47+
48+
.btn-ghost {
49+
border: 0;
50+
background-color: transparent;
51+
}
52+
53+
.clear {
54+
position: absolute;
55+
bottom: 2rem;
56+
left: 2rem;
57+
}
58+
59+
.cards {
60+
perspective: 1000px;
61+
position: relative;
62+
width: 31.25rem;
63+
max-width: 90%;
64+
height: 18.75rem;
65+
}
66+
67+
.card {
68+
background-color: var(--light-color);
69+
border-radius: 0.625rem;
70+
position: absolute;
71+
font-size: 1.5rem;
72+
top: 0;
73+
left: 0;
74+
width: 100%;
75+
height: 100%;
76+
opacity: 0;
77+
transform: translateX(50%) rotateY(-10deg);
78+
transition: transform 0.4s ease, opacity 0.4s ease;
79+
}
80+
81+
.card.active {
82+
cursor: pointer;
83+
opacity: 1;
84+
z-index: 10;
85+
transform: translateX(0) rotateY(0deg);
86+
}
87+
88+
.card.left {
89+
transform: translateX(-50%) rotateY(10deg);
90+
}
91+
92+
.inner-card {
93+
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
94+
border-radius: 0.625rem;
95+
position: relative;
96+
width: 100%;
97+
height: 100%;
98+
transform-style: preserve-3d;
99+
transition: transform 0.4s ease;
100+
}
101+
102+
.card.show-answer .inner-card {
103+
transform: rotateX(180deg);
104+
}
105+
106+
.inner-card-front, .inner-card-back {
107+
backface-visibility: hidden;
108+
background-color: var(--light-color);
109+
border-radius: 0.625rem;
110+
position: absolute;
111+
top: 0;
112+
left: 0;
113+
display: flex;
114+
align-items: center;
115+
justify-content: center;
116+
width: 100%;
117+
height: 100%;
118+
}
119+
120+
.inner-card-front {
121+
transform: rotateX(0deg);
122+
z-index: 2;
123+
}
124+
125+
.inner-card-back {
126+
transform: rotateX(180deg);
127+
}
128+
129+
.inner-card-front::after, .inner-card-back::after {
130+
content: '\f021 Flip';
131+
font-family: 'Font Awesome 5 Free', 'Poppins', sans-serif;
132+
position: absolute;
133+
top: 0.625rem;
134+
right: 0.625rem;
135+
font-weight: bold;
136+
font-size: 1rem;
137+
color: var(--background-color);
138+
}
139+
140+
.navigation {
141+
display: flex;
142+
margin: 1.25rem 0;
143+
}
144+
145+
.navigation .nav-button {
146+
border: none;
147+
background-color: transparent;
148+
cursor: pointer;
149+
font-size: 1rem;
150+
}
151+
152+
.navigation p {
153+
margin: 0 1.5rem;
154+
}
155+
156+
.add-container {
157+
background-color: var(--secondary-background-color);
158+
border-top: 2px solid var(--border-color);
159+
display: flex;
160+
flex-direction: column;
161+
align-items: center;
162+
justify-content: center;
163+
padding: 0.625rem 0;
164+
position: absolute;
165+
top: 0;
166+
bottom: 0;
167+
width: 100%;
168+
opacity: 0;
169+
z-index: -1;
170+
transition: all 0.3s ease;
171+
}
172+
173+
.add-container.show {
174+
opacity: 1;
175+
z-index: 2;
176+
}
177+
178+
.add-container h3 {
179+
margin: 0.625rem 0;
180+
}
181+
182+
.form-group {
183+
display: flex;
184+
flex-direction: column;
185+
align-items: center;
186+
justify-content: center;
187+
}
188+
189+
.form-group label {
190+
display: block;
191+
margin: 1.25rem 0 0.625rem;
192+
}
193+
194+
.form-group textarea {
195+
border: 1px solid var(--border-color);
196+
border-radius: 0.625rem;
197+
font-size: 1rem;
198+
padding: 0.75rem;
199+
width: 31.25rem;
200+
max-width: 90%;
201+
}

‎74-relaxer app/style.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
22

33
:root {
4-
--background-color: #224941;
4+
--background-color: #046973;
55
--large-circle-color: #010f1c;
66
--light-color: #dcebfe;
77
--gradient-color-light: #5fa0ac;

0 commit comments

Comments
 (0)