{"id":8156,"date":"2023-10-04T16:54:54","date_gmt":"2023-10-04T16:54:54","guid":{"rendered":"https:\/\/migrapixel.pt\/?page_id=8156"},"modified":"2023-10-05T08:53:02","modified_gmt":"2023-10-05T08:53:02","slug":"modelo-de-pagina-8","status":"publish","type":"page","link":"https:\/\/migrapixel.pt\/en\/modelo-de-pagina-8\/","title":{"rendered":"Modelo de p\u00e1gina \u2013 8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8156\" class=\"elementor elementor-8156\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bf5b965 elementor-section-full_width elementor-section-height-full elementor-section-height-default elementor-section-items-middle\" data-id=\"bf5b965\" data-element_type=\"section\" data-e-type=\"section\" id=\"migraeffects11\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bd3cf6a\" data-id=\"bd3cf6a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-714d23e elementor-widget elementor-widget-html\" data-id=\"714d23e\" 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<!-- \nPlease note, that you can apply .m--global-blending-active to .fnc-slider \nto enable blend-mode for all background-images or apply .m--blend-bg-active\nto some specific slides (.fnc-slide). It's disabled by default in this demo,\nbecause it requires specific images, where more than 50% of bg is transparent or monotone\n-->\n<div class=\"demo-cont\">\n  <!-- slider start -->\n  <div class=\"fnc-slider example-slider\">\n    <div class=\"fnc-slider__slides\">\n      <!-- slide start -->\n      <div class=\"fnc-slide m--blend-green m--active-slide\">\n        <div class=\"fnc-slide__inner\">\n          <div class=\"fnc-slide__mask\">\n            <div class=\"fnc-slide__mask-inner\"><\/div>\n          <\/div>\n          <div class=\"fnc-slide__content\">\n            <h2 class=\"fnc-slide__heading\">\n              <div class=\"fnc-slide__heading-line\">\n                <span>Black<\/span>\n              <\/div>\n              <div class=\"fnc-slide__heading-line\">\n                <span>Widow<\/span>\n              <\/div>\n            <\/h2>\n            <button type=\"button\" class=\"fnc-slide__action-btn\">\n              Credits\n              <span data-text=\"Credits\">Credits<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n      <!-- slide end -->\n      <!-- slide start -->\n      <div class=\"fnc-slide m--blend-dark\">\n        <div class=\"fnc-slide__inner\">\n          <div class=\"fnc-slide__mask\">\n            <div class=\"fnc-slide__mask-inner\"><\/div>\n          <\/div>\n          <div class=\"fnc-slide__content\">\n            <h2 class=\"fnc-slide__heading\">\n              <div class=\"fnc-slide__heading-line\">\n                <span>Captain<\/span>\n              <\/div>\n              <div class=\"fnc-slide__heading-line\">\n                <span>America<\/span>\n              <\/div>\n            <\/h2>\n            <button type=\"button\" class=\"fnc-slide__action-btn\">\n              Credits\n              <span data-text=\"Credits\">Credits<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n      <!-- slide end -->\n      <!-- slide start -->\n      <div class=\"fnc-slide m--blend-red\">\n        <div class=\"fnc-slide__inner\">\n          <div class=\"fnc-slide__mask\">\n            <div class=\"fnc-slide__mask-inner\"><\/div>\n          <\/div>\n          <div class=\"fnc-slide__content\">\n            <h2 class=\"fnc-slide__heading\">\n              <div class=\"fnc-slide__heading-line\">\n                <span>Iron<\/span>\n              <\/div>\n              <div class=\"fnc-slide__heading-line\">\n                <span>Man<\/span>\n              <\/div>\n            <\/h2>\n            <button type=\"button\" class=\"fnc-slide__action-btn\">\n              Credits\n              <span data-text=\"Credits\">Credits<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n      <!-- slide end -->\n      <!-- slide start -->\n      <div class=\"fnc-slide m--blend-blue\">\n        <div class=\"fnc-slide__inner\">\n          <div class=\"fnc-slide__mask\">\n            <div class=\"fnc-slide__mask-inner\"><\/div>\n          <\/div>\n          <div class=\"fnc-slide__content\">\n            <h2 class=\"fnc-slide__heading\">\n              <div class=\"fnc-slide__heading-line\">\n                <span>Thor<\/span>\n              <\/div>\n              <div class=\"fnc-slide__heading-line\">\n                <span>Just Thor<\/span>\n              <\/div>\n            <\/h2>\n            <button type=\"button\" class=\"fnc-slide__action-btn\">\n              Credits\n              <span data-text=\"Credits\">Credits<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n      <!-- slide end -->\n    <\/div>\n    <nav class=\"fnc-nav\">\n      <div class=\"fnc-nav__bgs\">\n        <div class=\"fnc-nav__bg m--navbg-green m--active-nav-bg\"><\/div>\n        <div class=\"fnc-nav__bg m--navbg-dark\"><\/div>\n        <div class=\"fnc-nav__bg m--navbg-red\"><\/div>\n        <div class=\"fnc-nav__bg m--navbg-blue\"><\/div>\n      <\/div>\n      <div class=\"fnc-nav__controls\">\n        <button class=\"fnc-nav__control\">\n          Black Widow\n          <span class=\"fnc-nav__control-progress\"><\/span>\n        <\/button>\n        <button class=\"fnc-nav__control\">\n          Captain America\n          <span class=\"fnc-nav__control-progress\"><\/span>\n        <\/button>\n        <button class=\"fnc-nav__control\">\n          Iron Man\n          <span class=\"fnc-nav__control-progress\"><\/span>\n        <\/button>\n        <button class=\"fnc-nav__control\">\n          Thor\n          <span class=\"fnc-nav__control-progress\"><\/span>\n        <\/button>\n      <\/div>\n    <\/nav>\n  <\/div>\n  <!-- slider end -->\n  <div class=\"demo-cont__credits\">\n    <div class=\"demo-cont__credits-close\"><\/div>\n    <h2 class=\"demo-cont__credits-heading\">Made by<\/h2>\n    <img decoding=\"async\" src=\"\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/profile\/profile-512_5.jpg\" alt=\"\" class=\"demo-cont__credits-img\" \/>\n    <h3 class=\"demo-cont__credits-name\">Nikolay Talanov<\/h3>\n    <a href=\"https:\/\/codepen.io\/suez\/\" target=\"_blank\" class=\"demo-cont__credits-link\">My codepen<\/a>\n    <a href=\"https:\/\/twitter.com\/NikolayTalanov\" target=\"_blank\" class=\"demo-cont__credits-link\">My twitter<\/a>\n    <h2 class=\"demo-cont__credits-heading\">Based on<\/h2>\n    <a href=\"https:\/\/dribbble.com\/shots\/2375246-Fashion-Butique-slider-animation\" target=\"_blank\" class=\"demo-cont__credits-link\">Concept by Kreativa Studio<\/a>\n    <h4 class=\"demo-cont__credits-blend\">Global Blend Mode<\/h4>\n    <div class=\"colorful-switch\">\n      <input type=\"checkbox\" class=\"colorful-switch__checkbox js-activate-global-blending\" id=\"colorful-switch-cb\" \/>\n      <label class=\"colorful-switch__label\" for=\"colorful-switch-cb\">\n        <span class=\"colorful-switch__bg\"><\/span>\n        <span class=\"colorful-switch__dot\"><\/span>\n        <span class=\"colorful-switch__on\">\n          <span class=\"colorful-switch__on__inner\"><\/span>\n        <\/span>\n        <span class=\"colorful-switch__off\"><\/span>\n      <\/label>\n    <\/div>\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4cb0aa8 elementor-widget elementor-widget-html\" data-id=\"4cb0aa8\" 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    .fnc {\n  \/* you can add color names and their values here\n  and then simply add classes like .m--blend-$colorName to .fnc-slide \n  to apply specific color for mask blend mode *\/\n}\n.fnc-slider {\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  height: 100vh;\n}\n.fnc-slider *, .fnc-slider *:before, .fnc-slider *:after {\n  box-sizing: border-box;\n}\n.fnc-slider__slides {\n  position: relative;\n  height: 100%;\n  transition: transform 1s 0.6666666667s;\n}\n.fnc-slider .m--blend-dark .fnc-slide__inner {\n  background-color: #8a8a8a;\n}\n.fnc-slider .m--blend-dark .fnc-slide__mask-inner {\n  background-color: #575757;\n}\n.fnc-slider .m--navbg-dark {\n  background-color: #575757;\n}\n.fnc-slider .m--blend-green .fnc-slide__inner {\n  background-color: #6d9b98;\n}\n.fnc-slider .m--blend-green .fnc-slide__mask-inner {\n  background-color: #42605E;\n}\n.fnc-slider .m--navbg-green {\n  background-color: #42605E;\n}\n.fnc-slider .m--blend-red .fnc-slide__inner {\n  background-color: #ea2329;\n}\n.fnc-slider .m--blend-red .fnc-slide__mask-inner {\n  background-color: #990e13;\n}\n.fnc-slider .m--navbg-red {\n  background-color: #990e13;\n}\n.fnc-slider .m--blend-blue .fnc-slide__inner {\n  background-color: #59aecb;\n}\n.fnc-slider .m--blend-blue .fnc-slide__mask-inner {\n  background-color: #2D7791;\n}\n.fnc-slider .m--navbg-blue {\n  background-color: #2D7791;\n}\n.fnc-slide {\n  overflow: hidden;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  transform: translate3d(0, 0, 0);\n}\n.fnc-slide.m--before-sliding {\n  z-index: 2 !important;\n  transform: translate3d(100%, 0, 0);\n}\n.fnc-slide.m--active-slide {\n  z-index: 1;\n  transition: transform 1s 0.6666666667s ease-in-out;\n  transform: translate3d(0, 0, 0);\n}\n.fnc-slide__inner {\n  position: relative;\n  height: 100%;\n  background-size: cover;\n  background-position: center top;\n  transform: translate3d(0, 0, 0);\n}\n.m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner {\n  background-blend-mode: luminosity;\n}\n.m--before-sliding .fnc-slide__inner {\n  transform: translate3d(-100%, 0, 0);\n}\n.m--active-slide .fnc-slide__inner {\n  transition: transform 1s 0.6666666667s ease-in-out;\n  transform: translate3d(0, 0, 0);\n}\n.fnc-slide__mask {\n  overflow: hidden;\n  z-index: 1;\n  position: absolute;\n  right: 60%;\n  top: 15%;\n  width: 50.25vh;\n  height: 67vh;\n  margin-right: -90px;\n  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);\n          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);\n  transform-origin: 50% 0;\n  transition-timing-function: ease-in-out;\n}\n.m--before-sliding .fnc-slide__mask {\n  transform: rotate(-10deg) translate3d(200px, 0, 0);\n  opacity: 0;\n}\n.m--active-slide .fnc-slide__mask {\n  transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s;\n  transform: translate3d(0, 0, 0);\n  opacity: 1;\n}\n.m--previous-slide .fnc-slide__mask {\n  transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s;\n  transform: rotate(10deg) translate3d(-200px, 0, 0);\n  opacity: 0;\n}\n.fnc-slide__mask-inner {\n  z-index: -1;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 100vw;\n  height: 100vh;\n  margin-left: -50vw;\n  margin-top: -50vh;\n  background-size: cover;\n  background-position: center center;\n  background-blend-mode: luminosity;\n  transform-origin: 50% 16.5vh;\n  transition-timing-function: ease-in-out;\n}\n.m--before-sliding .fnc-slide__mask-inner {\n  transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);\n}\n.m--active-slide .fnc-slide__mask-inner {\n  transition: transform 0.7s 1.2222222222s;\n  transform: translateX(0);\n}\n.m--previous-slide .fnc-slide__mask-inner {\n  transition: transform 0.7s 0.3333333333s;\n  transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);\n}\n.fnc-slide__content {\n  z-index: 2;\n  position: absolute;\n  left: 40%;\n  top: 40%;\n}\n.fnc-slide__heading {\n  margin-bottom: 10px;\n  text-transform: uppercase;\n}\n.fnc-slide__heading-line {\n  overflow: hidden;\n  position: relative;\n  padding-right: 20px;\n  font-size: 100px;\n  color: #fff;\n  word-spacing: 10px;\n}\n.fnc-slide__heading-line:nth-child(2) {\n  padding-left: 30px;\n}\n.m--before-sliding .fnc-slide__heading-line {\n  transform: translateY(100%);\n}\n.m--active-slide .fnc-slide__heading-line {\n  transition: transform 1.5s 1s;\n  transform: translateY(0);\n}\n.m--previous-slide .fnc-slide__heading-line {\n  transition: transform 1.5s;\n  transform: translateY(-100%);\n}\n.fnc-slide__heading-line span {\n  display: block;\n}\n.m--before-sliding .fnc-slide__heading-line span {\n  transform: translateY(-100%);\n}\n.m--active-slide .fnc-slide__heading-line span {\n  transition: transform 1.5s 1s;\n  transform: translateY(0);\n}\n.m--previous-slide .fnc-slide__heading-line span {\n  transition: transform 1.5s;\n  transform: translateY(100%);\n}\n.fnc-slide__action-btn {\n  position: relative;\n  margin-left: 200px;\n  padding: 5px 15px;\n  font-size: 20px;\n  line-height: 1;\n  color: transparent;\n  border: none;\n  text-transform: uppercase;\n  background: transparent;\n  cursor: pointer;\n  text-align: center;\n  outline: none;\n}\n.fnc-slide__action-btn span {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  perspective: 1000px;\n  transform-style: preserve-3d;\n  transition: transform 0.3s;\n  transform-origin: 50% 0;\n  line-height: 30px;\n  color: #fff;\n}\n.fnc-slide__action-btn span:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  border: 2px solid #fff;\n  border-top: none;\n  border-bottom: none;\n}\n.fnc-slide__action-btn span:after {\n  content: attr(data-text);\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  line-height: 30px;\n  background: #1F2833;\n  opacity: 0;\n  transform-origin: 50% 0;\n  transform: translateY(100%) rotateX(-90deg);\n  transition: opacity 0.15s 0.15s;\n}\n.fnc-slide__action-btn:hover span {\n  transform: rotateX(90deg);\n}\n.fnc-slide__action-btn:hover span:after {\n  opacity: 1;\n  transition: opacity 0.15s;\n}\n.fnc-nav {\n  z-index: 5;\n  position: absolute;\n  right: 0;\n  bottom: 0;\n}\n.fnc-nav__bgs {\n  z-index: -1;\n  overflow: hidden;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n.fnc-nav__bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n.fnc-nav__bg.m--nav-bg-before {\n  z-index: 2 !important;\n  transform: translateX(100%);\n}\n.fnc-nav__bg.m--active-nav-bg {\n  z-index: 1;\n  transition: transform 1s 0.6666666667s;\n  transform: translateX(0);\n}\n.fnc-nav__controls {\n  font-size: 0;\n}\n.fnc-nav__control {\n  overflow: hidden;\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  width: 100px;\n  height: 50px;\n  font-size: 14px;\n  color: #fff;\n  text-transform: uppercase;\n  background: transparent;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: background-color 0.5s;\n}\n.fnc-nav__control.m--active-control {\n  background: #1F2833;\n}\n.fnc-nav__control-progress {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 2px;\n  background: #fff;\n  transform-origin: 0 50%;\n  transform: scaleX(0);\n  transition-timing-function: linear !important;\n}\n.m--with-autosliding .m--active-control .fnc-nav__control-progress {\n  transform: scaleX(1);\n}\n.m--prev-control .fnc-nav__control-progress {\n  transform: translateX(100%);\n  transition: transform 0.5s !important;\n}\n.m--reset-progress .fnc-nav__control-progress {\n  transform: scaleX(0);\n  transition: transform 0s 0s !important;\n}\n.m--autosliding-blocked .fnc-nav__control-progress {\n  transition: all 0s 0s !important;\n  transform: scaleX(0) !important;\n}\n\n\/* NOT PART OF COMMON SLIDER STYLES *\/\nbody {\n  margin: 0;\n}\n\n.demo-cont {\n  overflow: hidden;\n  position: relative;\n  height: 100vh;\n  perspective: 1500px;\n  background: #000;\n}\n.demo-cont__credits {\n  box-sizing: border-box;\n  overflow-y: auto;\n  z-index: 1;\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 400px;\n  height: 100%;\n  padding: 20px 10px 30px;\n  background: #303030;\n  font-family: \"Open Sans\", Helvetica, Arial, sans-serif;\n  color: #fff;\n  text-align: center;\n  transition: transform 0.7s;\n  transform: translate3d(100%, 0, 0) rotateY(-45deg);\n  will-change: transform;\n}\n.credits-active .demo-cont__credits {\n  transition: transform 0.7s 0.2333333333s;\n  transform: translate3d(0, 0, 0);\n}\n.demo-cont__credits *, .demo-cont__credits *:before, .demo-cont__credits *:after {\n  box-sizing: border-box;\n}\n.demo-cont__credits-close {\n  position: absolute;\n  right: 20px;\n  top: 20px;\n  width: 28px;\n  height: 28px;\n  cursor: pointer;\n}\n.demo-cont__credits-close:before, .demo-cont__credits-close:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n  height: 2px;\n  margin-top: -1px;\n  background: #fff;\n}\n.demo-cont__credits-close:before {\n  transform: rotate(45deg);\n}\n.demo-cont__credits-close:after {\n  transform: rotate(-45deg);\n}\n.demo-cont__credits-heading {\n  text-transform: uppercase;\n  font-size: 40px;\n  margin-bottom: 20px;\n}\n.demo-cont__credits-img {\n  display: block;\n  width: 60%;\n  margin: 0 auto 30px;\n  border-radius: 10px;\n}\n.demo-cont__credits-name {\n  margin-bottom: 20px;\n  font-size: 30px;\n}\n.demo-cont__credits-link {\n  display: block;\n  margin-bottom: 10px;\n  font-size: 24px;\n  color: #fff;\n}\n.demo-cont__credits-blend {\n  font-size: 30px;\n  margin-bottom: 10px;\n}\n\n.example-slider {\n  z-index: 2;\n  transform: translate3d(0, 0, 0);\n  transition: transform 0.7s;\n}\n.credits-active .example-slider {\n  transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9);\n}\n.example-slider .fnc-slide-1 .fnc-slide__inner,\n.example-slider .fnc-slide-1 .fnc-slide__mask-inner {\n  background-image: url(\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/blackwidow.jpg\");\n}\n.example-slider .fnc-slide-2 .fnc-slide__inner,\n.example-slider .fnc-slide-2 .fnc-slide__mask-inner {\n  background-image: url(\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/captainamerica.jpg\");\n}\n.example-slider .fnc-slide-3 .fnc-slide__inner,\n.example-slider .fnc-slide-3 .fnc-slide__mask-inner {\n  background-image: url(\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/ironman-alt.jpg\");\n}\n.example-slider .fnc-slide-3 .fnc-slide__inner:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(255, 255, 255, 0.1);\n}\n.example-slider .fnc-slide-4 .fnc-slide__inner,\n.example-slider .fnc-slide-4 .fnc-slide__mask-inner {\n  background-image: url(\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/142996\/thor.jpg\");\n}\n.example-slider .fnc-slide-4 .fnc-slide__inner:before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0, 0, 0, 0.2);\n}\n.example-slider .fnc-slide__heading,\n.example-slider .fnc-slide__action-btn,\n.example-slider .fnc-nav__control {\n  font-family: \"Open Sans\", Helvetica, Arial, sans-serif;\n}\n\n\/* COLORFUL SWITCH STYLES \n   ORIGINAL DEMO - https:\/\/codepen.io\/suez\/pen\/WQjwOb *\/\n.colorful-switch {\n  position: relative;\n  width: 180px;\n  height: 77.1428571429px;\n  margin: 0 auto;\n  border-radius: 32.1428571429px;\n  background: #cfcfcf;\n}\n.colorful-switch:before {\n  content: \"\";\n  z-index: -1;\n  position: absolute;\n  left: -5px;\n  top: -5px;\n  width: 190px;\n  height: 87.1428571429px;\n  border-radius: 37.1428571429px;\n  background: #314239;\n  transition: background-color 0.3s;\n}\n.colorful-switch:hover:before {\n  background: #4C735F;\n}\n.colorful-switch__checkbox {\n  z-index: -10;\n  position: absolute;\n  left: 0;\n  top: 0;\n  opacity: 0;\n}\n.colorful-switch__label {\n  z-index: 1;\n  overflow: hidden;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 32.1428571429px;\n  cursor: pointer;\n}\n.colorful-switch__bg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 540px;\n  height: 100%;\n  background: linear-gradient(90deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%);\n  transition: transform 0.5s;\n  transform: translate3d(-360px, 0, 0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg {\n  transform: translate3d(0, 0, 0);\n}\n.colorful-switch__dot {\n  position: absolute;\n  left: 131.1428571429px;\n  top: 50%;\n  width: 5.1428571429px;\n  height: 5.1428571429px;\n  margin-left: -2.5714285714px;\n  margin-top: -2.5714285714px;\n  border-radius: 50%;\n  background: #fff;\n  transition: transform 0.5s;\n  transform: translate3d(0, 0, 0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot {\n  transform: translate3d(-80.3571428571px, 0, 0);\n}\n.colorful-switch__on {\n  position: absolute;\n  left: 104.1428571429px;\n  top: 22.5px;\n  width: 19.2857142857px;\n  height: 36px;\n  transition: transform 0.5s;\n  transform: translate3d(0, 0, 0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on {\n  transform: translate3d(-80.3571428571px, 0, 0);\n}\n.colorful-switch__on__inner {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);\n  transform-origin: 100% 50%;\n  transform: rotate(45deg) scale(0) translateZ(0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner {\n  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);\n  transform: rotate(45deg) scale(1) translateZ(0);\n}\n.colorful-switch__on__inner:before, .colorful-switch__on__inner:after {\n  content: \"\";\n  position: absolute;\n  border-radius: 2.5714285714px;\n  background: #fff;\n}\n.colorful-switch__on__inner:before {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 6.1428571429px;\n}\n.colorful-switch__on__inner:after {\n  right: 0;\n  top: 0;\n  width: 6.1428571429px;\n  height: 100%;\n}\n.colorful-switch__off {\n  position: absolute;\n  left: 131.1428571429px;\n  top: 50%;\n  width: 41.1428571429px;\n  height: 41.1428571429px;\n  margin-left: -20.5714285714px;\n  margin-top: -20.5714285714px;\n  transition: transform 0.5s;\n  transform: translate3d(0, 0, 0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off {\n  transform: translate3d(-80.3571428571px, 0, 0);\n}\n.colorful-switch__off:before, .colorful-switch__off:after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n  height: 5.1428571429px;\n  margin-top: -2.5714285714px;\n  border-radius: 2.5714285714px;\n  background: #fff;\n  transition: transform 0.25s 0.25s;\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {\n  transition-delay: 0s;\n}\n.colorful-switch__off:before {\n  transform: rotate(45deg) scaleX(1) translateZ(0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before {\n  transform: rotate(45deg) scaleX(0) translateZ(0);\n}\n.colorful-switch__off:after {\n  transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);\n  transform: rotate(-45deg) scaleX(1) translateZ(0);\n}\n.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {\n  transition-timing-function: ease;\n  transform: rotate(-45deg) scaleX(0) translateZ(0);\n}\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-6ff453f elementor-widget elementor-widget-shortcode\" data-id=\"6ff453f\" 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>(function () {\r\n  var $$ = function (selector, context) {\r\n    var context = context || document;\r\n    var elements = context.querySelectorAll(selector);\r\n    return [].slice.call(elements);\r\n  };\r\n\r\n  function _fncSliderInit($slider, options) {\r\n    var prefix = \".fnc-\";\r\n\r\n    var $slider = $slider;\r\n    var $slidesCont = $slider.querySelector(prefix + \"slider__slides\");\r\n    var $slides = $$(prefix + \"slide\", $slider);\r\n    var $controls = $$(prefix + \"nav__control\", $slider);\r\n    var $controlsBgs = $$(prefix + \"nav__bg\", $slider);\r\n    var $progressAS = $$(prefix + \"nav__control-progress\", $slider);\r\n\r\n    var numOfSlides = $slides.length;\r\n    var curSlide = 1;\r\n    var sliding = false;\r\n    var slidingAT =\r\n      +parseFloat(getComputedStyle($slidesCont)[\"transition-duration\"]) * 1000;\r\n    var slidingDelay =\r\n      +parseFloat(getComputedStyle($slidesCont)[\"transition-delay\"]) * 1000;\r\n\r\n    var autoSlidingActive = false;\r\n    var autoSlidingTO;\r\n    var autoSlidingDelay = 5000; \/\/ default autosliding delay value\r\n    var autoSlidingBlocked = false;\r\n\r\n    var $activeSlide;\r\n    var $activeControlsBg;\r\n    var $prevControl;\r\n\r\n    function setIDs() {\r\n      $slides.forEach(function ($slide, index) {\r\n        $slide.classList.add(\"fnc-slide-\" + (index + 1));\r\n      });\r\n\r\n      $controls.forEach(function ($control, index) {\r\n        $control.setAttribute(\"data-slide\", index + 1);\r\n        $control.classList.add(\"fnc-nav__control-\" + (index + 1));\r\n      });\r\n\r\n      $controlsBgs.forEach(function ($bg, index) {\r\n        $bg.classList.add(\"fnc-nav__bg-\" + (index + 1));\r\n      });\r\n    }\r\n\r\n    setIDs();\r\n\r\n    function afterSlidingHandler() {\r\n      $slider\r\n        .querySelector(\".m--previous-slide\")\r\n        .classList.remove(\"m--active-slide\", \"m--previous-slide\");\r\n      $slider\r\n        .querySelector(\".m--previous-nav-bg\")\r\n        .classList.remove(\"m--active-nav-bg\", \"m--previous-nav-bg\");\r\n\r\n      $activeSlide.classList.remove(\"m--before-sliding\");\r\n      $activeControlsBg.classList.remove(\"m--nav-bg-before\");\r\n      $prevControl.classList.remove(\"m--prev-control\");\r\n      $prevControl.classList.add(\"m--reset-progress\");\r\n      var triggerLayout = $prevControl.offsetTop;\r\n      $prevControl.classList.remove(\"m--reset-progress\");\r\n\r\n      sliding = false;\r\n      var layoutTrigger = $slider.offsetTop;\r\n\r\n      if (autoSlidingActive && !autoSlidingBlocked) {\r\n        setAutoslidingTO();\r\n      }\r\n    }\r\n\r\n    function performSliding(slideID) {\r\n      if (sliding) return;\r\n      sliding = true;\r\n      window.clearTimeout(autoSlidingTO);\r\n      curSlide = slideID;\r\n\r\n      $prevControl = $slider.querySelector(\".m--active-control\");\r\n      $prevControl.classList.remove(\"m--active-control\");\r\n      $prevControl.classList.add(\"m--prev-control\");\r\n      $slider\r\n        .querySelector(prefix + \"nav__control-\" + slideID)\r\n        .classList.add(\"m--active-control\");\r\n\r\n      $activeSlide = $slider.querySelector(prefix + \"slide-\" + slideID);\r\n      $activeControlsBg = $slider.querySelector(prefix + \"nav__bg-\" + slideID);\r\n\r\n      $slider\r\n        .querySelector(\".m--active-slide\")\r\n        .classList.add(\"m--previous-slide\");\r\n      $slider\r\n        .querySelector(\".m--active-nav-bg\")\r\n        .classList.add(\"m--previous-nav-bg\");\r\n\r\n      $activeSlide.classList.add(\"m--before-sliding\");\r\n      $activeControlsBg.classList.add(\"m--nav-bg-before\");\r\n\r\n      var layoutTrigger = $activeSlide.offsetTop;\r\n\r\n      $activeSlide.classList.add(\"m--active-slide\");\r\n      $activeControlsBg.classList.add(\"m--active-nav-bg\");\r\n\r\n      setTimeout(afterSlidingHandler, slidingAT + slidingDelay);\r\n    }\r\n\r\n    function controlClickHandler() {\r\n      if (sliding) return;\r\n      if (this.classList.contains(\"m--active-control\")) return;\r\n      if (options.blockASafterClick) {\r\n        autoSlidingBlocked = true;\r\n        $slider.classList.add(\"m--autosliding-blocked\");\r\n      }\r\n\r\n      var slideID = +this.getAttribute(\"data-slide\");\r\n\r\n      performSliding(slideID);\r\n    }\r\n\r\n    $controls.forEach(function ($control) {\r\n      $control.addEventListener(\"click\", controlClickHandler);\r\n    });\r\n\r\n    function setAutoslidingTO() {\r\n      window.clearTimeout(autoSlidingTO);\r\n      var delay = +options.autoSlidingDelay || autoSlidingDelay;\r\n      curSlide++;\r\n      if (curSlide > numOfSlides) curSlide = 1;\r\n\r\n      autoSlidingTO = setTimeout(function () {\r\n        performSliding(curSlide);\r\n      }, delay);\r\n    }\r\n\r\n    if (options.autoSliding || +options.autoSlidingDelay > 0) {\r\n      if (options.autoSliding === false) return;\r\n\r\n      autoSlidingActive = true;\r\n      setAutoslidingTO();\r\n\r\n      $slider.classList.add(\"m--with-autosliding\");\r\n      var triggerLayout = $slider.offsetTop;\r\n\r\n      var delay = +options.autoSlidingDelay || autoSlidingDelay;\r\n      delay += slidingDelay + slidingAT;\r\n\r\n      $progressAS.forEach(function ($progress) {\r\n        $progress.style.transition = \"transform \" + delay \/ 1000 + \"s\";\r\n      });\r\n    }\r\n\r\n    $slider\r\n      .querySelector(\".fnc-nav__control:first-child\")\r\n      .classList.add(\"m--active-control\");\r\n  }\r\n\r\n  var fncSlider = function (sliderSelector, options) {\r\n    var $sliders = $$(sliderSelector);\r\n\r\n    $sliders.forEach(function ($slider) {\r\n      _fncSliderInit($slider, options);\r\n    });\r\n  };\r\n\r\n  window.fncSlider = fncSlider;\r\n})();\r\n\r\n\/* not part of the slider scripts *\/\r\n\r\n\/* Slider initialization\r\noptions:\r\nautoSliding - boolean\r\nautoSlidingDelay - delay in ms. If audoSliding is on and no value provided, default value is 5000\r\nblockASafterClick - boolean. If user clicked any sliding control, autosliding won't start again\r\n*\/\r\nfncSlider(\".example-slider\", { autoSlidingDelay: 4000 });\r\n\r\nvar $demoCont = document.querySelector(\".demo-cont\");\r\n\r\n[].slice\r\n  .call(document.querySelectorAll(\".fnc-slide__action-btn\"))\r\n  .forEach(function ($btn) {\r\n    $btn.addEventListener(\"click\", function () {\r\n      $demoCont.classList.toggle(\"credits-active\");\r\n    });\r\n  });\r\n\r\ndocument\r\n  .querySelector(\".demo-cont__credits-close\")\r\n  .addEventListener(\"click\", function () {\r\n    $demoCont.classList.remove(\"credits-active\");\r\n  });\r\n\r\ndocument\r\n  .querySelector(\".js-activate-global-blending\")\r\n  .addEventListener(\"click\", function () {\r\n    document\r\n      .querySelector(\".example-slider\")\r\n      .classList.toggle(\"m--global-blending-active\");\r\n  });\r\n<\/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>Black Widow Credits Credits Captain America Credits Credits Iron Man Credits Credits Thor Just Thor Credits Credits Black Widow Captain America Iron Man Thor Made by Nikolay Talanov My codepen My twitter Based on Concept by Kreativa Studio Global Blend Mode<\/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-8156","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Modelo de p\u00e1gina \u2013 8 - 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 8 - MigraPixel\" \/>\n<meta property=\"og:description\" content=\"Black Widow Credits Credits Captain America Credits Credits Iron Man Credits Credits Thor Just Thor Credits Credits Black Widow Captain America Iron Man Thor Made by Nikolay Talanov My codepen My twitter Based on Concept by Kreativa Studio Global Blend Mode\" \/>\n<meta property=\"og:url\" content=\"https:\/\/migrapixel.pt\/en\/modelo-de-pagina-8\/\" \/>\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:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/migrapixel.pt\/wp-content\/uploads\/2022\/11\/Ativo-1-scaled-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"555\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\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-8\\\/\",\"url\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-8\\\/\",\"name\":\"Modelo de p\u00e1gina \u2013 8 - MigraPixel\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/#website\"},\"datePublished\":\"2023-10-04T16:54:54+00:00\",\"dateModified\":\"2023-10-05T08:53:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-8\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-8\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/migrapixel.pt\\\/modelo-de-pagina-8\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/migrapixel.pt\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Modelo de p\u00e1gina \u2013 8\"}]},{\"@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 SEO plugin. -->","yoast_head_json":{"title":"Modelo de p\u00e1gina \u2013 8 - MigraPixel","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_GB","og_type":"article","og_title":"Modelo de p\u00e1gina \u2013 8 - MigraPixel","og_description":"Black Widow Credits Credits Captain America Credits Credits Iron Man Credits Credits Thor Just Thor Credits Credits Black Widow Captain America Iron Man Thor Made by Nikolay Talanov My codepen My twitter Based on Concept by Kreativa Studio Global Blend Mode","og_url":"https:\/\/migrapixel.pt\/en\/modelo-de-pagina-8\/","og_site_name":"MigraPixel","article_publisher":"https:\/\/www.facebook.com\/migrapixel","article_modified_time":"2023-10-05T08:53:02+00:00","og_image":[{"width":2560,"height":555,"url":"https:\/\/migrapixel.pt\/wp-content\/uploads\/2022\/11\/Ativo-1-scaled-1.webp","type":"image\/webp"}],"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-8\/","url":"https:\/\/migrapixel.pt\/modelo-de-pagina-8\/","name":"Modelo de p\u00e1gina \u2013 8 - MigraPixel","isPartOf":{"@id":"https:\/\/migrapixel.pt\/#website"},"datePublished":"2023-10-04T16:54:54+00:00","dateModified":"2023-10-05T08:53:02+00:00","breadcrumb":{"@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-8\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/migrapixel.pt\/modelo-de-pagina-8\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/migrapixel.pt\/modelo-de-pagina-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/migrapixel.pt\/"},{"@type":"ListItem","position":2,"name":"Modelo de p\u00e1gina \u2013 8"}]},{"@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\/8156","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=8156"}],"version-history":[{"count":35,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages\/8156\/revisions"}],"predecessor-version":[{"id":8297,"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/pages\/8156\/revisions\/8297"}],"wp:attachment":[{"href":"https:\/\/migrapixel.pt\/en\/wp-json\/wp\/v2\/media?parent=8156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}