{"id":4221,"date":"2024-06-01T05:48:40","date_gmt":"2024-06-01T05:48:40","guid":{"rendered":"https:\/\/novalabs.18008907990.com\/tadmur\/?p=4221"},"modified":"2024-09-25T06:58:18","modified_gmt":"2024-09-25T06:58:18","slug":"post-block-home","status":"publish","type":"post","link":"https:\/\/arabian-supplies.com\/ar\/post-block-home\/","title":{"rendered":"\u0622\u062e\u0631 \u0643\u062a\u0644\u0629 \u0627\u0644\u0645\u0646\u0632\u0644"},"content":{"rendered":"<div class=\"lazyblock-example-block-Z2twYnp wp-block-lazyblock-example-block\"><!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <link rel=\"stylesheet\" href=\"styles.css\">\r\n    <title>Blog Carousel<\/title>\r\n<\/head>\r\n<body>\r\n    <section class=\"recent-news\">\r\n      \r\n            \r\n      \r\n       \r\n        <div class=\"carousel\">\r\n            <div class=\"carousel-inner\">\r\n                                                      <div class=\"carousel-item\">\r\n                                        <div class=\"blog-post\">\r\n                        <div class=\"date-box\">\r\n                            <span class=\"date\">23<\/span>\r\n                            <span class=\"month\">\u0646\u0648\u0641\u0645\u0628\u0631<\/span>\r\n                        <\/div>\r\n                        <div class=\"content\">\r\n                            <h3>Title here&#8230;<\/h3>\r\n                            <p>Content here&#8230;&#8230;<\/p>\r\n                            <a href=\"https:\/\/arabian-supplies.com\/ar\/title-here\/\" class=\"read-more\">read more ><\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                      \r\n                       \r\n                       \r\n                                         \r\n                                                           <div class=\"blog-post\">\r\n                        <div class=\"date-box\">\r\n                            <span class=\"date\">26<\/span>\r\n                            <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n                        <\/div>\r\n                        <div class=\"content\">\r\n                            <h3>Lorem ipsum dolor sit aww<\/h3>\r\n                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&#8230;.<\/p>\r\n                            <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet\/\" class=\"read-more\">read more ><\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                      \r\n                       \r\n                       \r\n                                         \r\n                                                           <div class=\"blog-post\">\r\n                        <div class=\"date-box\">\r\n                            <span class=\"date\">25<\/span>\r\n                            <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n                        <\/div>\r\n                        <div class=\"content\">\r\n                            <h3>Recent news<\/h3>\r\n                            <p>Testing adding recent news&#8230;<\/p>\r\n                            <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-6\/\" class=\"read-more\">read more ><\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                      \r\n                       \r\n                       \r\n                                         \r\n                                                           <div class=\"blog-post\">\r\n                        <div class=\"date-box\">\r\n                            <span class=\"date\">23<\/span>\r\n                            <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n                        <\/div>\r\n                        <div class=\"content\">\r\n                            <h3>Lorem ipsum dolor sit amet<\/h3>\r\n                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&#8230;.<\/p>\r\n                            <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-5\/\" class=\"read-more\">read more ><\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                      \r\n                       \r\n                       \r\n                                         \r\n                                                           <div class=\"blog-post\">\r\n                        <div class=\"date-box\">\r\n                            <span class=\"date\">23<\/span>\r\n                            <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n                        <\/div>\r\n                        <div class=\"content\">\r\n                            <h3>Lorem ipsum dolor sit amet<\/h3>\r\n                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&#8230;.<\/p>\r\n                            <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-4\/\" class=\"read-more\">read more ><\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                      \r\n                       \r\n                       \r\n                                         \r\n                                                           <div class=\"blog-post\">\r\n                        <div class=\"date-box\">\r\n                            <span class=\"date\">23<\/span>\r\n                            <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n                        <\/div>\r\n                        <div class=\"content\">\r\n                            <h3>Lorem ipsum dolor sit amet<\/h3>\r\n                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&#8230;.<\/p>\r\n                            <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-3\/\" class=\"read-more\">read more ><\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                      \r\n                       \r\n                       \r\n                                         \r\n                                                           <div class=\"blog-post\">\r\n                        <div class=\"date-box\">\r\n                            <span class=\"date\">23<\/span>\r\n                            <span class=\"month\">\u0633\u0628\u062a\u0645\u0628\u0631<\/span>\r\n                        <\/div>\r\n                        <div class=\"content\">\r\n                            <h3>Lorem ipsum dolor sit amet<\/h3>\r\n                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua&#8230;.<\/p>\r\n                            <a href=\"https:\/\/arabian-supplies.com\/ar\/lorem-ipsum-dolor-sit-amet-2\/\" class=\"read-more\">read more ><\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                      \r\n                       \r\n                       \r\n                                         \r\n                                                           <div class=\"blog-post\">\r\n                        <div class=\"date-box\">\r\n                            <span class=\"date\">01<\/span>\r\n                            <span class=\"month\">\u064a\u0648\u0646\u064a\u0648<\/span>\r\n                        <\/div>\r\n                        <div class=\"content\">\r\n                            <h3>post block home<\/h3>\r\n                            <p>&#8230;<\/p>\r\n                            <a href=\"https:\/\/arabian-supplies.com\/ar\/post-block-home\/\" class=\"read-more\">read more ><\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                      \r\n                       \r\n                       \r\n                                              <\/div>\r\n                                         \r\n                                   \r\n            <\/div>\r\n            <div class=\"carousel-indicators\">\r\n                                    \r\n                                                \r\n                          <span class=\"indicator active\" data-slide=\"1\"><\/span>\r\n                                       \r\n                \r\n                                      \r\n                                        \r\n                \r\n                                      \r\n                                        \r\n                \r\n                                      \r\n                                                \r\n                          <span class=\"indicator \" data-slide=\"2\"><\/span>\r\n                                       \r\n                \r\n                                      \r\n                                        \r\n                \r\n                                      \r\n                                        \r\n                \r\n                                      \r\n                                                \r\n                          <span class=\"indicator \" data-slide=\"3\"><\/span>\r\n                                       \r\n                \r\n                                      \r\n                                        \r\n                \r\n                            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            const indicators = document.querySelectorAll('.carousel-indicators .indicator');\r\n            const carouselInner = document.querySelector('.carousel-inner');\r\n            let currentSlide = 0;\r\n\r\n            indicators.forEach((indicator, index) => {\r\n                indicator.addEventListener('click', () => {\r\n                    indicators[currentSlide].classList.remove('active');\r\n                    indicator.classList.add('active');\r\n                    currentSlide = index;\r\n                    const offset = -index * 33; \/\/ Adjusted for better slide transition\r\n                    carouselInner.style.transform = `translateX(${offset}%)`;\r\n                });\r\n            });\r\n        });\r\n    <\/script>\r\n    <style>\r\n    @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&display=swap');\r\n\r\nbody {\r\n    font-family: 'Montserrat', Arial, sans-serif;\r\n    background: #f9f9f9;\r\n    color: #333;\r\n    margin: 0;\r\n    padding: 0;\r\n    width:100%;\r\n    \/*background-image: url('https:\/\/novalabs.18008907990.com\/tadmur\/wp-content\/uploads\/2024\/05\/bg-07-scaled.jpg');*\/\r\n    \r\n}\r\n\r\n\r\n.carousel-item.active {\r\n  display: flex !important;\r\n}\r\n\r\n\r\n\r\n\r\n.carousel {\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding-top: 20px;\r\n    padding-bottom: 50px;\r\n}\r\n\r\n.carousel-inner {\r\n    display: flex;\r\n    transition: transform 0.5s ease-in-out;\r\n    width: 300%; \/* Because we have 2 slides *\/\r\n}\r\n\r\n.carousel-item {\r\n    display: flex;\r\n    width: 100%; \/* Each slide takes the full width *\/\r\n    box-sizing: border-box;\r\n}\r\n\r\n.blog-post {\r\n    flex: 1;\r\n    background: #fff;\r\n    padding: 20px;\r\n    \r\n    border-radius: 4px;\r\n    margin: 0 10px;\r\n    \r\n    display: flex;\r\n    align-items: flex-start;\r\n}\r\n\r\n.date {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 10px;\r\n    background: #801518;\r\n    color: #fff;\r\n    text-align: center;\r\n    margin-right: 20px;\r\n\r\n}\r\n.month {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    \r\n    background: #fff;\r\n    color: #000 !important;\r\n    border-bottom: 4px solid silver;\r\n    text-align: center;\r\n    margin-right: 20px;\r\n\r\n}\r\n\r\n.date-box .date {\r\n    font-size: 24px;\r\n    font-weight: bold;\r\n}\r\n\r\n.date-box .month {\r\n    font-size: 14px;\r\n    text-transform: uppercase;\r\n    margin-top: 5px;\r\n    \r\n}\r\n\r\n.content {\r\n    flex: 1;\r\n}\r\n\r\n.content h3 {\r\n    margin: 0 0 10px 0;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n}\r\n\r\n.content p {\r\n    margin: 0 0 20px 0;\r\n    color: #808080;\r\n    font-size: 12px;\r\n    \r\n}\r\n\r\n.read-more {\r\n    color: #121212;\r\n    text-decoration: none;\r\n    font-size: 12px;\r\n}\r\n\r\n.carousel-indicators {\r\n    text-align: center;\r\n    margin-top: 20px;\r\n}\r\n\r\n.carousel-indicators .indicator {\r\n    display: inline-block;\r\n    width: 10px;\r\n    height: 10px;\r\n    background: #ddd;\r\n    border-radius: 50%;\r\n    margin: 0 5px;\r\n    cursor: pointer;\r\n}\r\n\r\n.carousel-indicators .indicator.active {\r\n    background: #801518;\r\n}\r\n\r\n\/* Responsive styles *\/\r\n@media (max-width: 768px) {\r\n    .carousel-inner {\r\n        width: 100%; \/* Because we have 2 slides *\/\r\n    }\r\n\r\n    .carousel-item {\r\n        width: 100%; \/* Each slide takes the full width *\/\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .carousel-inner {\r\n        width: 450%; \/* Adjusted for simpler management *\/\r\n    }\r\n\r\n    .carousel-item {\r\n        width:450%; \/* Each slide takes the full width *\/\r\n    }\r\n\r\n    .blog-post {\r\n        margin: 0 5px; \/* Adjust the margin for smaller screens *\/\r\n    }\r\n}\r\n<\/style>\r\n<\/body>\r\n<\/html>\r\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[31],"class_list":["post-4221","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-home-page-block"],"_links":{"self":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/comments?post=4221"}],"version-history":[{"count":1,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221\/revisions"}],"predecessor-version":[{"id":6935,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/posts\/4221\/revisions\/6935"}],"wp:attachment":[{"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/media?parent=4221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/categories?post=4221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arabian-supplies.com\/ar\/wp-json\/wp\/v2\/tags?post=4221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}