Yapım aşaması sayfası | HTML

Ogehan · 30 May 2024

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;

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 Kodları ;

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;
  }
}

Eleştiri ve görüşlerinizi belirtirseniz sevinirim.
İyi forumlar dilerim.

hybrid9 · 30 May 2024

Ogehan' Alıntı:

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;

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 Kodları ;

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;
  }
}

Eleştiri ve görüşlerinizi belirtirseniz sevinirim.
İyi forumlar dilerim.

Hocam emeğinize sağlık, çok iyi olmuş.

Gadrel · 30 May 2024

Teşekkürler,elinize sağlık hocam

Extazİ · 30 May 2024

Ogehan · 30 May 2024

hybrid9' Alıntı:
Hocam emeğinize sağlık, çok iyi olmuş.

Teşekkürler iyi forumlar dilerim

Gadrel' Alıntı:
Teşekkürler,elinize sağlık hocam

Sağolasınız..

Extazİ' Alıntı:

Lykinex · 30 May 2024

Hocam Elinize Sağlık Aşırıı Güzel Olmuş Böyle Birşey Arıyordum Bende Başarılar Dilerim.

EX · 30 May 2024

El emeğine sağlık.. Bu konular gittikçe keyifli hal alıyor..

Ogehan · 30 May 2024

Lykinex' Alıntı:
Hocam Elinize Sağlık Aşırıı Güzel Olmuş Böyle Birşey Arıyordum Bende Başarılar Dilerim.

Teşekkür ederim iyi forumlar dilerim.

EX' Alıntı:
El emeğine sağlık.. Bu konular gittikçe keyifli hal alıyor..

Sağolasınız hocam teşekkür ederim

`Pala · 30 May 2024

Elinize sağlık çok iyi olmuş.

kenansvc · 30 May 2024

Ben bunu alırım sağol bebişim

Ogehan · 30 May 2024

`Pala' Alıntı:
Elinize sağlık çok iyi olmuş.

Teşekkür ederim

kenansvc' Alıntı:
Ben bunu alırım sağol bebişim

Tamam bebişim güle güle kullan

borderlinerpunk · 30 May 2024

Elinize Sağlık güzel bir paylaşım fakat yazdığınız kod sayfayı yenilediklerinde aynı kaldığı yerden saymak yerine yeniden başlar
çözümüde ben söyleyim yazmış olduğunuz bu kod sayfayı her açtıgınızda yeniden yüklendigi için hep belirttiginiz sayaç kodu yeniden çalıştırmış oluyorsunuz

aslında birçok seçenek var
1. yol sunucunuzun içerisine gerçek zamanlı saat katıp geri sayım başlatmak
2. yol googleden güncel saat verisini çekip geri sayım için istediğiniz zamanı girip güncel zamandan belirlediğiniz zamanı çıkartıp sonucu yazdırmak
3. yol bir sabit değişken içerisinde bu kodu çalıştırmak

Ogehan · 30 May 2024

borderlinerpunk' Alıntı:
Elinize Sağlık güzel bir paylaşım fakat yazdığınız kod sayfayı yenilediklerinde aynı kaldığı yerden saymak yerine yeniden başlar
çözümüde ben söyleyim yazmış olduğunuz bu kod sayfayı her açtıgınızda yeniden yüklendigi için hep belirttiginiz sayaç kodu yeniden çalıştırmış oluyorsunuz

aslında birçok seçenek var
1. yol sunucunuzun içerisine gerçek zamanlı saat katıp geri sayım başlatmak
2. yol googleden güncel saat verisini çekip geri sayım için istediğiniz zamanı girip güncel zamandan belirlediğiniz zamanı çıkartıp sonucu yazdırmak
3. yol bir sabit değişken içerisinde bu kodu çalıştırmak

Teşekkürler önerilerin için dikkate alıcağım fakat henüz bir koddan ibaret olduğu için o şekilde siteye entegre edeceğimiz zaman varyantları değiştirilir

Qhexya · 30 May 2024

Ogehan' Alıntı:

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;

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 Kodları ;

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;
  }
}

Eleştiri ve görüşlerinizi belirtirseniz sevinirim.
İyi forumlar dilerim.

Gayet başarılı emek verilmiş

Ogehan · 30 May 2024

Qhexya' Alıntı:
Gayet başarılı emek verilmiş

Teşekkür ederim sizler için

Yapım aşaması sayfası | HTML

Ogehan

-

hybrid9

Üye

Gadrel

Yeni üye

Extazİ

Moderatör

Ogehan

-

Lykinex

Yeni üye

EX

Deneyimli Moderatör

Ogehan

-

`Pala

Katılımcı Üye

kenansvc

Yeni üye

Ogehan

-

borderlinerpunk

Yeni üye

Ogehan

-

Qhexya

Yeni üye

Ogehan

-

Sosyal medya sayfalarımız