-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (129 loc) · 6.89 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css">
<title>My Complete BootStrap Project</title>
<!-- BootStrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">My Planet</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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- page content -->
<header class="page-header header container-fluid">
<div class="overlay"></div>
<div class="description">
<h1>All about our Planet Earth!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
<button class="btn btn-outline-secondary btn-lg">Tell Me More!</button>
</div>
</header>
<!-- colums -->
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Lightning Strike</h3>
<img src="/images/background/lightning.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Raising Moon</h3>
<img src="/images/background/moon.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<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>
<!-- team section -->
<div class="background">
<div class="container team">
<div class="row">
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top card-img" src="/images/profiles/woman1.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top card-img" src="/images/profiles/man1.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top card-img" src="/images/profiles/woman2.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Mary Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top card-img" src="/images/profiles/man1.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">Paul Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- footer section -->
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<p>1640 Riverside Drive, Westlands, Nairobi, Kenya.
<br/>[email protected]
<br/>+ 01 234 567 88
<br/>+ 01 234 567 89</p>
</div>
<div>
<div class="footer-copyright text-center">© 2020 Copyright: MyWebsite.com</div>
</footer>
<!-- Boostrap Script -->
<script src="/scripts.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>