A Pen by otlyn

Thumbnail
This awesome code was written by otlyn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright otlyn ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  otlyn</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
    <!-- Slideshow code -->
		<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">


		<title>Only The Life You Need</title>

		<!-- Bootstrap core CSS -->
		<link href="http://otlyn.com/dist/css/bootstrap.css" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="http://otlyn.com/otlyn/css/main.css" rel="stylesheet">

		<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
			<!--[if lt IE 9]>
				<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
				<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
			<![endif]-->
	</head>

	<body data-spy="scroll">
	
		<div class="navbar navbar-default navbar-fixed-bottom">
		  <div class="container">
			<div class="navbar-header">
			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <a class="navbar-brand" href="#">Greetings!</a>
			</div>
			<div class="collapse navbar-collapse">
			  <ul class="nav navbar-nav">
				<li><a href="#film">Film</a></li>
			</ul>
			<ul class="nav navbar-nav">
				<li><a href="#photo">Photo</a></li>
			</ul>
			<ul class="nav navbar-nav">
				<li><a href="#design">Design</a></li>
			</ul>
			<ul class="nav navbar-nav">
				<li><a href="#contact" data-toggle="modal" data-target="#myModal">Contact</a></li>
			  </ul>
			  <ul class="nav navbar-nav navbar-right">
				<li><a href="client">Download</a></li>
			  </ul>
			</div><!--/.nav-collapse -->
		  </div>
		</div>

		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h1 class="modal-title" id="myModalLabel">Greetings!</h1>
					</div>
							<div class="modal-body">
								<p>My name is <strong>Otlyn Black</strong>. I'm a freelance artist primarily working in <em><abbr title="Screenplays, Directing, Cinematagraphy, Editing, Music Composition--the whole shabang!">film</abbr>, <abbr title="Mostly portraits and product advertisement.">photography</abbr> & <abbr title="Websites, Logos, Editorial & Advertisements">design</abbr>.</em> If you'd like to <abbr title="Pay me to do something amazing!">hire me</abbr> or perhaps just say hello, feel free to contact me anytime.</p>
								<address><a href="mailto:#">info@otlyn.com</a><br><abbr title="Phone">P:</abbr> 0722283910<br></address>
							</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->    
		
		<!--Greetings-->
		<div class="container">
			<div class="jumbotron">
				<h1>Greetings!</h1>
				<p class="lead">My name is <strong>Otlyn Black</strong>. I'm a freelance artist primarily working in <em><abbr title="Screenplays, Directing, Cinematagraphy, Editing, Music Composition--the whole shabang!">film</abbr>, <abbr title="Mostly portraits and product advertisement.">photography</abbr> & <abbr title="Websites, Logos, Editorial & Advertisements">design</abbr>.</em> If you'd like to <abbr title="Pay me to do something amazing!">hire me</abbr> or perhaps just say hello, feel free to contact me anytime.</p>
				<button id="aquainted" type="button" class="btn btn-danger btn-lg" rel="popover" data-content="0722283910 info@otlyn.com " container: 'body' data-placement="bottom">Lets get acquainted <span style="margin-left:3px; font-size: .95em" class="glyphicon glyphicon-envelope"></span></button>
				<p style="margin: 100px 0" class="lead"><em>or scroll down...</em></p>
			</div>
		</div><!--/.container-->

		<!--Blog-->
		<div class="container" id="film">
			<div class="header">
				<h1>Film<br><span class="small">The latest and greatest</span></h1><hr>
			</div>
		</div><!--/.container-->
		
		<!--Article--> 
		<div class="container">
			<div class="article">
				<img src="http://sweden.se/wp-content/uploads/2013/06/The-women-in-Strindbergs-life.jpg" class="img-rounded">
				<h1>My Lovely <span style="display: inline-block">&rsaquo;&rsaquo;<small> <em>A short film</em></span></small></h1>
				<p class="lead">Set in Sweden in the early 1900's, My Lovely is about a young girl's struggle to overcome abuse at a time when such things were better kept quiet.</p>
			</div>
		</div><!--/.container-->
		
    		<!--Slideshow Article--> 	
		<div class="container">
			<div class="row article">
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
				<div class="col-sm-3 photo"><a class="img-rounded" href="http://upload.wikimedia.org/wikipedia/commons/2/21/Adams_The_Tetons_and_the_Snake_River.jpg" title="Orange" data-gallery="gallery">
				<img class="img-rounded" src="http://www.whitehouse.gov/sites/default/files/imagecache/embedded_img_full/image/image_file/AA1_Tetons.jpg?itok=3kshmWkD" alt="Orange"></a></div>
			</div>
		</div><!--container-->   
    
		<!--Article--> 	
		<div class="container">
			<div>
				<blockquote><h1>More coming soon!</h1></blockquote>
			</div>
		</div><!--container>    
	  
		<!-- Bootstrap core JavaScript placed at the end of the document so the pages load faster -->
		<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
		<script src="http://otlyn.com/dist/js/bootstrap.min.js"></script>
		<script src="http://otlyn.com/otlyn/js/main.js"></script>
    
    <!-- Slideshow -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
		<script src="http://otlyn.com/otlyn/js/bootstrap-image-gallery.min.js"></script>

	 
	</body>
	
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/otlyn/a-pen-by-otlyn-Jeghl */
@charset "UTF-8";
/*
 * Bootstrap Image Gallery CSS 3.0.0
 * https://github.com/blueimp/Bootstrap-Image-Gallery
 *
 * Copyright 2013, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://www.opensource.org/licenses/MIT
 */

