Jaouadart commited on
Commit
482f207
·
verified ·
1 Parent(s): ceb802b

Delete اناشيد للاطفال

Browse files
Files changed (1) hide show
  1. اناشيد للاطفال +0 -176
اناشيد للاطفال DELETED
@@ -1,176 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ar" dir="rtl">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>أناشيد الأطفال</title>
7
- <style>
8
- body {
9
- font-family: 'Amiri', serif;
10
- background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
11
- margin: 0;
12
- padding: 0;
13
- color: #333;
14
- text-align: center;
15
- }
16
-
17
- .container {
18
- width: 95%;
19
- max-width: 1100px;
20
- margin: 0 auto;
21
- padding: 20px;
22
- }
23
-
24
- header {
25
- background-color: #fff;
26
- color: #e94560;
27
- padding: 50px 20px;
28
- border-radius: 0 0 50% 50% / 0 0 40% 40%;
29
- margin-bottom: 40px;
30
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
31
- }
32
-
33
- header h1 {
34
- margin: 0;
35
- font-size: 4em;
36
- font-weight: bold;
37
- text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
38
- }
39
-
40
- header p {
41
- font-size: 1.5em;
42
- margin-top: 10px;
43
- color: #555;
44
- }
45
-
46
- #songs-container {
47
- display: grid;
48
- grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
49
- gap: 40px;
50
- padding: 30px;
51
- }
52
-
53
- .song-card {
54
- background-color: #fff;
55
- border-radius: 20px;
56
- padding: 30px;
57
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
58
- transition: transform 0.3s ease, box-shadow 0.3s ease;
59
- overflow: hidden;
60
- position: relative;
61
- }
62
-
63
- .song-card:hover {
64
- transform: scale(1.05);
65
- box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
66
- }
67
-
68
- .song-card::before {
69
- content: '';
70
- position: absolute;
71
- top: -20px;
72
- right: -20px;
73
- width: 80px;
74
- height: 80px;
75
- background-image: url('https://i.imgur.com/your-image-url.png');
76
- background-size: cover;
77
- opacity: 0.3;
78
- z-index: 0;
79
- }
80
-
81
- .song-card h2 {
82
- color: #e94560;
83
- font-size: 2em;
84
- margin-bottom: 20px;
85
- position: relative;
86
- z-index: 1;
87
- }
88
-
89
- .youtube-embed {
90
- position: relative;
91
- padding-bottom: 56.25%;
92
- height: 0;
93
- overflow: hidden;
94
- }
95
-
96
- .youtube-embed iframe {
97
- position: absolute;
98
- top: 0;
99
- left: 0;
100
- width: 100%;
101
- height: 100%;
102
- border: 0;
103
- }
104
-
105
- footer {
106
- background-color: #fff;
107
- color: #e94560;
108
- padding: 30px;
109
- margin-top: 40px;
110
- border-radius: 40% 40% 0 0 / 50% 50% 0 0;
111
- box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
112
- }
113
- </style>
114
- </head>
115
- <body>
116
- <header>
117
- <div class="container">
118
- <h1>أناشيد الأطفال</h1>
119
- <p>عالم من المرح والتعلم!</p>
120
- </div>
121
- </header>
122
-
123
- <div class="container">
124
- <div id="songs-container">
125
- <!-- أناشيد هنا -->
126
- </div>
127
- </div>
128
-
129
- <footer>
130
- <div class="container">
131
- <p>© 2024 عالم الأناشيد</p>
132
- </div>
133
- </footer>
134
-
135
- <script>
136
- const songs = [
137
- { name: "ⵜⵉⵣⵍⵉⵜ ⵏ ⵜⵎⴰⵣⵉⵔⵜ ⵉⵏⵓ ", videoId: "rWwt_soZUfc", image: "https://i.imgur.com/vE1tB71.png" },
138
- { name: "ⵜⵉⵣⵍⵉⵜ ⵏⴳⴰ ⵜⴰⵣⵣⴰⵏⵉⵏ", videoId: "T5X0QUEErN8", image: "https://i.imgur.com/zNq7wZY.png" },
139
- { name: "ⵜⵉⵣⵍⵉⵜ ⵏ ⵡⴰⵜⵉⴳ ⵏ ⵡⴰⵎⴰⵏ ", videoId: "Er7FoPOTeZ4", image: "https://i.imgur.com/aJ6LS6p.png" },
140
- { name: "ⵜⵉⵣⵍⵉⵜ ⵏ ⵓⴼⵓⵍⵍⵓⵙ ", videoId: "Dqxr0A_uqPg", image:"https://i.imgur.com/ZvePAoa.png" },
141
- { name: "ⵜⵉⵣⵍⵉⵜ ⵏ ⵜⵡⵊⴰ ⵏⵓ ", videoId: "9wMJ_0tQrTA", image: "https://i.imgur.com/L4eF6l8.png" },
142
- ];
143
-
144
- const songsContainer = document.getElementById("songs-container");
145
-
146
- songs.forEach(song => {
147
- const songCard = document.createElement("div");
148
- songCard.classList.add("song-card");
149
-
150
- songCard.style.setProperty('--song-image', `url(${song.image})`);
151
-
152
- const imageBefore = document.createElement("style");
153
- imageBefore.innerHTML = `
154
- .song-card::before {
155
- background-image: url(${song.image});
156
- }
157
- `;
158
- songCard.appendChild(imageBefore);
159
-
160
- const title = document.createElement("h2");
161
- title.textContent = song.name;
162
- songCard.appendChild(title);
163
-
164
- const youtubeEmbed = document.createElement("div");
165
- youtubeEmbed.classList.add("youtube-embed");
166
- const iframe = document.createElement("iframe");
167
- iframe.src = `https://www.youtube.com/embed/${song.videoId}`;
168
- iframe.allowFullscreen = true;
169
- youtubeEmbed.appendChild(iframe);
170
- songCard.appendChild(youtubeEmbed);
171
-
172
- songsContainer.appendChild(songCard);
173
- });
174
- </script>
175
- </body>
176
- </html>