Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.cycle.js"></script>
- <script type="text/javascript" src="js/slideshow.js"></script>$
- <title>layout</title>
- <style>
- *{margin:0; padding:0;}
- #wrap{
- margin:0;
- padding:0;
- }
- #content{
- margin:0 auto;
- width:800px;
- }
- ul#nav{
- padding:0;
- margin:0;
- list-style:none;
- width:inherit;
- background:#999;
- border:2px solid black;
- display:inline-block;
- text-align:center;
- }
- ul#nav li{
- width:100px;
- float:left;
- background:#FFFFFF;
- position:relative;
- }
- ul#nav li a{
- display:block;
- padding:5px 10px;
- text-decoration:none;
- color:#000;
- }
- ul#nav li a:hover{
- background:#aaa;
- color:#FC0;
- }
- ul#nav li ul{
- position:absolute;
- top:inherit;
- left:0;
- display:none;
- list-style:none;
- width:;
- border-bottom:2px solid black;
- border-left:2px solid black;
- border-right:2px solid black;
- z-index:12;
- }
- ul#nav li:hover{
- background:#aaa;
- }
- ul#nav li:hover ul{
- display:block;
- position:absolute;
- z-index:12;
- }
- ul#nav li ul li{width:120px; text-align:left; }
- #header img{
- float:left;
- }
- #header{
- height:90px;
- }
- #header span{
- padding:0;
- margin:0;
- background:#0000FF;
- padding-left:25px;
- position:relative;
- top:-10px
- }
- .clear{
- clear:both;
- }
- h1{margin:0; padding-bottom:10px; background:#0FC;}
- #midcontent{width:inherit; height:400px; background-color:rgba(51,51,51,1); *background:#000; color:#FFF;}
- #imgfloat{float:right; }
- #imgfloat img{position:relative; top:-90px; left:0;}
- /* ---------------------------------------------------- */
- /* SLIDESHOW
- /* ---------------------------------------------------- */
- #slideshow {
- width: 400px;
- height:;
- background-color: #eee;
- border: 1px solid #ddd;
- color:#000;
- }
- #slideshow ul {
- margin: 0;
- padding: 0;
- list-style-type: none;
- height: 1%; /* IE fix */}
- #slideshow ul:after {
- content: ".";
- clear: both;
- display: block;
- height: 0;
- visibility: hidden;}
- /* ---------------------------------------------------- */
- /* SLIDESHOW > SLIDES
- /* ---------------------------------------------------- */
- #slideshow .slides {
- overflow: hidden;
- width: 450px;}
- #slideshow .slides ul {
- width: 2880px;}
- #slideshow .slides li {
- width: 350px;
- float: left;
- padding: 20px;}
- #slideshow .slides h2 {
- margin-top: 0;}
- /* ---------------------------------------------------- */
- /* SLIDESHOW > NAVIGATION
- /* ---------------------------------------------------- */
- #slideshow .slides-nav {
- background-color: #ddd;
- border-top: 2px solid #ccc;
- }
- #slideshow .slides-nav li {
- float: left;}
- #slideshow .slides-nav li a {
- display: block;
- padding: 15px 20px;
- outline: none;}
- .js #slideshow .slides-nav li.on,
- .js #slideshow .slides-nav li.on a {
- background-color: #eee;}
- .js #slideshow .slides-nav li.on a {
- position: relative;
- top: -4px;}
- </style>
- </head>
- <body>
- <div id="wrap">
- <div id="content">
- <div id="header">
- <img src="website/logo.png" />
- <h1>Computer Repair</h1>
- <span>and in home network installation</span>
- </div><!-- header end -->
- <!-- Navigation bar -->
- <ul id="nav">
- <li><a href="#">Home</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Services</a>
- <ul>
- <li><a href="#">repair</a></li>
- <li><a href="#">installation</a></li>
- <li><a href="#">data recovery</a></li>
- </ul>
- </li>
- <li><a href="#">Contact us</a></li>
- </ul>
- <!-- Navigation bar end -->
- <div class="clear"></div>
- <div id="midcontent"><!-- midcontent start -->
- <div id="imgfloat">
- <img src="website/page1_img.png" />
- </div><!-- imgfloat end -->
- <div>
- <div id="slideshow">
- <div class="slides">
- <ul>
- <li id="slide-one">
- <h2>Slide one</h2>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec pretium arcu non velit. Phasellus adipiscing auctor
- lorem. Curabitur in urna ut purus consequat sollicitudin.
- Phasellus ut diam. Cras magna libero, tempor id, venenatis
- sit amet, venenatis et, dui.
- </p>
- </li>
- <li id="slide-two">
- <h2>Slide two</h2>
- <p>
- Nam ac nibh sit amet augue ultricies sagittis. Donec sit
- amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
- nisi condimentum urna, sit amet molestie odio dolor non lectus.
- Cum sociis natoque penatibus et magnis dis parturient montes,
- nascetur ridiculus mus.
- </p>
- </li>
- <li id="slide-three">
- <h2>Slide three</h2>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse adipiscing dui a nibh. Integer tristique lorem
- vitae massa. Etiam dapibus, eros sit amet euismod semper,
- felis erat congue lacus, sed aliquam metus libero sed elit.
- </p>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div><!-- midcontent end -->
- </div> <!-- content end -->
- </div> <!-- wrap end -->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement