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