html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cloud Tech</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="warpper">
<header>
<div style="width:50%;height:200px;float:left">
<img src="img/logo.png" style="width:250px;height:190px;">
</div>
<div style="width:50%;height:200px;float:left">
<img src="img/logo2.png" style="width:250px;height:190px;">
</div>
</header>
<nav>
<ul>
<li> <a href="#">HOME </a> </li>
<li> <a href="#">SERVICE </a> </li>
<li> <a href="#">ABOUT </a> </li>
<li> <a href="#">CONTACT</a> </li>
</ul>
</nav>
<section>
<h3 style="color:rgb(2,173,193); font-style:normal; font-weight:normal ; text-align:center" >Welcome Ethones! </h3>
<blockquote>
<p style=" text-align:justify">Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document. </p>
</blockquote>
<div style=" width:95%;height:200px;margin:0 auto;">
<img src="img/1.jpg" style="width:33%;height:200px"/>
<img src="img/2.jpg" style="width:33%;height:200px"/>
<img src="img/3.jpg" style="width:33%;height:200px"/>
</div>
<blockquote>
<p style=" text-align:justify">
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.
</p>
</blockquote>
<h2>Template Customization</h2>
<p> To make your document look professionally produced, <a href="#" style="color:#F6C">Word provides</a> header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.</p>
<h3 style="color:#903"> Our Blog</h3>
<p> text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.</p>
</section>
<footer>
<br>
<p style="text-align:center; ">Made by : Salmanmasood </p>
</footer>
</div>
</body>
</html>
css code:
@charset "utf-8";
/* CSS Document */
body
{ margin:0 auto;
padding:0px;
}
#warpper
{
width:100%;
height:auto;
}
header
{
width:100%;
height:200px;
background-color:rgb(2,173,193);
hsl:(124,235,92);
}
NAV
{
width:100%;
height:50px;
background-color:rgb(255,190,0);
}
nav ul
{ list-style-type:none;
margin:0;
}
nav ul li
{
display:inline-block;
margin-top:20px;
}
nav ul li a
{
color:#333;
font-weight:bold;
padding:20px;
text-decoration:none;
}
section p
{ font-family:"Courier New", Courier, monospace;
color:#999;
}
section
{
width:100%;
height:auto;
background-color:#fff;
}
footer
{
width:100%;
height:50px;
background-color:rgb(255,190,0);
}
