Practical : 5
Subject : Web Technology
Aim : Write XHTML to Generate Structure like Resume with All Required Details & Candidate Photo.
Source Code :
//File.html
<!DOCTYPE html>
<html>
<head>
<title>Pratik Bohani</title>
<meta name="viewport"
content="width=device-width"/>
<meta name="description"
content="The Curriculum Vitae of Joe Bloggs."/>
<meta charset="UTF-8">
<link type="text/css"
rel="stylesheet" href="style.css">
<link
href='http://fonts.googleapis.com/css?family=Rokkitt:400,700|Lato:400,300'
rel='stylesheet' type='text/css'>
</head>
<body id="top">
<div id="cv"
class="instaFade">
<div
class="mainDetails">
<div
id="headshot" class="quickFade">
<img
src="headshot.jpg" alt="" />
</div>
<div
id="name">
<h1
class="quickFade delayTwo">Pratik Boghani</h1>
<h2
class="quickFade delayThree">Web Developer</h2>
</div>
<div
id="contactDetails" class="quickFade delayFour">
<ul>
<li>email:
pratikboghani@yahoo.com</li>
<li>mobile:
8155858204 </li>
</ul>
</div>
<div
class="clear"></div>
</div>
<div
id="mainArea" class="quickFade delayFive">
<section>
<div
class="sectionTitle">
<h1>Personal
Profile</h1>
</div>
<div
class="sectionContent">
<ul
class="keySkills">
<li>Full
Name :</li>
<li>Web
:</li>
<li>Instagram
:</li>
<li>Pratik
P Boghani</li>
<li>www.pratikboghani.com</li>
<li>mr.pratikboghani</li>
</ul>
</div>
<div
class="clear"></div>
</section>
<section>
<div
class="sectionTitle">
<h1>Work
Experience</h1>
</div>
<div
class="sectionContent">
<article>
<h2>google</h2>
<p
class="subDetails">April 2018 - Present</p>
</article>
<article>
<h2>atmoon</h2>
<p
class="subDetails">Janruary 2017 - March 2018</p>
</article>
<article>
<h2>andromedatech</h2>
<p
class="subDetails">October 2014 - December 2016</p>
</article>
</div>
<div
class="clear"></div>
</section>
<section>
<div
class="sectionTitle">
<h1>Key
Skills</h1>
</div>
<div
class="sectionContent">
<ul
class="keySkills">
<li>XHTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
<li>PYTHON</li>
<li>DJANGO</li>
<li>.NET</li>
<li>JAVA</li>
<li>MySQL</li>
</ul>
</div>
<div
class="clear"></div>
</section>
<section>
<div
class="sectionTitle">
<h1>Education</h1>
</div>
<div
class="sectionContent">
<article>
<h2>IIT(surat)</h2>
<p
class="subDetails">ME computer</p>
</article>
<article>
<h2>S.S.
Agrawal Eng. & Tech. / GTU</h2>
<p
class="subDetails">BE computer</p>
</article>
</div>
<div
class="clear"></div>
</section>
</div>
</div>
</body>
</html>
//Style.css
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{
border:0; font:inherit; font-size:100%;
margin:0; padding:0; vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{
display:block;
}
html, body {
background: #181818; font-family: 'Lato',
helvetica, arial, sans-serif; font-size: 16px; color: #222;}
.clear {clear: both;}
#cv {
width:
90%;
max-width:
800px;
background:
#f3f3f3;
margin:
30px auto;
}
.mainDetails {
padding:
25px 35px;
border-bottom:
2px solid #cf8a05;
background:
#ededed;
}
#name h1 {
font-size:
2.5em;
font-weight:
700;
font-family:
'Rokkitt', Helvetica, Arial, sans-serif;
margin-bottom:
-6px;
}
#name h2 {
font-size:
2em;
margin-left:
2px;
font-family:
'Rokkitt', Helvetica, Arial, sans-serif;
}
#mainArea {
padding:
0 40px;
}
#headshot {
width:
12.5%;
float:
left;
margin-right:
30px;
}
#headshot img {
width:
120%;
height:
auto;
-webkit-border-radius:
50px;
border-radius:
50px;
}
#contactDetails {
float:
right;
}
section {
border-top:
1px solid #dedede;
padding:
20px 0 0;
}
section:first-child {
border-top:
0;
}
section:last-child {
padding:
20px 0 10px;
}
.sectionTitle {
float:
left;
width:
25%;
}
.sectionContent {
float:
right;
width:
72.5%;
}
.sectionTitle h1 {
font-family:
'Rokkitt', Helvetica, Arial, sans-serif;
font-style:
italic;
font-size:
1.5em;
color:
#cf8a05;
}
.sectionContent h2 {
font-family:
'Rokkitt', Helvetica, Arial, sans-serif;
font-size:
1.5em;
margin-bottom:
-2px;
}
.subDetails {
font-size:
0.8em;
font-style:
italic;
margin-bottom:
3px;
}
.keySkills {
list-style-type:
none;
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
margin-bottom:
20px;
font-size:
1em;
color:
#444;
}
Output :
0 comments:
Post a Comment