NO LIMIT

DIGITAL SERVICES

WEB DESIGN SHOWCASE

This template works with flexbox because the library conflicts with GRID.

The separation is in PX because the library works with PX, to change the GAP you must do it from Mansory code (line 48: gutter: 15). If you change the GAPs remember to modify the width of the Card block.

Remember to enable code execution

Web Design

Oli Draper|10/09/2025

Leading-Edge Web Design in 2025: What’s New, What Works, and Why It Matters

<?php

global $post;

// Obtén el ID del post actual
$post_id = $post->ID;
// Obtén el contenido del post
$post_content = get_post_field( 'post_content', $post_id );

// Calcula el tiempo de lectura estimado en minutos y segundos
$word_count = str_word_count( strip_tags( $post_content ) );
$reading_time_minutes = floor( $word_count / 200 );
$reading_time_seconds = ceil(($word_count / 200 - $reading_time_minutes) * 60);

// Muestra el tiempo de lectura estimado en minutos y segundos
echo '<p class="read_time">Reading Time: ' . $reading_time_minutes . ':' . $reading_time_seconds . ' min</p>';

?>

Web design has always been about more than making things “look nice.” It’s about creating digital experiences that connect people…

View post
Oli Draper|10/09/2025

Become the AI Guru in Your Company: Why AI Training Matters Now

<?php

global $post;

// Obtén el ID del post actual
$post_id = $post->ID;
// Obtén el contenido del post
$post_content = get_post_field( 'post_content', $post_id );

// Calcula el tiempo de lectura estimado en minutos y segundos
$word_count = str_word_count( strip_tags( $post_content ) );
$reading_time_minutes = floor( $word_count / 200 );
$reading_time_seconds = ceil(($word_count / 200 - $reading_time_minutes) * 60);

// Muestra el tiempo de lectura estimado en minutos y segundos
echo '<p class="read_time">Reading Time: ' . $reading_time_minutes . ':' . $reading_time_seconds . ' min</p>';

?>

There’s no escaping it: AI is here, and it’s changing everything. From content creation and customer service to web design…

View post
Oli Draper|10/09/2025

The Future of Web Design and Content: Why AI + Creativity Is a Game Changer

<?php

global $post;

// Obtén el ID del post actual
$post_id = $post->ID;
// Obtén el contenido del post
$post_content = get_post_field( 'post_content', $post_id );

// Calcula el tiempo de lectura estimado en minutos y segundos
$word_count = str_word_count( strip_tags( $post_content ) );
$reading_time_minutes = floor( $word_count / 200 );
$reading_time_seconds = ceil(($word_count / 200 - $reading_time_minutes) * 60);

// Muestra el tiempo de lectura estimado en minutos y segundos
echo '<p class="read_time">Reading Time: ' . $reading_time_minutes . ':' . $reading_time_seconds . ' min</p>';

?>

There’s a quiet revolution happening in the digital world—and it’s powered by AI. From web design to content creation, artificial…

View post
Oli Draper|10/09/2025

Modern Web Design: Why Trends Matter (and Why You Need the Right Designer)

<?php

global $post;

// Obtén el ID del post actual
$post_id = $post->ID;
// Obtén el contenido del post
$post_content = get_post_field( 'post_content', $post_id );

// Calcula el tiempo de lectura estimado en minutos y segundos
$word_count = str_word_count( strip_tags( $post_content ) );
$reading_time_minutes = floor( $word_count / 200 );
$reading_time_seconds = ceil(($word_count / 200 - $reading_time_minutes) * 60);

// Muestra el tiempo de lectura estimado en minutos y segundos
echo '<p class="read_time">Reading Time: ' . $reading_time_minutes . ':' . $reading_time_seconds . ' min</p>';

?>

Websites aren’t static things anymore. They’re not dusty online brochures or digital business cards you set up once and forget.…

View post
Oli Draper|10/09/2025

Why a Bespoke Website Beats Old-Style Templates Every Time

<?php

global $post;

// Obtén el ID del post actual
$post_id = $post->ID;
// Obtén el contenido del post
$post_content = get_post_field( 'post_content', $post_id );

// Calcula el tiempo de lectura estimado en minutos y segundos
$word_count = str_word_count( strip_tags( $post_content ) );
$reading_time_minutes = floor( $word_count / 200 );
$reading_time_seconds = ceil(($word_count / 200 - $reading_time_minutes) * 60);

