A Pen by Matthew Nahmias

Developer
Matthew Nahmias
Size
4,649 Kb
Views
8,096
  1. A Pen by Matthew Nahmias Previews
  2. A Pen by Matthew Nahmias HTML Codes
  3. A Pen by Matthew Nahmias CSS Codes
  4. A Pen by Matthew Nahmias JS Codes

How do I make an a pen by matthew nahmias?

What is a a pen by matthew nahmias? How do you make a a pen by matthew nahmias? This script and codes were developed by Matthew Nahmias on 27 December 2022, Tuesday.

A Pen by Matthew Nahmias Previews
IQ Test

A Pen by Matthew Nahmias - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Matthew Nahmias</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid carousel-container">	<div class="row">	<div class="col-md-10 col-md-offset-1">	<div class="carousel-overview">	<a class="carousel__close" href="#">X</a> <img alt="" border="0" class="carousel-overview__map" height="631" id="Image-Maps-Com-image-maps-2016-10-18-130928" src="http://usga.reingolddev.com/images/usga-wireframe-interactive-hole.png" usemap="#image-maps-2016-10-18-130928" width="1036"> <map id="ImageMapsCom-image-maps-2016-10-18-130928" name="image-maps-2016-10-18-130928">	<area alt="" class="carousel-overview__slide-link" coords="280,186,344,251" data-slide-to="0" href="#myCarousel" shape="rect" style="outline:none;" target="_self" title="">	<area alt="" class="carousel-overview__slide-link" coords="649,101,719,169" data-slide-to="1" href="#myCarousel" shape="rect" style="outline:none;" target="_self" title="">	<area alt="" class="carousel-overview__slide-link" coords="403,118,470,186" data-slide-to="2" href="#myCarousel" shape="rect" style="outline:none;" target="_self" title="">	<area alt="" class="carousel-overview__slide-link" coords="767,169,837,237" data-slide-to="3" href="#myCarousel" shape="rect" style="outline:none;" target="_self" title="">	<area alt="Image Map" coords="1034,629,1036,631" href="http://www.image-maps.com/index.php?aff=mapped_users_0" shape="rect" style="outline:none;" title="Image Map">	</map>	</div><!-- Carousel ================================================== -->	<div class="carousel hidden" id="myCarousel">	<div class="carousel-inner">	<div class="item active">	<a class="carousel__close" href="#">X</a> <a class="carousel__back" href="#">Overview</a> <img alt="Slide1" class="thumbnail" src="http://placehold.it/1200x300/">	<div class="caption">	<div class="caption__side">	<p class="caption__text">SLIDE 1 FRONT Sed elementum interdum dolor, id tincidunt mauris viverra id. Proin eget placerat odio. Donec accumsan augue est, sed pulvinar augue laoreet pellentesque. In ut bibendum massa. Quisque blandit odio ac arcu congue, sed gravida erat accumsan. Nulla posuere lacinia diam, at feugiat ante iaculis at. Mauris fermentum turpis nec diam eleifend tempus. Integer pellentesque dictum ligula. In hac habitasse platea dictumst.</p>	<hr class="caption__divider">	<a class="caption__toggle" href="#">How to take relief</a>	</div>	<div class="caption__side hidden flipped">	<p class="caption__text">SLIDE 1 BACK Phasellus blandit a dolor vel consequat. Maecenas et leo quis urna congue feugiat sit amet a leo. Aliquam erat volutpat. Praesent odio eros, consectetur nec urna ut, tincidunt dignissim velit. Pellentesque dignissim congue erat, eget pharetra dui vestibulum eget. Curabitur gravida faucibus ante ac posuere. Morbi sit amet sem risus.</p>	<hr class="caption__divider">	<a class="caption__toggle" href="#">Back to the obstruction</a>	</div><a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>	</div>	</div>	<div class="item">	<a class="carousel__close" href="#">X</a> <a class="carousel__back" href="#">Overview</a> <img alt="Slide1" class="thumbnail" src="http://placehold.it/1200x300/">	<div class="caption">	<div class="caption__side">	<p class="caption__text">SLIDE 2 FRONT Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras porttitor eros ipsum, eget pretium justo dictum eget. Sed feugiat enim a erat scelerisque, quis sodales risus dapibus. Praesent rhoncus tortor eu interdum tincidunt. Integer dictum enim eu diam mattis, sit amet tincidunt odio laoreet.</p>	<hr class="caption__divider">	<a class="caption__toggle" href="#">How to take relief</a>	</div>	<div class="caption__side hidden flipped">	<p class="caption__text">SLIDE 2 BACK Phasellus blandit a dolor vel consequat. Maecenas et leo quis urna congue feugiat sit amet a leo. Aliquam erat volutpat. Praesent odio eros, consectetur nec urna ut, tincidunt dignissim velit. Pellentesque dignissim congue erat, eget pharetra dui vestibulum eget. Curabitur gravida faucibus ante ac posuere. Morbi sit amet sem risus.</p>	<hr class="caption__divider">	<a class="caption__toggle" href="#">Back to the obstruction</a>	</div><a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>	</div>	</div>	<div class="item">	<a class="carousel__close" href="#">X</a> <a class="carousel__back" href="#">Overview</a> <img alt="Slide1" class="thumbnail" src="http://placehold.it/1200x300/">	<div class="caption">	<div class="caption__side">	<p class="caption__text">SLIDE 3 FRONT Nam vel felis nunc. Vivamus sodales velit tortor, vitae gravida sem sollicitudin id. Donec bibendum venenatis eros. Cras ornare dolor non velit rhoncus, id vehicula diam dapibus. Praesent et ligula enim. Sed porta velit id lectus fermentum euismod.</p>	<hr class="caption__divider">	<a class="caption__toggle" href="#">How to take relief</a>	</div>	<div class="caption__side hidden flipped">	<p class="caption__text">SLIDE 3 BACK Phasellus blandit a dolor vel consequat. Maecenas et leo quis urna congue feugiat sit amet a leo. Aliquam erat volutpat. Praesent odio eros, consectetur nec urna ut, tincidunt dignissim velit. Pellentesque dignissim congue erat, eget pharetra dui vestibulum eget. Curabitur gravida faucibus ante ac posuere. Morbi sit amet sem risus.</p>	<hr class="caption__divider">	<a class="caption__toggle" href="#">Back to the obstruction</a>	</div><a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>	</div>	</div>	<div class="item">	<a class="carousel__close" href="#">X</a> <a class="carousel__back" href="#">Overview</a> <img alt="Slide1" class="thumbnail" src="http://placehold.it/1200x300/">	<div class="caption">	<div class="caption__side">	<p class="caption__text">SLIDE 4 FRONT Suspendisse laoreet faucibus libero. Duis in justo in elit dapibus fringilla. Nam vel felis nunc. Vivamus sodales velit tortor, vitae gravida sem sollicitudin id. Donec bibendum venenatis eros. Cras ornare dolor non velit rhoncus, id vehicula diam dapibus. Praesent et ligula enim. Sed porta velit id lectus fermentum euismod.</p>	<hr class="caption__divider">	<a class="caption__toggle" href="#">How to take relief</a>	</div>	<div class="caption__side hidden flipped">	<p class="caption__text">SLIDE 4 BACK Phasellus blandit a dolor vel consequat. Maecenas et leo quis urna congue feugiat sit amet a leo. Aliquam erat volutpat. Praesent odio eros, consectetur nec urna ut, tincidunt dignissim velit. Pellentesque dignissim congue erat, eget pharetra dui vestibulum eget. Curabitur gravida faucibus ante ac posuere. Morbi sit amet sem risus.</p>	<hr class="caption__divider">	<a class="caption__toggle" href="#">Back to the obstruction</a>	</div><a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>	</div>	</div>	</div>	</div><!-- End Carousel -->	</div>	</div>	</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Matthew Nahmias - Script Codes CSS Codes

