MY CV_PWEB A_TC_ITS

-

TUGAS 1 PEMROGRAMAN WEBSITE

Nama: Muhammad Valda Rizky Nur FIrdaus
NRP: 05111940000115
Kelas: A


1. Tampilan Website

Link web: https://valdarizky.github.io

Tampilan awal dan Data diri:



Riwayat Pendidikan:




Kegiatan non-Akademik:




2. HTML dan CSS

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CV Valda</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
     <nav class="navbar">
         <div class="navbar_container">
             <!-- <a href="/" class="navbar__logo">Haloo</a> -->
             <div class="navbar__toggle" id = "mobile-menu"> 
                 <span class="bar"></span>
                 <span class="bar"></span>
                 <span class="bar"></span>
             </div>
             <ul class="navbar__menu">
                 <li class="navbar__item">
                     <a href="#konten1" class="navbar__links"><b>Data Diri</b></a>
                 </li>
                 <li class="navbar__item">
                    <a href="#konten2" class="navbar__links"><b>Riwayat Pendidikan</b></b></a>
                </li>
                <li class="navbar__item">
                    <a href="#konten3" class="navbar__links"><b>Riwayat Organisasi</b></a>
                </li>
             </ul>
         </div>
     </nav>
     <div class="main">
         
         <div class="main__container">
             <div class="main__content">
                 
                 <h1>Halo...</h1>
                 <h2>Perkenalkan Namaku Muhammad Valda Rizky Nur Firdaus</h2>
             </div>
             
         </div>
     </div> 
     <div class="konten">
        <div class="konten1" id = "konten1">
            <h1><strong>Data Diri</strong></h1>      
            <div class="konten__photo">
                <img src="images/Profil.png" alt="profil">
            </div>    
            <h2> 
                <div class="konten__profil"></div>
                <table>
                    <tr>
                        <td>Nama Lengkap</td>
                        <td>: Muhammad <strong> Valda </strong> Rizky Nur Firdaus</td>
                    </tr>
                    <tr>
                        <td>TTL </td>
                        <td>: Surabaya, 8 Mei 2001</td>
                    </tr>
                    <tr>
                        <td>Alamat</td>
                        <td>: Jl. Medayu Utara VI/4, Surabaya</td>
                    </tr>
                    <tr>
                        <td>Jenis Kelamin</td>
                        <td>: Laki-Laki</td>
                    </tr>
                    <tr>
                        <td>Email</td>
                        <td>: valdarizky234@gmail.com</td>
                    </tr>
                    <tr>
                        <td>Id Line</td>
                        <td>: gendut2001</td>
                    </tr>
                    <tr>
                        <td>Nomor telepon (WA)</td>
                        <td>: 081217926984</td>
                    </tr>
                </table></h2>
        </div>
        <div class="konten2" id = "konten2">
            <h1><strong>Riwayat Pendidikan</strong></h1> 
            <div class="konten__riwayat">
                <div class="sekolah">
                    <tr>
                        <h2>Sekolah Menengah Pertama</h2>
                        <p>SMPN 19 Surabaya</p>
                        <p>2013-2016</p>    
                    </tr>
                </div>
                <div class="sekolah">
                    <tr>
                        <h2>Sekolah Menengah Atas</h2>
                        <p>SMAN 5 Surabaya</p>
                        <p>2016-2019</p>
                    </tr>
                </div>
                <div class="sekolah">
                    <tr>
                        <h2>Perguruan Tinggi</h2>
                        <p>Teknik Informatika ITS</p>
                        <p>2019-sekarang</p>
                    </tr>
                </div>
            </div>
        </div>
        <div class="konten3" id = "konten3">
            <h1><strong>Kegiatan non-Akademik</strong></h1> 
            <div class="konten__non">
                <div class="riwayat">
                    <h2>Organisasi & Kepanitiaan</h2>
                    <p>Staff KMI Teknik Informatika 2019</p>
                    <p>Staff KDPM HMTC “Progresif” 2021</p>
                    <p>Staff Ahli Perkamzin Schematics 2021</p>
                    <p>Ketua Pelaksana OK2BK Teknik Informatika 2021</p>
                </div>
                <div class="riwayat">
                    <h2>Riwayat Pelatihan</h2>
                    <p>LKMW TD FTIK</p>
                    <p>LKMM Pra TD FTIK</p>
                    <p>LKMM TD XXVII HMTC</p>
                    <p>PP LKMM I FTEIC ITS</p>
                </div>            
            </div>
        </div>
        <div class="closing">
            <p>© Dibuat oleh Muhammad Valda Rizky Nur Firdaus</p>
        </div>
     </div>
</body>
</html>


CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.navbar {
    background: #092b44;
    background-image: linear-gradient(to bottom, #345c7c 3%, #051b2b 100%);
    opacity: 68%;
    height: 50px;
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: 1rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
}

.fa-gem {
    margin-right: 1rem;
}

.navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
    gap: 1rem;
}

.navbar_item {
    height: 80px;
}

.navbar__links {
    color: #fff;
    display: flex;
    opacity: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 5px 10px;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 1px;
}

.navbar__links:hover{
    background: #04111b;
    transition: 0.9s;
    }

