Skip to content

Commit 1a9a1fc

Browse files
UwUcodeposterUwUcodeposter
authored
Refactor index.html with CSS and structure changes
Updated HTML structure and styling, added CSS rules for layout and design.
1 parent 4fec5f8 commit 1a9a1fc

1 file changed

Lines changed: 127 additions & 84 deletions

File tree

‎index.html‎

Lines changed: 127 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,127 @@
1-
<!--100% human ^w^-->
2-
3-
<!DOCTYPE html>
4-
<html lang="en">
5-
6-
<head>
7-
<meta charset="UTF-8">
8-
<title>Stop AI</title>
9-
<link href="stylesheet.css" rel="stylesheet">
10-
<link rel="icon" href="Photos/fav.png" type="image/png">
11-
</head>
12-
13-
<body>
14-
<!-- (for later)
15-
<input style="display: inline;" type="checkbox" id="DarkMode">
16-
<div class="caption">Focussed Reading</div>
17-
18-
<input type="checkbox" id="DarkMode">
19-
<label class="paragraph" for="DarkModeToggle">Enable Dark Mode</label>
20-
-->
21-
22-
<div class="heading">What is the Carbon Cycle?</div>
23-
<div class="paragraph">
24-
The carbon cycle is a cycle of carbon (in the form of CO2) being added to or taken from the atmosphere,
25-
balancing it out
26-
The processes are usually done through processes, such as: combustion, AI generatio,n etc.. The cycle is the
27-
balance of CO<sub>2</sub> getting removed and added. The problem is the imbalance of carbon in the
28-
atmosphere. Too much or a lack of CO<sub>2</sub> will kill off most of the aerobic life on earth.
29-
The problem right now is that we are producing too much CO<sub>2</sub>. This is through ways such as combustion,
30-
burning, and exhaling. On the contrary, the way that CO<sub>2</sub> is used is mainly in photosynthesis for
31-
plants
32-
but due to deforestation, it isn't removing enough carbon from the atmosphere. (kmansfield).
33-
</div>
34-
<br>
35-
<div class="paragraph">
36-
We are the biggest problem when it comes to balancing the atmosphere is us. We create an unbalance of
37-
CO<sub>2</sub>
38-
in unnatural ways such as combustion, burning (for example, fossil fuels), Generative AI, and many more. We also
39-
lower
40-
CO<sub>2</sub> intake by chopping trees and trashing in the ocean.
41-
</div>
42-
<div class="paragraph">
43-
<u>You</u> can help balance the atmosphere by:
44-
</div>
45-
<ul class="paragraph">
46-
<li>Carpooling</li>
47-
<li>Generative AI</li>
48-
<li>Eating Healthier</li>
49-
<li>Flying Less (The Global Goals)</li>
50-
</ul>
51-
<div class="paragraph">
52-
Now diving specfically in AI a modern cause of carbon cycle disruption. Massive amounts of energy is used for AI
53-
every day.
54-
It's not even limited to electricity LLM's use ~50 million gallons according to This is even worse for LLM's for
55-
example chatGPT has over 1 million GPUs (Zewe).
56-
</div>
57-
<br>
58-
<div class="caption">Diagram of carbon cycle</div>
59-
<img src="Photos/diagram.png" alt="Diagram (if you see this, the image is not working)" class="picture">
60-
<div class="caption">(kmansfield)</div>
61-
<br>
62-
63-
<div class="heading">How does AI change the Carbon Cycle</div>
64-
<div class="paragraph">Hi, have you ever wondered what was behind AI, and its ethics?</div>
65-
<div class="paragraph">AI, what we use every day without thought.</div>
66-
67-
<br><br><br>
68-
69-
<footer>
70-
<a href="./citations.html">
71-
<button class="button">Works Cited (MLA)</button>
72-
</a>
73-
74-
<button class="button" onclick="UnderConstruction()">Give Feedback</button>
75-
76-
<div class="footnote">Creator: Hague</div>
77-
<div style="display: inline;" class="footnote">Github Repository: </div>
78-
<a href="https://github.com/UwUcodeposter/stopai">https://github.com/UwUcodeposter/stopai</a>
79-
</footer>
80-
81-
<script src="index.js"></script>
82-
</body>
83-
84-
</html>
1+
/* Hague wuz here tsneraiotsnreatioantesiraotnreaiotnre */
2+
3+
/* Tags */
4+
5+
body {
6+
background-color: rgb(255, 255, 255);
7+
margin: 2vw;
8+
font-family: 'times new roman';
9+
}
10+
11+
footer {
12+
background-color: rgb(99, 99, 99);
13+
margin: 0.25vw;
14+
padding: 2vw;
15+
}
16+
17+
/* Classes */
18+
.paragraph {
19+
display: block;
20+
text-align: left;
21+
text-indent: 30px;
22+
font-size: 1.5vw;
23+
color: rgb(0, 0, 0);
24+
25+
transition: all 25ms ease-in-out;
26+
}
27+
28+
/*
29+
div:hover {
30+
color: rgb(255, 255, 255);
31+
background-color: rgb(0, 0, 0);
32+
}
33+
*/
34+
35+
36+
.heading {
37+
display: block;
38+
text-align: center;
39+
font-size: 3vw;
40+
color: rgb(0, 0, 0);
41+
}
42+
43+
.footnote {
44+
font-size: 1vw;
45+
color: rgb(255, 255, 255);
46+
}
47+
48+
.button {
49+
display: block;
50+
text-align: center;
51+
margin: 0 auto;
52+
margin-top: 0.5vw;
53+
margin-bottom: 0.5vw;
54+
padding: 0.5vw 0.75vw;
55+
border-width: 0.5vw;
56+
border-radius: 25px;
57+
58+
font-size: 1.5vw;
59+
border-color: rgb(0, 0, 0);
60+
61+
opacity: 100%;
62+
cursor: pointer;
63+
64+
transition: all 0.4s ease-in-out;
65+
}
66+
67+
68+
.button:hover {
69+
opacity: 50%;
70+
border-radius: 0%;
71+
}
72+
73+
.picture {
74+
opacity: 100%;
75+
display: block;
76+
margin-left: auto;
77+
margin-right: auto;
78+
cursor: crosshair;
79+
80+
width: 30vw;
81+
height: 20vw;
82+
83+
transition: opacity 100ms ease-in-out;
84+
}
85+
86+
.picture:hover {
87+
opacity: 80%;
88+
}
89+
90+
.caption {
91+
text-align: center;
92+
font-size: 1vw;
93+
color: rgb(0, 0, 0);
94+
}
95+
96+
.cite_1 {
97+
/* Used document design mode pasted and copied the style */
98+
99+
color: rgb(0, 0, 0);
100+
text-align: center;
101+
font-size: 11pt;
102+
font-family: "Times New Roman";
103+
line-height: 200%;
104+
margin-top: 0px;
105+
margin-bottom: 0em;
106+
margin-left: 36pt;
107+
tab-size: 36pt;
108+
text-indent: -36pt;
109+
}
110+
111+
.cite_2 {
112+
color: rgb(0, 0, 0);
113+
text-align: center;
114+
font-size: 11pt;
115+
line-height: 200%;
116+
margin-top: 0px;
117+
margin-bottom: 0em;
118+
margin-left: 36pt;
119+
tab-size: 36pt;
120+
text-indent: -36pt;
121+
}
122+
123+
.citeContainer_2 {
124+
margin-top: 0px;
125+
margin-bottom: 0px;
126+
margin-left: -36pt;
127+
}

0 commit comments

Comments
 (0)