.carousel-container{ height: 200vh; padding-top: 100px; background-color: rgba(0,0,0,.8)
}
.carousel-overview{ background-color: #fff;
}
.carousel-overview__image{ width: 100%;
}
.carousel-overview__slide-link{
/* border: 3px solid red; */
}
.carousel-overview__map{ width: 100%; height: auto;
}
.carousel{ background-color: #fff;
}
.carousel-inner{
/* transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}
.caption__side.flipped {
/* -webkit-transform: rotateY(180deg); transform: rotateY(180deg); */
}
.carousel__close{ position: absolute; top: 5px; left: 15px; color: #fff; font-size: 24px;
}
.carousel__back{ position: absolute; top: 5px; right: 15px; color: #fff; font-size: 24px;
}
.thumbnail{ margin: 0; padding: 0; border-radius: 0; border: 0;
}
.caption{ padding: 20px; text-align: center; position: relative;
}
.caption__text{ max-width: 600px; text-align: center; margin: 0 auto;
}
.caption__divider{ max-width: 450px; color: #CEC8D7; border: 1px solid #CEC8D7;
}
.caption__toggle{ display: inline-block; border: 3px solid #E90000; padding: 6px 10px; color: #E90000;
}
.carousel-control.left{ background-image: none; background: transparent;
}
.carousel-control.right{ background-image: none; background: transparent;
}

