style-plugin
----------------------------





<?php

namespace Drupal\delhi_traffic_police_view_plug\Plugin\views\style;

use Drupal\core\Form\FormStateInterface;
use Drupal\views\Plugin\views\style\StylePluginBase;

/**
 * My Custom View Format
 *
 * @ingroup views_style_plugins
 *
 * @ViewsStyle(
 *   id = "front_page_ticker",
 *   title = @Translation("Front Page Ticker"),
 *   help = @Translation("Delhi Traffic Police  Front Page Ticker"),
 *   theme = "frontpageticker",
 *   display_types = { "normal" }
 * )
 */
class front_page_ticker extends StylePluginBase {
	/**
	 * Allow Row plugins.
	 * @var bool
	 */
	protected $usesRowPlugin = TRUE;

	/**
	 * Allow grouping of rows.
	 */
	protected $usesGrouping = TRUE;

	/**
	 * {@inheritdoc}
	 */

	public function buildOptionsForm(&$form, FormStateInterface $form_state) {

		parent::buildOptionsForm($form, $form_state);

		$form['scroller_type'] = array(
			'#type' => 'select',
			'#title' => t('Scroller type'),
			'#description' => t(''),
			'#default_value' => $this->options['scroller_type'],
			'#options' => array(
				'horizontal' => t('Horizontal'), #liScroll
				'vertical' => t('Vertical'), #vTicker
				'fade' => t('Fade'),
				'bbc' => t('BBC'),
			),
		);

//####### horizontal Options (liScroll) ########
		// horizontal

		$form['liScroll_Options'] = array(
			'#type' => 'fieldset',
			'#title' => t('Horizontal scroller Options'),
			'#collapsible' => TRUE,
			'#collapsed' => TRUE,
		);

		$form['liScroll_Options']['liScroll_speed'] = array(
			'#type' => 'select',
			'#title' => t('Horizontal scroller speed'),
			'#description' => t(''),
			'#default_value' => $this->options['liScroll_Options']['liScroll_speed'],
			'#options' => array(
				'0.02' => t('Very slow'),
				'0.04' => t('Slow'),
				'0.07' => t('Normal'),
				'0.10' => t('Fast'),
				'0.15' => t('Very fast'),
			),
		);

		$form['liScroll_Options']['liScroll_direction'] = array(
			'#type' => 'select',
			'#title' => t('Horizontal scroller direction'),
			'#description' => t(''),
			'#default_value' => $this->options['liScroll_Options']['liScroll_direction'],
			'#options' => array(
				'left' => t('Left'),
				'right' => t('Right'),
			),
		);

		$form['liScroll_Options']['liScroll_mouseover'] = array(
			'#type' => 'checkbox',
			'#title' => t('Horizontal scroller mouseover'),
			'#description' => t(''),
			'#default_value' => $this->options['liScroll_Options']['liScroll_mouseover'],
		);

//####### vertical Options (vTicker) ########
		// vertical

		$form['vTicker_Options'] = array(
			'#type' => 'fieldset',
			'#title' => t('Vertical scroller Options'),
			'#collapsible' => TRUE,
			'#collapsed' => TRUE,
		);

		$form['vTicker_Options']['vTicker_items'] = array(
			'#type' => 'textfield',
			'#title' => t('Number of items'),
			'#description' => t('Number of items to display at a time'),
			'#default_value' => $this->options['vTicker_Options']['vTicker_items'],
			'#element_validate' => [[get_class($this), 'vTickervalidate']],
		);

		$form['vTicker_Options']['vTicker_mouseover'] = array(
			'#type' => 'checkbox',
			'#title' => t('Pause on mouseover'),
			'#description' => t(''),
			'#default_value' => $this->options['vTicker_Options']['vTicker_mouseover'],
		);

		$form['vTicker_Options']['vTicker_pause'] = array(
			'#type' => 'select',
			'#title' => t('Scroller pause'),
			'#description' => t(''),
			'#default_value' => $this->options['vTicker_Options']['vTicker_pause'],
			'#options' => array(
				500 => t('500 millisecond'),
				1000 => t('One second'),
				2000 => t('Two seconds'),
				3000 => t('Three seconds'),
				4000 => t('Four seconds'),
				5000 => t('Five seconds'),
			),
		);

		$form['vTicker_Options']['vTicker_speed'] = array(
			'#type' => 'select',
			'#title' => t('Scroller speed'),
			'#description' => t(''),
			'#default_value' => $this->options['vTicker_Options']['vTicker_speed'],
			'#options' => array(
				1000 => t('Very slow'),
				700 => t('Slow'),
				500 => t('Normal'),
				300 => t('Fast'),
				150 => t('Very fast'),
			),
		);

		$form['vTicker_Options']['vTicker_direction'] = array(
			'#type' => 'select',
			'#title' => t('Scroller direction'),
			'#description' => t(''),
			'#default_value' => $this->options['vTicker_Options']['vTicker_direction'],
			'#options' => array(
				'up' => t('Up'),
				'down' => t('Down'),
			),
		);

	}

	/**
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 *
	 * Defines default values.
	 */
	protected function defineOptions() {
		$options = parent::defineOptions();

		$options['scroller_type'] = array('default' => 'horizontal');

		$options['liScroll_Options']['default'] = array(
			'liScroll_speed' => '0.07',
			'liScroll_direction' => 'left',
			'liScroll_mouseover' => 0,
			'liScroll_delay' => 0,
			'liScroll_bounce' => 0,
		);

		$options['vTicker_Options']['default'] = array(
			'vTicker_mouseover' => 0,
			'vTicker_speed' => 500,
			'vTicker_pause' => 1000,
			'vTicker_items' => 5,
			'vTicker_direction' => 'up',
		);

		return $options;

	}

