Develop Reference

Why can't I get these images with titles to flow horizontally center?

Previously I posed a question here1, and it was answered appropriately to solve my first issue but not my second issue - the first being proper code arrangement and the second being the question I'm talking about. I removed the CSS code that was originally applied, which you can view on original question, and applied the new CSS code as follows:
.img {
margin: 10px;
}
.grid {
display: flex;
flex-wrap: wrap;
/* max-width: 800px; */
}
.grid a {
display: flex;
align-items: center;
}
I removed the max-width: 800px; and received the following result.
Adding the max-width: 800px; showed the same results in image. Tried various combinations of CSS with no positive results. The code snippet as follows:
<div className={styles.grid}>
<div className={styles.imgc}>
<a href="..\pages\satweather.js">
<img
className={styles.img}
src="weatherbutton.jpg"
width="100"
height="50"
onclick="openModal();currentSlide(1)">
</img>
<div>→ SatWeather</div>
</a>
</div>
/* code continues in repetition for 4 more images
before ending with */
</div>
Does anyone have any suggestions on what I might try or a solution to this problem? To get these images aligned center and horizontally to the page. Help is appreciated.
Here is desired result, but without space between photo and link to page
Please Note: This is JS, not HTML.

Here is html version of your code.
Use display:flex to image container and then, Make one separate element for image box just like here which is image-box set it's anchor tag to display:flex and align-items:center.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
background-color: #050505;
}
.image-container {
position: relative;
display: flex;
flex-direction: row;
gap: 15px;
flex-wrap: wrap;
}
.image-class {
height: 50px;
width: 100%;
object-fit: cover;
}
.image-box a {
display: flex;
flex-direction:column;
}
<div class="container">
<div class="image-container">
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
<div class="image-box">
<a href="javasctipt:void(0);">
<img src="https://source.unsplash.com/random" alt="image" class="image-class">
<h1>image titel</h1>
</a>
</div>
</div>
</div>

Fade-out Left & Fade-in Right animation with jQuery

