HTML, Customization Problems in Web Page's Footer Section

user_14178341 0
Viewed 179

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? enter image description here

streamlit python-3.x css html
3 Answers

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>

user_175602900

You can use this code below. It has animations on each images and titles.

<div class="footer">
        <p class="headerStyle"><b>Get In Touch With Me</b></p>
        <a href="https://stackoverflow.com/"><img class="image1" 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 class="image2" src="https://cdn-icons-png.flaticon.com/512/174/174857.png"
                alt="linkedin icon" width="60" height="60">
        </a>
</div>

<style>
        img {
            max-width: 100%;
        
        }
        
        .headerStyle {
            transition: transform .2s;
        }
        
        .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;
        }
        
        a:link,
        a:visited {
            color: blue;
            background-color: transparent;
            text-decoration: underline;
        }

        a2:hover {
            border-style: solid;
            },
        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>
user_32445940 

        <div>
            <p class="text-center footer-text">
                Contact me
            </p>
            <p class="icons">
                <a href="#">
                    <img url="img1.jpg">
                </a>
                <a href="#">
                    <img url="img2.jpg">
                </a>
            </p>
        </div>

text-center - aligns text to the center of the element

to make the images clickable you need to place them inside the tag.

to resize/style the elements you need to reference them in css

.text-center{
    text-align: center;
}
.footer-text{
    font-size: 1rem;
}
.icons{
    display: flex;
    justify-content: center;
}
user_151312260
Related