Scribd
Upload
61 views13 pages

Green University of Bangladesh Department of Computer Science and Engineering (CSE)

This lab report summarizes a student's work designing their CV using HTML and CSS. The student included sections for their profile, experience, skills, technical skills, and education. They provided the HTML and CSS code used to design each section and subsection of the CV. The overall objective was to gain experience with HTML and CSS for page layout and design.

Uploaded by

afnan mafuj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
61 views13 pages

Green University of Bangladesh Department of Computer Science and Engineering (CSE)

This lab report summarizes a student's work designing their CV using HTML and CSS. The student included sections for their profile, experience, skills, technical skills, and education. They provided the HTML and CSS code used to design each section and subsection of the CV. The overall objective was to gain experience with HTML and CSS for page layout and design.

Uploaded by

afnan mafuj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Green University of Bangladesh

Department of Computer Science and Engineering (CSE)


Faculty of Sciences and Engineering
Semester: (Summer, Year: 2021), B.Sc. in CSE (Day)

LAB REPORT NO 01
Course Title: Web Programming Lab
Course Code: CSE 302 Section: D13

Lab Experiment Name: Design a CV using HTML and CSS.

Student Details

Name ID

1. Mafuj Ahmed Bishal 201002158

Lab Date : 17 july,2022


Submission Date : 11 August 2022
Course Teacher’s Name : Tanpia Tasnim

[For Teachers use only: Don’t Write Anything inside this box]

Lab Report Status


Marks: ………………………………… Signature: .....................
Comments: .............................................. Date: ..............................
1.TITLE

Design a CV using and implementing with HTML and CSS

2. OBJECTIVES

• To gain basic knowledge of HTML and CSS.


• To increase design knowledge.
• To gain knowledge about page layout.

3. IMPLEMENTATION

• HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> CV Template </title>
<link rel="stylesheet" href="/fontawesome-free-6.1.2-web/css/all.css">
<link rel="stylesheet" href="/fontawesome-free-6.1.2-web/css/fontawesome.min
.css">
<link rel="stylesheet" href="/fontawesome-free-6.1.2-web/css/all.min.css">
<link rel="stylesheet" href="/CSS/style.css">

</head>

<body>
<div class="container">

<!--This is my header part-->

<header>

<img class="pro-image" src="/IMAGE/FB_IMG_9110682773608924058.jpg"


alt="Profile image">

<div class="header-text">
<h1>MD. Mafuj Ahmed Bishal</h1>
<br>
<h3>Web Designer</h3>
</div>

<div class="header-contact">
<button><i class="fa fa-download"></i> Download PDF</button><br><br>
<a href="mailto:afnanmafuj22@gmail.com">
Email: afnanmafuj22@gmail.com</a><br><br>
<a href="tel:+8801798541625">Phone: +8801798541625</a>
</div>

</header>

<div class="clear-the-div"></div>

<hr>

<!--Main Information-->
<main>

<!--Profile Section-->
<section id="profile-section">
<div class="content">
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-user">
</i>
</div>
<div class="left-text">
<h3>Profile</h3>
</div>
</div>
<div class="right">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Debitis tempore ipsum voluptatum! Eius eum ea quis ipsa autem quasi itaque
doloremque maxime ab? Tempora enim quos architecto laboriosam. Necessitatibus
deleniti labore nihil dolore quia?</p>
</div>
</div>
</section>
<div class="clear-the-div"></div>
<hr class="section-hr">

<!--Experience Section-->
<section id="experience-section">
<div class="content">
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-briefcase"></i>
</div>
<div class="left-text">
<h3>Experience</h3>
</div>
</div>
<div class="right">
<h3>Lead Developer</h3>
<h5>2021-Present</h5>
<div class="description">
<h6>StartUp Hub,Dhaka</h6>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Aperiam distinctio reiciendis quod dolores labore neque similique est tempora
provident doloremque.Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Aperiam distinctio reiciendis quod dolores labore neque similique est tempora
provident doloremque.</p>
<br><br>
</div>
<h3>Junior Web Developer</h3>
<h5>2020-2021</h5>
<div class="description">
<h6>EduSoft Bd,Dhaka</h6>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Aperiam distinctio reiciendis quod dolores labore neque similique est tempora
provident doloremque. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Aperiam distinctio reiciendis quod dolores labore neque similique est tempora
provident doloremque.</p>
</div>
</div>

</div>
</section>

<div class="clear-the-div"></div>
<hr class="section-hr">

<!--Skills Section-->

<section id="skills-section">
<div class="content">
<!--Outer left-->
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-gears"></i>
</div>
<div class="left-text">
<h3>Skills</h3>
</div>
</div>
<!--Outer Right-->
<div class="right">
<!--skill-1-->
<div class="skill-1">
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-marker"></i>
</div>
<div class="left-text">
<h3>Web Designer</h3>
</div>
<div class="des">
Lorem ipsum dolor sit amet consectetur dad
</div>
</div>
</div>
<!--skill-2-->
<div class="skill-2">
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-laptop-code"></i>
</div>
<div class="left-text">
<h3>Developer</h3>
</div>
<div class="des">
Lorem ipsum dolor sit amet consectetur dad
</div>
</div>
</div>
<!--skill-3-->
<div class="skill-3">
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-database"></i>
</div>
<div class="left-text">
<h3>Database</h3>
</div>
<div class="des">
Lorem ipsum dolor sit amet consectetur dad
</div>
</div>
</div>
<!--skill-4-->
<div class="skill-3">
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-mobile-screen"></i>
</div>
<div class="left-text">
<h3>Android App</h3>
</div>
<div class="des">
Lorem ipsum dolor sit amet consectetur dad
</div>
</div>
</div>
</div>
</div>
</section>

