Tugas 1 - Membuat Situs Pribadi dengan HTML dan CSS
6 September 2022
Pada tugas 1 ini kita membuat situs pribadi yang memuat informasi-informasi tentang diri kita menggunakan HTML dan CSS sederhana. HTML digunakan untuk membuat kerangka halaman website. Dalam website ini memuat informasi tentang diri, kontak, hobi, dan riwayat pendidikan saya. CSS digunakan untuk memperindah halaman yang telah saya buat. Kemudian untuk deployment website saya menggunakan Github Pages.
Berikut adalah tampilan dari web-nya:
Screenshoot
Source Code
- 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" />
<!-- css.gg -->
<link href="https://css.gg/css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<title>Tugas 1 | Membuat Situs Pribadi dengan HTML dan CSS</title>
</head>
<body>
<div class="container">
<aside></aside>
<header>
<h1>ARIEF BADRUS SHOLEH</h1>
<h2>Mahasiswa Teknik Informatika</h2>
</header>
<section class="hero">
<img src="img/profile-picture.jpg" alt="Profile picture" />
</section>
<section class="profile">
<h3>PROFIL</h3>
<p>
Perkenalkan nama saya Arief Badrus Sholeh. Saya lahir di Pamekasan pada tanggal 11 Januari 2002. Saya berasal dari Madura. Status saya saat ini belum menikah. Saya berkewarganegaraan Indonesia dan merupakan mahasiswa aktif di
Institut Teknologi Sepuluh Nopember jurusan Teknik Informatika. Saya merupakan seorang muslim
</p>
</section>
<section class="aside2">
<section class="contact">
<h3>KONTAK</h3>
<ul>
<li class="location"><a href="">Pademawu 69321, Pamekasan Madura</a></li>
<li class="wa"><a href="">+62852 3268 2405</a></li>
<li class="email"><a href="">arifbadrus08@gmail.com</a></li>
<li class="instagram"><a href="https://www.instagram.com/ariefbadrussholeh/">ariefbadrussholeh</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/in/arief-badrus-sholeh/">Arief Badrus Sholeh</a></li>
</ul>
</section>
<section class="hobby">
<h3>HOBI</h3>
<p>Saya hobi mendengarkan musik dan memainkan alat musik, seperti gitar dan piano. Saya juga suka bermain game bersama teman</p>
</section>
</section>
<section class="education">
<h3>PENDIDIKAN</h3>
<ul>
<li>
Institut Teknologi Sepuluh Nopember (2020-Sekarang)
<h4>S1 Teknik Informatika</h4>
<ul class="activity">
<li>Staff Ahli UKM Rebana ITS 2022 - Divisi Kebudayaan</li>
<li>Staff Jamaah Masjid Manarul Ilmi 2022 - Divisi Humas</li>
</ul>
</li>
<li>
SMA Negeri 3 Pamekasan (2017-2020)
<h4>Kelas Unggulan MIPA 1</h4>
<ul class="activity">
<li>Anggota Ekstrakurikuler Robotika - RESET</li>
<li>Anggota Ekstrakurikuler Kerohanian Islam - ROHIS</li>
</ul>
</li>
<li>
SMP Negeri 1 Pademawu (2014-2017)
<h4>Kelas Unggulan</h4>
</li>
<li>SD Negeri Banyuanyar 1 Sampang (2008-2014)</li>
</ul>
</section>
</div>
</body>
</html>- CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&display=swap");
:root {
/*Font Color*/
--primary-color: #123974;
--secondary-color: #5a76a6;
--light-color: #becde2;
--white: #ffffff;
}
* {
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
}
body {
margin-top: 40px;
margin-bottom: 40px;
}
h3 {
font-size: 1.2rem;
font-weight: 600;
text-decoration: underline;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
h4 {
font-weight: 500;
font-style: italic;
}
p {
font-size: 1rem;
}
ul {
list-style: none;
}
ul li a {
text-decoration: none;
color: black;
}
a:hover {
color: var(--primary-color);
text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7);
}
ul li {
margin-bottom: 1rem;
padding-left: 1.3em;
}
.container {
margin: auto;
width: 720px;
background-color: var(--white);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"aside header header header"
"hero profile profile profile"
"aside2 education education education";
}
aside {
grid-area: aside;
background-color: var(--light-color);
}
header {
grid-area: header;
padding: 1rem;
}
header h1 {
color: var(--primary-color);
font-weight: 800;
}
header h2 {
color: var(--light-color);
font-weight: 400;
font-size: 1.3em;
}
section.hero {
grid-area: hero;
background-color: var(--secondary-color);
padding: 0.7rem;
}
section.hero img {
width: 180px;
border-radius: 100px;
/*border: 0.3rem solid var(--light-color);*/
}
section.profile {
text-align: end;
grid-area: profile;
background-color: var(--secondary-color);
padding: 1.3rem 1rem;
}
section.profile h3,
section.profile p {
color: var(--white);
}
section.aside2 {
grid-area: aside2;
background-color: var(--light-color);
padding: 1.3rem 1rem;
}
section.contact {
margin-bottom: 1.5rem;
}
section.contact li:before {
content: "\f041"; /* FontAwesome Unicode */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* same as padding-left set on li */
width: 1.3em; /* same as padding-left set on li */
}
section.contact li.wa:before {
content: "\f232"; /* FontAwesome Unicode */
font-family: FontAwesome;
}
section.contact li.email:before {
content: "\f0e0"; /* FontAwesome Unicode */
font-family: FontAwesome;
}
section.contact li.instagram:before {
content: "\f16d"; /* FontAwesome Unicode */
font-family: FontAwesome;
}
section.contact li.linkedin:before {
content: "\f08c"; /* FontAwesome Unicode */
font-family: FontAwesome;
}
section.hobby {
margin-bottom: 1.5rem;
}
section.education {
grid-area: education;
padding: 1.3rem 1rem 1.3rem 6rem;
}
section.education ul li {
padding-left: 0;
font-weight: 600;
color: var(--primary-color);
}
ul.activity {
list-style-type: disc;
margin-left: 1.3rem;
margin-top: 0.5rem;
}
section.education ul.activity li {
margin-bottom: 0.5rem;
font-weight: 400;
color: black;
} Nama : Arief Badrus Sholeh
NRP : 5025201228
Kelas : Pemrograman Web A
Tahun : 2022/2023
Komentar
Posting Komentar