KAYIT Formu Oluşturma HTML+CSS


Merhaba arkadaşlar,

Bu yazımızda html ve css kullanarak kayıt ol sayfası oluşturacağız.

Öncelikle sayfamızın css eklenmeden sadece html ile nasıl göründüğüne bakalım.

kayıtol.html

 

 

 

style.css

Öncelikle sayfamıza bir arka plan fotoğrafı ekleyelim. Benim seçtiğim fotoğrafa buradan ulaşabilirsiniz.

body{
      margin: 0;
      background-image: url(background3.jpg);
      background-size: 100% ;
}

 

Kayıt ol formumuzun sınırlarını belirleyecek olan çerçeve class’ımız css uyguluyoruz. Width değerini  %  olarak vermemizin nedeni sayfamızı büyülttüğümüzde veya küçülttüğümüzde sınırlarını varsayılan değere göre orantılı olarak belirlemesi.

.cerceve{ 
          width:34.8%;
          background-color: #f4f4f4;
          height:455px; 
          margin: 8% auto;
          border-radius: 7px;
          text-align: center;
          border: 2px solid #e2405f;
        }

 

Eklediğim Profil fotoğrafının köşelerini yuvarlıyoruz ve konumlandırılmasını ayarlıyoruz.

.cerceve img{
            border-radius: 100px;
            margin-top:20px;
        }

 

Html kısımda farkettiyseniz kullanıcıadı girişyap formlarımız için form adında bir class oluşturmuştuk. Form classımızın css özelliklerini yazıyoruz.

.form{
           height: 20px;
           width: 50%;
           border-radius: 3px;
           margin-top: 10px;
       }

 

Kayıt Ol butonumuzun css özelliklerini yazıyoruz.( Aynı özellikleri Buton adında bir class oluşturarak da atayabilirdik ama örneğimizde farklı bir selector kullanımı olsun diye böyle yapmayı tercih ettim, Selector anlatımı ).

input[type="submit"]{
           width: 100px;
           height: 28px;
           color: #4f332f;
           border: 1px solid #ea9393;
           margin-top: 35px;
       }

 

Son olarak sayfamızın ve a etiketlerinin yazı rengini değiştiriyoruz.

div{
      color: #4f332f;
   }

.cerceve a{
      color: #ea9393;
   }

 

Şimdi Kayıt ol sayfamızın nasıl göründüğüne bakalım.

 

 

 

Ek olarak;

Profil iconumuzun konumunu değiştirelim.

.cerceve img{
      border-raidus:100px;
      margin-top:-45px;
}
Height ve margin değerlerinde de değişiklik yapıldı

 

İyi çalışmalar…

KAYIT Formu Oluşturma HTML+CSS

Giriş Yap

Hoşgeldin
Don't have an account?
Kayıt Ol

Şifreni Yenile

Back to
Giriş Yap

Kayıt Ol

Ekimize Katılmaya Hazırmısın

Back to
Giriş Yap
Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals