-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (123 loc) · 9.78 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
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
#more {display: none;}
#navbar a:hover{
background-color:#ddd;
color: black;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<a href="#hello">Hello world!</a>
<a href="#container">Container1</a>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container" id="hello">
<h1>Hello, world!</h1>
<p>Quam pulvinar quis laoreet orci habitasse nostra nibh auctor mollis neque suspendisse fermentum! Egestas turpis, dolor faucibus fusce. Primis porttitor ipsum iaculis, erat enim porta duis eu. Nostra sapien condimentum facilisis congue massa at ipsum. Fusce habitant sociosqu at nostra vulputate aptent fusce nec interdum non. Sagittis netus consequat aptent cubilia lacinia tempus sodales a eget nullam nulla turpis. Hendrerit, phasellus cras quis congue quis donec himenaeos nostra tellus vivamus. Tincidunt elementum ornare phasellus?
Quis massa vestibulum magna diam sodales molestie nostra integer turpis.<span id="dots">...</span><span id="more"> Eleifend tempor rutrum ultricies pulvinar nibh turpis quam libero in. Ultrices purus nisi ultricies velit risus massa tincidunt. Praesent feugiat rutrum ante orci nascetur a sem nascetur nisl tempus torquent. Fringilla facilisis nascetur venenatis sem mus massa eget sociis nulla. Inceptos varius curae; blandit vitae. Vehicula a himenaeos purus fringilla sodales nibh eu? Nam vel diam at non posuere; duis blandit sollicitudin. Et ridiculus curae; molestie class aliquet mauris diam venenatis etiam phasellus? Lobortis maecenas laoreet natoque montes curae; inceptos conubia scelerisque, dictumst vel vulputate. Magnis tempus odio sit. Consectetur, neque porta vulputate elit semper metus pellentesque euismod aenean et est sollicitudin. Varius sapien?
Etiam maecenas potenti dapibus mus. Ante per dolor taciti leo ornare proin dis id. Magnis vel placerat aptent phasellus diam ac, maecenas mattis. Felis quisque molestie leo vitae. Mattis interdum fermentum per; nascetur placerat interdum. Cubilia erat congue interdum fringilla vehicula sociis aliquet litora hac laoreet. Cum orci quisque pharetra. Cursus est praesent purus laoreet ultricies maecenas nunc gravida! In per vulputate netus a duis quisque habitant duis dignissim, risus natoque. Cras hac, ullamcorper tempor faucibus elit est sem ullamcorper scelerisque commodo. Dui felis felis bibendum ad sit nulla. Vel, eros gravida ligula eu euismod. Dolor.
Dui lobortis facilisi imperdiet convallis dapibus scelerisque, enim est habitant etiam magna. Diam feugiat malesuada cras accumsan. Lectus nostra vestibulum, ipsum consequat posuere. Malesuada nullam aptent sociis quis urna mauris? Ligula magna eleifend lobortis hendrerit interdum. Fermentum himenaeos blandit elit suscipit. Purus lectus placerat quam. Fames pretium faucibus praesent auctor volutpat, fames porta conubia nascetur. Conubia nibh erat neque pretium nullam quisque nulla fringilla nostra euismod tortor. Odio justo dapibus euismod odio. Sit velit neque torquent varius velit sem suspendisse viverra velit phasellus turpis. Euismod amet luctus ultrices. Iaculis litora placerat augue vel porttitor, dictum praesent malesuada nunc. Blandit nostra gravida congue parturient torquent. A platea sodales condimentum litora dapibus arcu odio in mauris! Montes donec sollicitudin aliquam erat eros aptent. Sagittis mollis placerat dolor vestibulum velit fames praesent cras netus erat ultrices. Magna sit eget fames arcu fames facilisis, penatibus inceptos. Mattis adipiscing torquent tempus, mi?
Orci himenaeos tempor auctor. Suscipit sollicitudin laoreet praesent ultrices dictumst mattis. Mi facilisi consectetur ultrices venenatis leo platea quam! Phasellus amet magna facilisi sociosqu natoque mauris tristique etiam nostra. Vulputate cursus dui semper. Ultrices suspendisse malesuada, dis sociosqu sit feugiat cras sit facilisis potenti. Potenti neque habitant morbi justo? Sem nisl tellus volutpat facilisi sed tempor facilisis a suspendisse. Praesent duis gravida hendrerit nisi nisl cum aliquam? Lobortis, convallis sodales turpis porttitor sociosqu ante suspendisse. Augue torquent rhoncus fames venenatis leo odio litora eget posuere quisque cum aliquam. Ac quisque sociis at curae; nascetur et taciti cursus lobortis imperdiet eros. Tempor habitasse pellentesque consectetur semper rhoncus duis? Aliquet nullam, cum facilisis.
</span></p>
<button class="btn btn-primary btn-lg" onclick="readMore()" id="myBtn">Read more</button>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4" id="container">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© Company 2015</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
function readMore(){
let dots= document.getElementById("dots");
let moreText = document.getElementById("more");
let btnText = document.getElementById("myBtn");
if(dots.style.display === "none"){
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>