...
This commit is contained in:
@@ -33,18 +33,113 @@
|
||||
</script>
|
||||
</th:block>
|
||||
<th:block layout:fragment="content" id="content">
|
||||
<div id="main_layer">
|
||||
<section id="banner">
|
||||
<header>
|
||||
<h2>Bum's: <em>짧은 헛소리 혹은 기사?! 링크 있으면 링크까지</a></em></h2>
|
||||
<a href="#" class="button">더 읽으쉴?!<br>[Read More Gibberish]</a>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<div class="post_layer">
|
||||
<th:block class="posts_layer" id="posts" th:each="post : ${Posts}">
|
||||
<div class="post_item" th:onclick="goToView([[${path}]],[[${post.id}]])" >
|
||||
<span id="postTitle" class="post_attr" th:text="${post.title}"></span>
|
||||
<div id="content" class="post_attr content" th:attr="data=${post.content}"></div>
|
||||
<span id="writeDate" class="post_attr" th:text="${#dates.format(post.writeTime, 'yyyy.MM.dd HH:mm:ss')}"></span>
|
||||
<span id="postId" class="post_attr" th:text="${post.id}"></span>
|
||||
</div>
|
||||
</th:block>
|
||||
<!-- Highlights -->
|
||||
|
||||
|
||||
<!-- Gigantic Heading -->
|
||||
<section class="wrapper style2">
|
||||
<div class="container">
|
||||
<header class="major">
|
||||
<h2>A gigantic heading you can use for whatever</h2>
|
||||
<p>With a much smaller subtitle hanging out just below it</p>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="cta__3" class="wrapper style3">
|
||||
<div class="container">
|
||||
<header>
|
||||
<h2>Are you ready to continue your quest?</h2>
|
||||
</header>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Posts -->
|
||||
<section class="wrapper style2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-6 col-12-narrower">
|
||||
<div class="box post">
|
||||
<a href="#" class="image left"><img src="images/pic01.jpg" alt="" /></a>
|
||||
<div class="inner">
|
||||
<h3>The First Thing</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<div class="box post">
|
||||
<a href="#" class="image left"><img src="images/pic02.jpg" alt="" /></a>
|
||||
<div class="inner">
|
||||
<h3>The Second Thing</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="row">
|
||||
<section class="col-6 col-12-narrower">
|
||||
<div class="box post">
|
||||
<a href="#" class="image left"><img src="images/pic03.jpg" alt="" /></a>
|
||||
<div class="inner">
|
||||
<h3>The Third Thing</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<div class="box post">
|
||||
<a href="#" class="image left"><img src="images/pic04.jpg" alt="" /></a>
|
||||
<div class="inner">
|
||||
<h3>The Fourth Thing</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrapper style1">
|
||||
<div class="container">
|
||||
<div class="row gtr-200">
|
||||
<section class="col-4 col-12-narrower">
|
||||
<div class="box highlight">
|
||||
<i class="icon solid major fa-paper-plane"></i>
|
||||
<h3>This Is Important</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-4 col-12-narrower">
|
||||
<div class="box highlight">
|
||||
<i class="icon solid major fa-pencil-alt"></i>
|
||||
<h3>글쓰기[Writing]</h3>
|
||||
<br>오직 주인장 만의 권한 임요. 그냥 내가 쓰기 편하게 여기 놔둔 메뉴임. 님들은 못씀요.<br>[Only the owner has the authority. This is just a menu that I put here for my convenience. You can't use it.]</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-4 col-12-narrower">
|
||||
<div class="box highlight">
|
||||
<i class="icon solid major fa-wrench"></i>
|
||||
<h3>Probably Important</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA -->
|
||||
<section id="cta" class="wrapper style3">
|
||||
<div class="container">
|
||||
<header>
|
||||
<h2>Are you ready to continue your quest?</h2>
|
||||
<a href="#" class="button">Insert Coin</a>
|
||||
</header>
|
||||
</div>
|
||||
</section>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Arcana by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>BUM'sPace</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
<div id="page-wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
|
||||
<!-- Logo -->
|
||||
<h1><a href="index.html" id="logo">BUM ' <em>sPace</em></a></h1>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li class="current"><a href="index.html">Home</a></li>
|
||||
<li>
|
||||
<a href="#">Dropdown</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam sed tempus</a></li>
|
||||
<li>
|
||||
<a href="#">Submenu</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Phasellus magna</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam nisl</a></li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="left-sidebar">Left Sidebar</a></li>
|
||||
<li><a href="right-sidebar">Right Sidebar</a></li>
|
||||
<li><a href="two-sidebar">Two Sidebar</a></li>
|
||||
<li><a href="no-sidebar">No Sidebar</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Banner -->
|
||||
<section id="banner">
|
||||
<header>
|
||||
<h2>Bum's: <em>A responsive site template freebie by <a href="http://html5up.net">HTML5 UP</a></em></h2>
|
||||
<a href="#" class="button">Learn More</a>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<!-- Highlights -->
|
||||
|
||||
|
||||
<!-- Gigantic Heading -->
|
||||
<!-- <section class="wrapper style2">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <header class="major">-->
|
||||
<!-- <h2>A gigantic heading you can use for whatever</h2>-->
|
||||
<!-- <p>With a much smaller subtitle hanging out just below it</p>-->
|
||||
<!-- </header>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
<!-- Posts -->
|
||||
<section class="wrapper style2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-6 col-12-narrower">
|
||||
<div class="box post">
|
||||
<a href="#" class="image left"><img src="images/pic01.jpg" alt="" /></a>
|
||||
<div class="inner">
|
||||
<h3>The First Thing</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<div class="box post">
|
||||
<a href="#" class="image left"><img src="images/pic02.jpg" alt="" /></a>
|
||||
<div class="inner">
|
||||
<h3>The Second Thing</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="row">
|
||||
<section class="col-6 col-12-narrower">
|
||||
<div class="box post">
|
||||
<a href="#" class="image left"><img src="images/pic03.jpg" alt="" /></a>
|
||||
<div class="inner">
|
||||
<h3>The Third Thing</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<div class="box post">
|
||||
<a href="#" class="image left"><img src="images/pic04.jpg" alt="" /></a>
|
||||
<div class="inner">
|
||||
<h3>The Fourth Thing</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrapper style1">
|
||||
<div class="container">
|
||||
<div class="row gtr-200">
|
||||
<section class="col-4 col-12-narrower">
|
||||
<div class="box highlight">
|
||||
<i class="icon solid major fa-paper-plane"></i>
|
||||
<h3>This Is Important</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-4 col-12-narrower">
|
||||
<div class="box highlight">
|
||||
<i class="icon solid major fa-pencil-alt"></i>
|
||||
<h3>Also Important</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-4 col-12-narrower">
|
||||
<div class="box highlight">
|
||||
<i class="icon solid major fa-wrench"></i>
|
||||
<h3>Probably Important</h3>
|
||||
<p>Duis neque nisi, dapibus sed mattis et quis, nibh. Sed et dapibus nisl amet mattis, sed a rutrum accumsan sed. Suspendisse eu.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA -->
|
||||
<section id="cta" class="wrapper style3">
|
||||
<div class="container">
|
||||
<header>
|
||||
<h2>Are you ready to continue your quest?</h2>
|
||||
<a href="#" class="button">Insert Coin</a>
|
||||
</header>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Footer -->
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Mattis et quis rutrum</a></li>
|
||||
<li><a href="#">Suspendisse amet varius</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan dolor</a></li>
|
||||
<li><a href="#">Mattis rutrum accumsan</a></li>
|
||||
<li><a href="#">Suspendisse varius nibh</a></li>
|
||||
<li><a href="#">Sed et dapibus mattis</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>More Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Duis neque nisi dapibus</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan sed</a></li>
|
||||
<li><a href="#">Mattis et sed accumsan</a></li>
|
||||
<li><a href="#">Duis neque nisi sed</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum amet varius</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<h3>Get In Touch</h3>
|
||||
<form>
|
||||
<div class="row gtr-50">
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" class="button alt" value="Send Message" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons -->
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="copyright">
|
||||
<ul class="menu">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.dropotron.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Arcana by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Left Sidebar - Arcana by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
<div id="page-wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
|
||||
<!-- Logo -->
|
||||
<h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li>
|
||||
<a href="#">Dropdown</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam sed tempus</a></li>
|
||||
<li>
|
||||
<a href="#">Submenu</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Phasellus magna</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam nisl</a></li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="current"><a href="left-sidebar">Left Sidebar</a></li>
|
||||
<li><a href="right-sidebar">Right Sidebar</a></li>
|
||||
<li><a href="two-sidebar">Two Sidebar</a></li>
|
||||
<li><a href="no-sidebar">No Sidebar</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<section class="wrapper style1">
|
||||
<div class="container">
|
||||
<div class="row gtr-200">
|
||||
<div class="col-4 col-12-narrower">
|
||||
<div id="sidebar">
|
||||
|
||||
<!-- Sidebar -->
|
||||
|
||||
<section>
|
||||
<h3>Just a Subheading</h3>
|
||||
<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
|
||||
Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
|
||||
Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
|
||||
<footer>
|
||||
<a href="#" class="button">Continue Reading</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Another Subheading</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
|
||||
<li><a href="#">Ornare in hendrerit in lectus</a></li>
|
||||
<li><a href="#">Semper mod quis eget mi dolore</a></li>
|
||||
<li><a href="#">Consequat etiam lorem phasellus</a></li>
|
||||
<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
|
||||
<li><a href="#">Semper mod quisturpis nisi</a></li>
|
||||
</ul>
|
||||
<footer>
|
||||
<a href="#" class="button">More Random Links</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8 col-12-narrower imp-narrower">
|
||||
<div id="content">
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>Left Sidebar</h2>
|
||||
<p>Sidebar on the left, content on the right.</p>
|
||||
</header>
|
||||
|
||||
<span class="image featured"><img src="images/banner.jpg" alt="" /></span>
|
||||
|
||||
<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
|
||||
Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
|
||||
Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
|
||||
consequat etiam lorem ipsum dolor sit amet nullam.</p>
|
||||
|
||||
<h3>And Yet Another Subheading</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
|
||||
justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
|
||||
ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
|
||||
vulputate. Nulla quis nibh ipsum, sed egestas justo. Morbi ut ante mattis orci convallis tempor.
|
||||
Etiam a lacus a lacus pharetra porttitor quis accumsan odio. Sed vel euismod nisi. Etiam convallis
|
||||
rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
|
||||
Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
|
||||
Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
|
||||
|
||||
<p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
|
||||
quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
|
||||
Suspendisse laoreet metus ut metus imperdiet interdum aliquam justo tincidunt. Mauris dolor urna,
|
||||
fringilla vel malesuada ac, dignissim eu mi. Praesent mollis massa ac nulla pretium pretium.
|
||||
Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
|
||||
Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Mattis et quis rutrum</a></li>
|
||||
<li><a href="#">Suspendisse amet varius</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan dolor</a></li>
|
||||
<li><a href="#">Mattis rutrum accumsan</a></li>
|
||||
<li><a href="#">Suspendisse varius nibh</a></li>
|
||||
<li><a href="#">Sed et dapibus mattis</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>More Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Duis neque nisi dapibus</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan sed</a></li>
|
||||
<li><a href="#">Mattis et sed accumsan</a></li>
|
||||
<li><a href="#">Duis neque nisi sed</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum amet varius</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<h3>Get In Touch</h3>
|
||||
<form>
|
||||
<div class="row gtr-50">
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" class="button alt" value="Send Message" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons -->
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="copyright">
|
||||
<ul class="menu">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.dropotron.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,178 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Arcana by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>No Sidebar - Arcana by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
<div id="page-wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
|
||||
<!-- Logo -->
|
||||
<h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li>
|
||||
<a href="#">Dropdown</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam sed tempus</a></li>
|
||||
<li>
|
||||
<a href="#">Submenu</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Phasellus magna</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam nisl</a></li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="left-sidebar">Left Sidebar</a></li>
|
||||
<li><a href="right-sidebar">Right Sidebar</a></li>
|
||||
<li><a href="two-sidebar">Two Sidebar</a></li>
|
||||
<li class="current"><a href="no-sidebar">No Sidebar</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<section class="wrapper style1">
|
||||
<div class="container">
|
||||
<div id="content">
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>No Sidebar</h2>
|
||||
<p>All content, all the time.</p>
|
||||
</header>
|
||||
|
||||
<span class="image featured"><img src="images/banner.jpg" alt="" /></span>
|
||||
|
||||
<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
|
||||
Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
|
||||
Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
|
||||
consequat etiam lorem ipsum dolor sit amet nullam.</p>
|
||||
|
||||
<h3>And Yet Another Subheading</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
|
||||
justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
|
||||
ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
|
||||
vulputate. Nulla quis nibh ipsum, sed egestas justo. Morbi ut ante mattis orci convallis tempor.
|
||||
Etiam a lacus a lacus pharetra porttitor quis accumsan odio. Sed vel euismod nisi. Etiam convallis
|
||||
rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
|
||||
Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
|
||||
Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
|
||||
|
||||
<p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
|
||||
quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
|
||||
Suspendisse laoreet metus ut metus imperdiet interdum aliquam justo tincidunt. Mauris dolor urna,
|
||||
fringilla vel malesuada ac, dignissim eu mi. Praesent mollis massa ac nulla pretium pretium.
|
||||
Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
|
||||
Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Mattis et quis rutrum</a></li>
|
||||
<li><a href="#">Suspendisse amet varius</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan dolor</a></li>
|
||||
<li><a href="#">Mattis rutrum accumsan</a></li>
|
||||
<li><a href="#">Suspendisse varius nibh</a></li>
|
||||
<li><a href="#">Sed et dapibus mattis</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>More Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Duis neque nisi dapibus</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan sed</a></li>
|
||||
<li><a href="#">Mattis et sed accumsan</a></li>
|
||||
<li><a href="#">Duis neque nisi sed</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum amet varius</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<h3>Get In Touch</h3>
|
||||
<form>
|
||||
<div class="row gtr-50">
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" class="button alt" value="Send Message" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons -->
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="copyright">
|
||||
<ul class="menu">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.dropotron.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Arcana by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Right Sidebar - Arcana by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
<div id="page-wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
|
||||
<!-- Logo -->
|
||||
<h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li>
|
||||
<a href="#">Dropdown</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam sed tempus</a></li>
|
||||
<li>
|
||||
<a href="#">Submenu</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Phasellus magna</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam nisl</a></li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="left-sidebar">Left Sidebar</a></li>
|
||||
<li class="current"><a href="right-sidebar">Right Sidebar</a></li>
|
||||
<li><a href="two-sidebar">Two Sidebar</a></li>
|
||||
<li><a href="no-sidebar">No Sidebar</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<section class="wrapper style1">
|
||||
<div class="container">
|
||||
<div class="row gtr-200">
|
||||
<div class="col-8 col-12-narrower">
|
||||
<div id="content">
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>Right Sidebar</h2>
|
||||
<p>Sidebar on the right, content on the left.</p>
|
||||
</header>
|
||||
|
||||
<span class="image featured"><img src="images/banner.jpg" alt="" /></span>
|
||||
|
||||
<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
|
||||
Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
|
||||
Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
|
||||
consequat etiam lorem ipsum dolor sit amet nullam.</p>
|
||||
|
||||
<h3>And Yet Another Subheading</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
|
||||
justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
|
||||
ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
|
||||
vulputate. Nulla quis nibh ipsum, sed egestas justo. Morbi ut ante mattis orci convallis tempor.
|
||||
Etiam a lacus a lacus pharetra porttitor quis accumsan odio. Sed vel euismod nisi. Etiam convallis
|
||||
rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
|
||||
Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
|
||||
Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
|
||||
|
||||
<p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
|
||||
quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
|
||||
Suspendisse laoreet metus ut metus imperdiet interdum aliquam justo tincidunt. Mauris dolor urna,
|
||||
fringilla vel malesuada ac, dignissim eu mi. Praesent mollis massa ac nulla pretium pretium.
|
||||
Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
|
||||
Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 col-12-narrower">
|
||||
<div id="sidebar">
|
||||
|
||||
<!-- Sidebar -->
|
||||
|
||||
<section>
|
||||
<h3>Just a Subheading</h3>
|
||||
<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
|
||||
Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
|
||||
Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
|
||||
<footer>
|
||||
<a href="#" class="button">Continue Reading</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Another Subheading</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
|
||||
<li><a href="#">Ornare in hendrerit in lectus</a></li>
|
||||
<li><a href="#">Semper mod quis eget mi dolore</a></li>
|
||||
<li><a href="#">Consequat etiam lorem phasellus</a></li>
|
||||
<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
|
||||
<li><a href="#">Semper mod quisturpis nisi</a></li>
|
||||
</ul>
|
||||
<footer>
|
||||
<a href="#" class="button">More Random Links</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Mattis et quis rutrum</a></li>
|
||||
<li><a href="#">Suspendisse amet varius</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan dolor</a></li>
|
||||
<li><a href="#">Mattis rutrum accumsan</a></li>
|
||||
<li><a href="#">Suspendisse varius nibh</a></li>
|
||||
<li><a href="#">Sed et dapibus mattis</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>More Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Duis neque nisi dapibus</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan sed</a></li>
|
||||
<li><a href="#">Mattis et sed accumsan</a></li>
|
||||
<li><a href="#">Duis neque nisi sed</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum amet varius</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<h3>Get In Touch</h3>
|
||||
<form>
|
||||
<div class="row gtr-50">
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" class="button alt" value="Send Message" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons -->
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="copyright">
|
||||
<ul class="menu">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.dropotron.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Arcana by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>Two Sidebar - Arcana by HTML5 UP</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
<div id="page-wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
|
||||
<!-- Logo -->
|
||||
<h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li>
|
||||
<a href="#">Dropdown</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam sed tempus</a></li>
|
||||
<li>
|
||||
<a href="#">Submenu</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Phasellus magna</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam nisl</a></li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="left-sidebar">Left Sidebar</a></li>
|
||||
<li><a href="right-sidebar">Right Sidebar</a></li>
|
||||
<li class="current"><a href="two-sidebar">Two Sidebar</a></li>
|
||||
<li><a href="no-sidebar">No Sidebar</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<section class="wrapper style1">
|
||||
<div class="container">
|
||||
<div class="row gtr-200">
|
||||
<div class="col-3 col-12-narrower">
|
||||
<div id="sidebar1">
|
||||
|
||||
<!-- Sidebar 1 -->
|
||||
|
||||
<section>
|
||||
<h3>Just a Subheading</h3>
|
||||
<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
|
||||
Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
|
||||
Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
|
||||
<footer>
|
||||
<a href="#" class="button">Continue Reading</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Another Subheading</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Amet turpis, feugiat sit amet</a></li>
|
||||
<li><a href="#">Ornare in hendrerit lectus</a></li>
|
||||
<li><a href="#">Semper mod quis eget dolore</a></li>
|
||||
<li><a href="#">Consequat lorem phasellus</a></li>
|
||||
<li><a href="#">Amet turpis feugiat amet</a></li>
|
||||
<li><a href="#">Semper mod quisturpis nisi</a></li>
|
||||
</ul>
|
||||
<footer>
|
||||
<a href="#" class="button">More Random Links</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-12-narrower imp-narrower">
|
||||
<div id="content">
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
<article>
|
||||
<header>
|
||||
<h2>Two Sidebar</h2>
|
||||
<p>Yup. Two sidebars at the same time.</p>
|
||||
</header>
|
||||
|
||||
<span class="image featured"><img src="images/banner.jpg" alt="" /></span>
|
||||
|
||||
<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
|
||||
Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
|
||||
Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
|
||||
consequat etiam lorem ipsum dolor sit amet nullam.</p>
|
||||
|
||||
<h3>And Yet Another Subheading</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
|
||||
justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
|
||||
ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
|
||||
rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
|
||||
Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
|
||||
Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
|
||||
|
||||
<p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
|
||||
quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
|
||||
Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
|
||||
Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 col-12-narrower">
|
||||
<div id="sidebar2">
|
||||
|
||||
<!-- Sidebar 2 -->
|
||||
|
||||
<section>
|
||||
<h3>Another Subheading</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Amet turpis, feugiat sit amet</a></li>
|
||||
<li><a href="#">Ornare in hendrerit lectus</a></li>
|
||||
<li><a href="#">Semper mod quis eget dolore</a></li>
|
||||
<li><a href="#">Consequat lorem phasellus</a></li>
|
||||
<li><a href="#">Amet turpis feugiat amet</a></li>
|
||||
<li><a href="#">Semper mod quisturpis nisi</a></li>
|
||||
</ul>
|
||||
<footer>
|
||||
<a href="#" class="button">More Random Links</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Just a Subheading</h3>
|
||||
<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
|
||||
Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
|
||||
Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
|
||||
<footer>
|
||||
<a href="#" class="button">Continue Reading</a>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Mattis et quis rutrum</a></li>
|
||||
<li><a href="#">Suspendisse amet varius</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan dolor</a></li>
|
||||
<li><a href="#">Mattis rutrum accumsan</a></li>
|
||||
<li><a href="#">Suspendisse varius nibh</a></li>
|
||||
<li><a href="#">Sed et dapibus mattis</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>More Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Duis neque nisi dapibus</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan sed</a></li>
|
||||
<li><a href="#">Mattis et sed accumsan</a></li>
|
||||
<li><a href="#">Duis neque nisi sed</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum amet varius</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<h3>Get In Touch</h3>
|
||||
<form>
|
||||
<div class="row gtr-50">
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" class="button alt" value="Send Message" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons -->
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="copyright">
|
||||
<ul class="menu">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.dropotron.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<th:block th:fragment="footer">
|
||||
<footer>
|
||||
<table >
|
||||
<tr id="bottom">
|
||||
<td><h3><a aria-label="licenses" style="color: white" href="../licenses" title="Gmail">licenses</a></h3></td>
|
||||
<td><h3><a aria-label="sendToMe" style="color: white" href="mailto:lunaticbum@gmail.com" title="Gmail">lunaticbum@gmail.com</a></h3></td>
|
||||
<th:block th:if="${PERMISSION == 'OK'}">
|
||||
<td><h3><a aria-label="logout" style="color: white" href="javascript:logout()" title="logout" >logout</a></h3></td>
|
||||
</th:block>
|
||||
<th:block th:if="${PERMISSION != 'OK'}">
|
||||
<td><h3><a aria-label="join" style="color: white" href="javascript:gotoJoin()" title="join" >join</a></h3></td>
|
||||
</th:block>
|
||||
</tr>
|
||||
</table>
|
||||
</footer>
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Mattis et quis rutrum</a></li>
|
||||
<li><a href="#">Suspendisse amet varius</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan dolor</a></li>
|
||||
<li><a href="#">Mattis rutrum accumsan</a></li>
|
||||
<li><a href="#">Suspendisse varius nibh</a></li>
|
||||
<li><a href="#">Sed et dapibus mattis</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-3 col-6-narrower col-12-mobilep">
|
||||
<h3>More Links to Stuff</h3>
|
||||
<ul class="links">
|
||||
<li><a href="#">Duis neque nisi dapibus</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum accumsan sed</a></li>
|
||||
<li><a href="#">Mattis et sed accumsan</a></li>
|
||||
<li><a href="#">Duis neque nisi sed</a></li>
|
||||
<li><a href="#">Sed et dapibus quis</a></li>
|
||||
<li><a href="#">Rutrum amet varius</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="col-6 col-12-narrower">
|
||||
<h3>Get In Touch</h3>
|
||||
<form>
|
||||
<div class="row gtr-50">
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-mobilep">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" class="button alt" value="Send Message" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons -->
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="copyright">
|
||||
<ul class="menu">
|
||||
<li>© Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
</html>
|
||||
@@ -1,35 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
|
||||
<th:block th:fragment="header">
|
||||
<header>
|
||||
<div id="header">
|
||||
|
||||
<div id="top">
|
||||
<td><h3><a aria-label="goToMain" style="color: white" href="javascript:mainPath()" title="goToMain">HOME</a></h3></td>
|
||||
</div>
|
||||
<th:block th:if="${PERMISSION != 'OK'}">
|
||||
<script th:inline="javascript">
|
||||
document.addEventListener("DOMContentLoaded", addListen);
|
||||
function tryLogin() {if(document.getElementById("user_id").value.length > 0 && document.getElementById("user_pw").value.length > 0) {onclickLogin(null,null)}}
|
||||
function addListen(){document.getElementById("user_id").addEventListener("keyup", ({key}) => {if (key === "Enter")tryLogin()});document.getElementById("user_pw").addEventListener("keyup", ({key}) => {if (key === "Enter")tryLogin()})}
|
||||
</script>
|
||||
<div class="user_info" >
|
||||
<input th:class="login_input" placeholder="ID" enterkeyhint="next" id="user_id" type="text" class="text">
|
||||
<input th:class="login_input" id="user_pw" placeholder="PW" enterkeyhint="send" type="password" class="text">
|
||||
</div>
|
||||
</th:block>
|
||||
<th:block th:if="${PERMISSION == 'OK'}">
|
||||
<div></div>
|
||||
<td><h3><a aria-label="create New Post" style="color: white" href="javascript:gotoWrite()" title="create New Post">create New Post</a></h3></td>
|
||||
<td><h3><a aria-label="where's Bum" style="color: white" href="javascript:gotoWhere()" title="where's Bum">where's Bum</a></h3></td>
|
||||
<td><h3><a aria-label="modify & open Post" style="color: white" href="javascript:gotoModify()" title="modify & open Post">modify & open Post</a></h3></td>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="hello_to_user" >
|
||||
<a aria-label="logout" href="javascript:logout()" title="logout" class="hello_to_user_txt" >what's up~!</a><br/>
|
||||
<a aria-label="logout" href="javascript:logout()" title="logout" class="hello_to_user_txt" >[[${user_id}]]</a>
|
||||
</div>
|
||||
</th:block>
|
||||
</header>
|
||||
<!-- Logo -->
|
||||
<h1><a href="index.html" id="logo">BUM ' <em>sPace</em></a></h1>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="nav">
|
||||
<ul>
|
||||
<li class="current"><a href="index.html">Home</a></li>
|
||||
<li>
|
||||
<a href="#">Dropdown</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam sed tempus</a></li>
|
||||
<li>
|
||||
<a href="#">Submenu</a>
|
||||
<ul>
|
||||
<li><a href="#">Lorem dolor</a></li>
|
||||
<li><a href="#">Phasellus magna</a></li>
|
||||
<li><a href="#">Magna phasellus</a></li>
|
||||
<li><a href="#">Etiam nisl</a></li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Veroeros feugiat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="left-sidebar">Left Sidebar</a></li>
|
||||
<li><a href="right-sidebar">Right Sidebar</a></li>
|
||||
<li><a href="two-sidebar">Two Sidebar</a></li>
|
||||
<li><a href="no-sidebar">No Sidebar</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</th:block>
|
||||
</html>
|
||||
@@ -7,7 +7,10 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"/>
|
||||
<script type="text/javascript" th:src="@{https://code.jquery.com/jquery-3.5.1.min.js}" crossorigin="anonymous"></script>
|
||||
<link th:href="@{/css/common.css}" rel="stylesheet" />
|
||||
<title>BUM'sPace</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<script async th:src="@{https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9504446465764716}" crossorigin="anonymous"></script>
|
||||
<script type="text/javascript" th:src="@{/js/common.js}"></script>
|
||||
</th:block>
|
||||
|
||||
@@ -8,13 +8,23 @@
|
||||
<th:block layout:fragment="head"></th:block>
|
||||
<th:block th:replace="~{fragments/title :: title}"></th:block>
|
||||
</head>
|
||||
<body>
|
||||
<th:block th:replace="~{fragments/header :: header}"></th:block>
|
||||
<th:block layout:fragment="content"></th:block>
|
||||
<div class="dim_layer">
|
||||
<div class="dimBg"></div>
|
||||
<th:block layout:fragment="popup_layer"></th:block>
|
||||
<body class="is-preload">
|
||||
<div id="page-wrapper">
|
||||
<th:block th:replace="~{fragments/header :: header}"></th:block>
|
||||
<th:block layout:fragment="content"></th:block>
|
||||
<div class="dim_layer">
|
||||
<div class="dimBg"></div>
|
||||
<th:block layout:fragment="popup_layer"></th:block>
|
||||
</div>
|
||||
<th:block th:replace="~{fragments/footer :: footer}"></th:block>
|
||||
</div>
|
||||
<th:block th:replace="~{fragments/footer :: footer}"></th:block>
|
||||
<!-- Scripts -->
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/js/jquery.dropotron.min.js"></script>
|
||||
<script src="assets/js/browser.min.js"></script>
|
||||
<script src="assets/js/breakpoints.min.js"></script>
|
||||
<script src="assets/js/util.js"></script>
|
||||
<script src="assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user