KOP SURAT Menggunakan HTML dan CSS

KOP SURAT Menggunakan HTML dan CSS

by Adi Jaya

HTML

<div class="demo-main">

<div class="demo-content">
<table class="letter_head">
    <tr>
        <td class="one">
            <img class="logo" alt="Logo" src="https://3.bp.blogspot.com/-7WhUsOL-hGc/V7lLC6vayjI/AAAAAAAADcc/5qZLgen8HZEH_X2Wue4nOuAo2WZe5SMRwCLcB/s1600/Kalimantan_Tengah.png" width="100" height="100"/>
        </td>
        <td class="two">
            <div class="title title-1">
                PEMERINTAH PROVINSI KALIMANTAN TENGAH
            </div>
            <div class="title title-2">
                DINAS PEMUDA DAN OLAHRAGA
            </div>
            <div class="title title-3">
                Jl. Brigjend Katamso No. 01 
                <span>&#9742;</span> (0536) 3221274 – 3228038 – 3239845 <br>
                <span>&#128224;</span> (0536) 3228038 – 3239845 </div>
            <div class="title title-4">
                PALANGKA RAYA 73112
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="line"></td>
    </tr>
</table>

<!-- example content -->
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>


<table class="table_ttd">
    <tbody>
        <tr>
            <td class="content_area">
                <div class="jabatan_area">
                    KEPALA DINAS PEMUDA DAN OLAHRAGA<br>
                    PROVINSI KALIMANTAN TENGAH,
                </div>
                <div class="ttd_area">
                    ttd
                </div>
                <div class="name_area">
                    <p><strong>Nama Pejabat</strong></p>
                    <p>Jabatan</p>
                    <p>NIP. 12345678 123456 1 002</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>



</div>

</div>

CSS

html {
    font-size: 15px;
}

body {
    background: #dedede;
    margin: 0;
}

.demo-main {
    padding: 15px;
    height: 100%;
    margin: 0 auto;
    max-width: 600px;
}

.demo-content {
    background: white;
    padding: 15px;
    overflow: auto;
}

.letter_head {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 1em;
}

.letter_head td {
    vertical-align: top;
    padding: 5px 1px;
    text-align: center;
}

.letter_head td.one {
    width: 100px;
}

.letter_head td.two {
   /* xxx : yyy; */
}

.letter_head td.line {
    border-top: 4px solid;
    border-bottom: 1px solid;
    padding: 1px 0;
}

.letter_head .title {
    margin-bottom: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.letter_head .title-1 {
    font-weight: bold;
}

.letter_head .title-2 {
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    font-size: 1.7em;
    letter-spacing: 2px;
}

.letter_head .title-3 {
   font-size: 80%;
}

.letter_head .title-4 {
   font-weight: bold;
}


/* TTD Table */
.table_ttd {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 0.9em;
}

.table_ttd td {
    vertical-align: top;
}


.table_ttd .content_area {
    text-align: center;
}

.table_ttd .ttd_area {
    padding: 15px;
    min-height: 40px;
    font-size: small;
}

.table_ttd p {
    margin: 0;
}