	public function validate() {
		$errors = parent::validate();

	}

	public static function vTickervalidate($element, &$form_state) {
		if (!is_numeric($element['#value']) || $element['#value'] <= 0) {
			form_error($element, t('Enter a positive number'));
		}
	}

}


_____________________________________________________________

template

---------------------


<section class="event-alert-section news-section">
   <div class="container">
      <div class="row g-4">
         <!-- Card 1 -->
         <div class="col-md-6">
            <div class="card bg-news">
               <div class="card-header">
                  <img src="/sites/default/files/images/font-ticker/alerts.svg" alt="Alerts">
                  <span>TRAFFIC ALERTS</span>
               </div>
               <div class="card-body">
                  <div class="news-ticker">
                     <ul>
                        {% for row in rows %}
                        {% set row_obj = view.result[loop.index0] %}
                        {% set node = row_obj._entity %}
                        {% set nodebundle = node.bundle() %}
                        {% if nodebundle == 'traffic_alerts' %}
                        {# Title #}
                        {% set trafficAlertTitle = node.title.value %}
                        {# View fields #}
                        {% set trafficAlertsBody = view.style_plugin.getField(loop.index0, 'field_traffic_alert_body') %}
                        {% set trafficAlertsDate = view.style_plugin.getField(loop.index0, 'field_traffic_alert_date') %}
                        <li class="font-page-ticker-list">
                           <span class="news-main-title">{{ trafficAlertTitle }}</span><br>
                           <span class="subline-content">{{ trafficAlertsBody }}</span>
                           <span class="date-advisory-ticker">{{ trafficAlertsDate }} </span>
                        </li>
                        {% endif %}
                        {% endfor %}
                     </ul>
                  </div>
               </div>
            </div>
         </div>


         <!-- Card 2 -->
         <div class="col-md-6">
            <div class="card bg-news">
               <div class="card-header">
                  <img src="/sites/default/files/images/font-ticker/advisory.svg" alt="Traffic Icon">
                  <span>TRAFFIC ADVISORY</span>
               </div>
               <div class="card-body">
                  <div class="news-ticker">
                     <ul>
                        {% for row in rows %}
                        {% set row_obj = view.result[loop.index0] %}
                        {% set node = row_obj._entity %}
                        {% set nodebundle = node.bundle() %}
                        {% if nodebundle == 'traffic_advisory' %}
                        {# Title #}
                        {% set trafficAdvisoryTitle = node.title.value %}
                        {# View fields #}
                        {% set trafficAdvisoryBody = view.style_plugin.getField(loop.index0, 'field_traffic_advisory_body') %}
                        {% set trafficAdvisoryDate = view.style_plugin.getField(loop.index0, 'field_traffic_advisory_date') %}
                        <li class="font-page-ticker-list">
                          <span class="news-main-title"> {{ trafficAdvisoryTitle }} </span><br>
                          <span class="subline-content"> {{ trafficAdvisoryBody }} </span>
                           <span class="date-advisory-ticker">{{ trafficAdvisoryDate }} </span>
                        </li>
                        {% endif %}
                        {% endfor %}
                     </ul>
                  </div>
               </div>
            </div>
         </div>
         <!-- conatiner ends -->
      </div>
   </div>
</section>
______________________________________



/* ================================================================================================
   Front Page Ticker
================================================================================================= */



        .event-alert-section{
            background-color: #fff;
            padding: 20px 0;
        }

        .card.bg-news{
            border: 1px solid rgb(214, 224, 245);
            border-radius: 8px;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 10px;
            height: 300px;
        }

        .card.bg-news .card-header{
            background-color: rgb(8, 74, 131);
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            letter-spacing: 1px;
            text-align: center;
            border-bottom: 5px solid rgb(170, 223, 247);
        }


        .news-ticker{
            height: 150px;
            overflow: hidden;
            position: relative;
        }


        .news-ticker ul{
            list-style: none;
            padding: 0;
            margin: 0;
            animation: scrollUp 10s linear infinite;
        }


        .news-ticker:hover ul{
            animation-play-state: paused;
        }

        .news-ticker li{
            padding: 10px;
            border-bottom: 1px solid #eee;
            font-size: 14px;
            cursor: pointer;
        }

    
      .bg-news .card-header  img {
              height: 28px;
            width: 28px;

  }


        @keyframes scrollUp{
            0% { transform: translateY(0); }
            100% { transform: translateY(-100%); }
        }




.date-advisory-ticker{

   position: relative;
   top: -1vw;
   color: red;
}


.news-main-title {
    color: #04c;
    font-weight: 700;
    text-decoration: underline;
    position: relative;
    padding-right: 20px;
}



.subline-content{

    font-size: var(--font-content-size-14);
    color: #666;

}

.font-page-ticker-list{

  background: #FFF9C5;
  border-bottom: 5px solid grey;
  margin-bottom: 5px;
  border-radius: 10px;
}




_____________________________________________

craete both conten types and add two fieild body and date 

_____________________________________

add contents 
___________________________


make view  cpaable of filtering both content types 
so that data can be fetched 



put aal fields of on voew of both content types 

make content fecth row mimmum 20