Cobain !! Membuat Cooming Soon Page Sederhana
Halo semua, kembali lagi dengan saya Luthfian, kali ini saya kaan membahas bagaimana cara membuat cooming soon sederhana dengan HTML, CSS
Apasih Cooming Soon itu ?
Arti : Segera Datang
Nah disini kita akan membuat nya
Apasih Cooming Soon itu ?
Arti : Segera Datang
Nah disini kita akan membuat nya
<!DOCTYPE html>
<html>
<style>
body, html {
height: 100%;
margin: 0;
}
.bgimg {
background-image: url('../W3CH/Tulips.jpg');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.topleft {
position: absolute;
top: 0;
left: 16px;
}
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
</style>
<body>
<div class="bgimg">
<div class="topleft">
<p><img src="../W3CH/JejakmountainLogo.png"></p>
</div>
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p>35 days left</p>
</div>
<div class="bottomleft">
<p>Mohon Maaf Web Sedang Maintentance</p>
</div>
</div>
</body>
</html>
<html>
<style>
body, html {
height: 100%;
margin: 0;
}
.bgimg {
background-image: url('../W3CH/Tulips.jpg');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.topleft {
position: absolute;
top: 0;
left: 16px;
}
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
</style>
<body>
<div class="bgimg">
<div class="topleft">
<p><img src="../W3CH/JejakmountainLogo.png"></p>
</div>
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<p>35 days left</p>
</div>
<div class="bottomleft">
<p>Mohon Maaf Web Sedang Maintentance</p>
</div>
</div>
</body>
</html>
Post a Comment