Etiket: web

KategorilerButon KodlarıKodlar

Sosyal Medya İkonları

Yayın tarihi 24 Mayıs 2022Yayınlayan Muhammed Efe KIRCI
  • Aşağıda insagramda paylaşmış olduğum “Açılır Menü Çubuğu” gönderisin kodları bulunmaktadır.
  • İnsagram gönderisine ulaşmak için buraya tıklayın.
  • Ayrıca gönderilerin devamı için beğenmeyi unutmayın.
  • Kodlarla ilgili sorunlar çıkması durumda www.mekyazilim.com/iletisim kısmından bize ulaşabilirsiniz.

Bu projede ikonlar için font awesome ikon kütüphanesi kullanılmıştır. Aşağıda vericeğim kodu html projenizin head kısmına yapıştırırsanız sorunsuz çalışıcaktır.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

HTML KODLARI


    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-facebook-f"></i>
        </button>
    </li>
    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-instagram"></i></i>
        </button>
    </li>

    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-twitter"></i>
        </button>
    </li>

    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-linkedin-in"></i>
        </button>
    </li>
    <li>
        <button class="btn btn-renk sMedya-btn">
            <i class="fab fa-fw fa-dribbble"></i>
        </button>
    </li>

CSS KODLARI

  li {
            list-style: none;
            display: inline-block;
        }


        .btn {
            font-weight: 400;
            border: 2px solid transparent;
            border-radius: .4rem;
            cursor: pointer;
            transition: all .8s;
        }

        .sMedya-btn {
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
            font-size: 2rem;
            line-height: 2rem;
        }

        .btn-renk {
            color: #212529;
            border-color: #212529;
            background-color: transparent;
        }

        .btn-renk:hover {
            color: #fff;
            background-color: #212529;
        }

KategorilerForm KodlarıGenelKodlar

POP-UP Giriş Ekranı

Yayın tarihi 24 Mayıs 2022Yayınlayan Muhammed Efe KIRCI
  • Aşağıda insagramda paylaşmış olduğum “Açılır Menü Çubuğu” gönderisin kodları bulunmaktadır.
  • İnsagram gönderisine ulaşmak için buraya tıklayın.
  • Ayrıca gönderilerin devamı için beğenmeyi unutmayın.
  • Kodlarla ilgili sorunlar çıkması durumda www.mekyazilim.com/iletisim kısmından bize ulaşabilirsiniz.

HTML KODLARI


  <button class="giris-buton" onclick="openForm()">Giriş Yap</button>

  <div class="form-popup" id="girisForm">
    <form action="" class="form-icerik">
      <h2>Giriş Yap</h2>

      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Mail Girin" name="email" required>

      <label for="psw"><b>Şifre</b></label>
      <input type="password" placeholder="Şifre Girin" name="psw" required>


      <button type="button" class="btn cıkıs" onclick="closeForm()">Vazgeç</button>
      <button type="submit" class="btn">Giriş</button>
    </form>
</div>

CSS KODLARI

 body {
      font-family: Arial, Helvetica, sans-serif;
    }


    * {
      box-sizing: border-box;
    }

    h2 {
      text-align: center;
      margin: 20px;
      padding: 0;
    }

    .giris-buton {
      background-color: #212529;
      color: white;
      padding: 16px 25px;
      border: none;
      cursor: pointer;
      opacity: 0.8;
      width: 170px;
      border-radius: 35px;
    }


    .form-popup {
      display: none;
      position: fixed;
      top: 7px;
      left: 8px;
      border: 3px solid #f1f1f1;
      z-index: 9;
    }


    .form-icerik {
      max-width: 300px;
      padding: 10px;
      background-color: white;
    }


    .form-icerik input[type=text],
    .form-icerik input[type=password] {
      width: 80%;
      padding: 15px;
      margin: 5px 0 22px 0;
      border: none;
      background: #f1f1f1;
      border-radius: 27px;
    }


    .form-icerik input[type=text]:focus,
    .form-icerik input[type=password]:focus {
      background-color: #ddd;
      outline: none;
    }


    .form-icerik .btn {
      background-color: #04AA6D;
      color: white;
      padding: 16px 20px;
      border: none;
      cursor: pointer;
      width: 45%;
      margin-bottom: 10px;
      opacity: 0.8;
      float: left;
      border-radius: 62px;
      margin-right: 14px;
    }

    .form-icerik .cıkıs {
      background-color: red;
    }

    .form-icerik .btn:hover,
    .open-button:hover {
      opacity: 1;
    }

JAVASCRİPT KODLARI

  <script>
    function openForm() {
      document.getElementById("girisForm").style.display = "block";
    }

    function closeForm() {
      document.getElementById("girisForm").style.display = "none";
    }
  </script>

KategorilerKodlarMenü Kodları

Açılır Menü Çubuğu

Yayın tarihi 22 Mayıs 2022Yayınlayan Muhammed Efe KIRCI
  • Aşağıda insagramda paylaşmış olduğum “Açılır Menü Çubuğu” gönderisin kodları bulunmaktadır.
  • İnsagram gönderisine ulaşmak için buraya tıklayın.
  • Ayrıca gönderilerin devamı için beğenmeyi unutmayın.
  • Kodlarla ilgili sorunlar çıkması durumda www.mekyazilim.com/iletisim kısmından bize ulaşabilirsiniz.

HTML KODLARI

  <ul>
        <li>
            <a class="menu-icon" href="#"><i class="fas fa-bars"></i></a>
            <ul class="hidden">
                <li><a href="#"><i class="fas fa-user"></i> Hesabım</a></li>
                <li><a href="#"><i class="fas fa-shopping-basket"></i> Siparişler</a></li>
                <li><a href="#"><i class="fas fa-cog"></i> Ayarlar</a></li>
            </ul>
        </li>
    </ul>

CSS KODLARI

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
    }

    li {
        display: inline-block;
        float: left;
        margin-right: 1px;
    }


    li a {
        display: block;
        background: #2f3036;
        min-width: 55px;
        color: #fff;
        text-decoration: none;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    }

    .menu-icon {
        font-size: 30px;
    }

    li:hover ul a {
        background: #f3f3f3;
        color: black;
        height: 45px;
        line-height: 40px;
    }

    li:hover ul a:hover {
        background: #3b3192;
        color: #fff;
    }

    li ul li a {
        text-align: left;
        min-width: 100px;
        padding: 0 25px;
    }

    li ul {
        display: none;
    }

    ul li a:hover+.hidden,
    .hidden:hover {
        display: inline-block;
    }