TUGAS 1 PWEB C :  Membuat CV dengan HTML dan CSS 




Nama : KEVIN ASHIL
NRP : 05111740000140 

SOURCE CODE :

<!DOCTYPE html>
<html>
<head>
<title>Sebuah - Curriculum Vitae</title>

<meta name="viewport" content="width=device-width"/>
<meta name="description" content="The Curriculum Vitae of Joe Bloggs."/>
<meta charset="UTF-8"> 

<link type="text/css" rel="stylesheet" href="style.css.css">
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700|Lato:400,300' rel='stylesheet' type='text/css'>

</head>
<body id="top">
<div id="cv" class="instaFade">
    <div class="mainDetails">
        <div id="headshot" class="quickFade">
            <img src="fotoku.jpg"/>
        </div>
        
        <div id="name">
            <h1 class="quickFade delayTwo">Curriculum Vitae</h1>
            <h2 class="quickFade delayThree">Kevin Ashil Faadilah</h2>
        </div>
        
        <div id="contactDetails" class="quickFade delayFour">
        <table>
            <tr>
                <td>E-mail</td><td>:</td><td><a href="mailto:richmondroths@gmail.com" target="_blank">richmondroths@gmail.com</a></td>
            </tr>
            <tr>
                <td>Mobile</td><td>:</td><td> +6282338650500</td>
            </tr>
        </table>
        </div>
        <div class="clear"></div>
    </div>
    
    <div id="mainArea" class="quickFade delayFive">
        <section>
            <article>
                <div class="sectionTitle">
                    <h1>Tujuan Hidup</h1>
                </div>
                
                <div class="sectionContent">
                    <p>Sebagai seorang yang memantapkan jati diri. Saya memiliki tujuan hidup sederhana, yaitu dengan bermanfaat bagi orang lain. 
                    Saya ingin mendedikasikan kehidupan untuk kemaslahatan, utamanya untuk agama, keluarga, dan negara. Tidak ada kata menyerah untuk kalah dan selalu semangat menghadapi tiap tantangan. Saya selalu percaya bahwa Allah selalu memberi jalan terindah di kehidupan ini. Karena sampai kapan pun dan mau bagaimana pun, kita hamba Nya yang harus selalu taat dan patuh.
                    </p>
                </div>
            </article>
            <div class="clear"></div>
        </section>
        
        
        <section>
            <div class="sectionTitle">
                <h1>Data Pribadi</h1>
            </div>
            
            <div class="sectionContent">
                <table>
                <tr>
                    <td>Nama</td><td>: Kevin Ashil Faadilah</td>
                </tr>
                <tr>
                    <td>Tempat, Tanggal Lahir</td><td>: Surabaya, 21 Februari 1998</td>
                </tr>
                <tr>
                    <td>Agama</td><td>: Islam</td>
                </tr>
                <tr>
                    <td>Warga Negara</td><td>: Indonesia</td>
                </tr>
                <tr>
                    <td>Alamat</td><td>: Jln. Rungkut Harapan blok G-01 Surabaya</td>
                </tr>
                <tr>
                    <td>E-mail</td><td>: richmondroths@gmail.com</td>
                </tr>
                </table>
                
            </div>
            <div class="clear"></div>
        </section>
  


      <section>
            <div class="sectionTitle">
                <h1>Riwayat Pendidikan</h1>
            </div>
                
            <div class="sectionContent">
                
                <article>
                    <h2>Formal</h2><br>
                    <h4>SD Muhammadiyah 4 Surabaya</h4>
                    <p class="subDetails">2004-2010<p>
                </article>
                
                <article>
                    <h4>SMP Negeri 19 Surabaya</h4>
                    <p class="subDetails">2010-2013</p>
                    
                </article>
                
                <article>
                    <h4>Madrasah Takhasussiyah PPMI Assalaam Sukoharjo</h4>
                    <p class="subDetails">2013-2014</p>
                
                </article>
                
                <article>
                    <h4>Madrasah Aliyah PPMI Assalaam Sukoharjo</h4>
                    <p class="subDetails">2014-2017</p>
                
                </article>
                <article>
                    <h4>Departemen Informatika ITS</h4>
                    <p class="subDetails">2017- 2021</p>
                
                </article><br>

            </div>
            <div class="clear"></div>
        </section><br><br>



