"storycode v2"
Bootstrap 3.0.0 Snippet by BlackFoxgamingstudio

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="bg">
<center><div class="openbook">
<img class="bookbg" src="">
<div class="book">
<br>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn1.edgedatg.com/aws/v2/abc/OnceUponaTimeinWonderland/showimages/8fb90328a66a06d06bac379ebee66901/640x180-Q100_8fb90328a66a06d06bac379ebee66901.png" width="170" height="110">
<br><br>
<TextArea rows="7" cols="22">Wonderland...if all the world is a stage, your mind is a forst of wonder. A place of pine an oak. A world of Fanstasy and punder...lets explore the foarst of your mind. Follow me.. </TextArea>
</div>
<div class="item">
<img src="https://fthmb.tqn.com/-A6-7wthLkhovD8Brc5H_DT4EVc=/768x0/filters:no_upscale()/about/Alice-in-Wonderland-58f77dcc3df78ca1593f2ba3.jpg" width="170" height="110">
<br><br>
<TextArea rows="7" cols="22">Wonderland...if all the world is a stage, your mind is a forst of wonder. A place of pine an oak. A world of Fanstasy and punder...lets explore the foarst of your mind. Follow me.. </TextArea>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.bg {
background-image: url("https://i.stack.imgur.com/s4YBx.jpg");
background-size: 100.6%;
}
.openbook {
;
}
.book img {
background-color:white;
}
.bookWrap {
margin:25px auto;
height:546px;
width:430px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}
.book {
background-image: url("https://catabbottbadmp.files.wordpress.com/2012/04/book2.png");
background-size: cover;
background-repeat: no-repeat;
background-position: 100%;
height:346px;
width:230px;
top:0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
// Pause just a moment
setTimeout(function() {
var $book = $('.book');
// Apply the intro classes that will
// appear to turn the book,
// revealing its spine
$book.addClass('bookIntro');
// pause another moment, then turn back
setTimeout(function() {
$book.removeClass('bookIntro');
}, 2000);
}, 1000);
});
$('button').each(function() {
var maxWidth = 600; // Max width for the image
var maxHeight = 600; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro Angular

Questions / Comments: