Bazzly/fun-codepen.markdown

## fun-codepen.markdown

      
    Raw
  

              fun-codepen.markdown
            
          
    Fun codepen

A Pen by Alli Irwan Bazeet on CodePen.
License.

  
## index.html
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <body>


  <div class="love">
    <h2>valentine is febuary 14
    </h2>
      <h3 id="count"> Lest start the count down</h3>
    <h4 id="love"> <h4>
    <div class="art">

<h2>Valentine message from your king </h2>
<p>“No matter how many years pass by in our marriage, there will be two moments when I will like to be with you – Now and Forever! Love you, my sweetie.”

<br>

  “Even the silent moments we share together have the power to drown all of life’s chaos. That is why we make a great team, honey.”

<br>

  “You are a special gift from the heavens. Your smile warms my heart and your presence makes me whole. I love you, today and forever!”

<br>

  “My permanent relationship status – taken forever by the most gorgeous woman in this universe. Love ya!”.</p>
      <br>

<p>“I’m glad you are thoughtful, I’m glad you are understanding, I’m glad you are so much fun to be around, but most of all I’m glad you are my wife. I love you!”.</p>
  </div>


<button onclick="typeWriter()">MY VAL MESSAGE FOR YOU IS HERE AWERO MI</button>

<p id="demo"></p>

  </div>

      </body>
</html>

## script.js

// Set the date we're counting down to
var countDownDate = new Date("Feb 14, 2019 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  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);

  // Display the result in the element with id="demo"
  document.getElementById("love").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("love").innerHTML = "I WILL LOVE YOU FOEVER";
  }
}, 1000);

var i = 0;
var txt = 'I would rather spend one lifetime with you, than face all the ages of the world alone.Love you ma queen, >>>>>>>>>>>>>>>>>>>>>>>>>>>>my dear Awero!!!! With you I can be my silliest best and never worry about being judged, because you are my better half in the truest sense. I love you Awero mi '


;


var speed = 50;

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

## style.css

body {
  background: #B22222
    url("https://www.freeiconspng.com/uploads/hearts-clip-art-png-28.png") no-repeat right top;
}

.love {
  height: 400px;
  width: auto;
  float: right;
  position: absolute;
}


.art{
  position: absolute;
  withd: 100px;

  top: 200px;
  z-index: -1;
}

#demo{

    background: #B22222
}

h1, h2, h3,h4,h5 {
  color: #00ff00;
}

p.ex {
  color: rgb(0,0,255);
}
	<html>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<body>


	<div class="love">
	<h2>valentine is febuary 14
	</h2>
	<h3 id="count"> Lest start the count down</h3>
	<h4 id="love"> <h4>
	<div class="art">

	<h2>Valentine message from your king </h2>
	<p>“No matter how many years pass by in our marriage, there will be two moments when I will like to be with you – Now and Forever! Love you, my sweetie.”

	<br>

	“Even the silent moments we share together have the power to drown all of life’s chaos. That is why we make a great team, honey.”

	<br>

	“You are a special gift from the heavens. Your smile warms my heart and your presence makes me whole. I love you, today and forever!”

	<br>

	“My permanent relationship status – taken forever by the most gorgeous woman in this universe. Love ya!”.</p>
	<br>

	<p>“I’m glad you are thoughtful, I’m glad you are understanding, I’m glad you are so much fun to be around, but most of all I’m glad you are my wife. I love you!”.</p>
	</div>


	<button onclick="typeWriter()">MY VAL MESSAGE FOR YOU IS HERE AWERO MI</button>

	<p id="demo"></p>

	</div>

	</body>
	</html>

	// Set the date we're counting down to
	var countDownDate = new Date("Feb 14, 2019 15:37:25").getTime();

	// Update the count down every 1 second
	var x = setInterval(function() {

	// Get todays date and time
	var now = new Date().getTime();

	// Find the distance between now and the count down date
	var distance = countDownDate - now;

	// Time calculations for days, hours, minutes and seconds
	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);

	// Display the result in the element with id="demo"
	document.getElementById("love").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("love").innerHTML = "I WILL LOVE YOU FOEVER";
	}
	}, 1000);

	var i = 0;
	var txt = 'I would rather spend one lifetime with you, than face all the ages of the world alone.Love you ma queen, >>>>>>>>>>>>>>>>>>>>>>>>>>>>my dear Awero!!!! With you I can be my silliest best and never worry about being judged, because you are my better half in the truest sense. I love you Awero mi '


	;


	var speed = 50;

	function typeWriter() {
	if (i < txt.length) {
	document.getElementById("demo").innerHTML += txt.charAt(i);
	i++;
	setTimeout(typeWriter, speed);
	}
	}

	body {
	background: #B22222
	url("https://www.freeiconspng.com/uploads/hearts-clip-art-png-28.png") no-repeat right top;
	}

	.love {
	height: 400px;
	width: auto;
	float: right;
	position: absolute;
	}



	.art{
	position: absolute;
	withd: 100px;

	top: 200px;
	z-index: -1;
	}

	#demo{

	background: #B22222
	}

	h1, h2, h3,h4,h5 {
	color: #00ff00;
	}

	p.ex {
	color: rgb(0,0,255);
	}