<section>
            <div class="sectionTitle">
                <h1>Pengalaman Organisasi</h1>
            </div>
            <article>
               
                    <h4>Pengurus Konsulat Mutiara Timur</h4>
                    <p class="subDetails">2014 - 2015<p>
                    
                </article>
                
                <article>
                    <h4>Kepala Mahkamah Bagian Bahasa OP3MIA</h4>
                     <p class="subDetails">2015 - 2016</p>
                    
                </article>
                <article>
                    <h4>Bendahara Club Astronomi Santri Assalaam (CASA)</h4>
                    <p class="subDetails">2015 - 2016</p>
                </article>
                <article>
                    <h4>Bagian Dokumentasi IFC</h4>
                    <p class="subDetails">2017 - 2018</p>
                </article>
                <article>
                    <h4>Staff PSDM UKM MuayThai</h4>
                    <p class="subDetails">2018 - 2019</p>
                </article>
                <article>
                    <h4>Staff Magang Hubungan Luar HMTC</h4>
                    <p class="subDetails">2018</p>
                </article><br>
            </div>
            <div class="clear"></div>
        </section><br><br>



        <section>
            <div>
            <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;Demikian Curriculum Vitae ini saya buat dan dapat dipergunakan sebagai mana mestinya.</p>
            <br><br><br><br><br><br>
            <p align="right">Hormat Saya,<br><br><br>Kevin Ashil Faadilah</p>
            <p align="right"><br><br><br>NRP 05111740000178</p>
        </section>
        
    </div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3753241-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

di tambah dengan CSS :

SOURCE CODE :

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,fieldset,form,label,legend,caption,tbody,tfoot,thead,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}

table,td,tr {
    /*border : 1px solid black;*/
}


article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}

html, body {background: #181818; font-family: "Times New Roman", Times, serif; font-size: 16px; color: #222;}

.clear {clear: both;}

p {
    font-size: 1em;
    line-height: 1.4em;
    margin-bottom: 2px;
    color: #444;
}

#cv {
    width: 90%;
    max-width: 800px;
    background: #f3f3f3;
    margin: 30px auto;
}

.mainDetails {
    padding: 25px 15px;
    border-bottom: 2px solid #cf8a05;
    background: #ededed;
}

#name h1 {
    font-size: 2.5em;
    font-weight: 700;
    font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
    margin-bottom: -6px;
}

#name h2 {
    font-size: 2em;
    margin-left: 2px;
    font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}

#mainArea {
    padding: 0 40px;
}

#headshot {
    width: 12.5%;
    float: left;
    margin-right: 30px;
}

#headshot img {
    width: 100%;
    height: auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

#name {
    float: left;
}

#contactDetails {
    float: right;
}

#contactDetails ul {
    list-style-type: none;
    font-size: 0.9em;
    margin-top: 2px;
}

#contactDetails ul li {
    margin-bottom: 3px;
    color: #444;
}

#contactDetails ul li a, a[href^=tel] {
    color: #444; 
    text-decoration: none;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

#contactDetails ul li a:hover { 
    color: #cf8a05;
}


section {
    border-top: 1px solid #dedede;
    padding: 20px 0 0;
}

section:first-child {
    border-top: 0;
}

section:last-child {
    padding: 34px 0 100px;
}

.sectionTitle {
    float: left;
    width: 25%;
}

.sectionContent {
    float: right;
    width: 72.5%;
}

.sectionTitle h1 {
    font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
    font-style: italic;
    font-size: 1.5em;
    color: #cf8a05;
}

.sectionContent h2 {
    font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    margin-bottom: -2px;
}

.subDetails {
    font-size: 0.8em;
    font-style: italic;
    margin-bottom: 3px;
}

.keySkills {
    list-style-type: none;
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
    margin-bottom: 20px;
    font-size: 1em;
    color: #444;
}

.keySkills ul li {
    margin-bottom: 3px;
}

@media all and (min-width: 602px) and (max-width: 800px) {
    #headshot {
        display: none;
    }
    
    .keySkills {
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
    }
}

