Подтвердить что ты не робот

Обновления

Facebook представил новый плагин для замены плагина Like.

Документация: https://developers.facebook.com/docs/plugins/page-plugin/

Я заменю плагин Like Box с этим новым плагином. На некоторых сайтах я использовал этот CSS-код, чтобы сделать плагин чувствительным внутри элемента:

 .fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;}

Замена этого с помощью этого кода doet не работает:

 .fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;}

Код плагина моей страницы выглядит так (не предоставляя атрибут ширины данных):

<div class="fb-page" data-href="#" onclick="location.href='https://www.facebook.com/MyFacebookPage'; return false;" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>

Похоже, что Facebook добавил элемент div со встроенным элементом стиля внутри DOM, загруженным iframe:

<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>

Когда я настраиваю эту ширину до 100%, каждый элемент выравнивается по всей ширине, кроме обложки.

Можно ли включить этот новый плагин для страницы как реагирующее поведение так же, как с плагином "Ящик"?

4b9b3361

ОТВЕТЫ

Ответ 1

Facebook новая " Страница Plugin ширина" колеблется от 180px до 500px согласно документации.

  • Если настроено ниже 180px, минимальная ширина будет 180px
  • Если настроено выше 500px, максимальная ширина будет 500px

С проверенной адаптивной шириной, например:

enter image description here

В отличие от like-box, этот плагин применяет свои ограничения, придерживаясь граничных значений в случае неправильной настройки.

Для маленьких экранов/Отзывчивое поведение

  • При рендеринге на экранах меньшего размера установите нужную width в контейнере плагина, и плагин попытается вписаться.

  • Плагин визуализируется с меньшей шириной (для размещения на экранах меньшего размера) автоматически, если контейнер меньше заданной width.

  • Вы можете уменьшить контейнер на мобильном устройстве, и плагин будет 180px до тех пор, пока в него помещается минимум 180px.

Без адаптивной ширины

enter image description here

  • Плагин будет отображаться на указанной ширине, независимо от ширины контейнера

Ответ 2

Это не работает слишком хорошо, если у вас есть плагин, размещенный в тонком столбце, например, на боковой панели. На экранах среднего размера они обычно имеют ширину менее 280 пикселей в ширину.

.fb-page, 
.fb-page span, 
.fb-page span iframe[style] { 
    width: 100% !important; 
}

Это код, который я использую, чтобы остановить плагин, нарушающий внешний контейнер. В отличие от старой подобной коробки, которая была бы черепицей, она просто переполняется, скрывая переполненный контент.

Ответ 3

это работает для меня (ширина заставляет javascript и плагин FB загружаться через javascript)

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=443271375714375";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

jQuery(document).ready(function($) {
  $(window).bind("load resize", function(){  
  setTimeout(function() {
  var container_width = $('#container').width();    
    $('#container').html('<div class="fb-page" ' + 
    'data-href="http://www.facebook.com/IniciativaAutoMat"' +
    ' data-width="' + container_width + '" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>');
    FB.XFBML.parse( );    
  }, 100);  
}); 
});

</script>
<div id="container" style="width:100%;">  
<div class="fb-page" data-href="http://www.facebook.com/IniciativaAutoMat" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>
</div>

Ответ 4

Чтобы создать новый плагин для страницы Facebook в зависимости от начальной загрузки страницы, вам нужно удалить атрибут data-width и вместо этого добавить

data-adapt-container-width="true"

Это сделает плагин Facebook-страницы отзывчивым, но только на начальной странице рендеринга с минимальной шириной 180 пикселей.

Я все еще пытаюсь понять, как сделать его действительно динамически отзывчивым, несмотря на то, что в Facebook не существует (я опубликую обновление, если найду ответ).

Нет динамического изменения размера

Плагин Страница работает с гибкими, текучими и статическими макетами. Вы могут использовать медиа-запросы или другие методы для установки width родительского элемент:

Плагин определит его width при загрузке страницы. Он не будет реагировать изменения в коробке после загрузки страницы. Если вы хотите настроить плагин width при изменении размера окна, вам необходимо вручную перезагрузить плагин.

Источник: https://developers.facebook.com/docs/plugins/page-plugin

Вы можете сделать это динамически реагирующим путем повторной инициализации виджета при изменении размера браузера, как предположил Io Ctaptceb, но тем самым вы рискуете быстро съесть память.

Югал Юнгл получил хороший ответ, но я хотел уточнить, что мне еще предстоит найти способ сделать плагин действительно динамически отзывчивым.

Ответ 5

Я помещаю это здесь для тех, у кого была такая же проблема, как у меня, и не могла найти их ответ здесь между комментариями или на любой другой странице stackoverflow.