A Pen by Matthew Nahmias - Script Codes JS Codes

/*
* rwdImageMaps jQuery plugin v1.6
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2016 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function($) {	$.fn.rwdImageMaps = function() {	var $img = this;	var rwdImageMap = function() {	$img.each(function() {	if (typeof($(this).attr('usemap')) == 'undefined')	return;	var that = this,	$that = $(that);	// Since WebKit doesn't know the height until after the image has loaded, perform everything in an onload copy	$('<img />').on('load', function() {	var attrW = 'width',	attrH = 'height',	w = $that.attr(attrW),	h = $that.attr(attrH);	if (!w || !h) {	var temp = new Image();	temp.src = $that.attr('src');	if (!w)	w = temp.width;	if (!h)	h = temp.height;	}	var wPercent = $that.width()/100,	hPercent = $that.height()/100,	map = $that.attr('usemap').replace('#', ''),	c = 'coords';	$('map[name="' + map + '"]').find('area').each(function() {	var $this = $(this);	if (!$this.data(c))	$this.data(c, $this.attr(c));	var coords = $this.data(c).split(','),	coordsPercent = new Array(coords.length);	for (var i = 0; i < coordsPercent.length; ++i) {	if (i % 2 === 0)	coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);	else	coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);	}	$this.attr(c, coordsPercent.toString());	});	}).attr('src', $that.attr('src'));	});	};	$(window).resize(rwdImageMap).trigger('resize');	return this;	};
})(jQuery);
$('#myCarousel').carousel({	interval: false	});
$('.caption__toggle').on('click', function(){ $(this).parent().toggleClass('hidden'); $(this).parent().siblings('.caption__side').toggleClass('hidden');
});
$('.carousel-overview__slide-link').on('click', function(event){ $('.carousel-overview').toggleClass('hidden'); $('.carousel').toggleClass('hidden');
});
$('.carousel__back').on('click', function(event){ $('.carousel-overview').toggleClass('hidden'); $('.carousel').toggleClass('hidden');
});
$('img[usemap]').rwdImageMaps();
$('.carousel__close').on('click', function(){ $('.carousel-container').toggleClass('hidden');
});
A Pen by Matthew Nahmias - Script Codes
A Pen by Matthew Nahmias - Script Codes
Home Page Home
Developer Matthew Nahmias
Username mnahmias
Uploaded December 27, 2022
Rating 3
Size 4,649 Kb
Views 8,096
Do you need developer help for A Pen by Matthew Nahmias?

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!

Matthew Nahmias (mnahmias) Script Codes
Name
Content Replacement - Exercise
Click Event - Exercise
Click Event - Solution
Bus Animation
React Random Color Generator
Light Switch - Exercise
Light Switch - Solution
Madlib Game - Exercise
Travel Preloader
Array Manipulation Example
Create amazing blog posts 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!