Styles Có giao diện đẹp ai cần rip nhào zô

Style thì mình ko quan tâm lắm, chỉ là chút css và cái bg thôi mà, có thấy edit gì khác đâu. Quan tâm 2 thứ, ai biết chỉ dùm nhà:

Cái hộp donate.
Cái login xổ xuống.
 
Hộp Donate
Mã:
<script type="text/javascript" src="https://chanphom.com/asset/goalProgress.js"></script>
<script type="text/javascript">
    $(document).bind("ready", function(){
    
/********** Mod thay đổi các giá trị ở các biến mt1, mt2.. set số tiền hiện tại ở biến current. Set mục tiêu hiện tại ở biến goal và gán với 1 trong các biến mt1, mt2, mt3... Gán Text cho biến muctieu ************/
    var mt1 = 30000;             // Mục tiêu 1
    var mt2 = 50000;            // Mục tiêu 2
    var mt3 = 80000;             // Mục tiêu 3
    var mt4 = 100000;           // Mục tiêu 4
    var mt5 = 120000;           // Mục tiêu 5
    var mt6 = 200000;           // Mục tiêu 6     
    var current = 84308;         // Thay đổi số tiền ở biến current
    var goal = mt4;                   // Gán mục tiêu hiện tại bằng một trong các biến mt1, mt2, mt3...
    var muctieu = 'thứ 4';        // Gán tên của mục tiêu vào biến muctieu
/******************************************************************************/

    var percent = Math.round((current/goal) * 100);
    $( '.notice_126 #sample_goal1').goalProgress({
    goalAmount: goal,
    currentAmount: current,
    });
    $(".notice_126 .price-raise .amount .amount").html((current+'000').toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."));
    $(".notice_126 .goal-price .amount .amount").html((goal+'000').toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."));
    $(".notice_126 .goal-price .amount .amount1").html((muctieu).toString());
    $(".notice_126 .percentage-raise span").html(percent);
    $('.notice_126 #total').html($('.tu-thien tr').length);
    $("#dtu-thien").scrollTop($("#dtu-thien")[0].scrollHeight);
});
</script>
<div class="tu-thien-slider">
    <a href="/threads/5683"><h3>Ấm Áp Mùa Đông 2016: Xin hãy về Khoen On!</h3></a>
    <p class="price-raise"><span class="amount">Số tiền đã nhận được :<span class="amount">84.308.000</span> VNĐ</span></p>
    <p class="percentage-raise" style=""><span>84</span>%</p>
    <div id="sample_goal1"><div class="goalProgress almost-full"><div class="progressBar" style="width: 84.308%;">84308</div></div></div>
    <p class="goal-price"><span class="amount">Mục tiêu <span class="amount1">thứ 4</span>: <span class="amount">100.000.000</span> VNĐ</span></p>   
    <p class="total-funders"><span id="total">59</span><small> người đã ủng hộ</small></p><br>
       <span style="display:block;float:left;width:100%;">Mua quần áo ấm, ủng cao su, thuốc men y tế, hệ thống nước sạch</span><br><br>
    <p class="buttons">
        <a href="/threads/9744" class="phuong-thuc-ung-ho">Chi tiết chương trình</a>
        <a href="/threads/9793" class="du-toan-chi-phi">Phương thức ủng hộ</a>
        <a href="/threads/9861" class="mua-ao-ung-ho">Dự toán chi phí</a>
        <a href="/threads/9793/#post-190788" class="dau-gia-id-vip">Danh sách ủng hộ</a>
    </p>
</div>
<style>
@font-face {
    font-family: 'Tahoma';
    src: url('https://chanphom.com/asset/fonts/Tahoma.eot?#iefix') format('embedded-opentype'), 
    url('https://chanphom.com/asset/fonts/Tahoma.woff') format('woff'), url('Tahoma.ttf')  format('truetype'),
    url('https://chanphom.com/asset/fonts/Tahoma.svg#Tahoma') format('svg');
    font-weight: normal;
    font-style: normal;
}

.tu-thien-slider{
    width: 632px;
    height: 252px;
    background: url(/img/notices/tuthien/bg.jpg) no-repeat;
    margin: 0 auto;
       padding: 20px 30px 0px;
    font-family: 'Tahoma', Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #000000;
}

.tu-thien-slider h3{   
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    margin-bottom: 8px;
}
.tu-thien-slider a{   
    color: #000;
    text-decoration: none;
    font-size: 13px;
}

.tu-thien-slider a:hover{color: #000;
    text-decoration: none;    }
.tu-thien-slider .goalProgress {
    border-radius: 10px;
    background: #c4c4c4;
}

.tu-thien-slider div.progressBar {
    background: #488ebe;
    font-size: 0;
    padding: 10px;
    display: block;
    text-indent: -9999px;
    border-radius: 10px;   
}

#sample_goal1{
    clear: both;
}

.tu-thien-slider span.goalAmount {
    display: none;
    text-indent: -9999px;
}

.tu-thien-slider .price-raise {
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    float: left;
    color: #000;
    margin: 0;
}

.tu-thien-slider .percentage-raise {
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    float: right;
    color: #000;
    margin: 5px 0px;
}

.tu-thien-slider .goal-price{
    color: #000;   
    font-size: 20px;
    font-weight: normal;
    margin: 5px 0 0;
    float: left;
    clear: both;
}

.tu-thien-slider .total-funders{
    float: right;
    font-size: 16px;
    margin: 5px 0 0;
}

.tu-thien-slider .days-remain{
    float: right;
    font-size: 16px;
    margin: 5px 0px 18px;
}

.tu-thien-slider .danh-sach{
    float: right;
    margin: 5px 0px 18px
}

.tu-thien-slider .buttons{
    clear: both;
}

.tu-thien-slider .buttons a{
    font-size: 13px;
    padding: 5px 13px;
    border: 1px solid #b2b2b2;
    border-radius: 3px;
    background: #dfe0e0;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(50, 50, 50, 0.76);
    -moz-box-shadow:    0px 1px 1px 0px rgba(50, 50, 50, 0.76);
    box-shadow:         0px 1px 1px 0px rgba(50, 50, 50, 0.76);
    margin-right: 25px;
}

.tu-thien-slider .buttons a.dau-gia-id-vip{
    margin: 0;
}


.tu-thien-slider .link-chi-tiet{
    clear: both;
    text-align: center;
        margin-top: 10px;
}
</style>
 
Back
Top