-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
151 lines (148 loc) · 10.1 KB
/
index.html
File metadata and controls
151 lines (148 loc) · 10.1 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body class="bg-light">
<!-- Container start -->
<div class="container">
<!-- Header start -->
<div class="row mt-3">
<div class="col mr-n5">
<div class="bg-primary w-100 h-100 text-center pr-3">
<table style="height:100%;width:100%">
<td class="text-center align-middle p-5 p-lg-0">
<a class="text-light font-weight-bolder" href="#">Lorem Ipsum</a>
</td>
</table>
</div>
</div>
<div class="col-lg-10">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Header end -->
<!-- Jumbotron start -->
<div class="mt-4 jumbotron">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a class="btn btn-primary btn-sm" href="#" role="button">Learn more</a>
</div>
<!-- Jumbotron end -->
<!-- Page content start -->
<div class="row">
<!-- Left side start -->
<div class="col-lg-8">
<!-- Alert start -->
<div class="mb-3 alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<!-- Alert end -->
<!-- Panel start -->
<div class="mb-3 bg-white border border-gray">
<h6 class="mx-3 mt-3 border-bottom border-gray">Welcome to Lorem Ipsum!</h6>
<div class="px-3 pb-1 text-left small">
<p class="text-muted mt-n2 mb-3">Written by <i>Wanderer</i> on <i>3rd September, 2019</i>. Categorized by <i>Site news</i></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt tellus. Suspendisse tellus mauris, rutrum rhoncus tempus sed, rhoncus ut nulla. Nunc at risus lobortis, tincidunt nisl ut, varius purus. Ut egestas ac velit nec iaculis. Suspendisse facilisis mattis lectus a cursus. Quisque cursus commodo arcu et porta. Nullam scelerisque euismod leo, faucibus laoreet justo imperdiet in. Donec commodo elementum odio id molestie. Nullam dapibus fringilla leo. Morbi vel semper urna. In accumsan arcu sit amet nisi aliquet, ac eleifend lectus scelerisque. Sed volutpat in massa nec rhoncus. Cras sodales dapibus metus, non efficitur nisl pharetra non. Duis eu metus venenatis, commodo ligula eget, imperdiet mauris.</p>
<p>Ut elementum fermentum placerat. Nulla facilisi. Sed elit ante, venenatis non volutpat eu, sollicitudin nec augue. Praesent vestibulum vel ante quis rhoncus. Nunc vulputate, leo et convallis placerat, odio lectus vestibulum urna, non pretium tortor felis nec tellus. Fusce egestas est sit amet lacus vehicula lacinia. Aliquam in est vel augue pretium fermentum. Praesent leo ex, semper nec fermentum et, interdum eu velit. Proin facilisis dolor et tellus congue, et sollicitudin ipsum porta. Pellentesque in risus vel mi egestas fermentum. Maecenas tempor mi vel luctus tristique.</p>
<p>Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sit amet lectus enim. Duis vitae ex ac eros efficitur mattis vel ut nulla. Fusce dapibus, felis at finibus blandit, nisi ligula semper justo, ut mattis mauris sapien eget nisl. Fusce id odio accumsan, posuere velit ut, consequat lorem. Fusce tellus erat, finibus sit amet libero ut, semper luctus libero. Proin leo erat, euismod sed elit sed, imperdiet vestibulum arcu. Donec elementum, urna eget sagittis rhoncus, lectus quam euismod neque, non faucibus ipsum nulla ut turpis. Duis mollis, diam ac molestie aliquet, enim ante consequat neque, et hendrerit neque sapien in est. Maecenas tempus sit amet mi ac placerat. Nam a est quis quam suscipit cursus vel et turpis.</p>
</div>
</div>
<!-- Panel end -->
</div>
<!-- Left side end -->
<!-- Right side start -->
<div class="col-sm">
<!-- Panel start -->
<div class="mb-3 bg-white border border-gray">
<h6 class="mx-3 mt-3 pb-3 border-bottom border-gray">Log in</h6>
<div class="px-3 pb-3">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<!-- Panel end -->
<!-- Panel start -->
<div class="mb-3 bg-white border border-gray">
<h6 class="mx-3 mt-3 pb-3 border-bottom border-gray">About us</h6>
<p class="px-3 pb-1 text-left small">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
</div>
<!-- Panel end -->
<!-- Panel start -->
<div class="bg-white border border-gray">
<h6 class="mx-3 mt-3 pb-3 border-bottom border-gray">Information</h6>
<p class="px-3 pb-1 text-left small">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>
<!-- Panel end -->
</div>
<!-- Right side end -->
</div>
<!-- Page content end -->
</div>
<!-- Container end -->
<!-- Footer start -->
<div class="container-fluid bg-dark text-white mt-5">
<div class="row">
<div class="col-lg my-5 mx-5 small">
<h6>People Who Trust</h6>
<blockquote class="blockquote mt-3">
<p class="mb-0 small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer small">Lead Developer of <cite title="Source Title">NameGroup</cite></footer>
</blockquote>
</div>
<div class="col-lg my-5 mx-5 small">
<h6>About Us</h6>
<p class="mt-3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
</div>
<div class="col-lg my-5 mx-5 small">
<h6>Contact Us</h6>
<p class="mt-3"><i class="material-icons align-middle mr-2">email</i>info@website.com</p>
<p><i class="material-icons align-middle mr-2">phone</i>+370 12 34567</p>
<p><i class="material-icons align-middle mr-2">business</i>V. Šopeno g. 1, Vilnius</p>
</div>
</div>
<!-- Copyright start -->
<div class="row">
<div class="col small text-center text-secondary">
<p>© 2014 - 2019 Lorem Ipsum</p>
<p>Template made with <a href="https://getbootstrap.com">Bootstrap</a></p>
</div>
</div>
<!-- Copyright end -->
</div>
<!-- Footer end -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>