1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İddaa edenlere inanmayınız..⠀ Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.

Html Ve Css Ile Sosyal Medya Tasarımı

'Html - CSS - XML - JavaScript - Ajax' forumunda Rufiq tarafından 24 Ağustos 2017 tarihinde açılan konu

  1. Rufiq Guest

    • Guest
    Katılım:
    23 Ağustos 2017
    Mesaj:
    9
    Alınan Beğeniler:
    9

    Özel Mesaj
    HTML:
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    </head>
    <body>
        <div class="social-media">
            <a href="#" class="facebook"><i class="fa fa-facebook-official"></i>&nbsp;Facebook</a>
            <a href="#" class="twitter"><i class="fa fa-twitter"></i>&nbsp;Twitter</a>
            <a href="#" class="vk"><i class="fa fa-vk"></i>&nbsp;ВКонтакте</a>
        </div>
    </body>
    </html>
     
    fedakarlik ve ForeverTURKEY bunu beğendi.
  2. Rufiq Guest

    • Guest
    Katılım:
    23 Ağustos 2017
    Mesaj:
    9
    Alınan Beğeniler:
    9

    Özel Mesaj
    Kod:
    @import url('https://fonts.googleapis.com/css?family=Roboto');
    
    * {
        padding: 0;
        margin: 0;
        border: 0;
        list-style: none;
        text-decoration: none;
    }
    
    body {
        background: #eee;
        font-family: 'Roboto', sans-serif;
    }
    
    .social-media {
        position: relative;
        top: 30px;
        left: 300px;
    }
    
    .facebook {
        display: inline-block;
        width: 250px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        background: #3B5998;
        text-align: center;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
        border-radius: 5px;
    }
    
    .twitter {
        display: inline-block;
        width: 250px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        background: #00ACEE;
        text-align: center;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
        border-radius: 5px;
    }
    
    .google-plus {
        display: inline-block;
        width: 250px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        background: tomato;
        text-align: center;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
        border-radius: 5px;
    }
    
    .vk {
        display: inline-block;
        width: 250px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        background: #45668e;
        text-align: center;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
        border-radius: 5px;
    }
    
    
     
    fedakarlik ve ForeverTURKEY bunu beğendi.
  3. fedakarlik Guest

    • Guest
    Katılım:
    13 Ağustos 2017
    Mesaj:
    18
    Alınan Beğeniler:
    23

    Özel Mesaj
    Elimne sağlık devrem. fakat bu iconlara acaba nasıl gidilecek url eklenebilir?
     
  4. Rufiq Guest

    • Guest
    Katılım:
    23 Ağustos 2017
    Mesaj:
    9
    Alınan Beğeniler:
    9

    Özel Mesaj
    HTML:
    <a href="https://www.facebook.com/rufiq.cavadov.12"></a>
     
    fedakarlik bunu beğendi.

Bu Sayfayı Paylaş