[Back] <!DOCTYPE html>
<html>
<head>
<title>Portfolio FIKHRI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Sidebar Styles */
.w3-sidebar {
width: 120px;
background: #222;
position: fixed;
height: 100%;
top: 0;
left: 0;
}
/* Page Content Styles */
#main {
margin-left: 120px;
padding: 20px;
}
/* Hide sidebar on small screens */
@media only screen and (max-width: 600px) {
.w3-sidebar {
width: 100%;
height: auto;
position: relative;
}
#main {
margin-left: 0;
padding: 15px;
}
.w3-sidebar img { width: 50%; }
.w3-sidebar .w3-bar-item {
text-align: center;
padding: 10px;
}
}
/* Responsive Table */
@media only screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
width: 100%;
}
thead tr {
display: none;
}
tr {
border: 1px solid #ddd;
margin-bottom: 5px;
display: flex;
flex-direction: column;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
position: relative;
}
td:before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
position: absolute;
left: 0;
top: 0;
background: #222;
color: #fff;
width: 100%;
padding: 5px;
}
}
</style>
</head>
<body class="w3-black">
<!-- Icon Bar (Sidebar - hidden on small screens) -->
<nav class="w3-sidebar w3-bar-block w3-small w3-hide-small w3-center">
<!-- Avatar image in top left corner -->
<a href="index.html" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-home w3-xxlarge"></i>
<p>HOME</p>
</a>
<a href="about.html" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-user w3-xxlarge"></i>
<p>ABOUT</p>
</a>
<a href="photos.html" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-eye w3-xxlarge"></i>
<p>ACTIVITIES</p>
</a>
<a href="contact.html" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-envelope w3-xxlarge"></i>
<p>CONTACT</p>
</a>
<a href="portfolio.html" class="w3-bar-item w3-button w3-padding-large w3-hover-black">
<i class="fa fa-briefcase w3-xxlarge"></i>
<p>PORTFOLIO</p>
</a>
</nav>
<!-- Navbar on small screens (Hidden on medium and large screens) -->
<div class="w3-top w3-hide-large w3-hide-medium" id="myNavbar">
<div class="w3-bar w3-black w3-opacity w3-hover-opacity-off w3-center w3-small">
<a href="index.html" class="w3-bar-item w3-button" style="width:15% !important">HOME</a>
<a href="about.html" class="w3-bar-item w3-button" style="width:16% !important">ABOUT</a>
<a href="photos.html" class="w3-bar-item w3-button" style="width:23% !important">ACTIVITIES</a>
<a href="contact.html" class="w3-bar-item w3-button" style="width:20% !important">CONTACT</a>
<a href="portfolio.html" class="w3-bar-item w3-button" style="width:23% !important">PORTFOLIO</a>
</div>
</div>
<div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about">
<h2 class="w3-text-light-grey">Biodata</h2>
<hr style="width:13%" class="w3-opacity">
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="NAME"><b class="w3-text-light-grey">NAME </b></td>
<td>: AHMAD FIKHRI BIN ZAINUDIN.</td>
</tr>
<tr>
<td data-label="SIBLINGS"><b class="w3-text-light-grey">SIBLINGS </b></td>
<td>: 4 Siblings and the 4th Son.</td>
</tr>
<tr>
<td data-label="ACADEMIC"><b class="w3-text-light-grey">ACADEMIC </b></td>
<td>: Bachelor Degree in Computer Science (Internet Computing) with Honors.</td>
</tr>
<tr>
<td data-label="ACADEMIC"></td>
<td>: Diploma in Information Technology (Digital Technology).</td>
</tr>
<tr>
<td data-label="STUDIES"><b class="w3-text-light-grey">STUDIES </b></td>
<td>: Universiti Sultan Zainal Abidin (Degree).</td>
</tr>
<tr>
<td data-label="STUDIES"></td>
<td>: Politeknik Metro Tasek Gelugor (Diploma).</td>
</tr>
<tr>
<td data-label="HOBBY"><b class="w3-text-light-grey">HOBBY </b></td>
<td>: Badminton, Hiking, Traveling.</td>
</tr>
<tr>
<td data-label="STATE"><b class="w3-text-light-grey">STATE </b></td>
<td>: Seremban, Negeri Sembilan.</td>
</tr>
</tbody>
</table>
<br>
<h3 class="w3-padding-16 w3-text-light-grey">My Hobbies</h3>
<hr style="width:15%" class="w3-opacity"><br>
<p class="w3-wide">Photography</p><br>
<div class="w3-white">
<div class="w3-dark-grey" style="height:28px;width:50%"></div>
</div><br>
<p class="w3-wide">Web Design</p><br>
<div class="w3-white">
<div class="w3-dark-grey" style="height:28px;width:65%"></div>
</div><br>
<p class="w3-wide">Sportmanship</p><br>
<div class="w3-white">
<div class="w3-dark-grey" style="height:28px;width:80%"></div>
</div><br>
<p class="w3-wide">Travel</p><br>
<div class="w3-white">
<div class="w3-dark-grey" style="height:28px;width:75%"></div>
</div><br>
</div>
</body>
</html>