This is a questionnaire to help people where should they go when they have a certain type of ticket.
Right now everything is going OK but I need to put a smooth animation on each ul transition.
So, if you pressed any button, the old ul is gonna fade-out to the left and the new ul will fade-in from the right. But if you press the Back button it will do the opposite animation when going back to the previous ul.
Right now I'm only using animation from https://animate.style/. Is there anyway to control the animation with jQuery or is it better to build the animation with jQuery alone ?
$(document).ready(function() {
$(".tab a").click(function() {
$(this).parent().addClass("active").siblings(".active").removeClass("active");
var tabContents = $(this).attr("href");
$(tabContents).addClass("active").siblings(".active").removeClass("active");
return false;
setTimeout(function() {
q_list.eq(num).addClass("left");
setTimeout(function() {
q_list.eq(num).hide();
q_list.eq(num + 1).show();
btn.removeClass("click");
setTimeout(function() {
q_list.eq(num + 1).removeClass("right");
num++
}, 1000);
}, 360);
}, 260);
});
$("button").on("click", function() {
let currentLevel = $(this).closest('.tab').attr('data-level');
let prevLevel = parseInt(currentLevel) - 1;
$('.tab').removeClass("active");
$(`.tab[data-level=${prevLevel}]`).eq(0).addClass('active')
});
});
.question_wrapper {
display: flex;
justify-content: center;
}
ul {
list-style: none;
border: 1px solid black;
text-align: center;
padding-left: 0;
width: 40rem;
height: 20rem;
display: flex;
justify-content: center;
align-items: center;
}
.buttons {
display: flex;
justify-content: space-around;
}
.yes_part,
.no_part {
display: flex;
flex-direction: column;
}
.yes_part {
padding-right: 2rem;
}
a.yes {
background-color: #FFB8B8;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
a.no {
background-color: #B1E0FF;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
.ticket_type {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-bottom: 10px;
}
.ticket_type a {
padding: 10px 30px;
border: 1px solid black;
border-radius: 10px;
margin: 10px;
}
.answer_1 {
display: flex;
flex-direction: column;
}
.store_place_1,
.store_place_2 {
display: flex;
}
.store_1,
.store_2,
.store_3,
.store_4,
.store_5 {
text-decoration: none;
color: black;
}
a {
text-decoration: none;
color: black;
}
.tab {
display: none;
}
.tab.active {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<section class="question_wrapper">
<ul class="tab main-tab active animate__animated animate__fadeInRight" data-level='1'>
<li class="active">
<p>Do you have a ticket ?</p>
<div class="buttons">
<div class="yes_part">
<img src="yes.png" alt="">
<a class="yes" href="#tab1">yes</a>
</div>
<div class="no_part">
<img src="no.png" alt="">
<a class="no" href="#tab2">no</a>
</div>
</div>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab1" data-level='2'>
<li>
<p>Which Ticket do you have ?</p>
<div class="ticket_type">
Type 1
Type 2
Type 3
Type 4
Type 5
Type 6
</div>
<button type="button">Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab2" data-level='2'>
<li>
<p>You can buy the ticket from here.</p>
<div class="store_place_1">
<a href="#">
<div class="store_1">
<p>Store 1</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_2">
<p>Store 2</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_3">
<p>Store 3</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<div class="store_place_2">
<a href="#">
<div class="store_4">
<p>Store 4</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_5">
<p>Store 5</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<button>Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab3" data-level='3'>
<li>
<div class="answer_1">
<p>Please go to hall A</p>
<img src="receptionist.png" alt="">
<button>Back</button>
</div>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab4" data-level='3'>
<li>
<p>Please go to hall B</p>
<button>Back</button>
</li>
</ul>
<ul class="tab animate__animated animate__fadeInRight" id="tab5" data-level='3'>
<li>
<p>Please go to hall C</p>
<button>Back</button>
</li>
</ul>
</section>

Here is a working version using Animate.css, and it's configurable to have any set of { Current->in, Current->out, Next->in and Next->out } transitions by editing the trans Object. You can also set the speed fast or '' (default). The way it works is:
on page init, the default transitions are applied to all animated elements (default is the trans.nextIn class)
on page init, the speed configuration class is applied to all animated elements
on any 'forward' transition (a click) the current element is given the nextOut transition and a timeout is set. When the timeout is done, the target tab is given its 'active' + nextIn transition class
on any 'back' transition, the reverse happens.
The code is commented.
let trans = {
nextIn: 'animate__fadeInLeft',
nextOut: 'animate__fadeOutRight',
prevIn: 'animate__fadeInRight',
prevOut: 'animate__fadeOutLeft'
};
let transArr = Object.entries(trans).map(e => e[1]);
let aDelay, speed = 'fast' // fast or slow
$(document).ready(function() {
// first set up the animations based on our configuration stuff above
$('.animate__animated').addClass(trans.nextIn) // auto-apply the default IN transition
if (speed === 'fast') {
aDelay = 200;
$('.animate__animated').addClass('animate__faster')
} else aDelay = 300;
$(".tab a").click(function() {
$('.tab').removeClass(transArr); // remove all transition classes from tabs
$(`.tab.active`).addClass(trans.nextOut)
var tabContents = $(this).attr("href");
$(tabContents).removeClass(transArr)
setTimeout(() => { // the timeout allows our departing containers a moment to get out before we bring in the next active container
$(`.tab.active`).removeClass('active')
$(tabContents).addClass([trans.nextIn, "active"])
}, aDelay)
});
$("button").on("click", function() {
let currentLevel = $(this).closest('.tab').attr('data-level');
let prevLevel = parseInt(currentLevel) - 1;
$('.tab').removeClass(transArr); // remove all transition classes from tabs
$(`.tab.active`).addClass(trans.prevOut);
setTimeout(() => { // the timeout allows our departing containers a moment to get out before we bring in the next active container
$('.tab').removeClass('active')
let targTab = `.tab[data-level=${prevLevel}]`;
$(targTab).eq(0).addClass('active ' + trans.prevIn);
}, aDelay)
});
});
.question_wrapper {
display: flex;
justify-content: center;
}
ul {
list-style: none;
border: 1px solid black;
text-align: center;
padding-left: 0;
width: 40rem;
height: 20rem;
display: flex;
justify-content: center;
align-items: center;
}
.buttons {
display: flex;
justify-content: space-around;
}
.yes_part,
.no_part {
display: flex;
flex-direction: column;
}
.yes_part {
padding-right: 2rem;
}
a.yes {
background-color: #FFB8B8;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
a.no {
background-color: #B1E0FF;
padding: 5px 20px;
text-decoration: none;
color: black;
margin-top: 5px;
}
.ticket_type {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-bottom: 10px;
}
.ticket_type a {
padding: 10px 30px;
border: 1px solid black;
border-radius: 10px;
margin: 10px;
}
.answer_1 {
display: flex;
flex-direction: column;
}
.store_place_1,
.store_place_2 {
display: flex;
}
.store_1,
.store_2,
.store_3,
.store_4,
.store_5 {
text-decoration: none;
color: black;
}
a {
text-decoration: none;
color: black;
}
.tab {
display: none;
}
.tab.active {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<section class="question_wrapper">
<ul class="tab main-tab active animate__animated " data-level='1'>
<li class="active">
<p>Do you have a ticket ?</p>
<div class="buttons">
<div class="yes_part">
<img src="yes.png" alt="">
<a class="yes" href="#tab1">yes</a>
</div>
<div class="no_part">
<img src="no.png" alt="">
<a class="no" href="#tab2">no</a>
</div>
</div>
</li>
</ul>
<ul class="tab animate__animated " id="tab1" data-level='2'>
<li>
<p>Which Ticket do you have ?</p>
<div class="ticket_type">
Type 1
Type 2
Type 3
Type 4
Type 5
Type 6
</div>
<button type="button">Back</button>
</li>
</ul>
<ul class="tab animate__animated " id="tab2" data-level='2'>
<li>
<p>You can buy the ticket from here.</p>
<div class="store_place_1">
<a href="#">
<div class="store_1">
<p>Store 1</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_2">
<p>Store 2</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_3">
<p>Store 3</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<div class="store_place_2">
<a href="#">
<div class="store_4">
<p>Store 4</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
<a href="#">
<div class="store_5">
<p>Store 5</p>
<img src="" alt="">
<p>You need to login first to buy</p>
</div>
</a>
</div>
<button data-back>Back</button>
</li>
</ul>
<ul class="tab animate__animated " id="tab3" data-level='3'>
<li>
<div class="answer_1">
<p>Please go to hall A</p>
<img src="receptionist.png" alt="">
<button data-back>Back</button>
</div>
</li>
</ul>
<ul class="tab animate__animated " id="tab4" data-level='3'>
<li>
<p>Please go to hall B</p>
<button data-back>Back</button>
</li>
</ul>
<ul class="tab animate__animated " id="tab5" data-level='3'>
<li>
<p>Please go to hall C</p>
<button data-back>Back</button>
</li>
</ul>
</section>

Links working on codepen do not work locally

I'm having some issue with HTML links not working locally however they do work on Codepen.
I have 3 pages; when I run them locally the links work on the first two but do not show on the 3rd. The 3rd-page links do show up in Codepen.
I have tried for over a week now trying to figure it out.
This is the Codepen:
https://codepen.io/Randy3/pen/oPvQoY?editors=1100
Here is the code itself
body {
background-color: ;
}
#Captain {
border-radius: 40%;
width: 150px;
height: 150px;
transform: rotate(90deg);
margin: 0px;
}
/* The navbar itself. */
nav ul {
float: right;
display: flex;
}
nav ul li {
list-style: none;
margin-right: 20px;
position: relative;
}
h1 {
text-align: center;
font-family: Comic Sans MS;
color: orange;
}
footer a {
margin-right: 30px;
position: relative;
float: right;
}
.figure-img {
display: grid;
height: 100%;
grid-template-columns: repeat( 3, 1fr);
grid-gap: 20px;
}
img {
display: block;
max-width: 240px;
max-height: 340px;
height: auto;
width: auto;
border: 30%;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="../main.css/main.css">
</head>
<body>
<nav>
<ul>
<li> Home </li>
<li> Profile </li>
<li> Gallery </li>
</ul>
</nav>
<br>
<h1> The works </h1>
<br>
<!-- <section class="figure-img">
<figure class="photo">
<img src="https://i.pinimg.com/originals/ce/02/38/ce02382eed1d9b50fa50b4f4ee1f9600.jpg" alt="ying yang fish">
</figure>
<figure class="photo">
<img src="https://images.pexels.com/photos/18174/reflection-pad-gaming-gamepad.jpg?auto=compress&cs=tinysrgb&h=350" alt="captain">
</figure>
<figure class="photo">
<img src="https://images-na.ssl-images-amazon.com/images/I/61gG0598btL._SX342_.jpg" alt="tophat">
</figure>
<figure class="photo">
<img src="https://img3.stockfresh.com/files/b/beaubelle/m/25/686513_stock-photo-love-bird-with-gift-box-vector.jpg" alt="battlelady">
</figure>
<figure>
<img src="https://us.123rf.com/450wm/naum100/naum1001510/naum100151000017/45714786-gear-hand-drawn-icon-vector.jpg?ver=6" alt="wiretree">
</figure>
<figure>
<img src="https://thumb1.shutterstock.com/mosaic_250/2645560/1123343060/stock-photo-summer-quote-summer-vibes-1123343060.jpg" alt="fox">
</figure>
</section>
-->
<footer>
Codepen
Instagram
</footer>
</body>
</html>
Ps. If it helps the folders are as follows:
Desktop: (the folder is on my desktop)
Foundations (the name of the project folder on the desktop)
Gallery.html ( the name of the html page)
Gallery.html ( the name of the html document)

How to display multiples images equally in a div

I am trying to create a photo gallery app and came across some obstacles. I want to have each image take equal portion of the div, for example if there are two images, each image takes up 50% of the div, and if there are three images, each images takes up 33.33% of the div, etc. Further, is there a way to format those images to be in square dimensions through css?
Also, I have the photos-gallery div that contains h2 and photos-gallery-content div. Currently, I am hardcoding the height for the photos-gallery-content div to fit inside the parent div, but is there a way to make that div take the remainder of the height of its parent div?
Eventually I want the pictures to render dynamically using React so any recommendations/advice on that would help a lot too.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
height: 200px;
overflow: hidden;
float: left;
display: flex;
margin: 0;
padding: 0;
}
.photos-gallery-layout li {
height: auto;
float: left;
list-style: none;
display: flex;
}
.photo {
display: inline-flex;
white-space: nowrap;
}
.photo img {
max-width: 100%;
max-height: auto;
display: inline-block;
vertical-align: middle;
}
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
</div>
<div>

I used your HTML and wrote a little CSS to demonstrate how to:
Have any amount of items fit at equal widths in one row using flexbox (display: flex on the parent and flex: 1 on the children)
Have <img> elements crop to the shape of the tallest element (in this case, a square) using object-fit: cover (note compatibility on CanIUse)
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>

how to stop images from stacking on top of each other

Im using angularjs to loop over an array of images and they are all getting displayed on top off each other.
.modifier-list-icon {
left: 5px;
position: absolute;
top: auto;
}
.icon-small {
height: 20px;
width: 20px;
}
<span ng-if="list.images" ng-repeat="image in list.images">
<img ng-src="{{image.url}}" alt="Icon"
class="icon-small modifier-list-icon"/>
</span>
this is how the images look like with the code from above.
I changed the position to position: relative; ^^
I want both of the images to display next to each other like the second screenshot but I want the images to be placed to the left like the first screenshot.

I tend to prefer a flexbox solution for these kinds of things. I repeated the entry once so you can see how shorter labels will cause the right side to shrink, but all of the nested elements stay positioned:
.container {
border: 1px solid black;
/*
by using display flex, we let the child containers use as much
width as they need, and we can keep their text-alignment separate
*/
display: flex;
}
.icon-container,
.label-container {
/*
flex grow is set to 1 and flex-basis to auto so that the child elements
will stretch to use all the available horizontal space.
one or the other could be dropped here
*/
flex: 1 1 auto;
border: 1px solid red;
display: inline-block;
}
.icon-container>*,
.label-container>* {
border: 1px solid black;
}
.label-container {
/*
creating the white space between the left-side icons and
right-side label/icon is just a matter of having
text-alignments
*/
text-align: right;
}
<div class="container" ng-if="list.images" ng-repeat="image in list.images">
<div class="icon-container">
<img ng-src="{{image.url}}" alt="An icon" class="icon-small modifier-list-icon" />
<img ng-src="{{image.url}}" alt="Also an icon" class="icon-small modifier-list-icon" />
</div>
<div class="label-container">
<span>some text very long text on the right side</span>
<img alt="another icon" />
</div>
</div>
<div class="container" ng-if="list.images" ng-repeat="image in list.images">
<div class="icon-container">
<img ng-src="{{image.url}}" alt="An icon" class="icon-small modifier-list-icon" />
<img ng-src="{{image.url}}" alt="Also an icon" class="icon-small modifier-list-icon" />
</div>
<div class="label-container">
<span>another entry</span>
<img alt="another icon" />
</div>
</div>

Remove position: absolute and position relative, apply display: inline-block

Hope below code example will solve your problem. If there is any other condition, please let me know.
body {
font: 16px "Roboto", Arial, sans-serif;
}
.block {
padding: 10px;
margin: 0 0 20px;
}
.block h3 {
font-size: 18px;
font-weight: bold;
margin: 0 0 10px;
}
ul{
margin:0;
padding:0;
list-style:none;
}
li {
display: table;
width: 100%;
margin: 0 0 10px;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
.actions {
display: table-cell;
white-space: nowrap;
}
.actions img {
margin-left: 10px;
}
.actions img:first-child {
margin-left: 0;
}
.title {
display: table-cell;
padding: 0 30px 0 10px;
text-align: right;
position: relative;
vertical-align: middle;
}
.title img {
position: absolute;
right: 0;
top: 0;
}
.list2 li {
display: flex;
}
.list2 .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
<div class="block">
<h3>List with wrap title</h3>
<ul>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
<div class="title"><span>Small Title</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
<div class="title"><span>Long Title goes here Long Title goes hereLong Title goes hereLong Title goes here</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg"
width="20"></div>
<div class="title"><span>Long Title with multiple action</span><img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<ul>
</div>
<div class="block">
<h3>List with truncate title </h3>
<ul class="list2">
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
<div class="title">Small Title<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"></div>
<div class="title">Long Title goes here Long Title goes hereLong Title goes hereLong Title goes here<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<li>
<div class="actions"><img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583985.svg" width="20"> <img src="https://image.flaticon.com/icons/svg/583/583988.svg"
width="20"></div>
<div class="title">Long Title with multiple action<img src="https://image.flaticon.com/icons/svg/584/584017.svg" width="20"></div>
</li>
<ul>