Я добавил Facebook Page Plugin с настройками, которые будут настраивать его на ширину контейнера.

data-adapt-container-width="true"

Однако одному или нескольким элементам в элементе iframe или Javascript SDK была задана ширина 340 пикселей, что делает плагин страницы не адаптированным к ширине контейнера. Хотя он должен иметь минимум 180 пикселей и максимум 500 пикселей.

В коде, предоставленном Facebook, чего-то не хватает.

<div class="fb-page" data-href="https://www.facebook.com/Paras-Design-393209377418188" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>

Добавив вручную data-width="500", плагин страницы ответил как ожидалось и адаптировался к ширине контейнера до максимальной ширины 500 пикселей.

Я надеюсь, что это поможет любому, кто сталкивается с одной и той же проблемой.

Ответ 6

для тех из вас, кто ищет решение JS размером менее 280

вот мой фрагмент кода:

facebookScale = function () {
    var adjustWidth;
    adjustWidth = $('.facebook-likebox').width() / 280;
    return $('.fb-page').css({
      '-webkit-transform': 'scale(' + adjustWidth + ')',
      '-moz-transform': 'scale(' + adjustWidth + ')',
      'transform': 'scale(' + adjustWidth + ')'
    });
  }

$(function(){
    $('.fb-page').on('resize DOMSubtreeModified', facebookScale);
    $(window).on('resize', facebookScale);
  })

изменить. убедитесь, что в css указано следующее:

.fb-page{
  transform-origin: 0 0;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
}

Ответ 7

Как из графика API 2.3 Facebook предоставляет код, похожий на следующий для плагина комментариев:

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5">
</div>

Добавьте data-width="100%", чтобы сделать его получувствительным следующим образом:

<div class="fb-comments"
    data-href="http://absolute.url"
    data-numposts="5"
    data-width="100%">
</div>

Полу-отзывчивый, потому что плагин не изменяет размеры на странице. Размер зависит от размера экрана при загрузке плагина.

Ответ 8

Мы преодолели некоторые ограничения отзывчивости плагина Facebook, используя его как IFRAME, но загружаем в время рендеринга с помощью некоторого JavaScript, который динамически определяет размер кадра (и параметры ширины/высоты в URL-адресе SRC) для заполнения контейнера элемент.

Если контейнер больше 500 пикселей, чтобы избежать наличия очевидного желоба с правой стороны, мы просто добавляем масштабное преобразование с некоторой простой математикой.

Событие onload on IFRAME срабатывает, когда SRC изначально пуст (когда мы его загружаем), а затем снова после завершения загрузки, когда мы устанавливаем SRC, но мы просто кратковременны, если атрибут SRC уже существует.

В нашем использовании мы не меняем ширину фида Facebook для использования на рабочем столе, а для видовых экранов карманных/планшетов эти ширины фиксированы по своей природе (да, мы задерживаем изменение ориентации), но если вы хотите, чтобы ваши постоянно измените размер окна браузера, вы можете просто перезапустить код как упражнение для себя.

Это протестировано в Chrome и Safari, на рабочем столе и на iOS/Android:

<script>
    function setupFBframe(frame) {

        if(frame.src) return; // already set up

        // get parent container dimensions to use in src attrib
        var container = frame.parentNode;

        var containerWidth = container.offsetWidth;
        var containerHeight = container.offsetHeight;

        var src = 'https://www.facebook.com/plugins/page.php' +
                '?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F' +
                '&tabs=timeline' +
                '&width=' + containerWidth +
                '&height=' + containerHeight +
                '&small_header=true' +
                '&adapt_container_width=false' + /* doesn't seem to matter */
                '&hide_cover=true' +
                '&hide_cta=true' +
                '&show_facepile=false' +
                '&appId';

        frame.width = containerWidth;
        frame.height = containerHeight;
        frame.src = src;

        // scale up if container > 500px wide
        if(containerWidth) > 500) {
            var scale = (containerWidth / 500 );
            frame.style.transform = 'scale(' + scale + ')';
        }
    }
</script>
<style>
    #facebook_iframe {
        transform-origin: 0 0;
        -webkit-transform-origin: 0px 0px;
        -moz-transform-origin: 0px 0px;
    }
</style>
<iframe frameborder="0" height="0" width="0" onload="var _this = this; window.setTimeout(function(){ setupFBframe(_this); },500 /* let dom settle before eval parent dimensions */ );"></iframe>

РЕДАКТИРОВАТЬ: Забыл о происхождении трансформации, удалил необходимость корректировки левого/верхнего для размещения шкалы. Спасибо Io Ctaptceb

