Difference between revisions of "Making an "Under Construction" page"
Jump to navigation
Jump to search
(→Save the file) |
(→Save the file) |
||
| Line 54: | Line 54: | ||
==Save the file== | ==Save the file== | ||
| − | <div style="overflow:hidden" | + | <div style="overflow:hidden"> |
[[file:Notepad_encoding.jpeg|thumb|be sure to choose UTF-8 encoding before saving]] | [[file:Notepad_encoding.jpeg|thumb|be sure to choose UTF-8 encoding before saving]] | ||
| + | |||
| + | </div> | ||
=Download the background image= | =Download the background image= | ||
=Upload to your hosting package= | =Upload to your hosting package= | ||
Revision as of 18:50, 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>
