afarkas128

<header class="main-header sps">
    <nav class="nav-primary navbar navbar-expand-xl">
      <div class="container">
        <a class="brand navbar-brand" href="#">
          <img class="img-fluid header-logo" src="assets/images/logo.svg" alt="StatPearls, content is king" width="242" height="32">
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu-collapse-main" aria-controls="menu-collapse-main" aria-expanded="false" aria-label="Toggle navigation">
          <svg width="24" height="24" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
            <rect width="18" height="1.5" fill="currentColor" ry="0.75" x="3" y="6.25"></rect>

afarkas128

<div class="feature-lighbulb">
    <img class="img-fluid img-light-bulb-icon" src="{!! $feature['icon']['url'] !!}" alt="{!! $feature['icon']['alt'] !!}" srcset="" width="{!! $feature['icon']['width'] !!}" height="{!! $feature['icon']['height'] !!}" loading="lazy">
    <img class="img-fluid img-feature" src="{!! $feature['image']['sizes']['lightbulb2x'] !!}" alt="{!! $feature['image']['alt'] !!}" srcset="" width="{!! $feature['image']['sizes']['lightbulb2x-width'] !!}" height="{!! $feature['image']['sizes']['lightbulb2x-height'] !!}" loading="lazy">
</div>
<!-- /feature-lighbulb -->

afarkas128

@if ($block->section_anchor)
    <a name="{!! $block->section_anchor !!}" id="{!! $block->section_anchor !!}">
    </a>
@endif
<section class="section section-tabbed-content @if ($block->section_padding == 'padding-small') section-padding-3 @endif"
    id="{{ $block->block_type }}_{{ $block->block_counter }}">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-10 col-lg-8 mx-md-auto text-center">
                @if ($block->eyebrow)

afarkas128

<picture>
    <source media="(max-width: 699px)" srcset="{!! $testimonial['image']['sizes']['testimonial_two_cols'] !!}" />
    <source media="(min-width: 700px)" srcset="{!! $testimonial['image']['sizes']['testimonial_two_cols2x'] !!}" />
    <img class="img-fluid testimonial-image" src="{!! $testimonial['image']['sizes']['testimonial_two_cols'] !!}" 
        srcset="{!! $testimonial['image']['sizes']['testimonial_two_cols'] !!} 1x,
		        {!! $testimonial['image']['sizes']['testimonial_two_cols2x'] !!} 2x"
                alt="{!! $testimonial['image']['alt'] !!}" />
</picture>
<!-- picture with multiple sources -->

afarkas128

<?php

//get the taxonomy terms of custom post type
$customTaxonomyTerms = wp_get_object_terms($post->ID, 'your_taxonomy', array('fields' => 'ids'));

//query arguments
$args = array(
    'post_type' => 'your_custom_post_type',
    'post_status' => 'publish',
    'posts_per_page' => 5,

afarkas128

<!-- The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode. -->
<div class="container">
  <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
  <div class="element" id="element">
    <p>I change color in fullscreen mode!</p>
  </div>
  <br />
  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
    Go Full Screen!
  </button>

afarkas128

<!-- Explanation
This effect is styling only the <label> element to look like a toggle switch, and hiding the actual <input> checkbox by positioning it offscreen. When clicking the label associated with the <input> element, it sets the <input> checkbox into the :checked state.

The for attribute associates the <label> with the appropriate <input> checkbox element by its id.
.switch::after defines a pseudo-element for the <label> to create the circular knob.
input[type='checkbox']:checked + .switch::after targets the <label>'s pseudo-element's style when the checkbox is checked.
transform: translateX(20px) moves the pseudo-element (knob) 20px to the right when the checkbox is checked.
background-color: #7983ff; sets the background-color of the switch to a different color when the checkbox is checked.
.offscreen moves the <input> checkbox element, which does not comprise any part of the actual toggle switch, out of the flow of document and positions it far away from the view, but does not hide it so it is acces

afarkas128

.radio-pills {
	// radio options wrapper make the options align next to
	// eachother using flexbox
	.gfield_radio {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
	}

afarkas128

<?php

namespace App\Controllers;

use Sober\Controller\Controller;
use WP_Query;

class App extends Controller
{
	/**

afarkas128

@if ($block->section_anchor)
    <a name="{!! $block->section_anchor !!}" id="{!! $block->section_anchor !!}"></a>
@endif
<section class="section section-{{ $block->block_type }} section-{{ $block->block_type }}-{{ $block->block_counter }}" id="{{ $block->block_type }}_{{ $block->block_counter }}">
    <div class="container">
        @if ($block->section_title)
            <div class="row">
                <div class="col-12 col-lg-10 mx-lg-auto">
                    <h2 class="section-title mb-0">{!! $block->section_title !!}</h2>
                </div>