-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSplitPage.html
121 lines (100 loc) · 3.64 KB
/
SplitPage.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<head>
<title>Its Halved</title>
<link href="SplitPage/SplitPage.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="split left">
<div class="heading">
<h1>
Franchesca Spektor
</h1>
<h2>
Design Researcher
</h2>
</div>
<div class="body">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<br><br>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
</div>
<div class="linkers">
<ul>
<a href="CV">CV / Resume</a>
<a href="Misc">Miscellany</a>
<a href="Writing">Writing</a>
</ul>
</div>
</div>
<div class="split right">
<div class="slideshow-container">
<div class="slides fade">
<div class="proj">
<p class="projtitle">This is the first Cheezcat</p>
<p class = "projtitle projdate">October 2020</p>
</div>
<img ID="fill" src="MarketableNugget/ListRandomizer/CheezCat1.jpg">
<div class="projinfo">Here is info about the Cheezcat</div>
</div>
<div class="slides fade">
<div class="proj">
<p class="projtitle">This is the BIG Image</p>
<p class="projtitle projdate">October 2020</p>
</div>
<img ID="fill" src="MarketableNugget/ListRandomizer/BIGimage.jpg">
<div class="projinfo">Here is info about the Cheezcat</div>
</div>
<div ID="fill" class="slides fade">
<div class="projtitle">
<p>This is the third Cheezcat</p>
<p class="projdate">October 2020</p>
</div>
<img ID="fill" src="MarketableNugget/ListRandomizer/CheezCat3.jpg" style="width:100%">
<div class="projinfo">Here is info about the Cheezcat</div>
</div>
<div ID="fill" class="slides fade">
<div class="projtitle">
<p>This is the fourth Cheezcat</p>
<p class="projdate">October 2020</p>
</div>
<img ID="fill" src="MarketableNugget/ListRandomizer/CheezCat4.jpg" style="width:100%">
<div class="projinfo">Here is info about the Cheezcat</div>
</div>
<a class ="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="buttons" style="text-align: left">
<button class="dot" onclick="currentSlide(1)"></button>
<button class="dot" onclick="currentSlide(2)"></button>
<button class="dot" onclick="currentSlide(3)"></button>
<button class="dot" onclick="currentSlide(4)"></button>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n){
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if(n < 1) {slideIndex = slides.length}
for(i = 0; i < slides.length; i++){
slides[i].style.display = "none";
}
for(i = 0; i < dots.length; i++){
dots[i].className = "dot";
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</div>
</body>