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-directionflex-wrapjustify-contentalign-contentalign-itemFlex item:
orderflexflex-growalign-selfMargin:
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> <h2>Projects</h2> <ul> <li>Portfolio Website</li> <li>Landing Page</li> <li>Blog Template</li> </ul> </section> <section> <h2>Contact</h2> <p>Email: rselvakumar192001@gmail.com</p> </section> <footer> <p>©Selva 2025</p> </footer></body></html>Output:
Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