// Muestra el tiempo de lectura estimado en minutos y segundos
echo '<p class="read_time">Reading Time: ' . $reading_time_minutes . ':' . $reading_time_seconds . ' min</p>';

?>

If you’ve ever scrolled through a website and thought, “This feels… generic”, you’ve probably landed on one built with an…

View post
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>



<script>
  
// Selecciona el elemento HTML que quieres observar
const targetElement = document.querySelector('.fb-masonry');

// Opciones de la observación
const observerOptions = {
  childList: true, // Observar cambios en los hijos del elemento
  subtree: true    // Observar todos los niveles de hijos
};

// Función de devolución de llamada para cuando se detecten cambios
const callback = function(mutationsList, observer) {
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            // Vuelve a ejecutar el script de Masonry cuando se añadan o eliminen elementos
            executeMasonryScript();
        }
    }
};

// Crear una instancia del MutationObserver con la función de devolución de llamada
const observer = new MutationObserver(callback);

// Comienza a observar el elemento target con las opciones dadas
observer.observe(targetElement, observerOptions);

// Función para ejecutar el script de Masonry
function executeMasonryScript() {
    const grid = document.querySelector('.fb-masonry');
    const masonry = new Masonry(grid, {
        itemSelector: '.fb-pcard-one',
        columnWidth: '.fb-pcard-one',
        gutter: 15, // Espacio entre elementos
    });
}

// Ejecutar el script de Masonry al inicio
executeMasonryScript();

  
</script>

<script>
  /*Source: https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar*/
  
  // Verificar el ancho de pantalla al cargar y redimensionar
  function checkScreenWidth() {
    if (window.innerWidth <= 767) {
      // Si la pantalla es menor o igual a 676px, no ejecutar el código
      return;
    }

    const stickyElement = document.querySelector('.fb-sidebar__aside');
    const startPosition = stickyElement.getBoundingClientRect().top;

    let endScroll = window.innerHeight - stickyElement.offsetHeight - 500;
    let currPos = window.scrollY;
    let screenHeight = window.innerHeight;
    let stickyElementHeight = stickyElement.offsetHeight;
    let topGap = 40;
    let bottomGap = 40;

    setTimeout(() => {
      if (stickyElement.hasAttribute('data-top-gap')) {
        const dataTopGap = stickyElement.getAttribute('data-top-gap');
        topGap = dataTopGap === 'auto' ? startPosition : parseInt(dataTopGap);
      }

      if (stickyElement.hasAttribute('data-bottom-gap')) {
        bottomGap = parseInt(stickyElement.getAttribute('data-bottom-gap'));
      }
    }, 100);

    stickyElement.style.position = 'sticky';
    stickyElement.style.top = `${topGap}px`;
    stickyElement.style.height = 'fit-content';

    function positionStickySidebar() {
      endScroll = window.innerHeight - stickyElement.offsetHeight - bottomGap;
      const stickyElementTop = parseInt(stickyElement.style.top.replace('px', ''));

      if (stickyElementHeight + topGap + bottomGap > screenHeight) {
        if (window.scrollY < currPos) {
          if (stickyElementTop < topGap) {
            stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`;
          } else if (stickyElementTop >= topGap && stickyElementTop !== topGap) {
            stickyElement.style.top = `${topGap}px`;
          }
        } else {
          if (stickyElementTop > endScroll) {
            stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`;
          } else if (stickyElementTop < endScroll && stickyElementTop !== endScroll) {
            stickyElement.style.top = `${endScroll}px`;
          }
        }
      } else {
        stickyElement.style.top = `${topGap}px`;
      }
      currPos = window.scrollY;
    }

    function stickyElementToMe() {
      stickyElement.style.top = `${topGap}px`;
    }

    function updateSticky() {
      screenHeight = window.innerHeight;
      stickyElementHeight = stickyElement.offsetHeight;
      positionStickySidebar();
    }

    setTimeout(() => {
      window.addEventListener('resize', () => {
        currPos = window.scrollY;
        updateSticky();
      });

      document.addEventListener('scroll', updateSticky, {
        capture: true,
        passive: true
      });
    }, 1000);
  }

  // Verificar el ancho de pantalla al cargar y redimensionar
  window.addEventListener('load', checkScreenWidth);
  window.addEventListener('resize', checkScreenWidth);
</script>