Project 2-"Screen Time"
Microsites:-
Microsite 1- click here to view microsite 1
Microsite 2-click here to view microsite 2
Code:-
Code for Microsite 1:-
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../week 7 task 5/week7_960grid/12_column_example/css/reset_rtl.css" />
<link rel="stylesheet" href="../week 7 task 5/week7_960grid/12_column_example/css/text_rtl.css" />
<link rel="stylesheet" href="../week 7 task 5/week7_960grid/12_column_example/css/960_rtl.css" />
<style>
body {
font-family: Verdana, Geneva, sans-serif;
background-repeat: no-repeat;
background-image: url(Images/background1.png);
}
#menu{ height:50px;}
ul {
padding: 60px;
margin: 0px;
list-style-type: none;
}
li {
list-style: none;
float:left;
text-indent:-9999px;
}
li a {
display:block;
width:157px;
height:42px;
}
a.about{background-image: url(Button%20bar%201/images/Untitled-1_07.gif);
background-repeat:no-repeat;}
a.about:hover{background-image: url(Button%20bar%201/images/images/roll_07.gif);
background-repeat:no-repeat;
}
a.product {
background-image: url(Button%20bar%201/images/Untitled-1_01.gif);
background-repeat:no-repeat;
}
a.product:hover {
background-image: url(Button%20bar%201/images/images/roll_01.gif);
background-repeat:no-repeat;
}
a.apps {
background-image: url(Button%20bar%201/images/Untitled-1_05.gif);
background-repeat:no-repeat;
}
a.apps:hover {
background-image: url(Button%20bar%201/images/images/roll_05.gif);
background-repeat:no-repeat;
}
a.links{
background-image: url(Button%20bar%201/images/Untitled-1_03.gif) ;
background-repeat:no-repeat;
}
a.links:hover {
background-image: url(Button%20bar%201/images/images/roll_03.gif);
background-repeat:no-repeat;
}
.container_12 {
margin-bottom: 20px;
}
.grid_5{
background-image: url(PNG%20Image/logoprog1.png);
background-repeat: no-repeat;
height: 100px;
text-indent:-99999999px;
}
.grid_3{
background-image:url(Images/dream%20catcher%20app.png);
background-repeat:no-repeat;
height: 150px;
background-position: right;
text-indent:-99999999px;
}
#wowslider-container1{float:left;}
</style>
<title>Microsite 1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="WOW Slider, Ajax Image Carousel, Free Photo Carousel" />
<meta name="description" content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body>
<div class="container_12">
<div class="grid_7"><p></p></div>
<div class="grid_5"><p>5columns</p></div>
<div id="menu">
<ul>
<li><a class="product" href="#">product</a></li>
<li><a class="links" href="http://www.swatch.com/">links</a></li>
<li><a class="apps" href="#">apps</a></li>
<li><a class="about" href="#">about</a></li>
</ul>
</div>
<div class="grid_12">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/indian_wall.jpg" alt="Native American" title="Native American" id="wows1_0"/></li>
<li><img src="data1/images/page_2.jpg" alt="Info" title="Info" id="wows1_1"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Native American"><img src="data1/tooltips/indian_wall.jpg" alt="Native American"/>1</a>
<a href="#" title="Info"><img src="data1/tooltips/page_2.jpg" alt="Info"/>2</a>
</div></div>
<a class="wsl" href="http://wowslider.com">jQuery Carousel Demo by WOWSlider.com v2.7.1m</a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section --></div>
<div class="grid_3"><p></p></div>
<div class="grid_9"><p></p></div>
<div class="clear"></div>
</div>
</body>
</html>
Code for Microsite 2:-
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<title>Microsite2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="WOW Slider, Ajax Image Carousel, Free Photo Carousel" />
<meta name="description" content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
<meta charset="utf-8" />
<title>960 Grid System - 12 column sample layout</title>
<link rel="stylesheet" href="../week 7 task 5/week7_960grid/12_column_example/css/reset_rtl.css" />
<link rel="stylesheet" href="../week 7 task 5/week7_960grid/12_column_example/css/text_rtl.css" />
<link rel="stylesheet" href="../week 7 task 5/week7_960grid/12_column_example/css/960_rtl.css" />
<style>
p {
padding: 10px 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
color: black;
}
body {
font-family: Verdana, Geneva, sans-serif;
background-repeat: no-repeat;
background-image: url(PNG%20Image/backgroundtry.png);
}
ul {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
float:right;
text-indent:-9999px;
width: auto;
}
li a {
display: block;
width: 165px;
height:60px;
}
a.about{background-image: url(PNG%20Image/file100.png);
background-repeat:no-repeat;}
a.about:hover{background-image: url(PNG%20Image/file107.png);
background-repeat:no-repeat;
}
a.product {
background-image: url(PNG%20Image/file102.png);
background-repeat:no-repeat;
}
a.product:hover {
background-image: url(PNG%20Image/file109.png);
background-repeat:no-repeat;
}
a.apps {
background-image: url(PNG%20Image/file104.png);
background-repeat:no-repeat;
}
a.apps:hover {
background-image: url(PNG%20Image/file111.png);
background-repeat:no-repeat;
}
a.links{
background-image: url(PNG%20Image/file106.png) ;
background-repeat:no-repeat;
}
a.links:hover {
background-image: url(PNG%20Image/file113.png);
background-repeat:no-repeat;
}
div {
}
.container_12 {
margin-bottom: 20px;
}
.grid_5{
height: 100px;
text-indent: -999999px;
}
.grid_6{
height: 590px;
background-repeat:no-repeat;
background-color:#CCC;
}
.grid_10{
background-repeat:no-repeat;
height: 150px;
background-position: right;
}
.grid_7{text-indent: -999999px;}
.clear{height:50px}
.grid_2{text-indent:-999999px;
height:150px;}
.grid_12{
text-indent:-999999px;
height:600px;
background-image: ;
background-repeat:no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<div class="container_12">
<div class="grid_12"><p>12 column</p></div>
<div id="menu">
<ul>
<li><a class="links" href="#">ho</a></li>
<li><a class="apps" href="#">about</a></li>
<li><a class="product" href="#">music</a></li>
<li><a class="about" href="#">lyrics</a></li>
</ul>
</div>
<div class="grid_10"><p>This is not only a watch it is a swatch, elegantly designed to fit with the newest native american fashion trend.It is not only an accessory, that fits superbly to your wrist , it is also a watch made up of only 90 components,light enough so it fits in to your everyday life and style</p></div>
<div class="grid_2"><p>8 columns</p></div>
<div class="clear"></div>
</div>
</body>
</html>
No comments:
Post a Comment