DEV Community

SELVAKUMAR R
SELVAKUMAR R

Posted on

Resume Building Project

#css #html

In yesterday Java full Stack Training i can learn about how to insert the image in HTML

Ex:

<img src="we want to paste the photo path or link" alt ="we give the message alternative message if photo not visible">
Enter fullscreen mode Exit fullscreen mode

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .layout {
            border: 1px solid black;
            height: 100vh;
            width: 70%;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        body {
            display: flex;
            justify-content: center;
        }

        .left {
            border: 2px solid green;
            height: 100vh;
            padding-left: 5px;
            background-color: rgb(50, 60, 120);
            color: white;

        }

        .right {
            border: 2px solid red;
            height: 100vh;
        }


        img {
            width: 100px;
            height: 100px;
            margin-top: 10px;
            border-radius: 30px;
        }

        .profile {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="layout">

        <div class="left">

            <div class="profile">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2MaW3ccWub_qE2K3QkO1BR8ZQG9ukgglkww&s"
                    alt="">
            </div>

            <h3> Contact</h3>
            <hr>

            <h4>India</h4>
            <h4>New no 54 , old no 41/2 madaveli, chennai 600028</h4>
            <h4>rselvakumar298@gmail.com</h4>

            <h3>Skills</h3>
            <hr>

            <ul>
                <li>Java </li>
                <li>Blog Writer</li>
                <li>Git</li>
                <li>Gitlab</li>
                <li>Html, CSS</li>
            </ul>

            <h3>Strenght</h3>
            <hr>

            <ul>
                <li>Team builder</li>
                <li>Motivational specker</li>
                <li>Time Management</li>
            </ul>

            <h3>language</h3>
            <hr>

            <ul>
                <li>English </li>
                <li>Tamil</li>
            </ul>
        </div>
        <div class="right">

        </div>

    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Output:

Top comments (0)