As Chris pointed out, you need to create a CSS file that links to your HTML file to manage all of the display options in your page, I created a page called 'my_styles.css, you can name it whatever you want AS LONG AS you refer to the same name in your HTML page using -
<link rel="stylesheet" type="text/css" href="my_styles.css">
Place this file in the same directory as your HTML file OR the correct method will be to create a folder for this file where all of your other CSS files will be kept, make sure that you then specify the correct path to this folder and teh respective file.
Remove all of the code under the 'style' heading in your HTML file, your code will thus look similar to the following as a basic example -
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my_styles.css">
</head>
<body>
<h2 class="blink">CogSciDigHumJS</h2>
<center>
<iframe src="https://cogsphere-acogsphere.hf.space" frameborder="0" width="350" height="150"></iframe>
</center>
<br>
<center><img src="https://t3.ftcdn.net/jpg/02/78/34/04/240_F_278340471_pUlwAaBNW5wU181zVxoT6rQZdzuv7Jnm.jpg"
alt="red carpet"></center>
<br>
<center><label for="nameinput">Name:</label></center>
<br>
<br>
<center><input type="text" id="nameinput" placeholder="Enter Your Name Here"/></center>
<br>
<br>
<!--
<center>
<select id="celscilist"></select>
<select id="rate">
<option value="Rate">Rate</option>
<!--
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</center>
<br>
<center><div id="output" style="color: green;">Waiting!</div></center>
<br>
<center><label>Pick a Celsci, Rate it on a scale of 1-5, then Vote!</label></center>
<br>
<center><button type="button" style="background-color: orange" id="button1" onclick="click"> Vote! </button></center>
<br>
<script>
</script>
<script type="module">
import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.min.js";
const generate = document.getElementById("button1");
generate.addEventListener("click", async () =>{
try {
const app = await client("https://cogsphere-acogsphere.hf.space");
const result = await app.predict(0, [
nameinput.value,
select2.value.toString(),
celscilist[select.value],
]);
output.innerHTML = "Sent!"
} catch (error){
console.log("Error:",error.message);
}
}
)
</script>
</body>
</html>
CSS File
body {
background-color: lightgray;
text-align: center;
}
.blink {
animation: blinker 2.5s linear infinite;
color: red;
font-family: cursive;
}
@keyframes blinker {
10% {
opacity: 0;
}
}
select {
margin-top: 10px;
}
I have created a working fiddle for you at -
Center things for me[
^]