8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Blog

Blog Details

How I Designed My Resume: A Project in HTML and CSS

How I Designed My Resume: A Project in HTML and CSS

October 14, 2024

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Anuradha's Resume</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background-color: #f4f4f4;

            color: #333;

        }

        .container {

            max-width: 800px;

            margin: 20px auto;

            background: #fff;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

        }

        h1 {

            text-align: center;

            color: #4A90E2;

        }

        .section {

            margin-bottom: 20px;

        }

        h2 {

            border-bottom: 2px solid #4A90E2;

            padding-bottom: 5px;

            margin-bottom: 10px;

        }

        .job-title {

            font-weight: bold;

            color: #4A90E2;

        }

        .contact-info {

            display: flex;

            justify-content: space-between;

            font-size: 14px;

            margin-bottom: 20px;

        }

        .skills {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;

        }

        .skill {

            background-color: #e7f1ff;

            border-radius: 4px;

            padding: 5px 10px;

            font-size: 14px;

        }

    </style>

</head>

<body>

<div class="container">

    <h1>Anuradha's Resume</h1>

<div class="contact-info">

        <div>Email: anuradha@example.com</div>

        <div>Phone: +91 98765 43210</div>

    </div>

<div class="section">

        <h2>Objective</h2>

        <p>Dynamic and detail-oriented web developer with experience in HTML, CSS, and JavaScript, seeking to leverage expertise in a challenging web development internship.</p>

    </div>

<div class="section">

        <h2>Education</h2>

        <p><span class="job-title">Bachelor of Technology in Computer Science</span> <br> XYZ University, Year - 2023</p>

    </div>

<div class="section">

        <h2>Experience</h2>

        <p><span class="job-title">Intern</span> - ParamWeb <br> June 2024 - Present</p>

        <p>Contributed to front-end development, performing manual testing, and enhancing website content for various clients.</p>

    </div>

 <div class="section">

        <h2>Skills</h2>

        <div class="skills">

            <div class="skill">HTML</div>

            <div class="skill">CSS</div>

            <div class="skill">JavaScript</div>

            <div class="skill">PHP</div>

            <div class="skill">Manual Testing</div>

        </div>

    </div>

 <div class="section">

        <h2>Projects</h2>

        <p><span class="job-title">RenovaNest Interiors</span> <br> Developed a comprehensive website for a property maintenance service, focusing on user-friendly design and content management.</p>

    </div>

  <div class="section">

        <h2>References</h2>

        <p>Available upon request.</p>

    </div>

</div>

</body>

</html>

Styling Breakdown
The CSS is written within the <style> tag in the HTML document, which applies styles directly to the elements of the resume. Here’s a detailed explanation of each style rule:
1. Color
color: This property sets the text color.
Example: color: #4A90E2; makes the text blue.

2. Background Color
background-color: Sets the background color of an element.
Example: background-color: #f4f4f4; gives the body a light gray background.

3. Font Size
font-size: Controls the size of the text.
Example: font-size: 14px; makes the text smaller.

4. Padding
padding: Adds space inside an element, between the content and the border.
Example: padding: 20px; adds 20 pixels of space inside the container.

5. Margin
margin: Adds space outside an element, creating distance between it and adjacent elements.
Example: margin-bottom: 20px; adds space below a section.

6. Border and Border Radius
border: Defines the outline around an element. Example: border-bottom: 2px solid #4A90E2; adds a blue underline to section headings.
border-radius: Rounds the corners of an element. Example: border-radius: 8px; softens the edges of the container.

7. Flexbox (for Layout)
display: flex;: Enables Flexbox layout on an element.
Example: display: flex; in the .contact-info class.
Use: Helps arrange child elements (like contact info) in a row and control spacing and alignment easily.
Using div for Styling
<div>: A block-level element used to group content together.
Purpose: You can apply styles to <div> elements to control layout and appearance.
Example: A <div class="container"> wraps all resume content, allowing you to style it as a single unit with padding, background, and shadow.

Categories

Recent post

Building a Responsive Calculator Interface with HTML and CSS
October 15, 2024
Building a Responsive Calculator Interface with HTML and CSS
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
October 14, 2024
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
How I Designed My Resume: A Project in HTML and CSS
October 14, 2024
How I Designed My Resume: A Project in HTML and CSS
Inserting and Styling Images in HTML: Best Practices for Beginners
October 14, 2024
Inserting and Styling Images in HTML: Best Practices for Beginners

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

Building a Responsive Calculator Interface with HTML and CSS
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
How I Designed My Resume: A Project in HTML and CSS
Inserting and Styling Images in HTML: Best Practices for Beginners

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO