{"id":29648,"date":"2026-01-22T06:15:48","date_gmt":"2026-01-22T06:15:48","guid":{"rendered":"https:\/\/alnojoumacademy.com\/?p=29648"},"modified":"2026-01-22T06:50:17","modified_gmt":"2026-01-22T06:50:17","slug":"trail-1","status":"publish","type":"post","link":"https:\/\/alnojoumacademy.com\/en\/trail-1\/","title":{"rendered":"trail 1"},"content":{"rendered":"


\n
\n
\n
\n
\n Flip Cards Q&A<\/title><\/p>\n<style>\n \/* Reset and strong specificity for WordPress *\/\n .qa-flip-cards-wrapper {\n width: 100%;\n margin: 40px auto;\n padding: 20px;\n box-sizing: border-box;\n }<\/p>\n<p> .qa-flip-cards-wrapper * {\n box-sizing: border-box;\n }<\/p>\n<p> .qa-flip-cards-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 30px;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n }<\/p>\n<p> .qa-flip-card {\n height: 280px !important;\n perspective: 1000px;\n cursor: pointer;\n position: relative;\n }<\/p>\n<p> .qa-flip-card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n }<\/p>\n<p> .qa-flip-card.flipped .qa-flip-card-inner {\n transform: rotateY(180deg);\n }<\/p>\n<p> .qa-flip-card-front,\n .qa-flip-card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n border-radius: 16px;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n text-align: center;\n }<\/p>\n<p> .qa-flip-card-front {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }<\/p>\n<p> .qa-flip-card-back {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n color: white;\n transform: rotateY(180deg);\n }<\/p>\n<p> .qa-card-label {\n font-size: 14px !important;\n text-transform: uppercase;\n letter-spacing: 2px;\n opacity: 0.9;\n margin: 0 0 16px 0 !important;\n font-weight: 700 !important;\n line-height: 1.2 !important;\n }<\/p>\n<p> .qa-card-text {\n font-size: 22px !important;\n font-weight: 500 !important;\n line-height: 1.4 !important;\n margin: 0 !important;\n color: white !important;\n }<\/p>\n<p> .qa-flip-card:hover {\n transform: translateY(-4px);\n transition: transform 0.3s ease;\n }<\/p>\n<p> @media (max-width: 768px) {\n .qa-flip-cards-container {\n grid-template-columns: 1fr;\n gap: 20px;\n }<\/p>\n<p> .qa-flip-card {\n height: 250px !important;\n }<\/p>\n<p> .qa-card-text {\n font-size: 18px !important;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"qa-flip-cards-wrapper\">\n<div class=\"qa-flip-cards-container\" id=\"qaFlipCardsContainer\"><\/div>\n<\/p><\/div>\n<p> <script>\n (function() {\n const cardsData = [\n {\n question: \"What is the capital of France?\",\n answer: \"Paris\"\n },\n {\n question: \"How many planets are in our solar system?\",\n answer: \"8 planets\"\n },\n {\n question: \"What year did World War II end?\",\n answer: \"1945\"\n },\n {\n question: \"Who wrote Romeo and Juliet?\",\n answer: \"William Shakespeare\"\n },\n {\n question: \"What is the largest ocean on Earth?\",\n answer: \"The Pacific Ocean\"\n },\n {\n question: \"Who painted the Mona Lisa?\",\n answer: \"Leonardo da Vinci\"\n }\n ];<\/p>\n<p> function createFlipCard(data) {\n const card = document.createElement('div');\n card.className = 'qa-flip-card';<\/p>\n<p> card.innerHTML = `<\/p>\n<div class=\"qa-flip-card-inner\">\n<div class=\"qa-flip-card-front\">\n<div class=\"qa-card-label\">QUESTION<\/div>\n<div class=\"qa-card-text\">${data.question}<\/div>\n<\/p><\/div>\n<div class=\"qa-flip-card-back\">\n<div class=\"qa-card-label\">ANSWER<\/div>\n<div class=\"qa-card-text\">${data.answer}<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> card.addEventListener('click', function() {\n this.classList.toggle('flipped');\n });<\/p>\n<p> return card;\n }<\/p>\n<p> const container = document.getElementById('qaFlipCardsContainer');\n if (container) {\n cardsData.forEach(data => {\n container.appendChild(createFlipCard(data));\n });\n }\n })();\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>","protected":false},"excerpt":{"rendered":"<p>Flip Cards Q&A<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"pmpro_default_level":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-29648","post","type-post","status-publish","format-standard","hentry","category-uncategorized","pmpro-has-access"],"_links":{"self":[{"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/posts\/29648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/comments?post=29648"}],"version-history":[{"count":9,"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/posts\/29648\/revisions"}],"predecessor-version":[{"id":29658,"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/posts\/29648\/revisions\/29658"}],"wp:attachment":[{"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/media?parent=29648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/categories?post=29648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alnojoumacademy.com\/en\/wp-json\/wp\/v2\/tags?post=29648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}