CSS Duyuru Panosu Yapımı

[bretwskin]

Başlamadan önce ; 

Font için ;

Kod: Tümünü Seç Tümünü Kopyala

https://fonts.google.com

İcon için ;

Kod: Tümünü Seç Tümünü Kopyala

<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: Tümünü Seç Tümünü Kopyala

<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: Tümünü Seç Tümünü Kopyala

.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 .