A Pen by Tim Johannessen

Developer
Tim Johannessen
Size
8,200 Kb
Views
16,192
  1. A Pen by Tim Johannessen Previews
  2. A Pen by Tim Johannessen HTML Codes
  3. A Pen by Tim Johannessen CSS Codes
  4. A Pen by Tim Johannessen JS Codes

How do I make an a pen by tim johannessen?

What is a a pen by tim johannessen? How do you make a a pen by tim johannessen? This script and codes were developed by Tim Johannessen on 17 October 2022, Monday.

A Pen by Tim Johannessen Previews
IQ Test

A Pen by Tim Johannessen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Tim Johannessen</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="constrainer"> <div class="carousel-wrapper"> <div class="carousel-header"> <h2>Our clients say ... <div class="carousel-controls"><a href="#">&#10094;</a><a href="#">&#10095;</a></div> </h2> </div> <div class="carousel-items"> <div class="carousel-item"> <div class="carousel-item-header"> <h4>Lorem ipsum dolor sit amet</h4> </div> <div class="carousel-item-body"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit numquam, nam <a href="#link1">dolore modi atque in</a> commodi doloremque officiis, laboriosam, libero illum quam. Quas pariatur necessitatibus repellendus, placeat non ex vel.</p> </div> <div class="carousel-item-footer"> <cite>&#8213; Joe Somebody</cite> </div> </div> <div class="carousel-item"> <div class="carousel-item-header"> <h4>Mollitia dolorem architecto</h4> </div> <div class="carousel-item-body"> <p>Lorem ipsum <a href="#link2">dolor sit amet</a>, consectetur adipisicing elit. Maiores nemo vero aperiam, vel assumenda ducimus praesentium iste incidunt esse! Vel voluptatibus nulla odio tenetur perspiciatis quis, fugit eaque ipsa nobis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quasi, vel autem quis, ab, <a href="#link3">maxime magni veritatis</a> neque iste minus consequuntur in perspiciatis. Ratione, porro necessitatibus, rerum iste eius inventore.</p> </div> <div class="carousel-item-footer"> <cite>&#8213; John Doe</cite> </div> </div> <div class="carousel-item"> <div class="carousel-item-header"> <h4>Inventore eveniet fuga</h4> </div> <div class="carousel-item-body"> <p>Vel nostrum ex obcaecati cupiditate perferendis fugiat culpa, eius, <a href="http://pis.dk">voluptatem dolores</a> accusantium, quis praesentium reiciendis asperiores aliquam, aspernatur at cumque. Rerum, quis.</p> </div> <div class="carousel-item-footer"> <cite>&#8213; Jane | Bling bling corporation</cite> </div> </div> </div> </div> </div><a class="btn btn-danger btn-icon-reveal btn-xs" href="#"><span>Learn more</span><i class="fa fa-angle-double-right"></i></a><br/><a class="btn btn-danger btn-icon-reveal btn-sm" href="#"><span>Learn more</span><i class="fa fa-angle-double-right"></i></a><br/><a class="btn btn-danger btn-icon-reveal btn-square text-upper" href="#"><span>Learn more</span><i class="fa fa-angle-double-right"></i></a><br/><a class="btn btn-danger btn-icon-reveal btn-lg" href="#"><span>Learn more</span><i class="fa fa-angle-double-right"></i></a><br/><a class="button-xlarge button-reveal button-bling" href="#"><span>Learn more</span><i class="fa fa-angle-double-right"></i></a><br/> <div class="social-icons"><a class="social-icon social-twitter" href="#"><i class="fa fa-twitter"></i></a><a class="social-icon social-google-plus" href="#"><i class="fa fa-google-plus"></i></a><a class="social-icon social-facebook" href="#"><i class="fa fa-facebook"></i></a><a class="social-icon social-linkedin" href="#"><i class="fa fa-linkedin"></i></a></div> <h1 class="open-sans">Hello world (Open Sans)</h1> <h1 class="lato">Hello world (Lato)</h1> <h1 class="raleway">Hello world (Raleway)</h1> <h1 class="source-sans-pro">Hello world (Source Sans Pro)</h1> <h1 class="oswald">Hello world (Oswald)</h1> <h1 class="montserrat">Hello world (Montserrat)</h1>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Tim Johannessen - Script Codes CSS Codes

