Başlamadan önce ;
Font için ;
İcon için ;
Html Yazılacak ;
CSS Yazılacak ;
Demo ;https://codepen.io/bretowskin/pen/mMxQVZ?editors=1100
Açıklamaları yanlarına yazdım eğer anlamadığınız bir yer olursa sorabilirsiniz .
İyi günler .
Font için ;
Kod:
https://fonts.google.com
İcon için ;
Kod:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
Html Yazılacak ;
Kod:
<h1 class="duyuruv1"><i class="fa fa-bullhorn" id="icon"></i><span class="yazi">Duyuru Panosu </span></h1>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
CSS Yazılacak ;
Kod:
.duyuruv1 {
background-color:#F89C1F; /* Arkaplan Rengi */
color:white;/*Renk*/
width:1000px;/* Genişlik */
heigt:500px; /* Yükseklik */
text-shadow:2px 2px 0px #7A4703; /* Yazıya gölge eklemek için */
font-family: 'Poppins', sans-serif;/* Font */
font-size:20px; /* Yazı boyutu */
border-radius:5px 5px 5px 5px ;
transition:0.3s; /* Üstüne gelindiğinde hovera geçiş süresi */
margin-left:300px;
}
.yazi {
margin-left:360px; /* Yazıyı ortalamak için */
}
i {
background-color:#DF8306; /* İcon arkaplanı renklendirmek için */
padding:15px;
border-right:3px solid #C77505; /* icon gölgesi */
transition:0.3s; /* Üstüne gelindiğinde hovera geçiş süresi */
}
.duyuruv1:hover {
background-color:#ED8B07;/* üstüne gelindiğinde arkaplanın değişmesi için */
}
i:hover {
background-color:#BC6F05;/* üstüne gelindiğinde arkaplanın değişmesi için */
border-right:3px solid #814B03;/* üstüne gelindiğinde arkaplanın değişmesi için */
}
Demo ;https://codepen.io/bretowskin/pen/mMxQVZ?editors=1100
Açıklamaları yanlarına yazdım eğer anlamadığınız bir yer olursa sorabilirsiniz .
İyi günler .
yaratıldım şimdi ne yapıcam ben