HTML Code For Theme (Assignment of Shakil):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link href="images/24-32.png" rel="shortcut icon">
</head>
<body>
<div class="top_line"></div>
<div class="top_header">Primo Restaurant</div>
<div class="container"> </div>
<div class="name">PRIMO RESTAURANT</div>
<div class="menu">
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../about.html">GALLERY</a></li>
<li><a href="../event.html">EVENT</a></li>
<li><a href="../blog.html">BLOG</a></li>
<li><a href="../contact.html">CONTACT</a></li>
</ul>
</div>
<div class="box"><img src="images/reea.jpg" width="600" height="200"></div>
<div class="box2"> </div>
<div class="box3">A BOLD & LIVELY DESIGN TEMPLATE<br/>
<p>We're glad you stopped by. this is the live demo of how your restaurant
website could look. it's fully comfitable to your restaurant needs.
We're glad you stopped by. this is the live demo of how your restaurant
website could look. it's fully comfitable to your restaurant needs.</p>
<div class="menu2"><a href="../menu2.html">Browse our menus</a></div>
</div>
<div class="box4">
<div class="box_image"><img src="images/italian-food-8.jpg" width="140" height="130"></div>
<div class="box_image2"><img src="images/burger.jpg" width="140" height="130"></div>
<div class="box_image3"><img src="images/italian-food-8.jpg"width="140" height="130"></div>
<div class="box_image4"><img src="images/Restaurant-Food-10.jpg" width="140" height="130"></div>
<div class="food_box">
<div class="food_name"><font color="#C16206">Pizza</font><br/>
Food Details</div>
<div class="food_name2"><font color="#C16206">Noodles</font><br/>
Food Details
</div>
<div class="food_name3">
<font color="#C16206">Rice</font><br/>
Food Details</div>
<div class="food_name4">
<font color="#C16206">Burger </font><br/>
Food Details</div>
</div>
</div>
<div class="designer">© Copyright ! All rights reserved<br/>
Designed By shahriar </div>
</body>
</html>
CSS Code for Theme (Assignment of Shakil):
@charset "utf-8";
/* CSS Document */
body
{margin:0px;}
.top_line
{ width:100%; height:5px; margin:0px auto; background:#A75D16;}
.top_header
{ width:100%; height:50px; margin:0px auto; background:#2a1d0a;
font-weight:bolder; color:#FFF; text-align:center; font-size:20px; line-height:50px; font-family: 'Merriweather', serif;}
.container
{ width:100%; height:250px; margin:0px 0px 0px 0px; background:#312817;}
.box
{ width:600px; height:200px; margin:0px auto;}
.box2
{ width:100%; height:650px; margin:0px auto; background:#554633; margin-top:-90px;}
.name
{ width:400px; height:50px; margin:0px auto; background:; margin-top:-200px; line-height:50px;
font-weight:bolder; font-size:20px; color:#FFF; text-align:center; font-family: 'Merriweather', serif;}
.menu
{ width:400px; height:35px; margin:0px auto; background:; }
.menu ul { margin:0px; padding:0px; list-style:none;}
.menu li { display: inline;}
.menu a{ width:80px; height:35px; float:left; font-weight:bolder; text-align:center; text-decoration:none;
font-size:14px; color:#FFF; line-height:35px; margin:0px; padding:0px; font-family: 'Playfair Display', serif;}
.menu a:hover{ background:#C96; text-decoration:underline;}
.box3
{ width:600px; height:150px; margin:0px auto; background:;
font-weight:bolder; font-size:24px; color:#FFF; text-align:justify; text-indent:70px; margin-top:-550px;}
.menu2
{width:150px; height:30px; margin:0px auto; background:#C16206;
font-weight:bolder; font-size:12px; line-height:30px; text-indent:25px;
border-radius:5px 5px 5px 5px;}
.menu2 a{ text-decoration:none; color:#FFF;}
.box4
{ width:600px; height:220px; margin:0px auto; background:; margin-top:5px;}
.box_image
{ width:140px; height:130px; margin:15px 0px 0px 12.5px; float:left;transition:2s;}
.box_image:hover
{ transform:scale(1.1);}
.box_image2
{ width:140px; height:130px; margin:15px 5px 5px 5px; float:left; transition:2s;}
.box_image2:hover
{ transform:scale(1.1);}
.box_image3
{ width:140px; height:130px; margin:15px 5px 0px 0px; float:left;
transition:2s;}
.box_image3:hover
{ transform:scale(1.1);}
.box_image4
{ width:140px; height:130px; margin:15px 5px 0px 0px; float:left; transition:2s;}
.box_image4:hover
{ transform:scale(1.1);}
p
{ text-align: justify; font-size:12px; color:#FFF; text-indent:0px;}
.food_box
{ width:600px; height:60px; margin:0px 0px 0px 0px; float:left;}
.food_name
{ width:140px; height:50px; margin:5px 0px 0px 12.5px; float:left; background:;
font-weight:bolder; font-size:14px; color:#FFF; text-align:center;}
.food_name2
{ width:140px; height:50px; margin:5px 5px 5px 5px; float:left; background:;
font-weight:bolder; font-size:14px; color:#FFF; text-align:center;}
.food_name3
{ width:140px; height:50px; margin:5px 5px 0px 0px; float:left; background:;
font-weight:bolder; font-size:14px; color:#FFF; text-align:center;}
.food_name4
{ width:140px; height:50px; margin:5px 5px 0px 0px; float:left; background:;
font-weight:bolder; font-size:14px; color:#FFF; text-align:center;}
.designer
{width:600px; height:40px; margin:0px auto; background:; margin-top:5px; text-align:center;
padding-top:10px; color:#fff;}
Result of Assignment :
0 Komentar untuk "Web Programming for Wordpress Website Part1"