"Tez orada" sahifasi (coming soon)
CSS va JavaScript yordamida "tez orada" (coming soon) sahifasini yaratishni o‘rganing.
"Tez orada" sahifasi qanday yaratiladi
1-qadam) HTML qo‘shing:
Misolimizda butun sahifani qoplaydigan fon rasmidan foydalanamiz va foydalanuvchiga nima bo‘layotganini bildirish uchun rasm ustiga biroz matn joylashtiramiz.
Bu misol faqat HTML va CSS yordamida "Tez orada" sahifasini qanday yaratishni ko‘rsatadi. JavaScript yordamida "teskari sanoq taymeri"ni ham qanday qo‘shishni bilish uchun keyingi misolga qarang.
Misol
<div class="bgimg">
<div class="topleft">
<p>Logo</p>
</div>
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p>35 days</p>
</div>
<div class="bottomleft">
<p>Some text</p>
</div>
</div>
2-qadam) CSS qo‘shing:
Misol
/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body, html {
height: 100%
}
.bgimg {
/* Background image */
background-image: url('/w3images/forestbridge.jpg');
/* Full-screen */
height: 100%;
/* Center the background image */
background-position: center;
/* Scale and zoom in the image */
background-size: cover;
/* Add position: relative to enable absolutely positioned elements inside the image (place text) */
position: relative;
/* Add a white text color to all elements inside the .bgimg container */
color: white;
/* Add a font */
font-family: "Courier New", Courier, monospace;
/* Set the font-size to 25 pixels */
font-size: 25px;
}
/* Position text in the top-left corner */
.topleft {
position: absolute;
top: 0;
left: 16px;
}
/* Position text in the bottom-left corner */
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
/* Position text in the middle */
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the <hr> element */
hr {
margin: auto;
width: 40%;
}
O‘zingiz sinab ko‘ring »
3-qadam) JavaScript qo‘shing
Teskari sanoq taymerini yaratish uchun JavaScript qo‘shing:
Misol
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2027 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!