DEV Community

Pavithra C
Pavithra C

Posted on

Day-2:Resume build in frontend 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=z, initial-scale=1.0">
    <title>Resume</title>
    <style>
        .container {
            border: 1px solid;
            width: 60%;
            margin: auto;
            display: grid;
            grid-template-columns: 1fr 2fr;


        }

        .sidelayout {
            /* border: 1px solid green;*/
            background-color: #1a4c81;
            color: white;
            padding: 15px;


        }

        .mainlayout {
            /*border: 1px solid blue;*/
            padding: 15px;

        }

        .avatar img {
            width: 100px;
            border-radius: 50%;
        }

        .avatar {
            display: flex;
            justify-content: center;
        }

        table,
        th,
        td {
            border: 1px solid;
            border-collapse: collapse;
            padding: 10px;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="sidelayout">
            <div class="avatar">
                <img src="/images/avator.jpg" alt="">

            </div>
            <h2>Contact</h2>
            <hr />
            <h3>INDIA,CHENNAI</h3>
            <h3>vijay@gmail.com</h3>
            <h3>Contact No : 1245******</h3>
            <h2>Skills</h2>
            <hr />
            <ul>
                <li>Java Full Statck</li>
                <li>selenium Testing</li>
                <li>English higher typewriting</li>
                <li>Excel</li>
                <li>c,c++</li>
            </ul>

            <h2>STRENGTH</h2>
            <hr />
            <ul>
                <li>Good Communication Skills</li>
                <li>Focused and confident with positive attitude</li>
                <li>Good team player</li>
                <li>self learning and self motivated person</li>
            </ul>

            <h2>Language</h2>
            <hr />
            <ul>
                <li>Tamil</li>
                <li>English</li>
            </ul>




        </div>


        <div class="mainlayout">
            <h1>Vijayaragavan Nandagopal</h1>
            <h2>CAREER OBJECTIVE</h2>
            <hr />
            <p>To succeed in an environment of growth and excellence and earn a job which provides me job Satisfaction
                and self development and help me achieve personal as well as organization goals.</p>
            <h2>Personal Details</h2>
            <hr />
            <ul>
                <li>Name:Your name</li>
                <li>Married:No</li>
                <li>Hobbies:</li>
                <ul>
                    <li>Reading</li>
                    <li>Swimming</li>
                    <li>Chess Playing</li>
                </ul>
            </ul>

            <h2>ACADEMIC Qualification</h2>
            <hr />
            <table>
                <thead>
                    <tr>
                        <th>Qualification</th>
                        <th>Board/University</th>
                        <th>School/Collage</th>
                        <th>Year Of passing</th>
                        <th>Marks</th>
                    </tr>

                </thead>
                <tbody>
                    <tr>
                        <td>MBA</td>
                        <td>University Name</td>
                        <td>College Name</td>
                        <td>2015</td>
                        <td>85%</td>
                    </tr>
                    <tr>
                        <td>MBA</td>
                        <td>University Name</td>
                        <td>College Name</td>
                        <td>2015</td>
                        <td>85%</td>
                    </tr>
                    <tr>
                        <td>MBA</td>
                        <td>University Name</td>
                        <td>College Name</td>
                        <td>2015</td>
                        <td>85%</td>

                    </tr>

                </tbody>
            </table>




        </div>

    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

output:
Image description

different between href and src

href (Hypertext Reference)

  • Full form: Hypertext Reference
  • Used in: , , , and tags.
  • Purpose: Specifies the URL or link destination to another resource. 
<a href="https://example.com">Visit Example</a>
Enter fullscreen mode Exit fullscreen mode

src (Source)

  • Full form: Source
  • Used in: , , <iframe>, <audio>, <video>, etc.</li> <li>Purpose: Specifies the source file to be embedded or displayed within the page. </li> </ul> <div class="highlight"><pre class="highlight plaintext"><code>&lt;img src="image.jpg" alt="My Image"&gt; </code></pre></div> <p></p> <hr> <p><strong>Grid</strong><br> </p> <div class="highlight"><pre class="highlight plaintext"><code>1).container { display: grid; } 2).container { display: inline-grid; }[TBD] 3).container { display: grid; column-gap: 50px; } 4).container { display: grid; row-gap: 50px; } 5).item1 { grid-column-start: 1; grid-column-end: 3; }[TBD] 6).item1 { grid-row-start: 1; grid-row-end: 3; }[TBD] 7).item1 { grid-row: 1 / span 2; }[TBD] 8).grid-container { display: grid; grid-template-columns: auto auto auto auto; } </code></pre></div> <p></p> <p><strong>REFERENCE LINK:</strong><br> <a href="https://www.w3schools.com/css/css_grid_item.asp">https://www.w3schools.com/css/css_grid_item.asp</a></p>

Top comments (0)