-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (82 loc) · 4.72 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="https://en.wikipedia.org/wiki/Putrajaya">Putrajaya, Kuala Lumpur</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Contact">Contact</a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay"></div>
<div class="description">
<h1>Home in Putrajaya, Kuala Lumpur: welcome!</h1>
<p>Putrajaya, Malaysia's administrative capital, lies 25 kilometers south of Kuala Lumpur.
It was developed to ease congestion in Kuala Lumpur, featuring modern architecture and green spaces.
Putrajaya serves as the federal government's administrative hub, while Kuala Lumpur thrives as the commercial and cultural center, known for its vibrancy and diversity.</p>
<a href="https://www.youtube.com/watch?v=8zFq-tmu6cc"><button class="btn btn-outline-secondary btn-lg" >Tell Me More!</button></a>
</div>
</header>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12" id="About">
<h3 class="feature-title">Seri Gemilang Bridge</h3>
<img src="images/bridge.jpeg" class="img-fluid">
<p>The Seri Gemilang Bridge is an iconic structure in Putrajaya, Malaysia.
It's known for its elegant design and serves as a landmark in the city.
The bridge spans across the Putrajaya Lake, connecting Precinct 4 to Precinct 3.
With its graceful arches and decorative fearures, the Seri Gemilang Bridge adds to the beauty of Putrajaya's landscape and is often admired by visitors for its aestheti appeal.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Masjid Putra</h3>
<img src="images/masjid.jpg" class="img-fluid">
<p>Masjid Putra is a prominent landmark in Putrajaya. Known for its striking pink-domed roof and elegant Islamic architecturem, it accommodates thousands of worshippers.
Visitors can admire its beauty, serene ambiance, and picturesque surroundings, including Putrajaya Lake.
Open to tourists, the mosque offers guided tours and insights into Islamic culture and architecture.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12" id="Contact">
<h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>