"Professional landing page (native css)"
Bootstrap 3.0.0 Snippet by laroox

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--made by Larbi JIRARI <jirari.larbi@gmail.com> -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="body">
<div id="navigation">
<ul>
<li>Home</li>
<li>FIND A SITE</li>
<li>INDUSTRY RESOURCES</li>
<li>JOIN THE DIRECTORY</li>
<li>CONTACT</li>
</ul>
</div>
<div id="hero"><img src="http://via.placeholder.com/769x150"/></div>
<div id="content">
<div id="content-title">
<h1>Create a Site Listing</h1>
<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. </p>
</div>
<div id="content-navigation">
<ul>
<li>Information</li>
<li>Contact Info</li>
<li>Personnal</li>
<li>Patient</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
/*made by Larbi JIRARI <jirari.larbi@gmail.com>*/
ul{
padding: 0;
list-style-type: none;
}
#body{
max-width: 769px;
font-family: Sans-serif;
vertical-align: inherit;
margin-left: auto;
margin-right: auto;
}
#navigation >ul {
float: right;
margin-left: 15%;
font-weight: 600;
}
#navigation li {
display: inline-block;
margin: 10px;
width:15%;
text-align: center;
}
#navigation li:hover {
cursor: pointer;
text-decoration:underline;
}
#content-navigation >ul {
width: 100%;
font-size: 1.1em;
display: table;
}
#content-navigation li {
display: table-cell;
padding: 5px;
/* width:15%; */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: