Everybody Lies

<!DOCTYPE html>
<html>
<!------------- CSS Website Base & Countdown by W3 School, Header and Sidebar Image by Joyce McCown (https://unsplash.com/@moonshadowpress) Tumblr Post Coding Help vvia lmthemeslp-htt tutorials --->

<head>


<link href="https://fonts.googleapis.com/css2?family=Poiret+One&family=Vollkorn+SC&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">


<!------Meta------>

<meta name="image:sidebar" content="https://media.giphy.com/media/xUNd9ShRyV7ZyNvJ2U/giphy.gif">

<meta name="text:LinkOne" content="Link One">
<meta name="text:LinkOneUrl" content="/">
<meta name="text:LinkTwo" content="Link Two">
<meta name="text:LinkTwoUrl" content="/">
<meta name="text:LinkThree" content="Link Three">
<meta name="text:LinkThreeUrl" content="/">
<meta name="text:LinkFour" content="Link Four">
<meta name="text:LinkFourUrl" content="/">
<meta name="text:LinkFive" content="Link Five">
<meta name="text:LinkFiveUrl" content="/">



<style>
body {
  margin: 0;
  font-size: 15px;
  background-color:black;
  font-family: 'Poiret One', cursive;

}

.whole{
    width:1500px;
    margin: auto;
}

/*--------Header--------*/
.header {
  background-image:url("https://images.unsplash.com/photo-1539814999938-f986b9e4b66a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80");
  padding:350px;
  background-size:cover;
}

#navbar {
  overflow: hidden;
  background-color:black;
  font-family: 'Vollkorn SC', serif;
}
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

#navbar a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
   color:#DFDBD0;
}

#navbar a:hover {
  background-color:#DFDBD0;
  color: black;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

/*--------------Base of Website No Touchy-----------*/
* {
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}


.side {
  flex: 30%;
  background-image:url("https://images.unsplash.com/photo-1539815121568-b569a05d955b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1267&q=80");
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 20px
}
.main {
  flex: 70%;
  background-color:#4E4E4470;
  padding: 20px;
}


/*-------Sidebar---------------*/

.box{
    flex:30%
    height:auto;
    margin-bottom:30px;
    padding:10px;
    background-color:#DFDBD060;
    text-align:justify;
     border-radius: 15px;

}

.box ul{
    list-style:none;
}

.box ul li{
    padding:5px;
}

.box img{
    max-width:330px;
    padding-left:40px;

}

.boxhead{
    flex:30%;
    font-size:20px;
    background-color:black;
    height:auto;
    padding:5px;
    color:#DFDBD0;
    text-align:center;
    letter-spacing:5px;
    font-family: 'Vollkorn SC', serif;
    }

#demo{
    color:	#8a0303;
    text-align:center;
    font-size:24px;
}

/*--------TUMBLR-----------*/
.post {
		background:#DFDBD0;
		margin: 40px auto;
		padding: 20px;
		border-radius: 6px;
		width: 540px;
		font-size: 15px;
        font-family: 'Poiret One', cursive;
	}

.post a{
    color:#6d483a;
    font-size: 15px;
}

.post img{
    width:100%;
}
.post b u i{
    color:#190903;
    font-size: 15px;
}

.post h2{
    font-family: 'Vollkorn SC', serif;
}

.quote{
    color:#8a0303;
    font-size:20px;
}

.source{
    text-align:right;
}

.question{
    font-family: 'Vollkorn SC', serif;
    color:8a0303;
}

.question a{
    color:##8a0303;
}

.answer{

}

.convo li {list-style: none;}

.convo .label {text-transform: uppercase;}