@media all and (max-width: 601px) {
    #cv {
        width: 95%;
        margin: 10px auto;
        min-width: 280px;
    }
    
    #headshot {
        display: none;
    }
    
    #name, #contactDetails {
        float: none;
        width: 100%;
        text-align: center;
    }
    
    .sectionTitle, .sectionContent {
        float: none;
        width: 100%;
    }
    
    .sectionTitle {
        margin-left: -2px;
        font-size: 1.25em;
    }
    
    .keySkills {
        -moz-column-count:2;
        -webkit-column-count:2;
        column-count:2;
    }
}

@media all and (max-width: 480px) {
    .mainDetails {
        padding: 15px 15px;
    }
    
    section {
        padding: 15px 0 0;
    }
    
    #mainArea {
        padding: 0 25px;
    }

    
    .keySkills {
    -moz-column-count:1;
    -webkit-column-count:1;
    column-count:1;
    }
    
    #name h1 {
        line-height: .8em;
        margin-bottom: 4px;
    }
}

@media print {
    #cv {
        width: 100%;
    }
}

@-webkit-keyframes reset {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes reset {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes fade-in {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes reset {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.instaFade {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in;
    
    -moz-animation-name: reset, fade-in;
    -moz-animation-duration: 1.5s;
    -moz-animation-timing-function: ease-in;
    
    animation-name: reset, fade-in;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;
}

.quickFade {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-timing-function: ease-in;
    
    -moz-animation-name: reset, fade-in;
    -moz-animation-duration: 2.5s;
    -moz-animation-timing-function: ease-in;
    
    animation-name: reset, fade-in;
    animation-duration: 2.5s;
    animation-timing-function: ease-in;
}

.delayOne {
    -webkit-animation-delay: 0, .5s;
    -moz-animation-delay: 0, .5s;
    animation-delay: 0, .5s;
}

.delayTwo {
    -webkit-animation-delay: 0, 1s;
    -moz-animation-delay: 0, 1s;
    animation-delay: 0, 1s;
}

.delayThree {
    -webkit-animation-delay: 0, 1.5s;
    -moz-animation-delay: 0, 1.5s;
    animation-delay: 0, 1.5s;
}

.delayFour {
    -webkit-animation-delay: 0, 2s;
    -moz-animation-delay: 0, 2s;
    animation-delay: 0, 2s;
}

.delayFive {
    -webkit-animation-delay: 0, 2.5s;
    -moz-animation-delay: 0, 2.5s;
    animation-delay: 0, 2.5s;
}
ol,li {
    padding : 0px 0px 0px 0px;
    margin-left: 0px;
    
}


Sekian dan Terima kasih

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS - 2 - PBKK

Gambar
TUGAS 2 PBKK : ROUTING MENGGUNAKAN FRAMEWORK CODEIGNITER NAMA : KEVIN ASHIL FAADILAH NRP : 05111740000178 KELAS : PBKK - A Penggunaan routing harus kita mulai dulu dari inisiasi pada modul routing itu sendiri, lebih tepatnya di routes kemudian kita setting pada controller Routing About.php Contact.php Hasilnya Welcome About Contact
Baca selengkapnya

PBO - Tugas 5 - Aplikasi Support System

Gambar
  TUGAS 5 - support system Nama : Kevin Ashil NRP : 05111740000178 Kelas : PBO - B Pada minggu ke-5 mahasiswa ditugaskan untuk membuat program Technical Support yang dapat menjawab input user dan menjawabnya seperti pada TechSupport biasanya. Berikut merupakan program tersebut: SupportSystem: DATA HOSTED WITH ♥ BY  PASTEBIN.COM  -  DOWNLOAD RAW  -  SEE ORIGINAL   /**  * This class implements a technical support system. It is  * the top-level class in this project. The support system  * communicates via text input/output in the text terminal.  * This class uses an object of class InputReader to read  * input from the user and an object of class Responder to  * generate responses.  * It contains a loop that repeatedly reads input and  * generates output until the user wants to leave.  *  * @author Kevin Ashil  * @version 0.1 (24 November 2020)  */   import   java.util.* ; public ...
Baca selengkapnya