CodePen - Cities Slider (React)<\/title>\n <link rel=\"stylesheet\" href=\".\/style.css\">\n\n<\/head>\n<body>\n\n<div id=\"app\"><\/div>\n<a href=\"https:\/\/dribbble.com\/shots\/3774469-T-R-A-V-E-L-E-R\" target=\"_blank\" class=\"icon-link\">\n <img decoding=\"async\" src=\"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png\">\n<\/a>\n<a href=\"https:\/\/twitter.com\/NikolayTalanov\" target=\"_blank\" class=\"icon-link icon-link--twitter\">\n <img decoding=\"async\" src=\"https:\/\/cdn1.iconfinder.com\/data\/icons\/logotypes\/32\/twitter-128.png\">\n<\/a>\n\n <script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.6.1\/react.min.js'><\/script>\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.6.1\/react-dom.min.js'><\/script>\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/classnames\/2.2.5\/index.min.js'><\/script><script src=\".\/script.js\"><\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-432c0ee elementor-widget elementor-widget-html\" data-id=\"432c0ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n \/*\n https:\/\/codepen.io\/suez\/pen\/OjGQza\n *\/\n #migraeffetcs15 *, #migraeffetcs15 *:before, #migraeffetcs15 *:after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n#migraeffetcs15 body {\n font-family: \"Roboto\", Helvetica, Arial, sans-serif;\n background: #000;\n}\n\n#migraeffetcs15 .slider {\n overflow: hidden;\n position: relative;\n height: 100vh;\n color: #fff;\n}\n#migraeffetcs15 .slider__top-heading {\n z-index: 12;\n position: absolute;\n left: 0;\n top: 100px;\n width: 100%;\n text-align: center;\n font-size: 16px;\n text-transform: uppercase;\n letter-spacing: 2.5px;\n transition: all 0.5s 1s;\n transform: translateY(-30px);\n opacity: 0;\n}\n#migraeffetcs15 .slider.s--ready .slider__top-heading {\n transform: translateY(0);\n opacity: 1;\n}\n#migraeffetcs15 .slider__slides {\n position: relative;\n height: 100%;\n}\n#migraeffetcs15 .slider__slide {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n#migraeffetcs15 .slider__slide.s--active {\n pointer-events: auto;\n}\n#migraeffetcs15 .slider__slide-content {\n z-index: 6;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n height: 100%;\n text-transform: uppercase;\n line-height: 1;\n}\n#migraeffetcs15 .slider__slide-subheading {\n margin-bottom: 20px;\n font-size: 24px;\n letter-spacing: 2px;\n transform: translateY(20px);\n opacity: 0;\n transition: 0.5s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-subheading {\n transition-delay: 0.65s;\n opacity: 1;\n transform: translateY(0);\n}\n#migraeffetcs15 .slider__slide-heading {\n display: flex;\n margin-bottom: 20px;\n font-size: 60px;\n letter-spacing: 12px;\n}\n#migraeffetcs15 .slider__slide-heading span {\n display: block;\n opacity: 0;\n transform: translateY(-60px);\n transition: all 0.3333333333s;\n}\n#migraeffetcs15 .slider__slide.s--prev .slider__slide-heading span {\n transform: translateY(60px);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span {\n opacity: 1;\n transform: translateY(0);\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(1) {\n transition-delay: 0s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(1) {\n transition-delay: 0.3333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(2) {\n transition-delay: 0.1s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(2) {\n transition-delay: 0.4333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(3) {\n transition-delay: 0.2s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(3) {\n transition-delay: 0.5333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(4) {\n transition-delay: 0.3s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(4) {\n transition-delay: 0.6333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(5) {\n transition-delay: 0.4s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(5) {\n transition-delay: 0.7333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(6) {\n transition-delay: 0.5s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(6) {\n transition-delay: 0.8333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(n+7) {\n transition-delay: 0.6s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(n+7) {\n transition-delay: 0.9333333333s;\n}\n#migraeffetcs15 .slider__slide-readmore {\n position: relative;\n font-size: 14px;\n text-transform: lowercase;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n transform: translateY(-20px);\n cursor: pointer;\n opacity: 0;\n transition: 0.5s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-readmore {\n transition-delay: 0.65s;\n opacity: 1;\n transform: translateY(0);\n}\n#migraeffetcs15 .slider__slide-readmore:before {\n content: \"\";\n position: absolute;\n left: -2px;\n top: -3px;\n width: calc(100% + 4px);\n height: calc(100% + 6px);\n background: rgba(255, 255, 255, 0.4);\n transform: scaleX(0.3);\n transform-origin: 0 50%;\n transition: transform 0.3s;\n}\n#migraeffetcs15 .slider__slide-readmore:hover:before {\n transform: scaleX(1);\n}\n#migraeffetcs15 .slider__slide-parts {\n position: absolute;\n left: 0;\n top: 0;\n display: flex;\n width: 100%;\n height: 100%;\n}\n#migraeffetcs15 .slider__slide-parts:after {\n content: \"\";\n z-index: 5;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.1);\n}\n#migraeffetcs15 .slider__slide-part {\n position: relative;\n width: 25%;\n height: 100%;\n}\n#migraeffetcs15 .slider__slide-part-inner {\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 100%;\n background-size: 0 0;\n background-repeat: no-repeat;\n transition: transform 0.5s ease-in-out;\n}\n#migraeffetcs15 .slider__slide-part-inner:before {\n content: \"\";\n position: absolute;\n width: 100vw;\n height: 100%;\n background-image: inherit;\n background-size: cover;\n background-position: center center;\n transition: opacity 0.25s;\n opacity: 0;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(1) .slider__slide-part-inner {\n z-index: 3;\n transition-delay: 0.24s;\n transform: translateX(-32.5%);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner {\n transition-delay: 0.28s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(1) .slider__slide-part-inner:before {\n left: 0vw;\n transition-delay: 0.365s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner:before {\n transition-delay: 0.28s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(2) .slider__slide-part-inner {\n z-index: 2;\n transition-delay: 0.16s;\n transform: translateX(-65%);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner {\n transition-delay: 0.36s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(2) .slider__slide-part-inner:before {\n left: -25vw;\n transition-delay: 0.285s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner:before {\n transition-delay: 0.36s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(3) .slider__slide-part-inner {\n z-index: 1;\n transition-delay: 0.08s;\n transform: translateX(-97.5%);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner {\n transition-delay: 0.44s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(3) .slider__slide-part-inner:before {\n left: -50vw;\n transition-delay: 0.205s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner:before {\n transition-delay: 0.44s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(4) .slider__slide-part-inner {\n z-index: 0;\n transition-delay: 0s;\n transform: translateX(-130%);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner {\n transition-delay: 0.52s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(4) .slider__slide-part-inner:before {\n left: -75vw;\n transition-delay: 0.125s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner:before {\n transition-delay: 0.52s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part-inner {\n transform: translateX(0);\n transition-timing-function: ease;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part-inner:before {\n opacity: 1;\n}\n#migraeffetcs15 .slider__control {\n z-index: 100;\n position: absolute;\n left: 50px;\n top: 50%;\n width: 50px;\n height: 50px;\n margin-top: -25px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.4);\n transform: translateX(-50px);\n opacity: 0;\n transition: all 0.5s 1s;\n cursor: pointer;\n}\n#migraeffetcs15 .slider__control:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border: 2px solid #000;\n border-bottom: none;\n border-right: none;\n transform: translateX(5px) rotate(-45deg);\n}\n#migraeffetcs15 .slider__control--right {\n left: auto;\n right: 50px;\n transform: translateX(50px);\n}\n#migraeffetcs15 .slider__control--right:before {\n transform: translateX(-5px) rotate(135deg);\n}\n#migraeffetcs15 .slider.s--ready .slider__control {\n transform: translateX(0);\n opacity: 1;\n}\n\n#migraeffetcs15 .icon-link {\n z-index: 100;\n position: absolute;\n left: 5px;\n bottom: 5px;\n width: 32px;\n}\n#migraeffetcs15 .icon-link img {\n width: 100%;\n vertical-align: top;\n}\n#migraeffetcs15 .icon-link--twitter {\n left: auto;\n right: 5px;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1cb66b elementor-widget elementor-widget-shortcode\" data-id=\"b1cb66b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><script>class CitiesSlider extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.IMAGE_PARTS = 4;\r\n\r\n this.changeTO = null;\r\n this.AUTOCHANGE_TIME = 4000;\r\n\r\n this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };\r\n }\r\n\r\n componentWillUnmount() {\r\n window.clearTimeout(this.changeTO);\r\n }\r\n\r\n componentDidMount() {\r\n this.runAutochangeTO();\r\n setTimeout(() => {\r\n this.setState({ activeSlide: 0, sliderReady: true });\r\n }, 0);\r\n }\r\n\r\n runAutochangeTO() {\r\n this.changeTO = setTimeout(() => {\r\n this.changeSlides(1);\r\n this.runAutochangeTO();\r\n }, this.AUTOCHANGE_TIME);\r\n }\r\n\r\n changeSlides(change) {\r\n window.clearTimeout(this.changeTO);\r\n const { length } = this.props.slides;\r\n const prevSlide = this.state.activeSlide;\r\n let activeSlide = prevSlide + change;\r\n if (activeSlide < 0) activeSlide = length - 1;\r\n if (activeSlide >= length) activeSlide = 0;\r\n this.setState({ activeSlide, prevSlide });\r\n }\r\n\r\n render() {\r\n const { activeSlide, prevSlide, sliderReady } = this.state;\r\n return \/*#__PURE__*\/(\r\n React.createElement(\"div\", { className: classNames('slider', { 's--ready': sliderReady }) }, \/*#__PURE__*\/\r\n React.createElement(\"p\", { className: \"slider__top-heading\" }, \"Travelers\"), \/*#__PURE__*\/\r\n React.createElement(\"div\", { className: \"slider__slides\" },\r\n this.props.slides.map((slide, index) => \/*#__PURE__*\/\r\n React.createElement(\"div\", {\r\n className: classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index }),\r\n key: slide.city }, \/*#__PURE__*\/\r\n\r\n React.createElement(\"div\", { className: \"slider__slide-content\" }, \/*#__PURE__*\/\r\n React.createElement(\"h3\", { className: \"slider__slide-subheading\" }, slide.country || slide.city), \/*#__PURE__*\/\r\n React.createElement(\"h2\", { className: \"slider__slide-heading\" },\r\n slide.city.split('').map(l => \/*#__PURE__*\/React.createElement(\"span\", null, l))), \/*#__PURE__*\/\r\n\r\n React.createElement(\"p\", { className: \"slider__slide-readmore\" }, \"read more\")), \/*#__PURE__*\/\r\n\r\n React.createElement(\"div\", { className: \"slider__slide-parts\" },\r\n [...Array(this.IMAGE_PARTS).fill()].map((x, i) => \/*#__PURE__*\/\r\n React.createElement(\"div\", { className: \"slider__slide-part\", key: i }, \/*#__PURE__*\/\r\n React.createElement(\"div\", { className: \"slider__slide-part-inner\", style: { backgroundImage: `url(${slide.img})` } }))))))), \/*#__PURE__*\/\r\n\r\n\r\n\r\n\r\n\r\n\r\n React.createElement(\"div\", { className: \"slider__control\", onClick: () => this.changeSlides(-1) }), \/*#__PURE__*\/\r\n React.createElement(\"div\", { className: \"slider__control slider__control--right\", onClick: () => this.changeSlides(1) })));\r\n\r\n\r\n }}\r\n\r\n\r\nconst slides = [\r\n{\r\n city: 'Paris',\r\n country: 'France',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/paris.jpg' },\r\n\r\n{\r\n city: 'Singapore',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/singapore.jpg' },\r\n\r\n{\r\n city: 'Prague',\r\n country: 'Czech Republic',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/prague.jpg' },\r\n\r\n{\r\n city: 'Amsterdam',\r\n country: 'Netherlands',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/amsterdam.jpg' },\r\n\r\n{\r\n city: 'Moscow',\r\n country: 'Russia',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/moscow.jpg' }];\r\n\r\n\r\n\r\nReactDOM.render( \/*#__PURE__*\/React.createElement(CitiesSlider, { slides: slides }), document.querySelector('#app'));<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CodePen – Cities Slider (React)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8267","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Modelo de p\u00e1gina \u2013 7 - MigraPixel<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modelo de p\u00e1gina \u2013 7 - MigraPixel\" \/>\n<meta property=\"og:description\" content=\"CodePen – Cities Slider (React)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/migrapixel.pt\/en\/modelo-de-pagina-7\/\" \/>\n<meta property=\"og:site_name\" content=\"MigraPixel\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/migrapixel\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-05T08:53:11+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/\",\"name\":\"Modelo de p\u00e1gina \u2013 7 - MigraPixel\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/icons.iconarchive.com\\\/icons\\\/uiconstock\\\/socialmedia\\\/256\\\/Dribbble-icon.png\",\"datePublished\":\"2023-10-04T22:51:34+00:00\",\"dateModified\":\"2023-10-05T08:53:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#primaryimage\",\"url\":\"http:\\\/\\\/icons.iconarchive.com\\\/icons\\\/uiconstock\\\/socialmedia\\\/256\\\/Dribbble-icon.png\",\"contentUrl\":\"http:\\\/\\\/icons.iconarchive.com\\\/icons\\\/uiconstock\\\/socialmedia\\\/256\\\/Dribbble-icon.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/migrapixel.pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modelo de p\u00e1gina \u2013 7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#website\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/\",\"name\":\"MigraPixel\",\"description\":\"MigraPixel |Programa\u00e7\u00e3o |Conte\u00fados Digitais | Alojamento Web | DG\",\"publisher\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/migrapixel.pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#organization\",\"name\":\"MigraPixel\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Ativo-1-scaled-1.webp\",\"contentUrl\":\"https:\\\/\\\/migrapixel.pt\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Ativo-1-scaled-1.webp\",\"width\":2560,\"height\":555,\"caption\":\"MigraPixel\"},\"image\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/migrapixel\",\"https:\\\/\\\/www.instagram.com\\\/migrapixel\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Modelo de p\u00e1gina \u2013 7 - MigraPixel","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_GB","og_type":"article","og_title":"Modelo de p\u00e1gina \u2013 7 - MigraPixel","og_description":"CodePen – Cities Slider (React)","og_url":"https:\/\/migrapixel.pt\/en\/modelo-de-pagina-7\/","og_site_name":"MigraPixel","article_publisher":"https:\/\/www.facebook.com\/migrapixel","article_modified_time":"2023-10-05T08:53:11+00:00","og_image":[{"url":"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/","url":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/","name":"Modelo de p\u00e1gina \u2013 7 - MigraPixel","isPartOf":{"@id":"https:\/\/migrapixel.pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#primaryimage"},"image":{"@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#primaryimage"},"thumbnailUrl":"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png","datePublished":"2023-10-04T22:51:34+00:00","dateModified":"2023-10-05T08:53:11+00:00","breadcrumb":{"@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/migrapixel.pt\/modelo-de-pagina-7\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#primaryimage","url":"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png","contentUrl":"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png"},{"@type":"BreadcrumbList","@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/migrapixel.pt\/"},{"@type":"ListItem","position":2,"name":"Modelo de p\u00e1gina \u2013 7"}]},{"@type":"WebSite","@id":"https:\/\/migrapixel.pt\/#website","url":"https:\/\/migrapixel.pt\/","name":"MigraPixel","description":"MigraPixel |Programa\u00e7\u00e3o |Conte\u00fados Digitais | Alojamento Web | DG","publisher":{"@id":"https:\/\/migrapixel.pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/migrapixel.pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/migrapixel.pt\/#organization","name":"MigraPixel","url":"https:\/\/migrapixel.pt\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/migrapixel.pt\/#\/schema\/logo\/image\/","url":"https:\/\/migrapixel.pt\/wp-content\/uploads\/2022\/11\/Ativo-1-scaled-1.webp","contentUrl":"https:\/\/migrapixel.pt\/wp-content\/uploads\/2022\/11\/Ativo-1-scaled-1.webp","width":2560,"height":555,"caption":"MigraPixel"},"image":{"@id":"https:\/\/migrapixel.pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/migrapixel","https:\/\/www.instagram.com\/migrapixel\/"]}]}},"_links":{"self":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages\/8267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/comments?post=8267"}],"version-history":[{"count":5,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages\/8267\/revisions"}],"predecessor-version":[{"id":8272,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages\/8267\/revisions\/8272"}],"wp:attachment":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/media?parent=8267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n CodePen - Cities Slider (React)<\/title>\n <link rel=\"stylesheet\" href=\".\/style.css\">\n\n<\/head>\n<body>\n\n<div id=\"app\"><\/div>\n<a href=\"https:\/\/dribbble.com\/shots\/3774469-T-R-A-V-E-L-E-R\" target=\"_blank\" class=\"icon-link\">\n <img decoding=\"async\" src=\"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png\">\n<\/a>\n<a href=\"https:\/\/twitter.com\/NikolayTalanov\" target=\"_blank\" class=\"icon-link icon-link--twitter\">\n <img decoding=\"async\" src=\"https:\/\/cdn1.iconfinder.com\/data\/icons\/logotypes\/32\/twitter-128.png\">\n<\/a>\n\n <script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.6.1\/react.min.js'><\/script>\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react\/15.6.1\/react-dom.min.js'><\/script>\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/classnames\/2.2.5\/index.min.js'><\/script><script src=\".\/script.js\"><\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-432c0ee elementor-widget elementor-widget-html\" data-id=\"432c0ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n \/*\n https:\/\/codepen.io\/suez\/pen\/OjGQza\n *\/\n #migraeffetcs15 *, #migraeffetcs15 *:before, #migraeffetcs15 *:after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n#migraeffetcs15 body {\n font-family: \"Roboto\", Helvetica, Arial, sans-serif;\n background: #000;\n}\n\n#migraeffetcs15 .slider {\n overflow: hidden;\n position: relative;\n height: 100vh;\n color: #fff;\n}\n#migraeffetcs15 .slider__top-heading {\n z-index: 12;\n position: absolute;\n left: 0;\n top: 100px;\n width: 100%;\n text-align: center;\n font-size: 16px;\n text-transform: uppercase;\n letter-spacing: 2.5px;\n transition: all 0.5s 1s;\n transform: translateY(-30px);\n opacity: 0;\n}\n#migraeffetcs15 .slider.s--ready .slider__top-heading {\n transform: translateY(0);\n opacity: 1;\n}\n#migraeffetcs15 .slider__slides {\n position: relative;\n height: 100%;\n}\n#migraeffetcs15 .slider__slide {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n#migraeffetcs15 .slider__slide.s--active {\n pointer-events: auto;\n}\n#migraeffetcs15 .slider__slide-content {\n z-index: 6;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n height: 100%;\n text-transform: uppercase;\n line-height: 1;\n}\n#migraeffetcs15 .slider__slide-subheading {\n margin-bottom: 20px;\n font-size: 24px;\n letter-spacing: 2px;\n transform: translateY(20px);\n opacity: 0;\n transition: 0.5s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-subheading {\n transition-delay: 0.65s;\n opacity: 1;\n transform: translateY(0);\n}\n#migraeffetcs15 .slider__slide-heading {\n display: flex;\n margin-bottom: 20px;\n font-size: 60px;\n letter-spacing: 12px;\n}\n#migraeffetcs15 .slider__slide-heading span {\n display: block;\n opacity: 0;\n transform: translateY(-60px);\n transition: all 0.3333333333s;\n}\n#migraeffetcs15 .slider__slide.s--prev .slider__slide-heading span {\n transform: translateY(60px);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span {\n opacity: 1;\n transform: translateY(0);\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(1) {\n transition-delay: 0s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(1) {\n transition-delay: 0.3333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(2) {\n transition-delay: 0.1s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(2) {\n transition-delay: 0.4333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(3) {\n transition-delay: 0.2s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(3) {\n transition-delay: 0.5333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(4) {\n transition-delay: 0.3s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(4) {\n transition-delay: 0.6333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(5) {\n transition-delay: 0.4s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(5) {\n transition-delay: 0.7333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(6) {\n transition-delay: 0.5s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(6) {\n transition-delay: 0.8333333333s;\n}\n#migraeffetcs15 .slider__slide-heading span:nth-child(n+7) {\n transition-delay: 0.6s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-heading span:nth-child(n+7) {\n transition-delay: 0.9333333333s;\n}\n#migraeffetcs15 .slider__slide-readmore {\n position: relative;\n font-size: 14px;\n text-transform: lowercase;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n transform: translateY(-20px);\n cursor: pointer;\n opacity: 0;\n transition: 0.5s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-readmore {\n transition-delay: 0.65s;\n opacity: 1;\n transform: translateY(0);\n}\n#migraeffetcs15 .slider__slide-readmore:before {\n content: \"\";\n position: absolute;\n left: -2px;\n top: -3px;\n width: calc(100% + 4px);\n height: calc(100% + 6px);\n background: rgba(255, 255, 255, 0.4);\n transform: scaleX(0.3);\n transform-origin: 0 50%;\n transition: transform 0.3s;\n}\n#migraeffetcs15 .slider__slide-readmore:hover:before {\n transform: scaleX(1);\n}\n#migraeffetcs15 .slider__slide-parts {\n position: absolute;\n left: 0;\n top: 0;\n display: flex;\n width: 100%;\n height: 100%;\n}\n#migraeffetcs15 .slider__slide-parts:after {\n content: \"\";\n z-index: 5;\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.1);\n}\n#migraeffetcs15 .slider__slide-part {\n position: relative;\n width: 25%;\n height: 100%;\n}\n#migraeffetcs15 .slider__slide-part-inner {\n overflow: hidden;\n position: relative;\n width: 100%;\n height: 100%;\n background-size: 0 0;\n background-repeat: no-repeat;\n transition: transform 0.5s ease-in-out;\n}\n#migraeffetcs15 .slider__slide-part-inner:before {\n content: \"\";\n position: absolute;\n width: 100vw;\n height: 100%;\n background-image: inherit;\n background-size: cover;\n background-position: center center;\n transition: opacity 0.25s;\n opacity: 0;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(1) .slider__slide-part-inner {\n z-index: 3;\n transition-delay: 0.24s;\n transform: translateX(-32.5%);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner {\n transition-delay: 0.28s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(1) .slider__slide-part-inner:before {\n left: 0vw;\n transition-delay: 0.365s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(1) .slider__slide-part-inner:before {\n transition-delay: 0.28s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(2) .slider__slide-part-inner {\n z-index: 2;\n transition-delay: 0.16s;\n transform: translateX(-65%);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner {\n transition-delay: 0.36s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(2) .slider__slide-part-inner:before {\n left: -25vw;\n transition-delay: 0.285s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(2) .slider__slide-part-inner:before {\n transition-delay: 0.36s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(3) .slider__slide-part-inner {\n z-index: 1;\n transition-delay: 0.08s;\n transform: translateX(-97.5%);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner {\n transition-delay: 0.44s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(3) .slider__slide-part-inner:before {\n left: -50vw;\n transition-delay: 0.205s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(3) .slider__slide-part-inner:before {\n transition-delay: 0.44s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(4) .slider__slide-part-inner {\n z-index: 0;\n transition-delay: 0s;\n transform: translateX(-130%);\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner {\n transition-delay: 0.52s;\n}\n#migraeffetcs15 .slider__slide-part:nth-child(4) .slider__slide-part-inner:before {\n left: -75vw;\n transition-delay: 0.125s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part:nth-child(4) .slider__slide-part-inner:before {\n transition-delay: 0.52s;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part-inner {\n transform: translateX(0);\n transition-timing-function: ease;\n}\n#migraeffetcs15 .slider__slide.s--active .slider__slide-part-inner:before {\n opacity: 1;\n}\n#migraeffetcs15 .slider__control {\n z-index: 100;\n position: absolute;\n left: 50px;\n top: 50%;\n width: 50px;\n height: 50px;\n margin-top: -25px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.4);\n transform: translateX(-50px);\n opacity: 0;\n transition: all 0.5s 1s;\n cursor: pointer;\n}\n#migraeffetcs15 .slider__control:before {\n content: \"\";\n position: absolute;\n left: 50%;\n top: 50%;\n width: 20px;\n height: 20px;\n margin-left: -10px;\n margin-top: -10px;\n border: 2px solid #000;\n border-bottom: none;\n border-right: none;\n transform: translateX(5px) rotate(-45deg);\n}\n#migraeffetcs15 .slider__control--right {\n left: auto;\n right: 50px;\n transform: translateX(50px);\n}\n#migraeffetcs15 .slider__control--right:before {\n transform: translateX(-5px) rotate(135deg);\n}\n#migraeffetcs15 .slider.s--ready .slider__control {\n transform: translateX(0);\n opacity: 1;\n}\n\n#migraeffetcs15 .icon-link {\n z-index: 100;\n position: absolute;\n left: 5px;\n bottom: 5px;\n width: 32px;\n}\n#migraeffetcs15 .icon-link img {\n width: 100%;\n vertical-align: top;\n}\n#migraeffetcs15 .icon-link--twitter {\n left: auto;\n right: 5px;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b1cb66b elementor-widget elementor-widget-shortcode\" data-id=\"b1cb66b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><script>class CitiesSlider extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.IMAGE_PARTS = 4;\r\n\r\n this.changeTO = null;\r\n this.AUTOCHANGE_TIME = 4000;\r\n\r\n this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };\r\n }\r\n\r\n componentWillUnmount() {\r\n window.clearTimeout(this.changeTO);\r\n }\r\n\r\n componentDidMount() {\r\n this.runAutochangeTO();\r\n setTimeout(() => {\r\n this.setState({ activeSlide: 0, sliderReady: true });\r\n }, 0);\r\n }\r\n\r\n runAutochangeTO() {\r\n this.changeTO = setTimeout(() => {\r\n this.changeSlides(1);\r\n this.runAutochangeTO();\r\n }, this.AUTOCHANGE_TIME);\r\n }\r\n\r\n changeSlides(change) {\r\n window.clearTimeout(this.changeTO);\r\n const { length } = this.props.slides;\r\n const prevSlide = this.state.activeSlide;\r\n let activeSlide = prevSlide + change;\r\n if (activeSlide < 0) activeSlide = length - 1;\r\n if (activeSlide >= length) activeSlide = 0;\r\n this.setState({ activeSlide, prevSlide });\r\n }\r\n\r\n render() {\r\n const { activeSlide, prevSlide, sliderReady } = this.state;\r\n return \/*#__PURE__*\/(\r\n React.createElement(\"div\", { className: classNames('slider', { 's--ready': sliderReady }) }, \/*#__PURE__*\/\r\n React.createElement(\"p\", { className: \"slider__top-heading\" }, \"Travelers\"), \/*#__PURE__*\/\r\n React.createElement(\"div\", { className: \"slider__slides\" },\r\n this.props.slides.map((slide, index) => \/*#__PURE__*\/\r\n React.createElement(\"div\", {\r\n className: classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index }),\r\n key: slide.city }, \/*#__PURE__*\/\r\n\r\n React.createElement(\"div\", { className: \"slider__slide-content\" }, \/*#__PURE__*\/\r\n React.createElement(\"h3\", { className: \"slider__slide-subheading\" }, slide.country || slide.city), \/*#__PURE__*\/\r\n React.createElement(\"h2\", { className: \"slider__slide-heading\" },\r\n slide.city.split('').map(l => \/*#__PURE__*\/React.createElement(\"span\", null, l))), \/*#__PURE__*\/\r\n\r\n React.createElement(\"p\", { className: \"slider__slide-readmore\" }, \"read more\")), \/*#__PURE__*\/\r\n\r\n React.createElement(\"div\", { className: \"slider__slide-parts\" },\r\n [...Array(this.IMAGE_PARTS).fill()].map((x, i) => \/*#__PURE__*\/\r\n React.createElement(\"div\", { className: \"slider__slide-part\", key: i }, \/*#__PURE__*\/\r\n React.createElement(\"div\", { className: \"slider__slide-part-inner\", style: { backgroundImage: `url(${slide.img})` } }))))))), \/*#__PURE__*\/\r\n\r\n\r\n\r\n\r\n\r\n\r\n React.createElement(\"div\", { className: \"slider__control\", onClick: () => this.changeSlides(-1) }), \/*#__PURE__*\/\r\n React.createElement(\"div\", { className: \"slider__control slider__control--right\", onClick: () => this.changeSlides(1) })));\r\n\r\n\r\n }}\r\n\r\n\r\nconst slides = [\r\n{\r\n city: 'Paris',\r\n country: 'France',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/paris.jpg' },\r\n\r\n{\r\n city: 'Singapore',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/singapore.jpg' },\r\n\r\n{\r\n city: 'Prague',\r\n country: 'Czech Republic',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/prague.jpg' },\r\n\r\n{\r\n city: 'Amsterdam',\r\n country: 'Netherlands',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/amsterdam.jpg' },\r\n\r\n{\r\n city: 'Moscow',\r\n country: 'Russia',\r\n img: 'https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/moscow.jpg' }];\r\n\r\n\r\n\r\nReactDOM.render( \/*#__PURE__*\/React.createElement(CitiesSlider, { slides: slides }), document.querySelector('#app'));<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CodePen – Cities Slider (React)<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8267","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Modelo de p\u00e1gina \u2013 7 - MigraPixel<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Modelo de p\u00e1gina \u2013 7 - MigraPixel\" \/>\n<meta property=\"og:description\" content=\"CodePen – Cities Slider (React)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/migrapixel.pt\/en\/modelo-de-pagina-7\/\" \/>\n<meta property=\"og:site_name\" content=\"MigraPixel\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/migrapixel\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-05T08:53:11+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/\",\"name\":\"Modelo de p\u00e1gina \u2013 7 - MigraPixel\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/icons.iconarchive.com\\\/icons\\\/uiconstock\\\/socialmedia\\\/256\\\/Dribbble-icon.png\",\"datePublished\":\"2023-10-04T22:51:34+00:00\",\"dateModified\":\"2023-10-05T08:53:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#primaryimage\",\"url\":\"http:\\\/\\\/icons.iconarchive.com\\\/icons\\\/uiconstock\\\/socialmedia\\\/256\\\/Dribbble-icon.png\",\"contentUrl\":\"http:\\\/\\\/icons.iconarchive.com\\\/icons\\\/uiconstock\\\/socialmedia\\\/256\\\/Dribbble-icon.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-7\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/migrapixel.pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modelo de p\u00e1gina \u2013 7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#website\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/\",\"name\":\"MigraPixel\",\"description\":\"MigraPixel |Programa\u00e7\u00e3o |Conte\u00fados Digitais | Alojamento Web | DG\",\"publisher\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/migrapixel.pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#organization\",\"name\":\"MigraPixel\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Ativo-1-scaled-1.webp\",\"contentUrl\":\"https:\\\/\\\/migrapixel.pt\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Ativo-1-scaled-1.webp\",\"width\":2560,\"height\":555,\"caption\":\"MigraPixel\"},\"image\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/migrapixel\",\"https:\\\/\\\/www.instagram.com\\\/migrapixel\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Modelo de p\u00e1gina \u2013 7 - MigraPixel","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_GB","og_type":"article","og_title":"Modelo de p\u00e1gina \u2013 7 - MigraPixel","og_description":"CodePen – Cities Slider (React)","og_url":"https:\/\/migrapixel.pt\/en\/modelo-de-pagina-7\/","og_site_name":"MigraPixel","article_publisher":"https:\/\/www.facebook.com\/migrapixel","article_modified_time":"2023-10-05T08:53:11+00:00","og_image":[{"url":"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/","url":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/","name":"Modelo de p\u00e1gina \u2013 7 - MigraPixel","isPartOf":{"@id":"https:\/\/migrapixel.pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#primaryimage"},"image":{"@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#primaryimage"},"thumbnailUrl":"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png","datePublished":"2023-10-04T22:51:34+00:00","dateModified":"2023-10-05T08:53:11+00:00","breadcrumb":{"@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/migrapixel.pt\/modelo-de-pagina-7\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#primaryimage","url":"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png","contentUrl":"http:\/\/icons.iconarchive.com\/icons\/uiconstock\/socialmedia\/256\/Dribbble-icon.png"},{"@type":"BreadcrumbList","@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/migrapixel.pt\/"},{"@type":"ListItem","position":2,"name":"Modelo de p\u00e1gina \u2013 7"}]},{"@type":"WebSite","@id":"https:\/\/migrapixel.pt\/#website","url":"https:\/\/migrapixel.pt\/","name":"MigraPixel","description":"MigraPixel |Programa\u00e7\u00e3o |Conte\u00fados Digitais | Alojamento Web | DG","publisher":{"@id":"https:\/\/migrapixel.pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/migrapixel.pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/migrapixel.pt\/#organization","name":"MigraPixel","url":"https:\/\/migrapixel.pt\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/migrapixel.pt\/#\/schema\/logo\/image\/","url":"https:\/\/migrapixel.pt\/wp-content\/uploads\/2022\/11\/Ativo-1-scaled-1.webp","contentUrl":"https:\/\/migrapixel.pt\/wp-content\/uploads\/2022\/11\/Ativo-1-scaled-1.webp","width":2560,"height":555,"caption":"MigraPixel"},"image":{"@id":"https:\/\/migrapixel.pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/migrapixel","https:\/\/www.instagram.com\/migrapixel\/"]}]}},"_links":{"self":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages\/8267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/comments?post=8267"}],"version-history":[{"count":5,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages\/8267\/revisions"}],"predecessor-version":[{"id":8272,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages\/8267\/revisions\/8272"}],"wp:attachment":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/media?parent=8267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}