Difference between revisions of "Making an "Under Construction" page"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| − | + | <html> | |
| − | + | <head> | |
| − | + | <title>Under construction</title> | |
| − | <html> | + | <meta name="This website is under construction"> |
| − | <head> | + | <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(-50%, -50%); | |
| − | + | font-size: 2em; | |
| − | + | } | |
| − | + | /* style of space behind the image */ | |
| − | + | body { | |
| − | + | background-color: black; | |
| − | + | } | |
| − | + | </style> | |
| − | + | </head> | |
| − | + | <body> | |
| − | + | <div class="page"> | |
| − | </head> | + | <img src="background.png" alt="Under construction page"> |
| − | <body> | + | <div class="centered"> |
| − | + | <p><center> | |
| − | + | My website | |
| − | + | </br> | |
| − | + | Coming soon | |
| − | + | </center></p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </body> | |
| − | + | </html> | |
| − | |||
| − | </body> | ||
| − | </html | ||
| − | |||
Revision as of 17:33, 16 February 2023
<html>
<head>
<title>Under construction</title>
<meta name="This website is under construction">
<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(-50%, -50%);
font-size: 2em;
}
/* style of space behind the image */
body {
background-color: black;
}
</style>
</head>
<body>
<img src="background.png" alt="Under construction page">
My website
Coming soon
</body> </html>
