Difference between revisions of "Making an "Under Construction" page"
Jump to navigation
Jump to search
(→Download the background image) |
(→Download the background image) |
||
| Line 80: | Line 80: | ||
=Download the background image= | =Download the background image= | ||
| − | [https://www.imaginet.co.za/kb/images/2/26/Background.png Right-click this link] | + | [https://www.imaginet.co.za/kb/images/2/26/Background.png Right-click this link] and click '''Save link as...''' and then click '''Save'''. |
=Upload to your hosting package= | =Upload to your hosting package= | ||
Revision as of 19:07, 16 February 2023
Here's an quick under construction page which you can get set up on your hosting package in just a few minutes. You'll also learn some useful skills along the way!
Contents
Making the page
All you need to make a basic HTML page is a text editor. On Windows, the easiest option is Notepad. On Mac, TextEdit is the default choice.
Please don't use Word to make your page. It won't work.
Open your text edit, then copy the text in the block below and paste it into your text editor.
<html>
<head>
<title>Under construction</title>
<meta name="description" content="This website is under construction">
<meta name="keywords' content="my website, my business, my products">
<meta name="viewport" content="height=device-height, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/* Container holding the image and the text */
.page {
position: relative;
text-align: center;
color: black;
display: flex;
justify-content: center;
overflow: hidden;
height: 100vh;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-45%, -65%);
font-size: 2em;
}
/* style of space behind the image */
body {
background-color: black;
}
</style>
</head>
<body>
<div class="page">
<img src="Background.png" alt="Under construction page">
<div class="centered">
<p><center>
My website
</br>
Coming soon
</center></p>
</div>
</div>
</body>
</html>
Save the file
In TextEdit
Download the background image
Right-click this link and click Save link as... and then click Save.
