5803025001/w11_01_Nathan_personalPage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fourth batch, finish the about but still not yet able to find the exact img because i simply dont had any

Browse Source
This commit is contained in:
5803025001
2026-11-07 04:25:02 +07:00
parent 05a23c6804
commit 25946424d1
5 changed files with 245 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
about.css
+32 -10
View File
@@ -1,16 +1,38 @@
.about-nav {
margin-bottom: 3eem;
/* External CSS: mengatur posisi header */
.header {
margin: 1em auto;
width: min(1500px, 100%);
}
.about-nav ul {
display: flex;
justify-content: flex-end;
align-items: center;
list-style-type: none;
gap: 2eem;
padding: 0;
/* External CSS: mengatur posisi navigasi */
.nav {
margin: 1em auto 3em auto;
width: min(1500px, 100%);
}
.about-nav li:first-child {
/* Mengatur posisi menu Home */
.nav li:first-child {
margin-right: auto;
}
/* External CSS: mengatur layout container utama */
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
width: min(1100px, 100%);
margin: 0 auto;
box-sizing: border-box;
background-color: #ffffff;
border: 1px solid #bdbdbd;
border-radius: 12px;
padding: 30px;
}
/* External CSS: mengatur tampilan footer */
footer {
margin-top: 3rem;
padding: 20px;
text-align: center;
}
about.html
+19 -19
View File
@@ -4,24 +4,18 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<!-- External CSS : Mengatur Layout Header, Nav, dan container -->
<link rel="stylesheet" href="about.css">
<!-- Tailwind CSS : menyediakan styling komponen -->
<script src="https://cdn.tailwindcss.com"></script>
<!--Internal CSS : Styling background, font dan tipografi-->
<style>
#about-page {
box-sizing: border-box;
background-color: #e8e8e8;
color: #222222;
font-family: Arial, sans-serif;
}
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
background-color: #ffffff;
border: 1px solid #bdbdbd;
border-radius: 12px;
padding: 30px;
padding: 20px;
}
.text-container {
@@ -33,15 +27,21 @@
padding: 20px;
}
.text-container p {
text-align: justify;
}
</style>
</head>
<body id="about-page">
<!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
<header class="header" style="margin: 1em auto; width: min(1500px,100%);">
<nav class="nav" style="margin: 1em auto 3em auto; width: min(1500px,100%);">
<header class="header">
<nav class="nav">
<!-- Inline CSS: mengatur susunan dan jarak menu secara langsung pada elemen ul -->
<ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none; gap: 2em; padding: 0%;">
<li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
<li><a href="index.html" target="_self" title="Home">Home</a></li>
<li><a href="about.html" target="_self" title="About me">About</a></li>
<li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
<li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
@@ -52,10 +52,10 @@
<main>
<section>
<div class="flex-container" style="display: flex; flex-direction: column; align-items: center;" >
<h1 style="text-align: center;"> Know Me Fully </h1>
<div class="flex-container" >
<h1 class="inline-block rounded-full border border-gray-500 bg-gray-100 px-4 py-2 text-sm font-semibold tracking-wide text-gray-800"> Know Me Fully </h1>
<div class="text-container">
<p style="max-width: 50em; text-align: justify;">My Full name is Nathan Handokok Sugandi, I am a Computer Science student at Widya Mandala Catholic University Surabaya (UKWMS).
<p class="text-gray-800">My Full name is Nathan Handokok Sugandi, I am a Computer Science student at Widya Mandala Catholic University Surabaya (UKWMS).
I have big interest in technology and programming though im a slow learner and it take a lot of time but still i enjoy it.
Outside of my academic learning, I like to play video games during my free time, drawing some stuff, and occasionally playing with my piano.
I believe that learning is a continuous process, and every experience gives me an opportunity to grow no matter how small or big it is.
@@ -63,7 +63,7 @@
</div>
<h2>My Education Journey</h2>
<div>
<ol>
<ol class="list-decimal list-outside pl-6">
<li>PG Mandala: 2010-2011</li>
<li>TK Santa Lorent: 2011-2013</li>
<li>SD Santa Lorent: 2013-2019</li>
@@ -73,7 +73,7 @@
</ol>
</div>
<h2 > My Favourite Quote?</h2>
<p style="text-align: center; font-style: italic;">Would You Intercept Me? I'd Intercept Me!</p>
<p class="italic text-center">Would You Intercept Me? I'd Intercept Me!</p>
</div>
</section>
</main>
hobbies.css
+117
View File
@@ -0,0 +1,117 @@
/* Mengatur tampilan dasar seluruh halaman */
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #e8e8e8;
color: #222222;
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Mengatur posisi header dan navigasi */
.header {
width: min(1500px, calc(100% - 40px));
margin: 1em auto;
}
.nav {
margin-bottom: 3em;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
list-style-type: none;
gap: 2em;
padding: 0;
}
.nav-list li:first-child {
margin-right: auto;
}
.nav-list a {
display: block;
color: #222222;
text-decoration: none;
padding: 8px 12px;
border-radius: 6px;
}
.nav-list a:hover {
background-color: #d0d0d0;
}
/* Mengatur container utama halaman Hobbies */
.hobbies-main {
width: min(1100px, calc(100% - 40px));
margin: 0 auto;
}
/* Mengatur judul dan deskripsi halaman */
.page-title {
text-align: center;
margin-bottom: 10px;
}
.page-intro {
text-align: center;
margin-bottom: 2rem;
color: #555555;
}
/* Mengatur susunan kartu hobi */
.hobby-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
/* Mengatur tampilan setiap kartu hobi */
.hobby-item img {
display: block;
width: 100%;
max-width: 500px;
height: auto;
}
/* Mengatur ukuran dan tampilan foto */
.hobby-card img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border: 1px solid #cccccc;
border-radius: 8px;
}
/* Mengatur judul dan deskripsi setiap hobi */
.hobby-content h2 {
margin: 0;
color: #222222;
}
.hobby-content p {
color: #555555;
text-align: justify;
}
/* Menyesuaikan tampilan untuk tablet */
.hobbies-container {
width: 100%;
margin: 0 auto;
padding: 25px;
background-color: #ffffff;
border: 1px solid #bdbdbd;
border-radius: 12px;
}
/* Mengatur tampilan footer */
footer {
margin-top: 3rem;
padding: 20px;
text-align: center;
}
hobbies.html
+73 -5
View File
@@ -4,14 +4,15 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hobbies</title>
<!-- External CSS : Mengatur seluruh style dari Hobbies-->
<link rel="stylesheet" href="hobbies.css">
</head>
<body style="box-sizing: border-box;">
<body>
<!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
<header style="margin: 1em auto; width: min(1500px,100%);">
<nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
<ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none;gap: 2em; padding: 0%;">
<li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
<header class="header">
<nav class="nav">
<ul class="nav-list">
<li >Home</a></li>
<li><a href="about.html" target="_self" title="About me">About</a></li>
<li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
<li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
@@ -19,6 +20,73 @@
</ul>
</nav>
</header>
<main class="hobbies-main">
<h1 class="page-title">My Hobbies</h1>
<p class="page-intro">
Everyone has their own way to enjoy their free time.
Here are some of my favourite activities.
</p>
<!-- Hobby section: menampilkan tiga hobi beserta foto dan deskripsinya -->
<section class="hobbies-container">
<article class="hobby-item">
<img src="images/video-games.jpg"
alt="Foto saya sedang bermain video game">
<div class="hobby-content">
<h2>Playing Video Games</h2>
<p>
I enjoy playing video games during my free time.
Gaming helps me relax and gives me an opportunity
to explore different worlds and challenges.
</p>
</div>
</article>
<article class="hobby-item">
<img src="images/drawing.jpg"
alt="Foto saya sedang menggambar">
<div class="hobby-content">
<h2>Drawing</h2>
<p>
Drawing is one of my favourite creative activities.
I enjoy drawing different things and expressing
my ideas through illustrations.
</p>
</div>
</article>
<article class="hobby-item">
<img src="images/piano.jpg"
alt="Foto saya sedang bermain piano">
<div class="hobby-content">
<h2>Playing the Piano</h2>
<p>
I occasionally play the piano during my free time.
It is a fun activity that allows me to enjoy music
and practice my musical skills.
</p>
</div>
</article>
</section>
</main>
<footer class="footer">
<p>Author: Nathan Handoko</p>
<p>
Email:
<a href="mailto:nathan-h.inf25@ukwms.ac.id">
nathan-h.inf25@ukwms.ac.id
</a>
</p>
<p>Phone Number: 0851-0270-5905</p>
</footer>
</body>
</html>
index.html
+2 -2
View File
@@ -6,7 +6,7 @@
<title>Home</title>
</head>
<body style="box-sizing: border-box;">
<body style="box-sizing: border-box; background-color: #e8e8e8;">
<!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
<header style="margin: 1em auto; width: min(1500px,100%);">
<nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
@@ -34,7 +34,7 @@
</section>
</main>
<footer>
<footer style="text-align: center;">
<p>Author: Nathan Handoko</p>
<p><a href="mailto:nathan-h.inf25@ukwms.ac.id">gmail : nathan-h.inf25@ukwms.ac.id</a></p>
<p>Phone Number : 0851-0270-5905</p>