@andfanilo I implemented my HTML code in my app in streamlit but I couldn’t get it to work the same. How can I fix this situation?
The code:
footer="""
<style>
.img
{
max-width: 100%;
}
.Headerstyle
{
color:white;
transition: transform .2s;
text-align: center;
}
.Headerstyle:hover {
transform: scale(1.5);
transition: 0.2s;
}
.image1 {
padding: 10px;
transition: transform .2s;
}
.image2 {
padding: 10px;
transition: transform .2s;
}
.image1:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.image2:hover {
#border: 4px solid green;
#border-radius: 15px;
transform: scale(1.5);
transition: 0.2s;
}
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: ##0000ffff;
color: white;
text-align: center;
}
body {
border-style: solid;
border-width: 15px;
border-radius: 5px;
padding: 10px;
transition: 5s;
}
body {
margin: 0;
padding: 0;
animation: pulse 5s infinite;
}
.container {
position: relative;
width: 100%;
margin: 0px auto;
padding: 10px 3px;
}
.Loading {
position: relative;
display: inline-block;
width: 100%;
height: 7px;
background: #f1f1f1;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
border-radius: 4px;
overflow: hidden;
}
.Loading:after {
content: '';
position: absolute;
background: blue;
width: 10%;
height: 100%;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
animation: load 5s infinite;
}
@keyframes load {
0% {
left: 0%;
}
25% {
width: 50%;
left: 50%
}
50% {
width: 10%;
left: 90%
}
75% {
width: 50%;
left: 0%
}
100% {
width: 10%;
left: 0%
}
}
@keyframes pulse {
0% {
border-color: orange;
}
25% {
border-color: orange;
}
50% {
border-color: orange;
}
75% {
border-color: orange;
}
100% {
border-color: orange;
}
}
</style>
<body>
<div class="footer" style="
display: flex;
flex-direction: column;
justify-content: space-between;
height: 10vh;">
<p class="Headerstyle"><b>Get In Touch With Me</b></p>
<div><div style="display: flex;justify-content: center;"><a href="https://stackoverflow.com/"><img class="image1" src="upload://k8CYYzMyarU4x6KyboeB1xBTnDh.png" alt="stackoverflow icon" width="60" height="60"></a><a href="https://www.linkedin.com"><img class="image2" src="upload://ampjem4R2CPwfeWxm3A47d2RD0Q.png" alt="linkedin icon" width="60" height="60"></a></div>
<div class="container"></div>
<div class="Loading"></div>
</div>
</div>
</body>
"""
hide_st_style =" <style>footer {visibility: hidden;}</style>"
st.markdown(hide_st_style, unsafe_allow_html=True)
st.markdown(footer,unsafe_allow_html=True)
For example, in the streamlit application, the border color of the website does not change at all. In addition, the width of the loading bar cannot be as much as the width of the website.
