1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="utf-8 ">
5
+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
6
+ < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
7
+ < title > Cafe House - Contact Info.</ title >
8
+ <!--
9
+ Cafe House Template
10
+ http://www.templatemo.com/tm-466-cafe-house
11
+ -->
12
+ < link href ='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700 ' rel ='stylesheet ' type ='text/css '>
13
+ < link href ='http://fonts.googleapis.com/css?family=Damion ' rel ='stylesheet ' type ='text/css '>
14
+ < link href ="css/bootstrap.min.css " rel ="stylesheet ">
15
+ < link href ="css/font-awesome.min.css " rel ="stylesheet ">
16
+ < link href ="css/templatemo-style.css " rel ="stylesheet ">
17
+ < link rel ="shortcut icon " href ="img/favicon.ico " type ="image/x-icon " />
18
+
19
+ <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
20
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
21
+ <!--[if lt IE 9]>
22
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
23
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
24
+ <![endif]-->
25
+
26
+ </ head >
27
+ < body >
28
+ <!-- Preloader -->
29
+ < div id ="loader-wrapper ">
30
+ < div id ="loader "> </ div >
31
+ < div class ="loader-section section-left "> </ div >
32
+ < div class ="loader-section section-right "> </ div >
33
+ </ div >
34
+ <!-- End Preloader -->
35
+ < div class ="tm-top-header ">
36
+ < div class ="container ">
37
+ < div class ="row ">
38
+ < div class ="tm-top-header-inner ">
39
+ < div class ="tm-logo-container ">
40
+ < img src ="img/logo.png " alt ="Logo " class ="tm-site-logo ">
41
+ < h1 class ="tm-site-name tm-handwriting-font "> Cafe House</ h1 >
42
+ </ div >
43
+ < div class ="mobile-menu-icon ">
44
+ < i class ="fa fa-bars "> </ i >
45
+ </ div >
46
+ < nav class ="tm-nav ">
47
+ < ul >
48
+ < li > < a href ="index.html "> Home</ a > </ li >
49
+ < li > < a href ="today-special.html "> Today Special</ a > </ li >
50
+ < li > < a href ="menu.html "> Menu</ a > </ li >
51
+ < li > < a href ="contact.html " class ="active "> Contact</ a > </ li >
52
+ </ ul >
53
+ </ nav >
54
+ </ div >
55
+ </ div >
56
+ </ div >
57
+ </ div >
58
+ < section class ="tm-welcome-section ">
59
+ < div class ="container tm-position-relative ">
60
+ < div class ="tm-lights-container ">
61
+ < img src ="img/light.png " alt ="Light " class ="light light-1 ">
62
+ < img src ="img/light.png " alt ="Light " class ="light light-2 ">
63
+ < img src ="img/light.png " alt ="Light " class ="light light-3 ">
64
+ </ div >
65
+ < div class ="row tm-welcome-content ">
66
+ < h2 class ="white-text tm-handwriting-font tm-welcome-header "> < img src ="img/header-line.png " alt ="Line " class ="tm-header-line "> Contact Us < img src ="img/header-line.png " alt ="Line " class ="tm-header-line "> </ h2 >
67
+ < h2 class ="gold-text tm-welcome-header-2 "> Cafe House</ h2 >
68
+ < p class ="gray-text tm-welcome-description "> Cafe House is free < span class ="gold-text "> responsive Bootstrap</ span > v3.3.5 layout by < span class ="gold-text "> templatemo</ span > . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculusnec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</ p >
69
+ < a href ="#main " class ="tm-more-button tm-more-button-welcome "> Message Us</ a >
70
+ </ div >
71
+ < img src ="img/table-set.png " alt ="Table Set " class ="tm-table-set img-responsive ">
72
+ </ div >
73
+ </ section >
74
+ < div class ="tm-main-section light-gray-bg ">
75
+ < div class ="container " id ="main ">
76
+ < section class ="tm-section row ">
77
+ < h2 class ="col-lg-12 margin-bottom-30 "> Send us a message</ h2 >
78
+ < form action ="# " method ="post " class ="tm-contact-form ">
79
+ < div class ="col-lg-6 col-md-6 ">
80
+ < div class ="form-group ">
81
+ < input type ="text " id ="contact_name " class ="form-control " placeholder ="NAME " />
82
+ </ div >
83
+ < div class ="form-group ">
84
+ < input type ="email " id ="contact_email " class ="form-control " placeholder ="EMAIL " />
85
+ </ div >
86
+ < div class ="form-group ">
87
+ < input type ="text " id ="contact_subject " class ="form-control " placeholder ="SUBJECT " />
88
+ </ div >
89
+ < div class ="form-group ">
90
+ < textarea id ="contact_message " class ="form-control " rows ="6 " placeholder ="MESSAGE "> </ textarea >
91
+ </ div >
92
+ < div class ="form-group ">
93
+ < button class ="tm-more-button " type ="submit " name ="submit "> Send message</ button >
94
+ </ div >
95
+ </ div >
96
+ < div class ="col-lg-6 col-md-6 ">
97
+ < div id ="google-map "> </ div >
98
+ </ div >
99
+ </ form >
100
+ </ section >
101
+ </ div >
102
+ </ div >
103
+ < footer >
104
+ < div class ="tm-black-bg ">
105
+ < div class ="container ">
106
+ < div class ="row margin-bottom-60 ">
107
+ < nav class ="col-lg-3 col-md-3 tm-footer-nav tm-footer-div ">
108
+ < h3 class ="tm-footer-div-title "> Main Menu</ h3 >
109
+ < ul >
110
+ < li > < a href ="# "> Home</ a > </ li >
111
+ < li > < a href ="# "> About Us</ a > </ li >
112
+ < li > < a href ="# "> Directory</ a > </ li >
113
+ < li > < a href ="# "> Blog</ a > </ li >
114
+ < li > < a href ="# "> Our Services</ a > </ li >
115
+ </ ul >
116
+ </ nav >
117
+ < div class ="col-lg-5 col-md-5 tm-footer-div ">
118
+ < h3 class ="tm-footer-div-title "> About Us</ h3 >
119
+ < p class ="margin-top-15 "> Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</ p >
120
+ < p class ="margin-top-15 "> Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</ p >
121
+ </ div >
122
+ < div class ="col-lg-4 col-md-4 tm-footer-div ">
123
+ < h3 class ="tm-footer-div-title "> Get Social</ h3 >
124
+ < p > Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante.</ p >
125
+ < div class ="tm-social-icons-container ">
126
+ < a href ="# " class ="tm-social-icon "> < i class ="fa fa-facebook "> </ i > </ a >
127
+ < a href ="# " class ="tm-social-icon "> < i class ="fa fa-twitter "> </ i > </ a >
128
+ < a href ="# " class ="tm-social-icon "> < i class ="fa fa-linkedin "> </ i > </ a >
129
+ < a href ="# " class ="tm-social-icon "> < i class ="fa fa-youtube "> </ i > </ a >
130
+ < a href ="# " class ="tm-social-icon "> < i class ="fa fa-behance "> </ i > </ a >
131
+ </ div >
132
+ </ div >
133
+ </ div >
134
+ </ div >
135
+ </ div >
136
+ < div class ="container ">
137
+ < div class ="row tm-copyright ">
138
+ < p class ="col-lg-12 small copyright-text text-center "> Copyright © 2084 Your Cafe House</ p >
139
+ </ div >
140
+ </ div >
141
+ </ footer > <!-- Footer content-->
142
+ <!-- JS -->
143
+ < script type ="text/javascript " src ="js/jquery-1.11.2.min.js "> </ script > <!-- jQuery -->
144
+ < script type ="text/javascript " src ="js/templatemo-script.js "> </ script > <!-- Templatemo Script -->
145
+ < script >
146
+ /* Google map
147
+ ------------------------------------------------*/
148
+ var map = '' ;
149
+ var center ;
150
+
151
+ function initialize ( ) {
152
+ var mapOptions = {
153
+ zoom : 16 ,
154
+ center : new google . maps . LatLng ( 13.758468 , 100.567481 ) ,
155
+ scrollwheel : false
156
+ } ;
157
+
158
+ map = new google . maps . Map ( document . getElementById ( 'google-map' ) , mapOptions ) ;
159
+
160
+ google . maps . event . addDomListener ( map , 'idle' , function ( ) {
161
+ calculateCenter ( ) ;
162
+ } ) ;
163
+
164
+ google . maps . event . addDomListener ( window , 'resize' , function ( ) {
165
+ map . setCenter ( center ) ;
166
+ } ) ;
167
+ }
168
+
169
+ function calculateCenter ( ) {
170
+ center = map . getCenter ( ) ;
171
+ }
172
+
173
+ function loadGoogleMap ( ) {
174
+ var script = document . createElement ( 'script' ) ;
175
+ script . type = 'text/javascript' ;
176
+ script . src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize' ;
177
+ document . body . appendChild ( script ) ;
178
+ }
179
+ $ ( document ) . ready ( function ( ) {
180
+ loadGoogleMap ( ) ;
181
+ } ) ;
182
+ </ script >
183
+ </ body >
184
+ </ html >
0 commit comments