Our next example are using HTML, link with Cascading style sheet known as CSS..



Here are the HTML CODE..

 <!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title>My Personal Profile</title>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<link rel="stylesheet" type="text/css" href="style.css">

<style>.art-content .art-postcontent-0 .layout-item-0 { margin-top: 10px; margin-bottom: 10px;  }
.art-content .art-postcontent-0 .layout-item-1 { border-spacing: 10px 0px; border-collapse: separate;  }
.art-content .art-postcontent-0 .layout-item-2 { color: #737373; background: #2F89B6; }
.art-content .art-postcontent-0 .layout-item-3 { color: #737373; background: #A04661; }
.art-content .art-postcontent-0 .layout-item-4 { color: #737373; background: #5B9121; }
.art-content .art-postcontent-0 .layout-item-5 { color: #737373; background: #EB9500; }

.ie7 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
.ie6 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
</style>
</head>

<body>

<div id="art-main">
<header class="art-header">
<div class="art-shapes">
<div class="art-object0"><img src="../WWW/Lab Exercise/images/prof pict.jpg" width="203" height="253">
</div>
</div>

<h1 class="art-headline">
My Profile</h1>
<h2 class="art-slogan">for STIV3013</h2>
</header>

<div class="art-sheet clearfix">
<div class="art-layout-wrapper">
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-content">

<div class="art-postcontent art-postcontent-0 clearfix">
<div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-2" style="width: 40%">
<p style="text-align: center;"></p>
<h4>NAME</h4></div>

<div class="art-layout-cell layout-item-3" style="width: 60%" >
<p style="text-align: center;"></p>
<h3>Ernie Sakinah binti Norhatta</h3></div>
</div>
</div>
</div>

<div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-4" style="width: 40%" >
<p style="text-align: center;"></p>
<h4>STUDENT ID</h4></div>

<div class="art-layout-cell layout-item-5" style="width: 60%" >
<p style="text-align: center;"></p>
<h3>238605</h3></div>
</div>
</div>
</div>

<div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-3" style="width: 40%" >
<p style="text-align: center;"></p>
<h4>SEMESTER</h4></div>

<div class="art-layout-cell layout-item-2" style="width: 60%" >
<p style="text-align: center;"></p>
<h3>A171 Semester 2017/2018</h3></div>
</div>
</div>
</div>

<div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-5" style="width: 40%" >
<p style="text-align: center;"></p>
<h4>GENDER</h4></div>

<div class="art-layout-cell layout-item-4" style="width: 60%" >
<p style="text-align: center;"></p>
<h3>Female</h3></div>
</div>
</div>
</div>

<div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-2" style="width: 40%" >
<p style="text-align: center;"></p>
<h4>CONTACT NUMBER</h4></div>

<div class="art-layout-cell layout-item-3" style="width: 60%" >
<p style="text-align: center;"></p>
<h3>012-594 0932</h3></div>
</div>
</div>
</div>

<div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-4" style="width: 40%" >
<p style="text-align: center;"></p>
<h4>BEST FRIEND'S NAME</h4></div>

<div class="art-layout-cell layout-item-5" style="width: 60%" >
<p style="text-align: center;"></p>
<h3>Sharmalla A/P Perisamy</h3></div>
</div>
</div>
</div>

<div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-3" style="width: 40%" >
<p style="text-align: center;"></p>
<h4>BEST FRIEND'S CONTACT NUMBER</h4></div>

<div class="art-layout-cell layout-item-2" style="width: 60%" >
<p style="text-align: center;"></p>
<h3>016-532 5256</h3></div>
</div>
</div>
</div>

<div class="art-content-layout-wrapper layout-item-0">
<div class="art-content-layout layout-item-1">
<div class="art-content-layout-row">
<div class="art-layout-cell layout-item-6" style="width: 100%" >
<h1><a href="/" class="art-button">DONE</a></h1></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<footer class="art-footer">
<div class="art-footer-inner">
<p>Copyright © 2017, STIV3013 WWW Programming.</p>
</div>
</footer>
</div>
</body>
</html>



And the CSS..

#art-main
{
background:#FFFFFF url(background.jpeg) center;
background-repeat:no-repeat;
background-size:cover;
font-size:11px;
font-family:Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight:normal;
font-style:normal;
text-align:justify;
position:relative;
width:100%;
min-height:100%;
left:0;
top:0;
cursor:default;
overflow:hidden;
}

h1, h2, h3, h4, p, a
{
margin:0;
padding:0;
}

/* Reset buttons border. It's important for input and button tags.
border-collapse should be separate for shadow in IE. */

.art-button
{
border-collapse:separate;
background-origin:border-box !important;
background:#6DAF28;
background:linear-gradient(to bottom, #80CC2E 0, #5B9121 100%) no-repeat;
border:1px solid #6DAF28;
padding:0 25px;
margin:0 auto;
height:25px;
}

.art-postcontent
{
font-family:Verdana, Geneva, Arial, Helvetica, Sans-Serif;
text-align:justify;
}

.art-postcontent p
{
margin:10px 0;
}

.art-postcontent h1, .art-postcontent h2, .art-postcontent h3, .art-postcontent h4, .art-headline, .art-slogan
{
font-size:28px;
font-family:'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight:bold;
font-style:normal;
text-align:left;
}

.art-postcontent h1
{
color:#90A792;
margin:0;
font-size:22px;
font-family:'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight:bold;
font-style:normal;
text-align:center;
}

.art-postcontent h2
{
color:#79E614;
margin:20px 0 0;
font-size:18px;
font-family:'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight:bold;
font-style:normal;
text-align:left;
}

.art-postcontent h3
{
color:#FFFFFF;
margin:20px;
padding-left:15px;
padding-right:15px;
font-size:14px;
font-family:'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight:bold;
font-style:normal;
text-align:left;
}

.art-postcontent h4
{
color:#FFFFFF;
margin:20px; 
padding:0;
font-size:14px;
font-family:'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight:bold;
font-style:normal;
text-align:left;
text-shadow:1.4px 1.4px 1px rgba(23, 23, 23, 0.82);
}

header, footer, .art-sheet
{
background-origin:border-box !important;
display:block;
box-sizing:border-box;
}

html, body
{
height:100%;
}

/* 2. Prevent iOS text size adjust after orientation change, without disabling user zoom.
https://github.com/necolas/normalize.css
*/

body
{
padding:0;
margin:0;
min-width:900px;
color:#737373;
}

.art-shapes
{
position:absolute;
top:1px;
right:0;
bottom:0;
left:0;
overflow:hidden;
z-index:0;
}

.art-object0
{
display:block;
left:100%;
margin-left:-300px;
position:absolute;
top:-3px;
width:204px;
height:255px;
background-image:url(image.jpg);
background-position:0 0;
background-repeat:no-repeat;
z-index:0;
}

.art-headline
{
display:inline-block;
position:absolute;
min-width:50px;
top:71px;
left:2.6%;
margin-left:-6px !important;
line-height:100%;
transform:rotate(0deg);
z-index:101;
font-size:58px;
font-family:'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-align:left;
text-shadow:2.1px 2.1px 1px rgba(23, 23, 23, 0.3);
padding:0;
margin:0;
color:#51811D !important;
white-space:nowrap;
}

.art-slogan
{
display:inline-block;
position:absolute;
min-width:50px;
top:123px;
left:2.45%;
line-height:100%;
margin-left:-6px !important;
transform:rotate(0deg);
z-index:102;
white-space:nowrap;
font-size:48px;
font-family:'Trebuchet MS', Arial, Helvetica, Sans-Serif;
font-weight:normal;
font-style:normal;
text-align:left;
text-shadow:0.7px 0.7px 1px rgba(0, 0, 0, 0.2), 1.4px 1.4px 1px rgba(0, 0, 0, 0.2), 2.1px 2.1px 2px rgba(0, 0, 0, 0.2), 2.8px 2.8px 1px rgba(0, 0, 0, 0.2), 3.5px 3.5px 1px rgba(0, 0, 0, 0.2);
padding:0;
margin:0;
color:#82D02F !important;
}

.art-header
{
border:none;
margin:10px auto 0;
background-repeat:no-repeat;
height:250px;
position:relative;;
background-position:center top;
}

.art-sheet
{
background:#FFFFFF;
background:rgba(255, 255, 255, 0.5);
border-radius:5px;
box-shadow:0 0 3px 2px rgba(0, 0, 0, 0.07);
border:2px solid rgba(181, 197, 182, 0.5);
margin:0 auto;
position:relative;
cursor:auto;
width:700px;
z-index:auto !important;
}

.art-layout-wrapper
{
position:relative;
margin:0 auto 0 auto;
z-index:auto !important;
}

.art-content-layout
{
display:table;
width:100%;
table-layout:fixed;
}

.art-content-layout-row
{
display:table-row;
}

.art-layout-cell
{
box-sizing:border-box;
display:table-cell;
vertical-align:top;
}

/* need only for content layout in post content */
.art-postcontent .art-content-layout
{
border-collapse:collapse;
}

a.art-button, a.art-button:link, a:link.art-button:link, body a.art-button:link, a.art-button:visited, body a.art-button:visited, input.art-button, button.art-button
{
text-decoration:none;
font-size:11px;
font-family:Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-weight:normal;
font-style:normal;
text-transform:uppercase;
font-variant:normal;
position:relative;
display:inline-block;
vertical-align:middle;
white-space:nowrap;
text-align:center;
color:#FFFFFF;
margin:0 5px 0 0 !important;
overflow:visible;
cursor:pointer;
text-indent:0;
line-height:25px;
box-sizing:content-box;
}

.art-button.active, .art-button.active:hover
{
background:#53851E;
background:linear-gradient(to bottom, #68A626 0, #416818 100%) no-repeat;
border:1px solid #819C84;
padding:0 25px;
margin:0 auto;
color: #DAE2DB !important;
}

.art-button.hover, .art-button:hover
{
background:#87D237;
background:linear-gradient(to bottom, #99D855 0, #82D02F 64%, #75BB2A 100%) no-repeat;
border:1px solid #6DAF28;
padding:0 25px;
margin:0 auto;
color:#1B3404 !important;
}

.art-footer
{
margin:10px auto 0;
position:relative;
color:#808080;
font-size:11px;
font-family:Verdana, Geneva, Arial, Helvetica, Sans-Serif;
text-align:center;
padding:0;
}

.art-footer p
{
padding:0;
text-align:center;
}

.art-footer-inner
{
margin:0 auto;
width:900px;
padding:8px;
padding-right:8px;
padding-left:8px;
}

.art-content-layout .art-content
{
margin:0 auto;
}

Comments