HTML, Customization Problems in Web Page's Footer Section

Issue

The code: (Between footer=""" and """ includes html format code)

footer="""<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
        a:link , a:visited{
        color: blue;
        background-color: transparent;
        text-decoration: underline;
        }
                    
       a:hover,  a:active {
       color: red;
       background-color: transparent;
       text-decoration: underline;
       }
                    
       .footer {
       position: static ;
       left: 0;
       bottom:0;
       width:100%;
       background-color:white ;
       color: black;
       text-align: center;
       }
 </style>
       <div class="header">
       <p><b>Get In Touch With Me</b>
       <a style='display: block; text-align: center;'  href="https://www.linkedin.com" target="_blank"></a></p>
       <a href="https://www.linkedin.com"> 
       <img alt="Qries" src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"    
       width=50" height="50"><img alt2="Qries" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
       width=50" height="50">                                                 
       </a>
       </div>
   """
st.markdown(footer,unsafe_allow_html=True)  

Hello, I'm building a web application in Python and HTML with a streamlit structure. I could not move the icons and the text ("Get In Touch With Me") to the middle of the page. In addition, I could not change the size of the text ("Get In Touch With Me"). Finally, I cannot go to https://www.stackoverflow.com and https://www.linkedin.com separately by clicking on the icons. Could you help me with these problems?

Solution

in your styles you set style rules for .footer but in container div you set class attr value equal to header. you can check this code snippet:

img {
  max-width: 100%;
}
a:link,
a:visited {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}
a:hover,
a:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
.footer {
  position: static;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: white;
  color: black;
  text-align: center;
}

<div class="footer">
  <p><b>Get In Touch With Me</b></p>
  <a href="https://stackoverflow.com/"><img src="https://cdn-icons-png.flaticon.com/128/2111/2111628.png"
  alt="stackoverflow icon" width="60" height="60"></a>
  <a href="https://www.linkedin.com"><img src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
  alt="linkedin icon" width="60" height="60"></a>
</div>

Answered By - CyrusKabir