.blueimp-gallery .modal-body {
	position: relative;
	text-align: center;
	padding: 0 0 56.25% 0;
	overflow: hidden;
	cursor: pointer;
}
.blueimp-gallery .modal-footer {
	margin: 0;
}
.blueimp-gallery .modal-body img,
.blueimp-gallery .modal-body .video-content video,
.blueimp-gallery .modal-body .video-content iframe,
.blueimp-gallery .modal-body .video-content a {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.blueimp-gallery .modal-body .video-content video {
 	display: none;
}
.blueimp-gallery .modal-body .video-playing video {
	display: block;
}
.blueimp-gallery .modal-body .video-content iframe {
	width: 100%;
	height: 100%;
	border: none;
	left: 100%;
}
.blueimp-gallery .modal-body .video-playing iframe {
	left: 0;
}
.blueimp-gallery .modal-body .video-playing img,
.blueimp-gallery .modal-body .video-playing a {
 	display: none;
}
.blueimp-gallery .modal-body .video-content a {
	cursor: pointer;
}
.blueimp-gallery .modal-body .video-content a:after {
	font-family: "Glyphicons Halflings";
	-webkit-font-smoothing: antialiased;
	content: "\e029";
	font-size: 64px;
	line-height: 64px;
	width: 64px;
	height: 64px;
	position: absolute;
	top: 50%;
	margin: -32px 0 0 -32px;
}
.blueimp-gallery .modal-body .video-loading a {
	background: url(../img/loading.gif) center no-repeat;
	background-size: 64px 64px;
}
.blueimp-gallery .modal-body .video-loading a:after {
	content: none;
}

@media screen and (min-width: 768px) {
  .blueimp-gallery .modal-dialog {
    right: auto;
    left: auto;
	width: auto;
    max-width: 900px;
    padding-left: 5%;
    padding-right: 5%;
  }
}

@charset "UTF-8";.blueimp-gallery .modal-body{position:relative;text-align:center;padding:0 0 56.25%;overflow:hidden;cursor:pointer}.blueimp-gallery .modal-footer{margin:0}.blueimp-gallery .modal-body img,.blueimp-gallery .modal-body .video-content video,.blueimp-gallery .modal-body .video-content iframe,.blueimp-gallery .modal-body .video-content a{max-width:100%;max-height:100%;margin:auto;position:absolute;top:0;right:0;bottom:0;left:0}.blueimp-gallery .modal-body .video-content video{display:none}.blueimp-gallery .modal-body .video-playing video{display:block}.blueimp-gallery .modal-body .video-content iframe{width:100%;height:100%;border:0;left:100%}.blueimp-gallery .modal-body .video-playing iframe{left:0}.blueimp-gallery .modal-body .video-playing img,.blueimp-gallery .modal-body .video-playing a{display:none}.blueimp-gallery .modal-body .video-content a{cursor:pointer}.blueimp-gallery .modal-body .video-content a:after{font-family:"Glyphicons Halflings";-webkit-font-smoothing:antialiased;content:"\e029";font-size:64px;line-height:64px;width:64px;height:64px;position:absolute;top:50%;margin:-32px 0 0 -32px}.blueimp-gallery .modal-body .video-loading a{background:url(../img/loading.gif) center no-repeat;background-size:64px 64px}.blueimp-gallery .modal-body .video-loading a:after{content:none}@media screen and (min-width:768px){.blueimp-gallery .modal-dialog{right:auto;left:auto;width:auto;max-width:900px;padding-left:5%;padding-right:5%}}




/*Downloaded from https://www.codeseek.co/otlyn/a-pen-by-otlyn-Jeghl */
/*
 * Bootstrap Image Gallery 3.0.1
 * https://github.com/blueimp/Bootstrap-Image-Gallery
 *
 * Copyright 2013, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * https://www.opensource.org/licenses/MIT
 */

/*global define, window */

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        define([
            'jquery',
            './blueimp-gallery'
        ], factory);
    } else {
        factory(
            window.jQuery,
            window.blueimp.Gallery
        );
    }
}(function ($, Gallery) {
    'use strict';

    $.extend(Gallery.prototype.options, {
        useBootstrapModal: true
    });

    var close = Gallery.prototype.close,
        imageFactory = Gallery.prototype.imageFactory,
        videoFactory = Gallery.prototype.videoFactory,
        textFactory = Gallery.prototype.textFactory;

    $.extend(Gallery.prototype, {

        modalFactory: function (obj, callback, factoryInterface, factory) {
            if (!this.options.useBootstrapModal || factoryInterface) {
                return factory.call(this, obj, callback, factoryInterface);
            }
            var that = this,
                modalTemplate = this.container.children('.modal'),
                modal = modalTemplate.clone().show()
                    .on('click', function (event) {
                        // Close modal if click is outside of modal-content:
                        if (event.target === modal[0] ||
                                event.target === modal.children()[0]) {
                            event.preventDefault();
                            event.stopPropagation();
                            that.close();
                        }
                    }),
                element = factory.call(this, obj, function (event) {
                    callback({
                        type: event.type,
                        target: modal[0]
                    });
                    modal.addClass('in');
                }, factoryInterface);
            modal.find('.modal-title').text(element.title || String.fromCharCode(160));
            modal.find('.modal-body').append(element);
            return modal[0];
        },

        imageFactory: function (obj, callback, factoryInterface) {
            return this.modalFactory(obj, callback, factoryInterface, imageFactory);
        },

        videoFactory: function (obj, callback, factoryInterface) {
            return this.modalFactory(obj, callback, factoryInterface, videoFactory);
        },

        textFactory: function (obj, callback, factoryInterface) {
            return this.modalFactory(obj, callback, factoryInterface, textFactory);
        },

        close: function () {
            this.container.find('.modal').removeClass('in');
            close.call(this);
        }

    });

}));


!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery","./blueimp-gallery"],t):t(window.jQuery,window.blueimp.Gallery)}(function(t,o){"use strict";t.extend(o.prototype.options,{useBootstrapModal:!0});var e=o.prototype.close,n=o.prototype.imageFactory,i=o.prototype.videoFactory,r=o.prototype.textFactory;t.extend(o.prototype,{modalFactory:function(t,o,e,n){if(!this.options.useBootstrapModal||e)return n.call(this,t,o,e);var i=this,r=this.container.children(".modal"),a=r.clone().show().on("click",function(t){(t.target===a[0]||t.target===a.children()[0])&&(t.preventDefault(),t.stopPropagation(),i.close())}),c=n.call(this,t,function(t){o({type:t.type,target:a[0]}),a.addClass("in")},e);return a.find(".modal-title").text(c.title||String.fromCharCode(160)),a.find(".modal-body").append(c),a[0]},imageFactory:function(t,o,e){return this.modalFactory(t,o,e,n)},videoFactory:function(t,o,e){return this.modalFactory(t,o,e,i)},textFactory:function(t,o,e){return this.modalFactory(t,o,e,r)},close:function(){this.container.find(".modal").removeClass("in"),e.call(this)}})});

Comments