Scribd
Upload
33 views7 pages

FSWD Lab Manual-1-7

Uploaded by

vinothani2004
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
33 views7 pages

FSWD Lab Manual-1-7

Uploaded by

vinothani2004
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/ 7

EX.

NO : 1 DEVELOP A PORTFOLIO WEBSITE FOR YOURSELF WHICH


GIVES DETAIL ABOUT YOURSELF FOR A POTENTIAL RECRUITER.
DATE :
AIM :

ALGORITHM :
PROGRAM :
HTML code :
<!DOCTYPE html>
<html><head> <title>Student Portfolio Website</title>
<meta charset=”utf-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<link rel=”stylesheet” href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”main-panel”>
<div class=”container”>
<h1>Portfolio</h1>
<div class=”width-66”>
<nav>
<a href=”#home”><span>Home</span>
</a>
<a href=”#about-us”><span>About me</span></a>
<a href=”#service-list”><span>My Skills</span></a>
</nav>
</div></div>
<section class=”home” id=”home”>
<div class=”container “>
<div class=”width-50”>
<div class=”banner-section”>
<br><br><br><h1>SARA </h1><br>
<h3>- I’m a passionate graphic designer from India.</h3><br>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</h4>
</div>
</div>
<div class=”width-50”>
<img
src=https://tse3.mm.bing.net/th?id=OIP.UC05Bhl3boKeRi78eQk9BAHaIn&pid=Api&P=0&
h=180>
</div></div></div></div>
</section>
<section class=”about-us” id=”about-us”>
<div class=”main-section bg-lightgrey”>
<div class=”container”>
<div class=”width-50”>
<img
src=https://tse3.mm.bing.net/th?id=OIP.UC05Bhl3boKeRi78eQk9BAHaIn&pid=Api&P=0&
h=180
class=”about-img”>
</div>
<div class=”width-50”>
<div class=”about-us”>
<h2 class=”heading-text”><span>About me</span></h2>
<h2>I am available for UI/UX Design Project</h2><br>
<p><h3>Hi, Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3></p>
<div class=”width-50 mt-20”>
<table cellspacing=”8” cellpadding=”8”>
<tr>
<th>Name:</th>
<td>Sara </td>
</tr>
<tr>
<th>Email:</th>
<td>[email protected]</td>
</tr>
<tr>
<th>Birthday:</th>
<td>26 July, 2003</td>
</tr>
<tr>
<th>Study:</th>
<td>VCTW</td>
</tr>
</table>
</div>
<div class=”width-50 mt-20”>
<table cellspacing=”8” cellpadding=”8”>
<tr>
<th>Phone:</th>
<td>9445635478</td>
</tr>
<tr>
<th>City:</th>
<td>Namakkal, Tamilnadu</td>
</tr>
</table>
</div></div></div></div></div>
</section>
<section class=”service-list” id=”service-list”>
<div class=”main-section”>
<div class=”container”>
<h2 class=”heading-text”>My Skills</h2>
<div class=”width-50”>
<div class=”service-list”>
<i class=”fa fa-chrome”></i>
<h1>Web Development</h1><br>
<p><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</h3></p>
</div></div>
<div class=”width-50”>
<div class=”service-list”>
<i class=”fa fa-apple”></i>
<h1>App Developing</h1><br>
<p><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</h3></p>
</div></div></div></div>
</section></body></html>

CSS code :
*{
Box-sizing: border-box;
Margin: 0;
Padding: 0;
Outline: 0;
Font-family: Roboto, sans-serif, arial;
}
Html, body
{
Font-size: 14px;
Font-weight: 400;
Background: #000000;
Color: #fff;
}
.container {
Width: 1100px;
Margin: 0px auto;
Display: table;
}
.width-66 {
Width: 66%;
Float: left;
}
.main-panel {
Width: 100%;
Float: left;
Padding-top: 20px;
Padding-bottom: 50px;
Height: 100vh;
}
Nav {
Float: right;
}
Nav a {
Text-decoration: none;
Font-size: 16px;
Font-weight: 500;
Margin-left: 20px;
Color: white;
}
.width-50 {
Float: left;
Width: 50%;
}
.banner-section {
Width: 100%;
Float: left;
Margin-top: 25vh;
}
.main-panel img {
Margin-top: 10%;
Width: 100%;
Margin-left: 10%;
}
.main-section {
Width: 100%;
Float: left;
Padding: 110px 0px 110px 0px;
}
.width-100 {
Width: 100%;
Float: left;
}
.mt-20 {
Margin-top: 20px;
}
.heading-text {
Width: 100%;
Float: left;
Font-size: 35px;
Text-align: center;
Margin-bottom: 50px;
Color: #ffbf35;
}
.about-img {
Width: 100%;
Padding: 0px 50px;
Margin-top: 20px;
}
.about-us {
Width: 100%;
Float: left;
Padding: 20px;
}
Table {
Width: 100%;
}
Table th, table td {
Font-size: 16px;
Text-align: left;
Padding: 5px 0px;
}
.service-list {
Padding: 40px;
Margin-top: 35px;
Background: #262626;
Border-radius: 15px;
Width: 94%;
Float: left;
}
.service-list i {
Font-size: 50px;
Color: #ffbf35;
Width: 70px;
Float: left;
}

OUTPUT:
RESULT :

You might also like