Bir site oluşturacaksınız ve yapım aşaması sayfası eklemek istiyorsanız oluşturduğum proje tam size göre....
Kod içerisinde belirttiğimiz süre bittiğinde sitemizin ana sayfası açılacaktır.
Sürelendirme ve yapım işlemlerinizi ona göre ayarlayıp sitenizi yayımlayınız.
Sitemize entegre ettikten sonra sayfamız aşağıdaki resimdeki gibi gözükecektir ve sayacımız
aktif bir şekilde belirttiğimiz süre zarfında geriye doğru işyecektir.
Abone ol kısmında ise mail adresimizi girdikten sonra sitenin sayacı bittikten sonra otomatikmen
email adresinize mail gönderip sizi bilgilendirecektir.
Peki zamanı kendimize göre nasıl ayarlıyacağız ?
Zamanı ayarlamak için aşağıda belirttiğim kod satırlarından değiştirebilirsiniz.
Eğerki fontu beğenmediyseniz aşağıdaki resimde belirttiğim kod satırlarından
istediğiniz fontu ekleyebilirsiniz.
Başlıkları ve arkaplanı kendinize göre ayarlammak isterseniz aşağıdaki resimde belirttiğim
kod satırlarından değiştirebilir ve arkaplanınızı ekleyebilirsiniz.
Gelelim kaynak kodlarımıza...
Projemiz HTML - CSS kodlarından oluşmaktadır.
HTML;
Kod içerisinde belirttiğimiz süre bittiğinde sitemizin ana sayfası açılacaktır.
Sürelendirme ve yapım işlemlerinizi ona göre ayarlayıp sitenizi yayımlayınız.
Sitemize entegre ettikten sonra sayfamız aşağıdaki resimdeki gibi gözükecektir ve sayacımız
aktif bir şekilde belirttiğimiz süre zarfında geriye doğru işyecektir.
Abone ol kısmında ise mail adresimizi girdikten sonra sitenin sayacı bittikten sonra otomatikmen
email adresinize mail gönderip sizi bilgilendirecektir.
Peki zamanı kendimize göre nasıl ayarlıyacağız ?
Zamanı ayarlamak için aşağıda belirttiğim kod satırlarından değiştirebilirsiniz.
Eğerki fontu beğenmediyseniz aşağıdaki resimde belirttiğim kod satırlarından
istediğiniz fontu ekleyebilirsiniz.
Başlıkları ve arkaplanı kendinize göre ayarlammak isterseniz aşağıdaki resimde belirttiğim
kod satırlarından değiştirebilir ve arkaplanınızı ekleyebilirsiniz.
Gelelim kaynak kodlarımıza...
Projemiz HTML - CSS kodlarından oluşmaktadır.
HTML;
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container">
<img src="img/image.jpg" class="image">
<header>Sitemiz Yapım Aşamasındadır</header>
<p>
Sitemiz tamamlandığında hizmenitinize sunulacaktır.
</p>
<div class="time-content">
<div class="time days">
<span class="number">01</span>
<span class="text">Gün</span>
</div>
<div class="time hours">
<span class="number">11</span>
<span class="text">Saat</span>
</div>
<div class="time minutes">
<span class="number">11</span>
<span class="text">Dakika</span>
</div>
<div class="time seconds">
<span class="number">1</span>
<span class="text">Saniye</span>
</div>
</div>
<div class="email-content">
<p>Sitenin gelişmelerinden haberdar olmak için abone ol!</p>
<div class="input-box">
<input type="email" placeholder="E-Posta Adresiniz" />
<button>Abone Ol</button>
</div>
</div>
</section>
<script>
var seconds = document.querySelector(".seconds .number");
var minutes = document.querySelector(".minutes .number");
var hours = document.querySelector(".hours .number");
var days = document.querySelector(".days .number");
var secValue = 10;
var minValue = 10;
var hourValue = 12;
var dayValue = 01;
var timeFunction = setInterval(() => {
secValue--;
if (secValue === 0) {
minValue--;
secValue = 60;
}
if (minValue === 0) {
hourValue--;
minValue = 60;
}
if (hourValue === 0) {
dayValue--;
hourValue = 60;
}
if (dayValue === 0) {
clearInterval(timeFunction);
}
seconds.textContent = secValue < 10 ? `0${secValue}` : secValue;
minutes.textContent = minValue < 10 ? `0${minValue}` : minValue;
hours.textContent = hourValue < 10 ? `0${hourValue}` : hourValue;
days.textContent = dayValue < 10 ? `0${dayValue}` : dayValue;
}, 1000)
</script>
</body>
</html>
CSS:
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
display: flex;
row-gap: 15px;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
width: 100%;
overflow: hidden;
}
.container .image {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.container header {
font-size: 60px;
color: white;
font-weight: 600;
text-align: center;
}
.container p {
font-size: 16px;
font-weight: 400;
color: white;
max-width: 550px;
text-align: center;
}
.container .time-content {
display: flex;
column-gap: 30px;
align-items: center;
}
.time-content .time {
display: flex;
align-items: center;
flex-direction: column;
}
.time .number,
.time .text {
font-weight: 500;
color: white;
}
.time .number {
font-size: 40px;
}
.time .text {
text-transform: capitalize;
font-size: 12px;
}
.email-content {
display: flex;
align-items: center;
flex-direction: column;
margin-top: 30px;
width: 100%;
}
.email-content p {
font-size: 13px;
}
.input-box {
display: flex;
align-items: center;
height: 40px;
max-width: 360px;
width: 100%;
margin-top: 20px;
column-gap: 20px;
}
.input-box input,
.input-box button {
height: 100%;
outline: none;
border: none;
border: 1px solid white;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.2);
font-weight: 400;
}
.input-box input {
width: 100%;
padding: 0 15px;
color: white;
}
input::placeholder {
color: white;
}
.input-box button {
cursor: pointer;
color: white;
white-space: nowrap;
padding: 0 20px;
transition: all 0.3s ease;
}
.input-box button:hover {
background-color: white;
color: #0d6a81;
}
@media screen and (max-width: 300px) {
.container header {
font-size: 50px;
}
}