<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--made by vipul mirajkar thevipulm.appspot.com-->
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Love logical thinking??", "Bored writing loads of codes??", "Hate comparing former and updated code??" ]'>
<span class="wrap"></span>
</a>
</h1>
<h1 id="success">Here is where you find almost everything!</h1>
body {
background-color:#ce3635;
text-align: center;
color:#fff;
padding-top:10em;
justify-content:center;
}
#success
{
color:#5ccef0;
}
//Lato font
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
//color/ui color variables
$white: #ececec;
$black: #333333;
$yellow: #ffff00;
$purple: #8a19ff;
$colorPrimary: $yellow;
$colorSecondary: $purple;
//split button mixin
@mixin btn__split($colorLeft, $colorRight, $textColor) {
.btn {
position: relative;
letter-spacing: 0.25em;
margin: 0 auto;
padding: 1rem 2.5rem;
background: transparent;
outline: none;
font-size: 28px;
color: $textColor;
&::after,
&::before {
content: "";
position: absolute;
height: 100%;
width: 50%;
transform: skewX(30deg);
transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -2;
}
&::before {
background-color: $colorLeft;
top: -1rem;
left: 0rem;
}
&::after {
background-color: $colorRight;
top: 1rem;
left: 8rem;
}
&:hover {
&::before,
&::after {
top: 0;
transform: skewx(0deg);
}
&::after {
left: 0rem;
}
&::before {
left: 8.75rem;
}
}
}
}
body,html{
height: 100%;
justzzzzzzzzz
}
.container {
width: auto;
margin: auto;
}
a.btn {
text-transform: uppercase;
font-weight: 700;
}
@include btn__split($colorPrimary, $colorSecondary, $black);
//made by vipul mirajkar thevipulm.appspot.com
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};
