-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
164 lines (142 loc) · 5.35 KB
/
index.html
File metadata and controls
164 lines (142 loc) · 5.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<title>HTML5 </title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="bootstrap/bootstrap.min"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#panel").slideDown("slow");
});
});
$(document).ready(function()
{
$("#panel").click(function()
{
$("#panel").slideUp("slow");
});
});
</script>
<script type="text/javascript" language="javascript">
window.onload = function() {
document.getElementById("Button6").onmouseover = function()
{
this.style.backgroundColor = "#454545";
}
document.getElementById("Button6").onmouseout = function()
{
this.style.backgroundColor = "#8EEB03";
}
}
</script>
</head>
<body>
<div id="main">
<header>
<div id="header_section">
<div id="welcome">
<h2>Welcome Html5 & CSS </h2>
</div>
<nav >
<ul id="nav">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="ourwork.html">Our Work</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
<div id="site_content">
<div id="content">
<h1>Welcome To Your WebSite</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim
</p>
<div class="slideshow">
<ul class="slideshow">
<li class="show"><img width="650" height="300" src="images/home_1.jpg" /></li>
<li><img width="650" height="300" src="images/home_2.jpg" /></li>
</ul>
</div>
<div class="sidebar_container">
<div class="sidebar">
<div class="sidebar_item">
<h2>New WebSite</h2>
<p>Welcome to our new web site</p>
</div><!--close sidebar_item-->
</div><!--close sidebar-->
<div class="sidebar">
<div class="sidebar_item">
<h2>Latest Update</h2>
<h3>January 2014</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim.
</p>
</div><!--sidebar_item-->
</div><!--sidebar-->
<div class="sidebar">
<div class="sidebar_item">
<h3>December 2013</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim.
</p>
</div><!--sidebar_item"-->
</div><!--close sidebar-->
<div class="sidebar">
<div class="sidebar_item">
<h2>Contact</h2>
<p>Phone:+44 (0)1234 567891</p>
<p>Email:<a href="#"/></p>
</div><!--sidebar_item-->
</div><!--sidebar-->
</div><!--close sidebar_container-->
<div class="content_item">
<div class="content_imagetext">
<div class="content_image">
<img src="images/image1.jpg" alt="image"/>
</div><!--content_image-->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elit sapien, tempus sit amet hendrerit volutpat, euismod vitae risus. Etiam consequat, sem et vulputate dapibus, diam enim tristique est, vitae porta eros mauris ut orci. Praesent sed velit odio. Ut massa arcu, suscipit viverra molestie at, aliquet a metus. Nullam sit amet tellus dui, ut tincidunt justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis egestas laoreet. Nunc non ipsum metus, non laoreet urna. Vestibulum quis risus quis diam mattis tempus. Vestibulum suscipit pretium tempor.
</p>
</div><!--content_imagetext-->
<div class="content_container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt
</p>
<div class="button_small" >
Read more
</div><!--button_small-->
<!-- <div>
<button class="normal" id="Button6">Some text</button>
</div>
</div><!--content_container-->
<div class="content_container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus tempor enim. Aliquam facilisis neque non nunc posuere eget volutpat metus tincidunt
</p>
<div class="button_small" id="btn">
Read More
</div><!--button_small-->
<!--<div id="flip">Press Me</div>-->
<div id="panel" style="display:none;background-color:green;
position:absolute;margin-top:35px;high:40px;border-radius:5px 5px 5px 5px;">After button was push you see more details </div>
</div><!--content_container-->
</div><!--content_item-->
</div><!--content-->
</div><!--site_content-->
<footer>
<a href="index.html">Home</a> | <a href="ourwork.html">Our Work</a> | <a href="testimonials.html">Testimonials</a> | <a href="projects.html">Projects</a> | <a href="contact.html">Contact</a><br/><br/>
</footer>
</div><!--main-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/image_slide.js"></script>
</body>
</html>