{"id":549,"date":"2023-12-23T15:21:00","date_gmt":"2023-12-23T15:21:00","guid":{"rendered":"https:\/\/saintdevlabs.co.za\/media\/?page_id=549"},"modified":"2026-04-30T09:10:23","modified_gmt":"2026-04-30T09:10:23","slug":"services","status":"publish","type":"page","link":"https:\/\/saintdevlabs.co.za\/media\/services\/","title":{"rendered":"Services"},"content":{"rendered":"\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7dd1e726 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:325px\"><\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns are-vertically-aligned-top is-layout-flex wp-container-core-columns-is-layout-7dd1e726 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-constrained wp-block-column-is-layout-constrained\" style=\"flex-basis:80%\">\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <style>\n\n        h10 {\n            text-align: center;\n            font-weight: bold;\n            font-size: 75px;\n            padding: 10px;\n        }\n\n        body {\n            font-family: Arial, Helvetica, sans-serif;\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        .card-container {\n            display: flex;\n            justify-content: space-around;\n            align-items: center;\n            height: 70vh; \/* Adjust the height as needed *\/\n            flex-wrap: wrap; \/* Allow cards to wrap to the next line on smaller screens *\/\n            background-color: #FFF;\n        }\n\n        .flip-card {\n            background-color: transparent;\n            color: black;\n            width: 325px;\n            height: 500px;\n            perspective: 1000px;\n            margin: 1px; \/* Add some margin for spacing *\/\n            position: relative;\n        }\n\n.flip-card:before,\n.flip-card:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 100%;\n    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));\n    z-index: -1; \/* Place behind the card content *\/\n}\n\n.flip-card:before {\n    left: 0;\n}\n\n.flip-card:after {\n    right: 0;\n}\n\n        .flip-card-inner {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            text-align: center;\n            transition: transform 0.6s;\n            transform-style: preserve-3d;\n            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n        }\n\n        .flip-card:hover .flip-card-inner {\n            transform: rotateY(180deg);\n        }\n\n        .flip-card-front,\n        .flip-card-back {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            -webkit-backface-visibility: hidden;\n            backface-visibility: hidden;\n        }\n\n        .flip-card-front {\n            background-color: white;\n            color: black;\n        }\n\n        .flip-card-back {\n            background-color: white; \/* Change this to your desired color for the back of the flip card *\/\n            color: white;\n            transform: rotateY(180deg);\n        }\n\n        \/* Media Query for smaller screens *\/\n        @media (max-width: 768px) {\n            .card-container {\n                flex-direction: column; \/* Stack cards vertically on smaller screens *\/\n                align-items: center; \/* Center cards in the column *\/\n            }\n\n            .flip-card {\n                width: 80%; \/* Take up full width on smaller screens *\/\n                max-width: none; \/* Limit the maximum width *\/\n                margin-bottom: 0px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <h10>Services<\/h10>\n\n    <div class=\"card-container\">\n        <div class=\"flip-card\">\n            <div class=\"flip-card-inner\">\n                <div class=\"flip-card-front\">\n                    <img decoding=\"async\" src=\"https:\/\/saintdevlabs.co.za\/media\/wp-content\/uploads\/sites\/3\/2023\/12\/Black-and-Beige-Simple-Modern-Clothing-Tag.png\" alt=\"Avatar\" style=\"width: 325px; height: 500px;\">\n                <\/div>\n                <div class=\"flip-card-back\">\n                    <img decoding=\"async\" src=\"https:\/\/saintdevlabs.co.za\/media\/wp-content\/uploads\/sites\/3\/2023\/12\/R8-BS.png\" alt=\"Avatar\" style=\"width: 325px; height: 500px;\">\n                <\/div>\n            <\/div>\n        <\/div>\n     <\/div>\n<br>\n     <div class=\"card-container\">\n        <div class=\"flip-card\">\n            <div class=\"flip-card-inner\">\n                <div class=\"flip-card-front\">\n                    <img decoding=\"async\" src=\"https:\/\/saintdevlabs.co.za\/media\/wp-content\/uploads\/sites\/3\/2023\/12\/Black-and-Beige-Simple-Modern-Clothing-Tag-1.png\" alt=\"Avatar\" style=\"width: 325px; height: 500px;\">\n                <\/div>\n                <div class=\"flip-card-back\">\n                    <img decoding=\"async\" src=\"https:\/\/saintdevlabs.co.za\/media\/wp-content\/uploads\/sites\/3\/2023\/12\/R8-BS-1.png\" alt=\"Avatar\" style=\"width: 325px; height: 500px;\">\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<br>\n <div class=\"card-container\">\n  <div class=\"flip-card\">\n  <div class=\"flip-card-inner\">\n    <div class=\"flip-card-front\">\n      <img decoding=\"async\" src=\"https:\/\/saintdevlabs.co.za\/media\/wp-content\/uploads\/sites\/3\/2023\/12\/Photography-Tag.png\" alt=\"Avatar\" style=\"width:325px;height:500px;\">\n    <\/div>\n    <div class=\"flip-card-back\">\n     <img decoding=\"async\" src=\"https:\/\/saintdevlabs.co.za\/media\/wp-content\/uploads\/sites\/3\/2023\/12\/R8-BS-2.png\" alt=\"Avatar\" style=\"width:325px;height:500px;\">\n    <\/div>\n  <\/div>\n<\/div>\n<\/div>\n\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top ticss-85d933ef is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <style>\n\nbody {\n  margin: 0;\n  font-family: Arial, Helvetica, sans-serif;\n}\n\n.header {\n  text-align: center;\n  padding: 25px;\n}\n\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 4px;\n  position: relative;\n}\n\n.loading-overlay {\n            position: absolute;\n            top: 350px;\n            left: 1079px;\n            width: 332px;\n            height: 100%;\n            background: rgba(255, 255, 255, 0.8); \/* Semi-transparent white background *\/\n            display: flex;\n\nflex-direction: column;\n            justify-content: flex-start;\n            align-items: center;\n            z-index: 2; \/* Place overlay above images *\/\n        }\n\n        .loading-text {\n            font-size: 24px;\n        }\n\n\/* Media Query for smaller screens (hide loading overlay on mobile) *\/\n@media (max-width: 768px) {\n    .loading-overlay {\n        display: none;\n    }\n}\n\n\/* Create two equal columns that sits next to each other *\/\n.column {\n  flex: 50%;\n  padding: 0 4px;\n}\n\n.column img {\n  margin-top: 8px;\n  vertical-align: middle;\n  width: 100%;\n  display: none;\n}\n\n\/* Style the buttons *\/\n.btn {\n  border: none;\n  outline: none;\n  padding: 10px 16px;\n  background-color: #f1f1f1;\n  cursor: pointer;\n  font-size: 18px;\n}\n\n.btn:hover {\n  background-color: #ddd;\n}\n\n.btn.active {\n  background-color: #666;\n  color: white;\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- Header -->\n<div class=\"header\">\n  <h1>Image Grid<\/h1>\n  <p>Click on the buttons to change the grid view.<\/p>\n  <button class=\"btn\" onclick=\"one()\">1<\/button>\n  <button class=\"btn active\" onclick=\"two()\">2<\/button>\n<\/div>\n\n<!-- Loading Overlay -->\n<div class=\"loading-overlay\" id=\"loadingOverlay\">\n  <div class=\"loading-text\">Loading&#8230;<\/div>\n<\/div>\n\n<!-- Photo Grid -->\n<div class=\"row\"> \n  <div class=\"column\">\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1OhfmcxVdN3Mw1bKX88rffZc9Xbft4wM6\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1OhfmcxVdN3Mw1bKX88rffZc9Xbft4wM6\" width=\"100%\"\/><\/a>\n\n    <a href=\"https:\/\/lh3.googleusercontent.com\/d\/1UwYBFJpKuQJmzT5HNRWU-G9LfXEsJAvk\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1UwYBFJpKuQJmzT5HNRWU-G9LfXEsJAvk\" width=\"100%\"\/><\/a>\n\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1MCF5D2gAKFjqS1DHTVdi0pXJRXFs6upK\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1MCF5D2gAKFjqS1DHTVdi0pXJRXFs6upK\" width=\"100%\"\/><\/a>\n\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1TnB59rjD9Eyss02FQO6cdnmOl2gv38Yl\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1TnB59rjD9Eyss02FQO6cdnmOl2gv38Yl\" width=\"100%\"\/><\/a>\n\n\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1ARg1QOF023NpGVwZuC5weERrydm4sDWA\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1ARg1QOF023NpGVwZuC5weERrydm4sDWA\" width=\"100%\"\/><\/a> \n  <\/div>\n\n\n  <div class=\"column\">\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1AqyAmvn_oy9d_GkaPj5FSWvgHT1Hy57w\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1AqyAmvn_oy9d_GkaPj5FSWvgHT1Hy57w\" width=\"100%\"\/><\/a>\n\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1U7rBHzg9_Lt6KaVycrnAgrfo4NOS97cU\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1U7rBHzg9_Lt6KaVycrnAgrfo4NOS97cU\" width=\"100%\"\/><\/a>\n\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1MAgmxws9TrGm9hCnVgS9PUxMEj5mjwRm\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1MAgmxws9TrGm9hCnVgS9PUxMEj5mjwRm\" width=\"100%\"\/><\/a>\n\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1SDdnawL-gMddTIL05veu3KVmkWoiMMzg\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1SDdnawL-gMddTIL05veu3KVmkWoiMMzg\" width=\"100%\"\/><\/a>\n\n<a href=\"https:\/\/lh3.googleusercontent.com\/d\/1OFe6R5faMO_KXqQydtUMsHXjXRuaayew\"> <img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/d\/1OFe6R5faMO_KXqQydtUMsHXjXRuaayew\" width=\"100%\"\/><\/a>\n\n  <\/div>\n<\/div>\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    \/\/ Simulate loading delay (you can adjust the timeout duration)\n    setTimeout(function() {\n        document.getElementById(\"loadingOverlay\").style.display = \"none\";\n        showImages(); \/\/ Function to display images\n    }, 6000);\n});\n\nfunction showImages() {\n    var images = document.querySelectorAll('.column img');\n    images.forEach(function(image) {\n        image.style.display = \"block\";\n    });\n}\n\n\/\/ Get the elements with class=\"column\"\nvar elements = document.getElementsByClassName(\"column\");\n\n\/\/ Declare a loop variable\nvar i;\n\n\/\/ Full-width images\nfunction one() {\n    for (i = 0; i < elements.length; i++) {\n    elements[i].style.msFlex = \"100%\";  \/\/ IE10\n    elements[i].style.flex = \"100%\";\n  }\n}\n\n\/\/ Two images side by side\nfunction two() {\n  for (i = 0; i < elements.length; i++) {\n    elements[i].style.msFlex = \"50%\";  \/\/ IE10\n    elements[i].style.flex = \"50%\";\n  }\n}\n\n\/\/ Four images side by side\nfunction four() {\n  for (i = 0; i < elements.length; i++) {\n    elements[i].style.msFlex = \"10%\";  \/\/ IE10\n    elements[i].style.flex = \"10%\";\n  }\n}\n\n\/\/ Add active class to the current button (highlight it)\nvar header = document.getElementById(\"myHeader\");\nvar btns = header.getElementsByClassName(\"btn\");\nfor (var i = 0; i < btns.length; i++) {\n  btns[i].addEventListener(\"click\", function() {\n    var current = document.getElementsByClassName(\"active\");\n    current[0].className = current[0].className.replace(\" active\", \"\");\n    this.className += \" active\";\n  });\n}\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Services Image Grid Click on the buttons to change the grid view. 1 2 Loading&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"w-no-header","meta":{"footnotes":""},"class_list":["post-549","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/saintdevlabs.co.za\/media\/wp-json\/wp\/v2\/pages\/549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saintdevlabs.co.za\/media\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saintdevlabs.co.za\/media\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saintdevlabs.co.za\/media\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saintdevlabs.co.za\/media\/wp-json\/wp\/v2\/comments?post=549"}],"version-history":[{"count":243,"href":"https:\/\/saintdevlabs.co.za\/media\/wp-json\/wp\/v2\/pages\/549\/revisions"}],"predecessor-version":[{"id":851,"href":"https:\/\/saintdevlabs.co.za\/media\/wp-json\/wp\/v2\/pages\/549\/revisions\/851"}],"wp:attachment":[{"href":"https:\/\/saintdevlabs.co.za\/media\/wp-json\/wp\/v2\/media?parent=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}