Nama : Dilla Wahdana
NRP : 5025211060
Kelas : Pweb A
Membuat CV sederhana menggunakan HTML dan CSS
Perkenalkan, saya Dilla Wahdana, mahasiswa Teknik Informatika Angkatan 21. Pada tugas pertama kelas Pweb A, saya ingin membagikan dokumentasi source code HTML dan hasil yang telah saya buat. Ini adalah pengalaman pertama saya menggunakan HTML dengan tambahan CSS dalam sebuah proyek kecil. Selama proses ini, saya menghadapi beberapa kendala, seperti penentuan ukuran tata letak, dan pemilihan jenis huruf yang sesuai, dan pembuatan box kolom.
Source Code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Dilla</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="wrapper">
<div class="logo"><a href=''>My Portofolio</a></div>
<div class="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#porto">Portofolio</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href=""class="tbl-biru">Sign Up</a></li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<!-- untuk home -->
<section id="home">
<img src="https://img.freepik.com/free-vector/muslim-girl-safari-outfit-cartoon-character-sticker_1308-80383.jpg?size=626&ext=jpg&ga=GA1.1.1826974597.1693893261&semt=ais"/>
<div class="kolom">
<p class="deskripsi">Hello everyone...</p>
<h2>Welcome to my first website </h2>
<p>I am currently pursuing a bachelor's degree at the Institute of Technology Sepuluh
Nopember. A highly motivated, organized, dedicated student with determined goals and
big ambitions. Enjoying working with other people to achieve objectives on time and
excellence. Furthermore adaptive and fast learners in new environments.</p>
<p><a href="" class="tbl-pink">More About Me</a></p>
</div>
</section>
<!-- untuk about-->
<section id="about">
<div class="tengah">
<div class="kolom">
<p class="deskripsi">All About Me</p>
<h2>Education</h2>
</div>
<div class="box">
<div class="card">
<img src="https://cdn-icons-png.flaticon.com/128/10760/10760666.png">
<h5>Islamic Junior High School 1 Tulungagung</h5>
<div class="pra">
<p>When I was in junior high school, I became a basketball player for 2 years. Several times I participated in inter-school basketball matches. Even though I'm a little busy in extracurricular activities, I don't neglect my studies. In fact, I can still excel in ranking in the top 10 at school</p>
<p style="text-align: center;">
<a href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<img src="https://cdn-icons-png.flaticon.com/128/2153/2153314.png">
<h5>Islamic Senior High School 2 Tulungagung</h5>
<div class="pra">
<p>In high school, I followed some extracurriculars. There are basketball, chemistry Olympiad, and electronics. When I graduated, I got second place in my class, so I was able to enter my dream university, namely ITS, through the SNMPTN route and got a scholarship too.</p>
<p style="text-align: center;">
<a href="#">Read More</a>
</p>
</div>
</div>
<div class="card">
<img src="https://cdn-icons-png.flaticon.com/128/5351/5351063.png">
<h5>Sepuluh Nopember Institute of Technology</h5>
<div class="pra">
<p>In high school, I followed some extracurriculars. There are basketball, chemistry Olympiad, and electronics. When I graduated, I got second place in my class, so I was able to enter my dream university, namely ITS, through the SNMPTN route and got a scholarship too.</p>
<p style="text-align: center;">
<a href="#">Read More</a>
</p>
</div>
</div>
</div>
<div class="kolom">
<h2></h2>
</div>
</div>
</section>
</div>
</body>
</html>
CSS
* {
text-decoration: none;
margin: 0;
padding: 0px;
}
body {
margin: 0;
padding: 0px;
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
margin: auto;
position: relative;
}
.logo a {
font-size: 50px;
font-weight: 800;
float: left;
font-family: Courier;
color: #131f09;
}
.menu {
float: right;
}
nav {
width: 100%;
margin: auto;
display: flex;
line-height: 80px;
position: sticky;
position: -webkit-sticky;
top: 0;
background: #94A684;
z-index: 1;
border-bottom: 1px solid #131f09;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav ul li {
float: left;
}
nav ul li a {
color: #131f09;
font-weight: bold;
text-align: center;
padding: 0px 16px 0px 16px;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
section {
margin: auto;
display: flex;
margin-bottom: 50px;
}
.kolom {
margin-top: 50px;
margin-bottom: 50px;
}
.kolom .deskripsi {
font-size: 20px;
font-weight: bold;
font-family: 'comic sans';
color: #131f09;
}
h2 {
font-family: 'comic sans';
font-weight: 800;
font-size: 45px;
margin-bottom: 20px;
color: #131f09;
width: 100%;
line-height: 50px;
}
p {
font-size: 15px;
text-align: justify;
font-family: 'comic sans ms';
color: #131f09;
}
a.tbl-biru {
background: #131f09;
border-radius: 20px;
margin-top: 20px;
padding: 15px 20px 15px 20px;
color: #FFFF;
cursor: pointer;
font-weight: bold;
}
a.tbl-biru:hover {
background: #DAD4B5;
text-decoration: none;
}
a.tbl-pink {
background: #94A684;
border-radius: 20px;
margin-top: 20px;
padding: 15px 20px 15px 20px;
color: #FFFF;
cursor: pointer;
font-weight: bold;
}
a.tbl-pink:hover {
background: #131f09;
text-decoration: none;
}
p {
margin: 10px 0px 10px 0px;
padding: 10px 0px 10px 0px;
}
.tengah {
text-align: center;
width: 100%;
}
.box {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.card {
height: 365px;
width: 335px;
padding: 20px 35px;
background: #94A684;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
border: 1px solid #131f09;
}
.card img {
width: 50px;
border-radius: 50%;
}
.card h5 {
color: #131f09;
font-size: 18px;
margin-bottom: 15px;
}
.pra p {
color: #131f09;
font-size: 12px;
line-height: 27px;
margin-bottom: 15px;
text-align: justify;
}
.pra p a {
background-color: #131f09;
color: white;
border: 2px solid white;
font-weight: bold;
padding: 8px 20px 8px 20px;
border-radius: 30px;
}
.pra p a:hover {
background-color: #DAD4B5;
border: 2px solid white;
cursor: pointer;
}
Dokumentasi hasil:
.png)
.png)
