Step 1: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Profile About Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Add styles.css -->
<link href="assets/css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="content" class="content p-0">
<div class="profile-header">
<div class="profile-header-cover"></div>
<div class="profile-header-content">
<div class="profile-header-img">
<img src="assets/image/profile-image.png" alt="" />
</div>
<div class="profile-header-info">
<h4 class="m-t-sm">SOENG SOUY</h4>
<p class="m-b-sm">UX UI + Frontend Developer</p>
<a href="#" class="btn btn-xs btn-primary mb-3">Edit Profile</a>
</div>
</div>
<ul class="profile-header-tab nav nav-tabs">
<li class="nav-item"><a href="#profile-post" class="nav-link" data-toggle="tab">POSTS</a></li>
<li class="nav-item"><a href="#profile-about" class="nav-link active show" data-toggle="tab">ABOUT</a></li>
<li class="nav-item"><a href="#profile-photos" class="nav-link" data-toggle="tab">PHOTOS</a></li>
<li class="nav-item"><a href="#profile-videos" class="nav-link" data-toggle="tab">VIDEOS</a></li>
<li class="nav-item"><a href="#profile-friends" class="nav-link" data-toggle="tab">FRIENDS</a></li>
</ul>
</div>
<div class="profile-container">
<div class="row row-space-20">
<div class="col-md-8">
<div class="tab-content p-0">
<div class="tab-pane active show" id="profile-about">
<table class="table table-profile">
<thead>
<tr>
<th colspan="2">WORK AND EDUCATION</th>
</tr>
</thead>
<tbody>
<tr>
<td class="field">Work</td>
<td class="value">
<div class="m-b-5">
<b>Bank IN PP IT (2020)</b>
<span class="text-muted">PHP Framework Programmer</span>
</div>
<div>
<b>Front-End IT (2018)</b>
<span class="text-muted">UXUI / Frontend Developer Videos Editor</span>
</div>
</td>
</tr>
<tr>
<td class="field">Education</td>
<td class="value">
<div class="m-b-5">
<b>University RUPP (2015)</b>
<span class="text-muted">Royal University of Phnom Penh</span>
</div>
<div>
<b>High School (2010)</b><br />
<span class="text-muted">N TiSata 7 Makara</span>
</div>
</td>
</tr>
<tr>
<td class="field">Skills</td>
<td class="value">
PHP, HTML5, CSS, jQuery, MYSQL, Ionic, Laravel, Phonegap, Bootstrap, Angular JS, Angular JS, Asp.net
</td>
</tr>
</tbody>
</table>
<table class="table table-profile">
<thead>
<tr>
<th colspan="2">CONTACT INFORMATION</th>
</tr>
</thead>
<tbody>
<tr>
<td class="field">Mobile Phones</td>
<td class="value">
+885 09666686371
</td>
</tr>
<tr>
<td class="field">Email</td>
<td class="value">
soengsouy@gmail.com
</td>
</tr>
<tr>
<td class="field">Facebook</td>
<td class="value">
http://facebook.com/soengsouy
</td>
</tr>
<tr>
<td class="field">Website</td>
<td class="value">
http://soengsouy.com
</td>
</tr>
<tr>
<td class="field">Address</td>
<td class="value">
110 Bvd Street, PP 900<br />
San Phnom Penh, PP 120
</td>
</tr>
</tbody>
</table>
<table class="table table-profile">
<thead>
<tr>
<th colspan="2">BASIC INFORMATION</th>
</tr>
</thead>
<tbody>
<tr>
<td class="field">Birth of Date</td>
<td class="value">
November 25, 1995
</td>
</tr>
<tr>
<td class="field">Gender</td>
<td class="value">
Male
</td>
</tr>
<tr>
<td class="field">Facebook</td>
<td class="value">
http://facebook.com/soengsouy
</td>
</tr>
<tr>
<td class="field">Website</td>
<td class="value">
http://soengsouy.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4 hidden-xs hidden-sm">
<ul class="profile-info-list">
<li class="title">PERSONAL INFORMATION</li>
<li>
<div class="field">Occupation:</div>
<div class="value">UX UI / Frontend Developer</div>
</li>
<li>
<div class="field">Skills:</div>
<div class="value">PHP, HTML5, CSS, jQuery, MYSQL, Ionic, Laravel, Phonegap, Bootstrap, Angular JS, Angular JS, Asp.net</div>
</li>
<li>
<div class="field">Birth of Date:</div>
<div class="value">1995/11/25</div>
</li>
<li>
<div class="field">Country:</div>
<div class="value">Cambodia</div>
</li>
<li>
<div class="field">Address:</div>
<div class="value">
Youtobe, Inc.<br />
110 Blvd Street, Suite 9120<br />
San Phnom Penh, PP 110
</div>
</li>
<li>
<div class="field">Phone No.:</div>
<div class="value">
(+885) 2333-7890
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Step 2: assets/css/styles.css
body {
background: #eaeaea;
margin-top: 20px;
}
.profile-info-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.friend-list,
.img-grid-list {
margin: -1px;
list-style-type: none;
}
.profile-info-list > li.title {
font-size: 0.625rem;
font-weight: 700;
color: #8a8a8f;
padding: 0 0 0.3125rem;
}
.profile-info-list > li + li.title {
padding-top: 1.5625rem;
}
.profile-info-list > li {
padding: 0.625rem 0;
}
.profile-info-list > li .field {
font-weight: 700;
}
.profile-info-list > li .value {
color: #666;
}
.profile-info-list > li.img-list a {
display: inline-block;
}
.profile-info-list > li.img-list a img {
max-width: 2.25rem;
-webkit-border-radius: 2.5rem;
-moz-border-radius: 2.5rem;
border-radius: 2.5rem;
}
.coming-soon-cover img,
.email-detail-attachment .email-attachment .document-file img,
.email-sender-img img,
.friend-list .friend-img img,
.profile-header-img img {
max-width: 100%;
}
.table.table-profile th {
border: none;
color: #000;
padding-bottom: 0.3125rem;
padding-top: 0;
}
.table.table-profile td {
border-color: #c8c7cc;
}
.table.table-profile tbody + thead > tr > th {
padding-top: 1.5625rem;
}
.table.table-profile .field {
color: #666;
font-weight: 600;
}
.table.table-profile .value {
color: #000;
}
.profile-header-info h4 {
font-size: 1.5rem;
color: #343a40;
}
.profile-header-info .m-b-sm {
font-size: 1.125rem;
color: #757575;
}
Step 3: Images
-
Make sure to place the images at the specified locations:
-
assets/image/profile-image.png
-
How it works
-
This setup includes Bootstrap 4 for layout and design, and the page is structured to include the profile header, an "about" section, and various personal and work details, including the use of tables for better organization.