.main {
    background:url(/images/hypebeast.jpg) ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    position:relative;
    top: 0;
    z-index: 1;
}

.main__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-self: center;
    margin: 0 auto;
    height: 90 hv;
    z-index: 1;
    width: 100%;
    max-width: 1080px;
    padding: 0 20px;
}

.main__content h1{
    display: flex;
    justify-self: left;
    font-family: serif;
    font-size: 3rem;
    background-image: linear-gradient(to top, #FB8CAB 0%, #CF268A 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

.main__content h2{
    display: flex;
    justify-self: center;
    font-family: serif;
    font-size: 1.3rem;
    background-image: linear-gradient(to top, #FB8CAB 0%, #CF268A 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}

.konten {

    margin: auto;
    justify-content: center;
    background: url(https://wallpaperaccess.com/full/1829245.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: auto;
}

.konten1 h1 {
    padding-left: 70px;
    padding-top: 50px;
    color: aliceblue;
    
}

.konten1 h2 {
    color: thistle;
    background-color: #092b44;
    margin:   50px 530px;
    justify-content: space-between;
    text-decoration: none;
    font-size: 1.2rem;    
    padding: 20px;
    opacity: 87%;
}

.konten__photo {
    justify-content: center;
    margin: 20px auto;
    position: relative;
    display: flex;
    width: 227px;
    height: 303px;
    /* align-items: center; */
}


.konten2 .konten__riwayat {
    display: flex;
    justify-content: center;
    flex-wrap : wrap;
    flex-direction: row;
}

.konten2 h1 {
    margin: 80px auto;
    padding-left: 70px;
    padding-top: 50px;
    color: aliceblue;
}

.konten2 .konten__riwayat .sekolah {
    padding: 40px 20px;
    background: #345c7c;
    color: #fff;
    width: 360px;
    margin: 60px;
    text-align: center;
    opacity: 85%;
}

.konten2 .konten__riwayat .sekolah:hover {
    background: #254d6b;
    transition: 0.9s;
}

.konten2 h2 {
    color: rgb(155, 184, 216);
    margin: 20px;
    font-size: 1.2rem;
}

.konten2 p{
    font-size: 0.8rem;
}

.konten3 h1 {
    margin: 80px auto;
    padding-left: 70px;
    padding-top: 50px;
    color: aliceblue;
}

.konten3 .konten__non {
    display: flex;
    justify-content: center;
    flex-wrap : wrap;
    flex-direction: row;
} 

.konten3 .konten__non .riwayat {
    padding: 40px 20px;
    background: #345c7c;
    color: #fff;
    width: 360px;
    margin: 60px;
    text-align: center;
    opacity: 85%;
}

.konten3 .konten__non .riwayat {
    background: #254d6b;
    transition: 0.9s;
}

.riwayat h2 {
    color: rgb(155, 184, 216);
    margin: 20px;
    font-size: 1.2rem;
}

.riwayat p {
    font-size: 0.8rem;
}

.closing {
    margin: 0 auto;
    justify-content: center;
    color: beige;
    display: flex;
    position: relative;
    padding-top: 30px;
    background: #092b44;
    background-image: linear-gradient(to bottom, #345c7c 3%, #051b2b 100%);
    height: 60px;
}

Komentar

Posting Komentar

Postingan populer dari blog ini

EAS PWEB A

-
Gambar
Muhammad Valda RIzky Nur Firdaus 05111940000115 PWEB-A EAS PWEB-A 1. Definisikan fitur dari aplikasi yang akan dibangun! Aplikasi website sekolah, merupkana website interaksi antara Admin, Teacher, Student, dan Parent. Setiap user roles memiliki fitur – fitur masing masing yang hanya dapat dilakukan secara spesifik berikut adalah masing - masing fitur yang di miliki oleh setiap user roles. -           ADMIN: ·          STUDENT MANAGEMENT: Fitur digunakan untuk mengatur database pelajar yang terdaftar pada sekolah. ·          PARENT CREATION: ·          EPAY SLIP GENERATION: Fitur membuat slip pembayaran dari sekolah untuk orangtua siswa. ·          COMPLETE DASHBOARD: Fitur untuk menaruh Dashboard yang sudah diselesaikan.   -     ...
Baca selengkapnya

TUGAS PWEB 7

-
Gambar
 Pada Blog ini saya akan memperliihatkan tentang prinsip dasar beckend pada CRUD sistem Screenshoot : 1. menu awal dari index.php 2. pengisian pendaftaran 3. menampilkan pendaftar dimana dapat dihapus dan diedit 4. Testing hapus (list 1) 5. testing edit (dari alamat pertama ke alamat baru)
Baca selengkapnya

TUGAS 2 PWEB A

-
Gambar
 Muhammad Valda Rizky Nur Firdaus 05111940000115 Tugas 2 PWEB pengaplikasian HTML 5 Screenshoot:  Code:  <! DOCTYPE html > < link rel = "stylesheet" href = "soto_ayam.html" /> < html >     < head >         < title > Web Warung Tegal </ title >         < style type = "text/css" >             header ,             section ,             footer ,             aside ,             nav ,             article ,             figure ,             figcaption {                 display : block ;             }             body {         ...
Baca selengkapnya