Skip to content

Commit 7546555

Browse files
zoeys-minizoeys-mini
committed
123
1 parent 35cbc49 commit 7546555

34 files changed

+3632
-0
lines changed

‎contact.html

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>KOMPLEET</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Free Responsive Html5 Templates">
8+
<meta name="author" content="">
9+
10+
<!-- styles -->
11+
12+
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
13+
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
14+
<link rel="stylesheet" href="css/style.css">
15+
<link rel="stylesheet" href="css/menu.min.css">
16+
17+
18+
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
19+
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
20+
<!--[if lt IE 9]>
21+
<script src="js/html5shiv.js"></script>
22+
<script src="js/respond.min.js"></script>
23+
<![endif]-->
24+
</head>
25+
26+
<body id="wrapper">
27+
28+
<!-- /////////////////////////////////////////Navigation -->
29+
<button id="mm-menu-toggle" class="mm-menu-toggle">Toggle Menu</button>
30+
<nav id="mm-menu" class="mm-menu">
31+
<div class="mm-menu__header">
32+
<h2 class="mm-menu__title">KOMPLEET</h2>
33+
</div>
34+
<ul class="mm-menu__items">
35+
<li class="mm-menu__item">
36+
<a class="mm-menu__link" href="index.html">
37+
<span class="mm-menu__link-text"><i class="fa fa-home"></i> Home</span>
38+
</a>
39+
</li>
40+
<li class="mm-menu__item">
41+
<a class="mm-menu__link" href="index.html">
42+
<span class="mm-menu__link-text"><i class="fa fa-user"></i> Blog</span>
43+
</a>
44+
</li>
45+
<li class="mm-menu__item">
46+
<a class="mm-menu__link" href="single.html">
47+
<span class="mm-menu__link-text"><i class="fa fa-inbox"></i> About</span>
48+
</a>
49+
</li>
50+
<li class="mm-menu__item">
51+
<a class="mm-menu__link" href="contact.html">
52+
<span class="mm-menu__link-text"><i class="fa fa-heart"></i> Contact</span>
53+
</a>
54+
</li>
55+
</ul>
56+
</nav><!-- /nav -->
57+
58+
<!-- /////////////////////////////////////////Header -->
59+
<div class="top-header">
60+
<div class="container">
61+
<ul class="list-inline top-social">
62+
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
63+
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
64+
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
65+
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
66+
</ul>
67+
</div>
68+
</div>
69+
<div class="svg-container nav-svg svg-block">
70+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1950 150">
71+
<g transform="translate(0,-902.36218)"></g>
72+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
73+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
74+
<path d="M 0,150 0,0 1925,0"></path>
75+
</svg>
76+
</div>
77+
<header id="masthead" class="site-header" role="banner" style="background-position: 50% -120px;">
78+
<div class="overlay"></div>
79+
<div class="container">
80+
<div class="site-branding">
81+
<a href="index.html" title="KOMPLEET"><img class="site-logo" src="images/logo.png" alt="KOMPLEET"></a>
82+
</div><!-- .site-branding -->
83+
</div>
84+
<div class="svg-container header-svg svg-block">
85+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1890 150">
86+
<g transform="translate(0,-902.36218)"></g>
87+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
88+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
89+
<path d="m 1925,0 0,150 -1925,0"></path>
90+
</svg>
91+
</div>
92+
</header><!-- #masthead -->
93+
<!-- Header -->
94+
95+
96+
<!-- /////////////////////////////////////////Content -->
97+
<div id="page-content" class="sub-page">
98+
99+
<!-- //////////// -->
100+
<article class="box-content container" >
101+
<div class="svg-container single-post-svg svg-block">
102+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1890 150">
103+
<g transform="translate(0,-902.36218)"></g>
104+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
105+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
106+
<path d="m 1925,0 0,150 -1925,0"></path>
107+
</svg>
108+
</div>
109+
<div class="post">
110+
<h1 class="entry-title">Contact</h1>
111+
<div id="contact_form">
112+
<form name="form1" id="ff" method="post" action="">
113+
<div class="row">
114+
<div class="col-md-4">
115+
<label>
116+
<input type="text" name="name" id="name" placeholder="Your Name" required>
117+
</label>
118+
</div>
119+
<div class="col-md-4">
120+
<label>
121+
<input type="email" name="email" id="email" placeholder="Your Email" required>
122+
</label>
123+
</div>
124+
<div class="col-md-4">
125+
<label>
126+
<input type="text" name="website" id="website" placeholder="Subject">
127+
</label>
128+
</div>
129+
</div>
130+
<label>
131+
<textarea name="message" id="message" placeholder="Your message" ></textarea>
132+
</label>
133+
<center><input class="sendButton" type="submit" name="Submit" value="Submit"></center>
134+
</form>
135+
</div>
136+
</div>
137+
<div class="embed-container maps">
138+
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3164.289259162295!2d-120.7989351!3d37.5246781!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8091042b3386acd7%3A0x3b4a4cedc60363dd!2sMain+St%2C+Denair%2C+CA+95316%2C+Hoa+K%E1%BB%B3!5e0!3m2!1svi!2s!4v1434016649434" width="100%" height="450px" frameborder="0" style="border: 0"></iframe>
139+
</div>
140+
<div class="svg-container single-post-svg single-svg-bottom svg-block">
141+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1920 150">
142+
<g transform="translate(0,-902.36218)"></g>
143+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
144+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
145+
<path d="M 0,150 0,0 1925,0"></path>
146+
</svg>
147+
</div>
148+
149+
150+
</article>
151+
</div>
152+
153+
<div class="svg-container footer-svg svg-block">
154+
155+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1890 150">
156+
<g transform="translate(0,-902.36218)"></g>
157+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
158+
<path d="m 898.41609,-33.21176 0.01,0 -0.005,-0.009 -0.005,0.009 z"></path>
159+
<path d="m 1925,0 0,150 -1925,0"></path>
160+
</svg>
161+
</div>
162+
<!-- /////////////////////////////////////////Footer -->
163+
<footer>
164+
<div class="wrap-footer">
165+
<div class="container">
166+
<div class="row">
167+
<div class="col-md-4">
168+
<span class="copyright">Copyright &copy; Your Website <br/> More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></span>
169+
</div>
170+
<div class="col-md-4">
171+
<ul class="list-inline social-buttons">
172+
<li><a href="#"><i class="fa fa-twitter"></i></a>
173+
</li>
174+
<li><a href="#"><i class="fa fa-facebook"></i></a>
175+
</li>
176+
<li><a href="#"><i class="fa fa-linkedin"></i></a>
177+
</li>
178+
</ul>
179+
</div>
180+
<div class="col-md-4">
181+
<ul class="list-inline quicklinks">
182+
<li><a href="#">Privacy Policy</a>
183+
</li>
184+
<li><a href="#">Terms of Use</a>
185+
</li>
186+
</ul>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
191+
</footer>
192+
<!-- Footer -->
193+
194+
<!-- Top Slider -->
195+
<script src="js/jquery.js"></script>
196+
197+
<!-- Menu Js -->
198+
<script src="js/materialMenu.js"></script>
199+
<script>
200+
var menu = new Menu;
201+
</script>
202+
203+
<!-- Bootstrap Core JavaScript -->
204+
<script src="js/bootstrap.min.js"></script>
205+
206+
<!-- Google Map -->
207+
<script>
208+
$('.maps').click(function () {
209+
$('.maps iframe').css("pointer-events", "auto");
210+
});
211+
212+
$( ".maps" ).mouseleave(function() {
213+
$('.maps iframe').css("pointer-events", "none");
214+
});
215+
</script>
216+
</body>
217+
</html>

