Friday, May 14, 2021

Simple Avatar Image in HTML & CSS

 A simple avatar image in HTML and CSS that I wrote I hope you will find my work useful.

I am currently accepting programming work, IT projects, school and application development, programming projects, thesis and capstone projects, IT consulting work, computer tutorials, and web development work kindly contact me at the following email address for further details.  If you want to advertise on my website kindly contact me also in my email address also. Thank you.

My email address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com






Program Listing

index.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Simple Avatar Image in HTML & CSS</title>

        <style>

            *,

            html {

                box-sizing: border-box;

                padding: 0;

                margin: 0;

            }


            body {

                display: flex;

                align-items: center;

                justify-content: center;

                min-height: 100vh;

                background: #13141c;

            }


            main {

                display: block;

                padding: 30px;

                border-radius: 10px;

                background: #212330;

            }


            .container {

                text-align: center;

                color: #eee;

                font-family: sans-serif;

                height: auto;

            }


            .wrapper {

                background: #8a8a8a;

                padding: 2px;

                border-radius: 50%;

                width: 300px;

                margin: 20px auto 0;

            }


            img {

                display: block;

                width: 100%;

                border-radius: 50%;

            }

        </style>

    </head>

    <body>

        <main>

            <div class="container">

                <h1>Simple Avatar Image in HTML & CSS</h1>

                <h2>&#187; Jake R. Pomperada, MAED-IT, MIT &#171;</h2>


                <div class="wrapper">

                    <img src="jacob.jpg" class="img-avatar" alt="" />

                </div>

            </div>

        </main>

    </body>

</html>


No comments:

Post a Comment