View file katen-html/html/minimal.html

File size: 19.7Kb
<!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>

    <div class="container-xl">
        <!-- header -->
        <header class="header-minimal">
            
            <div class="row align-items-center">

                <div class="col-4">
                    <button class="burger-menu icon-button">
                        <span class="burger-icon"></span>
                    </button>
                </div>

                <div class="col-4 text-center">
                    <!-- site logo -->
                    <a class="navbar-brand" href="minimal.html"><img src="images/logo.svg" alt="logo" /></a> 
                </div>

                <div class="col-4">
                    <button class="search icon-button float-end">
                        <i class="icon-magnifier"></i>
                    </button>
                </div>

            </div>

        </header>
    </div>

	<!-- section main content -->
	<section class="main-content-lg">
        <div class="container-minimal">
            <!-- post -->
            <div class="post post-xl">
                <!-- top section -->
                <div class="post-top">
                    <ul class="meta list-inline mb-0">
                        <li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Katen Doe</a></li>
                        <li class="list-inline-item">29 March 2021</li>
                        <li class="list-inline-item"><i class="icon-bubble"></i> (0)</li>
                    </ul>
                    <h5 class="post-title mb-0 mt-4"><a href="blog-single.html">How To Become Better With Building In 1 Month</a></h5>
                </div>
                <!-- thumbnail -->
                <div class="thumb rounded">
                    <a href="category.html" class="category-badge lg position-absolute">Lifestyle</a>
                    <span class="post-format">
                        <i class="icon-picture"></i>
                    </span>
                    <a href="blog-single.html">
                        <div class="inner">
                            <img src="images/posts/post-xl-1.jpg" alt="post-title" />
                        </div>
                    </a>
                </div>
                <!-- details -->
                <div class="details">
                    <p class="excerpt mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                </div>
                <div class="post-bottom clearfix d-flex align-items-center">
                    <div class="social-share me-auto">
                        <button class="toggle-button icon-share"></button>
                        <ul class="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-linkedin-in"></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-telegram-plane"></i></a></li>
                            <li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a></li>
                        </ul>
                    </div>
                    <div class="float-end d-none d-md-block">
                        <a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
                    </div>
                    <div class="more-button d-block d-md-none float-end">
                        <a href="blog-single.html"><span class="icon-options"></span></a>
                    </div>
                </div>
            </div>

            <!-- post -->
            <div class="post post-xl">
                <!-- top section -->
                <div class="post-top">
                    <ul class="meta list-inline mb-0">
                        <li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Katen Doe</a></li>
                        <li class="list-inline-item">29 March 2021</li>
                        <li class="list-inline-item"><i class="icon-bubble"></i> (0)</li>
                    </ul>
                    <h5 class="post-title mb-0 mt-4"><a href="blog-single.html">Most Important Thing You Need To Know About Light Lamp</a></h5>
                </div>
                <!-- thumbnail -->
                <div class="thumb rounded">
                    <a href="category.html" class="category-badge lg position-absolute">Inspiration</a>
                    <a href="blog-single.html">
                        <div class="inner">
                            <img src="images/posts/post-xl-2.jpg" alt="post-title" />
                        </div>
                    </a>
                </div>
                <!-- details -->
                <div class="details">
                    <p class="excerpt mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                </div>
                <div class="post-bottom clearfix d-flex align-items-center">
                    <div class="social-share me-auto">
                        <button class="toggle-button icon-share"></button>
                        <ul class="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-linkedin-in"></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-telegram-plane"></i></a></li>
                            <li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a></li>
                        </ul>
                    </div>
                    <div class="float-end d-none d-md-block">
                        <a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
                    </div>
                    <div class="more-button d-block d-md-none float-end">
                        <a href="blog-single.html"><span class="icon-options"></span></a>
                    </div>
                </div>
            </div>

            <!-- post -->
            <div class="post post-xl">
                <!-- top section -->
                <div class="post-top">
                    <ul class="meta list-inline mb-0">
                        <li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Katen Doe</a></li>
                        <li class="list-inline-item">29 March 2021</li>
                        <li class="list-inline-item"><i class="icon-bubble"></i> (0)</li>
                    </ul>
                    <h5 class="post-title mb-0 mt-4"><a href="blog-single.html">The Secrets To Finding Class Tools For Your Dress</a></h5>
                </div>
                <!-- thumbnail -->
                <div class="thumb rounded">
                    <a href="category.html" class="category-badge lg position-absolute">Culture</a>
                    <span class="post-format">
                        <i class="icon-camrecorder"></i>
                    </span>
                    <a href="blog-single.html">
                        <div class="inner">
                            <img src="images/posts/post-xl-3.jpg" alt="post-title" />
                        </div>
                    </a>
                </div>
                <!-- details -->
                <div class="details">
                    <p class="excerpt mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                </div>
                <div class="post-bottom clearfix d-flex align-items-center">
                    <div class="social-share me-auto">
                        <button class="toggle-button icon-share"></button>
                        <ul class="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-linkedin-in"></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-telegram-plane"></i></a></li>
                            <li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a></li>
                        </ul>
                    </div>
                    <div class="float-end d-none d-md-block">
                        <a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
                    </div>
                    <div class="more-button d-block d-md-none float-end">
                        <a href="blog-single.html"><span class="icon-options"></span></a>
                    </div>
                </div>
            </div>

            <!-- post -->
            <div class="post post-xl">
                <!-- top section -->
                <div class="post-top">
                    <ul class="meta list-inline mb-0">
                        <li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Katen Doe</a></li>
                        <li class="list-inline-item">29 March 2021</li>
                        <li class="list-inline-item"><i class="icon-bubble"></i> (0)</li>
                    </ul>
                    <h5 class="post-title mb-0 mt-4"><a href="blog-single.html">Wondering How To Make Your Hair Style Rock?</a></h5>
                </div>
                <!-- thumbnail -->
                <div class="thumb rounded">
                    <a href="category.html" class="category-badge lg position-absolute">Trending</a>
                    <a href="blog-single.html">
                        <div class="inner">
                            <img src="images/posts/post-xl-4.jpg" alt="post-title" />
                        </div>
                    </a>
                </div>
                <!-- details -->
                <div class="details">
                    <p class="excerpt mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                </div>
                <div class="post-bottom clearfix d-flex align-items-center">
                    <div class="social-share me-auto">
                        <button class="toggle-button icon-share"></button>
                        <ul class="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-linkedin-in"></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-telegram-plane"></i></a></li>
                            <li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a></li>
                        </ul>
                    </div>
                    <div class="float-end d-none d-md-block">
                        <a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
                    </div>
                    <div class="more-button d-block d-md-none float-end">
                        <a href="blog-single.html"><span class="icon-options"></span></a>
                    </div>
                </div>
            </div>

            <!-- pagination -->
            <nav>
                <ul class="pagination justify-content-center">
                    <li class="page-item active" aria-current="page">
                        <span class="page-link">1</span>
                    </li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                </ul>
            </nav>
        </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 position-left 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>