Web siteye story ekleme kodu yardım.

<style>

*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}

.bodyStory{
width: 100%
max-width:4rem;
height:auto;
display: flex;
justify-content: center;
align-items: center;
padding-top:30px;
}


.mainStory ul{
display: flex;
}

.mainStory ul li a img{
display: flex;
height:auto;
width:5rem;
border-radius: 100%;
transition: .6s ease-in-out;
max-height:3rem;
}

.mainStory ul li a img:hover{
transform: scale(1.1);
}

.mainStory ul li{
margin-right: 20px;
}



.mainStory ul li a{
display: block;
background-color: white;
padding: 4px;
border-radius: 100%;
}

.outer-layer{
position: relative;
background: linear-gradient(45deg, gold, fuchsia);
padding: 1px;
border-radius: 100%;
}

h1{
margin: 20px 0;
font-size: 4rem;
color: #fff;
font-family: Roboto;
font-style: italic;
}

button{
position: absolute;
width: 30px;
height: 30px;
background-color: blue;
bottom: 0;
right: 0.25rem;
text-align: center;
border-radius: 100%;
color: white;
font-size: 16px;
border: solid 1px white;
}

.storyBag{
display: block;
text-align: center;
justify-content: center;
}
.storyName{
padding-top: 0.6em;
font-size: 1em;
}

</style>
<div class="bodyStory">
<div class="mainStory">
<ul>
<li><div class="storyBag">
<div class="outer-layer">
<a href="https://www.srbebek.com/bebek-tulum"><img src="https://www.srbebek.com/Uploads/TicimaxStories/e8ff23cb-6f4e-4d42-8289-1ffb56ea8a8f.jpeg?v=637883401412391903"></a>


</div>
<p class="storyName">Alt - Üst Giyim</p>
</div>
</li>
<li><div class="storyBag">
<div class="outer-layer">
<a href="https://www.srbebek.com/bebek-tulum"><img src="https://www.srbebek.com/Uploads/TicimaxStories/e8ff23cb-6f4e-4d42-8289-1ffb56ea8a8f.jpeg?v=637883401412391903"></a>


</div>
<p class="storyName">Yenidoğan</p>
</div>
</li>

<li><div class="storyBag">
<div class="outer-layer">
<a href="https://www.srbebek.com/bebek-tulum"><img src="https://www.srbebek.com/Uploads/TicimaxStories/e8ff23cb-6f4e-4d42-8289-1ffb56ea8a8f.jpeg?v=637883401412391903"></a>


</div>
<p class="storyName">Takımlar</p>
</div>
</li>

<li><div class="storyBag">
<div class="outer-layer">
<a href="https://www.srbebek.com/bebek-tulum"><img src="https://www.srbebek.com/Uploads/TicimaxStories/e8ff23cb-6f4e-4d42-8289-1ffb56ea8a8f.jpeg?v=637883401412391903"></a>


</div>
<p class="storyName">Bebek Çeyizi</p>
</div>
</li>

<li><div class="storyBag">
<div class="outer-layer">
<a href="https://www.srbebek.com/bebek-tulum"><img src="https://www.srbebek.com/Uploads/TicimaxStories/e8ff23cb-6f4e-4d42-8289-1ffb56ea8a8f.jpeg?v=637883401412391903"></a>


</div>
<p class="storyName">Tulum</p>
</div>
</li>


</ul>
</div>
</div>