-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate.html
156 lines (128 loc) · 7.33 KB
/
template.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<!-- Bootstrap -->
<!--<script src="https://use.fontawesome.com/89061baac8.js"></script>-->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<!-- Navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Navbar Branding -->
</i><a class="navbar-brand" href="#">Synthetic Cloud</a>
<!-- Navbar Toggle -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Main Navbar -->
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="products.html">Virtual Private Servers</a></li>
<li><a href="products.html">Cloud Storage</a></li>
<li><a href="products.html">Public Cloud</a></li>
<li><a href="products.html">Private Cloud</a></li>
</ul>
</li>
<li><a href="#contact" data-toggle="modal">Contact</a></li>
</ul>
</div>
</div>
</div>
<!--Start Grid-->
<div class="row vertically-center">
<!-- Left Side -->
<div class="col-md-6">
<!-- Title -->
<div class="whiteBorder">
<div class="main-title">
<h1>Synthetic Cloud</h1>
</div>
</div>
<br>
<!-- Content -->
<div class="whiteBorder">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra enim id volutpat egestas. Ut sollicitudin viverra dolor, nec pharetra tortor dictum et. Integer ullamcorper lacus vitae metus finibus placerat. Maecenas eget laoreet massa. Duis sapien mi, tincidunt pellentesque dolor non, aliquam pharetra velit. Nullam nec aliquet dolor. Integer vel finibus leo, nec fringilla est. Cras at suscipit dui, sed varius eros. Nam sit amet quam quis odio eleifend lacinia. Donec sit amet iaculis sapien, eget hendrerit nisi. Suspendisse quis lectus vel nisi cursus dictum. Duis iaculis quis magna vitae ullamcorper. Praesent sed dui quis urna hendrerit eleifend vitae feugiat nunc. Curabitur ut nunc sodales, imperdiet est vitae, rutrum lectus.
</p>
<p>
Maecenas et ipsum ante. Integer suscipit mi ac ligula vehicula, id vestibulum leo lacinia. Donec imperdiet, nulla id posuere faucibus, dolor ligula faucibus nisi, sit amet venenatis enim tellus eget magna. Duis ac nibh eu metus dignissim vehicula. Fusce vehicula ex odio, maximus commodo mauris dictum at. Phasellus dignissim mauris sit amet metus faucibus, in congue sapien dapibus. Proin massa augue, scelerisque in erat sed, ultricies ultrices neque. Integer eget lectus id nisi malesuada bibendum. Donec accumsan fermentum malesuada. Quisque vitae tincidunt ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec nunc ac lacus maximus rutrum. Aenean velit mauris, venenatis non mi ut, molestie elementum sapien.
</p>
<p>
Pellentesque quis semper velit. Pellentesque finibus maximus nibh et feugiat. Quisque eget sollicitudin lorem. Curabitur viverra mi nulla, ac facilisis nulla fringilla id. In nec ornare tortor.
Nulla quis sapien orci. Nam vel venenatis risus. Ut rhoncus, velit eget pharetra lacinia, velit magna scelerisque neque, id luctus urna justo id orci. Quisque id tempor elit. Nunc sagittis arcu sit amet leo finibus, vel feugiat libero pretium. Sed ornare mauris eleifend lorem fringilla pharetra. Aliquam erat volutpat. Vivamus rutrum augue sit amet molestie finibus.
</p>
</div>
</div>
<!-- Right Side -->
<div class="col-md-6">
<div style="text-align: center" class="container-fluid">
<img class="whiteBorder" src="http://placehold.it/800x600">
</div>
</div>
</div>
<!-- Footer -->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-brand">Designed by Kieran West 2017</div>
<a href="#contact" class="navbar-btn btn btn-primary pull-right" data-toggle="modal">Contact Us</a>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--Modal Form Start-->
<form class="form-horizontal">
<div class="modal-header">
<h3>Contact Us</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="[email protected]">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-success" type="submit">Submit</a>
<a class="btn btn-default" data-dismiss="modal">
Close
</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>