Skip to content

Commit f6d19d8

Browse files
HenraLHenraL
committed
[ADD] a forum discussion mokup, a game creator, a game example
1 parent 2a259e8 commit f6d19d8

File tree

37 files changed

+2553
-28
lines changed

37 files changed

+2553
-28
lines changed

‎bonus/bootstrap/asperboard.bsdesign‎

10.6 KB
Binary file not shown.

‎bonus/html_snippets/forum/bubbles.css‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
/* ** EPITECH PROJECT, 2024
2+
** mockup
3+
** File description:
4+
** bubbles.css */
5+
6+
/* Taken from: https://codepen.io/Founts/details/AJyVOr */
7+
8+
/* container */
9+
10+
.container {
11+
padding: 5% 5%;
12+
}
13+
14+
/* CSS talk bubble */
15+
16+
.talk-bubble {
17+
margin: 40px;
18+
display: inline-block;
19+
position: relative;
20+
width: 200px;
21+
height: auto;
22+
background-color: lightyellow;
23+
}
24+
25+
.border {
26+
border: 8px solid #666;
27+
}
28+
29+
.round {
30+
border-radius: 30px;
31+
-webkit-border-radius: 30px;
32+
-moz-border-radius: 30px;
33+
}
34+
35+
/* Right triangle placed top left flush. */
36+
37+
.tri-right.border.left-top:before {
38+
content: ' ';
39+
position: absolute;
40+
width: 0;
41+
height: 0;
42+
left: -40px;
43+
right: auto;
44+
top: -8px;
45+
bottom: auto;
46+
border: 32px solid;
47+
border-color: #666 transparent transparent transparent;
48+
}
49+
50+
.tri-right.left-top:after {
51+
content: ' ';
52+
position: absolute;
53+
width: 0;
54+
height: 0;
55+
left: -20px;
56+
right: auto;
57+
top: 0px;
58+
bottom: auto;
59+
border: 22px solid;
60+
border-color: lightyellow transparent transparent transparent;
61+
}
62+
63+
/* Right triangle, left side slightly down */
64+
65+
.tri-right.border.left-in:before {
66+
content: ' ';
67+
position: absolute;
68+
width: 0;
69+
height: 0;
70+
left: -40px;
71+
right: auto;
72+
top: 30px;
73+
bottom: auto;
74+
border: 20px solid;
75+
border-color: #666 #666 transparent transparent;
76+
}
77+
78+
.tri-right.left-in:after {
79+
content: ' ';
80+
position: absolute;
81+
width: 0;
82+
height: 0;
83+
left: -20px;
84+
right: auto;
85+
top: 38px;
86+
bottom: auto;
87+
border: 12px solid;
88+
border-color: lightyellow lightyellow transparent transparent;
89+
}
90+
91+
/* Right triangle, placed bottom left side slightly in */
92+
93+
.tri-right.border.btm-left:before {
94+
content: ' ';
95+
position: absolute;
96+
width: 0;
97+
height: 0;
98+
left: -8px;
99+
right: auto;
100+
top: auto;
101+
bottom: -40px;
102+
border: 32px solid;
103+
border-color: transparent transparent transparent #666;
104+
}
105+
106+
.tri-right.btm-left:after {
107+
content: ' ';
108+
position: absolute;
109+
width: 0;
110+
height: 0;
111+
left: 0px;
112+
right: auto;
113+
top: auto;
114+
bottom: -20px;
115+
border: 22px solid;
116+
border-color: transparent transparent transparent lightyellow;
117+
}
118+
119+
/* Right triangle, placed bottom left side slightly in */
120+
121+
.tri-right.border.btm-left-in:before {
122+
content: ' ';
123+
position: absolute;
124+
width: 0;
125+
height: 0;
126+
left: 30px;
127+
right: auto;
128+
top: auto;
129+
bottom: -40px;
130+
border: 20px solid;
131+
border-color: #666 transparent transparent #666;
132+
}
133+
134+
.tri-right.btm-left-in:after {
135+
content: ' ';
136+
position: absolute;
137+
width: 0;
138+
height: 0;
139+
left: 38px;
140+
right: auto;
141+
top: auto;
142+
bottom: -20px;
143+
border: 12px solid;
144+
border-color: lightyellow transparent transparent lightyellow;
145+
}
146+
147+
/* Right triangle, placed bottom right side slightly in */
148+
149+
.tri-right.border.btm-right-in:before {
150+
content: ' ';
151+
position: absolute;
152+
width: 0;
153+
height: 0;
154+
left: auto;
155+
right: 30px;
156+
bottom: -40px;
157+
border: 20px solid;
158+
border-color: #666 #666 transparent transparent;
159+
}
160+
161+
.tri-right.btm-right-in:after {
162+
content: ' ';
163+
position: absolute;
164+
width: 0;
165+
height: 0;
166+
left: auto;
167+
right: 38px;
168+
bottom: -20px;
169+
border: 12px solid;
170+
border-color: lightyellow lightyellow transparent transparent;
171+
}
172+
173+
/*Right triangle, placed bottom right side slightly in */
174+
175+
.tri-right.border.btm-right:before {
176+
content: ' ';
177+
position: absolute;
178+
width: 0;
179+
height: 0;
180+
left: auto;
181+
right: -8px;
182+
bottom: -40px;
183+
border: 20px solid;
184+
border-color: #666 #666 transparent transparent;
185+
}
186+
187+
.tri-right.btm-right:after {
188+
content: ' ';
189+
position: absolute;
190+
width: 0;
191+
height: 0;
192+
left: auto;
193+
right: 0px;
194+
bottom: -20px;
195+
border: 12px solid;
196+
border-color: lightyellow lightyellow transparent transparent;
197+
}
198+
199+
/* Right triangle, right side slightly down */
200+
201+
.tri-right.border.right-in:before {
202+
content: ' ';
203+
position: absolute;
204+
width: 0;
205+
height: 0;
206+
left: auto;
207+
right: -40px;
208+
top: 30px;
209+
bottom: auto;
210+
border: 20px solid;
211+
border-color: #666 transparent transparent #666;
212+
}
213+
214+
.tri-right.right-in:after {
215+
content: ' ';
216+
position: absolute;
217+
width: 0;
218+
height: 0;
219+
left: auto;
220+
right: -20px;
221+
top: 38px;
222+
bottom: auto;
223+
border: 12px solid;
224+
border-color: lightyellow transparent transparent lightyellow;
225+
}
226+
227+
/* Right triangle placed top right flush. */
228+
229+
.tri-right.border.right-top:before {
230+
content: ' ';
231+
position: absolute;
232+
width: 0;
233+
height: 0;
234+
left: auto;
235+
right: -40px;
236+
top: -8px;
237+
bottom: auto;
238+
border: 32px solid;
239+
border-color: #666 transparent transparent transparent;
240+
}
241+
242+
.tri-right.right-top:after {
243+
content: ' ';
244+
position: absolute;
245+
width: 0;
246+
height: 0;
247+
left: auto;
248+
right: -20px;
249+
top: 0px;
250+
bottom: auto;
251+
border: 20px solid;
252+
border-color: lightyellow transparent transparent transparent;
253+
}
254+
255+
/* talk bubble contents */
256+
257+
.talktext {
258+
padding: 1em;
259+
text-align: left;
260+
line-height: 1.5em;
261+
}
262+
263+
.talktext p {
264+
-webkit-margin-before: 0em;
265+
-webkit-margin-after: 0em;
266+
}
267+
268+
:root {
269+
--message-receiver-background: lightblue;
270+
--message-receiver-color: white;
271+
--message-sender-background: lightgreen;
272+
--message-sender-color: black;
273+
}
274+
275+
.receiver {
276+
background-color: var(--message-receiver-background);
277+
color: var(--message-receiver-color);
278+
text-align: left;
279+
/* Align message text to the left */
280+
}
281+
282+
.receiver.left-top:after {
283+
border-color: var(--message-receiver-background) transparent transparent transparent;
284+
}
285+
286+
.sender {
287+
background-color: var(--message-sender-background);
288+
color: var(--message-sender-color);
289+
}
290+
291+
.sender.right-top:after {
292+
border-color: var(--message-sender-background) transparent transparent transparent;
293+
}
294+
295+
.message-box {
296+
display: flex;
297+
flex-direction: column;
298+
align-items: flex-start;
299+
/* Aligning everything left */
300+
width: 100%;
301+
}
302+
303+
.message-box.sender-text {
304+
align-items: flex-end;
305+
/* Keep sender's message aligned to the right */
306+
}
307+
308+
.message-box.receiver-text {
309+
align-items: flex-start;
310+
/* Align receiver's message and username to the left */
311+
}
312+
313+
.message-box p {
314+
margin: 0;
315+
/* Remove any default margin */
316+
}
317+
318+
.sender-text {
319+
margin-bottom: 10px;
320+
justify-content: right;
321+
/* Adds some space between name and bubble */
322+
}
323+
324+
.receiver-text {
325+
margin-bottom: 10px;
326+
justify-content: left;
327+
/* Adds some space between name and bubble */
328+
}

