File size: 14.1Kb
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Katen - Minimal Blog & Magazine HTML Theme</title>
<meta name="description" content="Katen - Minimal Blog & Magazine HTML Theme">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
<!-- STYLES -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/all.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/slick.css" type="text/css" media="all">
<link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- preloader -->
<div id="preloader">
<div class="book">
<div class="inner">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-- site wrapper -->
<div class="site-wrapper">
<div class="main-overlay"></div>
<!-- header -->
<header class="header-default">
<nav class="navbar navbar-expand-lg">
<div class="container-xl">
<!-- site logo -->
<a class="navbar-brand" href="index.html"><img src="images/logo.svg" alt="logo" /></a>
<div class="collapse navbar-collapse">
<!-- menus -->
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="index.html">Home</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="index.html">Magazine</a></li>
<li><a class="dropdown-item" href="personal.html">Personal</a></li>
<li><a class="dropdown-item" href="personal-alt.html">Personal Alt</a></li>
<li><a class="dropdown-item" href="minimal.html">Minimal</a></li>
<li><a class="dropdown-item" href="classic.html">Classic</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="category.html">Lifestyle</a>
</li>
<li class="nav-item">
<a class="nav-link" href="category.html">Inspiration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Pages</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="category.html">Category</a></li>
<li><a class="dropdown-item" href="blog-single.html">Blog Single</a></li>
<li><a class="dropdown-item" href="blog-single-alt.html">Blog Single Alt</a></li>
<li><a class="dropdown-item" href="about.html">About</a></li>
<li><a class="dropdown-item" href="contact.html">Contact</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- header right section -->
<div class="header-right">
<!-- social icons -->
<ul class="social-icons list-unstyled list-inline mb-0">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
<!-- header buttons -->
<div class="header-buttons">
<button class="search icon-button">
<i class="icon-magnifier"></i>
</button>
<button class="burger-menu icon-button">
<span class="burger-icon"></span>
</button>
</div>
</div>
</div>
</nav>
</header>
<!-- page header -->
<section class="page-header">
<div class="container-xl">
<div class="text-center">
<h1 class="mt-0 mb-2">Contact</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb justify-content-center mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Contact</li>
</ol>
</nav>
</div>
</div>
</section>
<!-- section main content -->
<section class="main-content">
<div class="container-xl">
<div class="row">
<div class="col-md-4">
<!-- contact info item -->
<div class="contact-item bordered rounded d-flex align-items-center">
<span class="icon icon-phone"></span>
<div class="details">
<h3 class="mb-0 mt-0">Phone</h3>
<p class="mb-0">+1-202-555-0135</p>
</div>
</div>
<div class="spacer d-md-none d-lg-none" data-height="30"></div>
</div>
<div class="col-md-4">
<!-- contact info item -->
<div class="contact-item bordered rounded d-flex align-items-center">
<span class="icon icon-envelope-open"></span>
<div class="details">
<h3 class="mb-0 mt-0">E-Mail</h3>
<p class="mb-0">hello@example.com</p>
</div>
</div>
<div class="spacer d-md-none d-lg-none" data-height="30"></div>
</div>
<div class="col-md-4">
<!-- contact info item -->
<div class="contact-item bordered rounded d-flex align-items-center">
<span class="icon icon-map"></span>
<div class="details">
<h3 class="mb-0 mt-0">Location</h3>
<p class="mb-0">California, USA</p>
</div>
</div>
</div>
</div>
<div class="spacer" data-height="50"></div>
<!-- section header -->
<div class="section-header">
<h3 class="section-title">Send Message</h3>
<img src="images/wave.svg" class="wave" alt="wave" />
</div>
<!-- Contact Form -->
<form id="contact-form" class="contact-form" method="post">
<div class="messages"></div>
<div class="row">
<div class="column col-md-6">
<!-- Name input -->
<div class="form-group">
<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Your name" required="required" data-error="Name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="column col-md-6">
<!-- Email input -->
<div class="form-group">
<input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Email address" required="required" data-error="Email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="column col-md-12">
<!-- Email input -->
<div class="form-group">
<input type="text" class="form-control" id="InputSubject" name="InputSubject" placeholder="Subject" required="required" data-error="Subject is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="column col-md-12">
<!-- Message textarea -->
<div class="form-group">
<textarea name="InputMessage" id="InputMessage" class="form-control" rows="4" placeholder="Your message here..." required="required" data-error="Message is required."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<button type="submit" name="submit" id="submit" value="Submit" class="btn btn-default">Submit Message</button><!-- Send Button -->
</form>
<!-- Contact Form end -->
</div>
</section>
<!-- instagram feed -->
<div class="instagram">
<div class="container-xl">
<!-- button -->
<a href="#" class="btn btn-default btn-instagram">@Katen on Instagram</a>
<!-- images -->
<div class="instagram-feed d-flex flex-wrap">
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-1.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-2.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-3.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-4.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-5.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-6.jpg" alt="insta-title" />
</a>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="container-xl">
<div class="footer-inner">
<div class="row d-flex align-items-center gy-4">
<!-- copyright text -->
<div class="col-md-4">
<span class="copyright">© 2021 Katen. Template by ThemeGer.</span>
</div>
<!-- social icons -->
<div class="col-md-4 text-center">
<ul class="social-icons list-unstyled list-inline mb-0">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<!-- go to top button -->
<div class="col-md-4">
<a href="#" id="return-to-top" class="float-md-end"><i class="icon-arrow-up"></i>Back to Top</a>
</div>
</div>
</div>
</div>
</footer>
</div><!-- end site wrapper -->
<!-- search popup area -->
<div class="search-popup">
<!-- close button -->
<button type="button" class="btn-close" aria-label="Close"></button>
<!-- content -->
<div class="search-content">
<div class="text-center">
<h3 class="mb-4 mt-0">Press ESC to close</h3>
</div>
<!-- form -->
<form class="d-flex search-form">
<input class="form-control me-2" type="search" placeholder="Search and press enter ..." aria-label="Search">
<button class="btn btn-default btn-lg" type="submit"><i class="icon-magnifier"></i></button>
</form>
</div>
</div>
<!-- canvas menu -->
<div class="canvas-menu d-flex align-items-end flex-column">
<!-- close button -->
<button type="button" class="btn-close" aria-label="Close"></button>
<!-- logo -->
<div class="logo">
<img src="images/logo.svg" alt="Katen" />
</div>
<!-- menu -->
<nav>
<ul class="vertical-menu">
<li class="active">
<a href="index.html">Home</a>
<ul class="submenu">
<li><a href="index.html">Magazine</a></li>
<li><a href="personal.html">Personal</a></li>
<li><a href="personal-alt.html">Personal Alt</a></li>
<li><a href="minimal.html">Minimal</a></li>
<li><a href="classic.html">Classic</a></li>
</ul>
</li>
<li><a href="category.html">Lifestyle</a></li>
<li><a href="category.html">Inspiration</a></li>
<li>
<a href="#">Pages</a>
<ul class="submenu">
<li><a href="category.html">Category</a></li>
<li><a href="blog-single.html">Blog Single</a></li>
<li><a href="blog-single-alt.html">Blog Single Alt</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- social icons -->
<ul class="social-icons list-unstyled list-inline mb-0 mt-auto w-100">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<!-- JAVA SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.sticky-sidebar.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>