-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsites.html
141 lines (129 loc) · 4.41 KB
/
sites.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bees laugh in atbash</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.boxgallery{
margin: auto;
padding:15px 30px 15px;
max-width: 100%;
display: flex;
flex-flow: row-reverse wrap-reverse;
justify-content: center;
}
.box{
display: block;
position: relative;
min-width: 350px;
max-width: 500px;
min-height: 350px;
margin: 5px;
flex-grow: 1;
background-color: white;
background-position: center;
background-size:cover;
border: 4px solid white;
}
.box-hover{
position: absolute;
top: 0;
bottom:0;
padding: 15px 0px 30px;
width: 100%;
opacity: 0;
transition: opacity 0.6s ease;
display:flex;
flex-flow: column nowrap;
overflow: hidden;
}
.box-hover:hover{
opacity: 1;
background: grey;
background: rgba(0, 0, 0, 0.75);
transition: opacity 0.6s;
}
.box a, .box p{
display: inline-block;
width: 90%;
margin:auto;
color:white;
font-size: 110%;
opacity: 0;
transition: opacity 0.4s;
}
.box-hover:hover a, .box-hover:hover p{
opacity: 1;
}
</style>
</head>
<body>
<nav>
<!--fix this--><div id=sidebar><script type="text/javascript" src="sidebar.js"></script></div>
</nav>
<h2>SITE DESIGN</h2>
<img src="imgs/line115.gif">
<h4>Web projects I've made with HTML, CSS, and Javascript.</h4>
<img src="imgs/line115.gif">
<div class="boxgallery">
<div class="box" style="background-image:url(misc/thumbs/sites/hex.jpg)"><div class="box-hover">
<a href=""><h3>Hexagons</h3></a>
<p><em>three animated CSS/JS textures</em></p>
<p><a href="misc/hex1.html">hex1</a><br>
<a href="misc/hex2.html">hex2</a><br>
<a href="misc/hex3.html">hex3</a></p>
</div></div>
<div class="box" style="background-image:url(whatprimedirective/WPDirective.jpg)"><div class="box-hover">
<a href="https://bluef00t.neocities.org/whatprimedirective/index.html"><h3>What Prime Directive?</h3></a>
<p><em>a browser game (2016)</em></p>
<p>JS canvas game<br>
Original graphics
</p>
</div></div>
<!--
I can and should recode this before posting
<div class="box" style="background-image:url()"><div class="box-hover">
<a href="https://templaterr.neocities.org/sidebar/index.html"><h3>JS Navbar for Neocities</h3></a>
<p><em>auto-updating navigation for static sites (2018)</em></p>
<p>Used live on:<br>
<a href="https://mouthmoods.neocities.org/">mouthmoods</a><br>
<a href="https://bloktic.neocities.org/">bloktic</a><br>
<a href="https://paulienkraaijeveld.neocities.org/home.html">PK's portfolio</a>
</p>
</div></div>-->
<div class="box" style="background-image:url(misc/thumbs/sites/template.jpg)"><div class="box-hover">
<a href="https://templaterr.neocities.org"><h3>Templaterr</h3></a>
<p><em>a site for sharing Neocities layouts (2019)</em></p>
<p>Fixed-width, retro<br>
Inspired by <a href="https://web.archive.org/web/20191021221621/http://musicalgorithms.ewu.edu/index.html">Musicalgorithms' 2006 design</a></p>
</div></div>
<div class="box" style="background-image:url(misc/thumbs/sites/rubix.jpg)"><div class="box-hover">
<a href="https://templaterr.neocities.org/rubix/"><h3>Rubix</h3></a>
<p><em>a gallery template for Neocities (2020)</em></p>
<p>Tiled flexbox layout<br>
CSS animation on hover<br>
Responsive</p>
</div></div>
<div class="box" style="background-image:url(misc/thumbs/sites/sandwiches.jpg)"><div class="box-hover">
<a href="music/tmbg"><h3>Truth or Sandwiches</h3></a>
<p><em>a TMBG fansite (2019)</em></p>
<p>Horizontal flexbox navbar<br>
Simple color scheme/design<br>
Mobile compatible
</p>
</div></div>
<div class="box" style="background-image:url(misc/thumbs/sites/lemonadestand.jpg)"><div class="box-hover">
<a href="music/lemondemon"><h3>The Lemonade Stand</h3></a>
<p><em>a Lemon Demon fansite (2020)</em></p>
<p>JS/CSS animated homepage<br>
JS cookies for SFX control<br>
Responsive</p>
</div></div>
</div>
<footer>
Site born Friday the 13th, July 2018. --<a href="https://bluef00t.neocities.org/">GO HOME</a>-- Site may undergo a radical rebuild at any time.
</footer>
</body>
</html>