1.CV WEB - M Rizqi Fiqih Thalib - PWEB B
Tugas 1 Pemograman Web
M Rizqi Fiqih Thalib
05111940000219
PWEB B
1. Website
link website : https://rizft1.github.io./
Tampilan Heading "Saya"
Tampilan "Profil"
Tampilan "Education"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyCV</title>
<link rel="stylesheet" href="cssMyCV.css">
</head>
<body>
<div class="header">
<div class="headerm">
<div id="to">
<a href="#s1"> Saya </a>
<a href="#s2"> Profile</a>
<a href="#s3"> Education </a>
<a href="#s4"> Organizations and Crews </a>
</div>
</div>
</div>
<div id="s1"></div>
<div class="badansatu">
<div>
<div class="namabesar"><h1>Haiii Aku Rizqi</h1></div>
<div>
<img src="fotoku.jpg" class="center">
</div>
<div class="quote"><h3 >"Keep Trying Until You Proud"</h3> </div>
</div>
</div>
<div class="badandua" id="s2">
<div class="bagian">
<div>
<h1 style="text-align: center;">Data Pribadi</h1>
</div>
<table class="table">
<tr>
<td>Nama</td><td>: Muhammad Rizqi Fiqih Thalib</td>
</tr>
<tr>
<td>Tempat, Tanggal Lahir</td><td>: Makassar, 14 November 2000</td>
</tr>
<tr>
<td>Alamat</td><td>: Jalan Raya Baruga C28 Bukit Baruga, Makassar</td>
</tr>
<tr>
<td>Jenis Kelamin</td><td>: Laki-laki</td>
</tr>
<tr>
<td>Agama</td><td>: Islam</td>
</tr>
<tr>
<td>Warga Negara</td><td>: Indonesia</td>
</tr>
<tr>
<td>E-mail</td><td><a href="rizqi.fiqih.thalib@gmail.com" target="_blank">: rizqi.fiqih.thalib@gmail.com</a></td>
</tr>
<tr>
<td>Instagram</td><td> <a href="https://www.instagram.com/rizqifiqiht">: rizqifiqiht</a></td>
</tr>
<tr>
<td>Nomor Telepon</td><td>: 08124295884</td>
</tr>
<tr>
<td>ID Line</td><td>: mrft</td>
</tr>
</table>
</div>
</div>
<section class="services" id="s3">
<div class="tulisanpend">
<h1 style="text-align: center;">Pendidikan</h1>
</div>
<div class="content">
<div class="servicesBx">
<h2>Sekolah Dasar </h2>
<p>SDIT Athirah Baruga Makassar | 2006 - 2012</p>
</div>
<div class="servicesBx">
<h2>Sekolah Menengah Pertama</h2>
<p>SMPN 12 RSBI Makassar | 2012 - 2015</p>
</div>
<div class="servicesBx">
<h2>Sekolah Menengah Atas</h2>
<p>SMA Kharisma Bangsa Tangsel | 2015 - 2018</p>
</div>
<div class="servicesBx">
<h2>Perguruan Tinggi</h2>
<p>Institut Teknologi Sepuluh Nopember | 2019 - sekarang </p>
</div>
</div>
</section>
<section class="servicess" id="s4">
<div class="tulisanorg">
<h1 style="text-align: center;">Organisasi dan Kepanitiaan</h1>
</div>
<div class="content">
<div class="servicesBxx">
<h2>Sekolah Menengah Atas (SMA)</h2>
<ul>
<li>Ketua Divisi Kewarganegaraan OSIS SMA Kharisma Bangsa </li>
<li>Panitia Kompetisi Indonesia Science Project Olympiad Nasional</li>
</ul>
</div>
<div class="servicesBxx">
<h2>Kuliah</h2>
<ul>
<li>Koordinator Perkamzin Acara Malam Inaugurasi FTIK 2019</li>
<li>Staff Kestari inilho ESN ITS 2020</li>
<li>Staff Acara IBL ITS 2K20</li>
<li>Staff HUMAS forda KANDA ITS 2020-sekarang</li>
</ul>
</div>
</div>
</section>
</body>
CSS
.header{
text-align: center;
width: 100%;
height: 50px;
background-color: rgba(192, 226, 169, 0.829);
position: fixed;
top: 0;
z-index: 5;
}
.headerm {
display: block;
color: #363434;
font-size: 40px;
}
#to{
top:0;
margin: auto;
width:100%;
display: block;
transition: top 0.5s;
}
#to a{
color:#201e1e;
display: block;
float:left;
text-decoration: none;
padding-top: 0px;
padding:14px 16px;
text-align: center;
font-size: 16px;
}
#to a:hover{
color:#c24747;
}
.center{
max-width: 50%;
max-height: 50%;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-bottom: 50px;
}
.badansatu{
background-image: url(b111.jpeg);
background-size: cover;
background-repeat: no-repeat;
padding: 30px 70px;
}
.namabesar{
background-color: blanchedalmond;
background-position: 100px 50px 100px 50px;
font-family: cursive;
text-align: center;
}
.bagian{
background-image: url(bputih.jpeg);
padding: 0% 30% 0% 30% ;
height: 50vh;
align-items: center;
}
.quote{
color: rgb(250, 250, 250);
text-align: center;
font-size: x-large;
}
.content
{
justify-content: space-between;
}
.services
{
background-color: rgb(165, 190, 165);
}
.tulisanpend
{
font-size: large;
color: rgb(36, 30, 30);
}
.services .content
{
display: flex;
justify-content: center;
flex-wrap : wrap;
flex-direction: row;
}
.services .content .servicesBx
{
padding: 40px 20px;
background: rgb(45, 48, 42);
color: #fff;
max-width: 300px;
margin: 50px;
text-align: center;
}
.services .content .servicesBx:hover
{
background: #687986;
transition: 0.5s;
}
.servicess
{
background-image: url(b44.jpeg);
background-attachment: fixed;
}
.servicess .content
{
display: flex;
justify-content: center;
flex-wrap : wrap;
flex-direction: row;
}
.servicess .content .servicesBxx
{
padding: 40px 20px;
background: rgb(102, 110, 94);
color: #fff;
max-width: 300px;
margin: 50px;
text-align: center;
}
.servicess .content .servicesBxx:hover
{
background: #3a914d;
transition: 0.5s;
}
Komentar
Posting Komentar