Ответ 9

Я использую решение, предложенное Робертом Смитом с максимальной шириной вместо ширины:

.fb-page,
.fb-page span,
.fb-page span iframe[style] {
    max-width: 100% !important;
}

Кроме того, я использую предложение Югаль-Йиндла, и поэтому я

data-width="555"

и

data-adapt-container-width="true"

Теперь моя страница в порядке! Большое спасибо!

Ответ 10

Я уточнил, что Twentyfortysix немного ответил, чтобы только инициировать событие после изменения размера.

Кроме того, я добавил проверку ширины окна, поэтому он не будет запускать повторную инициализацию на Android.

(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_EN/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    jQuery(document).ready(function($) {
        var oldwidth = $(window).width();
        var timeout;

        var recalc = function() {
          clearTimeout(timeout);
          timeout = setTimeout(function() {
          var container_width = $('#fbcontainer').width();    
            $('#fbcontainer').html('<div class="fb-page" ' + 
            'data-href="YOUR FACEBOOK PAGE URL"' +
            ' data-width="' + container_width + '" data-height="750" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="YOUR FACEBOOK PAGE URL"><a href="YOUR FACEBOOK PAGE URL">YOUR FACEBOOK PAGE TITLE</a></blockquote></div></div>');
            if(typeof FB !== 'undefined') {
                FB.XFBML.parse( );  
            }  
          }, 100);  
        };

        recalc();

      $(window).bind("resize", function(){  
        if(oldwidth !== $(window).width()) {
            recalc();
            oldwidth = $(window).width();
        }
        }); 
    });

Ответ 11

Кажется, что плагин Facebook Page Plugin не меняется вообще за последние 5-7 лет:) Он не реагировал с самого начала и все еще не сейчас, даже новый параметр Adapt to plugin container width не работает, или я не знаю, t понять, как это работает.

Я ищу самый простой способ сделать PLUGIN SIZE 100% WIDTH, и кажется, что это невозможно. Глупость в этом лучшая. Как дизайнеры решают эту проблему?

Я нашел лучшее решение за это время 2017 Oct:

.fb-page, .fb-page iframe[style], .fb-page span {
    width: 100% !important;
}
.fb-comments, .fb-comments iframe[style], .fb-comments span {
   width: 100% !important;
}

Это позволяет не нарушать ширину экрана для чувствительных экранов, но все равно выглядит уродливым, потому что сокращается за какое-то время и не растягивается... Facebook вообще не заботится о дизайне плагинов. Это правда.

Ответ 12

Здесь динамическое изменение размера iframe include way с некоторым отложенным повторным отображением события resize:

function _facebook() {

    var parent = document.getElementById('facebook');
    var width = (window.innerWidth > 540) ? 500 : window.innerWidth - 40;
    if (parent.firstChild && parent.firstChild.width == width) { return; }
    var url = 'https://www.facebook.com/plugins/page.php?href=YOUR_FACEBOOK_PAGE_URL&tabs=messages&width='+width+'&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=YOUR_APP_ID';
    var i = document.createElement('iframe');
    i.src = url;
    i.width = width;
    i.height = 500;
    i.style = 'border:none;overflow:hidden';
    i.scrolling = "no";
    i.frameborder = "0";
    i.allowTransparency = "true";
    while (parent.firstChild) { parent.removeChild(parent.firstChild); }
    parent.appendChild(i);

}

_facebook();

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        _facebook();
    }, 250);
});

Ответ 13

Как и другие, я обнаружил, что плагин может быть сделан (через JS), чтобы уменьшаться при уменьшении контейнера, но впоследствии не будет расти при расширении.

Проблема заключается в том, что исходный FB.XFBML.parse() создает набор дочерних узлов с фиксированными стилями в дереве документа, и последующие вызовы не будут правильно очищать старые узлы. Если вы делаете это сами в своем коде, все хорошо.

Facebook HTML (я просто добавил элементы идентификатора к тому, что предоставил Facebook, чтобы избежать случайных селекторов):

<div id="divFacebookFeed" class="fb-page" data-href="..." ...>
    <blockquote id="bqNoFeed" cite="(your URL)" class="fb-xfbml-parse-ignore">
        <a href="(your URL)">Your Site</a>
    </blockquote>
</div>

Код JQuery для изменения размера виджета до 500 пикселей и сохранения внутреннего резервного элемента:

var bq = $('#bqNoFeed').detach();
var fbdiv = $('#divFacebookFeed');

fbdiv.attr('data-width', 500);
fbdiv.empty();
fbdiv.append(bq);
FB.XFBML.parse();

Ответ 14

