Scribd
Upload
23 views6 pages

1 Program

Uploaded by

Thanges Waran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views6 pages

1 Program

Uploaded by

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

CCS370-UI- Uxlab

EX.NO.1 DESIGN A RESPONSIVE LAYOUT FOR AN SOCIETAL APPLICATION-RESUME


BUILDING

AIM:

To design responsive layout for a societal appplication for resume building uisng HTML and CSS

ALGORITHM:

1. Open a notepad and type index.html code to get the resume home page

2. Open a notepad and type styles.css to set the properties for the resume page

3. Using the viewport metatag the webpage is made responsive to fit the screen size

4. Save the necessay image along with index,styles in a single folder

5. Display the output by opening in a web browser using desktop view and mobile view by selecting
● More tools->developer tools ->toggle device to see the responsive output in google chrome
● By selecting More tools->responsive design mode in Mozilla Firefox
● By selecting Settings->F12 Developer Tools->Document mode ,change mode and see
the responsiveness of the webpage

SOURCE CODE:

index.html:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<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>Responsive Resume website using html css</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="img-area">
<img src="image.jpg" alt="candiateimage">
</div>
<h1>UI-UXLAB</h1>
<h3>Full-Stack Web Developer</h3>
</div>
<div class="main">
CCS3701UI/UX LAB
<div class="left">
<h2>Personal Information</h2>
<p><strong>Name:</strong> UI-UXLAB</p>
<p><strong>Age:</strong> 30</p>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> 000 000 0000</p>
<h2>Skills</h2>
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
<li>SQL</li>
</ul>
<h2>Education</h2>
<h3>B.Sc in Computer Science</h3>
<p>University of XYZ, 2014-2018</p> <br>
<h3>M.Sc in Computer Science</h3>
<p>University of XYZ, 2019-2020</p>
</div>
<div class="right">
<h2>Work Experience</h2>
<h3>XYZ Company</h3>
<p><strong>Position:</strong> Software Developer</p>
<p><strong>Duration:</strong> 2018-2022</p>
<ul>
<li>Developed and maintained web applications using React, Node.js, and SQL</li>
<li>Implemented responsive design using CSS flexbox and media queries</li>
<li>Collaborated with cross-functional teams to deliver high-quality software products</li>
</ul> <br>
<h3>ABC Company</h3>
<p><strong>Position:</strong> Web Developer</p>
<p><strong>Duration:</strong> 2016-2018</p>
<ul>
<li>Created and maintained websites using HTML, CSS, and JavaScript</li>
<li>Optimized website performance and user experience using best practices</li>
<li>Worked with clients to understand their needs and deliver custom solutions</li>
</ul>
</div>
</div>
</div>

</body>
</html>
styles.css

*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
body
{ background: #00b6c4;

}
.container {
background:
#f5f5f5; max-width:
800px; margin: 60px
auto; height:
1250px; padding:
20px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.header {
text-align: center;
}
.header h1 {
margin-bottom: 10px;
}
.header h3 {
text-transform: uppercase;
font-size: 15px;
font-weight: 500;
}
.img-area {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 25px auto;
border: 15px groove deepskyblue;
}
.img-area img {
width: 100%;
}
.main
{ display: flex;
flex-wrap: wrap;

}
.left {

CCS3703UI/UX LAB
flex: 1;
padding: 30px;
}
.left p {
line-height: 2;
}
.left ul li {
line-height: 2;
}
h2 {
background: #00b6c4;
padding: 15px;
color: #fff;
margin: 30px
0; font-size:
20px;
} border-radius: 0 50px 50px 0;
.right {

flex: 1;
} padding: 30px;
.right h3 {
margin-bottom: 15px;
}
.right p {
line-height: 2.9;
}
.right ul li {
line-height: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.container {
width: 95%;
height: auto;
}
h2 {
font-size: 18px;
}
}
@media screen and (max-width: 600px) {
.main {
flex-direction: column;
}
.left, .right {
flex: none;
width: 100%;
}
.container {
width: 95%;
height: auto;
}
h2 {
font-size: 15px;
}
}

OUTPUT: NOTE :USE GOOLGE CHROME

RESUME DISPLAY IN WEB LAYOUT


RESUME DISPLAY IN RESPONSIVE LAYOUT

RESULT:

Thus the responsive layout for a societal appplication for resume building uisng HTML and CSS has been
designed successfully

You might also like