Web Design - Technical Design - HTML and CSS Assignment 10

HTML

<html>
	<head><title>Assignment 9-ii</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
	</head>
<body topmargin="0" leftmargin="0" >
<div id="main" >
<div id="header" >Header </div>
<div id="banner" >banner </div>
<div id="Menu" ><ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Downloads</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">Faq</a></li>
</ul></div>
<div id="detail" >
<div id="subdetail">
<h2 align="center" ><U>About Pakistan</u></h2>
<p>The Islamic Republic of <span>Pakistan</span> is bordered in the north-west by Afghanistan, north by the former USSR and China, east by India and south by the Arabian Sea.<p>
<p>
The Muslim state that emerged from partition of British India on 14 August 1947 included an eastern wing comprising mainly the eastern half of Bengal province and parts of Assam. (The name <span>Pakistan</span> is coinage representing 'Punjab, the Afghan border states, Kashmir, Sing and Baluchistan')
</p>
<p>
For nine years Pakistan remained a dominion. It was proclaimed an Islamic republic on 23 March 1956. A federal parliamentary system functioned until-Field -Marshal Muhammad Ayub Khan seized power in a coup in October 1958. Ayub proclaimed a presidential system in the constitution of 1962 and ruled until March 1969, when he was deposed by Gen. Yahya Khan
</p>
<p>
In the first free elections in December 1970, Zulfikar Ali Bhutto's Pakistan People's Part dominated the west, while Sheikh Mujibur Rahman's Awami League swept the board in the east, winning 160 of the 162 seats.
<p>
<p>
East <span>Pakistan</span> proclaimed sovereignty and formed the People's Republic of Bangladesh on 26 Narcg 1971. Civil war followed after Yahya, supported by Bhutto, ordered troops to arrest Mujib and put down the Bengali uprising. The east-west war ended in December 1971. Yahya handed over power to Bhutto, who ruled until July 1977, before being over-thrown after an opposition campaign against alleged rigging in general elections. Gen. Zia-ul-Haq took over-initially to hold elections and transfer power to a civilian regime. But elections were twice postponed and Bhutto was tried for the murder of a political opponent and executed.
</p>
</div></div> 
<div id="navigation">
<ul>
	<li><a href="#">Desktop Pc</a></li>
	<li><a href="#">Laptops</a></li>
	<li><a href="#">Mobiles</a></li>
	<li><a href="#">Digital Cam</a></li>
	<li><a href="#">Printer's</a></li>
	<li><a href="#">Scanners</a></li>
	<li><a href="#">LCD/TFT</a></li>
	<li><a href="#">Ipod</a></li>
	<li><a href="#">Accessories</a></li>
</ul>
</div>
<div id="clear"></div> 
<div id="footer" >footer </div>
</div>
</body>
</html>

CSS

#main{
		width:100%;
		}
	#header{
		height:10%;
		background-color:#000066;
		}
	#banner{
		height:10%;
		background-color:#9999ff;
		}
#menu{
	margin-top:0px;
	height:40px; background-color:#000066;
	}
#menu ul{

list-style-type:none;
	font-size:12pt;
	margin:6px;
	}
#menu ul li{
		display:inline;
	}
#menu ul li a{
		float:left;
		margin:0px;
		padding:5px 10px;
		text-decoration:none;
		background-color:#000066;
		color:#99ccff;
		border-right:1px solid #fff;
	}
#menu ul li a:hover{

background-color:#336699;
		color:yellow;
	}
	#detail{
		float:left;
		height:70%;
		width:83%;
		background-color:#6699cc;
		}
	#subdetail{
		float:left;
		margin:120px;
		padding:25px;
		height:50%;
		width:72%;
		background-color:#ffffff;
		border-top-style:solid;
		border-top-color:#ff9900;
		border-bottom-style:solid;
		border-bottom-color:#ff9900;
		border-left-style:solid;
		border-left-color:#ff9900;
		border-right-style:solid;
		border-right-color:#ff9900;
		}
h2 {color:red; text-decoration:blink;}
#subdetail p {
	font-size:12px;
	font-family:tahoma;
	\*font-style:italic;*/
	\*font-variant:small-caps;*/
	font-weight:bold;
	text-align:justify;
	\*text-transform:capitalize;*/
	\*text-transform:lowercase;*/
	text-transform:uppercase;
	color:blue;
	word-spacing:4px;
	line-height:14px;
	text-indent:20px;
	}
#subdetail p span{
		Color:Green;
	}

#navigation{
	float:left;
	height:67.6%;
	width:15.8%;
	padding:10px;
	background-color:#006699;
	}
#navigation ul{
	list-style-type:none;
	font-size:12pt;
	margin-left:0px;
	}
#navigation ul li{
		padding:5px;
		border-bottom:2px dotted cyan;
	}
#navigation ul li a{

text-decoration:none;
		color:#66ffff;

}
#navigation ul li a:hover{

text-decoration:none;
		color:#ccff99;
	}
#clear{clear:both;}
	#footer{
		height:5%;
		background-color:#003366;
		}

Web Design - Technical Design - HTML and CSS Assignment 10

Post a Comment

Post a Comment

Contact Form

Web Design - Technical Design - HTML and CSS Assignment 10

You might like

Post a Comment

Post a Comment

Contact Form