DEV Community

A K I L A N
A K I L A N

Posted on

DAY-6 (project 2 completed)

From The Previous splite the screen in to using GRID TEMPLETE

</div>
        <h2> Contact</h2>
        <hr></hr>
        <p>Chennai,Tamilnadu,India</p>
        <p>Email:akilan.noffical@gmail.com</p>
        <p>Contact no :9443911228</p>
        <h2>Skills</h2>
        <hr>
        <ul>
            <li><strong>Programming Languages:</strong>Java</li>
            <li><strong>Database:</strong>SQL,MsSQL</li>
            <li><strong>Web Technologies:</strong>HTML,CSS</li>
            <li><strong>Concepts:</strong>DSA,OOPS</li>
        </ul>
        <h2>Strength</h2>
        <hr>
        <ul>
            <li>Good Communication Skills</li>
            <li>Problem solving skills</li>
            <li>Adaptability</li>
            <li>Time Management</li>

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

        </div>
         <div class="right">
           <h1>Akilan N</h1> 
           <h2>summary </h2>
           <hr>
           <p>Motivated and detail-oriented Electronics and Communication Engineering graduate with knowledge of Java, SQL, HTML, CSS, and problem-solving skills. Eager to start a career in software development and contribute to innovative projects while continuously learning new technologies.</p>

            <h2>Project</h2>
            <hr>
            <b>Student Management System </b>
            <p><b>Technologies:</b> Java,Sql</p>
            <ul>
                <li>Developed a system to manage student records.</li>
                <li>Developed a system to manage student records.</li>
                <li>Improved data organization and retrieval efficiency.</li>
            </ul>
            <strong>Portfolio Website</strong> 
            <p><b>Technologies :</b> HTML,CSS</p>
            <ul>
                <li>Designed and developed a responsive personal portfolio website.</li>
                <li>Showcased projects, skills, and contact information.</li>
            </ul>

            <h2>Education </h2>
            <hr>
            <b>Bachelor of Engineering (B.E.) – Electronics and Communication Engineering </b>
            <p>Sri Eshwar College of Engineering</p>
            <P>Year of Graduation: 2026</P>
Enter fullscreen mode Exit fullscreen mode

FROM THE ABOVE THE NEW TAGS AND ELEMNTS WHERE

  • <hr>- a line formed in horizontal direction

  • <b> %<string> - these both function as similar where both of them bold the text

-tr,th,tb - this are the table tags tr(table row).

  • Everything between and is the content of a table cell. 
<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

*TO Complete the table *
use the css comments

  • border- collpase:collpase : this will merge the every row and gives complete column

CSS

.left{
            /* border: 1px solid seagreen; */
            background-color: slategrey;
            color: white;
            /* height: 100vh; */
            padding: 5%;
            /* display: flex;
            flex-direction: column;
            justify-content:space-between; */

        }
        .right{
            /* border: 1px solid black; */
            /* height: 100vh; */
            padding: 10px 25px;


        }
        img{

            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        .profile{
            /* border: 1px solid blueviolet; */
            display: flex;
            justify-content: center;
        }
        h4{
            padding-left: 10%;
        }
        h1{
            text-align: center;
        }
Enter fullscreen mode Exit fullscreen mode

new comments

  • display: flex;
    flex-direction: column; -
    justify-content:space-between     - this space - between will give equals space between each other

  • flex - will always move in row direction

  • flex- direction :will helps to change the direction of flex

THE FINAL OUTPUT

<!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>
        .Ak{
            /* border: 1px solid red ; */
            height: 100vh;
            width: 60vw;
            margin: auto;
            display: grid;
            grid-template-columns: 1fr 2fr;
            box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;

        }
        .left{
            /* border: 1px solid seagreen; */
            background-color: slategrey;
            color: white;
            /* height: 100vh; */
            padding: 5%;
            /* display: flex;
            flex-direction: column;
            justify-content:space-between; */

        }
        .right{
            /* border: 1px solid black; */
            /* height: 100vh; */
            padding: 10px 25px;


        }
        img{

            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        .profile{
            /* border: 1px solid blueviolet; */
            display: flex;
            justify-content: center;
        }
        h4{
            padding-left: 10%;
        }
        h1{
            text-align: center;
        }


    </style>
</head>
<body>

    <div class="Ak">           
        <div class="left">
            <div class="profile">
            <img src= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrXBx9jb1Y1Y__UKnwyHXdK9AVIjon9khzjw&s"  alt="Profile image">
        </div>
        <h2> Contact</h2>
        <hr></hr>
        <p>Chennai,Tamilnadu,India</p>
        <p>Email:akilan.noffical@gmail.com</p>
        <p>Contact no :9443911228</p>
        <h2>Skills</h2>
        <hr>
        <ul>
            <li><strong>Programming Languages:</strong>Java</li>
            <li><strong>Database:</strong>SQL,MsSQL</li>
            <li><strong>Web Technologies:</strong>HTML,CSS</li>
            <li><strong>Concepts:</strong>DSA,OOPS</li>
        </ul>
        <h2>Strength</h2>
        <hr>
        <ul>
            <li>Good Communication Skills</li>
            <li>Problem solving skills</li>
            <li>Adaptability</li>
            <li>Time Management</li>

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

        </div>
         <div class="right">
           <h1>Akilan N</h1> 
           <h2>summary </h2>
           <hr>
           <p>Motivated and detail-oriented Electronics and Communication Engineering graduate with knowledge of Java, SQL, HTML, CSS, and problem-solving skills. Eager to start a career in software development and contribute to innovative projects while continuously learning new technologies.</p>

            <h2>Project</h2>
            <hr>
            <b>Student Management System </b>
            <p><b>Technologies:</b> Java,Sql</p>
            <ul>
                <li>Developed a system to manage student records.</li>
                <li>Developed a system to manage student records.</li>
                <li>Improved data organization and retrieval efficiency.</li>
            </ul>
            <strong>Portfolio Website</strong> 
            <p><b>Technologies :</b> HTML,CSS</p>
            <ul>
                <li>Designed and developed a responsive personal portfolio website.</li>
                <li>Showcased projects, skills, and contact information.</li>
            </ul>

            <h2>Education </h2>
            <hr>
            <b>Bachelor of Engineering (B.E.) – Electronics and Communication Engineering </b>
            <p>Sri Eshwar College of Engineering</p>
            <P>Year of Graduation: 2026</P>



            <p></p>
        </div>
     </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

!

Top comments (0)