Potential address for site footer


by Jeremy Caudle
code

I wanted to try and sort out a quick and decent looking address element that I could use within this site’s footer. I think I almost have it and hopefully I can get it in place within the next few days.

Jeremy Caudle waves hello

Jeremycaudle.com, is the digital home of Jeremy Caudle, a front-end developer and web designer currently living and working in Japan. Need to talk business or wanna say hi? Email me at jeremy@jeremycaudle.com.

View the code:

HTML and JS 
<div class="code-block">

            <address class="footer-address h-card">
                <img src="https://jeremycaudle.com/ygg/resources/onebitme.png" width="120" height="97" class="u-photo" alt="Jeremy Caudle waves hello">
                <p style="margin: 0;/*! width: 100%; */text-align: left;"> <a href="https://jeremycaudle.com" class="u-url">Jeremycaudle.com</a>, is the digital home of <span class="p-name">Jeremy Caudle</span>, a <span class="p-job-title">front-end developer</span> and web designer currently living and working in Japan. Need to talk business or wanna say hi? Email me at <span class="u-email">jeremy@jeremycaudle.com</span>.</p>
            </address>
   
        </div>
CSS 
.code-block {
                background-color: #232323;
                border-radius: 1rem;
                width: clamp(16em, 90vw, 45em);
                margin: 3rem auto;
            }

            .footer-address {
                font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
                display: grid;
                margin: 0 auto;
                grid-template-columns: 120px 1fr;
                gap: 1rem;
                padding: 1rem;
                font-style: normal;
                vertical-align: middle;
                color: #fefefe;
                place-items: center;
            }
            
            .footer-address img {
                background-image: radial-gradient(100% 90% at 68% 20%, yellow, green);
                border-radius: .5rem;
                clip-path: content-box inset(0 round .5rem);
                color: black;
                transition: background-image .5s ease-out;
            }

            .footer-address img:hover, .footer-address img:focus {
                background-image: radial-gradient(100% 100% at 68% 20%, rgb(255, 255, 13), green);
            }



            .footer-address p, .footer-address p a {
                color: #fefefe;
                line-height: 1.5;
            }

Tags