Принятый ответ работает для меня только при первой загрузке страницы, но после изменения размера браузера или перехода с альбомной ориентации на мобильные устройства плагин Facebook (версия 3.2) не адаптируется к моему контейнеру. Решением для меня было просто проверить адаптацию к ширине контейнера плагина и добавить слушателя, чтобы узнать, когда размер страницы изменяется, а затем я удаляю фрейм-фрейм facebook и загружаю его снова.

window.addEventListener('resize', this.resize);
resize = () => {
    document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
    document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
    FB.XFBML.parse();
};

Кстати, я добавил тайм-аут, чтобы избежать многократного обновления, пока пользователь изменяет размер страницы, но это необязательно

var FB_UPDATE_TIMEOUT = null;

window.addEventListener('resize', this.resize);
resize = () => {
    if(FB_UPDATE_TIMEOUT === null) {
        FB_UPDATE_TIMEOUT = window.setTimeout(function() {
            FB_UPDATE_TIMEOUT = null;
            document.querySelector('.fb-page').classList.remove('fb_iframe_widget');
            document.querySelector('.fb-page').classList.remove('fb_iframe_widget_fluid');
            FB.XFBML.parse();
        }, 100);
    }
};

демонстрация

Ответ 15

Не забывайте поле data-href! Для меня комментарии работали без него, но не реагировали. И, конечно, data-width = '100%'

Ответ 16

Приветствую всех!

Моя версия с живой демонстрацией (родной JavaScript):

1). Код Javascript в отдельном файле (лучшее решение):

Codepen

/* Vanilla JS */
function setupFBframe(frame) {
  var container = frame.parentNode;

  var containerWidth = container.offsetWidth;
  var containerHeight = container.offsetHeight;

  var src =
    "https://www.facebook.com/plugins/page.php" +
    "?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook" +
    "&tabs=timeline" +
    "&width=" +
    containerWidth +
    "&height=" +
    containerHeight +
    "&small_header=false" +
    "&adapt_container_width=false" +
    "&hide_cover=true" +
    "&hide_cta=true" +
    "&show_facepile=true" +
    "&appId";

  frame.width = containerWidth;
  frame.height = containerHeight;
  frame.src = src;
}

/* begin Document Ready                       				   		
############################################ */

document.addEventListener('DOMContentLoaded', function() {
  var facebookIframe = document.querySelector('#facebook_iframe');
  setupFBframe(facebookIframe);
 
  /* begin Window Resize                       				   		
  ############################################ */
  
  // Why resizeThrottler? See more : https://developer.mozilla.org/ru/docs/Web/Events/resize
  (function() {
    window.addEventListener("resize", resizeThrottler, false);

    var resizeTimeout;

    function resizeThrottler() {
      if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
          resizeTimeout = null;
          actualResizeHandler();
        }, 66);
      }
    }

    function actualResizeHandler() {
      document.querySelector('#facebook_iframe').removeAttribute('src');
      setupFBframe(facebookIframe);
    }
  })();
  /* end Window Resize
  ############################################ */
});
/* end Document Ready                       				   		
############################################ */
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
  font-family: 'Indie Flower', cursive;
}
.container {
  max-width: 1170px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.content {
  overflow: hidden;
}

.left_sidebar {
  position: relative;
  float: left;
  width: 30%;
  max-width: 300px;
}

.main_content {
  position: relative;
  float: left;
  width: 70%;
  background-color: #DDEFF7;
}
/* ------- begin Widget Facebook -------------- */
.widget--facebook--container {
  padding: 10px;
  border: 1px solid #000;
}

.widget-facebook {
  height: 500px;
}

.widget-facebook .facebook_iframe {
  border: none;
}

/* ---------- end Widget Facebook---------------- */

/* ----------------- no need -------------------- */
.block {
  color: #fff;
  height: 300px;
  background-color: #00A7F7;
  border: 1px solid #005dff;
}

.block h3 {
  line-height: 300px;
  text-align: center;
}
<!-- Min. responsive 180px -->
<div class="container">
  <div class="content">
    <div class="left_sidebar">
      <aside class="block">
        <h3>Content</h3>
      </aside>
      <!-- begin Widget Facebook
    ========================================= -->
      <aside class="widget--facebook--container">
        <div class="widget-facebook">
          <iframe id="facebook_iframe" class="facebook_iframe"></iframe>
        </div>
      </aside>
      <!-- end Widget Facebook
      ========================================= -->
      <aside class="block">
        <h3>Content</h3>
      </aside>
    </div>
    <div class="main_content">
      <h1>Responsive width Facebook Page Plugin</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
    </div>
  </div>
</div>