@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
@import url("//fonts.googleapis.com/css?family=Lato|Raleway|Open+Sans|Source+Sans+Pro|Oswald|Montserrat");
body { font-family: 'Open Sans'; background-image: url(http://register.extension.iastate.edu/images/display/background-overlay-final.png); color: #eee; background-size: cover;
}
body::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; background-color: rgba(245, 95, 54, 0.7); z-index: -2;
}
h1, h2, h3, h4, h5, h6, h7 { font-family: 'Raleway'; margin-top: 0;
}
.open-sans { font-family: "Open Sans";
}
.lato { font-family: "Lato";
}
.raleway { font-family: "Raleway";
}
.source-sans-pro { font-family: "Source Sans Pro";
}
.oswald { font-family: "Oswald";
}
.montserrat { font-family: "Montserrat";
}
.constrainer { max-width: 400px;
}
.carousel-header { margin: 10px 0;
}
.carousel-header h1, .carousel-header h2, .carousel-header h3, .carousel-header h4, .carousel-header h5, .carousel-header h6 { position: relative;
}
.carousel-header h1::after, .carousel-header h2::after, .carousel-header h3::after, .carousel-header h4::after, .carousel-header h5::after, .carousel-header h6::after { content: ''; position: absolute; bottom: -25%; left: 0; width: 10%; border-bottom: 3px solid rgba(255, 255, 255, 0.3);
}
.carousel-header .carousel-controls { float: right;
}
.carousel-wrapper h1, .carousel-wrapper h2, .carousel-wrapper h3, .carousel-wrapper h4, .carousel-wrapper h5, .carousel-wrapper h6 { margin: 0;
}
.carousel-item-header { margin: 10px 0;
}
.carousel-item-footer cite { color: rgba(255, 255, 255, 0.5);
}
.carousel-items { position: relative; overflow: hidden;
}
.carousel-item { position: absolute; opacity: 0; -moz-transform: translate(0px, 50px) scale(1.2); -ms-transform: translate(0px, 50px) scale(1.2); -webkit-transform: translate(0px, 50px) scale(1.2); transform: translate(0px, 50px) scale(1.2); -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
}
.carousel-item.is-current { opacity: 1; -moz-transform: translate(0px, 0px) scale(1); -ms-transform: translate(0px, 0px) scale(1); -webkit-transform: translate(0px, 0px) scale(1); transform: translate(0px, 0px) scale(1);
}
.carousel-controls a { color: white; opacity: .3; text-decoration: none; -moz-transition: opacity 300ms; -o-transition: opacity 300ms; -webkit-transition: opacity 300ms; transition: opacity 300ms; -moz-transform: scale(0.6); -ms-transform: scale(0.6); -webkit-transform: scale(0.6); transform: scale(0.6); display: inline-block;
}
.carousel-controls a:last-child { margin-left: 5px;
}
.carousel-controls a:hover { opacity: 1;
}
.button-xlarge { font-size: 18px; letter-spacing: 2px; height: 52px; display: inline-block; font-weight: 600; line-height: 52px; margin: 15px 5px 15px 0; opacity: 1; padding: 0 40px;
}
.button-reveal { background-color: crimson; color: white; position: relative; overflow: hidden;
}
.button-reveal i, .button-reveal span, .button-reveal span::after { -moz-transition: left 0.3s ease, right 0.3s ease; -o-transition: left 0.3s ease, right 0.3s ease; -webkit-transition: left 0.3s ease, right 0.3s ease; transition: left 0.3s ease, right 0.3s ease;
}
.button-reveal i { background-color: rgba(0, 0, 0, 0.1); left: auto; right: -44px; width: 44px; height: 52px; line-height: 52px; display: block; position: absolute; text-align: center; top: 0;
}
.button-reveal span { display: inline-block; left: 0; position: relative;
}
.button-reveal span::after { content: ''; position: absolute; display: block; border-bottom: 2px dotted rgba(255, 255, 255, 0.5); left: -150%; width: 100%; top: 75%;
}
.button-reveal:hover, .button-reveal:focus { color: white; text-decoration: none;
}
.button-reveal:hover i, .button-reveal:focus i { right: 0;
}
.button-reveal:hover span, .button-reveal:focus span { left: -22px;
}
.button-reveal:hover span::after, .button-reveal:focus span::after { left: 0;
}
.button-bling { position: relative;
}
.button-bling::after { content: ''; position: absolute; border-bottom: 10px solid rgba(255, 255, 255, 0.8); box-shadow: 0 0 3px white; display: block; width: 100%; bottom: 0; left: -100%; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.button-bling:hover::after { left: 110%;
}
.social-icon { font-size: 16px; height: 32px; width: 32px; color: #555; background-color: #333; display: inline-block; line-height: 32px; text-align: center; position: relative; overflow: hidden; transition: .3s; border-radius: 3px;
}
.social-icon:hover { color: white; background-color: #666;
}
.social-icon:hover .fa { animation: iconShift .3s;
}
.social-icon:hover.social-twitter { background-color: #00acee; color: white;
}
.social-icon:hover.social-linkedin { background-color: #0E76A8; color: white;
}
.social-icon:hover.social-facebook { background-color: #3B5998; color: white;
}
.social-icon:hover.social-google-plus { background-color: #DD4B39; color: white;
}
@keyframes iconShift { 0% { transform: translate3d(0, 0, 0); } 10% { transform: translate3d(0, -50%, 0); } 20% { transform: translate3d(0, -300%, 0); } 40% { transform: translate3d(300%, -300%, 0); } 60% { transform: translate3d(300%, 300%, 0); } 80% { transform: translate3d(0, 300%, 0); } 100% { transform: translate3d(0, 0, 0); }
}
.social-icons .social-icon { margin-right: 10px;
}
.social-icons .social-icon:last-child { margin-right: 0;
}
.carousel-item-body a { color: white; border-bottom: 1px dotted rgba(255, 255, 255, 0.5); -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s;
}
.carousel-item-body a:hover { border-bottom-style: solid; color: #ddd; text-decoration: none;
}
.intro { overflow: hidden; position: relative;
}
.intro * { animation: slide-up 1s; animation-timing-function: ease-in-out;
}
.intro h1 { animation-delay: .3s;
}
.intro p:nth-child(2) { animation-delay: .4s;
}
.intro p:nth-child(3) { animation-delay: .5s;
}
.intro a { animation-delay: .8s;
}
@keyframes slide-up { 0% { opacity: 0; -moz-transform: translateY(9999px); -ms-transform: translateY(9999px); -webkit-transform: translateY(9999px); transform: translateY(9999px); } 100% { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }
}
.text-upper { text-transform: uppercase;
}
.text-lower { text-transform: lowercase;
}
.text-capitalize { text-transform: capitalize;
}
.text-left { text-align: left;
}
.text-right { text-align: right;
}
.text-center { text-align: center;
}
.btn-square { border-radius: 0;
}
.btn-icon-reveal { position: relative; overflow: hidden; padding-left: 3%; padding-right: 3%;
}
.btn-icon-reveal.btn-xs i { line-height: 1.5;
}
.btn-icon-reveal i, .btn-icon-reveal span, .btn-icon-reveal span::after { -moz-transition: left 0.3s ease, right 0.3s ease; -o-transition: left 0.3s ease, right 0.3s ease; -webkit-transition: left 0.3s ease, right 0.3s ease; transition: left 0.3s ease, right 0.3s ease;
}
.btn-icon-reveal i { background-color: rgba(0, 0, 0, 0.1); left: auto; right: -200%; width: 25%; position: absolute; text-align: center; top: 0; bottom: 0; line-height: 2.5;
}
.btn-icon-reveal span { display: inline-block; left: 0; position: relative;
}
.btn-icon-reveal span::after { content: ''; position: absolute; display: block; border-bottom: 2px dotted rgba(255, 255, 255, 0.5); left: -200%; width: 100%; top: 90%;
}
.btn-icon-reveal:hover i, .btn-icon-reveal:focus i { right: 0;
}
.btn-icon-reveal:hover span, .btn-icon-reveal:focus span { left: -25%;
}
.btn-icon-reveal:hover span::after, .btn-icon-reveal:focus span::after { left: 0;
}

A Pen by Tim Johannessen - Script Codes JS Codes

$(function(){	carousel();
});
/***	Original carousel() source by Travis Neilson	http://devtipsshow.com/killingitwithjquery/
***/
function carousel() {	var $carouselWrap = $('.carousel-items'),	$carouselUnits = $carouselWrap.find('.carousel-item'),	unitCount = $carouselUnits.length,	tallestUnitHeight = getTallestUnitHeight(),	$carouselNav = $('.carousel-controls'),	changeInterval = $carouselWrap.attr('data-delay') || 10000,	activeClass = 'is-current';	function getTallestUnitHeight(){ var heights = [];	for (var i = 0; i < unitCount; i++) {	var height = $carouselUnits.eq(i).height();	heights.push(height);	}	var tallest = Math.max.apply(Math, heights);	return tallest;	}	function initCarousel(){	//$carouselUnits.height(tallestUnitHeight).first().addClass('is-current');	$carouselUnits.first().addClass(activeClass);	$carouselWrap.height(tallestUnitHeight);	}	function nextTestimonial(){	if ($carouselUnits.filter('.' + activeClass).index() < unitCount-1) {	$carouselUnits.filter('.' + activeClass).next().addClass(activeClass).siblings().removeClass(activeClass);	}	else {	$carouselUnits.first().addClass(activeClass).siblings().removeClass(activeClass);	}	}	function prevTestimonial(){	if ($carouselUnits.filter('.' + activeClass).index() === 0) {	$carouselUnits.last().addClass(activeClass).siblings().removeClass(activeClass);	}	else {	$carouselUnits.filter('.' + activeClass).prev().addClass(activeClass).siblings().removeClass(activeClass);	}	}	initCarousel();	if (unitCount > 1) {	var carouselInterval = setInterval(function(){ nextTestimonial() }, changeInterval);	} else {	var carouselInterval;	$carouselNav.hide();	}	$carouselNav.children('a').on('click', function(e){	e.stopPropagation();	clearInterval(carouselInterval);	if ($(this).index() === $carouselNav.length) {	nextTestimonial();	} else {	prevTestimonial();	}	return false;	});
} // carousel()
A Pen by Tim Johannessen - Script Codes
A Pen by Tim Johannessen - Script Codes
Home Page Home
Developer Tim Johannessen
Username zubfatal
Uploaded October 17, 2022
Rating 3
Size 8,200 Kb
Views 16,192
Do you need developer help for A Pen by Tim Johannessen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Johannessen (zubfatal) Script Codes
Name
CSS modal
Button fills
Heading styles
Social icons, reveal info
Vertical step boxes
A Pen by Tim Johannessen
Animated curtain reveal
Arrows
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!