Profil Kart Widget Yapımı / Simple User CARD UI Design - User Profile Widget UI Design - HTML5 - CSS3 - Ders32

tarih:

Profil Kart Widget Yapımı / Simple User CARD UI Design - User Profile Widget UI Design - HTML5 - CSS3 - Ders32






Bu video ders uygulamamızda bir kart yapımını gördük. Kartımız içerisinde profil bilgileri ve sosyal medya ikonlarımız ile iletişim bilgilerimizin paylaşımını sağladık. Div lerimize hover efekti uygulamayı gösterdik. Web sitelerinizin iletişim kısmında kullanabileceğiniz güzel bir html - css uygulaması oldu. Buna benzer uygulamalarımızdan haberdar olmak için kanalımıza abone olmayı unutmayın.


HTML İÇERİĞİ:


<!DOCTYPE html>
<html>
<head>
<title>Kart</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<body>
   <div class="kart">
       <div class="resim"><img src="kart.JPG"></div>
       <ul>
           <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus-official" aria-hidden="true"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
           
       </ul>
       <div class="içerik">
           <h3>WEB SİTEM</h3>
           <p>Web Sitem kanalını izliyorsunuz şu anda. Kanalımıza abone olarak günlük derslerimizden haberdar olabilirsiniz.</p>
       </div>
    
    
    
    
    </div>
</body>
</head>
</html>


CSS İÇERİĞİ:



body{
    margin: 0;
    padding: 0;
    background: url(back.jpg);
    background-size: cover;
    font-family: arial;
}
.kart{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 320px;
    background-color: brown;
    box-sizing: border-box;
    transition: 0.5s;
}
.resim{
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.resim img{
    width: 100%;
    transition: 5s;
    transform-origin: top right;
}
.kart:hover .resim img{
    transform: scale(1.3);
}
.kart ul{
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: 0.5s;
}
.kart:hover ul{
    height: 50px;
}
.kart ul li{
    list-style: none;
    width: 20%;
    height: 50px;
}
.kart ul li a{
    display: block;
    line-height: 50px;
    text-align: center;
    background: #fff;
    color: brown;
    font-size: 20px;
    border-right: 1px solid brown;
}
.kart ul li:last-child a{
    border-right: none;
}
.kart ul li a:hover{
    background: brown;
    color: #fff;
}
.içerik{
    padding: 20px 10px;
    text-align: center;
}
.içerik h3{
    margin: 0;
    padding: 0;
    font-size: 20px;
}
.içerik p{
    margin: 10px 0 0;
    padding: 0;
    font-size: 15px;
}

Yorumlar

Yorum Gönder