‎bonus/html_snippets/forum/forum_subjects.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
** EPITECH PROJECT, 2024
3+
** mockup
4+
** File description:
5+
** forum_subjects.css
6+
*/
7+
8+
.buttonList {
9+
list-style-type: none;
10+
/* Remove bullet points */
11+
padding: 0;
12+
/* Remove default padding */
13+
margin: 0;
14+
/* Remove default margin */
15+
}
16+
17+
.buttonList li {
18+
margin-bottom: 10px;
19+
/* Add spacing between list items */
20+
}
21+
22+
.buttonList button {
23+
border: none;
24+
/* Remove the button border */
25+
background: transparent;
26+
/* Make the background transparent */
27+
padding: 2px 2px;
28+
/* Add some padding for the button */
29+
font-size: 16px;
30+
/* Set font size */
31+
cursor: pointer;
32+
/* Change cursor on hover */
33+
text-align: left;
34+
/* Center the text inside the button */
35+
}
36+
37+
/* Style the button when it is active */
38+
.buttonList button.active {
39+
background-color: #007bff;
40+
/* Change background color on active */
41+
color: white;
42+
/* Text color when active */
43+
border-radius: 0px;
44+
/* Optionally add border-radius for rounded corners */
45+
}

0 commit comments

Comments
 (0)