make a lab report on the topic of 
To create a webpage including:
An ordered list with type ‘a’
An unordered list with type ‘disc’.
A definition list

should follow this theme

OBJECTIVE:
To build a CV using HTML and CSS.
THEORY:
Creating a Curriculum Vitae (CV) webpage involves using HTML and CSS to showcase your personal, educational, and professional information in a neat and organized way. In HTML, we utilize structural tags like <div>, <header>, <section>, and <footer> to carve out different parts of the CV, which helps in achieving a clear layout. Important headings such as "skills," "experience," and "education" are emphasized with <h1> and <h2> tags, while <p> tags are perfect for adding descriptive text. You can also use lists (<ul>, <li>) or buttons (<button>, <span>) to neatly categorize skills or highlight interactive features.

HTML document has a pretty straightforward structure made up of several key elements: <!DOCTYPE> declaration: 
This is the very first line of an HTML document, and it tells the browser which version of HTML is being used. For instance, <!DOCTYPE html> means we're working with HTML5. The <html> element: This serves as the root of the document, wrapping all the other elements inside it. 
The <head> element: Here’s where you’ll find information about the document, like its title, character encoding, and links to any external stylesheets or scripts. Just a heads up, this part doesn’t show any visible content. 
The <title> element: Nestled within the <head> element, this defines the document's title, which you’ll see in the browser's title bar or tab. 
The <body> element: This is where all the visible content of the web page lives, including text, images, links, and other HTML elements.

On the CSS side, we focus on making the CV visually appealing. Properties like display: flex or grid are great for structuring the layout and ensuring it looks good on any device. Adding border radius and box shadow gives images and cards a polished touch, contributing to a professional appearance. Text styling, including font-weight, color, and margin, plays a crucial role in enhancing readability and establishing a clear hierarchy. You might also want to implement a hover effect using hover for those interactive elements. Adjusting the CV’s background color and padding helps maintain contrast and readability. Plus, with media queries, you can make sure the design is responsive so it looks great on all kinds of devices.

SOURCE CODE:
Here is the breakdown of the index.html, style.css and global.css files with the source code:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Samarpan's CV</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="content">
        <div class="left">
          <div class="main">
            <div class="image">
              <img src="sammpic.png" alt="image" width="240px" />
            </div>
            <div class="name">
             <h3>Samarpan KC</h3>
              <h5>Front-end Developer</h5>
              <p>Pokhara, Nepal</p>
            </div>
          </div>
          <div class="line"></div>
        </div>

        <div class="right">
          <div class="skills">
            <div class="title">
              <h2>Skills</h2>
            </div>
            <div class="desc">
              <p>I am proficient in the following skills, which I have acquired through a combination of academic coursework, personal projects, and professional experience.</p>
              <ul class="lists">
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>React</li>
                <li>NEXT JS</li>
                <li>React Native</li>
              </ul>
              
            </div>
          </div>
          <div class="experience">
            <div class="title">
              <h2>Experience</h2>
            </div>
            <div class="desc">
              <ul class="lists">
                <li class="timeline">
                  <h4>Junior Front-end Developer</h4>
                  <h6>eSewa Pvt. Ltd. | 2024 - Present</h6>
                  <p>
                    Developed and maintained the user interface for web applications.
                  </p>
                </li>
                <li class="timeline">
                  <h4>Web Developer Intern</h4>
                  <h6>XYZ tech Company | 2023 - 2024</h6>
                  <p>
                    Assisted in the development of new features and bug fixes for web applications.
                  </p>
                </li>
              </ul>
            </div>
          </div>
          <div class="education">
            <div class="title">
              <h2>Education</h2>
            </div>
            <div class="desc">
              <ul class="lists">
                <li class="timeline">
                  <h4>Bachelor in Computer Application</h4>
                  <h6>Tribhuwan University, PNC | 2024 - Present</h6>
                  <p>Currently pursuing BCA degree into the 3rd Semester.</p>
                </li>
                <li class="timeline">
                  <h4>Diploma in Computer Engineering</h4>
                  <h6>Shree Brahma Rupa Secondary | 2019 - 2023</h6>
                  <p>Completed Diploma in Computer Engineering.</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>


global.css
body {
    font-family: "Poppins", sans-serif;
    background-color: #f0f0f0;
    color: #1E1014;
    ::selection {
    background-color: #ffdf32;
    color: #1E1014;
    }
  }


style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("global.css");
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: #ffdfc1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content {
  width: 76vw;
  height: 80vh;
  background-color: #ffffff;
  border: 3px solid #03040b;
  border-radius: 22px;
  display: flex;
  font-family: "Poppins", sans-serif;
  padding: 24px 34px;
  box-shadow: #03040b28 8px 8px 0px;
}
.left {
  width: 30vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
}
.left .name {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.left .image img {
  border-radius: 50%;
}
.left .name h3 {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 28px;
}
.left .name h5 {
  font-weight: 500;
  font-size: 16px;
}
.left .name p {
  font-weight: 500;
  font-size: 16px;
  opacity: 0.5;
}
.left .line {
  background-color: #03040b;
  width: 0.2vw;
  height: 66vh;
  border-radius: 50%;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.right .skills {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.right .skills h2,
.experience h2,
.education h2 {
  font-weight: 700;
  font-size: 24px;
  text-decoration-line: underline;
}
.right .skills .desc {
  padding-left: 18px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.right .skills .desc .lists {
  display: flex;
  gap: 12px;
  user-select: none;
}
.right .skills .desc .lists li {
  list-style: none;
  width: max-content;
  height: max-content;
  font-size: 12px;
  font-weight: 500;
  background-color: #03040b17;
  padding: 4px 12px;
  border-radius: 50px;
  color: #03040b;
  border: 0.6px solid #03040b3f;
}

.right .experience,
.right .education {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.right .experience .desc,
.education .desc {
  padding-left: 18px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.right .experience .desc .lists,
.education .desc .lists {
  display: flex;
  gap: 12px;
}
.right .experience .desc .lists .timeline,
.education .desc .lists .timeline {
  display: flex;
  width: 50%;
  flex-direction: column;
  gap: 6px;
}
.right .experience .desc .lists .timeline h4,
.education .desc .lists .timeline h4 {
  font-weight: 600;
  font-size: 15px;
}
.right .experience .desc .lists .timeline h6,
.education .desc .lists .timeline h6 {
  font-weight: 500;
  font-size: 13px;
  opacity: 0.6;
}


OUTPUT:

fig: CV using the HTML and CSS

CONCLUSION:
Crafting a CV with HTML and CSS gives you the chance to present your personal and professional information in a neat and visually appealing way. By using HTML to organize your content and CSS to add style, you can create a professional layout that’s easy to read and responsive. When you make good use of flexbox, grid, typography, and spacing, you end up with a modern and user-friendly design. This method not only makes your CV more interactive and engaging but also showcases your web development skills. A well-crafted CV webpage reflects both your creativity and expertise, leaving a lasting impression on potential employers or clients.