Here is our PDF file. Now i create a html file. Which name is project
In this HTML file i added only title name. If i run the file in the browser it’s show like that
Now you can see that the browser only showing wed site title which is highlighted on image.
Now i go markup the wedsite
- First Image
First Image
Second Image
Third Image
After the markup the website is looking upper image.
In this time i added CSS for good looking of website. Now i take a CSS file which is added HTML file in head tag which is highlighted. The image is give below-
Image of added style shite
Now i styling the header portion. Before the styling i style basic typography show it below
Image of typography
Image of head styling CSS file
After adding CSS on the head or basic typography. The website and head is look like upper image.
Now i styling section portion of the CSS file.
After adding CSS in section the website look like lower image
Now footer is successfully done. The website is made completed.
In this project i done a website to see its PDF file. Which is using simple HTML and CSS. In below i showing the source code of this website.
CODE OF HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> psd to heml </title>
<link rel="stylesheet" href="project0.css" />
</head>
<body>
<div class="container_full heder_bg">
<div class="fix container ">
<header>
<div class="logo">
<h1>LOgo</h1>
</div>
<div>
<nav id="nav">
<ul>
<li class="active"><a href="#">Journal</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li> </ul>
</nav>
</div>
</header>
</div>
</div>
<div class="container_full contant_wrapper_bg">
<div class="fix container">
<div class="contant_wrapper">
<div>
<section class="lt_side">
<article class="upper">
<img src="img/img1.png" alt="" />
<h2>
This is a heading.
</h2>
<p>
This is a peragra<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipop ex ea commo doconsequat, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur...
</p>
<a href="#" class="btn">
continue reading
</a>
</article>
<article class="lower">
<img src="img/img2.png" alt="" />
11 | P a g e
Chayan Chandan Das
<h2>
This is a heading.
</h2>
<p>
This is a peragra<br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipop ex ea commo doconsequat, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur...
</p>
<a href="#" class="btn">continue reading </a>
</article>
</section>
</div>
<div class="rt_side">
<aside class="as1">
<h3>About Blogin.</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br><br>
Excepteur sint occaecat sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
<aside class="as2">
<h3>Search.</h3>
<input type="text" class="search" placeholder="what are you looking for?" />
</aside>
<aside class="as3">
<h3>Stay Tuned.</h3>
<input type="email" class="email"placeholder="your email" />
<input type="submit" />
</aside>
</div>
</div>
<div class="content_button">
<a href="#" class="previous"> ← previous</a>
<a href="#" class="next" >next →</a>
</div>
</div>
</div>
<div class="container_full footer_bg">
<div class="fix container">
<div class="footer">
<footer>
<div class="footer_logo">
<a href="#">
<h1>LOGO</h1>
</a>
<p>© 2014 Blogin.com - All Rights Reserved - Find more free Templates at Pixelhint.com</p>
<div class="icon">
12 | P a g e
Chayan Chandan Das
<ul>
<li class="fb"><a href=""></a></li>
<li class="twit"><a href=""></a></li>
<li class="be"><a href=""></a></li>
<li class="d"><a href=""></a></li> </ul>
</div>
</div>
</footer>
</div>
</div>
</div>
<!--
<> class="container_full">
<div class="fix container">
</div>
</div>
-->
</body>
</html>
13 | P a g e
Chayan Chandan Das
CODE OF CSS FILE
/* thyepography*/
*{margin:0; padding:0;}
body{
padding:;
}
li{
list-style-type:none;
}
a{
text-decoration:none;
}
.fix{
overflow:hidden;
}
.container_full{
width:100%;
}
.container{
width:980px;
margin:0 auto;
display:bolck;
}
.heder_bg{
background-color:#292929;
/*height:118px;*/
}
/* css for header*/
.logo{
float:left;
padding:45px 0px 54px 0px;
}
.logo h1{
font-weight:bold;
font-size:40px;
color:#ffffff;
font-family:lato;
}
#nav{
float:right;
}
#nav li{
float:left;
border-right:1px solid #1d1d1d;
}
#nav li a{
color:#ffffff;
14 | P a g e
Chayan Chandan Das
padding-top:30px;
padding:64px 30px;
display:block;
font-size:16px;
font-weight:bold;
border-bottom:6px solid #1e1e1e;
}
#nav li a:hover{
border-bottom:6px solid #58c93a;
color:#58c93a;
}
#nav li.active a{
border-bottom:6px solid #58c93a;
color:#58c93a;
}
/* css of section portion*/
.contant_wrapper{
padding-top:10px;
border-right:1px solid #e1e0e0;
border-left:1px solid #e1e0e0;
overflow:hidden;
border-bottom:1px solid #e1e0e0;
}
.lt_side{
float:left;
width:620px;
margin-right:70px;
}
.upper{
overflow:hidden;
margin-bottom:80px;
}
.upper img{
width:620;
height:307;
}
.upper h2{
margin-top:20px;
margin-bottom:62px;
font-size:28px;
font-weight:bold;
font-family:lato;
color:#4f4e4e;
text-transform:uppercase;
padding-left:22px;
}
.upper p{
font-size:16px;
font-weight:regular;
font-family:lato;
color:#606060;
15 | P a g e
Chayan Chandan Das
padding-left:22px;
}
.btn{
padding:10px 35px;
margin-left:20px;
margin-top:40px;
font-size:16px;
font-weight:bold;
font-family:lato;
color:#c2c1c1;
border:1.5px solid #c2c2c2;
border-radius:26px;
display:inline-block;
}
.lower h2{
margin-top:20px;
margin-bottom:62px;
font-size:28px;
font-weight:bold;
font-family:lato;
color:#4f4e4e;
text-transform:uppercase;
padding-left:22px;
}
.lower p{
font-size:16px;
font-weight:regular;
font-family:lato;
color:#606060;
padding-left:22px;
}
.lower .btn{
padding:10px 35px;
margin-left:20px;
margin-top:40px;
font-size:16px;
font-weight:bold;
font-family:lato;
color:#c2c1c1;
border:1.5px solid #c2c2c2;
border-radius:26px;
display:inline-block;
margin-bottom:42px;
}
/*asied portion*/
.rt_side{
float:right;
width:280px;
margin-left:px;
overflow:hidden;
display:inline-block;
16 | P a g e
Chayan Chandan Das
}
.rt_side h3{
font-size:16px;
font-weight:bold;
font-family:lato;
color:#6c6969;
text-transform:uppercase;
border-left:3px solid #58c93a;
background-color:#f8f8f8;
margin-bottom:20px;
padding:18px 0px 21px 22px;
}
.rt_side p{
font-size:16px;
font-family:lato;
color:#737373;
margin-bottom:80px;
padding-left:22px;
}
.rt_side .search{
width:280px;
height:50px;
border:1px solid #e1e0e0;
margin-bottom:80px;
}
.rt_side input::placeholder{
padding-left:20px;
}
.rt_side .as3 input[type="email"]{
width:280px;
height:50px;
border:1px solid #e1e0e0;
}
.as3{
position:relative;
}
.as3 input[type="submit"]{
position:absolute;
background: url(img/submit_icon.png) no-repeat;
text-indent: -999999px;
top: 90px;
right: 20px;
width: 30px;
height: 30px;
border:none;
cursor:pointer;
line-height:30px;
}
.content_button{
border:1px solid #e1e0e0;
17 | P a g e
Chayan Chandan Das
height:84px;
line-height:84px;
font-size:18px;
font-family:lato;
font-weight:bold;
color:#818181;
text-transform:uppercase;
border-bottom:none;
border-top:none;
}
.content_button .previous{
float:left;
color:#818181;
padding-left:30px;
}
.content_button .next{
float:right;
padding-right:30px;
color:#818181;
}
/* css for footer*/
.footer_bg{
background-color:#f8f8f8;
padding-top:74px;
border-top:1px solid #e1e0e0;
text-align:center;
}
.footer_logo h1{
margin: 0 auto;
font-weight:bold;
font-size:40px;
color:#292929;
font-family:lato;
}
.footer_logo p{
font-weight:Myriad Pro;
font-size:13px;
color:#a6a6a6;
padding:40px 0px;
}
.icon{
padding-bottom:80px;
}
.icon ul{
list-style:none;
}
.icon ul li{
18 | P a g e
Chayan Chandan Das
display:inline-block;
margin:0 10px;
}
.icon ul li.fb a{
display:block;
width:40px;
height:40px;
background:url(img/fb.png) no repeat;
}
.icon ul li.fb a{
display:block;
width:40px;
height:40px;
background:url(img/iconf2.png) no-repeat;
}
.icon ul li.fb:hover a{
background:url(img/fb.png) no-repeat;
}
.icon ul li.twit a{
display:block;
width:40px;
height:40px;
background:url(img/icont2.png) no-repeat;
}
.icon ul li.twit:hover a{
background:url(img/icont.png) no-repeat;
}
.icon ul li.be a{
display:block;
width:40px;
height:40px;
background:url(img/iconbe2.png) no-repeat;
}
.icon ul li.be:hover a{
background:url(img/iconbg.png) no-repeat;
}
.icon ul li.d a{
display:block;
width:40px;
height:40px;
background:url(img/icond2.png) no-repeat;
}
.icon ul li.d:hover a{
background:url(img/icond.png) no-repeat;
}
