Resume or Curicullum Vitae in HTML and CSS by Visual Studio Code


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 {
        height200px;
        background-colorred/* For browsers that do not support gradients */
        background-imagelinear-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-imageurl("image/sky.jpg");
        }
        </style>  
 .div1 {
floatcenter;
width100px;
height50px;
margin10px;
border3px solid #73AD21;
}

.div2 {
border1px solid red;
}

.div3 {
floatleft;
width100px;
height50px;
margin10px;
border3px solid #73AD21;
}

.fa {
  padding20px;
  font-size30px;
  width50px;
  text-aligncenter;
  text-decorationnone;
  margin5px 2px;
}

.fa:hover {
    opacity0.7;
}

.fa-facebook {
  background#3B5998;
  colorwhite;
}

.fa-twitter {
  background#55ACEE;
  colorwhite;
}

.fa-google {
  background#dd4b39;
  colorwhite;
}

.fa-youtube {
  background#bb0000;
  colorwhite;
}

.fa-instagram {
  background#125688;
  colorwhite;
}


.div4 {
border1px solid black;
clearleft;
}

.grid-container {
    displaygrid;
    grid-template-columnsauto auto auto;
    background-color#2196F3;
    padding10px;
  }
  .grid-item {
    background-colorrgba(2552552550.8);
    border1px solid rgba(0000.8);
    padding20px;
    font-size30px;
    text-aligncenter;
  }

  bodyhtml {
    height100%;
    margin0;
    font-familyArialHelveticasans-serif;
  }
  
  .hero-image {
    background-imagelinear-gradient(rgba(0000.5), rgba(0000.5)), url("header.jpg");
    height50%;
    background-positioncenter;
    background-repeatno-repeat;
    background-sizecover;
    positionrelative;
  }
  
  .hero-text {
    text-aligncenter;
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%-50%);
    colorblack;
  }
  
  .hero-text button {
    bordernone;
    outline0;
    displayinline-block;
    padding10px 25px;
    colorblack;
    background-color#ddd;
    text-aligncenter;
    cursorpointer;
  }
  
  .hero-text button:hover {
    background-color#555;
    colorwhite;
  }

  .container {
    positionrelative;
    text-aligncenter;
    colorwhite;
  }
  
  .bottom-left {
    positionabsolute;
    bottom8px;
    left16px;
  }
  
  .top-left {
    positionabsolute;
    top8px;
    left16px;
  }
  
  .top-right {
    positionabsolute;
    top8px;
    right16px;
  }
  
  .bottom-right {
    positionabsolute;
    bottom8px;
    right16px;
  }
  
  .centered {
    positionabsolute;
    top50%;
    left50%;
    transformtranslate(-50%-50%);
  }

Output



Good Luck

Post a Comment

1 Comments

  1. Assalamualaikum sisTuan Khaidir, Jemput sertai giveaway mac dengan 16 hadiah wang tunai terkumpul RM900.

    Sangat mudah untuk sertai. 5 minit dah boleh setel. KLIK SINI UNTUK SERTAI

    Jemput meriahkan ya. Kalau sambutan menggalakkan, boleh buat tiap tiap bulan.

    ReplyDelete