How to create a simple HTML Widget like this

[Vidya Lakshmi]

Hello Team,

How to create the simple widget like below,

The HTML Code is as below,

<div class ="c_full-d widget headlind_news">
<div class ="headlind_news--wrapper">
<header class = "headlind_news--titlex">
<a style="padding-top:5px" href="?">
<img src="icon_announcement.png" width="45px" height = "45px" role = "presentation">
</a>
</header>
<ul class="headlind_news--list"> </ul>
<marquee direction="left" scrollamount ="3">
"Thanks for creating a Marquee"
</marquee>
</div>
</div>

Can someone help me with the CSS script on how to define the class?

Or any help on creating the HTML Script for creating the below Widget inside which a text has to be scrolling from left to right?

[Gabru]

Hi Vidya

This Link Will Give you some help regarding your Work.

also follow some concepts on W3Schools.

https://javascript.info/styles-and-classes

Please Mark Correct and Helpful

Thanks and Regards

Gaurav Shirsat

[senthilvaithees]

Use this tag for scroll-able text.

<marquee behavior="scroll" direction="right">Here is some scrolling text... left to right!</marquee>

[Vidya Lakshmi]

Yes the Marquee works,

How do I Create the widget like above?

The above script is not working.

[Siddhnath Pande]

Hey Vidya,

To create exact same widget here is the code try it.

Html Script:

<div ng-class="['panel', 'panel-{{::c.options.color}}', 'b']">
  <div class="panel-heading">
    <span ng-if="c.options.glyph" aria-label="{{::c.getCleanGlyphName()}} glyph"><fa name="{{::c.options.glyph}}"/></span>
  </div>
</div>

CSS Script:

  .glyphicon {
    cursor: pointer;
    visibility: hidden;
    height: 14px;
    margin-left: 10px;
    
  }

If the above code helps then please mark my answer Correct and Helpful.

Thanks and Regards:

Siddhnath Pandey