<div class="clear-the-div"></div>
<hr class="section-hr">

<!--Tecnical Section-->

<section id="technical-section">
<div class="content">
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-bug"></i>
</div>
<div class="left-text">
<h3>Technical</h3>
</div>
</div>
<div class="right">
<table style="width:100%">
<tr>
<td><i class="fa-brands fa-html5"></i>HTML</td>
<td><i class="fa-solid fa-database"></i>SQL</td>
<td><i class="fa-brands fa-apple"></i>OS X</td>
</tr>
<tr>
<td><i class="fa-brands fa-css3-alt"></i>CSS</td>
<td><i class="fa-brands fa-php"></i>PHP</td>
<td><i class="fa-brands fa-windows"></i>WINDOWS XP/VISTA</td>
</tr>
<tr>
<td><i class="fa-brands fa-js"></i>JAVASCRIPT
</td>
<td><i class="fa-brands fa-react"></i>REACT</td>
<td><i class="fa-brands fa-linux"></i>LINUX</td>
</tr>
</table>
</div>
</div>
</section>

<div class="clear-the-div"></div>
<hr class="section-hr">

<!--Education Section-->

<section id="education-section">
<div class="content">
<div class="left">
<div class="left-icon">
<i class="fa-solid fa-graduation-cap"></i>
</div>
<div class="left-text">
<h3>Education</h3>
</div>
</div>
<div class="right">
<div class="qualification">
<div class="institution-name">
<h3>B.Sc in Computer Science and Engineering</h3>
<p>
Green University of Bangladesh
<br>
Shewrapara,Bijoy Sarani,Dhaka
</p>
</div>
<div class="result">
<h3>Result</h3>
<p>CGPA:3.13</p>
</div>
</div>
</div>
</div>
</section>
<div class="clear-the-div"></div>
<hr class="section-hr">
</main>
</div>
</body>
</html>

• CSS Code:
*{
margin: 0;
padding: 0;
font-family: Georgia;
}
body{
font-family: Georgia;
background-color: #e4f9f5;
}
.container{
width: 1000px;
background-color: lightyellow;
margin: 0 auto;
padding: 20px;
height: 100%;

}
h1,h2,h3,h4,h5{
color: #777;
font-family: georgia;
}
.header-text{
float: left;
padding: 30px 30px 30px 10px;
}
.pro-image{
border-radius: 50%;
width: 120px;
height: 120px;
border: lightskyblue 4px solid;
float: left;
}
.header-text h1{
font-size: 28px;
word-spacing: .5px;
letter-spacing: .5px;
}
.header-text h2{
font-size: 15px;
word-spacing: .5px;
letter-spacing: 1.5px;
}
.header-contact{
float: right;
padding: 30px 30px 30px 10px;
font-family: georgia;
color: #777;

.header-contact button{
border: none;
padding: 12px 30px;
color: black;
background-color: dodgerblue;
border-radius: 20px;
}

.header-contact button:hover{
transform: scale(1.05);
background-color: royalblue;
}

.header-contact a{
text-decoration: none;
color: #777;
font-weight: bold;
}

.header-contact a:hover{
text-decoration: underline;
color: black;
transform: scale(1.5);
}
.clear-the-div{
clear: both;
}

hr{
border: black solid 3px ;
width: 100%;
border-bottom: none;
border-left: none;
border-right: none;
margin-bottom: 20px;
}
/* Main Information Style */
.left{
float: left;
width: 25%;
}
.right{
float: left;
width: 75%;
}

.section-hr{
margin: 20px auto;
border: #777 solid 1px;
width: 100%;
border-bottom: none;
border-left: none;
border-right: none;
}

.left-icon{
float: left;
margin-top: 1px;
margin-right: 10px;
padding: 5px;
border: #777 solid 2px;
border-radius: 50%;
background-color: powderblue;

}
.left-text{
float: left;
}

.right h5{
float: right;
color: black;
}
.right h3{
float: left;
color: black;
}
.right h6{
color: royalblue;
margin-top: 4px;
}
.description{
float: left;
text-align: justify;
}

.des{
float: left;
margin-top: 5px;
}

.skill-1{
margin-right: 15px;
}
.skill-2{
margin-left: 15px;
}
.skill-3{
margin-left: 15px;
}

td{
text-align: justify;
font-size: 15px;
font-family: georgia;
}

.right table tr td i{
border: black solid 1px;
border-radius: 50%;
background-color: skyblue;
margin: 5px;
padding: 5px;
}
.qualification .institution-name{
float: left;
margin: 5px;
padding: 5px;
}
.qualification .result{
float: left;
margin: 5px;
padding: 5px;
}

4. OUTPUT
5. ANALYSIS AND DISCUSSION

In this CV design I break the CV in different div’s like whole CV in one div
“container” and in container div there is <header> and <main> tag. In header there
two div header-contact and header-text. In <main> there are five <section> and
every section two div “left and right”. The use div and section is to ease the page
layout. We use CSS float property in page layout. So from this CV implementation
we learn many things like page layout, CSS styling etc. We have to improve more
to build more advance development.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy