HTML file
<html>
<head>
<title>Curicullum Vitae</title>
<link rel="stylesheet" type="text/css" href="resume.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="grad1"></div>
<h1>Curicullum Vitae</h1>
<
<div class="container">
<img src="image/header.jpg" alt="Snow" style="width:70%;">
<div class="hero-text">
<h2 style="font-size:50px">I am Ahmad Khaidir Amir</h2>
<h3>And I'm a Bioinfromatician</h3>
<button>Hire me</button>
</div>
</div>
<h2>Personal Info</h2>
<div class="div1">
<center><img src="image\gambarresume.jpg" style="width:304px;height:228px;"></imgsrc></center> </div>
<center>
<div class="div2"><b>Computer Science Student</b></div></center>
<br><br>
<p>Name:<b><font face=“Arial” color=“#0000FF” size=+1>Ahmad Khaidir Amir bin Rodzman</font></b></p>
<p>Age:<b>21</b></p>
<p>DateOfBirth:<b>29 September 1999</b></p>
<p>Nationality:<b>Malaysian</b></p>
<p>Race/Religion:<b>Malay/Muslim</b></p>
<p>Marrital Status:<b>Single</b></p>
<p>Health:<b>Physically and Mentally Excellent</b></p>
<hr/>
<div class="div2"> <center><h2>Contact Info</h2></center></div>
<p>Address:<b>99 Jalan Wakaf Islam <br><ul>Telok Panglima Garang</ul><br><ul>42500 Kuala Langat</ul><br>
<ul>Selangor Darul Ehsan</ul> </b></p>
<p>Phone No:<b>011-12808959</b></p>
<p>
Email: <a href = "mailto:khaidirkhaizuki@gmail.com">khaidirkhaizuki@gmail.com" . </a><br>click the link and your default
email client will open an email message and address it to us. </p>
<p>Website:<a href="http://khaidirkhaizuki.blogspot.com/"> http://khaidirkhaizuki.blogspot.com/</a></p>
<hr/>
<div class="div2"> <center><h2>Educational Background</h2></center></div>
<h2>Educational Background</h2>
<h3>1.Tertiary Education</h3>
<u><b>Bachelor Degree</b></u>
<p>Field Of Study:<b>Bsc Bioinformatics</b></p>
<p>University:<b>Universiti Teknologi Malaysia</b></p>
<p>Location:<b>Skudai,Johor Bharu</b></p>
<p>Graduation Date:<b>21/05/2022</b></p>
<h3>2.Secondary Education</h3>
<u><b>Sijil Pelajaran Malaysia</b></u>
<p>Grade:<b>7A1B1C</b></p>
<hr/>
<div class="div2"> <center><h2>Skills</h2></center></div>
<form action="">
<h4> My ability</H4>
<INPUT TYPE="CHECKBOX" NAME="chk1" value="c" CHECKED>Java **<br>
<INPUT TYPE="CHECKBOX" NAME="chk2" value="f" CHECKED>C++ *<br>
<INPUT TYPE="CHECKBOX" NAME="chk3" value="s" CHECKED>SQL ***<br>
<INPUT TYPE="CHECKBOX" NAME="chk4" value="h" CHECKED>HTML,CSS,PHP ***<br>
<INPUT TYPE="CHECKBOX" NAME="chk5" value="o" CHECKED>All Microsoft Office *****<br>
<INPUT TYPE="CHECKBOX" NAME="chk6" value="j" CHECKED>Adobe Photoshop/Illustrator/PremierePro ***** <br>
<INPUT TYPE="CHECKBOX" NAME="chk7" value="l" CHECKED>Sony Vegas Pro ***** <br>
</form>
<hr/>
<div class="div2"> <center><h2>Work History</h2></center></div>
<u><i>June 2019 - August 2019 </i><b>Barista (Starbucks) </b></u>
<ul>
<li>Learn to make coffee and beverages</li>
<li>Learn to serve customers</li>
<li>Learn how to make sales</li>
<li>Learn as a leader to build a teamwork</li>
</ul>
<u><i>July 2018 - August 2018 </i><b>Store Manager (99 Speedmart) </b></u>
<ul>
<li>Learn how to manages goods and items</li>
<li>Learn how to manage database of items</li>
<li>Learn how to check and update items</li>
<li>Learn more about how retail business work</li>
</ul>
<hr/>
<div class="div2"> <center><h2>Achievement</h2></center></div>
<table border="1">
<tr>
<th>Activity</th><th>Stage</th><th>Award</th>
</tr>
<tr>
<td>Pertandingan Blog Pengguna Kebangsaan</td>
<td>National</td>
<td>1st Place </td>
</tr>
<td>DKLS Essay Competition</td>
<td>International</td>
<td>Participation </td>
<tr>
<td>Pertandingan Pantun Peringkat Negeri</td>
<td>State</td>
<td>Participation </td>
<tr>
<tr>
<td>Pertandingan Bola Keranjang Peringkat Daerah</td>
<td>Province</td>
<td>Participation </td>
<tr>
<tr>
<td>Pertandingan Nasyid Peringkat Negeri Terbuka</td>
<td>State</td>
<td>Participation </td>
<tr>
</table>
<hr/>
<div class="div2"><center><h2>Personal Preference</h2></center> </div>
<
<form action="">
<h4> <u>Hobby</u></H4>
<INPUT TYPE="RADIO" NAME="creditcard" VALUE="pgs"checked>Play Guitar and Singing<br>
<INPUT TYPE="RADIO" NAME="creditcard" VALUE="ve"checked>Video Editing <br>
<INPUT TYPE="RADIO" NAME="creditcard" VALUE="lnl" checked>Learning New Language<br>
<INPUT TYPE="RADIO" NAME="creditcard" VALUE="rb" checked>Reading Book<br>
<INPUT TYPE="RADIO" NAME="creditcard" VALUE="t" checked>Travel<br>
</form>
<div class="grid-container">
<div class="grid-item">
<img src="image\grid 4.jpg" style="width:304px;height:228px;"></imgsrc></div>
<div class="grid-item"><img src="image\grid 5.jpg" style="width:304px;height:228px;"></div>
<div class="grid-item"><img src="image\grid 6.jpg" style="width:304px;height:228px;"></div>
</div>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
</html>
CSS file
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(blue,white); /* Standard syntax (must be last) */
}
h1 {text-align:center;font-family:Georgia;color:#ff0000;}
p {text-align:center;font-family:Arial;color:#00008b;}
ul {text-align:center;font-family:Arial;color:#00008b;}
body {
background-image: url("image/sky.jpg");
}
</style>
.div1 {
float: center;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.div4 {
border: 1px solid black;
clear: left;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("header.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
}
.hero-text button:hover {
background-color: #555;
color: white;
}
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Output
Good Luck
1 Comments
Assalamualaikum sisTuan Khaidir, Jemput sertai giveaway mac dengan 16 hadiah wang tunai terkumpul RM900.
ReplyDeleteSangat mudah untuk sertai. 5 minit dah boleh setel. KLIK SINI UNTUK SERTAI
Jemput meriahkan ya. Kalau sambutan menggalakkan, boleh buat tiap tiap bulan.