Difference between revisions of "Making an "Under Construction" page"
Jump to navigation
Jump to search
(→Making the page) |
(→Making the page) |
||
| Line 7: | Line 7: | ||
Open your text edit, then copy the text in the block below and paste it into your text editor. | Open your text edit, then copy the text in the block below and paste it into your text editor. | ||
| − | <code> | + | <code> <html> |
| − | |||
<head> | <head> | ||
<title>Under construction</title> | <title>Under construction</title> | ||
Revision as of 18:46, 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>
