FOUR DAY OF JAVA FULL STACK TRAING

#css #html

In this training i can learn new CSS properties to align content where we want in web page

** FLEX:**

It is the dimensional layout model to arrange the container of element in row or column in web page

display:flex - > It is the CSS element to flexible the content

Types of Flex Properties in CSS :

Flex container
Flex item

Flex Container:

flex-direction
flex-wrap
justify-content
align-content
align-item

Flex item:

order
flex
flex-grow
align-self

Margin:

It maintain the outside extra spaces between another element

Padding:

It maintain the inside space of the element with in the container

Image for padding and margin

Based upon the learning we created the simple portfolio web site

code:

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

<head>
    <title>Portfolio</title>
    <style>

         header{
            border: 1px solid;
            background-color: rgb(45, 44, 44);
            color: white;
        }

        h1{
           /*border: solid;*/
            text-align : center;
        }



        a{
            text-decoration: none;
            color: white;
            }

       header ul{

            list-style-type: none;
            display: flex;
            gap: 30px;
            justify-content: center;
        }

         section{

            width: 70%;
            margin:auto;
            margin-top: 20px;
            padding: 10px;
            background-color: rgb(231, 229, 229);
            border-radius: 15px;
        }

        footer{
            text-align: center;
            border: 1px solid;
            background-color: rgb(45, 44, 44);
            color: white;
            margin-top: 200px;
        }

    </style>
</head>
<body>
    <header>
        <h1>SELVAKUMAR</h1>

        <ul>
            <li><a href=""> About Me</a> </li>
            <li> <a href=""> Projects</a></li>
            <li> <a href="">Connect</a> </li>
            <li><a href=""> Logint Page</a> </li>
        </ul>
    </header>
    <section>
        <h2> ABOUT ME</h2>
        <P>
            I am selvakumar . I completed my B.E computer science in Muthayammal Engineering College in Rasipuram (Namakkal District) at 2023. 
            After ny college I joined the Non IT job as process executive in Trayee Business solution pvt limited in patinapakkam in chennai.
        </P>
    </section>


    <section class="projects">
        <h2>Projects</h2>
        <ul>
            <li>Portfolio Website</li>
            <li>Landing Page</li>
            <li>Blog Template</li>
        </ul>
    </section>


    <section class="contact">
        <h2>Contact</h2>
        <p>Email: rselvakumar192001@gmail.com</p>
    </section>


    <footer>
        <p>&copy;Selva 2025</p>
    </footer>
</body>
</html>

Output:

DEV Community

FOUR DAY OF JAVA FULL STACK TRAING

Top comments (0)