-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
138 lines (131 loc) · 3.98 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<link href="Inter/inter.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {
font-family: 'Inter', sans-serif;
<!--box-sizing: border-box;-->
text-decoration: none;
}
body {
display:grid;
margin: 0;
padding:0;
background-image:linear-gradient(0deg, #199EF3, #E4F8FF, #FFF9CB, #F89C69, #370648, #321957, #220E3E);
background-size: 1600% 1600%;
animation: gradientshift 60s linear infinite;
grid-template-columns:[leftpadding] auto [centre] 600px [rightpadding] auto;
grid-template-rows: repeat(3, minmax(3em,auto));
overflow:hide;
}
#card {
grid-column-start:2;
grid-column-end:span 1;
grid-row-start:2;
grid-row-end:span 1;
width:600px;
height:600px;
display:grid;
grid-template-columns: [cardmid] 600px ;
grid-template-rows:[topbox] 400px [text] 200px;
border-radius:1em;
overflow:hidden;
box-shadow: 0 0.4em 1em 0.2em #00000025;
background-color:#FFFFFF10;
}
.text {
grid-column-start:cardmid;
grid-column-end:span 1;
grid-row-start:text;
font-size: 1.75rem;
padding:auto;
font-weight: 700;
background:url(sig.png) #f1f1f1;
background-size:cover;
background-repeat:no-repeat;
background-size:600px 200px;
}
span {
line-height:50px;
margin-left:2%;
margin-right:2%;
overflow:show;
}
i {
background-image: repeating-linear-gradient(45deg, #FFF9CB, #F89C69, #370648, #321957);
background-size: 800% 800%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientshift 8s ease infinite;
}
#day {
grid-column-start:cardmid;
grid-column-end:span 1;
grid-row-start:topbox;
grid-row-end:text;
background:url(day1.png);
margin:0;
height:600px;
width:800px;
background-size:cover;
background-repeat:no-repeat;
background-size:600px 400px;
}
#night {
grid-column-start:cardmid;
grid-column-end:span 1;
grid-row-start:topbox;
grid-row-end:text;
background:url(day2.png);
animation: opacityshift 60s linear infinite;
margin:0;
height:400px;
width:600px;
background-size:cover;
background-repeat:no-repeat;
background-size:600px 400px;
}
@keyframes opacityshift {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes gradientshift {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 25%
}
100% {
background-position: 0% 50%
}
}
</style>
</head>
<body>
<div id="card">
<div id="day"><div id="night"></div></div>
<div class="text">
<span>
<h1> essay 1: The difference between 'social' and 'natural' sciences (24/02/2023)</h1>
Phenomena below, at the same level or above humans in the human prescribed moral worth scale are all technically subjective, though there is far little opinionation when it comes to things such as physics or chemistry. The slight increase in opinionated outlook towards biological sciences (and higher on the scale, sociological) is based on humans' intrinsic nature to exploit its environment to its advantage colliding with the moral codes it creates for itself and living things it seeks to protect. Whereas the strongest liberal may seek to protect every (what it perceives to be a) living being's individuality, even they could not care less whether an individual bacteria is broken down for support in their immune system (let alone the chemical iron stripped from food for use in their blood). The point here is that when usefulness weighs more than morality, just like the 'objectivity' of analytical tools like mathematics, empirical (real) tools such as physics or chemistry gain a sense of objectivity.
</span>
</div>
</div>
<!--
<grid id="layout">
<div class="j"></div>
<div class="oe"></div>
</grid>
-->
</body>
</html>