.line_odd .label {color: #19090;}

.line_even .label {color: orange;}


.avatar {
    	margin: 60px 30px;
		border-radius: 100%;
	}
.container {
		max-width: 640px;
		margin: 0 auto;
	}
.like-reblog {
		list-style: none;
		border: 1px solid #ccc;
	}
.like-reblog li {
		float: right;
		padding: 6px;
		height: 20px;
	}

.pagination {
            width:90%;
            text-align:center;
            margin:40px auto;
        }
.pagination a{
    color:#DFDBD0;
    font-size:20px;
}

.pagination hover{
    color:black;
}
/*-------Footer---------------*/

footer{
	bottom: 0px;
	padding:5px;
	 color:#DFDBD0;
	 text-align:right;
	 font-size:8px;
}



      {CustomCSS}
</style>
</head>
<body>
<div class="whole">
<div class="header"></div>

<div id="navbar">
  <a href="/">| Home |</a>
  <a href="/ask">| Queries |</a>
  <a href="{text:LinkOneUrl}">| {Text:LinkOne} |</a>
  <a href="{text:LinkTwoUrl}">| {Text:LinkTwo} |</a>
  <a href="{text:LinkThreeUrl}">| {Text:LinkThree} |</a>
  <a href="{text:LinkFourUrl}">| {Text:LinkFour} |</a>
  <a href="{text:LinkFiveUrl}">| {Text:LinkFive} |</a>
</div>

 <div class="row">

 <!------To create a new box in the sidebar use this code

    <div class="boxhead">Title</div>
   <div class="box">
            CONTENT
    </div>

 --------->

  <div class="side">

  <div class="boxhead">{Title}</div>
   <div class="box">
         <img id="image" src="{image:sidebar}"><br>
         {Description}
    </div>


        <div class="boxhead">Countdown til Halloween 2020</div>
   <div class="box">
            <p id="demo"></p>
    </div>

      <!-------stars are &#9733; or &#9734; ---->

   <div class="boxhead">Non-Scary Halloweeny Movie Rec</div>
   <div class="box">
         <ul>
             <li>Nightmare Before Christmas — &#9733;&#9733;&#9733;&#9733;&#9733;</li>
             <li>Hoccus Poccus — &#9733;&#9733;&#9733;&#9733;&#9734; </li>
             <li>Warm Bodies — &#9733;&#9733;&#9733;&#9734;&#9734;</li>
             <li>Beetlejuice — &#9733;&#9733;&#9733;&#9733;&#9734;</li>
             <li>Jurasic Park — &#9733;&#9733;&#9733;&#9733;&#9733;</li>
             <li>Corpse Bride  — &#9733;&#9733;&#9733;&#9733;&#9733;</li>

        </ul>
    </div>

    <div class="boxhead">Ambiance Serie Rec</div>
   <div class="box">
         <ul>
             <li>The Walking Dead — &#9733;&#9733;&#9733;&#9733;&#9734;</li>
             <li>Stranger Thing— &#9733;&#9733;&#9733;&#9733;&#9733;</li>
             <li>What We Do in the Shadow — &#9733;&#9733;&#9733;&#9733;&#9734;</li>
             <li>Chilling Adventures of Sabrina  — &#9733;&#9733;&#9733;&#9733;&#9733;</li>
             <li>The Haunting of Hillhouse  — &#9733;&#9733;&#9733;&#9733;&#9734;</li>

        </ul>
    </div>


  <div class="boxhead">Halloween Song Rec</div>
   <div class="box">
         <ul>
             <li>Thriller (Videoclip & Song)</li>
             <li>This is Halloween (from Nightmare Before Christmas)</li>
             <li>Monster Mash</li>
             <li>I want Candy</li>
             <li>I Put a Spell on You</li>
             <li>Disturbia</li>
             <li>Creep</li>
        </ul>
    </div>






   </div>
  <!------TUMBLR POST. NO TOUCHY------>

  <div class="main">

	{block:Posts}

		{block:Text}
		<div class="post">
			{block:Title}

					<h2><a href="{Permalink}">{Title}</a></h2>

			{/block:Title}
			{Body}
			<ul class="like-reblog">
				<li>{LikeButton}</li>
				<li>{ReblogButton}</li>
				<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li>
			</ul>
		</div>
		{/block:Text}

		{block:Photo}
		<div class="post">
			<img src="{PhotoURL-500}">
			{block:Caption}{Caption}{/block:Caption}
			<ul class="like-reblog">
				<li>{LikeButton}</li>
				<li>{ReblogButton}</li>
				<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li>
			</ul>
		</div>
		{/block:Photo}

		{block:Quote}
		<div class="post">
		<div class="quote">	{Quote}</div>
	   <div class="source">	{block:Source}<br>&mdash;{Source}{/block:Source}</div>
			<ul class="like-reblog">
				<li>{LikeButton}</li>
				<li>{ReblogButton}</li>
				<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li>
			</ul>
		</div>
		{/block:Quote}

		{block:Link}
		<div class="post">
  		<h2>	<a href="{URL}" {Target}>{Name}</a></h2>
  			{block:Description}{Description}{/block:Description}
			<ul class="like-reblog">
				<li>{LikeButton}</li>
				<li>{ReblogButton}</li>
				<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li>
			</ul>
		</div>
		{/block:Link}

		{block:Chat}
			<div class="post">
    {block:Title}<h2>{Title}</h2>{/block:Title}
    <ul class="convo">{block:Lines}<li class="line">{block:Label}<span class="label">{Label}</span>{/block:Label}
    {Line}</li>{/block:Lines}</ul>
    <ul class="like-reblog">
				<li>{LikeButton}</li>
				<li>{ReblogButton}</li>
				<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li>
			</ul>
				</div>
{/block:Chat}


		{block:Audio}
		<div class="post">
			{AudioPlayer}
      	{block:Caption}{Caption}{/block:Caption}
			<ul class="like-reblog">
				<li>{LikeButton}</li>
				<li>{ReblogButton}</li>
				<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li>
			</ul>
		</div>
		{/block:Audio}

		{block:Video}
		<div class="post">
			{Video-500}
			{block:Caption}{Caption}{/block:Caption}
			<ul class="like-reblog">
				<li>{LikeButton}</li>
				<li>{ReblogButton}</li>
				<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li>
			</ul>
		</div>
		{/block:Video}

{block:Answer}
 	<div class="post">
    <div class="question">{asker} asked {Question}</div>
 <div class="answer">{Answer}</div>

    <ul class="like-reblog">
				<li>{LikeButton}</li>
				<li>{ReblogButton}</li>
				<li>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</li>
			</ul>
		</div>
{/block:Answer}
	{/block:Posts}
 <!-----End Tumblr---->
     <!-- pagination -->
            {block:Pagination}
            <div class="pagination">
                {block:previouspage}
                <a href="{previouspage}">Prev</a>
                {/block:previouspage}
                {block:nextpage}
                <a href="{nextpage}">Next</a>
                {/block:nextpage}
            </div>
            {/block:pagination}


  </div>
</div>

 <footer>&copy; CryInHtml Theme</footer>


</div> <!----End Whole Div---->
<!--------Script--------->

<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 31, 2020 00:00:00").getTime();


var x = setInterval(function() {
    var now = new Date().getTime();
  var distance = countDownDate - now;
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "This is Halloween!";
  }
}, 1000);
</script>

<!--No Touchy-->
<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>