‎css/bootstrap.min.css

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/menu.min.css

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
2+
.mm-menu-toggle {
3+
position: fixed;
4+
top: 12px;
5+
left: 12px;
6+
z-index: 20;
7+
width: 24px;
8+
height: 18px;
9+
background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px);
10+
background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #ffffff 7px, #ffffff 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px);
11+
font-size: 0;
12+
text-indent: -9999px
13+
}
14+
.mm-menu-toggle::after,
15+
.mm-menu-toggle::before {
16+
display: block;
17+
position: absolute;
18+
left: 0;
19+
width: 100%;
20+
height: 4px;
21+
background-color: #ffffff;
22+
content: ""
23+
}
24+
.mm-menu-toggle::before {
25+
top: 0;
26+
-webkit-transform-origin: bottom left;
27+
-ms-transform-origin: bottom left;
28+
transform-origin: bottom left
29+
}
30+
.mm-menu-toggle::after {
31+
bottom: 0;
32+
-webkit-transform-origin: top left;
33+
-ms-transform-origin: top left;
34+
transform-origin: top left
35+
}
36+
.mm-menu-toggle,
37+
.mm-menu-toggle::after,
38+
.mm-menu-toggle::before {
39+
-webkit-transition: all .5s;
40+
transition: all .5s
41+
}
42+
.mm-menu-toggle.active {
43+
-webkit-transform: rotate(360deg);
44+
-ms-transform: rotate(360deg);
45+
transform: rotate(360deg)
46+
}
47+
.mm-menu-toggle.active::before {
48+
width: 75%;
49+
-webkit-transform: translateY(7px) rotate(-45deg);
50+
-ms-transform: translateY(7px) rotate(-45deg);
51+
transform: translateY(7px) rotate(-45deg)
52+
}
53+
.mm-menu-toggle.active::after {
54+
width: 75%;
55+
-webkit-transform: translateY(-7px) rotate(45deg);
56+
-ms-transform: translateY(-7px) rotate(45deg);
57+
transform: translateY(-7px) rotate(45deg)
58+
}
59+
.mm-menu {
60+
position: fixed;
61+
top: 0;
62+
left: 0;
63+
z-index: 12;
64+
background-color: #fff;
65+
width: 100%;
66+
height: 100%;
67+
overflow-y: auto;
68+
box-shadow: 0;
69+
-webkit-transform: translateX(-100%);
70+
-ms-transform: translateX(-100%);
71+
transform: translateX(-100%);
72+
-webkit-transition: -webkit-transform .5s, box-shadow .5s;
73+
transition: transform .5s, box-shadow .5s
74+
}
75+
.mm-menu.active {
76+
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
77+
-webkit-transform: translateX(0);
78+
-ms-transform: translateX(0);
79+
transform: translateX(0)
80+
}
81+
@media all and (min-width: 300px) {
82+
.mm-menu {
83+
width: 300px;
84+
-webkit-transform: translateX(-300px);
85+
-ms-transform: translateX(-300px);
86+
transform: translateX(-300px)
87+
}
88+
}
89+
.mm-menu__header {
90+
position: relative;
91+
width: 100%;
92+
height: 190px;
93+
background: #222;
94+
}
95+
.mm-menu__title {
96+
position: absolute;
97+
bottom: 12px;
98+
left: 82px;
99+
margin: 0;
100+
padding: 0;
101+
color: #fff;
102+
font-size: 22px
103+
}
104+
.mm-menu__items {
105+
list-style: none;
106+
margin: 0;
107+
padding: 0
108+
}
109+
.mm-menu__item {
110+
display: block;
111+
width: 100%;
112+
opacity: 0;
113+
-webkit-transform: translateX(-50%);
114+
-ms-transform: translateX(-50%);
115+
transform: translateX(-50%)
116+
}
117+
.mm-menu__item.in-view {
118+
opacity: 1;
119+
-webkit-transform: translateX(0);
120+
-ms-transform: translateX(0);
121+
transform: translateX(0)
122+
}
123+
124+
.mm-menu__link {
125+
display: block;
126+
position: relative;
127+
overflow: hidden;
128+
margin: 4px 0;
129+
padding: 12px;
130+
color: #727272;
131+
font-size: 16px;
132+
text-decoration: none;
133+
-webkit-transition: background .5s, color .5s;
134+
transition: background .5s, color .5s
135+
}
136+
.mm-menu__link-text {
137+
position: relative;
138+
z-index: 2
139+
}
140+
.mm-menu__link--touch-effect {
141+
display: block;
142+
position: absolute;
143+
z-index: 1;
144+
width: 0;
145+
height: 0;
146+
border-radius: 100%;
147+
background-color: #B6B6B6;
148+
-webkit-transform: scale(0);
149+
-ms-transform: scale(0);
150+
transform: scale(0);
151+
-webkit-transform-origin: 50% 50%;
152+
-ms-transform-origin: 50% 50%;
153+
transform-origin: 50% 50%
154+
}
155+
.mm-menu__link--touch-effect.animating {
156+
-webkit-transform: scale(1);
157+
-ms-transform: scale(1);
158+
transform: scale(1);
159+
-webkit-transition: -webkit-transform .5s;
160+
transition: transform .5s
161+
}
162+
.mm-menu-mask {
163+
display: block;
164+
position: fixed;
165+
top: 0;
166+
left: 0;
167+
z-index: 8;
168+
width: 100%;
169+
height: 100%;
170+
background-color: rgba(0, 0, 0, .8);
171+
visibility: hidden;
172+
opacity: 0;
173+
-webkit-transition: opacity .5s, visibility .5s;
174+
transition: opacity .5s, visibility .5s
175+
}
176+
.mm-menu-mask.active {
177+
visibility: visible;
178+
opacity: 1
179+
}
180+

0 commit comments

Comments
 (0)