-
Notifications
You must be signed in to change notification settings - Fork 1
/
index 4.html
64 lines (57 loc) · 3.1 KB
/
index 4.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/images/Ayoub.jpg" type="image/x-icon">
<link rel="stylesheet" href="stylesheet 4.css">
<title>Ayoub.Dev</title>
</head>
<body>
<div class="container">
<header>
<h1>Welcome to My Homepage</h1>
<hr>
<p>Use the menu to select different Stylesheets</p>
</header>
<div class="nav-bar">
<ul>
<li><a href="index 1.html">Stylesheet 1</a></li>
<li><a href="index 2.html">Stylesheet 2</a></li>
<li><a href="index 3.html">Stylesheet 3</a></li>
<li><a href="index 4.html">Stylesheet 4</a></li>
<li><a href="index.html">No Stylesheet</a></li>
</ul>
</div>
<section>
<h1>Same Page Different Stylesheets</h1>
<p>
This is a demonstration of how different stylesheets can change the layout of your HTML page.
You can change the layout of this page by selecting different stylesheets in the menu,
or by selecting one of the following links:
</p>
<a href="index 1.html">Stylesheet1</a>, <a href="index 2.html">Stylesheet2</a>, <a href="index 3.html">Stylesheet3</a>, <a href="index 4.html">Stylesheet4</a>.
<h2>No Styles</h2>
<p>
This page uses DIV elements to group different sections of the HTML page.
Click here to see how the page looks like with no stylesheet:
</p>
<a href="index.html">No Stylesheet</a>.
</section>
<br>
<div class="buttom-content">
<div class="side-bar">
<h3>Side-Bar</h3>
<p>Content Here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here.</p>
</div>
<div class="finalP">
<p>Content Here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here, content here.</p>
</div>
</div>
<footer>
<hr>
<p>Powred By <a href="https://www.linkedin.com/in/ayoub-banani/">Ayoub.dev</a>, All Rigths Are Reserved.</p>
</footer>
</div>
</body>
</html>