Simple CV Using HTML and CSS .... About Me Example

HTML:-

---

<div class="bod">

          <div class="pro">

                 <img src="a.jpg" class="img1">

          </div>

<div class="intro">

   <p class="p1">Hafiz Muhammad Usman Siddique</p>

    <p class="p2">"I am usman.A little boy with big attributes.An empty pocketed with big                ideas in mind.A courage to do big thing but did'nt do any thing yet .lol"</p>

</div>

<div class="second">

<table class="he"  align="center" cellspacing="31px">

<tr><th colspan="3">Skills<hr></th></tr>

<tr>

<td>CSS</td>

<td>HTML</td>

<td>PHP</td></tr>

</table>

<table border="1" align="center" >

<tr><th colspan="2">EDUCATION</th><th colspan="2">INTERNSHIP</th><th colspan="2">PROJECTS</th><th colspan="2">CONTACT</th></tr>

<tr><th rowspan="2">School:</th><td>F G Public School</td>

<th rowspan="2">Ptcl:</th><td>F G Public School</td>

<th rowspan="2">Web:</th><td>F G Public School</td>

<th rowspan="2">Email:</th><td>m7u786@gmail.com</td></tr>

<tr><td>2001-2010</td><td>2001-2010</td></tr>

<tr><th rowspan="2">Collage:</th><td>HITEC Collage For Boys</td>

<th rowspan="2">Lrims:</th><td>F G Public School</td>

<th rowspan="2">Android:</th><td>F G Public School</td>

<th rowspan="2">Mob No:</th><td>03075230948</td></tr>

<tr><td>2011-2012</td></tr>

<tr><th rowspan="2">University:</th><td>Comsats Wah Campus</td>

<th rowspan="2">Codingboths:</th><td>F G Public School</td>

<th rowspan="2">Desktop:</th><td>F G Public School</td>

<th rowspan="2">Address:</th><td>HIT Taxila Cantt,Rawalpindi</td></tr>

<tr><td>2013-2017</td></tr>

<tr><th colspan="2"></th><th colspan="2">Description</th><th colspan="2">Description</th><th colspan="2">Description</th></tr>

<tr><th colspan="2"><pre>i

e-resizee

e</pre></th><th colspan="2"></th><th colspan="2"></th><th colspan="2">.</th></tr>

</div>

</div>

---

CSS:-

---

<style>
.he td{border-radius:100px;width:100px;height:100px;text-align:center;border:1px solid ;}
.he {padding:15px;}
.p1{font-weight:bold;font-size:20px;text-align:center;}
.pro{padding-left:43%;padding-top:5%;background-color: #aff;}
.intro{background-color:#eee;}
.second{background-color:#ee9;}
.img1{width: 200px;border-radius: 100px;height: 200px; }
.p2{text-align:center;}body{background-color:whitesmoke;}
.bod{background-color:#eee}
</style>

XML - Display XML in browser in Graphical Form Using CSS

XML stands for EXtensible Markup Language.

XML was designed to store and transport data.

XML was designed to be both human- and machine-readable.

---

---

XML Document:-

---

<?xml-stylesheet type="text/css" href="xmlstyle.css"?>

<personal_info>

Thats My Personal Information:- 

<self_intro>

It Show Only Self introduction:-

<name>Name: Hafiz Muhammad Usman Siddique</name>

<mob_no>Mob No: 03075230948</mob_no>

</self_intro>

<education>

It show some Educational introduction:-

<reg_no>Reg No: FA13-BSE-080</reg_no>

<university>University : Comsats Wah Campus</university>

</education>

</personal_info>

---

CSS File:-

---

personal_info{color:red;font-weight: bold;border: 1px solid black;width: 24%;padding: 20px;margin: 20px;text-decoration: underline;

}

self_intro{color:green;display: block;padding: 10px;text-decoration: none;

}

name{color:blue;display: block;padding-left: 20px;

}

mob_no{color:orange;display: block;padding-left: 20px;

}

education{color:brown;display: block;padding: 10px;

}

reg_no{color:pink;display: block;padding-left: 20px;

}

university{color:black;padding-left: 20px;

}