i have tried a couple of fixes and even turned to chatGPT-4o (right after i looke on the internet and docs)
I want to get this to be my error page which i redirect from a page i am fixing to ensure the people who use my projects know they are either broken or are being worked on. I primarily do countdowns, but i also do other stuff too! CSS is not my strong suite but i wanted to step out of my comfort zone so i tried it an i am not about to waste the 10+ hours i spent of my life just to go back into my comfort zone and do just html.
my html code hub: https://dateclock.w3spaces.com/hub.html
here is the code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<div class="page-setup">
<link rel="icon" href="https://th.bing.com/th/id/OIP.0Z295SNshKyJSCHaQNNjcAHaHa?rs=1&pid=ImgDetMain">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CD ERR PAGE</title>
<style>
body {
background-color: #ff0000; /* set background color to red */
text-align: center; /* center the text */
margin :0; /*remove default margin */
padding: 0; /* remove default padding*/
}
.content {
padding: 20px; /*add padding to create space around content */
box-sizing: border-box; /*include padding in width calculation */
}
h1 {
font-size: 24px; /* Adjust as needed */
color: white; /* Customize the color */
}
p {
font-size: 16px; /* Adjust as needed */
color: white; /* cusomize as needed */
}
footer{
position: relative; /* Ensure footer content is contained */
width: 100%; /* Full width */
height: 50px; /* set fixed height for iframe container */
overflow: hidden; /* Hide any overflow */
}
.iframe-container {
width: 730px; /* occupy full width of container*/
max-width: 100%; /* set limit for width */
height: 500px; /* set height for iframe content */
border: 3px solid white; /* add a 3px solid white border */
display: flex;
justify-content: center; /* center the iframe content */
align-items: center; /* ensure the content is centered */
}
iframe {
display: block;
width: 100%; /* width of footer */
height: 100%; /* full height of footer*/
border: none;
}
</style>
</div>
</head>
<body>
<div class="content">
<h1>Sorry, this countdown is currently broken or is being worked on.</h1>
<p><b>You can check out my <a href="https://dateclock.w3spaces.com/hub.html" target="_blank">HTML hub</a>.</b></p>
<p><b>This issue will be resolved shortly.</b></p>
</div>
<footer>
<div class="iframe-container">
<iframe src="https://cdn.dribbble.com/users/1120320/screenshots/3898259/error.gif"></iframe>
</div>
</footer>
</body>
</html>
Why did you use Iframe and place it in footer? I don't know, but here is solution:
body {
background-color: #ff0000; /* set background color to red */
text-align: center; /* center the text */
margin :0; /*remove default margin */
padding: 0; /* remove default padding*/
}
.content {
display: flex;
flex-direction: column;
align-items:center;
box-sizing: border-box; /*include padding in width calculation */
}
h1 {
font-size: 24px; /* Adjust as needed */
}
p {
font-size: 16px;
}
p,h1{
color: white;
}
.pic-container {
width: 730px; /* occupy full width of container*/
max-width: 100%; /* set limit for width */
height: 500px; /* set height for iframe content */
border: 3px solid white; /* add a 3px solid white border */
display: flex;
justify-content: center; /* center the iframe content */
align-items: center; /* ensure the content is centered */
}
#MyPicture{
width: 100%; /* width of footer */
height: 100%; /* full height of footer*/
background-image:url("https://cdn.dribbble.com/users/1120320/screenshots/3898259/error.gif");
border: none;
}<div class="content">
<h1>Sorry, this countdown is currently broken or is being worked on.</h1>
<p><b>You can check out my <a href="https://dateclock.w3spaces.com/hub.html" target="_blank">HTML hub</a>.</b></p>
<p><b>This issue will be resolved shortly.</b></p>
<div class="pic-container">
<div id="MyPicture"></div>
</div>
</div>