-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·93 lines (80 loc) · 2.83 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="img/favicon.png" rel="shortcut icon" type="image/x-icon">
<title>Processing Sketches</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<style>
/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans');
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: rgb(245, 245, 245);
}
html,
body {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
background: url('img/background.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-color: #111;
}
img {
width: 100%;
height: 100%;
}
a:link, a:visited {
color: rgb(0, 278, 187);
}
a:hover, a:active {
color: rgb(0, 187, 278);
}
a:link, a:visited, a:hover, a:active {
background-color: transparent;
text-decoration: none;
}
.home-btn {
margin: 2vw;
}
</style>
</head>
<body>
<h1 class="center-align">Processing Sketches</h1>
<div class="container">
<div class="carousel">
<a class="carousel-item">
<img class="materialboxed" data-caption="Circuitboard Disk" src="img/gifs/circuitboard-disk.gif">
</a>
<a class="carousel-item">
<img class="materialboxed" data-caption="Buckyball" src="img/gifs/buckyball.gif">
</a>
<a class="carousel-item">
<img class="materialboxed" data-caption="Hexagons" src="img/gifs/hexagons.gif">
</a>
<a class="carousel-item">
<img class="materialboxed" data-caption="Stars" src="img/gifs/stars.gif">
</a>
</div>
</div>
<h5 class="center-align">Check out the GitHub repository <a href="https://github.com/josedarioxyz/Processing">here</a>.</h5>
<h5 class="center-align"><a class="home-btn" href="http://www.darzyx.com/">Home</a></h5>
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
</body>
</html>