html
html
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
<!-- AUTHOR: esenia.
Practicing Bootstrap. This is more PC friendly - I tried to resize the images to better fit the slides.
UPDATE: 7:27 Added extra notes to help in some way.
Just follow the notes through before you run it, or routinely check. Making it IS really simple.
Hope you liked it!
Features:
Bootstrap carousel slideshow!
Images with sources linked in the JS TAB.
Custom cursor.
My signature changing backgrounds. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Using Bootstrap!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Linking to external files - Bootstrap is linked here, to enable us to make a code using it. -->
<!-- Slideshow structure begins here. myCarousel ids it as the slideshow here, <li> defines each slide here. Add more to make more slides.
Active defines the first slide the page loads to. -->
Enter to Rename, Shift+Enter to Preview
css
css
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
html,
body {
font-family: 'Arial';
font-size: 13pt;
background-color: #794433;
padding: 0px;
margin: 0px;
/* Custom cursor. */
cursor: url('https://68.media.tumblr.com/f1bb017f9e5e00b6568f1baed6189b0b/tumblr_inline_n6qzh1sc1d1s97ld5.png'), auto;
/* Webkit starts here. */
-webkit-animation-moz-animation: background 5s cubic-bezier(1,0,0,1) infinite; animation: background 5s cubic-bezier(1,0,0,1) infinite;
}
@-webkit-keyframes background {
0% { background-color: #E8BAA8; }
33% { background-color: #F4BEA9; }
}
@keyframes background {
50% { background-color: #794433; }
50% { background-color: #593225; }
}
/* Webkit frames end. */
/* Choosing the font color. */
p {
color:#fff;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
// IMAGE SOURCES:
// http://tkkatherineblog.tumblr.com/
// http://ndrv3.tumblr.com/post/163644441833/lavendergin
// http://ndrv3.tumblr.com/post/163641682748/sputniksea-httpsinstagramcompbn606saanv5
// http://ndrv3.tumblr.com/post/163640801042/tummynho-httpsinstagramcompbvaentel9rj
// https://umrzec.tumblr.com/post/161542365042/httpsinstagramcompbnivya1amsm
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run